@esri/calcite-components 5.1.1-next.3 → 5.1.1-next.4

package/dist/components/calcite-date-picker/customElement.js

@@ -30,7 +30,7 @@ class DatePicker extends LitElement {
     this.listen("keydown", this.keyDownHandler);
   }
   static {
-    this.properties = { activeEndDate: [16, {}, { state: true }], activeStartDate: [16, {}, { state: true }], dateTimeFormat: [16, {}, { state: true }], endAsDate: [16, {}, { state: true }], hoverRange: [16, {}, { state: true }], localeData: [16, {}, { state: true }], startAsDate: [16, {}, { state: true }], activeDate: [0, {}, { attribute: false }], activeRange: [3, {}, { reflect: true }], calendars: [11, {}, { type: Number, reflect: true }], headingLevel: [11, {}, { type: Number, reflect: true }], layout: [3, {}, { reflect: true }], max: [3, {}, { reflect: true }], maxAsDate: [0, {}, { attribute: false }], messageOverrides: [0, {}, { attribute: false }], min: [3, {}, { reflect: true }], minAsDate: [0, {}, { attribute: false }], monthStyle: 1, numberingSystem: [3, {}, { reflect: true }], proximitySelectionDisabled: [7, {}, { reflect: true, type: Boolean }], range: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], value: 1, valueAsDate: [0, {}, { attribute: false }] };
+    this.properties = { activeEndDate: [16, {}, { state: true }], activeStartDate: [16, {}, { state: true }], dateTimeFormat: [16, {}, { state: true }], hoverRange: [16, {}, { state: true }], localeData: [16, {}, { state: true }], activeDate: [0, {}, { attribute: false }], activeRange: [3, {}, { reflect: true }], calendars: [11, {}, { type: Number, reflect: true }], headingLevel: [11, {}, { type: Number, reflect: true }], layout: [3, {}, { reflect: true }], max: [3, {}, { reflect: true }], maxAsDate: [0, {}, { attribute: false }], messageOverrides: [0, {}, { attribute: false }], min: [3, {}, { reflect: true }], minAsDate: [0, {}, { attribute: false }], monthStyle: 1, numberingSystem: [3, {}, { reflect: true }], proximitySelectionDisabled: [7, {}, { reflect: true, type: Boolean }], range: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], value: 1, valueAsDate: [0, {}, { attribute: false }] };
   }
   static {
     this.styles = styles;
@@ -67,7 +67,7 @@ class DatePicker extends LitElement {
     if (changes.has("range") && this.range || changes.has("maxAsDate") || changes.has("minAsDate")) {
       this.setActiveStartAndEndDates();
     }
-    if (changes.has("activeDate")) {
+    if (changes.has("activeDate") && this.hasUpdated) {
       this.activeDateWatcher(this.activeDate);
     }
     if (changes.has("messages") && this.hasUpdated) {
@@ -78,13 +78,11 @@ class DatePicker extends LitElement {
     if (!this.range) {
       return;
     }
-    if (!this.rangeValueChangedByUser) {
-      if (newValue) {
-        this.activeStartDate = newValue;
-        this.activeEndDate = nextMonth(this.activeStartDate);
-      } else {
-        this.resetActiveDates();
-      }
+    if (newValue) {
+      this.activeStartDate = newValue;
+      this.activeEndDate = nextMonth(this.activeStartDate);
+    } else {
+      this.resetActiveDates();
     }
   }
   valueHandler(value) {
@@ -100,7 +98,7 @@ class DatePicker extends LitElement {
   valueAsDateWatcher(newValueAsDate) {
     if (this.range && Array.isArray(newValueAsDate) && !this.rangeValueChangedByUser) {
       this.setActiveStartAndEndDates();
-    } else if (newValueAsDate && newValueAsDate !== this.activeDate) {
+    } else if (!this.range && newValueAsDate && newValueAsDate !== this.activeDate) {
       this.activeDate = newValueAsDate;
     }
   }

package/dist/components/calcite-date-picker-day/customElement.js

@@ -36,7 +36,7 @@ class DatePickerDay extends LitElement {
     this.listen("keydown", this.keyDownHandler);
   }
   static {
-    this.properties = { active: [7, {}, { reflect: true, type: Boolean }], currentMonth: [7, {}, { reflect: true, type: Boolean }], dateTimeFormat: [0, {}, { attribute: false }], day: [9, {}, { type: Number }], disabled: [7, {}, { reflect: true, type: Boolean }], endOfRange: [7, {}, { reflect: true, type: Boolean }], highlighted: [7, {}, { reflect: true, type: Boolean }], range: [7, {}, { reflect: true, type: Boolean }], rangeEdge: [3, {}, { reflect: true }], rangeHover: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], startOfRange: [7, {}, { reflect: true, type: Boolean }], value: [0, {}, { attribute: false }] };
+    this.properties = { active: [7, {}, { reflect: true, type: Boolean }], currentMonth: [7, {}, { reflect: true, type: Boolean }], dateTimeFormat: [0, {}, { attribute: false }], day: [9, {}, { type: Number }], disabled: [7, {}, { reflect: true, type: Boolean }], endOfRange: [7, {}, { reflect: true, type: Boolean }], highlighted: [7, {}, { reflect: true, type: Boolean }], range: [7, {}, { reflect: true, type: Boolean }], rangeHover: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], startOfRange: [7, {}, { reflect: true, type: Boolean }], value: [0, {}, { attribute: false }] };
   }
   static {
     this.styles = styles;

package/dist/components/calcite-date-picker-month/customElement.js

@@ -11,10 +11,8 @@ const CSS = {
   calendarStart: "calendar--start",
   currentDay: "current-day",
   dayContainer: "day-container",
-  insideRangeHover: "inside-range--hover",
   month: "month",
   noncurrent: "noncurrent",
-  outsideRangeHover: "outside-range--hover",
   weekDays: "week-days",
   weekHeader: "week-header",
   weekHeaderContainer: "week-header-container"
@@ -246,15 +244,12 @@ class DatePickerMonth extends LitElement {
     let month = this.activeDate.getMonth();
     const nextMonth2 = month + 1;
     month = position === "end" ? nextMonth2 : month;
-    let dayInWeek = 0;
-    const getDayInWeek = () => dayInWeek++ % 7;
     const year = this.activeDate.getFullYear();
     const days = [
       ...prevMonthDays.map((day) => {
         return {
           active: false,
           day,
-          dayInWeek: getDayInWeek(),
           date: new Date(year, month - 1, day)
         };
       }),
@@ -267,7 +262,6 @@ class DatePickerMonth extends LitElement {
           currentMonth: true,
           currentDay: isCurrentDay,
           day,
-          dayInWeek: getDayInWeek(),
           date
         };
       }),
@@ -275,7 +269,6 @@ class DatePickerMonth extends LitElement {
         return {
           active: false,
           day,
-          dayInWeek: getDayInWeek(),
           date: new Date(year, nextMonth2, day)
         };
       })
@@ -326,14 +319,12 @@ class DatePickerMonth extends LitElement {
     const nextMonthDays = this.getDays(endCalendarPrevMonDays, endCalendarCurrMonDays, endCalendarNextMonDays, "end");
     return html`<div class=${safeClassMap({ [CSS.calendarContainer]: true })} role=grid>${this.renderCalendar(adjustedWeekDays, days)}${this.range && this.calendars === 2 && this.renderCalendar(adjustedWeekDays, nextMonthDays, true) || ""}</div>`;
   }
-  renderDateDay({ active, currentMonth, currentDay, date, day, dayInWeek }, key) {
+  renderDateDay({ active, currentMonth, currentDay, date, day }, key) {
     const isDateInRange = inRange(date, this.min, this.max);
     return keyed(key, html`<div class=${safeClassMap({ [CSS.dayContainer]: true })} role=gridcell><calcite-date-picker-day .active=${active} class=${safeClassMap({
       [CSS.currentDay]: currentDay,
-      [CSS.insideRangeHover]: this.isHoverInRange(),
-      [CSS.outsideRangeHover]: !this.isHoverInRange(),
       [CSS.noncurrent]: this.range && this.calendars === 2 && !currentMonth
-    })} .currentMonth=${currentMonth} .dateTimeFormat=${this.dateTimeFormat} .day=${day} .disabled=${!isDateInRange} .endOfRange=${this.isEndOfRange(date)} .highlighted=${this.betweenSelectedRange(date)} @calciteInternalDayHover=${this.dayHover} @calciteInternalDaySelect=${this.daySelect} .range=${!!this.startDate && !!this.endDate && !sameDate(this.startDate, this.endDate)} .rangeEdge=${dayInWeek === 0 ? "start" : dayInWeek === 6 ? "end" : void 0} .rangeHover=${isDateInRange && this.isRangeHover(date)} .scale=${this.scale} .selected=${this.isSelected(date)} .startOfRange=${this.isStartOfRange(date)} .value=${date} ${ref(this.storeDayRef)}></calcite-date-picker-day></div>`);
+    })} .currentMonth=${currentMonth} .dateTimeFormat=${this.dateTimeFormat} .day=${day} .disabled=${!isDateInRange} .endOfRange=${this.isEndOfRange(date)} .highlighted=${this.betweenSelectedRange(date)} @calciteInternalDayHover=${this.dayHover} @calciteInternalDaySelect=${this.daySelect} .range=${!!this.startDate && !!this.endDate && !sameDate(this.startDate, this.endDate)} .rangeHover=${isDateInRange && this.isRangeHover(date)} .scale=${this.scale} .selected=${this.isSelected(date)} .startOfRange=${this.isStartOfRange(date)} .value=${date} ${ref(this.storeDayRef)}></calcite-date-picker-day></div>`);
   }
   renderCalendar(weekDays, days, isEndCalendar = false) {
     return html`<div class=${safeClassMap({

package/dist/components/calcite-input-date-picker/customElement.js

@@ -276,7 +276,6 @@ class InputDatePicker extends LitElement {
   }
   valueAsDateWatcher(valueAsDate) {
     const newValue = Array.isArray(valueAsDate) ? [dateToISO(valueAsDate[0]), dateToISO(valueAsDate[1])] : dateToISO(valueAsDate);
-    this.datePickerActiveDate = Array.isArray(valueAsDate) ? valueAsDate[0] : valueAsDate;
     if (this.value !== newValue) {
       this.valueAsDateChangedExternally = true;
       this.value = newValue;

package/dist/components/calcite-menu-item/customElement.d.ts

@@ -25,13 +25,13 @@ export abstract class MenuItem extends LitElement {
    */
   accessor breadcrumb: boolean;
   /** Specifies the URL destination of the component, which can be set as an absolute or relative path. */
-  accessor href: string;
+  accessor href: string | undefined;
   /** Specifies an icon to display at the end of the component. */
-  accessor iconEnd: IconName;
+  accessor iconEnd: IconName | undefined;
   /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
-  accessor iconFlipRtl: FlipContext;
+  accessor iconFlipRtl: FlipContext | undefined;
   /** Specifies an icon to display at the start of the component. */
-  accessor iconStart: IconName;
+  accessor iconStart: IconName | undefined;
   /**
    * Specifies an accessible label for the component.
    *
@@ -54,15 +54,15 @@ export abstract class MenuItem extends LitElement {
    *
    * @see [MDN - rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)
    */
-  accessor rel: string;
+  accessor rel: string | undefined;
   /**
    * Specifies where to open the linked document defined in the `href` property.
    *
    * @see [MDN - target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)
    */
-  accessor target: string;
+  accessor target: string | undefined;
   /** Specifies the text to display. */
-  accessor text: string;
+  accessor text: string | undefined;
   /**
    * Sets focus on the component.
    *

package/dist/components/calcite-menu-item/customElement.js

@@ -45,9 +45,12 @@ class MenuItem extends LitElement {
     this.anchorRef = createRef();
     this.direction = useDirection();
     this.dropdownActionRef = createRef();
+    this.isFocused = false;
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
     this.hasSubmenu = false;
+    this.active = false;
+    this.breadcrumb = false;
     this.isTopLevelItem = false;
     this.open = false;
     this.calciteInternalMenuItemKeyEvent = createEvent();

package/dist/components/calcite-meter/customElement.d.ts

@@ -42,7 +42,7 @@ export abstract class Meter extends LitElement {
    *
    * @deprecated in v5.1.0, removal target v6.0.0 - This property has no effect on the component.
    */
-  accessor form: string;
+  accessor form: string | undefined;
   /**
    * When `true`, number values are displayed with a group separator corresponding to the language and country format.
    *
@@ -50,7 +50,7 @@ export abstract class Meter extends LitElement {
    */
   accessor groupSeparator: boolean;
   /** Specifies a high value.  When `fillType` is `"range"`, displays a different color when above the specified threshold. */
-  accessor high: number;
+  accessor high: number | undefined;
   /**
    * Specifies an accessible label for the component.
    *
@@ -58,7 +58,7 @@ export abstract class Meter extends LitElement {
    */
   accessor label: string;
   /** Specifies a low value.  When `fillType` is `"range"`, displays a different color when above the specified threshold. */
-  accessor low: number;
+  accessor low: number | undefined;
   /**
    * Specifies the component's highest allowed value.
    *
@@ -78,9 +78,9 @@ export abstract class Meter extends LitElement {
    *
    * @deprecated in v5.1.0, removal target v6.0.0 - This property has no effect on the component.
    */
-  accessor name: string;
+  accessor name: string | undefined;
   /** Specifies the Unicode numeral system used by the component for localization. */
-  accessor numberingSystem: NumberingSystem;
+  accessor numberingSystem: NumberingSystem | undefined;
   /**
    * When `true`, displays the values of `high`, `low`, `min`, and `max`.
    *
@@ -106,7 +106,7 @@ export abstract class Meter extends LitElement {
    */
   accessor unitLabel: string;
   /** Specifies the component's value. */
-  accessor value: number;
+  accessor value: number | undefined;
   /**
    * When `true`, displays the `value`.
    *

package/dist/components/calcite-meter/customElement.js

@@ -39,6 +39,11 @@ class Meter extends LitElement {
     this.minPercent = 0;
     this.resizeObserver = createObserver("resize", () => this.resizeHandler());
     this.valueLabelRef = createRef();
+    this.currentPercent = 0;
+    this.highActive = false;
+    this.highPercent = 100;
+    this.lowActive = false;
+    this.lowPercent = 0;
     this.appearance = "outline-fill";
     this.disabled = false;
     this.fillType = "range";
@@ -88,12 +93,8 @@ class Meter extends LitElement {
     this.updateLabels();
   }
   updateLabels() {
-    if (this.valueLabelRef.value) {
-      this.determineValueLabelPosition();
-    }
-    if (this.rangeLabels) {
-      this.determineVisibleLabels();
-    }
+    this.determineValueLabelPosition();
+    this.determineVisibleLabels();
   }
   calculateValues() {
     const { min, max, low, high, value } = this;
@@ -154,9 +155,12 @@ class Meter extends LitElement {
     }
   }
   intersects(el1, el2) {
-    return el1 && el2 && intersects(el1.getBoundingClientRect(), el2.getBoundingClientRect());
+    return !!(el1 && el2 && intersects(el1.getBoundingClientRect(), el2.getBoundingClientRect()));
   }
   determineVisibleLabels() {
+    if (!this.rangeLabels) {
+      return;
+    }
     const { minLabelRef: { value: minLabelEl }, lowLabelRef: { value: lowLabelEl }, highLabelRef: { value: highLabelEl }, maxLabelRef: { value: maxLabelEl } } = this;
     const highMaxOverlap = this.intersects(highLabelEl, maxLabelEl);
     const lowHighOverlap = this.intersects(lowLabelEl, highLabelEl);
@@ -189,6 +193,9 @@ class Meter extends LitElement {
   }
   determineValueLabelPosition() {
     const { valueLabelRef: { value: valueLabelEl }, meterContainerRef: { value: meterContainerEl }, currentPercent } = this;
+    if (!valueLabelEl || !meterContainerEl) {
+      return;
+    }
     const valuePosition = currentPercent > 100 ? 100 : currentPercent > 0 ? currentPercent : 0;
     const valueLabelWidth = valueLabelEl.getBoundingClientRect().width;
     const containerWidth = meterContainerEl.getBoundingClientRect().width;

package/dist/components/calcite-pagination/customElement.d.ts

@@ -26,7 +26,7 @@ export abstract class Pagination extends LitElement {
       last?: string;
   };
   /** Specifies the Unicode numeral system used by the component for localization. */
-  accessor numberingSystem: NumberingSystem;
+  accessor numberingSystem: NumberingSystem | undefined;
   /**
    * Specifies the number of items per page.
    *

package/dist/components/calcite-pagination/customElement.js

@@ -42,7 +42,10 @@ class Pagination extends LitElement {
     this.resizeObserver = createObserver("resize", (entries) => entries.forEach(this.resizeHandler));
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
+    this.isXXSmall = false;
+    this.lastStartItem = 1;
     this.maxItems = maxItemBreakpoints.xxsmall;
+    this.totalPages = 1;
     this.groupSeparator = false;
     this.pageSize = 20;
     this.scale = "m";

package/dist/components/calcite-panel/customElement.d.ts

@@ -46,7 +46,7 @@ import type { IconName } from "../calcite-icon/interfaces.js";
  */
 export abstract class Panel extends LitElement {
   /** Passes a function to run before the component closes. */
-  accessor beforeClose: () => Promise<void>;
+  accessor beforeClose: (() => Promise<void>) | undefined;
   /**
    * When `true`, displays a close button in the component.
    *
@@ -78,7 +78,7 @@ export abstract class Panel extends LitElement {
    */
   accessor collapsible: boolean;
   /** Specifies a description for the component. */
-  accessor description: string;
+  accessor description: string | undefined;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    *
@@ -86,11 +86,11 @@ export abstract class Panel extends LitElement {
    */
   accessor disabled: boolean;
   /** Specifies the component's heading text. */
-  accessor heading: string;
+  accessor heading: string | undefined;
   /** Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling. */
-  accessor headingLevel: HeadingLevel;
+  accessor headingLevel: HeadingLevel | undefined;
   /** Specifies an icon to display. */
-  accessor icon: IconName;
+  accessor icon: IconName | undefined;
   /**
    * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
    *
@@ -104,7 +104,7 @@ export abstract class Panel extends LitElement {
    */
   accessor loading: boolean;
   /** Specifies the component's fallback `menuPlacement` when it's initial or specified `menuPlacement` has insufficient space available. */
-  accessor menuFlipPlacements: FlipPlacement[];
+  accessor menuFlipPlacements: FlipPlacement[] | undefined;
   /**
    * When `true`, the action menu items in the `header-menu-actions` slot are open.
    *

package/dist/components/calcite-popover/customElement.d.ts

@@ -33,7 +33,7 @@ export abstract class Popover extends LitElement {
    */
   accessor flipDisabled: boolean;
   /** Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available. */
-  accessor flipPlacements: FlipPlacement[];
+  accessor flipPlacements: FlipPlacement[] | undefined;
   /**
    * When `true`, prevents focus trapping.
    *
@@ -49,11 +49,11 @@ export abstract class Popover extends LitElement {
    * `"extraContainers"` specifies additional focusable elements external to the trap, such as 3rd-party components appending elements to the document body, and
    * `"setReturnFocus"` customizes the element to which focus is returned when the trap is deactivated. Return `false` to prevent focus return, or `undefined` to use the default behavior (returning focus to the element focused before activation).
    */
-  accessor focusTrapOptions: Partial<FocusTrapOptions>;
+  accessor focusTrapOptions: Partial<FocusTrapOptions> | undefined;
   /** Specifies the component's heading text. */
-  accessor heading: string;
+  accessor heading: string | undefined;
   /** Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling. */
-  accessor headingLevel: HeadingLevel;
+  accessor headingLevel: HeadingLevel | undefined;
   /**
    * Specifies an accessible label for the component.
    *

package/dist/components/calcite-popover/customElement.js

@@ -147,7 +147,7 @@ class Popover extends LitElement {
   }
   setFilteredPlacements() {
     const { el, flipPlacements } = this;
-    this.filteredFlipPlacements = flipPlacements ? filterValidFlipPlacements(flipPlacements, el) : null;
+    this.filteredFlipPlacements = flipPlacements ? filterValidFlipPlacements(flipPlacements, el) : void 0;
   }
   hide() {
     this.open = false;

package/dist/components/calcite-progress/customElement.d.ts

@@ -8,7 +8,7 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
  */
 export abstract class Progress extends LitElement {
   /** Specifies an accessible label for the component. */
-  accessor label: string;
+  accessor label: string | undefined;
   /**
    * When `true` and type is `"indeterminate"`, reverses the animation direction.
    *
@@ -16,7 +16,7 @@ export abstract class Progress extends LitElement {
    */
   accessor reversed: boolean;
   /** Text that displays under the component's indicator. */
-  accessor text: string;
+  accessor text: string | undefined;
   /**
    * Specifies the component type.
    *