@esri/calcite-components 1.0.0-beta.78 → 1.0.0-beta.81

package/dist/collection/components/combobox/combobox.js

@@ -1,17 +1,19 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.81
  */
 import { Component, h, Prop, State, Listen, Event, Element, Method, Watch, Host } from "@stencil/core";
 import { filter } from "../../utils/filter";
 import { debounce } from "lodash-es";
-import { createPopper, updatePopper, CSS as PopperCSS } from "../../utils/popper";
+import { createPopper, updatePopper, CSS as PopperCSS, popperMenuComputedPlacements, defaultMenuPlacement, filterComputedPlacements } from "../../utils/popper";
 import { guid } from "../../utils/guid";
-import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, ComboboxDefaultPlacement, TEXT } from "./resources";
+import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, TEXT } from "./resources";
 import { getItemAncestors, getItemChildren, hasActiveChildren } from "./utils";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { afterConnectDefaultValueSet, connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 import { createObserver } from "../../utils/observers";
+import { updateHostInteraction } from "../../utils/interactive";
 const isGroup = (el) => el.tagName === ComboboxItemGroup;
 const itemUidPrefix = "combobox-item-";
 const chipUidPrefix = "combobox-chip-";
@@ -56,22 +58,15 @@ export class Combobox {
      * @default "Remove tag"
      */
     this.intlRemoveTag = TEXT.removeTag;
-    //--------------------------------------------------------------------------
-    //
-    //  Private State/Props
-    //
-    //--------------------------------------------------------------------------
     this.internalValueChangeFlag = false;
     this.items = [];
     this.groupItems = [];
     this.selectedItems = [];
     this.visibleItems = [];
-    this.hideList = !this.active;
     this.activeItemIndex = -1;
     this.activeChipIndex = -1;
     this.activeDescendant = "";
     this.text = "";
-    this.open = this.active;
     this.textInput = null;
     this.mutationObserver = createObserver("mutation", () => this.updateItems());
     this.resizeObserver = createObserver("resize", () => this.setMaxScrollerHeight());
@@ -84,6 +79,12 @@ export class Combobox {
     //  Private Methods
     //
     // --------------------------------------------------------------------------
+    this.setFilteredPlacements = () => {
+      const { el, flipPlacements } = this;
+      this.filteredFlipPlacements = flipPlacements
+        ? filterComputedPlacements(flipPlacements, el)
+        : null;
+    };
     this.getValue = () => {
       const items = this.selectedItems.map((item) => item === null || item === void 0 ? void 0 : item.value.toString());
       return (items === null || items === void 0 ? void 0 : items.length) ? (items.length > 1 ? items : items[0]) : "";
@@ -101,8 +102,9 @@ export class Combobox {
             this.addCustomChip(this.text, true);
             event.preventDefault();
           }
-          else {
+          else if (this.active) {
             this.active = false;
+            event.preventDefault();
           }
           break;
         case "ArrowLeft":
@@ -112,22 +114,47 @@ export class Combobox {
           this.nextChip();
           break;
         case "ArrowUp":
-          event.preventDefault();
-          this.active = true;
           this.shiftActiveItemIndex(-1);
+          if (!this.comboboxInViewport()) {
+            this.el.scrollIntoView();
+          }
           break;
         case "ArrowDown":
-          event.preventDefault();
-          this.active = true;
+          if (!this.active) {
+            event.preventDefault();
+            this.active = true;
+          }
           this.shiftActiveItemIndex(1);
+          if (!this.comboboxInViewport()) {
+            this.el.scrollIntoView();
+          }
+          break;
+        case " ":
+          if (!this.textInput.value) {
+            event.preventDefault();
+            this.active = true;
+            this.shiftActiveItemIndex(1);
+          }
           break;
         case "Home":
-          this.active = true;
+          if (this.active) {
+            event.preventDefault();
+          }
           this.updateActiveItemIndex(0);
+          this.scrollToActiveItem();
+          if (!this.comboboxInViewport()) {
+            this.el.scrollIntoView();
+          }
           break;
         case "End":
-          this.active = true;
+          if (this.active) {
+            event.preventDefault();
+          }
           this.updateActiveItemIndex(this.visibleItems.length - 1);
+          this.scrollToActiveItem();
+          if (!this.comboboxInViewport()) {
+            this.el.scrollIntoView();
+          }
           break;
         case "Escape":
           this.active = false;
@@ -152,19 +179,14 @@ export class Combobox {
             this.removeLastChip();
           }
           break;
-        default:
-          if (!this.active) {
-            this.setFocus();
-          }
-          break;
       }
     };
     this.toggleCloseEnd = () => {
-      this.hideList = true;
+      this.active = false;
       this.el.removeEventListener("calciteComboboxClose", this.toggleCloseEnd);
     };
     this.toggleOpenEnd = () => {
-      this.hideList = false;
+      this.active = true;
       this.el.removeEventListener("calciteComboboxOpen", this.toggleOpenEnd);
     };
     this.transitionEnd = (event) => {
@@ -190,20 +212,20 @@ export class Combobox {
       }
       this.calciteComboboxChipDismiss.emit(event.detail);
     };
-    this.setFocusClick = (event) => {
+    this.clickHandler = (event) => {
       if (event.composedPath().some((node) => node.tagName === "CALCITE-CHIP")) {
         return;
       }
+      this.active = !this.active;
+      this.updateActiveItemIndex(0);
       this.setFocus();
     };
     this.setInactiveIfNotContained = (event) => {
       const composedPath = event.composedPath();
-      if ((!this.active && !this.open) ||
-        composedPath.includes(this.el) ||
-        composedPath.includes(this.referenceEl)) {
+      if (!this.active || composedPath.includes(this.el) || composedPath.includes(this.referenceEl)) {
         return;
       }
-      if (this.allowCustomValues && this.text) {
+      if (this.allowCustomValues && this.text.trim().length) {
         this.addCustomChip(this.text);
       }
       if (this.selectionMode === "single") {
@@ -215,7 +237,6 @@ export class Combobox {
         this.updateActiveItemIndex(-1);
       }
       this.active = false;
-      this.open = false;
     };
     this.setMenuEl = (el) => {
       this.menuEl = el;
@@ -284,27 +305,37 @@ export class Combobox {
         this.setMaxScrollerHeight();
       }
     };
+    this.scrollToActiveItem = () => {
+      const activeItem = this.visibleItems[this.activeItemIndex];
+      const height = this.calculateSingleItemHeight(activeItem);
+      const { offsetHeight, scrollTop } = this.listContainerEl;
+      if (offsetHeight + scrollTop < activeItem.offsetTop + height) {
+        this.listContainerEl.scrollTop = activeItem.offsetTop - offsetHeight + height;
+      }
+      else if (activeItem.offsetTop < scrollTop) {
+        this.listContainerEl.scrollTop = activeItem.offsetTop;
+      }
+    };
     this.comboboxFocusHandler = () => {
       var _a;
-      this.active = true;
       (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus();
     };
     this.comboboxBlurHandler = (event) => {
       this.setInactiveIfNotContained(event);
     };
   }
-  activeHandler(newValue, oldValue) {
-    // when closing, wait transition time then hide to prevent overscroll
-    if (oldValue && !newValue) {
-      this.el.addEventListener("calciteComboboxClose", this.toggleCloseEnd);
-      this.open = false;
-    }
-    else if (!oldValue && newValue) {
-      this.el.addEventListener("calciteComboboxOpen", this.toggleOpenEnd);
-      this.open = true;
+  activeHandler() {
+    if (this.disabled) {
+      this.active = false;
+      return;
     }
     this.reposition();
   }
+  handleDisabledChange(value) {
+    if (!value) {
+      this.active = false;
+    }
+  }
   maxItemsHandler() {
     this.setMaxScrollerHeight();
   }
@@ -323,6 +354,9 @@ export class Combobox {
       this.updateItems();
     }
   }
+  flipPlacementsHandler() {
+    this.setFilteredPlacements();
+  }
   //--------------------------------------------------------------------------
   //
   //  Event Listeners
@@ -351,7 +385,7 @@ export class Combobox {
       ? await updatePopper({
         el: menuEl,
         modifiers,
-        placement: ComboboxDefaultPlacement,
+        placement: defaultMenuPlacement,
         popper
       })
       : this.createPopper();
@@ -359,7 +393,6 @@ export class Combobox {
   /** Sets focus on the component. */
   async setFocus() {
     var _a;
-    this.active = true;
     (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus();
     this.activeChipIndex = -1;
     this.activeItemIndex = -1;
@@ -378,6 +411,7 @@ export class Combobox {
     this.createPopper();
     connectLabel(this);
     connectForm(this);
+    this.setFilteredPlacements();
   }
   componentWillLoad() {
     this.updateItems();
@@ -390,6 +424,7 @@ export class Combobox {
       this.reposition();
       this.inputHeight = this.el.offsetHeight;
     }
+    updateHostInteraction(this);
   }
   disconnectedCallback() {
     var _a, _b;
@@ -408,15 +443,26 @@ export class Combobox {
   textHandler() {
     this.updateActiveItemIndex(-1);
   }
+  comboboxInViewport() {
+    const bounding = this.el.getBoundingClientRect();
+    return (bounding.top >= 0 &&
+      bounding.left >= 0 &&
+      bounding.right <= (window.innerWidth || document.documentElement.clientWidth) &&
+      bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight));
+  }
   getModifiers() {
     const flipModifier = {
       name: "flip",
       enabled: true
     };
     flipModifier.options = {
-      fallbackPlacements: ["top-start", "top", "top-end", "bottom-start", "bottom", "bottom-end"]
+      fallbackPlacements: this.filteredFlipPlacements || popperMenuComputedPlacements
     };
-    return [flipModifier];
+    const eventListenerModifier = {
+      name: "eventListeners",
+      enabled: this.active
+    };
+    return [flipModifier, eventListenerModifier];
   }
   createPopper() {
     this.destroyPopper();
@@ -426,7 +472,7 @@ export class Combobox {
       el: menuEl,
       modifiers,
       overlayPositioning,
-      placement: ComboboxDefaultPlacement,
+      placement: defaultMenuPlacement,
       referenceEl
     });
   }
@@ -628,19 +674,10 @@ export class Combobox {
     chip === null || chip === void 0 ? void 0 : chip.setFocus();
   }
   shiftActiveItemIndex(delta) {
-    const length = this.visibleItems.length;
+    const { length } = this.visibleItems;
     const newIndex = (this.activeItemIndex + length + delta) % length;
     this.updateActiveItemIndex(newIndex);
-    // ensure active item is in view if we have scrolling
-    const activeItem = this.visibleItems[this.activeItemIndex];
-    const height = this.calculateSingleItemHeight(activeItem);
-    const { offsetHeight, scrollTop } = this.listContainerEl;
-    if (offsetHeight + scrollTop < activeItem.offsetTop + height) {
-      this.listContainerEl.scrollTop = activeItem.offsetTop - offsetHeight + height;
-    }
-    else if (activeItem.offsetTop < scrollTop) {
-      this.listContainerEl.scrollTop = activeItem.offsetTop;
-    }
+    this.scrollToActiveItem();
   }
   updateActiveItemIndex(index) {
     var _a;
@@ -694,7 +731,7 @@ export class Combobox {
       showLabel && (h("span", { class: {
           label: true,
           "label--spaced": needsIcon
-        }, key: "label", onFocus: this.comboboxFocusHandler, tabindex: "0" }, selectedItem.textLabel)),
+        }, key: "label" }, selectedItem.textLabel)),
       h("input", { "aria-activedescendant": this.activeDescendant, "aria-autocomplete": "list", "aria-controls": `${listboxUidPrefix}${guid}`, "aria-label": getLabelText(this), class: {
           input: true,
           "input--single": true,
@@ -707,15 +744,15 @@ export class Combobox {
     return this.visibleItems.map((item) => (h("li", { "aria-selected": (!!item.selected).toString(), id: item.guid ? `${itemUidPrefix}${item.guid}` : null, role: "option", tabindex: "-1" }, item.textLabel)));
   }
   renderPopperContainer() {
-    const { active, setMenuEl, setListContainerEl, hideList, open } = this;
+    const { active, setMenuEl, setListContainerEl } = this;
     const classes = {
       "list-container": true,
       [PopperCSS.animation]: true,
       [PopperCSS.animationActive]: active
     };
-    return (h("div", { "aria-hidden": "true", class: { "popper-container": true, "popper-container--active": open }, ref: setMenuEl },
+    return (h("div", { "aria-hidden": "true", class: { "popper-container": true, "popper-container--active": active }, ref: setMenuEl },
       h("div", { class: classes, onTransitionEnd: this.transitionEnd, ref: setListContainerEl },
-        h("ul", { class: { list: true, "list--hide": hideList } },
+        h("ul", { class: { list: true, "list--hide": !active } },
           h("slot", null)))));
   }
   renderIconStart() {
@@ -725,18 +762,19 @@ export class Combobox {
       needsIcon && (h("span", { class: "icon-start" }, (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon) && (h("calcite-icon", { class: "selected-icon", icon: selectedItem.icon, scale: "s" })))));
   }
   renderIconEnd() {
+    const { active } = this;
     return (h("span", { class: "icon-end" },
-      h("calcite-icon", { icon: "chevron-down", scale: "s" })));
+      h("calcite-icon", { icon: active ? "chevron-up" : "chevron-down", scale: "s" })));
   }
   render() {
-    const { guid, open, label } = this;
+    const { active, guid, label } = this;
     const single = this.selectionMode === "single";
     return (h(Host, { onKeyDown: this.keydownHandler },
-      h("div", { "aria-autocomplete": "list", "aria-expanded": open.toString(), "aria-haspopup": "listbox", "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-owns": `${listboxUidPrefix}${guid}`, class: {
+      h("div", { "aria-autocomplete": "list", "aria-expanded": active.toString(), "aria-haspopup": "listbox", "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-owns": `${listboxUidPrefix}${guid}`, class: {
           wrapper: true,
           "wrapper--single": single || !this.selectedItems.length,
-          "wrapper--active": open
-        }, onClick: this.setFocusClick, ref: this.setReferenceEl, role: "combobox" },
+          "wrapper--active": active
+        }, onClick: this.clickHandler, ref: this.setReferenceEl, role: "combobox" },
         h("div", { class: "grid-input" },
           this.renderIconStart(),
           !single && this.renderChips(),
@@ -1006,6 +1044,26 @@ export class Combobox {
       "attribute": "intl-remove-tag",
       "reflect": false,
       "defaultValue": "TEXT.removeTag"
+    },
+    "flipPlacements": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "ComputedPlacement[]",
+        "resolved": "ComputedPlacement[]",
+        "references": {
+          "ComputedPlacement": {
+            "location": "import",
+            "path": "../../utils/popper"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Defines the available placements that can be used when a flip occurs."
+      }
     }
   }; }
   static get states() { return {
@@ -1014,12 +1072,10 @@ export class Combobox {
     "selectedItems": {},
     "visibleItems": {},
     "needsIcon": {},
-    "hideList": {},
     "activeItemIndex": {},
     "activeChipIndex": {},
     "activeDescendant": {},
-    "text": {},
-    "open": {}
+    "text": {}
   }; }
   static get events() { return [{
       "method": "calciteLookupChange",
@@ -1171,12 +1227,18 @@ export class Combobox {
   static get watchers() { return [{
       "propName": "active",
       "methodName": "activeHandler"
+    }, {
+      "propName": "disabled",
+      "methodName": "handleDisabledChange"
     }, {
       "propName": "maxItems",
       "methodName": "maxItemsHandler"
     }, {
       "propName": "value",
       "methodName": "valueHandler"
+    }, {
+      "propName": "flipPlacements",
+      "methodName": "flipPlacementsHandler"
     }, {
       "propName": "selectedItems",
       "methodName": "selectedItemsHandler"

package/dist/collection/components/combobox/interfaces.js

@@ -1,5 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.81
  */
 export {};

package/dist/collection/components/combobox/resources.js

@@ -1,11 +1,11 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.81
  */
 export const ComboboxItem = "CALCITE-COMBOBOX-ITEM";
 export const ComboboxItemGroup = "CALCITE-COMBOBOX-ITEM-GROUP";
 export const ComboboxChildSelector = `${ComboboxItem}, ${ComboboxItemGroup}`;
-export const ComboboxDefaultPlacement = "bottom-leading";
 export const TEXT = {
   removeTag: "Remove tag"
 };

package/dist/collection/components/combobox/utils.js

@@ -1,6 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.81
  */
 import { nodeListToArray } from "../../utils/dom";
 import { ComboboxChildSelector } from "./resources";

package/dist/collection/components/combobox-item/combobox-item.css

@@ -115,6 +115,19 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+:host([disabled]){
+  pointer-events: none;
+  cursor: default;
+  -webkit-user-select: none;
+          user-select: none;
+  opacity: var(--calcite-ui-opacity-disabled);
+}
+:host([disabled]) ::slotted([calcite-hydrated][disabled]),
+:host([disabled]) [calcite-hydrated][disabled] {
+  /* prevent opacity stacking */
+  opacity: 1;
+}
+
 :host, ul{
   margin: 0px;
   display: flex;
@@ -195,7 +208,7 @@
 .icon--dot{
   display: flex;
   justify-content: flex-end;
-  width: var(--calcite-combobox-item-spacing-unit-l);
+  min-width: var(--calcite-combobox-item-spacing-unit-l);
 }
 
 .icon--dot:before {

package/dist/collection/components/combobox-item/combobox-item.js

@@ -1,6 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.81
  */
 import { Component, Element, Event, Host, Method, Prop, h, Watch } from "@stencil/core";
 import { getElementProp, getSlotted } from "../../utils/dom";
@@ -8,6 +9,7 @@ import { CSS } from "./resources";
 import { guid } from "../../utils/guid";
 import { getAncestors, getDepth } from "../combobox/utils";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
+import { updateHostInteraction } from "../../utils/interactive";
 /**
  * @slot - A slot for adding nested `calcite-combobox-item`s.
  */
@@ -56,6 +58,9 @@ export class ComboboxItem {
   disconnectedCallback() {
     disconnectConditionalSlotComponent(this);
   }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
   // --------------------------------------------------------------------------
   //
   //  Public Methods

package/dist/collection/components/combobox-item/resources.js

@@ -1,6 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.81
  */
 export const CSS = {
   icon: "icon",

package/dist/collection/components/combobox-item-group/combobox-item-group.js

@@ -1,6 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.81
  */
 import { Component, Prop, h, Element } from "@stencil/core";
 import { CSS } from "./resources";

package/dist/collection/components/combobox-item-group/resources.js

@@ -1,6 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.81
  */
 export const CSS = {
   list: "list",

package/dist/collection/components/date-picker/date-picker.js

@@ -1,6 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.81
  */
 import { Component, h, Prop, Event, Element, Host, State, Watch, Build } from "@stencil/core";
 import { getLocaleData } from "./utils";

package/dist/collection/components/date-picker/interfaces.js

@@ -1,5 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.81
  */
 export {};

package/dist/collection/components/date-picker/resources.js

@@ -1,6 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.81
  */
 export const HEADING_LEVEL = 2;
 export const TEXT = {

package/dist/collection/components/date-picker/utils.js

@@ -1,6 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.81
  */
 import { getAssetPath } from "@stencil/core";
 import { locales } from "../../utils/locale";

package/dist/collection/components/date-picker-day/date-picker-day.css

@@ -87,6 +87,19 @@
   width: 14.2857142857%;
 }
 
+:host([disabled]) {
+  pointer-events: none;
+  cursor: default;
+  -webkit-user-select: none;
+          user-select: none;
+  opacity: var(--calcite-ui-opacity-disabled);
+}
+:host([disabled]) ::slotted([calcite-hydrated][disabled]),
+:host([disabled]) [calcite-hydrated][disabled] {
+  /* prevent opacity stacking */
+  opacity: 1;
+}
+
 .day-v-wrapper {
   flex: 1 1 auto;
 }
@@ -166,11 +179,6 @@
   opacity: 1;
 }
 
-:host([disabled]) {
-  cursor: default;
-  opacity: 0.25;
-}
-
 :host(:hover:not([disabled])) .day, :host([active]:not([range])) .day {
   background-color: var(--calcite-ui-foreground-2);
   color: var(--calcite-ui-text-1);

package/dist/collection/components/date-picker-day/date-picker-day.js

@@ -1,10 +1,12 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.81
  */
 import { Component, Element, Prop, Host, Event, Listen, h } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
+import { updateHostInteraction } from "../../utils/interactive";
 export class DatePickerDay {
   constructor() {
     /** Date is outside of range and can't be selected */
@@ -56,12 +58,18 @@ export class DatePickerDay {
       .map((i) => this.localeData.numerals[i])
       .join("");
     const dir = getElementDir(this.el);
-    return (h(Host, { onClick: this.onClick, onKeyDown: this.keyDownHandler, role: "gridcell", tabindex: this.active ? 0 : -1 },
+    return (h(Host, { onClick: this.onClick, onKeyDown: this.keyDownHandler, role: "gridcell" },
       h("div", { class: { "day-v-wrapper": true, [CSS_UTILITY.rtl]: dir === "rtl" } },
         h("div", { class: "day-wrapper" },
           h("span", { class: "day" },
             h("span", { class: "text" }, formattedDay))))));
   }
+  componentDidRender() {
+    updateHostInteraction(this, this.isTabbable);
+  }
+  isTabbable() {
+    return this.active;
+  }
   static get is() { return "calcite-date-picker-day"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {

package/dist/collection/components/date-picker-month/date-picker-month.js

@@ -1,6 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.81
  */
 import { Component, Element, Prop, Host, Event, h, Listen } from "@stencil/core";
 import { inRange, sameDate, dateFromRange } from "../../utils/date";