Merge branch 'master' into mpopov/fix/input-group/filte-type-layout

Author: desig9stein

CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Fixed
+  - #### Calendar & Date picker
+    - Incorrect date rollover for in certain scenarios [#1710](https://github.com/IgniteUI/igniteui-webcomponents/issues/1710)
+
 ## [6.0.1] - 2025-05-28
 ### Added
 - #### Radio group

package-lock.json

@@ -25,7 +25,9 @@
     "build:meta": "node scripts/build-stories.mjs",
     "watch-meta": "node scripts/stories-watcher.js ",
     "watch-scss": "node scripts/styles-watcher.mjs",
-    "check": "madge --circular --warning --no-spinner --ts-config ./tsconfig.json --extensions ts src/index.ts",
+    "check-imports": "madge --circular --warning --no-spinner --ts-config ./tsconfig.json --extensions ts src/index.ts",
+    "check-types": "tsc -p scripts/tsconfig-ci.json",
+    "check": "npm run check-imports && npm run check-types",
     "clean": "npm run clean:dist && npm run clean:styles && npm run clean:docs",
     "clean:dist": "rimraf ./dist",
     "clean:styles": "rimraf --glob \"src/**/*.css.ts\"",
@@ -50,7 +52,7 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.7.0",
+    "@floating-ui/dom": "^1.7.1",
     "@lit-labs/virtualizer": "^2.1.0",
     "@lit/context": "^1.1.5",
     "lit": "^3.3.0"
@@ -60,10 +62,10 @@
     "@custom-elements-manifest/analyzer": "^0.10.4",
     "@igniteui/material-icons-extended": "^3.1.0",
     "@open-wc/testing": "^4.0.0",
-    "@storybook/addon-a11y": "^9.0.0-rc.4",
-    "@storybook/addon-docs": "^9.0.0-rc.4",
-    "@storybook/addon-links": "^9.0.0-rc.4",
-    "@storybook/web-components-vite": "^9.0.0-rc.4",
+    "@storybook/addon-a11y": "^9.0.4",
+    "@storybook/addon-docs": "^9.0.4",
+    "@storybook/addon-links": "^9.0.4",
+    "@storybook/web-components-vite": "^9.0.4",
     "@types/mocha": "^10.0.10",
     "@web/dev-server-esbuild": "^1.0.4",
     "@web/test-runner": "^0.20.2",
@@ -76,21 +78,21 @@
     "custom-element-vs-code-integration": "^1.5.0",
     "globby": "^14.1.0",
     "husky": "^9.1.7",
-    "ig-typedoc-theme": "^6.0.0",
-    "igniteui-theming": "^18.0.2",
+    "ig-typedoc-theme": "^6.1.0",
+    "igniteui-theming": "^18.1.0",
     "keep-a-changelog": "^2.6.2",
-    "lint-staged": "^16.0.0",
+    "lint-staged": "^16.1.0",
     "lit-analyzer": "^2.0.3",
     "madge": "^8.0.0",
     "node-watch": "^0.7.4",
     "playwright": "^1.52.0",
-    "postcss": "^8.5.3",
+    "postcss": "^8.5.4",
     "prettier": "^3.5.3",
     "rimraf": "^6.0.1",
     "sass-embedded": "~1.78.0",
     "sinon": "^20.0.0",
-    "storybook": "^9.0.0-rc.4",
-    "stylelint": "^16.19.1",
+    "storybook": "^9.0.4",
+    "stylelint": "^16.20.0",
     "stylelint-config-standard-scss": "^15.0.1",
     "stylelint-prettier": "^5.0.3",
     "stylelint-scss": "^6.12.0",
@@ -117,8 +119,5 @@
       }
     }
   },
-  "customElements": "custom-elements.json",
-  "overrides": {
-    "storybook": "$storybook"
-  }
+  "customElements": "custom-elements.json"
 }

package.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true
+  }
+}

scripts/tsconfig-ci.json

@@ -30,14 +30,14 @@ export default class IgcToggleButtonComponent extends LitElement {
   };
 
   /* blazorSuppress */
-  public static register() {
+  public static register(): void {
     registerComponent(IgcToggleButtonComponent);
   }
 
-  private _kbFocus = addKeyboardFocusRing(this);
+  private readonly _focusRingManager = addKeyboardFocusRing(this);
 
   @query('[part="toggle"]', true)
-  private _nativeButton!: HTMLButtonElement;
+  private readonly _nativeButton!: HTMLButtonElement;
 
   /**
    * The value attribute of the control.
@@ -62,32 +62,33 @@ export default class IgcToggleButtonComponent extends LitElement {
 
   /* alternateName: focusComponent */
   /** Sets focus on the button. */
-  public override focus(options?: FocusOptions) {
+  public override focus(options?: FocusOptions): void {
     this._nativeButton.focus(options);
   }
 
   /* alternateName: blurComponent */
   /** Removes focus from the button. */
-  public override blur() {
+  public override blur(): void {
     this._nativeButton.blur();
   }
 
   /** Simulates a mouse click on the element. */
-  public override click() {
+  public override click(): void {
     this._nativeButton.click();
   }
 
   protected override render() {
     return html`
       <button
-        part=${partMap({ toggle: true, focused: this._kbFocus.focused })}
+        part=${partMap({
+          toggle: true,
+          focused: this._focusRingManager.focused,
+        })}
         type="button"
         ?disabled=${this.disabled}
         .ariaLabel=${this.ariaLabel}
         aria-pressed=${this.selected}
         aria-disabled=${this.disabled}
-        @click=${this._kbFocus.reset}
-        @blur=${this._kbFocus.reset}
       >
         <slot></slot>
       </button>

src/components/button-group/toggle-button.ts

@@ -28,13 +28,14 @@ export abstract class IgcButtonBaseComponent extends EventEmitterMixin<
     delegatesFocus: true,
   };
 
-  private _kbFocus = addKeyboardFocusRing(this);
+  protected readonly __internals: ElementInternals;
+
+  private readonly _focusRingManager = addKeyboardFocusRing(this);
 
-  protected __internals: ElementInternals;
   protected _disabled = false;
 
   @query('[part="base"]', true)
-  private _nativeButton!: HTMLButtonElement;
+  private readonly _nativeButton!: HTMLButtonElement;
 
   /* alternateName: displayType */
   /**
@@ -78,19 +79,19 @@ export abstract class IgcButtonBaseComponent extends EventEmitterMixin<
    * @attr [disabled=false]
    */
   @property({ type: Boolean, reflect: true })
-  public get disabled(): boolean {
-    return this._disabled;
-  }
-
   public set disabled(value: boolean) {
     this._disabled = value;
     this.toggleAttribute('disabled', Boolean(this._disabled));
   }
 
+  public get disabled(): boolean {
+    return this._disabled;
+  }
+
   /* blazorCSSuppress */
   /* alternateType: object */
   /** Returns the HTMLFormElement associated with this element. */
-  public get form() {
+  public get form(): HTMLFormElement | null {
     return this.__internals.form;
   }
 
@@ -101,51 +102,42 @@ export abstract class IgcButtonBaseComponent extends EventEmitterMixin<
 
   /* alternateName: focusComponent */
   /** Sets focus in the button. */
-  public override focus(options?: FocusOptions) {
+  public override focus(options?: FocusOptions): void {
     this._nativeButton.focus(options);
   }
 
   /** Simulates a mouse click on the element */
-  public override click() {
+  public override click(): void {
     this._nativeButton.click();
   }
 
   /* alternateName: blurComponent */
   /** Removes focus from the button. */
-  public override blur() {
+  public override blur(): void {
     this._nativeButton.blur();
   }
 
-  protected handleBlur() {
-    this._kbFocus.reset();
-  }
-
-  protected handleClick() {
-    this._kbFocus.reset();
-    switch (this.type) {
-      case 'submit':
-        return this.form?.requestSubmit();
-      case 'reset':
-        return this.form?.reset();
-      default:
-        return;
+  protected _handleClick(): void {
+    if (this.type === 'submit') {
+      this.form?.requestSubmit();
+    } else if (this.type === 'reset') {
+      this.form?.reset();
     }
   }
 
-  protected formDisabledCallback(state: boolean) {
+  protected formDisabledCallback(state: boolean): void {
     this._disabled = state;
     this.requestUpdate();
   }
 
   private renderButton() {
     return html`
       <button
-        part=${partMap({ base: true, focused: this._kbFocus.focused })}
+        part=${partMap({ base: true, focused: this._focusRingManager.focused })}
         aria-label=${ifDefined(this.ariaLabel ?? nothing)}
         ?disabled=${this.disabled}
         type=${ifDefined(this.type)}
-        @click=${this.handleClick}
-        @blur=${this.handleBlur}
+        @click=${this._handleClick}
       >
         ${this.renderContent()}
       </button>
@@ -155,15 +147,14 @@ export abstract class IgcButtonBaseComponent extends EventEmitterMixin<
   private renderLinkButton() {
     return html`
       <a
-        part=${partMap({ base: true, focused: this._kbFocus.focused })}
+        part=${partMap({ base: true, focused: this._focusRingManager.focused })}
         role="button"
         aria-label=${ifDefined(this.ariaLabel ?? nothing)}
         aria-disabled=${this.disabled}
         href=${ifDefined(this.href)}
         target=${ifDefined(this.target)}
         download=${ifDefined(this.download)}
         rel=${ifDefined(this.rel)}
-        @blur=${this.disabled ? nothing : this.handleBlur}
       >
         ${this.renderContent()}
       </a>

src/components/button/button-base.ts

@@ -56,6 +56,8 @@ import IgcYearsViewComponent from './years-view/years-view.js';
 
 export const focusActiveDate = Symbol();
 
+/* blazorIndirectRender */
+/* blazorSupportsVisualChildren */
 /**
  * Represents a calendar that lets users
  * to select a date value in a variety of different ways.

src/components/calendar/calendar.ts

@@ -6,6 +6,7 @@ import {
   last,
   modulo,
 } from '../common/util.js';
+import type { DateRangeValue } from '../date-range-picker/date-range-picker.js';
 import {
   CalendarDay,
   type CalendarRangeParams,
@@ -71,6 +72,33 @@ export function convertToDate(value?: Date | string | null): Date | null {
   return isString(value) ? parseISODate(value) : isValidDate(value);
 }
 
+/**
+ * Converts the given value to a DateRangeValue object.
+ *
+ * If the value is already a valid DateRangeValue object, it is returned directly.
+ * If the value is a string, it is parsed to object and returned if it fields are valid dates.
+ * If the value is null or undefined, null is returned.
+ * If the parsing fails, null is returned.
+ */
+export function convertToDateRange(
+  value?: DateRangeValue | string | null
+): DateRangeValue | null {
+  if (!value) {
+    return null;
+  }
+
+  if (isString(value)) {
+    const obj = JSON.parse(value);
+    const start = convertToDate(obj.start);
+    const end = convertToDate(obj.end);
+    return {
+      start: start ? CalendarDay.from(start).native : null,
+      end: end ? CalendarDay.from(end).native : null,
+    };
+  }
+  return value;
+}
+
 /**
  * Converts a Date object to an ISO 8601 string.
  *
@@ -136,26 +164,41 @@ export function isPreviousMonth(target: DayParameter, origin: DayParameter) {
 }
 
 /**
- * Returns a generator yielding day values between `start` and `end` (non-inclusive)
+ * Returns a generator yielding day values between `start` and `end` (non-inclusive by default)
  * by a given `unit` as a step.
+ * To include the end date set the `inclusive` option to true.
  *
  * @remarks
  * By default, `unit` is set to 'day'.
  */
-export function* calendarRange(options: CalendarRangeParams) {
-  let low = toCalendarDay(options.start);
-  const unit = options.unit ?? 'day';
-  const high =
-    typeof options.end === 'number'
-      ? low.add(unit, options.end)
-      : toCalendarDay(options.end);
-
-  const reverse = high.lessThan(low);
-  const step = reverse ? -1 : 1;
-
-  while (!reverse ? low.lessThan(high) : low.greaterThan(high)) {
-    yield low;
-    low = low.add(unit, step);
+export function* calendarRange(
+  options: CalendarRangeParams
+): Generator<CalendarDay, void, unknown> {
+  const { start, end, unit = 'day', inclusive = false } = options;
+
+  let currentDate = toCalendarDay(start);
+  const endDate =
+    typeof end === 'number'
+      ? toCalendarDay(start).add(unit, end)
+      : toCalendarDay(end);
+
+  const isReversed = endDate.lessThan(currentDate);
+  const step = isReversed ? -1 : 1;
+
+  const shouldContinue = () => {
+    if (inclusive) {
+      return isReversed
+        ? currentDate.greaterThanOrEqual(endDate)
+        : currentDate.lessThanOrEqual(endDate);
+    }
+    return isReversed
+      ? currentDate.greaterThan(endDate)
+      : currentDate.lessThan(endDate);
+  };
+
+  while (shouldContinue()) {
+    yield currentDate;
+    currentDate = currentDate.add(unit, step);
   }
 }