chore: introduce Nullable utility type to combine null and undefined unions

src/lib/app-bar/notification-button/app-bar-notification-button-adapter.ts

@@ -1,5 +1,6 @@
 import { getLightElement, toggleAttribute } from '@tylertech/forge-core';
 import { IBadgeComponent } from '../../badge';
+import { Nullable } from '../../core';
 import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
 import { forwardAttributes } from '../../core/utils/reflect-utils';
 import { ICON_CONSTANTS, IIconComponent } from '../../icon';
@@ -12,7 +13,7 @@ export interface IAppBarNotificationButtonAdapter extends IBaseAdapter {
   initialize(): void;
   destroy(): void;
   setIcon(icon: string): void;
-  setCount(value: string | number | null | undefined): void;
+  setCount(value: Nullable<string | number>): void;
   setBadgeType(dot: boolean): void;
   setBadgeTheme(theme: string): void;
   setBadgeVisible(isVisible: boolean): void;

src/lib/app-bar/notification-button/app-bar-notification-button-core.ts

@@ -1,16 +1,17 @@
+import { Nullable } from '../../core';
 import { IAppBarNotificationButtonAdapter } from './app-bar-notification-button-adapter';
 import { APP_BAR_NOTIFICATION_BUTTON_CONSTANTS } from './app-bar-notification-button-constants';
 
 export interface IAppBarNotificationButtonCore {
-  count: string | number | null | undefined;
+  count: Nullable<string | number>;
   dot: boolean;
   theme: string;
   showBadge: boolean;
   icon: string;
 }
 
 export class AppBarNotificationButtonCore implements IAppBarNotificationButtonCore {
-  private _count: string | number | null | undefined = 0;
+  private _count: Nullable<string | number> = 0;
   private _dot = false;
   private _theme: string;
   private _showBadge = false;
@@ -47,10 +48,10 @@ export class AppBarNotificationButtonCore implements IAppBarNotificationButtonCo
     }
   }
 
-  public get count(): string | number | null | undefined {
+  public get count(): Nullable<string | number> {
     return this._count;
   }
-  public set count(value: string | number | null | undefined) {
+  public set count(value: Nullable<string | number>) {
     if (this._count !== value) {
       this._count = value;
       if (this._isInitialized) {

src/lib/app-bar/notification-button/app-bar-notification-button.ts

@@ -1,6 +1,7 @@
 import { attachLightTemplate, coerceBoolean, coreProperty, customElement } from '@tylertech/forge-core';
 import { tylIconNotifications } from '@tylertech/tyler-icons/standard';
 import { defineBadgeComponent } from '../../badge';
+import { Nullable } from '../../core';
 import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
 import { IconComponent, IconRegistry } from '../../icon';
 import { IconButtonComponent } from '../../icon-button';
@@ -18,7 +19,7 @@ declare global {
 }
 
 export interface IAppBarNotificationButtonComponent extends IBaseComponent {
-  count: string | number | null | undefined;
+  count: Nullable<string | number>;
   dot: boolean;
   showBadge: boolean;
   theme: string;
@@ -101,7 +102,7 @@ export class AppBarNotificationButtonComponent extends BaseComponent implements
   }
 
   @coreProperty()
-  declare public count: string | number | null | undefined;
+  declare public count: Nullable<string | number>;
 
   @coreProperty()
   declare public dot: boolean;

src/lib/autocomplete/autocomplete-core.ts

@@ -1,5 +1,5 @@
 import { debounce, isDefined, isString, Platform, randomChars } from '@tylertech/forge-core';
-import { highlightTextHTML } from '../core';
+import { highlightTextHTML, Nullable } from '../core';
 import { IListItemComponent } from '../list';
 import {
   IListDropdownConfig,
@@ -27,19 +27,19 @@ import { getSelectedOption, isOptionType, optionEqualPredicate, OptionType } fro
 export interface IAutocompleteCore extends IListDropdownAwareCore {
   mode: AutocompleteMode;
   multiple: boolean;
-  value: string | string[] | IAutocompleteOption | IAutocompleteOption[] | null | undefined;
+  value: Nullable<string | string[] | IAutocompleteOption | IAutocompleteOption[]>;
   debounce: number;
   filterOnFocus: boolean;
   filterFocusFirst: boolean;
   allowUnmatched: boolean;
   popupTarget: string;
   filterText: string;
-  optionBuilder: AutocompleteOptionBuilder | null | undefined;
-  filter: AutocompleteFilterCallback | null | undefined;
+  optionBuilder: Nullable<AutocompleteOptionBuilder>;
+  filter: Nullable<AutocompleteFilterCallback>;
   selectedTextBuilder: AutocompleteSelectedTextBuilder;
   isInitialized: boolean;
   open: boolean;
-  matchKey: string | null | undefined;
+  matchKey: Nullable<string>;
   appendOptions(options: IAutocompleteOption[] | IAutocompleteOptionGroup[]): void;
   beforeValueChange: (value: any) => boolean | Promise<boolean>;
   forceFilter(opts: IAutocompleteForceFilterOptions): void;
@@ -662,7 +662,7 @@ export class AutocompleteCore extends ListDropdownAwareCore implements IAutocomp
    * Retrieves the current value(s) from the selected options array based on whether
    * we are in multi-select mode or not.
    */
-  private _getValue(): string | string[] | null | undefined {
+  private _getValue(): Nullable<string | string[]> {
     if (!this._values) {
       return null;
     }
@@ -714,7 +714,7 @@ export class AutocompleteCore extends ListDropdownAwareCore implements IAutocomp
     this._closeDropdown();
   }
 
-  private async _applyValue(value: string | string[] | IAutocompleteOption | IAutocompleteOption[] | null | undefined): Promise<void> {
+  private async _applyValue(value: Nullable<string | string[] | IAutocompleteOption | IAutocompleteOption[]>): Promise<void> {
     let values: any[] = [];
     this._selectedOptions = [];
 
@@ -827,10 +827,10 @@ export class AutocompleteCore extends ListDropdownAwareCore implements IAutocomp
   }
 
   /** Gets/sets the value of the component. */
-  public get value(): string | string[] | IAutocompleteOption | IAutocompleteOption[] | null | undefined {
+  public get value(): Nullable<string | string[] | IAutocompleteOption | IAutocompleteOption[]> {
     return this._getValue();
   }
-  public set value(value: string | string[] | IAutocompleteOption | IAutocompleteOption[] | null | undefined) {
+  public set value(value: Nullable<string | string[] | IAutocompleteOption | IAutocompleteOption[]>) {
     let values: Array<string | IAutocompleteOption | IAutocompleteOption[] | string[]> = [];
 
     if (value == null) {
@@ -889,10 +889,10 @@ export class AutocompleteCore extends ListDropdownAwareCore implements IAutocomp
   }
 
   /** Gets/sets the property key to match the value to an option.  */
-  public get matchKey(): string | null | undefined {
+  public get matchKey(): Nullable<string | null> {
     return this._matchKey;
   }
-  public set matchKey(value: string | null | undefined) {
+  public set matchKey(value: Nullable<string | null>) {
     if (this._matchKey !== value) {
       this._matchKey = value;
     }
@@ -987,18 +987,18 @@ export class AutocompleteCore extends ListDropdownAwareCore implements IAutocomp
   }
 
   /** Sets the item builder callback that will be executed when building the option list in the dropdown. */
-  public get optionBuilder(): AutocompleteOptionBuilder | null | undefined {
+  public get optionBuilder(): Nullable<AutocompleteOptionBuilder> {
     return this._optionBuilder;
   }
-  public set optionBuilder(fn: AutocompleteOptionBuilder | null | undefined) {
+  public set optionBuilder(fn: Nullable<AutocompleteOptionBuilder>) {
     this._optionBuilder = fn;
   }
 
   /** Sets the filter callback that will be executed when fetching options for the autocomplete dropdown. */
-  public get filter(): AutocompleteFilterCallback | null | undefined {
+  public get filter(): Nullable<AutocompleteFilterCallback> {
     return this._filter;
   }
-  public set filter(cb: AutocompleteFilterCallback | null | undefined) {
+  public set filter(cb: Nullable<AutocompleteFilterCallback>) {
     if (this._filter !== cb) {
       this._filter = cb;
 

src/lib/autocomplete/autocomplete.ts

@@ -1,5 +1,6 @@
-import { attachShadowTemplate, coerceBoolean, coerceNumber, customElement, ensureChild, coreProperty } from '@tylertech/forge-core';
+import { attachShadowTemplate, coerceBoolean, coerceNumber, coreProperty, customElement, ensureChild } from '@tylertech/forge-core';
 import { tylIconArrowDropDown, tylIconCheckBox, tylIconCheckBoxOutlineBlank } from '@tylertech/tyler-icons/standard';
+import { Nullable } from '../core';
 import { DividerComponent } from '../divider';
 import { IconComponent, IconRegistry } from '../icon';
 import { LinearProgressComponent } from '../linear-progress';
@@ -10,11 +11,11 @@ import { SkeletonComponent } from '../skeleton';
 import { TextFieldComponent } from '../text-field';
 import { AutocompleteAdapter } from './autocomplete-adapter';
 import {
+  AUTOCOMPLETE_CONSTANTS,
   AutocompleteFilterCallback,
   AutocompleteMode,
   AutocompleteOptionBuilder,
   AutocompleteSelectedTextBuilder,
-  AUTOCOMPLETE_CONSTANTS,
   IAutocompleteForceFilterOptions,
   IAutocompleteOption,
   IAutocompleteOptionGroup,
@@ -33,11 +34,11 @@ export interface IAutocompleteComponent extends IListDropdownAware {
   filterOnFocus: boolean;
   filterFocusFirst: boolean;
   allowUnmatched: boolean;
-  matchKey: string | null | undefined;
+  matchKey: Nullable<string>;
   popupTarget: string;
   filterText: string;
-  filter: AutocompleteFilterCallback | null | undefined;
-  optionBuilder: AutocompleteOptionBuilder | null | undefined;
+  filter: Nullable<AutocompleteFilterCallback>;
+  optionBuilder: Nullable<AutocompleteOptionBuilder>;
   selectedTextBuilder: AutocompleteSelectedTextBuilder;
   popupElement: HTMLElement | null;
   beforeValueChange: (value: any) => boolean | Promise<boolean>;
@@ -226,11 +227,11 @@ export class AutocompleteComponent extends ListDropdownAware implements IAutocom
 
   /** Sets the option builder callback that will be executed when building the option list in the dropdown. */
   @coreProperty()
-  declare public optionBuilder: AutocompleteOptionBuilder | null | undefined;
+  declare public optionBuilder: Nullable<AutocompleteOptionBuilder>;
 
   /** Sets the filter callback that will be executed when fetching options for the autocomplete dropdown. */
   @coreProperty()
-  declare public filter: AutocompleteFilterCallback | null | undefined;
+  declare public filter: Nullable<AutocompleteFilterCallback>;
 
   /** Sets the selected text builder callback that will be executed when getting the selected text. */
   @coreProperty()
@@ -249,7 +250,7 @@ export class AutocompleteComponent extends ListDropdownAware implements IAutocom
    * @attribute match-key
    */
   @coreProperty()
-  declare public matchKey: string | null | undefined;
+  declare public matchKey: Nullable<string>;
 
   /**
    * Returns whether the component has been initialized or not yet.

src/lib/calendar/calendar-core.ts

@@ -55,6 +55,7 @@ import {
 } from './calendar-utils';
 import { ICalendarBase } from './core/calendar-base';
 import { DateRange } from './core/date-range';
+import { Nullable } from '../core';
 
 export interface ICalendarCore extends ICalendarBase {
   mode: CalendarMode;
@@ -2062,11 +2063,11 @@ export class CalendarCore implements ICalendarCore {
   }
 
   /** Get/set disabled dates */
-  public get disabledDates(): Date | Date[] | null | undefined {
+  public get disabledDates(): Nullable<Date | Date[]> {
     const dates = this._disabledDates.map(d => new Date(d));
     return dates.length ? dates : null;
   }
-  public set disabledDates(value: Date | Date[] | null | undefined) {
+  public set disabledDates(value: Nullable<Date | Date[]>) {
     const dates = value ? (isArray(value) ? value : [value]) : [];
     this._disabledDates = (dates as Date[]).map(d => {
       const date = new Date(d);
@@ -2080,10 +2081,10 @@ export class CalendarCore implements ICalendarCore {
   }
 
   /** Get/set disabled days of week */
-  public get disabledDaysOfWeek(): DayOfWeek | DayOfWeek[] | null | undefined {
+  public get disabledDaysOfWeek(): Nullable<DayOfWeek | DayOfWeek[]> {
     return this._disabledDaysOfWeek.length ? [...this._disabledDaysOfWeek] : null;
   }
-  public set disabledDaysOfWeek(value: DayOfWeek | DayOfWeek[] | null | undefined) {
+  public set disabledDaysOfWeek(value: Nullable<DayOfWeek | DayOfWeek[]>) {
     this._disabledDaysOfWeek = (isDefined(value) ? (isArray(value) ? value : [value]) : []) as DayOfWeek[];
 
     if (this._isInitialized) {
@@ -2104,10 +2105,10 @@ export class CalendarCore implements ICalendarCore {
   }
 
   /** Get/set events */
-  public get events(): ICalendarEvent[] | null | undefined {
+  public get events(): Nullable<ICalendarEvent[]> {
     return this._events ? [...this._events] : null;
   }
-  public set events(value: ICalendarEvent[] | null | undefined) {
+  public set events(value: Nullable<ICalendarEvent[]>) {
     this._events = value?.length ? [...value] : [];
 
     if (this._isInitialized) {
@@ -2173,10 +2174,10 @@ export class CalendarCore implements ICalendarCore {
   }
 
   /** Get/set max date */
-  public get max(): Date | string | null | undefined {
+  public get max(): Nullable<Date | string> {
     return this._max;
   }
-  public set max(value: Date | string | null | undefined) {
+  public set max(value: Nullable<Date | string>) {
     if (this._maxAttribute !== value) {
       this._maxAttribute = value?.toString() ?? null;
       this._max = coerceDateFromValue(value);
@@ -2199,10 +2200,10 @@ export class CalendarCore implements ICalendarCore {
   }
 
   /** Get/set min date */
-  public get min(): Date | string | null | undefined {
+  public get min(): Nullable<Date | string> {
     return this._min;
   }
-  public set min(value: Date | string | null | undefined) {
+  public set min(value: Nullable<Date | string>) {
     if (this._minAttribute !== value) {
       this._minAttribute = value?.toString() ?? null;
       this._min = coerceDateFromValue(value);
@@ -2363,15 +2364,15 @@ export class CalendarCore implements ICalendarCore {
   }
 
   /** Get/set value */
-  public get value(): Date | Date[] | DateRange | null | undefined {
+  public get value(): Nullable<Date | Date[] | DateRange> {
     if (this._mode === 'range') {
       return this._rangeSelectionStore ?? getDateRangeFromDates(this._value);
     }
 
     const dates = this._value.map(d => new Date(d));
     return this._mode === 'multiple' ? dates : dates.length ? dates[0] : null;
   }
-  public set value(value: Date | Date[] | DateRange | null | undefined) {
+  public set value(value: Nullable<Date | Date[] | DateRange>) {
     let dates: Date[] = [];
 
     this._rangeSelectionStore = undefined;
@@ -2416,10 +2417,10 @@ export class CalendarCore implements ICalendarCore {
   }
 
   /** Get/set weekend days */
-  public get weekendDays(): DayOfWeek[] | null | undefined {
+  public get weekendDays(): Nullable<DayOfWeek[]> {
     return this._weekendDays ? [...this._weekendDays] : null;
   }
-  public set weekendDays(value: DayOfWeek[] | null | undefined) {
+  public set weekendDays(value: Nullable<DayOfWeek[]>) {
     this._weekendDays = value?.map(v => +v) ?? null;
 
     if (this._isInitialized) {

src/lib/calendar/calendar-dropdown/calendar-dropdown.ts

@@ -1,35 +1,36 @@
-import { isArray, createVisuallyHiddenElement, closestElement } from '@tylertech/forge-core';
-import { POPOVER_CONSTANTS } from '../../popover/popover-constants';
+import { closestElement, createVisuallyHiddenElement, isArray } from '@tylertech/forge-core';
+import { Nullable } from '../../core';
 import { IPopoverComponent } from '../../popover/popover';
+import { POPOVER_CONSTANTS } from '../../popover/popover-constants';
 
 import { ICalendarComponent } from '../calendar';
 import { CALENDAR_CONSTANTS, ICalendarFocusChangeEventData } from '../calendar-constants';
 import { getDateId } from '../calendar-dom-utils';
 import { CALENDAR_DROPDOWN_CONSTANTS } from './calendar-dropdown-constants';
 
 export interface ICalendarDropdown {
-  calendar: ICalendarComponent | undefined;
-  dropdownElement: IPopoverComponent | undefined;
+  calendar: Nullable<ICalendarComponent>;
+  dropdownElement: Nullable<IPopoverComponent>;
   id: string;
   targetElement: HTMLElement;
   popupClasses: string | string[] | null;
-  locale: string | undefined;
+  locale: Nullable<string>;
   isOpen: boolean;
-  activeChangeCallback: ((id: string) => void) | undefined;
-  closeCallback: (() => void) | undefined;
+  activeChangeCallback: Nullable<(id: string) => void>;
+  closeCallback: Nullable<() => void>;
   open(config: Partial<ICalendarComponent>): void;
   close(): void;
   destroy(): void;
   propagateKeyboardEvent(evt: KeyboardEvent): void;
 }
 
 export class CalendarDropdown implements ICalendarDropdown {
-  public calendar: ICalendarComponent | undefined;
-  public dropdownElement: IPopoverComponent | undefined;
+  public calendar: Nullable<ICalendarComponent>;
+  public dropdownElement: Nullable<IPopoverComponent>;
   public id: string;
   public targetElement: HTMLElement;
-  public activeChangeCallback: ((id: string) => void) | undefined;
-  public closeCallback: (() => void) | undefined;
+  public activeChangeCallback: Nullable<(id: string) => void>;
+  public closeCallback: Nullable<() => void>;
 
   private _announcerElement: HTMLElement | undefined;
   private _popupClasses: string[] = [];
@@ -45,10 +46,10 @@ export class CalendarDropdown implements ICalendarDropdown {
     this._popupClasses = !!value ? (isArray(value) ? [...(value as string[])] : [value as string]) : [];
   }
 
-  public get locale(): string | undefined {
+  public get locale(): Nullable<string> {
     return this.calendar?.locale;
   }
-  public set locale(value: string | undefined) {
+  public set locale(value: Nullable<string>) {
     if (this.calendar) {
       this.calendar.locale = value;
     }