@esri/calcite-components 1.3.0-next.8 → 1.3.0

package/dist/collection/components/input-date-picker/assets/input-date-picker/t9n/messages_it.json

@@ -0,0 +1,3 @@
+{
+  "chooseDate": "Choose date"
+}

package/dist/collection/components/input-date-picker/assets/input-date-picker/t9n/messages_ja.json

@@ -0,0 +1,3 @@
+{
+  "chooseDate": "Choose date"
+}

package/dist/collection/components/input-date-picker/assets/input-date-picker/t9n/messages_ko.json

@@ -0,0 +1,3 @@
+{
+  "chooseDate": "Choose date"
+}

package/dist/collection/components/input-date-picker/assets/input-date-picker/t9n/messages_lt.json

@@ -0,0 +1,3 @@
+{
+  "chooseDate": "Choose date"
+}

package/dist/collection/components/input-date-picker/assets/input-date-picker/t9n/messages_lv.json

@@ -0,0 +1,3 @@
+{
+  "chooseDate": "Choose date"
+}

package/dist/collection/components/input-date-picker/assets/input-date-picker/t9n/messages_nl.json

@@ -0,0 +1,3 @@
+{
+  "chooseDate": "Choose date"
+}

package/dist/collection/components/input-date-picker/assets/input-date-picker/t9n/messages_no.json

@@ -0,0 +1,3 @@
+{
+  "chooseDate": "Choose date"
+}

package/dist/collection/components/input-date-picker/assets/input-date-picker/t9n/messages_pl.json

@@ -0,0 +1,3 @@
+{
+  "chooseDate": "Choose date"
+}

package/dist/collection/components/input-date-picker/assets/input-date-picker/t9n/messages_pt-BR.json

@@ -0,0 +1,3 @@
+{
+  "chooseDate": "Choose date"
+}

package/dist/collection/components/input-date-picker/assets/input-date-picker/t9n/messages_pt-PT.json

@@ -0,0 +1,3 @@
+{
+  "chooseDate": "Choose date"
+}

package/dist/collection/components/input-date-picker/assets/input-date-picker/t9n/messages_ro.json

@@ -0,0 +1,3 @@
+{
+  "chooseDate": "Choose date"
+}

package/dist/collection/components/input-date-picker/assets/input-date-picker/t9n/messages_ru.json

@@ -0,0 +1,3 @@
+{
+  "chooseDate": "Choose date"
+}

package/dist/collection/components/input-date-picker/assets/input-date-picker/t9n/messages_sk.json

@@ -0,0 +1,3 @@
+{
+  "chooseDate": "Choose date"
+}

package/dist/collection/components/input-date-picker/assets/input-date-picker/t9n/messages_sl.json

@@ -0,0 +1,3 @@
+{
+  "chooseDate": "Choose date"
+}

package/dist/collection/components/input-date-picker/assets/input-date-picker/t9n/messages_sr.json

@@ -0,0 +1,3 @@
+{
+  "chooseDate": "Choose date"
+}

package/dist/collection/components/input-date-picker/assets/input-date-picker/t9n/messages_sv.json

@@ -0,0 +1,3 @@
+{
+  "chooseDate": "Choose date"
+}

package/dist/collection/components/input-date-picker/assets/input-date-picker/t9n/messages_th.json

@@ -0,0 +1,3 @@
+{
+  "chooseDate": "Choose date"
+}

package/dist/collection/components/input-date-picker/assets/input-date-picker/t9n/messages_tr.json

@@ -0,0 +1,3 @@
+{
+  "chooseDate": "Choose date"
+}

package/dist/collection/components/input-date-picker/assets/input-date-picker/t9n/messages_uk.json

@@ -0,0 +1,3 @@
+{
+  "chooseDate": "Choose date"
+}

package/dist/collection/components/input-date-picker/assets/input-date-picker/t9n/messages_vi.json

@@ -0,0 +1,3 @@
+{
+  "chooseDate": "Choose date"
+}

package/dist/collection/components/input-date-picker/assets/input-date-picker/t9n/messages_zh-CN.json

@@ -0,0 +1,3 @@
+{
+  "chooseDate": "Choose date"
+}

package/dist/collection/components/input-date-picker/assets/input-date-picker/t9n/messages_zh-HK.json

@@ -0,0 +1,3 @@
+{
+  "chooseDate": "Choose date"
+}

package/dist/collection/components/input-date-picker/assets/input-date-picker/t9n/messages_zh-TW.json

@@ -0,0 +1,3 @@
+{
+  "chooseDate": "Choose date"
+}

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

@@ -102,13 +102,17 @@
 }
 
 :host([disabled]) {
-  pointer-events: none;
   cursor: default;
   -webkit-user-select: none;
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
 
+:host([disabled]) *,
+:host([disabled]) ::slotted(*) {
+  pointer-events: none;
+}
+
 :host {
   position: relative;
   display: inline-block;
@@ -145,6 +149,18 @@
   transform: translate(0);
 }
 
+:host([scale=s]) {
+  --calcite-toggle-spacing: 0.5rem;
+}
+
+:host([scale=m]) {
+  --calcite-toggle-spacing: 0.75rem;
+}
+
+:host([scale=l]) {
+  --calcite-toggle-spacing: 1rem;
+}
+
 :host([disabled]) ::slotted([calcite-hydrated][disabled]),
 :host([disabled]) [calcite-hydrated][disabled] {
   /* prevent opacity stacking */
@@ -164,6 +180,17 @@
   position: relative;
 }
 
+.toggle-icon {
+  position: absolute;
+  display: flex;
+  inline-size: 1rem;
+  cursor: pointer;
+  align-items: center;
+  inset-inline-end: 0;
+  inset-block: 0;
+  padding-inline: var(--calcite-toggle-spacing);
+}
+
 :host([range]) .input-container {
   display: flex;
 }

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

@@ -1,7 +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.3.0-next.8
+ * v1.3.0
  */
 import { Build, h, Host } from "@stencil/core";
 import { dateFromISO, dateFromLocalizedString, dateFromRange, datePartsFromLocalizedString, dateToISO, inRange } from "../../utils/date";
@@ -10,12 +10,15 @@ import { connectFloatingUI, defaultMenuPlacement, disconnectFloatingUI, filterCo
 import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "../../utils/form";
 import { updateHostInteraction } from "../../utils/interactive";
 import { numberKeys } from "../../utils/key";
-import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
+import { connectLabel, disconnectLabel } from "../../utils/label";
 import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
 import { connectLocalized, disconnectLocalized, numberStringFormatter } from "../../utils/locale";
 import { connectOpenCloseComponent, disconnectOpenCloseComponent } from "../../utils/openCloseComponent";
 import { getLocaleData, getValueAsDateRange } from "../date-picker/utils";
 import { CSS } from "./resources";
+import { connectMessages, disconnectMessages, setUpMessages } from "../../utils/t9n";
+import { activateFocusTrap, connectFocusTrap, deactivateFocusTrap } from "../../utils/focusTrapComponent";
+import { guid } from "../../utils/guid";
 export class InputDatePicker {
   constructor() {
     this.calciteInternalInputInputHandler = (event) => {
@@ -36,6 +39,9 @@ export class InputDatePicker {
     this.calciteInternalInputBlurHandler = () => {
       this.commitValue();
     };
+    this.dialogId = `date-picker-dialog--${guid()}`;
+    this.focusOnOpen = false;
+    this.lastBlurredInput = "none";
     this.userChangedValue = false;
     this.openTransitionProp = "opacity";
     this.valueAsDateChangedExternally = false;
@@ -44,6 +50,15 @@ export class InputDatePicker {
     //  Private Methods
     //
     //--------------------------------------------------------------------------
+    this.onInputWrapperClick = () => {
+      if (this.range && this.lastBlurredInput !== "none" && this.open) {
+        // we keep the date-picker open when moving between inputs
+      }
+      else {
+        this.open = !this.open;
+      }
+      this.lastBlurredInput = "none";
+    };
     this.setFilteredPlacements = () => {
       const { el, flipPlacements } = this;
       this.filteredFlipPlacements = flipPlacements
@@ -62,10 +77,14 @@ export class InputDatePicker {
     };
     this.deactivate = () => {
       this.open = false;
+      this.lastBlurredInput = "none";
     };
     this.keyDownHandler = (event) => {
       const { defaultPrevented, key } = event;
-      if (key === "Enter" && !defaultPrevented) {
+      if (defaultPrevented) {
+        return;
+      }
+      if (key === "Enter") {
         this.commitValue();
         if (this.shouldFocusRangeEnd()) {
           this.endInput?.setFocus();
@@ -75,30 +94,34 @@ export class InputDatePicker {
         }
         if (submitForm(this)) {
           event.preventDefault();
+          this.restoreInputFocus();
         }
       }
-      else if (key === "Escape" && !defaultPrevented) {
+      else if (key === "ArrowDown") {
+        this.open = true;
+        this.focusOnOpen = true;
+        event.preventDefault();
+      }
+      else if (key === "Escape") {
         this.open = false;
         event.preventDefault();
+        this.restoreInputFocus();
       }
     };
     this.startInputFocus = () => {
-      if (!this.readOnly) {
-        this.open = true;
-      }
       this.focusedInput = "start";
     };
+    this.startEndInputFocus = (event) => {
+      const blurredEl = event.relatedTarget;
+      this.lastBlurredInput =
+        blurredEl === this.startInput ? "start" : blurredEl === this.endInput ? "end" : "none";
+    };
     this.endInputFocus = () => {
-      if (!this.readOnly) {
-        this.open = true;
-      }
       this.focusedInput = "end";
     };
     this.setFloatingEl = (el) => {
-      if (el) {
-        this.floatingEl = el;
-        connectFloatingUI(this, this.referenceEl, this.floatingEl);
-      }
+      this.floatingEl = el;
+      connectFloatingUI(this, this.referenceEl, this.floatingEl);
     };
     this.setStartWrapper = (el) => {
       this.startWrapper = el;
@@ -108,6 +131,16 @@ export class InputDatePicker {
       this.endWrapper = el;
       this.setReferenceEl();
     };
+    this.setDatePickerRef = (el) => {
+      this.datePickerEl = el;
+      connectFocusTrap(this, {
+        focusTrapEl: el,
+        focusTrapOptions: {
+          initialFocus: false,
+          setReturnFocus: false
+        }
+      });
+    };
     /**
      * Event handler for when the selected date changes
      *
@@ -120,6 +153,7 @@ export class InputDatePicker {
       event.stopPropagation();
       this.setValue(event.target.valueAsDate);
       this.localizeInputValues();
+      this.restoreInputFocus();
     };
     this.handleDateRangeChange = (event) => {
       if (!this.range) {
@@ -129,12 +163,7 @@ export class InputDatePicker {
       const value = event.target.valueAsDate;
       this.setRangeValue(value);
       this.localizeInputValues();
-      if (this.shouldFocusRangeEnd()) {
-        this.endInput?.setFocus();
-      }
-      else if (this.shouldFocusRangeStart()) {
-        this.startInput?.setFocus();
-      }
+      this.restoreInputFocus();
     };
     this.setInputValue = (newValue, input = "start") => {
       const inputEl = this[`${input}Input`];
@@ -210,12 +239,15 @@ export class InputDatePicker {
         .join("")
       : "";
     this.disabled = false;
+    this.focusTrapDisabled = false;
     this.form = undefined;
     this.readOnly = false;
     this.value = "";
     this.flipPlacements = undefined;
     this.headingLevel = undefined;
     this.valueAsDate = undefined;
+    this.messageOverrides = undefined;
+    this.messages = undefined;
     this.minAsDate = undefined;
     this.maxAsDate = undefined;
     this.min = undefined;
@@ -230,13 +262,18 @@ export class InputDatePicker {
     this.overlayPositioning = "absolute";
     this.proximitySelectionDisabled = false;
     this.layout = "horizontal";
-    this.messageOverrides = undefined;
     this.datePickerActiveDate = undefined;
+    this.defaultMessages = undefined;
     this.effectiveLocale = "";
     this.focusedInput = "start";
-    this.globalAttributes = {};
     this.localeData = undefined;
   }
+  handleFocusTrapDisabled(focusTrapDisabled) {
+    if (!this.open) {
+      return;
+    }
+    focusTrapDisabled ? deactivateFocusTrap(this) : activateFocusTrap(this);
+  }
   handleDisabledAndReadOnlyChange(value) {
     if (!value) {
       this.open = false;
@@ -276,6 +313,9 @@ export class InputDatePicker {
     this.setFilteredPlacements();
     this.reposition(true);
   }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
   onMinChanged(min) {
     if (min) {
       this.minAsDate = dateFromISO(min);
@@ -368,6 +408,7 @@ export class InputDatePicker {
     connectLabel(this);
     connectForm(this);
     connectOpenCloseComponent(this);
+    connectMessages(this);
     this.setFilteredPlacements();
     this.reposition(true);
     numberStringFormatter.numberFormatOptions = {
@@ -378,7 +419,7 @@ export class InputDatePicker {
   }
   async componentWillLoad() {
     setUpLoadableComponent(this);
-    await this.loadLocaleData();
+    await Promise.all([this.loadLocaleData(), setUpMessages(this)]);
     this.onMinChanged(this.min);
     this.onMaxChanged(this.max);
   }
@@ -388,30 +429,32 @@ export class InputDatePicker {
     this.reposition(true);
   }
   disconnectedCallback() {
+    deactivateFocusTrap(this);
     disconnectLabel(this);
     disconnectForm(this);
     disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
     disconnectOpenCloseComponent(this);
     disconnectLocalized(this);
+    disconnectMessages(this);
   }
   componentDidRender() {
     updateHostInteraction(this);
   }
   render() {
-    const { disabled, effectiveLocale, numberingSystem, readOnly } = this;
+    const { disabled, effectiveLocale, messages, numberingSystem, readOnly } = this;
     numberStringFormatter.numberFormatOptions = {
       numberingSystem,
       locale: effectiveLocale,
       useGrouping: false
     };
-    return (h(Host, { onBlur: this.deactivate, onKeyDown: this.keyDownHandler, role: "application" }, this.localeData && (h("div", { "aria-expanded": toAriaBoolean(this.open), class: "input-container", role: "application" }, h("div", { class: "input-wrapper",
+    return (h(Host, { onBlur: this.deactivate, onKeyDown: this.keyDownHandler }, this.localeData && (h("div", { class: "input-container" }, h("div", { class: "input-wrapper", onClick: this.onInputWrapperClick,
       // eslint-disable-next-line react/jsx-sort-props
-      ref: this.setStartWrapper }, h("calcite-input", { class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, disabled: disabled, icon: "calendar", label: getLabelText(this), "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.startInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, scale: this.scale, type: "text",
+      ref: this.setStartWrapper }, h("calcite-input", { "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, disabled: disabled, icon: "calendar", "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.startInputFocus, onFocus: this.startEndInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, role: "combobox", scale: this.scale, type: "text",
       // eslint-disable-next-line react/jsx-sort-props
-      ref: this.setStartInput })), h("div", { "aria-hidden": toAriaBoolean(!this.open), class: {
+      ref: this.setStartInput }), this.renderToggleIcon(this.open && this.focusedInput === "start")), h("div", { "aria-hidden": toAriaBoolean(!this.open), "aria-label": messages.chooseDate, "aria-live": "polite", "aria-modal": "true", class: {
         [CSS.menu]: true,
         [CSS.menuActive]: this.open
-      },
+      }, id: this.dialogId, role: "dialog",
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.setFloatingEl }, h("div", { class: {
         ["calendar-picker-wrapper"]: true,
@@ -420,14 +463,19 @@ export class InputDatePicker {
         [FloatingCSS.animationActive]: this.open
       },
       // eslint-disable-next-line react/jsx-sort-props
-      ref: this.setTransitionEl }, h("calcite-date-picker", { activeDate: this.datePickerActiveDate, activeRange: this.focusedInput, headingLevel: this.headingLevel, max: this.max, maxAsDate: this.maxAsDate, messageOverrides: this.messageOverrides, min: this.min, minAsDate: this.minAsDate, numberingSystem: numberingSystem, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, tabIndex: 0, valueAsDate: this.valueAsDate }))), this.range && this.layout === "horizontal" && (h("div", { class: "horizontal-arrow-container" }, h("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: this.scale === "l" ? "m" : "s" }))), this.range && this.layout === "vertical" && this.scale !== "s" && (h("div", { class: "vertical-arrow-container" }, h("calcite-icon", { icon: "arrow-down", scale: this.scale === "l" ? "m" : "s" }))), this.range && (h("div", { class: "input-wrapper",
+      ref: this.setTransitionEl }, h("calcite-date-picker", { activeDate: this.datePickerActiveDate, activeRange: this.focusedInput, headingLevel: this.headingLevel, max: this.max, maxAsDate: this.maxAsDate, messageOverrides: this.messageOverrides, min: this.min, minAsDate: this.minAsDate, numberingSystem: numberingSystem, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, tabIndex: this.open ? undefined : -1, valueAsDate: this.valueAsDate,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: this.setDatePickerRef }))), this.range && this.layout === "horizontal" && (h("div", { class: "horizontal-arrow-container" }, h("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: this.scale === "l" ? "m" : "s" }))), this.range && this.layout === "vertical" && this.scale !== "s" && (h("div", { class: "vertical-arrow-container" }, h("calcite-icon", { icon: "arrow-down", scale: this.scale === "l" ? "m" : "s" }))), this.range && (h("div", { class: "input-wrapper", onClick: this.onInputWrapperClick,
       // eslint-disable-next-line react/jsx-sort-props
-      ref: this.setEndWrapper }, h("calcite-input", { class: {
+      ref: this.setEndWrapper }, h("calcite-input", { "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: {
         input: true,
         "border-top-color-one": this.layout === "vertical" && this.range
-      }, disabled: disabled, icon: "calendar", "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.endInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, scale: this.scale, type: "text",
+      }, disabled: disabled, icon: "calendar", "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.endInputFocus, onFocus: this.startEndInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, role: "combobox", scale: this.scale, type: "text",
       // eslint-disable-next-line react/jsx-sort-props
-      ref: this.setEndInput }))))), h(HiddenFormInputSlot, { component: this })));
+      ref: this.setEndInput }), this.renderToggleIcon(this.open && this.focusedInput === "end"))))), h(HiddenFormInputSlot, { component: this })));
+  }
+  renderToggleIcon(open) {
+    return (h("span", { class: CSS.toggleIcon }, h("calcite-icon", { icon: open ? "chevron-up" : "chevron-down", scale: "s" })));
   }
   setReferenceEl() {
     const { focusedInput, layout, endWrapper, startWrapper } = this;
@@ -435,7 +483,7 @@ export class InputDatePicker {
       focusedInput === "end" || layout === "vertical"
         ? endWrapper || startWrapper
         : startWrapper || endWrapper;
-    connectFloatingUI(this, this.referenceEl, this.floatingEl);
+    requestAnimationFrame(() => connectFloatingUI(this, this.referenceEl, this.floatingEl));
   }
   onLabelClick() {
     this.setFocus();
@@ -444,6 +492,14 @@ export class InputDatePicker {
     this.calciteInputDatePickerBeforeOpen.emit();
   }
   onOpen() {
+    activateFocusTrap(this, {
+      onActivate: () => {
+        if (this.focusOnOpen) {
+          this.datePickerEl.setFocus();
+          this.focusOnOpen = false;
+        }
+      }
+    });
     this.calciteInputDatePickerOpen.emit();
   }
   onBeforeClose() {
@@ -451,6 +507,9 @@ export class InputDatePicker {
   }
   onClose() {
     this.calciteInputDatePickerClose.emit();
+    deactivateFocusTrap(this);
+    this.restoreInputFocus();
+    this.focusOnOpen = false;
   }
   commitValue() {
     const { focusedInput, value } = this;
@@ -510,15 +569,23 @@ export class InputDatePicker {
     this.localizeInputValues();
   }
   shouldFocusRangeStart() {
-    const startValue = this.value[0] || undefined;
-    const endValue = this.value[1] || undefined;
+    const startValue = this.value[0];
+    const endValue = this.value[1];
     return !!(endValue && !startValue && this.focusedInput === "end" && this.startInput);
   }
   shouldFocusRangeEnd() {
-    const startValue = this.value[0] || undefined;
-    const endValue = this.value[1] || undefined;
+    const startValue = this.value[0];
+    const endValue = this.value[1];
     return !!(startValue && !endValue && this.focusedInput === "start" && this.endInput);
   }
+  restoreInputFocus() {
+    if (!this.range) {
+      this.startInput.setFocus();
+      return;
+    }
+    const focusedInput = this.focusedInput === "start" ? this.startInput : this.endInput;
+    focusedInput.setFocus();
+  }
   localizeInputValues() {
     const date = dateFromRange((this.range
       ? (Array.isArray(this.valueAsDate) && this.valueAsDate[0]) || undefined
@@ -547,6 +614,7 @@ export class InputDatePicker {
       "$": ["input-date-picker.css"]
     };
   }
+  static get assetsDirs() { return ["assets"]; }
   static get properties() {
     return {
       "disabled": {
@@ -567,6 +635,24 @@ export class InputDatePicker {
         "reflect": true,
         "defaultValue": "false"
       },
+      "focusTrapDisabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, prevents focus trapping."
+        },
+        "attribute": "focus-trap-disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "form": {
         "type": "string",
         "mutable": false,
@@ -684,6 +770,56 @@ export class InputDatePicker {
           "text": "The component's value as a full date object."
         }
       },
+      "messageOverrides": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Partial<InputDatePickerMessages & DatePickerMessages>",
+          "resolved": "{ chooseDate?: string; nextMonth?: string; prevMonth?: string; year?: string; }",
+          "references": {
+            "Partial": {
+              "location": "global"
+            },
+            "InputDatePickerMessages": {
+              "location": "import",
+              "path": "./assets/input-date-picker/t9n"
+            },
+            "DatePickerMessages": {
+              "location": "import",
+              "path": "../date-picker/assets/date-picker/t9n"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use this property to override individual strings used by the component."
+        }
+      },
+      "messages": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "InputDatePickerMessages",
+          "resolved": "{ chooseDate: string; }",
+          "references": {
+            "InputDatePickerMessages": {
+              "location": "import",
+              "path": "./assets/input-date-picker/t9n"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Made into a prop for testing purposes only"
+        }
+      },
       "minAsDate": {
         "type": "unknown",
         "mutable": true,
@@ -954,38 +1090,15 @@ export class InputDatePicker {
         "attribute": "layout",
         "reflect": true,
         "defaultValue": "\"horizontal\""
-      },
-      "messageOverrides": {
-        "type": "unknown",
-        "mutable": true,
-        "complexType": {
-          "original": "Partial<DatePickerMessages>",
-          "resolved": "{ nextMonth?: string; prevMonth?: string; year?: string; }",
-          "references": {
-            "Partial": {
-              "location": "global"
-            },
-            "DatePickerMessages": {
-              "location": "import",
-              "path": "../date-picker/assets/date-picker/t9n"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Use this property to override individual strings used by the component."
-        }
       }
     };
   }
   static get states() {
     return {
       "datePickerActiveDate": {},
+      "defaultMessages": {},
       "effectiveLocale": {},
       "focusedInput": {},
-      "globalAttributes": {},
       "localeData": {}
     };
   }
@@ -1115,6 +1228,9 @@ export class InputDatePicker {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
+        "propName": "focusTrapDisabled",
+        "methodName": "handleFocusTrapDisabled"
+      }, {
         "propName": "disabled",
         "methodName": "handleDisabledAndReadOnlyChange"
       }, {
@@ -1129,6 +1245,9 @@ export class InputDatePicker {
       }, {
         "propName": "flipPlacements",
         "methodName": "flipPlacementsHandler"
+      }, {
+        "propName": "messageOverrides",
+        "methodName": "onMessagesChange"
       }, {
         "propName": "min",
         "methodName": "onMinChanged"