@govtechsg/sgds-web-component 3.21.2-rc.0 → 3.21.2-rc.2

package/react/components/Datepicker/datepicker-calendar.js

@@ -227,7 +227,7 @@ class DatepickerCalendar extends SgdsElement {
     _focusOnCalendarCell() {
         const targetEl = this._getFocusedTarget();
         if (targetEl) {
-            targetEl.setAttribute("tabindex", "3");
+            targetEl.setAttribute("tabindex", "0");
             targetEl.focus();
             this.emit("sgds-update-focus", { detail: this.focusedDate });
         }
@@ -283,11 +283,11 @@ class DatepickerCalendar extends SgdsElement {
                         disabled: beforeMinDate || afterMinDate
                     })}
               @click=${clickHandler}
-              aria-selected=${ifDefined(isSelected ? "true" : undefined)}
-              tabindex=${this.focusedDate === new Date(dateStr) ? "3" : "-1"}
+              aria-selected=${isSelected ? "true" : "false"}
+              tabindex=${this.focusedDate === new Date(dateStr) ? "0" : "-1"}
               ?disabled=${beforeMinDate || afterMinDate}
               aria-disabled=${ifDefined(beforeMinDate || afterMinDate ? "true" : undefined)}
-              role="button"
+              role="gridcell"
             >
               ${day}
             </td>`);
@@ -323,8 +323,11 @@ class DatepickerCalendar extends SgdsElement {
         const selectedTime = rangeDates.map(e => setTimeToNoon(new Date(e.getFullYear(), e.getMonth())).getTime());
         const year = this.displayDate.getFullYear();
         const monthView = html `
-      <div class="monthpicker">
-        ${DatepickerCalendar.MONTHVIEW_LABELS.map((m, idx) => {
+      <div class="monthpicker" role="grid">
+        ${[0, 1, 2, 3].map(row => html `
+            <div role="row">
+              ${DatepickerCalendar.MONTHVIEW_LABELS.slice(row * 3, row * 3 + 3).map((m, i) => {
+            const idx = row * 3 + i;
             const isCurrentMonth = idx === TODAY_DATE.getMonth() && year === TODAY_DATE.getFullYear();
             const time = setTimeToNoon(new Date(year, idx)).getTime();
             const isFirstSelectedMonth = rangeDates[0].getMonth() === idx;
@@ -333,22 +336,25 @@ class DatepickerCalendar extends SgdsElement {
             const isLastSelectedYear = rangeDates[rangeDates.length - 1].getFullYear() === year;
             const ariaLabel = isCurrentMonth ? `Current month ${m} ${year}` : `${m} ${year}`;
             return html ` <button
-            class=${classMap({
+                  role="gridcell"
+                  class=${classMap({
                 active: selectedTime.includes(time),
                 today: isCurrentMonth,
                 month: true,
                 "selected-ends": (isFirstSelectedMonth && isFirstSelectedYear) || (isLastSelectedMonth && isLastSelectedYear)
             })}
-            @click=${() => this._onClickMonth(idx)}
-            data-month=${idx}
-            data-year=${year}
-            tabindex="3"
-            aria-selected=${selectedTime.includes(time)}
-            aria-label=${ariaLabel}
-          >
-            ${m.slice(0, 3)}
-          </button>`;
+                  @click=${() => this._onClickMonth(idx)}
+                  data-month=${idx}
+                  data-year=${year}
+                  tabindex="0"
+                  aria-selected=${selectedTime.includes(time) ? "true" : "false"}
+                  aria-label=${ariaLabel}
+                >
+                  ${m.slice(0, 3)}
+                </button>`;
         })}
+            </div>
+          `)}
       </div>
     `;
         return monthView;
@@ -358,29 +364,34 @@ class DatepickerCalendar extends SgdsElement {
         const CURRENT_YEAR = TODAY_DATE.getFullYear();
         const yearArray = createYearViewArray(this.displayDate, CURRENT_YEAR);
         const yearView = html `
-      <div class="sgds yearpicker">
-        ${yearArray.map(y => {
+      <div class="sgds yearpicker" role="grid">
+        ${[0, 1, 2, 3].map(row => html `
+            <div role="row">
+              ${yearArray.slice(row * 3, row * 3 + 3).map(y => {
             const isFirstSelectedYear = selectedYears[0] === y;
             const isLastSectedYear = selectedYears[selectedYears.length - 1] === y;
             return html `
-            <button
-              class=${classMap({
+                  <button
+                    role="gridcell"
+                    class=${classMap({
                 active: selectedYears.includes(y),
                 year: true,
                 today: CURRENT_YEAR === y,
                 "selected-ends": isFirstSelectedYear || isLastSectedYear
             })}
-              @click=${() => this._onClickYear(y)}
-              data-year=${y}
-              tabindex="3"
-              ?disabled=${y < 1900}
-              aria-selected=${selectedYears.includes(y)}
-              aria-label=${ifDefined(CURRENT_YEAR === y ? `Current year, ${y}` : undefined)}
-            >
-              ${y}
-            </button>
-          `;
+                    @click=${() => this._onClickYear(y)}
+                    data-year=${y}
+                    tabindex="0"
+                    ?disabled=${y < 1900}
+                    aria-selected=${selectedYears.includes(y) ? "true" : "false"}
+                    aria-label=${ifDefined(CURRENT_YEAR === y ? `Current year, ${y}` : undefined)}
+                  >
+                    ${y}
+                  </button>
+                `;
         })}
+            </div>
+          `)}
       </div>
     `;
         return yearView;

package/react/components/Datepicker/datepicker-calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker-calendar.js","sources":["../../../../src/components/Datepicker/datepicker-calendar.ts"],"sourcesContent":["import { format, isAfter, isEqual } from \"date-fns\";\nimport { HTMLTemplateResult, html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { createYearViewArray, setTimeToNoon } from \"../../utils/time\";\nimport { watch } from \"../../utils/watch\";\nimport { ViewEnum } from \"./types\";\nimport datepickerCalendarStyle from \"./datepicker-calendar.css\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n\nconst TODAY_DATE = new Date();\n\nconst keyPressAction = {\n  ArrowUp: {\n    days: -7,\n    months: -3,\n    years: -3\n  },\n  ArrowDown: {\n    days: 7,\n    months: 3,\n    years: 3\n  },\n  ArrowRight: {\n    days: 1,\n    months: 1,\n    years: 1\n  },\n  ArrowLeft: {\n    days: -1,\n    months: -1,\n    years: -1\n  }\n};\nexport class DatepickerCalendar extends SgdsElement {\n  static styles = [datepickerCalendarStyle];\n\n  /** @internal */\n  static DAY_LABELS = [\"Sunday\", \"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\"];\n\n  /** @internal */\n  static daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];\n\n  /** @internal */\n  static MONTHVIEW_LABELS = [\n    \"January\",\n    \"February\",\n    \"March\",\n    \"April\",\n    \"May\",\n    \"June\",\n    \"July\",\n    \"August\",\n    \"September\",\n    \"October\",\n    \"November\",\n    \"December\"\n  ];\n\n  /** @internal */\n  @property({ type: Array }) selectedDate: Date[] = [];\n\n  /** @internal */\n  @property({ attribute: false }) displayDate: Date;\n\n  /** @internal */\n  @property({ type: String }) minDate?: string;\n\n  /** @internal */\n  @property({ type: String }) maxDate?: string;\n\n  /** @internal */\n  @property({ type: String, reflect: true }) mode: \"single\" | \"range\" = \"single\";\n\n  private focusedDate: Date;\n\n  /** @internal */\n  @property() view: ViewEnum;\n\n  /** @internal */\n  @property({ type: Boolean }) show: boolean;\n\n  @property()\n  focusedTabIndex: number;\n\n  /**Shifts focus from Input to Calendar */\n  public focusOnCalendar(toBlurEl: HTMLElement) {\n    toBlurEl.blur();\n    this._focusOnCalendarCell();\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"keydown\", this._handleKeyPress);\n    /** Prevent validation from happening when navigating the calendar */\n    this.addEventListener(\"blur\", e => e.stopPropagation());\n  }\n\n  updated() {\n    /** For KeyboardNavigation (switching months) and ClickNavigation:\n     * Runs after render has completed and td of next month has appeared.\n     * For the case when calendar view changes to the next month\n     * */\n\n    if (this.focusedTabIndex === 3) {\n      this._focusOnCalendarCell();\n    }\n  }\n\n  @watch(\"displayDate\")\n  _updateFocusedDate() {\n    this.focusedDate = setTimeToNoon(this.displayDate);\n    if (this.focusedDate.getFullYear() < 1900) {\n      this.focusedDate.setFullYear(1900);\n    }\n  }\n\n  private _setFocusedDate(shift: number) {\n    const currentFocusedDate = this.focusedDate.getDate();\n    const currentFocusedMonth = this.focusedDate.getMonth();\n    const currentFocusedYear = this.focusedDate.getFullYear();\n    switch (this.view) {\n      case \"days\": {\n        const newFocusedDate = setTimeToNoon(\n          new Date(currentFocusedYear, currentFocusedMonth, currentFocusedDate + shift)\n        );\n        if (isAfter(newFocusedDate, new Date(0, 0, 1, 12)) || isEqual(newFocusedDate, new Date(0, 0, 1, 12)))\n          this.focusedDate = newFocusedDate;\n        break;\n      }\n      case \"months\": {\n        const newFocusedDate = setTimeToNoon(\n          new Date(currentFocusedYear, currentFocusedMonth + shift, currentFocusedDate)\n        );\n\n        if (isAfter(newFocusedDate, new Date(0, 0, 1, 12)) || isEqual(newFocusedDate, new Date(0, 0, 1, 12))) {\n          this.focusedDate = newFocusedDate;\n        }\n        break;\n      }\n      case \"years\": {\n        const newFocusedDate = setTimeToNoon(\n          new Date(currentFocusedYear + shift, currentFocusedMonth, currentFocusedDate)\n        );\n        if (newFocusedDate.getFullYear() >= 1900) {\n          this.focusedDate = newFocusedDate;\n        }\n        break;\n      }\n    }\n  }\n  private _handleEnterDateKeyboard(event: KeyboardEvent) {\n    const targetElement = event.composedPath()[0] as HTMLElement;\n    if (targetElement.classList.contains(\"disabled\")) return;\n\n    switch (this.view) {\n      case \"days\":\n        this._onClickDay(event);\n        break;\n      case \"months\": {\n        const { month } = targetElement.dataset;\n        this._onClickMonth(parseInt(month));\n        break;\n      }\n      case \"years\": {\n        const { year } = targetElement.dataset;\n        this._onClickYear(parseInt(year));\n      }\n    }\n  }\n  private _handleKeyPress(event: KeyboardEvent) {\n    if (event.key === \"Enter\") {\n      event.preventDefault();\n      this._handleEnterDateKeyboard(event);\n      return;\n    }\n    if (event.key === \"Tab\") {\n      const targetEl: HTMLElement = this._getFocusedTarget();\n      if (this.focusedTabIndex !== 3) targetEl.blur();\n      return;\n    }\n    if (event.key.includes(\"Arrow\")) {\n      event.preventDefault();\n      this._blurCalendarCell();\n      const keyShiftObject = keyPressAction[event.key];\n      const shiftNumber = keyShiftObject[this.view];\n\n      this._setFocusedDate(shiftNumber);\n\n      this._focusOnCalendarCell();\n    }\n  }\n\n  private _generateIncrementDates(): Date[] {\n    const start = setTimeToNoon(this.selectedDate[0]);\n\n    if (this.selectedDate.length < 2) {\n      return [start];\n    }\n\n    const end = setTimeToNoon(this.selectedDate[1]);\n    const arr: Date[] = [];\n    if (start.getTime() < end.getTime()) {\n      for (let dt = start; dt <= end; dt.setDate(dt.getDate() + 1)) {\n        arr.push(new Date(dt));\n      }\n    } else {\n      for (let dt = end; dt <= start; dt.setDate(dt.getDate() + 1)) {\n        arr.push(new Date(dt));\n      }\n    }\n    return arr;\n  }\n\n  private _onClickDay(event: MouseEvent | KeyboardEvent) {\n    const { day, date } = (event.composedPath()[0] as HTMLTableCellElement).dataset;\n    const displayDateClone = new Date(this.displayDate);\n    displayDateClone.setDate(parseInt(day));\n    /** update new focused date for mouse click */\n    if (event.type === \"click\") {\n      this.focusedDate = setTimeToNoon(new Date(date));\n    }\n\n    if (this.mode === \"single\") {\n      // Single mode: Select a single date\n\n      this.selectedDate = [displayDateClone];\n\n      // Emit event with selected date\n      this.emit(\"sgds-selectdates\", { detail: this.selectedDate });\n    } else if (this.mode === \"range\") {\n      // Range mode: Select a range of dates\n      const selectedDates = [...this.selectedDate];\n\n      if (selectedDates.length === 0 || selectedDates.length === 2) {\n        // No dates selected yet or both dates already selected,\n        // start a new range by clearing the selected dates array\n        selectedDates.length = 0;\n      }\n\n      // Add the selected date to the range\n      selectedDates.push(displayDateClone);\n\n      // Update the selectedDate property\n      this.selectedDate = selectedDates;\n\n      // Emit event with the range of selected dates\n      this.emit(\"sgds-selectdates\", { detail: this.selectedDate });\n    }\n\n    // Check if the selected date is before minDate or after maxDate\n    const minimumDate = this.minDate ? setTimeToNoon(new Date(this.minDate)) : null;\n    const maximumDate = this.maxDate ? setTimeToNoon(new Date(this.maxDate)) : null;\n\n    const selectedDate = setTimeToNoon(displayDateClone);\n    if ((minimumDate && selectedDate < minimumDate) || (maximumDate && selectedDate > maximumDate)) {\n      event.stopPropagation();\n      event.preventDefault();\n    }\n  }\n\n  private _onClickMonth(month: number, year: number = this.focusedDate.getFullYear()) {\n    const displayDateClone = new Date(this.displayDate);\n    this.view = \"days\";\n    displayDateClone.setMonth(month);\n    displayDateClone.setFullYear(year);\n    this.displayDate = displayDateClone;\n    this.emit(\"sgds-view\", { detail: this.view });\n    //once clicked, should change view to days, and hold value and change view\n    this.emit(\"sgds-selectmonth\", { detail: this.displayDate });\n  }\n\n  private _onClickYear(year: number) {\n    const displayDateClone = new Date(this.displayDate);\n    displayDateClone.setFullYear(year);\n    this.displayDate = displayDateClone;\n    this.view = \"months\";\n    this.emit(\"sgds-view\", { detail: this.view });\n\n    this.emit(\"sgds-selectyear\", { detail: this.displayDate });\n  }\n\n  private _getFocusedTarget(): HTMLElement {\n    const queryObj = {\n      days: `td[data-date=\"${this.focusedDate.toISOString()}\"]`,\n      months: `button[data-month=\"${this.focusedDate.getMonth()}\"][data-year=\"${this.focusedDate.getFullYear()}\"]`,\n      years: `button[data-year=\"${this.focusedDate.getFullYear()}\"]`\n    };\n    const queryString = queryObj[this.view];\n    const targetEl: HTMLElement = this.shadowRoot.querySelector(`${queryString}`);\n    return targetEl;\n  }\n  private _blurCalendarCell() {\n    const targetEl = this._getFocusedTarget();\n    targetEl.setAttribute(\"tabindex\", \"-1\");\n    targetEl.blur();\n  }\n  private _focusOnCalendarCell() {\n    const targetEl = this._getFocusedTarget();\n    if (targetEl) {\n      targetEl.setAttribute(\"tabindex\", \"3\");\n      targetEl.focus();\n      this.emit(\"sgds-update-focus\", { detail: this.focusedDate });\n    } else {\n      /** Change month view */\n      this.emit(\"sgds-change-calendar\", { detail: this.focusedDate });\n    }\n  }\n  private _generateDays() {\n    const selectedDates = this.selectedDate.map(d => setTimeToNoon(d));\n\n    const rangeSelectedDates = this._generateIncrementDates();\n    const minimumDate = this.minDate ? setTimeToNoon(new Date(this.minDate)) : null;\n    const maximumDate = this.maxDate ? setTimeToNoon(new Date(this.maxDate)) : null;\n    const year = this.displayDate.getFullYear();\n    const month = this.displayDate.getMonth();\n    const firstDateOfMonth = new Date(year, month, 1);\n    const startingDayOfMonth = firstDateOfMonth.getDay();\n    let monthLength = DatepickerCalendar.daysInMonth[month];\n    if (month === 1) {\n      if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {\n        monthLength = 29;\n      }\n    }\n\n    const weeks = [];\n    let day = 1;\n    for (let i = 0; i < 9; i++) {\n      const week = [];\n      for (let j = 0; j <= 6; j++) {\n        if (day <= monthLength && (i > 0 || j >= startingDayOfMonth)) {\n          const dateObj = new Date(year, month, day, 12, 0, 0, 0);\n          const dateStr = dateObj.toISOString();\n          const beforeMinDate = minimumDate && Date.parse(dateStr) < Date.parse(minimumDate.toISOString());\n          const afterMinDate = maximumDate && Date.parse(dateStr) > Date.parse(maximumDate.toISOString());\n          const clickHandler = beforeMinDate || afterMinDate ? undefined : this._onClickDay;\n\n          const isCurrentMonth = TODAY_DATE.getMonth() === this.displayDate.getMonth();\n          const isCurrentYear = TODAY_DATE.getFullYear() === this.displayDate.getFullYear();\n          const isCurrentDay = TODAY_DATE.getDate() === day;\n\n          const isSelected =\n            selectedDates.length > 0 &&\n            rangeSelectedDates.some(d => Date.parse(dateStr) === Date.parse(d.toISOString()));\n          const isFirstSelectedDate = selectedDates.length > 0 && rangeSelectedDates[0].toISOString() === dateStr;\n          const isLastSelectedDate =\n            selectedDates.length > 1 && rangeSelectedDates[rangeSelectedDates.length - 1].toISOString() === dateStr;\n          const ariaLabel =\n            `${isCurrentDay && isCurrentMonth && isCurrentYear ? \"Today's date, \" : \"\"}` + format(dateObj, \"PPPP\");\n          week.push(\n            html`<td\n              key=${j}\n              data-date=${dateStr}\n              data-day=${day}\n              aria-label=${ariaLabel}\n              aria-current=${ifDefined(isCurrentDay && isCurrentMonth && isCurrentYear ? \"date\" : undefined)}\n              class=${classMap({\n                today: isCurrentDay && isCurrentMonth && isCurrentYear,\n                \"selected-ends\": isFirstSelectedDate || isLastSelectedDate,\n                active: isSelected,\n                disabled: beforeMinDate || afterMinDate\n              })}\n              @click=${clickHandler}\n              aria-selected=${ifDefined(isSelected ? \"true\" : undefined)}\n              tabindex=${this.focusedDate === new Date(dateStr) ? \"3\" : \"-1\"}\n              ?disabled=${beforeMinDate || afterMinDate}\n              aria-disabled=${ifDefined(beforeMinDate || afterMinDate ? \"true\" : undefined)}\n              role=\"button\"\n            >\n              ${day}\n            </td>`\n          );\n          day++;\n        } else {\n          week.push(html`<td key=${j}></td>`);\n        }\n      }\n\n      weeks.push(\n        html`<tr key=${i}>\n          ${week}\n        </tr>`\n      );\n      if (day > monthLength) {\n        break;\n      }\n    }\n\n    const dayView = html`\n      <table role=\"grid\">\n        <thead>\n          <tr>\n            ${DatepickerCalendar.DAY_LABELS.map(\n              (label: string, index: number) =>\n                html` <th key=${index} abbr=${label} scope=\"col\">${label.slice(0, 3)}</th> `\n            )}\n          </tr>\n        </thead>\n        <tbody>\n          ${weeks}\n        </tbody>\n      </table>\n    `;\n    return dayView;\n  }\n\n  private _generateMonths() {\n    const rangeDates = this._generateIncrementDates();\n    const selectedTime = rangeDates.map(e => setTimeToNoon(new Date(e.getFullYear(), e.getMonth())).getTime());\n\n    const year = this.displayDate.getFullYear();\n\n    const monthView = html`\n      <div class=\"monthpicker\">\n        ${DatepickerCalendar.MONTHVIEW_LABELS.map((m, idx) => {\n          const isCurrentMonth = idx === TODAY_DATE.getMonth() && year === TODAY_DATE.getFullYear();\n          const time = setTimeToNoon(new Date(year, idx)).getTime();\n          const isFirstSelectedMonth = rangeDates[0].getMonth() === idx;\n          const isFirstSelectedYear = rangeDates[0].getFullYear() === year;\n          const isLastSelectedMonth = rangeDates[rangeDates.length - 1].getMonth() === idx;\n          const isLastSelectedYear = rangeDates[rangeDates.length - 1].getFullYear() === year;\n          const ariaLabel = isCurrentMonth ? `Current month ${m} ${year}` : `${m} ${year}`;\n          return html` <button\n            class=${classMap({\n              active: selectedTime.includes(time),\n              today: isCurrentMonth,\n              month: true,\n              \"selected-ends\":\n                (isFirstSelectedMonth && isFirstSelectedYear) || (isLastSelectedMonth && isLastSelectedYear)\n            })}\n            @click=${() => this._onClickMonth(idx)}\n            data-month=${idx}\n            data-year=${year}\n            tabindex=\"3\"\n            aria-selected=${selectedTime.includes(time)}\n            aria-label=${ariaLabel}\n          >\n            ${m.slice(0, 3)}\n          </button>`;\n        })}\n      </div>\n    `;\n    return monthView;\n  }\n\n  private _generateYears() {\n    const selectedYears = this._generateIncrementDates().map(e => e.getFullYear());\n    const CURRENT_YEAR = TODAY_DATE.getFullYear();\n\n    const yearArray = createYearViewArray(this.displayDate, CURRENT_YEAR);\n\n    const yearView = html`\n      <div class=\"sgds yearpicker\">\n        ${yearArray.map(y => {\n          const isFirstSelectedYear = selectedYears[0] === y;\n          const isLastSectedYear = selectedYears[selectedYears.length - 1] === y;\n          return html`\n            <button\n              class=${classMap({\n                active: selectedYears.includes(y),\n                year: true,\n                today: CURRENT_YEAR === y,\n                \"selected-ends\": isFirstSelectedYear || isLastSectedYear\n              })}\n              @click=${() => this._onClickYear(y)}\n              data-year=${y}\n              tabindex=\"3\"\n              ?disabled=${y < 1900}\n              aria-selected=${selectedYears.includes(y)}\n              aria-label=${ifDefined(CURRENT_YEAR === y ? `Current year, ${y}` : undefined)}\n            >\n              ${y}\n            </button>\n          `;\n        })}\n      </div>\n    `;\n    return yearView;\n  }\n  render() {\n    let viewContent: HTMLTemplateResult;\n\n    switch (this.view) {\n      case \"days\":\n        viewContent = html` ${this._generateDays()} `;\n        break;\n      case \"months\":\n        viewContent = html` ${this._generateMonths()} `;\n        break;\n      case \"years\":\n        viewContent = html` ${this._generateYears()} `;\n        break;\n      default:\n        viewContent = html` ${this._generateDays()} `; // Set a default view\n        break;\n    }\n\n    return html` <div class=\"datepicker-body\">${viewContent}</div> `;\n  }\n}\n\nexport default DatepickerCalendar;\n"],"names":["datepickerCalendarStyle"],"mappings":"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"}
+{"version":3,"file":"datepicker-calendar.js","sources":["../../../../src/components/Datepicker/datepicker-calendar.ts"],"sourcesContent":["import { format, isAfter, isEqual } from \"date-fns\";\nimport { HTMLTemplateResult, html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { createYearViewArray, setTimeToNoon } from \"../../utils/time\";\nimport { watch } from \"../../utils/watch\";\nimport { ViewEnum } from \"./types\";\nimport datepickerCalendarStyle from \"./datepicker-calendar.css\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n\nconst TODAY_DATE = new Date();\n\nconst keyPressAction = {\n  ArrowUp: {\n    days: -7,\n    months: -3,\n    years: -3\n  },\n  ArrowDown: {\n    days: 7,\n    months: 3,\n    years: 3\n  },\n  ArrowRight: {\n    days: 1,\n    months: 1,\n    years: 1\n  },\n  ArrowLeft: {\n    days: -1,\n    months: -1,\n    years: -1\n  }\n};\nexport class DatepickerCalendar extends SgdsElement {\n  static styles = [datepickerCalendarStyle];\n\n  /** @internal */\n  static DAY_LABELS = [\"Sunday\", \"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\"];\n\n  /** @internal */\n  static daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];\n\n  /** @internal */\n  static MONTHVIEW_LABELS = [\n    \"January\",\n    \"February\",\n    \"March\",\n    \"April\",\n    \"May\",\n    \"June\",\n    \"July\",\n    \"August\",\n    \"September\",\n    \"October\",\n    \"November\",\n    \"December\"\n  ];\n\n  /** @internal */\n  @property({ type: Array }) selectedDate: Date[] = [];\n\n  /** @internal */\n  @property({ attribute: false }) displayDate: Date;\n\n  /** @internal */\n  @property({ type: String }) minDate?: string;\n\n  /** @internal */\n  @property({ type: String }) maxDate?: string;\n\n  /** @internal */\n  @property({ type: String, reflect: true }) mode: \"single\" | \"range\" = \"single\";\n\n  private focusedDate: Date;\n\n  /** @internal */\n  @property() view: ViewEnum;\n\n  /** @internal */\n  @property({ type: Boolean }) show: boolean;\n\n  @property()\n  focusedTabIndex: number;\n\n  /**Shifts focus from Input to Calendar */\n  public focusOnCalendar(toBlurEl: HTMLElement) {\n    toBlurEl.blur();\n    this._focusOnCalendarCell();\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"keydown\", this._handleKeyPress);\n    /** Prevent validation from happening when navigating the calendar */\n    this.addEventListener(\"blur\", e => e.stopPropagation());\n  }\n\n  updated() {\n    /** For KeyboardNavigation (switching months) and ClickNavigation:\n     * Runs after render has completed and td of next month has appeared.\n     * For the case when calendar view changes to the next month\n     * */\n\n    if (this.focusedTabIndex === 3) {\n      this._focusOnCalendarCell();\n    }\n  }\n\n  @watch(\"displayDate\")\n  _updateFocusedDate() {\n    this.focusedDate = setTimeToNoon(this.displayDate);\n    if (this.focusedDate.getFullYear() < 1900) {\n      this.focusedDate.setFullYear(1900);\n    }\n  }\n\n  private _setFocusedDate(shift: number) {\n    const currentFocusedDate = this.focusedDate.getDate();\n    const currentFocusedMonth = this.focusedDate.getMonth();\n    const currentFocusedYear = this.focusedDate.getFullYear();\n    switch (this.view) {\n      case \"days\": {\n        const newFocusedDate = setTimeToNoon(\n          new Date(currentFocusedYear, currentFocusedMonth, currentFocusedDate + shift)\n        );\n        if (isAfter(newFocusedDate, new Date(0, 0, 1, 12)) || isEqual(newFocusedDate, new Date(0, 0, 1, 12)))\n          this.focusedDate = newFocusedDate;\n        break;\n      }\n      case \"months\": {\n        const newFocusedDate = setTimeToNoon(\n          new Date(currentFocusedYear, currentFocusedMonth + shift, currentFocusedDate)\n        );\n\n        if (isAfter(newFocusedDate, new Date(0, 0, 1, 12)) || isEqual(newFocusedDate, new Date(0, 0, 1, 12))) {\n          this.focusedDate = newFocusedDate;\n        }\n        break;\n      }\n      case \"years\": {\n        const newFocusedDate = setTimeToNoon(\n          new Date(currentFocusedYear + shift, currentFocusedMonth, currentFocusedDate)\n        );\n        if (newFocusedDate.getFullYear() >= 1900) {\n          this.focusedDate = newFocusedDate;\n        }\n        break;\n      }\n    }\n  }\n  private _handleEnterDateKeyboard(event: KeyboardEvent) {\n    const targetElement = event.composedPath()[0] as HTMLElement;\n    if (targetElement.classList.contains(\"disabled\")) return;\n\n    switch (this.view) {\n      case \"days\":\n        this._onClickDay(event);\n        break;\n      case \"months\": {\n        const { month } = targetElement.dataset;\n        this._onClickMonth(parseInt(month));\n        break;\n      }\n      case \"years\": {\n        const { year } = targetElement.dataset;\n        this._onClickYear(parseInt(year));\n      }\n    }\n  }\n  private _handleKeyPress(event: KeyboardEvent) {\n    if (event.key === \"Enter\") {\n      event.preventDefault();\n      this._handleEnterDateKeyboard(event);\n      return;\n    }\n    if (event.key === \"Tab\") {\n      const targetEl: HTMLElement = this._getFocusedTarget();\n      if (this.focusedTabIndex !== 3) targetEl.blur();\n      return;\n    }\n    if (event.key.includes(\"Arrow\")) {\n      event.preventDefault();\n      this._blurCalendarCell();\n      const keyShiftObject = keyPressAction[event.key];\n      const shiftNumber = keyShiftObject[this.view];\n\n      this._setFocusedDate(shiftNumber);\n\n      this._focusOnCalendarCell();\n    }\n  }\n\n  private _generateIncrementDates(): Date[] {\n    const start = setTimeToNoon(this.selectedDate[0]);\n\n    if (this.selectedDate.length < 2) {\n      return [start];\n    }\n\n    const end = setTimeToNoon(this.selectedDate[1]);\n    const arr: Date[] = [];\n    if (start.getTime() < end.getTime()) {\n      for (let dt = start; dt <= end; dt.setDate(dt.getDate() + 1)) {\n        arr.push(new Date(dt));\n      }\n    } else {\n      for (let dt = end; dt <= start; dt.setDate(dt.getDate() + 1)) {\n        arr.push(new Date(dt));\n      }\n    }\n    return arr;\n  }\n\n  private _onClickDay(event: MouseEvent | KeyboardEvent) {\n    const { day, date } = (event.composedPath()[0] as HTMLTableCellElement).dataset;\n    const displayDateClone = new Date(this.displayDate);\n    displayDateClone.setDate(parseInt(day));\n    /** update new focused date for mouse click */\n    if (event.type === \"click\") {\n      this.focusedDate = setTimeToNoon(new Date(date));\n    }\n\n    if (this.mode === \"single\") {\n      // Single mode: Select a single date\n\n      this.selectedDate = [displayDateClone];\n\n      // Emit event with selected date\n      this.emit(\"sgds-selectdates\", { detail: this.selectedDate });\n    } else if (this.mode === \"range\") {\n      // Range mode: Select a range of dates\n      const selectedDates = [...this.selectedDate];\n\n      if (selectedDates.length === 0 || selectedDates.length === 2) {\n        // No dates selected yet or both dates already selected,\n        // start a new range by clearing the selected dates array\n        selectedDates.length = 0;\n      }\n\n      // Add the selected date to the range\n      selectedDates.push(displayDateClone);\n\n      // Update the selectedDate property\n      this.selectedDate = selectedDates;\n\n      // Emit event with the range of selected dates\n      this.emit(\"sgds-selectdates\", { detail: this.selectedDate });\n    }\n\n    // Check if the selected date is before minDate or after maxDate\n    const minimumDate = this.minDate ? setTimeToNoon(new Date(this.minDate)) : null;\n    const maximumDate = this.maxDate ? setTimeToNoon(new Date(this.maxDate)) : null;\n\n    const selectedDate = setTimeToNoon(displayDateClone);\n    if ((minimumDate && selectedDate < minimumDate) || (maximumDate && selectedDate > maximumDate)) {\n      event.stopPropagation();\n      event.preventDefault();\n    }\n  }\n\n  private _onClickMonth(month: number, year: number = this.focusedDate.getFullYear()) {\n    const displayDateClone = new Date(this.displayDate);\n    this.view = \"days\";\n    displayDateClone.setMonth(month);\n    displayDateClone.setFullYear(year);\n    this.displayDate = displayDateClone;\n    this.emit(\"sgds-view\", { detail: this.view });\n    //once clicked, should change view to days, and hold value and change view\n    this.emit(\"sgds-selectmonth\", { detail: this.displayDate });\n  }\n\n  private _onClickYear(year: number) {\n    const displayDateClone = new Date(this.displayDate);\n    displayDateClone.setFullYear(year);\n    this.displayDate = displayDateClone;\n    this.view = \"months\";\n    this.emit(\"sgds-view\", { detail: this.view });\n\n    this.emit(\"sgds-selectyear\", { detail: this.displayDate });\n  }\n\n  private _getFocusedTarget(): HTMLElement {\n    const queryObj = {\n      days: `td[data-date=\"${this.focusedDate.toISOString()}\"]`,\n      months: `button[data-month=\"${this.focusedDate.getMonth()}\"][data-year=\"${this.focusedDate.getFullYear()}\"]`,\n      years: `button[data-year=\"${this.focusedDate.getFullYear()}\"]`\n    };\n    const queryString = queryObj[this.view];\n    const targetEl: HTMLElement = this.shadowRoot.querySelector(`${queryString}`);\n    return targetEl;\n  }\n  private _blurCalendarCell() {\n    const targetEl = this._getFocusedTarget();\n    targetEl.setAttribute(\"tabindex\", \"-1\");\n    targetEl.blur();\n  }\n  private _focusOnCalendarCell() {\n    const targetEl = this._getFocusedTarget();\n    if (targetEl) {\n      targetEl.setAttribute(\"tabindex\", \"0\");\n      targetEl.focus();\n      this.emit(\"sgds-update-focus\", { detail: this.focusedDate });\n    } else {\n      /** Change month view */\n      this.emit(\"sgds-change-calendar\", { detail: this.focusedDate });\n    }\n  }\n  private _generateDays() {\n    const selectedDates = this.selectedDate.map(d => setTimeToNoon(d));\n\n    const rangeSelectedDates = this._generateIncrementDates();\n    const minimumDate = this.minDate ? setTimeToNoon(new Date(this.minDate)) : null;\n    const maximumDate = this.maxDate ? setTimeToNoon(new Date(this.maxDate)) : null;\n    const year = this.displayDate.getFullYear();\n    const month = this.displayDate.getMonth();\n    const firstDateOfMonth = new Date(year, month, 1);\n    const startingDayOfMonth = firstDateOfMonth.getDay();\n    let monthLength = DatepickerCalendar.daysInMonth[month];\n    if (month === 1) {\n      if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {\n        monthLength = 29;\n      }\n    }\n\n    const weeks = [];\n    let day = 1;\n    for (let i = 0; i < 9; i++) {\n      const week = [];\n      for (let j = 0; j <= 6; j++) {\n        if (day <= monthLength && (i > 0 || j >= startingDayOfMonth)) {\n          const dateObj = new Date(year, month, day, 12, 0, 0, 0);\n          const dateStr = dateObj.toISOString();\n          const beforeMinDate = minimumDate && Date.parse(dateStr) < Date.parse(minimumDate.toISOString());\n          const afterMinDate = maximumDate && Date.parse(dateStr) > Date.parse(maximumDate.toISOString());\n          const clickHandler = beforeMinDate || afterMinDate ? undefined : this._onClickDay;\n\n          const isCurrentMonth = TODAY_DATE.getMonth() === this.displayDate.getMonth();\n          const isCurrentYear = TODAY_DATE.getFullYear() === this.displayDate.getFullYear();\n          const isCurrentDay = TODAY_DATE.getDate() === day;\n\n          const isSelected =\n            selectedDates.length > 0 &&\n            rangeSelectedDates.some(d => Date.parse(dateStr) === Date.parse(d.toISOString()));\n          const isFirstSelectedDate = selectedDates.length > 0 && rangeSelectedDates[0].toISOString() === dateStr;\n          const isLastSelectedDate =\n            selectedDates.length > 1 && rangeSelectedDates[rangeSelectedDates.length - 1].toISOString() === dateStr;\n          const ariaLabel =\n            `${isCurrentDay && isCurrentMonth && isCurrentYear ? \"Today's date, \" : \"\"}` + format(dateObj, \"PPPP\");\n          week.push(\n            html`<td\n              key=${j}\n              data-date=${dateStr}\n              data-day=${day}\n              aria-label=${ariaLabel}\n              aria-current=${ifDefined(isCurrentDay && isCurrentMonth && isCurrentYear ? \"date\" : undefined)}\n              class=${classMap({\n                today: isCurrentDay && isCurrentMonth && isCurrentYear,\n                \"selected-ends\": isFirstSelectedDate || isLastSelectedDate,\n                active: isSelected,\n                disabled: beforeMinDate || afterMinDate\n              })}\n              @click=${clickHandler}\n              aria-selected=${isSelected ? \"true\" : \"false\"}\n              tabindex=${this.focusedDate === new Date(dateStr) ? \"0\" : \"-1\"}\n              ?disabled=${beforeMinDate || afterMinDate}\n              aria-disabled=${ifDefined(beforeMinDate || afterMinDate ? \"true\" : undefined)}\n              role=\"gridcell\"\n            >\n              ${day}\n            </td>`\n          );\n          day++;\n        } else {\n          week.push(html`<td key=${j}></td>`);\n        }\n      }\n\n      weeks.push(\n        html`<tr key=${i}>\n          ${week}\n        </tr>`\n      );\n      if (day > monthLength) {\n        break;\n      }\n    }\n\n    const dayView = html`\n      <table role=\"grid\">\n        <thead>\n          <tr>\n            ${DatepickerCalendar.DAY_LABELS.map(\n              (label: string, index: number) =>\n                html` <th key=${index} abbr=${label} scope=\"col\">${label.slice(0, 3)}</th> `\n            )}\n          </tr>\n        </thead>\n        <tbody>\n          ${weeks}\n        </tbody>\n      </table>\n    `;\n    return dayView;\n  }\n\n  private _generateMonths() {\n    const rangeDates = this._generateIncrementDates();\n    const selectedTime = rangeDates.map(e => setTimeToNoon(new Date(e.getFullYear(), e.getMonth())).getTime());\n\n    const year = this.displayDate.getFullYear();\n\n    const monthView = html`\n      <div class=\"monthpicker\" role=\"grid\">\n        ${[0, 1, 2, 3].map(\n          row => html`\n            <div role=\"row\">\n              ${DatepickerCalendar.MONTHVIEW_LABELS.slice(row * 3, row * 3 + 3).map((m, i) => {\n                const idx = row * 3 + i;\n                const isCurrentMonth = idx === TODAY_DATE.getMonth() && year === TODAY_DATE.getFullYear();\n                const time = setTimeToNoon(new Date(year, idx)).getTime();\n                const isFirstSelectedMonth = rangeDates[0].getMonth() === idx;\n                const isFirstSelectedYear = rangeDates[0].getFullYear() === year;\n                const isLastSelectedMonth = rangeDates[rangeDates.length - 1].getMonth() === idx;\n                const isLastSelectedYear = rangeDates[rangeDates.length - 1].getFullYear() === year;\n                const ariaLabel = isCurrentMonth ? `Current month ${m} ${year}` : `${m} ${year}`;\n                return html` <button\n                  role=\"gridcell\"\n                  class=${classMap({\n                    active: selectedTime.includes(time),\n                    today: isCurrentMonth,\n                    month: true,\n                    \"selected-ends\":\n                      (isFirstSelectedMonth && isFirstSelectedYear) || (isLastSelectedMonth && isLastSelectedYear)\n                  })}\n                  @click=${() => this._onClickMonth(idx)}\n                  data-month=${idx}\n                  data-year=${year}\n                  tabindex=\"0\"\n                  aria-selected=${selectedTime.includes(time) ? \"true\" : \"false\"}\n                  aria-label=${ariaLabel}\n                >\n                  ${m.slice(0, 3)}\n                </button>`;\n              })}\n            </div>\n          `\n        )}\n      </div>\n    `;\n    return monthView;\n  }\n\n  private _generateYears() {\n    const selectedYears = this._generateIncrementDates().map(e => e.getFullYear());\n    const CURRENT_YEAR = TODAY_DATE.getFullYear();\n\n    const yearArray = createYearViewArray(this.displayDate, CURRENT_YEAR);\n\n    const yearView = html`\n      <div class=\"sgds yearpicker\" role=\"grid\">\n        ${[0, 1, 2, 3].map(\n          row => html`\n            <div role=\"row\">\n              ${yearArray.slice(row * 3, row * 3 + 3).map(y => {\n                const isFirstSelectedYear = selectedYears[0] === y;\n                const isLastSectedYear = selectedYears[selectedYears.length - 1] === y;\n                return html`\n                  <button\n                    role=\"gridcell\"\n                    class=${classMap({\n                      active: selectedYears.includes(y),\n                      year: true,\n                      today: CURRENT_YEAR === y,\n                      \"selected-ends\": isFirstSelectedYear || isLastSectedYear\n                    })}\n                    @click=${() => this._onClickYear(y)}\n                    data-year=${y}\n                    tabindex=\"0\"\n                    ?disabled=${y < 1900}\n                    aria-selected=${selectedYears.includes(y) ? \"true\" : \"false\"}\n                    aria-label=${ifDefined(CURRENT_YEAR === y ? `Current year, ${y}` : undefined)}\n                  >\n                    ${y}\n                  </button>\n                `;\n              })}\n            </div>\n          `\n        )}\n      </div>\n    `;\n    return yearView;\n  }\n  render() {\n    let viewContent: HTMLTemplateResult;\n\n    switch (this.view) {\n      case \"days\":\n        viewContent = html` ${this._generateDays()} `;\n        break;\n      case \"months\":\n        viewContent = html` ${this._generateMonths()} `;\n        break;\n      case \"years\":\n        viewContent = html` ${this._generateYears()} `;\n        break;\n      default:\n        viewContent = html` ${this._generateDays()} `; // Set a default view\n        break;\n    }\n\n    return html` <div class=\"datepicker-body\">${viewContent}</div> `;\n  }\n}\n\nexport default DatepickerCalendar;\n"],"names":["datepickerCalendarStyle"],"mappings":"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"}

package/react/components/Datepicker/datepicker-calendar2.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`.datepicker-body{color:var(--sgds-form-color-default);display:flex;justify-content:center}table{border-collapse:collapse;text-align:center}.monthpicker,.yearpicker{display:grid;grid-template-columns:repeat(3,6rem);grid-template-rows:repeat(4,2.5rem)}button.month,button.year{background-color:transparent;border:0;border-radius:var(--sgds-form-border-radius-sm);font-size:var(--sgds-font-size-label-sm);line-height:var(--sgds-line-height-2-xs);padding:0;position:relative}button.month.active:not(.selected-ends),button.year.active:not(.selected-ends),td[data-day].active:not(.selected-ends){background-color:var(--sgds-primary-surface-translucent);border-radius:0;cursor:pointer}button.month:hover:not(.active),button.year:hover:not(.active),td[data-day]:hover:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle);cursor:pointer}button.month:focus:not(.active),button.year:focus:not(.active),td[data-day]:focus:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle)}button.month:focus-visible,button.year:focus-visible,td[data-day]:focus-visible{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}button.month.active:not(.selected-ends):focus,button.year.active:not(.selected-ends):focus,td[data-day].active:not(.selected-ends):focus{border-radius:var(--sgds-form-border-radius-sm)}button.year.active{background-color:var(--sgds-primary-surface-translucent);cursor:pointer}td,th{border-radius:var(--sgds-form-border-radius-sm);font-size:var(--sgds-font-size-label-sm);height:var(--sgds-form-height-lg);line-height:var(--sgds-line-height-2-xs);padding:0;position:relative;width:var(--sgds-form-width-md)}th{font-weight:var(--sgds-font-weight-semibold)}td[data-day]{cursor:pointer}button.month.active.selected-ends,button.year.active.selected-ends,td[data-day].active.selected-ends{background-color:var(--sgds-form-primary-surface-default);color:var(--sgds-form-color-fixed-light)}button.month.active.selected-ends:focus,button.month.active.selected-ends:hover,button.year.active.selected-ends:focus,button.year.active.selected-ends:hover,td[data-day].active.selected-ends:focus,td[data-day].active.selected-ends:hover{background-color:var(--sgds-form-primary-surface-emphasis)}td[data-day].disabled{cursor:not-allowed;opacity:var(--sgds-opacity-40)}.today{align-items:center;display:flex;flex-direction:column;justify-content:center}.today:after{background-color:var(--sgds-form-primary-surface-default);bottom:6px;content:".";line-height:4px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;position:absolute;width:4px}.today.active.selected-ends:after{background-color:var(--sgds-form-color-inverse)}`;
+var css_248z = css`.datepicker-body{color:var(--sgds-form-color-default);display:flex;justify-content:center}table{border-collapse:collapse;text-align:center}.monthpicker,.yearpicker{display:grid;grid-template-columns:repeat(3,6rem);grid-template-rows:repeat(4,2.5rem)}.monthpicker [role=row],.yearpicker [role=row]{display:contents}button.month,button.year{background-color:transparent;border:0;border-radius:var(--sgds-form-border-radius-sm);font-size:var(--sgds-font-size-label-sm);line-height:var(--sgds-line-height-2-xs);padding:0;position:relative}button.month.active:not(.selected-ends),button.year.active:not(.selected-ends),td[data-day].active:not(.selected-ends){background-color:var(--sgds-primary-surface-translucent);border-radius:0;cursor:pointer}button.month:hover:not(.active),button.year:hover:not(.active),td[data-day]:hover:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle);cursor:pointer}button.month:focus:not(.active),button.year:focus:not(.active),td[data-day]:focus:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle)}button.month:focus-visible,button.year:focus-visible,td[data-day]:focus-visible{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}button.month.active:not(.selected-ends):focus,button.year.active:not(.selected-ends):focus,td[data-day].active:not(.selected-ends):focus{border-radius:var(--sgds-form-border-radius-sm)}button.year.active{background-color:var(--sgds-primary-surface-translucent);cursor:pointer}td,th{border-radius:var(--sgds-form-border-radius-sm);font-size:var(--sgds-font-size-label-sm);height:var(--sgds-form-height-lg);line-height:var(--sgds-line-height-2-xs);padding:0;position:relative;width:var(--sgds-form-width-md)}th{font-weight:var(--sgds-font-weight-semibold)}td[data-day]{cursor:pointer}button.month.active.selected-ends,button.year.active.selected-ends,td[data-day].active.selected-ends{background-color:var(--sgds-form-primary-surface-default);color:var(--sgds-form-color-fixed-light)}button.month.active.selected-ends:focus,button.month.active.selected-ends:hover,button.year.active.selected-ends:focus,button.year.active.selected-ends:hover,td[data-day].active.selected-ends:focus,td[data-day].active.selected-ends:hover{background-color:var(--sgds-form-primary-surface-emphasis)}td[data-day].disabled{cursor:not-allowed;opacity:var(--sgds-opacity-40)}.today{align-items:center;display:flex;flex-direction:column;justify-content:center}.today:after{background-color:var(--sgds-form-primary-surface-default);bottom:6px;content:".";line-height:4px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;position:absolute;width:4px}.today.active.selected-ends:after{background-color:var(--sgds-form-color-inverse)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=datepicker-calendar2.js.map

package/react/components/Datepicker/datepicker-header.cjs.js

@@ -157,14 +157,14 @@ class DatepickerHeader extends sgdsElement["default"] {
     }
     render() {
         return lit.html `
-      <div class="datepicker-header dropdown-header" role="heading">
+      <div class="datepicker-header dropdown-header">
         <sgds-icon-button
           name="arrow-left"
           size="sm"
           variant="ghost"
           @click="${this.handleClickPrevious}"
           class=${classMap_js.classMap({ invisible: this._removeCaret() })}
-          aria-label=${this._ariaLabelForPrevBtn()}
+          .ariaLabel=${this._ariaLabelForPrevBtn()}
         >
         </sgds-icon-button>
         <sgds-button
@@ -173,6 +173,7 @@ class DatepickerHeader extends sgdsElement["default"] {
           size="sm"
           @click=${this._changeView}
           class=${classMap_js.classMap({ disabled: this.view === "years" })}
+          .ariaLabel=${this._ariaLabelForHeaderBtn()}
           aria-disabled=${this.view === "years" ? "true" : "false"}
           aria-live="polite"
         >
@@ -183,7 +184,7 @@ class DatepickerHeader extends sgdsElement["default"] {
           size="sm"
           variant="ghost"
           @click="${this._handleClickNext}"
-          aria-label=${this._ariaLabelForNextBtn()}
+          .ariaLabel=${this._ariaLabelForNextBtn()}
         >
         </sgds-icon-button>
       </div>

package/react/components/Datepicker/datepicker-header.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker-header.cjs.js","sources":["../../../../src/components/Datepicker/datepicker-header.ts"],"sourcesContent":["import { isBefore, isEqual } from \"date-fns\";\nimport { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { sanitizedNextMonth, sanitizedPreviousMonth } from \"../../utils/time\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsButton from \"../Button/sgds-button\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport datepickerHeaderStyle from \"./datepicker-header.css\";\nimport { ViewEnum } from \"./types\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n\nexport class DatepickerHeader extends SgdsElement {\n  static styles = [datepickerHeaderStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-icon-button\": SgdsIconButton,\n    \"sgds-button\": SgdsButton\n  };\n\n  /** @internal */\n  @property({ attribute: false })\n  displayDate: Date;\n  /** @internal */\n  @property({ attribute: false })\n  focusedDate: Date;\n  /** @internal */\n  @property({ attribute: false })\n  selectedDate: Date[] = [];\n\n  /** @internal */\n  @property()\n  view: ViewEnum;\n  /** @internal */\n  @property()\n  focusedTabIndex: number;\n\n  @watch(\"focusedTabIndex\", { waitUntilFirstUpdate: true })\n  _handleFocusedTabIndexChange() {\n    let buttonToFocus: SgdsButton | SgdsIconButton;\n    switch (this.focusedTabIndex) {\n      case 0:\n        buttonToFocus = this.shadowRoot.querySelector(\"sgds-icon-button[name='arrow-left']\");\n        break;\n      case 1:\n        buttonToFocus = this.shadowRoot.querySelector(\"sgds-button\");\n        break;\n      case 2:\n        buttonToFocus = this.shadowRoot.querySelector(\"sgds-icon-button[name='arrow-right']\");\n        break;\n      default:\n        return;\n    }\n    buttonToFocus.focus();\n  }\n\n  private _changeView() {\n    switch (this.view) {\n      case \"days\":\n        this.view = \"months\";\n        break;\n      case \"months\":\n        this.view = \"years\";\n        break;\n      case \"years\":\n        break;\n    }\n    this.emit(\"sgds-view\", { detail: this.view }); // emit event to render the correct view\n  }\n\n  public renderHeader(displayDate = this.displayDate, view = this.view) {\n    if (view === \"months\") {\n      return displayDate.getFullYear();\n    }\n    if (view === \"years\") {\n      const CURRENT_YEAR = new Date().getFullYear();\n      const displayYear = displayDate.getFullYear();\n      const remainder = (displayYear - CURRENT_YEAR) % 12;\n      const yearsPosition = remainder < 0 ? 12 + remainder : remainder;\n      const startLimit = displayYear - yearsPosition;\n      const endLimit = displayYear - yearsPosition + 12 - 1;\n      return `${startLimit} - ${endLimit}`;\n    }\n    return `${MONTH_LABELS[displayDate.getMonth()]} ${displayDate.getFullYear()}`;\n  }\n\n  private _renderHeaderTemplate() {\n    return html`${this.renderHeader()}`;\n  }\n  /** @internal */\n  private handleClickPrevious() {\n    const { view, displayDate, focusedDate } = this;\n    let newDisplayDate = new Date(displayDate);\n\n    if (view === \"months\") {\n      newDisplayDate.setFullYear(newDisplayDate.getFullYear() - 1);\n    } else if (this.view === \"years\") {\n      newDisplayDate.setFullYear(newDisplayDate.getFullYear() - 12);\n    } else {\n      /**\n       * FocusedDate gets precedence over displayDate.\n       *  This happens when the arrow keys are pressed to\n       *  change focus date and user clicks the arrow buttons to\n       * shift months\n       */\n      if (focusedDate.getDate() !== displayDate.getDate()) {\n        newDisplayDate = sanitizedPreviousMonth(focusedDate);\n      } else {\n        newDisplayDate = sanitizedPreviousMonth(newDisplayDate);\n      }\n    }\n    this.displayDate = newDisplayDate; // Update the displayDate property\n    // emit event to render correct view\n    this.emit(\"sgds-change-calendar\", { detail: this.displayDate });\n  }\n\n  /** @internal */\n  private _handleClickNext() {\n    const { view, displayDate, focusedDate } = this;\n    let newDisplayDate = new Date(displayDate);\n\n    if (view === \"months\") {\n      newDisplayDate.setFullYear(newDisplayDate.getFullYear() + 1);\n    } else if (this.view === \"years\") {\n      newDisplayDate.setFullYear(newDisplayDate.getFullYear() + 12);\n    } else {\n      /** FocusedDate gets precedence over displayDate  */\n      if (focusedDate.getDate() !== displayDate.getDate()) {\n        newDisplayDate = sanitizedNextMonth(focusedDate);\n      } else {\n        newDisplayDate = sanitizedNextMonth(newDisplayDate);\n      }\n    }\n    this.displayDate = newDisplayDate; // Update the displayDate property\n\n    //emit event to render correct view\n    this.emit(\"sgds-change-calendar\", { detail: this.displayDate });\n  }\n  private _removeCaret(): boolean {\n    const displayYear = this.displayDate.getFullYear();\n    const displayMonth = this.displayDate.getMonth();\n    const displayMonthYear = new Date(displayYear, displayMonth);\n\n    if (this.view === \"months\") {\n      return displayYear <= 1900;\n    }\n    if (this.view === \"years\") {\n      return displayYear < 1904;\n    }\n    return isEqual(displayMonthYear, new Date(0, 0, 1)) || isBefore(displayMonthYear, new Date(0, 0, 1));\n  }\n\n  private _ariaLabelForNextBtn() {\n    const nextBtnDate = {\n      days: \"Show next month\",\n      months: \"Show next year\",\n      years: \"Show next 12 years\"\n    };\n    return nextBtnDate[this.view];\n  }\n  private _ariaLabelForPrevBtn() {\n    const prevBtnDate = {\n      days: \"Show previous month\",\n      months: \"Show previous year\",\n      years: \"Show previous 12 years\"\n    };\n    return prevBtnDate[this.view];\n  }\n\n  private _ariaLabelForHeaderBtn() {\n    const message = {\n      days: `Current view is days, click to show months in ${this.displayDate.getFullYear()}`,\n      months: `Current view is months, click to show years between ${this.renderHeader(this.displayDate, \"years\")}`,\n      years: `Current view is years`\n    };\n    return `${this.renderHeader()}. ${message[this.view]}`;\n  }\n  render() {\n    return html`\n      <div class=\"datepicker-header dropdown-header\" role=\"heading\">\n        <sgds-icon-button\n          name=\"arrow-left\"\n          size=\"sm\"\n          variant=\"ghost\"\n          @click=\"${this.handleClickPrevious}\"\n          class=${classMap({ invisible: this._removeCaret() })}\n          aria-label=${this._ariaLabelForPrevBtn()}\n        >\n        </sgds-icon-button>\n        <sgds-button\n          fullWidth\n          variant=\"ghost\"\n          size=\"sm\"\n          @click=${this._changeView}\n          class=${classMap({ disabled: this.view === \"years\" })}\n          aria-disabled=${this.view === \"years\" ? \"true\" : \"false\"}\n          aria-live=\"polite\"\n        >\n          ${this._renderHeaderTemplate()}\n        </sgds-button>\n        <sgds-icon-button\n          name=\"arrow-right\"\n          size=\"sm\"\n          variant=\"ghost\"\n          @click=\"${this._handleClickNext}\"\n          aria-label=${this._ariaLabelForNextBtn()}\n        >\n        </sgds-icon-button>\n      </div>\n    `;\n  }\n}\n\nexport default DatepickerHeader;\n\nexport const MONTH_LABELS = [\n  \"January\",\n  \"February\",\n  \"March\",\n  \"April\",\n  \"May\",\n  \"June\",\n  \"July\",\n  \"August\",\n  \"September\",\n  \"October\",\n  \"November\",\n  \"December\"\n];\n"],"names":["SgdsElement","html","sanitizedPreviousMonth","sanitizedNextMonth","isEqual","isBefore","classMap","datepickerHeaderStyle","SgdsIcon","SgdsIconButton","SgdsButton","__decorate","property","watch"],"mappings":"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"}
+{"version":3,"file":"datepicker-header.cjs.js","sources":["../../../../src/components/Datepicker/datepicker-header.ts"],"sourcesContent":["import { isBefore, isEqual } from \"date-fns\";\nimport { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { sanitizedNextMonth, sanitizedPreviousMonth } from \"../../utils/time\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsButton from \"../Button/sgds-button\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport datepickerHeaderStyle from \"./datepicker-header.css\";\nimport { ViewEnum } from \"./types\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n\nexport class DatepickerHeader extends SgdsElement {\n  static styles = [datepickerHeaderStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-icon-button\": SgdsIconButton,\n    \"sgds-button\": SgdsButton\n  };\n\n  /** @internal */\n  @property({ attribute: false })\n  displayDate: Date;\n  /** @internal */\n  @property({ attribute: false })\n  focusedDate: Date;\n  /** @internal */\n  @property({ attribute: false })\n  selectedDate: Date[] = [];\n\n  /** @internal */\n  @property()\n  view: ViewEnum;\n  /** @internal */\n  @property()\n  focusedTabIndex: number;\n\n  @watch(\"focusedTabIndex\", { waitUntilFirstUpdate: true })\n  _handleFocusedTabIndexChange() {\n    let buttonToFocus: SgdsButton | SgdsIconButton;\n    switch (this.focusedTabIndex) {\n      case 0:\n        buttonToFocus = this.shadowRoot.querySelector(\"sgds-icon-button[name='arrow-left']\");\n        break;\n      case 1:\n        buttonToFocus = this.shadowRoot.querySelector(\"sgds-button\");\n        break;\n      case 2:\n        buttonToFocus = this.shadowRoot.querySelector(\"sgds-icon-button[name='arrow-right']\");\n        break;\n      default:\n        return;\n    }\n    buttonToFocus.focus();\n  }\n\n  private _changeView() {\n    switch (this.view) {\n      case \"days\":\n        this.view = \"months\";\n        break;\n      case \"months\":\n        this.view = \"years\";\n        break;\n      case \"years\":\n        break;\n    }\n    this.emit(\"sgds-view\", { detail: this.view }); // emit event to render the correct view\n  }\n\n  public renderHeader(displayDate = this.displayDate, view = this.view) {\n    if (view === \"months\") {\n      return displayDate.getFullYear();\n    }\n    if (view === \"years\") {\n      const CURRENT_YEAR = new Date().getFullYear();\n      const displayYear = displayDate.getFullYear();\n      const remainder = (displayYear - CURRENT_YEAR) % 12;\n      const yearsPosition = remainder < 0 ? 12 + remainder : remainder;\n      const startLimit = displayYear - yearsPosition;\n      const endLimit = displayYear - yearsPosition + 12 - 1;\n      return `${startLimit} - ${endLimit}`;\n    }\n    return `${MONTH_LABELS[displayDate.getMonth()]} ${displayDate.getFullYear()}`;\n  }\n\n  private _renderHeaderTemplate() {\n    return html`${this.renderHeader()}`;\n  }\n  /** @internal */\n  private handleClickPrevious() {\n    const { view, displayDate, focusedDate } = this;\n    let newDisplayDate = new Date(displayDate);\n\n    if (view === \"months\") {\n      newDisplayDate.setFullYear(newDisplayDate.getFullYear() - 1);\n    } else if (this.view === \"years\") {\n      newDisplayDate.setFullYear(newDisplayDate.getFullYear() - 12);\n    } else {\n      /**\n       * FocusedDate gets precedence over displayDate.\n       *  This happens when the arrow keys are pressed to\n       *  change focus date and user clicks the arrow buttons to\n       * shift months\n       */\n      if (focusedDate.getDate() !== displayDate.getDate()) {\n        newDisplayDate = sanitizedPreviousMonth(focusedDate);\n      } else {\n        newDisplayDate = sanitizedPreviousMonth(newDisplayDate);\n      }\n    }\n    this.displayDate = newDisplayDate; // Update the displayDate property\n    // emit event to render correct view\n    this.emit(\"sgds-change-calendar\", { detail: this.displayDate });\n  }\n\n  /** @internal */\n  private _handleClickNext() {\n    const { view, displayDate, focusedDate } = this;\n    let newDisplayDate = new Date(displayDate);\n\n    if (view === \"months\") {\n      newDisplayDate.setFullYear(newDisplayDate.getFullYear() + 1);\n    } else if (this.view === \"years\") {\n      newDisplayDate.setFullYear(newDisplayDate.getFullYear() + 12);\n    } else {\n      /** FocusedDate gets precedence over displayDate  */\n      if (focusedDate.getDate() !== displayDate.getDate()) {\n        newDisplayDate = sanitizedNextMonth(focusedDate);\n      } else {\n        newDisplayDate = sanitizedNextMonth(newDisplayDate);\n      }\n    }\n    this.displayDate = newDisplayDate; // Update the displayDate property\n\n    //emit event to render correct view\n    this.emit(\"sgds-change-calendar\", { detail: this.displayDate });\n  }\n  private _removeCaret(): boolean {\n    const displayYear = this.displayDate.getFullYear();\n    const displayMonth = this.displayDate.getMonth();\n    const displayMonthYear = new Date(displayYear, displayMonth);\n\n    if (this.view === \"months\") {\n      return displayYear <= 1900;\n    }\n    if (this.view === \"years\") {\n      return displayYear < 1904;\n    }\n    return isEqual(displayMonthYear, new Date(0, 0, 1)) || isBefore(displayMonthYear, new Date(0, 0, 1));\n  }\n\n  private _ariaLabelForNextBtn() {\n    const nextBtnDate = {\n      days: \"Show next month\",\n      months: \"Show next year\",\n      years: \"Show next 12 years\"\n    };\n    return nextBtnDate[this.view];\n  }\n  private _ariaLabelForPrevBtn() {\n    const prevBtnDate = {\n      days: \"Show previous month\",\n      months: \"Show previous year\",\n      years: \"Show previous 12 years\"\n    };\n    return prevBtnDate[this.view];\n  }\n\n  private _ariaLabelForHeaderBtn() {\n    const message = {\n      days: `Current view is days, click to show months in ${this.displayDate.getFullYear()}`,\n      months: `Current view is months, click to show years between ${this.renderHeader(this.displayDate, \"years\")}`,\n      years: `Current view is years`\n    };\n    return `${this.renderHeader()}. ${message[this.view]}`;\n  }\n  render() {\n    return html`\n      <div class=\"datepicker-header dropdown-header\">\n        <sgds-icon-button\n          name=\"arrow-left\"\n          size=\"sm\"\n          variant=\"ghost\"\n          @click=\"${this.handleClickPrevious}\"\n          class=${classMap({ invisible: this._removeCaret() })}\n          .ariaLabel=${this._ariaLabelForPrevBtn()}\n        >\n        </sgds-icon-button>\n        <sgds-button\n          fullWidth\n          variant=\"ghost\"\n          size=\"sm\"\n          @click=${this._changeView}\n          class=${classMap({ disabled: this.view === \"years\" })}\n          .ariaLabel=${this._ariaLabelForHeaderBtn()}\n          aria-disabled=${this.view === \"years\" ? \"true\" : \"false\"}\n          aria-live=\"polite\"\n        >\n          ${this._renderHeaderTemplate()}\n        </sgds-button>\n        <sgds-icon-button\n          name=\"arrow-right\"\n          size=\"sm\"\n          variant=\"ghost\"\n          @click=\"${this._handleClickNext}\"\n          .ariaLabel=${this._ariaLabelForNextBtn()}\n        >\n        </sgds-icon-button>\n      </div>\n    `;\n  }\n}\n\nexport default DatepickerHeader;\n\nexport const MONTH_LABELS = [\n  \"January\",\n  \"February\",\n  \"March\",\n  \"April\",\n  \"May\",\n  \"June\",\n  \"July\",\n  \"August\",\n  \"September\",\n  \"October\",\n  \"November\",\n  \"December\"\n];\n"],"names":["SgdsElement","html","sanitizedPreviousMonth","sanitizedNextMonth","isEqual","isBefore","classMap","datepickerHeaderStyle","SgdsIcon","SgdsIconButton","SgdsButton","__decorate","property","watch"],"mappings":"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"}

package/react/components/Datepicker/datepicker-header.js

@@ -153,14 +153,14 @@ class DatepickerHeader extends SgdsElement {
     }
     render() {
         return html `
-      <div class="datepicker-header dropdown-header" role="heading">
+      <div class="datepicker-header dropdown-header">
         <sgds-icon-button
           name="arrow-left"
           size="sm"
           variant="ghost"
           @click="${this.handleClickPrevious}"
           class=${classMap({ invisible: this._removeCaret() })}
-          aria-label=${this._ariaLabelForPrevBtn()}
+          .ariaLabel=${this._ariaLabelForPrevBtn()}
         >
         </sgds-icon-button>
         <sgds-button
@@ -169,6 +169,7 @@ class DatepickerHeader extends SgdsElement {
           size="sm"
           @click=${this._changeView}
           class=${classMap({ disabled: this.view === "years" })}
+          .ariaLabel=${this._ariaLabelForHeaderBtn()}
           aria-disabled=${this.view === "years" ? "true" : "false"}
           aria-live="polite"
         >
@@ -179,7 +180,7 @@ class DatepickerHeader extends SgdsElement {
           size="sm"
           variant="ghost"
           @click="${this._handleClickNext}"
-          aria-label=${this._ariaLabelForNextBtn()}
+          .ariaLabel=${this._ariaLabelForNextBtn()}
         >
         </sgds-icon-button>
       </div>

package/react/components/Datepicker/datepicker-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker-header.js","sources":["../../../../src/components/Datepicker/datepicker-header.ts"],"sourcesContent":["import { isBefore, isEqual } from \"date-fns\";\nimport { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { sanitizedNextMonth, sanitizedPreviousMonth } from \"../../utils/time\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsButton from \"../Button/sgds-button\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport datepickerHeaderStyle from \"./datepicker-header.css\";\nimport { ViewEnum } from \"./types\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n\nexport class DatepickerHeader extends SgdsElement {\n  static styles = [datepickerHeaderStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-icon-button\": SgdsIconButton,\n    \"sgds-button\": SgdsButton\n  };\n\n  /** @internal */\n  @property({ attribute: false })\n  displayDate: Date;\n  /** @internal */\n  @property({ attribute: false })\n  focusedDate: Date;\n  /** @internal */\n  @property({ attribute: false })\n  selectedDate: Date[] = [];\n\n  /** @internal */\n  @property()\n  view: ViewEnum;\n  /** @internal */\n  @property()\n  focusedTabIndex: number;\n\n  @watch(\"focusedTabIndex\", { waitUntilFirstUpdate: true })\n  _handleFocusedTabIndexChange() {\n    let buttonToFocus: SgdsButton | SgdsIconButton;\n    switch (this.focusedTabIndex) {\n      case 0:\n        buttonToFocus = this.shadowRoot.querySelector(\"sgds-icon-button[name='arrow-left']\");\n        break;\n      case 1:\n        buttonToFocus = this.shadowRoot.querySelector(\"sgds-button\");\n        break;\n      case 2:\n        buttonToFocus = this.shadowRoot.querySelector(\"sgds-icon-button[name='arrow-right']\");\n        break;\n      default:\n        return;\n    }\n    buttonToFocus.focus();\n  }\n\n  private _changeView() {\n    switch (this.view) {\n      case \"days\":\n        this.view = \"months\";\n        break;\n      case \"months\":\n        this.view = \"years\";\n        break;\n      case \"years\":\n        break;\n    }\n    this.emit(\"sgds-view\", { detail: this.view }); // emit event to render the correct view\n  }\n\n  public renderHeader(displayDate = this.displayDate, view = this.view) {\n    if (view === \"months\") {\n      return displayDate.getFullYear();\n    }\n    if (view === \"years\") {\n      const CURRENT_YEAR = new Date().getFullYear();\n      const displayYear = displayDate.getFullYear();\n      const remainder = (displayYear - CURRENT_YEAR) % 12;\n      const yearsPosition = remainder < 0 ? 12 + remainder : remainder;\n      const startLimit = displayYear - yearsPosition;\n      const endLimit = displayYear - yearsPosition + 12 - 1;\n      return `${startLimit} - ${endLimit}`;\n    }\n    return `${MONTH_LABELS[displayDate.getMonth()]} ${displayDate.getFullYear()}`;\n  }\n\n  private _renderHeaderTemplate() {\n    return html`${this.renderHeader()}`;\n  }\n  /** @internal */\n  private handleClickPrevious() {\n    const { view, displayDate, focusedDate } = this;\n    let newDisplayDate = new Date(displayDate);\n\n    if (view === \"months\") {\n      newDisplayDate.setFullYear(newDisplayDate.getFullYear() - 1);\n    } else if (this.view === \"years\") {\n      newDisplayDate.setFullYear(newDisplayDate.getFullYear() - 12);\n    } else {\n      /**\n       * FocusedDate gets precedence over displayDate.\n       *  This happens when the arrow keys are pressed to\n       *  change focus date and user clicks the arrow buttons to\n       * shift months\n       */\n      if (focusedDate.getDate() !== displayDate.getDate()) {\n        newDisplayDate = sanitizedPreviousMonth(focusedDate);\n      } else {\n        newDisplayDate = sanitizedPreviousMonth(newDisplayDate);\n      }\n    }\n    this.displayDate = newDisplayDate; // Update the displayDate property\n    // emit event to render correct view\n    this.emit(\"sgds-change-calendar\", { detail: this.displayDate });\n  }\n\n  /** @internal */\n  private _handleClickNext() {\n    const { view, displayDate, focusedDate } = this;\n    let newDisplayDate = new Date(displayDate);\n\n    if (view === \"months\") {\n      newDisplayDate.setFullYear(newDisplayDate.getFullYear() + 1);\n    } else if (this.view === \"years\") {\n      newDisplayDate.setFullYear(newDisplayDate.getFullYear() + 12);\n    } else {\n      /** FocusedDate gets precedence over displayDate  */\n      if (focusedDate.getDate() !== displayDate.getDate()) {\n        newDisplayDate = sanitizedNextMonth(focusedDate);\n      } else {\n        newDisplayDate = sanitizedNextMonth(newDisplayDate);\n      }\n    }\n    this.displayDate = newDisplayDate; // Update the displayDate property\n\n    //emit event to render correct view\n    this.emit(\"sgds-change-calendar\", { detail: this.displayDate });\n  }\n  private _removeCaret(): boolean {\n    const displayYear = this.displayDate.getFullYear();\n    const displayMonth = this.displayDate.getMonth();\n    const displayMonthYear = new Date(displayYear, displayMonth);\n\n    if (this.view === \"months\") {\n      return displayYear <= 1900;\n    }\n    if (this.view === \"years\") {\n      return displayYear < 1904;\n    }\n    return isEqual(displayMonthYear, new Date(0, 0, 1)) || isBefore(displayMonthYear, new Date(0, 0, 1));\n  }\n\n  private _ariaLabelForNextBtn() {\n    const nextBtnDate = {\n      days: \"Show next month\",\n      months: \"Show next year\",\n      years: \"Show next 12 years\"\n    };\n    return nextBtnDate[this.view];\n  }\n  private _ariaLabelForPrevBtn() {\n    const prevBtnDate = {\n      days: \"Show previous month\",\n      months: \"Show previous year\",\n      years: \"Show previous 12 years\"\n    };\n    return prevBtnDate[this.view];\n  }\n\n  private _ariaLabelForHeaderBtn() {\n    const message = {\n      days: `Current view is days, click to show months in ${this.displayDate.getFullYear()}`,\n      months: `Current view is months, click to show years between ${this.renderHeader(this.displayDate, \"years\")}`,\n      years: `Current view is years`\n    };\n    return `${this.renderHeader()}. ${message[this.view]}`;\n  }\n  render() {\n    return html`\n      <div class=\"datepicker-header dropdown-header\" role=\"heading\">\n        <sgds-icon-button\n          name=\"arrow-left\"\n          size=\"sm\"\n          variant=\"ghost\"\n          @click=\"${this.handleClickPrevious}\"\n          class=${classMap({ invisible: this._removeCaret() })}\n          aria-label=${this._ariaLabelForPrevBtn()}\n        >\n        </sgds-icon-button>\n        <sgds-button\n          fullWidth\n          variant=\"ghost\"\n          size=\"sm\"\n          @click=${this._changeView}\n          class=${classMap({ disabled: this.view === \"years\" })}\n          aria-disabled=${this.view === \"years\" ? \"true\" : \"false\"}\n          aria-live=\"polite\"\n        >\n          ${this._renderHeaderTemplate()}\n        </sgds-button>\n        <sgds-icon-button\n          name=\"arrow-right\"\n          size=\"sm\"\n          variant=\"ghost\"\n          @click=\"${this._handleClickNext}\"\n          aria-label=${this._ariaLabelForNextBtn()}\n        >\n        </sgds-icon-button>\n      </div>\n    `;\n  }\n}\n\nexport default DatepickerHeader;\n\nexport const MONTH_LABELS = [\n  \"January\",\n  \"February\",\n  \"March\",\n  \"April\",\n  \"May\",\n  \"June\",\n  \"July\",\n  \"August\",\n  \"September\",\n  \"October\",\n  \"November\",\n  \"December\"\n];\n"],"names":["datepickerHeaderStyle"],"mappings":"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"}
+{"version":3,"file":"datepicker-header.js","sources":["../../../../src/components/Datepicker/datepicker-header.ts"],"sourcesContent":["import { isBefore, isEqual } from \"date-fns\";\nimport { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { sanitizedNextMonth, sanitizedPreviousMonth } from \"../../utils/time\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsButton from \"../Button/sgds-button\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport datepickerHeaderStyle from \"./datepicker-header.css\";\nimport { ViewEnum } from \"./types\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n\nexport class DatepickerHeader extends SgdsElement {\n  static styles = [datepickerHeaderStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-icon-button\": SgdsIconButton,\n    \"sgds-button\": SgdsButton\n  };\n\n  /** @internal */\n  @property({ attribute: false })\n  displayDate: Date;\n  /** @internal */\n  @property({ attribute: false })\n  focusedDate: Date;\n  /** @internal */\n  @property({ attribute: false })\n  selectedDate: Date[] = [];\n\n  /** @internal */\n  @property()\n  view: ViewEnum;\n  /** @internal */\n  @property()\n  focusedTabIndex: number;\n\n  @watch(\"focusedTabIndex\", { waitUntilFirstUpdate: true })\n  _handleFocusedTabIndexChange() {\n    let buttonToFocus: SgdsButton | SgdsIconButton;\n    switch (this.focusedTabIndex) {\n      case 0:\n        buttonToFocus = this.shadowRoot.querySelector(\"sgds-icon-button[name='arrow-left']\");\n        break;\n      case 1:\n        buttonToFocus = this.shadowRoot.querySelector(\"sgds-button\");\n        break;\n      case 2:\n        buttonToFocus = this.shadowRoot.querySelector(\"sgds-icon-button[name='arrow-right']\");\n        break;\n      default:\n        return;\n    }\n    buttonToFocus.focus();\n  }\n\n  private _changeView() {\n    switch (this.view) {\n      case \"days\":\n        this.view = \"months\";\n        break;\n      case \"months\":\n        this.view = \"years\";\n        break;\n      case \"years\":\n        break;\n    }\n    this.emit(\"sgds-view\", { detail: this.view }); // emit event to render the correct view\n  }\n\n  public renderHeader(displayDate = this.displayDate, view = this.view) {\n    if (view === \"months\") {\n      return displayDate.getFullYear();\n    }\n    if (view === \"years\") {\n      const CURRENT_YEAR = new Date().getFullYear();\n      const displayYear = displayDate.getFullYear();\n      const remainder = (displayYear - CURRENT_YEAR) % 12;\n      const yearsPosition = remainder < 0 ? 12 + remainder : remainder;\n      const startLimit = displayYear - yearsPosition;\n      const endLimit = displayYear - yearsPosition + 12 - 1;\n      return `${startLimit} - ${endLimit}`;\n    }\n    return `${MONTH_LABELS[displayDate.getMonth()]} ${displayDate.getFullYear()}`;\n  }\n\n  private _renderHeaderTemplate() {\n    return html`${this.renderHeader()}`;\n  }\n  /** @internal */\n  private handleClickPrevious() {\n    const { view, displayDate, focusedDate } = this;\n    let newDisplayDate = new Date(displayDate);\n\n    if (view === \"months\") {\n      newDisplayDate.setFullYear(newDisplayDate.getFullYear() - 1);\n    } else if (this.view === \"years\") {\n      newDisplayDate.setFullYear(newDisplayDate.getFullYear() - 12);\n    } else {\n      /**\n       * FocusedDate gets precedence over displayDate.\n       *  This happens when the arrow keys are pressed to\n       *  change focus date and user clicks the arrow buttons to\n       * shift months\n       */\n      if (focusedDate.getDate() !== displayDate.getDate()) {\n        newDisplayDate = sanitizedPreviousMonth(focusedDate);\n      } else {\n        newDisplayDate = sanitizedPreviousMonth(newDisplayDate);\n      }\n    }\n    this.displayDate = newDisplayDate; // Update the displayDate property\n    // emit event to render correct view\n    this.emit(\"sgds-change-calendar\", { detail: this.displayDate });\n  }\n\n  /** @internal */\n  private _handleClickNext() {\n    const { view, displayDate, focusedDate } = this;\n    let newDisplayDate = new Date(displayDate);\n\n    if (view === \"months\") {\n      newDisplayDate.setFullYear(newDisplayDate.getFullYear() + 1);\n    } else if (this.view === \"years\") {\n      newDisplayDate.setFullYear(newDisplayDate.getFullYear() + 12);\n    } else {\n      /** FocusedDate gets precedence over displayDate  */\n      if (focusedDate.getDate() !== displayDate.getDate()) {\n        newDisplayDate = sanitizedNextMonth(focusedDate);\n      } else {\n        newDisplayDate = sanitizedNextMonth(newDisplayDate);\n      }\n    }\n    this.displayDate = newDisplayDate; // Update the displayDate property\n\n    //emit event to render correct view\n    this.emit(\"sgds-change-calendar\", { detail: this.displayDate });\n  }\n  private _removeCaret(): boolean {\n    const displayYear = this.displayDate.getFullYear();\n    const displayMonth = this.displayDate.getMonth();\n    const displayMonthYear = new Date(displayYear, displayMonth);\n\n    if (this.view === \"months\") {\n      return displayYear <= 1900;\n    }\n    if (this.view === \"years\") {\n      return displayYear < 1904;\n    }\n    return isEqual(displayMonthYear, new Date(0, 0, 1)) || isBefore(displayMonthYear, new Date(0, 0, 1));\n  }\n\n  private _ariaLabelForNextBtn() {\n    const nextBtnDate = {\n      days: \"Show next month\",\n      months: \"Show next year\",\n      years: \"Show next 12 years\"\n    };\n    return nextBtnDate[this.view];\n  }\n  private _ariaLabelForPrevBtn() {\n    const prevBtnDate = {\n      days: \"Show previous month\",\n      months: \"Show previous year\",\n      years: \"Show previous 12 years\"\n    };\n    return prevBtnDate[this.view];\n  }\n\n  private _ariaLabelForHeaderBtn() {\n    const message = {\n      days: `Current view is days, click to show months in ${this.displayDate.getFullYear()}`,\n      months: `Current view is months, click to show years between ${this.renderHeader(this.displayDate, \"years\")}`,\n      years: `Current view is years`\n    };\n    return `${this.renderHeader()}. ${message[this.view]}`;\n  }\n  render() {\n    return html`\n      <div class=\"datepicker-header dropdown-header\">\n        <sgds-icon-button\n          name=\"arrow-left\"\n          size=\"sm\"\n          variant=\"ghost\"\n          @click=\"${this.handleClickPrevious}\"\n          class=${classMap({ invisible: this._removeCaret() })}\n          .ariaLabel=${this._ariaLabelForPrevBtn()}\n        >\n        </sgds-icon-button>\n        <sgds-button\n          fullWidth\n          variant=\"ghost\"\n          size=\"sm\"\n          @click=${this._changeView}\n          class=${classMap({ disabled: this.view === \"years\" })}\n          .ariaLabel=${this._ariaLabelForHeaderBtn()}\n          aria-disabled=${this.view === \"years\" ? \"true\" : \"false\"}\n          aria-live=\"polite\"\n        >\n          ${this._renderHeaderTemplate()}\n        </sgds-button>\n        <sgds-icon-button\n          name=\"arrow-right\"\n          size=\"sm\"\n          variant=\"ghost\"\n          @click=\"${this._handleClickNext}\"\n          .ariaLabel=${this._ariaLabelForNextBtn()}\n        >\n        </sgds-icon-button>\n      </div>\n    `;\n  }\n}\n\nexport default DatepickerHeader;\n\nexport const MONTH_LABELS = [\n  \"January\",\n  \"February\",\n  \"March\",\n  \"April\",\n  \"May\",\n  \"June\",\n  \"July\",\n  \"August\",\n  \"September\",\n  \"October\",\n  \"November\",\n  \"December\"\n];\n"],"names":["datepickerHeaderStyle"],"mappings":"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"}

package/react/components/Datepicker/sgds-datepicker.cjs.js

@@ -404,7 +404,7 @@ class SgdsDatepicker extends validatorMixin.SgdsFormValidatorMixin(dropdownEleme
           >
           </sgds-icon-button>
         </sgds-datepicker-input>
-        <ul
+        <div
           id=${this.dropdownMenuId}
           class="sgds datepicker dropdown-menu"
           role="dialog"
@@ -429,7 +429,7 @@ class SgdsDatepicker extends validatorMixin.SgdsFormValidatorMixin(dropdownEleme
             .selectedDate=${this.selectedDateRange}
             .focusedTabIndex=${this.focusedTabIndex}
           ></sgds-datepicker-calendar>
-        </ul>
+        </div>
       </div>
     `;
     }