Merge branch 'rkaraivanov/tooltip' of https://github.com/IgniteUI/igniteui-webcomponents into rkaraivanov/tooltip

Zneeky · Zneeky · commit eef12e522491 · 2025-04-11T18:01:31.000+03:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,8 +8,17 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### Added
 - New File Input Component(`igc-file-input`)
 
+### Deprecated
+Some event argument types have been renamed for consistency:
+- `CheckboxChangeEventArgs` deprecated, use `IgcCheckboxChangeEventArgs` instead.
+- `RadioChangeEventArgs` deprecated, use `IgcRadioChangeEventArgs` instead.
+- `IgcRangeSliderValue` deprecated, use `IgcRangeSliderValueEventArgs` instead.
+- `IgcActiveStepChangingArgs` deprecated, use `IgcActiveStepChangingEventArgs` instead.
+- `IgcActiveStepChangedArgs` deprecated, use `IgcActiveStepChangedEventArgs` instead.
+
 ### Fixed
 - Setting validation properties on a pristine non-dirty form associated element does not apply invalid styles [#1632](https://github.com/IgniteUI/igniteui-webcomponents/issues/1632)
+- Exposed `IgcCalendarResourceStrings`, `PopoverPlacement` (Dropdown and Select) and `IgcTreeSelectionEventArgs` from the public API
 
 ## [5.3.0] - 2025-03-13
 ### Added
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/checkbox/checkbox-base.ts b/src/components/checkbox/checkbox-base.ts
@@ -14,13 +14,16 @@ import {
 import { isEmpty } from '../common/util.js';
 import { checkBoxValidators } from './validators.js';
 
-export interface CheckboxChangeEventArgs {
+export interface IgcCheckboxChangeEventArgs {
   checked: boolean;
   value?: string;
 }
 
+/** @deprecated use IgcCheckboxChangeEventArgs instead */
+export type CheckboxChangeEventArgs = IgcCheckboxChangeEventArgs;
+
 export interface IgcCheckboxComponentEventMap {
-  igcChange: CustomEvent<CheckboxChangeEventArgs>;
+  igcChange: CustomEvent<IgcCheckboxChangeEventArgs>;
   // For analyzer meta only:
   /* skipWCPrefix */
   focus: FocusEvent;
diff --git a/src/components/common/util.ts b/src/components/common/util.ts
@@ -334,3 +334,8 @@ export function roundByDPR(value: number): number {
   const dpr = globalThis.devicePixelRatio || 1;
   return Math.round(value * dpr) / dpr;
 }
+
+/** Required utility type for specific props */
+export type RequiredProps<T, K extends keyof T> = T & {
+  [P in K]-?: T[P];
+};
diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts
@@ -34,7 +34,9 @@ import {
   getElementByIdFromRoot,
   isString,
 } from '../common/util.js';
-import IgcPopoverComponent, { type IgcPlacement } from '../popover/popover.js';
+import IgcPopoverComponent, {
+  type PopoverPlacement,
+} from '../popover/popover.js';
 import IgcDropdownGroupComponent from './dropdown-group.js';
 import IgcDropdownHeaderComponent from './dropdown-header.js';
 import IgcDropdownItemComponent from './dropdown-item.js';
@@ -123,7 +125,7 @@ export default class IgcDropdownComponent extends EventEmitterMixin<
    * @attr
    */
   @property()
-  public placement: IgcPlacement = 'bottom-start';
+  public placement: PopoverPlacement = 'bottom-start';
 
   /**
    * Determines the behavior of the component during scrolling of the parent container.
diff --git a/src/components/popover/popover.ts b/src/components/popover/popover.ts
@@ -29,7 +29,7 @@ import { styles } from './themes/light/popover.base.css.js';
 /**
  * Describes the preferred placement of a toggle component.
  */
-export type IgcPlacement =
+export type PopoverPlacement =
   | 'top'
   | 'top-start'
   | 'top-end'
@@ -113,7 +113,7 @@ export default class IgcPopoverComponent extends LitElement {
    * Where to place the floating element relative to the parent anchor element.
    */
   @property()
-  public placement: IgcPlacement = 'bottom-start';
+  public placement: PopoverPlacement = 'bottom-start';
 
   /**
    * When enabled the floating element will match the width of its parent anchor element.
diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts
@@ -39,13 +39,16 @@ import { all } from './themes/themes.js';
 import { getGroup } from './utils.js';
 import { radioValidators } from './validators.js';
 
-export interface RadioChangeEventArgs {
+export interface IgcRadioChangeEventArgs {
   checked: boolean;
   value?: string;
 }
 
+/** @deprecated use IgcRadioChangeEventArgs instead */
+export type RadioChangeEventArgs = IgcRadioChangeEventArgs;
+
 export interface IgcRadioComponentEventMap {
-  igcChange: CustomEvent<RadioChangeEventArgs>;
+  igcChange: CustomEvent<IgcRadioChangeEventArgs>;
   // For analyzer meta only:
   /* skipWCPrefix */
   focus: FocusEvent;
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
@@ -49,7 +49,9 @@ import {
 } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
 import IgcInputComponent from '../input/input.js';
-import IgcPopoverComponent, { type IgcPlacement } from '../popover/popover.js';
+import IgcPopoverComponent, {
+  type PopoverPlacement,
+} from '../popover/popover.js';
 import IgcValidationContainerComponent from '../validation-container/validation-container.js';
 import IgcSelectGroupComponent from './select-group.js';
 import IgcSelectHeaderComponent from './select-header.js';
@@ -225,7 +227,7 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
    * @attr
    */
   @property()
-  public placement: IgcPlacement = 'bottom-start';
+  public placement: PopoverPlacement = 'bottom-start';
 
   /**
    * Determines the behavior of the component during scrolling of the parent container.
diff --git a/src/components/slider/range-slider.ts b/src/components/slider/range-slider.ts
@@ -11,20 +11,23 @@ import { IgcSliderBaseComponent } from './slider-base.js';
 import IgcSliderLabelComponent from './slider-label.js';
 
 /* blazorSuppress */
-export interface IgcRangeSliderValue {
+export interface IgcRangeSliderValueEventArgs {
   lower: number;
   upper: number;
 }
 
+/** @deprecated use IgcRangeSliderValueEventArgs instead */
+export type IgcRangeSliderValue = IgcRangeSliderValueEventArgs;
+
 export interface IgcRangeSliderComponentEventMap {
   /**
    * Emitted when a value is changed via thumb drag or keyboard interaction.
    */
-  igcInput: CustomEvent<IgcRangeSliderValue>;
+  igcInput: CustomEvent<IgcRangeSliderValueEventArgs>;
   /**
    * Emitted when a value change is committed on a thumb drag end or keyboard interaction.
    */
-  igcChange: CustomEvent<IgcRangeSliderValue>;
+  igcChange: CustomEvent<IgcRangeSliderValueEventArgs>;
 }
 
 /**
diff --git a/src/components/stepper/stepper.common.ts b/src/components/stepper/stepper.common.ts
@@ -1,13 +1,18 @@
-export interface IgcActiveStepChangingArgs {
+export interface IgcActiveStepChangingEventArgs {
   oldIndex: number;
   newIndex: number;
 }
 
-export interface IgcActiveStepChangedArgs {
+export interface IgcActiveStepChangedEventArgs {
   index: number;
 }
 
+/** @deprecated use IgcActiveStepChangingEventArgs instead */
+export type IgcActiveStepChangingArgs = IgcActiveStepChangingEventArgs;
+/** @deprecated use IgcActiveStepChangedEventArgs instead */
+export type IgcActiveStepChangedArgs = IgcActiveStepChangedEventArgs;
+
 export interface IgcStepperComponentEventMap {
-  igcActiveStepChanging: CustomEvent<IgcActiveStepChangingArgs>;
-  igcActiveStepChanged: CustomEvent<IgcActiveStepChangedArgs>;
+  igcActiveStepChanging: CustomEvent<IgcActiveStepChangingEventArgs>;
+  igcActiveStepChanged: CustomEvent<IgcActiveStepChangedEventArgs>;
 }
diff --git a/src/components/tooltip/tooltip-event-controller.ts b/src/components/tooltip/tooltip-event-controller.ts
@@ -16,7 +16,7 @@ class TooltipController implements ReactiveController {
   private _anchor: TooltipAnchor;
   private _isTransientAnchor = false;
 
-  private _options!: TooltipCallbacks;
+  private _options: TooltipCallbacks;
   private _showTriggers = new Set(['pointerenter']);
   private _hideTriggers = new Set(['pointerleave', 'click']);
 
@@ -212,7 +212,7 @@ class TooltipController implements ReactiveController {
 }
 
 function parseTriggers(string: string): Set<string> {
-  return new Set((string ?? '').split(',').map((part) => part.trim()));
+  return new Set((string ?? '').split(/[,\s]+/).filter((s) => s.trim()));
 }
 
 export function addTooltipController(
diff --git a/src/components/tooltip/tooltip.ts b/src/components/tooltip/tooltip.ts
@@ -12,7 +12,9 @@ import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { asNumber } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
-import IgcPopoverComponent, { type IgcPlacement } from '../popover/popover.js';
+import IgcPopoverComponent, {
+  type PopoverPlacement,
+} from '../popover/popover.js';
 import { styles as shared } from './themes/shared/tooltip.common.css';
 import { all } from './themes/themes.js';
 import { styles } from './themes/tooltip.base.css.js';
@@ -137,7 +139,7 @@ export default class IgcTooltipComponent extends EventEmitterMixin<
    * @default top
    */
   @property()
-  public placement: IgcPlacement = 'top';
+  public placement: PopoverPlacement = 'top';
 
   /**
    * An element instance or an IDREF to use as the anchor for the tooltip.
diff --git a/src/components/tree/tree-navigation.spec.ts b/src/components/tree/tree-navigation.spec.ts
@@ -4,7 +4,7 @@ import { spy } from 'sinon';
 import { defineComponents } from '../../index.js';
 import IgcTreeItemComponent from './tree-item.js';
 import { SLOTS, TreeTestFunctions, navigationTree } from './tree-utils.spec.js';
-import type { IgcSelectionEventArgs } from './tree.common.js';
+import type { TreeSelectionEventInit } from './tree.common.js';
 import IgcTreeComponent from './tree.js';
 import type { IgcTreeNavigationService } from './tree.navigation.js';
 
@@ -437,7 +437,7 @@ describe('Tree Navigation', () => {
     expect(topLevelItems[0].active).to.be.true;
     expect(topLevelItems[0].selected).to.be.true;
 
-    let args: IgcSelectionEventArgs = {
+    let args: TreeSelectionEventInit = {
       detail: {
         newSelection: [topLevelItems[0]],
       },
@@ -510,7 +510,7 @@ describe('Tree Navigation', () => {
     expect(treeNavService.activeItem).to.equal(topLevelItems[1]);
     expect(treeNavService.focusedItem).to.equal(topLevelItems[1]);
 
-    const args: IgcSelectionEventArgs = {
+    const args: TreeSelectionEventInit = {
       detail: {
         newSelection: [topLevelItems[1]],
       },
@@ -543,7 +543,7 @@ describe('Tree Navigation', () => {
     expect(treeNavService.activeItem).to.equal(topLevelItems[0]);
     expect(treeNavService.focusedItem).to.equal(topLevelItems[0]);
 
-    let args: IgcSelectionEventArgs = {
+    let args: TreeSelectionEventInit = {
       detail: {
         newSelection: [topLevelItems[0]],
       },
diff --git a/src/components/tree/tree-selection.spec.ts b/src/components/tree/tree-selection.spec.ts
@@ -10,7 +10,7 @@ import {
   selectedItemsTree,
   simpleTree,
 } from './tree-utils.spec.js';
-import type { IgcSelectionEventArgs } from './tree.common.js';
+import type { TreeSelectionEventInit } from './tree.common.js';
 import IgcTreeComponent from './tree.js';
 import type { IgcTreeSelectionService } from './tree.selection.js';
 
@@ -218,7 +218,7 @@ describe('Tree Selection', () => {
       initialSelection.shift();
 
       // Should emit igcSelection event w/ correct args when an item is deselected
-      let args: IgcSelectionEventArgs = {
+      let args: TreeSelectionEventInit = {
         detail: {
           newSelection: initialSelection,
         },
@@ -268,7 +268,7 @@ describe('Tree Selection', () => {
       expect(cb.checked).to.be.false;
       expect(cb.indeterminate).to.be.false;
 
-      const args: IgcSelectionEventArgs = {
+      const args: TreeSelectionEventInit = {
         detail: {
           newSelection: [...initialSelection, item12],
         },
@@ -300,7 +300,7 @@ describe('Tree Selection', () => {
         topLevelItems[1].getChildren()[1],
       ];
 
-      let args: IgcSelectionEventArgs = {
+      let args: TreeSelectionEventInit = {
         detail: {
           newSelection: [topLevelItems[0]],
         },
@@ -362,7 +362,7 @@ describe('Tree Selection', () => {
       tree.deselect();
       await elementUpdated(tree);
 
-      const args: IgcSelectionEventArgs = {
+      const args: TreeSelectionEventInit = {
         detail: {
           newSelection: [topLevelItems[2]],
         },
@@ -707,7 +707,7 @@ describe('Tree Selection', () => {
       expect(cb.checked).to.be.false;
       expect(cb.indeterminate).to.be.false;
 
-      const args: IgcSelectionEventArgs = {
+      const args: TreeSelectionEventInit = {
         detail: {
           newSelection: [...initialSelection, item211],
         },
diff --git a/src/components/tree/tree.common.ts b/src/components/tree/tree.common.ts
@@ -1,19 +1,20 @@
+import type { RequiredProps } from '../common/util.js';
 import type IgcTreeItemComponent from './tree-item.js';
 
 export interface IgcTreeComponentEventMap {
   /* alternateName: selectionChanged */
-  igcSelection: CustomEvent<TreeSelectionChange>;
+  igcSelection: CustomEvent<IgcTreeSelectionEventArgs>;
   igcItemExpanding: CustomEvent<IgcTreeItemComponent>;
   igcItemExpanded: CustomEvent<IgcTreeItemComponent>;
   igcItemCollapsing: CustomEvent<IgcTreeItemComponent>;
   igcItemCollapsed: CustomEvent<IgcTreeItemComponent>;
   igcActiveItem: CustomEvent<IgcTreeItemComponent>;
 }
-export interface IgcSelectionEventArgs {
-  detail: TreeSelectionChange;
-  cancelable: boolean;
-}
+export type TreeSelectionEventInit = RequiredProps<
+  CustomEventInit<IgcTreeSelectionEventArgs>,
+  'detail' | 'cancelable'
+>;
 
-export interface TreeSelectionChange {
+export interface IgcTreeSelectionEventArgs {
   newSelection: IgcTreeItemComponent[];
 }
diff --git a/src/components/tree/tree.selection.ts b/src/components/tree/tree.selection.ts
@@ -1,6 +1,6 @@
 import { isEmpty } from '../common/util.js';
 import type IgcTreeItemComponent from './tree-item.js';
-import type { IgcSelectionEventArgs } from './tree.common.js';
+import type { TreeSelectionEventInit } from './tree.common.js';
 import type IgcTreeComponent from './tree.js';
 
 /* blazorSuppress */
@@ -113,7 +113,7 @@ export class IgcTreeSelectionService {
       return;
     }
 
-    const args: IgcSelectionEventArgs = {
+    const args: TreeSelectionEventInit = {
       detail: {
         newSelection,
       },
@@ -182,7 +182,7 @@ export class IgcTreeSelectionService {
 
     this.calculateItemsNewSelectionState(currSelection, added, removed);
 
-    const args: IgcSelectionEventArgs = {
+    const args: TreeSelectionEventInit = {
       detail: {
         newSelection: Array.from(this.itemsToBeSelected),
       },
diff --git a/src/index.ts b/src/index.ts
diff --git a/stories/tooltip.stories.ts b/stories/tooltip.stories.ts

Original file line number	Diff line number	Diff line change
`@@ -334,3 +334,8 @@ export function roundByDPR(value: number): number {`
`334`	`334`	`const dpr = globalThis.devicePixelRatio \|\| 1;`
`335`	`335`	`return Math.round(value * dpr) / dpr;`
`336`	`336`	`}`
	`337`	`+`
	`338`	`+/** Required utility type for specific props */`
	`339`	`+export type RequiredProps<T, K extends keyof T> = T & {`
	`340`	`+ [P in K]-?: T[P];`
	`341`	`+};`