wcs-core 3.0.0 → 4.0.1

package/dist/collection/components/select/select.css

@@ -178,11 +178,13 @@
   --wcs-select-value-color: var(--wcs-primary);
   --wcs-select-border-color: transparent;
   --wcs-select-overlay-max-height: 360px;
-  --wcs-select-option-height: 42px;
+  --wcs-select-option-height: var(--wcs-size-m);
+  --wcs-select-border-width: 1px;
   display: block;
   position: relative;
   outline: none;
   user-select: none;
+  box-sizing: border-box;
 }
 :host svg {
   flex-shrink: 0;
@@ -198,18 +200,6 @@
   opacity: 100;
 }
 
-:host([class~=expanded][overlaydirection=top]) .wcs-select-control {
-  border: var(--wcs-select-border-color) solid 1px;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-:host([class~=expanded][overlaydirection=bottom]) .wcs-select-control {
-  border: var(--wcs-select-border-color) solid 1px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
 :host(.expanded) {
   --wcs-select-border-color: var(--wcs-text-light);
 }
@@ -243,7 +233,8 @@
 }
 
 label {
-  padding: calc(var(--wcs-padding) / 2) var(--wcs-padding);
+  padding-left: calc(var(--wcs-padding) - var(--wcs-select-border-width));
+  padding-right: calc(var(--wcs-padding) - var(--wcs-select-border-width));
   font-weight: 500;
   cursor: pointer;
   color: var(--wcs-select-color);
@@ -253,11 +244,28 @@ label {
   text-overflow: ellipsis;
 }
 
+:host([size=m]) {
+  min-height: var(--wcs-size-m);
+  --wcs-select-font-size: 1rem;
+}
+:host([size=m]) .wcs-select-control {
+  min-height: var(--wcs-size-m);
+}
+
+:host([size=l]) {
+  min-height: var(--wcs-size-l);
+  --wcs-select-font-size: 1.0625rem;
+}
+:host([size=l]) .wcs-select-control {
+  min-height: var(--wcs-size-l);
+}
+
 :host([chips]) .wcs-select-control {
   flex-wrap: wrap;
 }
 
 .wcs-select-control {
+  box-sizing: border-box;
   --mdc-ripple-fg-size: 0;
   --mdc-ripple-left: 0;
   --mdc-ripple-top: 0;
@@ -272,8 +280,8 @@ label {
   padding-right: var(--wcs-text-padding);
   background-color: var(--wcs-select-background-color);
   border-radius: var(--wcs-select-border-radius);
-  border: var(--wcs-select-border-color) solid 1px;
-  font-size: 1rem;
+  border: var(--wcs-select-border-color) solid var(--wcs-select-border-width);
+  font-size: var(--wcs-select-font-size, 1rem);
   line-height: 1.5;
   cursor: pointer;
 }
@@ -371,42 +379,38 @@ label {
   font-weight: var(--wcs-font-weight-form-value);
 }
 
+.wcs-select-value-container {
+  margin-top: 4px;
+  margin-bottom: 4px;
+  margin-left: calc(var(--wcs-margin) / 2);
+  max-width: calc(100% - (24px + var(--wcs-base-margin)));
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
 .wcs-select-chip {
+  line-height: 1.375;
   color: var(--wcs-contrast);
   background-color: var(--wcs-base);
   border-radius: 0.75rem;
   display: flex;
   align-items: center;
-  margin: calc(var(--wcs-base-margin) / 2);
   padding: calc((var(--wcs-padding) - 8px) / 2) var(--wcs-padding);
   overflow: initial;
 }
 
-:host([overlaydirection=top]) .wcs-select-options {
-  -webkit-transform: translateY(-100%);
-  transform: translateY(-100%);
-  border-left: var(--wcs-select-border-color) solid 1px;
-  border-right: var(--wcs-select-border-color) solid 1px;
-  border-top: var(--wcs-select-border-color) solid 1px;
-  border-top-right-radius: var(--wcs-border-radius);
-  border-top-left-radius: var(--wcs-border-radius);
-}
-
-:host([overlaydirection=bottom]) .wcs-select-options {
-  border-left: var(--wcs-select-border-color) solid 1px;
-  border-right: var(--wcs-select-border-color) solid 1px;
-  border-bottom: var(--wcs-select-border-color) solid 1px;
-  border-bottom-right-radius: var(--wcs-border-radius);
-  border-bottom-left-radius: var(--wcs-border-radius);
-}
-
 .wcs-select-options {
   display: none;
   position: absolute;
-  z-index: 1;
-  margin: 0;
+  z-index: 999999999;
+  border: solid var(--wcs-select-border-width) var(--wcs-select-border-color);
+  border-radius: var(--wcs-select-border-radius);
   max-height: var(--wcs-select-overlay-max-height);
   overflow-y: auto;
+  width: calc(100% - 2 * var(--wcs-select-border-width));
   background-color: var(--wcs-white);
   color: var(--wcs-text-medium);
 }

package/dist/collection/components/select/select.js

@@ -1,10 +1,12 @@
 import { h, Host } from '@stencil/core';
 import _ from 'lodash';
 import { interpret, Machine } from 'xstate';
+import { isWcsSelectSize, WcsSelectSizeValue } from './select-interface';
 import { SelectArrow } from './select-arrow';
-import { isElement } from '../../utils/helpers';
+import { isDownArrowKey, isElement, isEnterKey, isEscapeKey, isHomeKey, isLeftArrowKey, isPageDownKey, isPageUpKey, isRightArrowKey, isTabKey, isUpArrowKey, generateUniqueId, findItemLabel, isSpaceKey, } from '../../utils/helpers';
 import { SelectChips } from './select-chips';
 import { MDCRipple } from '@material/ripple';
+import { createPopper } from '@popperjs/core';
 const SELECT_MACHINE_CONFIG = {
   key: 'select',
   initial: 'closed',
@@ -14,7 +16,7 @@ const SELECT_MACHINE_CONFIG = {
       on: {
         CLICK: 'opened',
         OPEN: 'opened',
-        OPTION_CLICKED: { actions: ['selectOption'] }
+        OPTION_SELECTED: { actions: ['selectOption'] }
       },
     },
     opened: {
@@ -22,7 +24,7 @@ const SELECT_MACHINE_CONFIG = {
       on: {
         CLICK: 'closed',
         CLOSE: 'closed',
-        OPTION_CLICKED: { actions: ['selectOption'] }
+        OPTION_SELECTED: { actions: ['selectOption'] }
       },
     },
   }
@@ -34,11 +36,13 @@ const SELECT_MACHINE_CONFIG = {
  *  <wcs-select>
  *      <wcs-select-option value="1">One</wcs-select-option>
  *  </wcs-select>```
- * @todo Complete keyboard navigation.
  */
 export class Select {
   constructor() {
+    this.selectId = `wcs-select-${selectIds++}`;
+    this.optionsId = generateUniqueId("OPTIONS");
     this.expanded = false;
+    this.size = 'm';
     this.hasLoaded = false;
     this.displayText = undefined;
     this.focused = undefined;
@@ -133,9 +137,29 @@ export class Select {
     if (this.value !== undefined) {
       this.updateSelectedValue(this.value);
     }
+    this.popper = this.createPopperInstance();
+    // if the select is inside a wcs-form-field, we set an id to the wcs-label if present
+    // the wcs-label element reference is kept to compute aria-label value during the rendering
+    this.labelElement = findItemLabel(this.el);
+    if (this.labelElement) {
+      this.labelElement.id = this.selectId + "-lbl";
+    }
     // TODO: is this still usefull for anything ?
     this.hasLoaded = true;
   }
+  createPopperInstance() {
+    return createPopper(this.controlEl, this.optionsEl, {
+      placement: "bottom",
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 4] // we want 4px between select control and select options
+          }
+        }
+      ]
+    });
+  }
   emitChange(newValue) {
     this.wcsChange.emit({
       value: newValue
@@ -160,6 +184,12 @@ export class Select {
     });
     observer.observe(this.el, { childList: true });
   }
+  componentWillLoad() {
+    if (!isWcsSelectSize(this.size)) {
+      console.error(`Invalid size value for wcs-select : "${this.size}". Must be one of "${WcsSelectSizeValue.join(', ')}"`);
+      this.size = "m"; // Default fallback value
+    }
+  }
   componentWillUpdate() {
     if (this.multiple) {
       this.options
@@ -174,22 +204,47 @@ export class Select {
     }
     return [];
   }
+  get notDisabledOptions() {
+    var _a;
+    const opts = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('wcs-select-option:not([disabled])');
+    if (opts && opts.length !== 0) {
+      return opts;
+    }
+    return [];
+  }
   initMachineOptions() {
     return {
       actions: {
         open: () => {
+          var _a;
           if (!this.disabled) {
-            this.updateOverlayDirection();
             this.expanded = true;
-            this.focused = true;
+            this.focused = false;
+            if (this.notDisabledOptions.length > 0) {
+              this.lastFocusedOptionElement = (_a = this.lastSelectedOptionElement) !== null && _a !== void 0 ? _a : this.notDisabledOptions[0];
+              requestAnimationFrame(() => {
+                var _a;
+                (_a = this.lastFocusedOptionElement) === null || _a === void 0 ? void 0 : _a.focus();
+              });
+            }
           }
         },
-        close: () => {
-          this.focused = true;
+        close: (_, event) => {
+          var _a, _b;
+          if (event.type === 'CLOSE') {
+            if ((_a = event.value) === null || _a === void 0 ? void 0 : _a.shouldBlur) {
+              (_b = this.el.closest("wcs-select")) === null || _b === void 0 ? void 0 : _b.focus();
+              this.focused = false;
+            }
+            else {
+              this.el.focus();
+              this.focused = true;
+            }
+          }
           this.expanded = false;
         },
         selectOption: (_, event) => {
-          if (event.type === 'OPTION_CLICKED') {
+          if (event.type === 'OPTION_SELECTED') {
             this.handleClickEvent(event.value);
           }
         }
@@ -199,41 +254,6 @@ export class Select {
       }
     };
   }
-  /**
-   * This method controls whether or not the overlay has enough space to be displayed
-   * at the bottom of the select component.
-   *
-   * It compute the size of the expended select by adding the theoretical dimensions of the
-   * overlay calculated from the number of options plus the initial select size.
-   * @private
-   */
-  updateOverlayDirection() {
-    // We retrieve values from CSS variables
-    const overlayMaxHeight = +getComputedStyle(this.el).getPropertyValue('--wcs-select-overlay-max-height').replace(/\D/g, '');
-    const optionSize = +getComputedStyle(this.el).getPropertyValue('--wcs-select-option-height').replace(/\D/g, '');
-    const selectBounding = this.el.getBoundingClientRect();
-    const maxOptionsCount = Math.floor(overlayMaxHeight / optionSize);
-    // Maximum size of the overlay is 360px, otherwise the size is calculated from the number of options
-    const optionsOverlaySize = this.options.length > maxOptionsCount ? overlayMaxHeight + 1 : this.options.length * optionSize + 1;
-    const remainingHeightAfterOpen = window.innerHeight - (selectBounding.y + selectBounding.height + optionsOverlaySize);
-    // There are not enough pixels to open the overlay below the component
-    if (remainingHeightAfterOpen < 0) {
-      this.overlayDirection = 'top';
-    }
-    else {
-      this.overlayDirection = 'bottom';
-    }
-  }
-  updateOverlayMargin() {
-    if (this.controlEl && this.optionsEl) {
-      if (this.overlayDirection === 'top') {
-        this.optionsEl.style.marginTop = '-' + this.controlEl.getBoundingClientRect().height + 'px';
-      }
-      else {
-        this.optionsEl.style.marginTop = '0';
-      }
-    }
-  }
   handleClickEvent(event) {
     if (this.multiple) {
       this.handleClickOnMultiple(event);
@@ -248,10 +268,13 @@ export class Select {
       const { value, displayText, chipColor, chipBackgroundColor } = event;
       this.values.push({ value, displayText, chipColor, chipBackgroundColor });
       event.source.selected = true;
+      this.lastSelectedOptionElement = event.source;
     }
     else {
       event.source.selected = false;
       this.values.splice(index, 1);
+      if (this.lastSelectedOptionElement === event.source)
+        this.lastSelectedOptionElement = null;
     }
     this.updateValueWithValues();
   }
@@ -271,6 +294,7 @@ export class Select {
     event.source.selected = true;
     this.value = event.value;
     this.displayText = event.displayText;
+    this.lastSelectedOptionElement = event.source;
     this.stateService.send('CLOSE');
   }
   disconnectedCallback() {
@@ -302,20 +326,136 @@ export class Select {
     }
   }
   onWindowClickEvent(event) {
-    // We search in the full path of the event, because if a select is used in another web component,
-    // the event captured by the windows will target the parent web component and not the select.
-    const clickedOnSelectOrChildren = event.composedPath().map(x => x.nodeName).indexOf('WCS-SELECT') !== -1;
+    const firstSelectInEventPath = event.composedPath().filter(x => x.nodeName === 'WCS-SELECT')[0];
+    const clickOnCurrentSelect = firstSelectInEventPath === this.el;
     // TODO: Move this logic in the state machine
     // FIXME: Doesnt work with single + disabled option
-    if (this.expanded && !clickedOnSelectOrChildren) {
+    if (this.expanded && !clickOnCurrentSelect) {
       this.stateService.send('CLOSE');
     }
   }
+  onKeyDown(_event) {
+    // close
+    if (this.stateService.getSnapshot().matches("closed")) {
+      if (isEnterKey(_event) || (_event.altKey && isDownArrowKey(_event)) || isSpaceKey(_event)) {
+        _event.preventDefault();
+        _event.stopPropagation();
+        this.stateService.send('OPEN');
+        return;
+      }
+      if (this.multiple) {
+        if (isDownArrowKey(_event)) {
+          this.stateService.send('OPEN');
+        }
+      }
+      else {
+        if (isDownArrowKey(_event) || isRightArrowKey(_event)) {
+          _event.preventDefault();
+          this.selectClosestOption("next");
+        }
+        if (isUpArrowKey(_event) || isLeftArrowKey(_event)) {
+          _event.preventDefault();
+          this.selectClosestOption("previous");
+        }
+        else if (isPageDownKey(_event)) {
+          _event.preventDefault();
+          this.selectLastOption();
+        }
+        else if (isPageUpKey(_event) || isHomeKey(_event)) {
+          _event.preventDefault();
+          this.selectFirstOption();
+        }
+      }
+    }
+    // open
+    else if (this.stateService.getSnapshot().matches("opened")) {
+      if (isEscapeKey(_event) || (_event.altKey && isUpArrowKey(_event))) {
+        this.stateService.send({ type: "CLOSE", value: { shouldBlur: false } });
+      }
+      else if (isTabKey(_event) || (_event.shiftKey && isTabKey(_event))) {
+        this.stateService.send({ type: "CLOSE", value: { shouldBlur: true } });
+      }
+      else if (isDownArrowKey(_event)) {
+        _event.preventDefault();
+        this.focusClosestOption("next");
+      }
+      else if (isUpArrowKey(_event)) {
+        _event.preventDefault();
+        this.focusClosestOption("previous");
+      }
+      else if (isPageUpKey(_event) || isHomeKey(_event)) {
+        _event.preventDefault();
+        this.focusFirstOption();
+      }
+      else if (isPageDownKey(_event)) {
+        _event.preventDefault();
+        this.focusLastOption();
+      }
+    }
+  }
+  getClosestActiveOptionIndexForState(direction, state) {
+    let currentIndex = Array.from(this.notDisabledOptions).indexOf(state === 'focused' ? this.lastFocusedOptionElement : this.lastSelectedOptionElement);
+    if (direction === 'next' && currentIndex < this.notDisabledOptions.length - 1) {
+      currentIndex++;
+    }
+    else if (direction === 'previous' && currentIndex > 0) {
+      currentIndex--;
+    }
+    else {
+      return 'nothing';
+    }
+    return currentIndex;
+  }
+  selectOption(indexToSelect) {
+    this.lastSelectedOptionElement = this.notDisabledOptions[indexToSelect];
+    this.lastSelectedOptionElement.selected = true;
+    this.sendOptionSelectedToStateMachine({
+      source: this.lastSelectedOptionElement,
+      value: this.value,
+      displayText: this.lastSelectedOptionElement.innerText
+    });
+  }
+  selectClosestOption(direction) {
+    const indexToSelect = this.getClosestActiveOptionIndexForState(direction, 'selected');
+    if (indexToSelect === 'nothing')
+      return;
+    this.selectOption(indexToSelect);
+  }
+  selectFirstOption() {
+    if (this.notDisabledOptions.length < 1) {
+      return;
+    }
+    this.selectOption(0);
+  }
+  selectLastOption() {
+    if (this.notDisabledOptions.length < 1) {
+      return;
+    }
+    this.selectOption(this.notDisabledOptions.length - 1);
+  }
+  focusOption(indexToFocus) {
+    var _a;
+    this.lastFocusedOptionElement = this.notDisabledOptions[indexToFocus];
+    (_a = this.lastFocusedOptionElement) === null || _a === void 0 ? void 0 : _a.focus();
+    this.el.setAttribute("aria-activedescendant", this.lastFocusedOptionElement.id);
+  }
+  focusClosestOption(direction) {
+    const indexToFocus = this.getClosestActiveOptionIndexForState(direction, 'focused');
+    if (indexToFocus === 'nothing')
+      return;
+    this.focusOption(indexToFocus);
+  }
+  focusFirstOption() {
+    this.focusOption(0);
+  }
+  focusLastOption() {
+    this.focusOption(this.notDisabledOptions.length - 1);
+  }
   selectedOptionChanged(event) {
-    this.sendOptionClickedToStateMachine(event.detail);
+    this.sendOptionSelectedToStateMachine(event.detail);
   }
-  sendOptionClickedToStateMachine(event) {
-    this.stateService.send({ type: 'OPTION_CLICKED', value: event });
+  sendOptionSelectedToStateMachine(event) {
+    this.stateService.send({ type: 'OPTION_SELECTED', value: event });
   }
   onSlotchange() {
     this.updateSelectedValue(this.value);
@@ -324,27 +464,22 @@ export class Select {
     this.options
       .forEach(opt => {
       if (opt.value === v.value) {
-        this.sendOptionClickedToStateMachine(Object.assign(Object.assign({}, v), { source: opt }));
+        this.sendOptionSelectedToStateMachine(Object.assign(Object.assign({}, v), { source: opt }));
       }
     });
   }
+  componentDidRender() {
+    var _a;
+    (_a = this.popper) === null || _a === void 0 ? void 0 : _a.update();
+  }
   render() {
-    if (this.hasLoaded) {
-      this.updateStyles();
-    }
-    this.updateOverlayMargin();
-    return (h(Host, Object.assign({ class: this.expanded ? 'expanded ' : '', overlayDirection: this.overlayDirection }, this.focusedAttributes()), h("div", { class: "wcs-select-control" }, this.hasValue
-      ? (this.chips ?
-        this.values.map((option) => h(SelectChips, { disabled: this.disabled, option: option, onRemove: this.removeChip.bind(this) }))
-        : h("label", { class: "wcs-select-value" }, this.displayText))
-      : h("label", { class: "wcs-select-placeholder" }, this.placeholder), h(SelectArrow, { up: this.expanded })), h("div", { class: "wcs-select-options" }, h("slot", { name: "wcs-select-option", onSlotchange: this.onSlotchange.bind(this) }))));
-  }
-  updateStyles() {
-    // Make the options container width the same width as everything.
-    const borderSize = 1;
-    // TODO: Consider using a mutation observer to rerender the size each time ?
-    // Be cautious as it may cause infinite loop with render ?
-    this.optionsEl.setAttribute('style', `width: ${Math.ceil(this.el.offsetWidth - 2 * borderSize)}px;`);
+    const ariaLabelValue = `${this.labelElement ? this.labelElement.innerText : ''} ${this.hasValue ? this.displayText : ''}`.trimEnd();
+    return (h(Host, Object.assign({ class: this.expanded ? 'expanded ' : '', overlayDirection: this.overlayDirection }, this.focusedAttributes(), { role: "combobox", "aria-haspopup": "listbox", "aria-disabled": this.disabled ? 'true' : null, "aria-expanded": this.expanded ? 'true' : 'false', "aria-controls": this.optionsId, "aria-owns": this.optionsId, "aria-multiselectable": this.multiple ? 'true' : 'false', "aria-label": ariaLabelValue }), h("div", { class: "wcs-select-control" }, h("div", { class: "wcs-select-value-container" }, this.hasValue
+      ?
+        (this.chips ?
+          this.values.map((option) => h(SelectChips, { disabled: this.disabled, option: option, onRemove: this.removeChip.bind(this) }))
+          : h("label", { class: "wcs-select-value" }, this.displayText))
+      : h("label", { class: "wcs-select-placeholder" }, this.placeholder)), h(SelectArrow, { up: this.expanded })), h("div", { class: "wcs-select-options", id: this.optionsId, role: "listbox" }, h("slot", { name: "wcs-select-option", onSlotchange: this.onSlotchange.bind(this) }))));
   }
   focusedAttributes() {
     return !this.disabled ? { tabIndex: 0 } : {};
@@ -363,6 +498,29 @@ export class Select {
   }
   static get properties() {
     return {
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "WcsSelectSize",
+          "resolved": "\"l\" | \"m\"",
+          "references": {
+            "WcsSelectSize": {
+              "location": "import",
+              "path": "./select-interface"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specify the size (height) of the select."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'m'"
+      },
       "value": {
         "type": "any",
         "mutable": true,
@@ -604,6 +762,12 @@ export class Select {
         "target": "window",
         "capture": false,
         "passive": false
+      }, {
+        "name": "keydown",
+        "method": "onKeyDown",
+        "target": undefined,
+        "capture": false,
+        "passive": false
       }, {
         "name": "wcsSelectOptionClick",
         "method": "selectedOptionChanged",
@@ -613,4 +777,5 @@ export class Select {
       }];
   }
 }
+let selectIds = 0;
 //# sourceMappingURL=select.js.map