govuk_publishing_components 65.1.0 → 65.2.0

data/node_modules/choices.js/src/scripts/choices.ts

@@ -13,6 +13,7 @@ import {
   escapeForTemplate,
   generateId,
   getAdjacentEl,
+  getChoiceForOutput,
   getClassNames,
   getClassNamesSelector,
   isScrolledIntoView,
@@ -259,7 +260,7 @@ class Choices {
 
     this._store = new Store(config);
     this._currentValue = '';
-    config.searchEnabled = (!isText && config.searchEnabled) || isSelectMultiple;
+    config.searchEnabled = !isText && config.searchEnabled;
     this._canSearch = config.searchEnabled;
     this._isScrollingOnIe = false;
     this._highlightPosition = 0;
@@ -303,6 +304,8 @@ class Choices {
     this._onEscapeKey = this._onEscapeKey.bind(this);
     this._onDirectionKey = this._onDirectionKey.bind(this);
     this._onDeleteKey = this._onDeleteKey.bind(this);
+    this._onChange = this._onChange.bind(this);
+    this._onInvalid = this._onInvalid.bind(this);
 
     // If element has already been initialised with Choices, fail silently
     if (this.passedElement.isActive) {
@@ -415,7 +418,7 @@ class Choices {
     this._store.dispatch(highlightItem(choice, true));
 
     if (runEvent) {
-      this.passedElement.triggerEvent(EventType.highlightItem, this._getChoiceForOutput(choice));
+      this.passedElement.triggerEvent(EventType.highlightItem, getChoiceForOutput(choice));
     }
 
     return this;
@@ -433,7 +436,7 @@ class Choices {
     this._store.dispatch(highlightItem(choice, false));
 
     if (runEvent) {
-      this.passedElement.triggerEvent(EventType.unhighlightItem, this._getChoiceForOutput(choice));
+      this.passedElement.triggerEvent(EventType.unhighlightItem, getChoiceForOutput(choice));
     }
 
     return this;
@@ -445,7 +448,7 @@ class Choices {
         if (!item.highlighted) {
           this._store.dispatch(highlightItem(item, true));
 
-          this.passedElement.triggerEvent(EventType.highlightItem, this._getChoiceForOutput(item));
+          this.passedElement.triggerEvent(EventType.highlightItem, getChoiceForOutput(item));
         }
       });
     });
@@ -459,7 +462,7 @@ class Choices {
         if (item.highlighted) {
           this._store.dispatch(highlightItem(item, false));
 
-          this.passedElement.triggerEvent(EventType.highlightItem, this._getChoiceForOutput(item));
+          this.passedElement.triggerEvent(EventType.highlightItem, getChoiceForOutput(item));
         }
       });
     });
@@ -518,6 +521,15 @@ class Choices {
       }
 
       this.passedElement.triggerEvent(EventType.showDropdown);
+
+      const activeElement = this.choiceList.element.querySelector<HTMLElement>(
+        getClassNamesSelector(this.config.classNames.selectedState),
+      );
+
+      if (activeElement !== null && !isScrolledIntoView(activeElement, this.choiceList.element)) {
+        // We use the native scrollIntoView function instead of choiceList.scrollToChildElement to avoid animated scroll.
+        activeElement.scrollIntoView();
+      }
     });
 
     return this;
@@ -528,6 +540,8 @@ class Choices {
       return this;
     }
 
+    this._removeHighlightedChoices();
+
     requestAnimationFrame(() => {
       this.dropdown.hide();
       this.containerOuter.close();
@@ -545,7 +559,7 @@ class Choices {
 
   getValue<B extends boolean = false>(valueOnly?: B): EventChoiceValueType<B> | EventChoiceValueType<B>[] {
     const values = this._store.items.map((item) => {
-      return (valueOnly ? item.value : this._getChoiceForOutput(item)) as EventChoiceValueType<B>;
+      return (valueOnly ? item.value : getChoiceForOutput(item)) as EventChoiceValueType<B>;
     });
 
     return this._isSelectOneElement || this.config.singleModeForMultiSelect ? values[0] : values;
@@ -848,7 +862,7 @@ class Choices {
     this._searcher.reset();
 
     if (choice.selected) {
-      this.passedElement.triggerEvent(EventType.removeItem, this._getChoiceForOutput(choice));
+      this.passedElement.triggerEvent(EventType.removeItem, getChoiceForOutput(choice));
     }
 
     return this;
@@ -943,12 +957,7 @@ class Choices {
     const { config, _isSearching: isSearching } = this;
     const { activeGroups, activeChoices } = this._store;
 
-    let renderLimit = 0;
-    if (isSearching && config.searchResultLimit > 0) {
-      renderLimit = config.searchResultLimit;
-    } else if (config.renderChoiceLimit > 0) {
-      renderLimit = config.renderChoiceLimit;
-    }
+    const renderLimit = isSearching ? config.searchResultLimit : config.renderChoiceLimit;
 
     if (this._isSelectElement) {
       const backingOptions = activeChoices.filter((choice) => !choice.element);
@@ -961,11 +970,16 @@ class Choices {
     const renderableChoices = (choices: ChoiceFull[]): ChoiceFull[] =>
       choices.filter(
         (choice) =>
-          !choice.placeholder && (isSearching ? !!choice.rank : config.renderSelectedChoices || !choice.selected),
+          !choice.placeholder &&
+          (isSearching
+            ? (config.searchRenderSelectedChoices || !choice.selected) && !!choice.rank
+            : config.renderSelectedChoices || !choice.selected),
       );
 
+    const showLabel = config.appendGroupInSearch && isSearching;
     let selectableChoices = false;
-    const renderChoices = (choices: ChoiceFull[], withinGroup: boolean, groupLabel?: string): void => {
+    let highlightedEl: HTMLElement | null = null;
+    const renderChoices = (choices: ChoiceFull[], withinGroup: boolean): void => {
       if (isSearching) {
         // sortByRank is used to ensure stable sorting, as scores are non-unique
         // this additionally ensures fuseOptions.sortFn is not ignored
@@ -975,17 +989,25 @@ class Choices {
       }
 
       let choiceLimit = choices.length;
-      choiceLimit = !withinGroup && renderLimit && choiceLimit > renderLimit ? renderLimit : choiceLimit;
+      choiceLimit = !withinGroup && renderLimit > 0 && choiceLimit > renderLimit ? renderLimit : choiceLimit;
       choiceLimit--;
 
       choices.every((choice, index) => {
         // choiceEl being empty signals the contents has probably significantly changed
         const dropdownItem =
-          choice.choiceEl || this._templates.choice(config, choice, config.itemSelectText, groupLabel);
+          choice.choiceEl ||
+          this._templates.choice(
+            config,
+            choice,
+            config.itemSelectText,
+            showLabel && choice.group ? choice.group.label : undefined,
+          );
         choice.choiceEl = dropdownItem;
         fragment.appendChild(dropdownItem);
         if (isSearching || !choice.selected) {
           selectableChoices = true;
+        } else if (!highlightedEl) {
+          highlightedEl = dropdownItem;
         }
 
         return index < choiceLimit;
@@ -1002,7 +1024,6 @@ class Choices {
         renderChoices(
           activeChoices.filter((choice) => choice.placeholder && !choice.group),
           false,
-          undefined,
         );
       }
 
@@ -1016,7 +1037,6 @@ class Choices {
         renderChoices(
           activeChoices.filter((choice) => !choice.placeholder && !choice.group),
           false,
-          undefined,
         );
 
         activeGroups.forEach((group) => {
@@ -1028,11 +1048,11 @@ class Choices {
               dropdownGroup.remove();
               fragment.appendChild(dropdownGroup);
             }
-            renderChoices(groupChoices, true, config.appendGroupInSearch && isSearching ? group.label : undefined);
+            renderChoices(groupChoices, true);
           }
         });
       } else {
-        renderChoices(renderableChoices(activeChoices), false, undefined);
+        renderChoices(renderableChoices(activeChoices), false);
       }
     }
 
@@ -1049,9 +1069,7 @@ class Choices {
     this._renderNotice(fragment);
     this.choiceList.element.replaceChildren(fragment);
 
-    if (selectableChoices) {
-      this._highlightChoice();
-    }
+    this._highlightChoice(highlightedEl);
   }
 
   _renderItems(): void {
@@ -1183,23 +1201,12 @@ class Choices {
     }
   }
 
+  /**
+   * @deprecated Use utils.getChoiceForOutput
+   */
   // eslint-disable-next-line class-methods-use-this
   _getChoiceForOutput(choice: ChoiceFull, keyCode?: number): EventChoice {
-    return {
-      id: choice.id,
-      highlighted: choice.highlighted,
-      labelClass: choice.labelClass,
-      labelDescription: choice.labelDescription,
-      customProperties: choice.customProperties,
-      disabled: choice.disabled,
-      active: choice.active,
-      label: choice.label,
-      placeholder: choice.placeholder,
-      value: choice.value,
-      groupValue: choice.group ? choice.group.label : undefined,
-      element: choice.element,
-      keyCode,
-    };
+    return getChoiceForOutput(choice, keyCode);
   }
 
   _triggerChange(value): void {
@@ -1218,7 +1225,7 @@ class Choices {
       return;
     }
 
-    const id = element && parseDataSetId(element.parentElement);
+    const id = element && parseDataSetId(element.closest('[data-id]'));
     const itemToRemove = id && items.find((item) => item.id === id);
     if (!itemToRemove) {
       return;
@@ -1428,7 +1435,7 @@ class Choices {
 
     if (canAddItem && typeof config.addItemFilter === 'function' && !config.addItemFilter(value)) {
       canAddItem = false;
-      notice = resolveNoticeFunction(config.customAddItemText, value);
+      notice = resolveNoticeFunction(config.customAddItemText, value, undefined);
     }
 
     if (canAddItem) {
@@ -1442,13 +1449,13 @@ class Choices {
         }
         if (!config.duplicateItemsAllowed) {
           canAddItem = false;
-          notice = resolveNoticeFunction(config.uniqueItemText, value);
+          notice = resolveNoticeFunction(config.uniqueItemText, value, undefined);
         }
       }
     }
 
     if (canAddItem) {
-      notice = resolveNoticeFunction(config.addItemText, value);
+      notice = resolveNoticeFunction(config.addItemText, value, undefined);
     }
 
     if (notice) {
@@ -1510,6 +1517,7 @@ class Choices {
     const documentElement = this._docRoot;
     const outerElement = this.containerOuter.element;
     const inputElement = this.input.element;
+    const passedElement = this.passedElement.element;
 
     // capture events - can cancel event processing or propagation
     documentElement.addEventListener('touchend', this._onTouchEnd, true);
@@ -1554,6 +1562,16 @@ class Choices {
       });
     }
 
+    if (passedElement.hasAttribute('required')) {
+      passedElement.addEventListener('change', this._onChange, {
+        passive: true,
+      });
+
+      passedElement.addEventListener('invalid', this._onInvalid, {
+        passive: true,
+      });
+    }
+
     this.input.addEventListeners();
   }
 
@@ -1561,6 +1579,7 @@ class Choices {
     const documentElement = this._docRoot;
     const outerElement = this.containerOuter.element;
     const inputElement = this.input.element;
+    const passedElement = this.passedElement.element;
 
     documentElement.removeEventListener('touchend', this._onTouchEnd, true);
     outerElement.removeEventListener('keydown', this._onKeyDown, true);
@@ -1584,6 +1603,11 @@ class Choices {
       inputElement.form.removeEventListener('reset', this._onFormReset);
     }
 
+    if (passedElement.hasAttribute('required')) {
+      passedElement.removeEventListener('change', this._onChange);
+      passedElement.removeEventListener('invalid', this._onInvalid);
+    }
+
     this.input.removeEventListeners();
   }
 
@@ -1882,7 +1906,7 @@ class Choices {
    */
   _onMouseDown(event: MouseEvent): void {
     const { target } = event;
-    if (!(target instanceof HTMLElement)) {
+    if (!(target instanceof Element)) {
       return;
     }
 
@@ -1994,7 +2018,7 @@ class Choices {
         containerOuter.removeFocusState();
 
         // Also close the dropdown if search is disabled
-        if (!this._canSearch) {
+        if (!this.config.searchEnabled) {
           this.hideDropdown(true);
         }
       }
@@ -2018,14 +2042,22 @@ class Choices {
     });
   }
 
-  _highlightChoice(el: HTMLElement | null = null): void {
-    const choices = Array.from(this.dropdown.element.querySelectorAll<HTMLElement>(selectableChoiceIdentifier));
-
-    if (!choices.length) {
+  _onChange(event: Event & { target: HTMLInputElement | HTMLSelectElement }): void {
+    if (!event.target.checkValidity()) {
       return;
     }
 
-    let passedEl = el;
+    this.containerOuter.removeInvalidState();
+  }
+
+  _onInvalid(): void {
+    this.containerOuter.addInvalidState();
+  }
+
+  /**
+   * Removes any highlighted choice options
+   */
+  _removeHighlightedChoices(): void {
     const { highlightedState } = this.config.classNames;
     const highlightedChoices = Array.from(
       this.dropdown.element.querySelectorAll<HTMLElement>(getClassNamesSelector(highlightedState)),
@@ -2036,6 +2068,19 @@ class Choices {
       removeClassesFromElement(choice, highlightedState);
       choice.setAttribute('aria-selected', 'false');
     });
+  }
+
+  _highlightChoice(el: HTMLElement | null = null): void {
+    const choices = Array.from(this.dropdown.element.querySelectorAll<HTMLElement>(selectableChoiceIdentifier));
+
+    if (!choices.length) {
+      return;
+    }
+
+    let passedEl = el;
+    const { highlightedState } = this.config.classNames;
+
+    this._removeHighlightedChoices();
 
     if (passedEl) {
       this._highlightPosition = choices.indexOf(passedEl);
@@ -2080,10 +2125,11 @@ class Choices {
     this._store.dispatch(addItem(item));
 
     if (withEvents) {
-      this.passedElement.triggerEvent(EventType.addItem, this._getChoiceForOutput(item));
+      const eventChoice = getChoiceForOutput(item);
+      this.passedElement.triggerEvent(EventType.addItem, eventChoice);
 
       if (userTriggered) {
-        this.passedElement.triggerEvent(EventType.choice, this._getChoiceForOutput(item));
+        this.passedElement.triggerEvent(EventType.choice, eventChoice);
       }
     }
   }
@@ -2099,7 +2145,7 @@ class Choices {
       this._clearNotice();
     }
 
-    this.passedElement.triggerEvent(EventType.removeItem, this._getChoiceForOutput(item));
+    this.passedElement.triggerEvent(EventType.removeItem, getChoiceForOutput(item));
   }
 
   _addChoice(choice: ChoiceFull, withEvents: boolean = true, userTriggered = false): void {
@@ -2242,26 +2288,26 @@ class Choices {
     // Wrapper inner container with outer container
     containerOuter.wrap(containerInner.element);
 
+    containerOuter.element.appendChild(containerInner.element);
+    containerOuter.element.appendChild(dropdownElement);
+    containerInner.element.appendChild(this.itemList.element);
+    dropdownElement.appendChild(this.choiceList.element);
+
     if (this._isSelectOneElement) {
       this.input.placeholder = this.config.searchPlaceholderValue || '';
+      if (this.config.searchEnabled) {
+        dropdownElement.insertBefore(this.input.element, dropdownElement.firstChild);
+      }
     } else {
+      if (!this._isSelectMultipleElement || this.config.searchEnabled) {
+        containerInner.element.appendChild(this.input.element);
+      }
       if (this._placeholderValue) {
         this.input.placeholder = this._placeholderValue;
       }
       this.input.setWidth();
     }
 
-    containerOuter.element.appendChild(containerInner.element);
-    containerOuter.element.appendChild(dropdownElement);
-    containerInner.element.appendChild(this.itemList.element);
-    dropdownElement.appendChild(this.choiceList.element);
-
-    if (!this._isSelectOneElement) {
-      containerInner.element.appendChild(this.input.element);
-    } else if (this.config.searchEnabled) {
-      dropdownElement.insertBefore(this.input.element, dropdownElement.firstChild);
-    }
-
     this._highlightPosition = 0;
     this._isSearching = false;
   }

data/node_modules/choices.js/src/scripts/components/container.ts

@@ -100,6 +100,14 @@ export default class Container {
     removeClassesFromElement(this.element, this.classNames.focusState);
   }
 
+  addInvalidState(): void {
+    addClassesToElement(this.element, this.classNames.invalidState);
+  }
+
+  removeInvalidState(): void {
+    removeClassesFromElement(this.element, this.classNames.invalidState);
+  }
+
   enable(): void {
     removeClassesFromElement(this.element, this.classNames.disabledState);
     this.element.removeAttribute('aria-disabled');

data/node_modules/choices.js/src/scripts/components/wrapped-select.ts

@@ -94,7 +94,9 @@ export default class WrappedSelect extends WrappedElement<HTMLSelectElement> {
       labelClass:
         typeof option.dataset.labelClass !== 'undefined' ? stringToHtmlClass(option.dataset.labelClass) : undefined,
       labelDescription:
-        typeof option.dataset.labelDescription !== 'undefined' ? option.dataset.labelDescription : undefined,
+        typeof option.dataset.labelDescription !== 'undefined'
+          ? { trusted: option.dataset.labelDescription }
+          : undefined,
       customProperties: parseCustomProperties(option.dataset.customProperties),
     };
   }

data/node_modules/choices.js/src/scripts/defaults.ts

@@ -1,6 +1,7 @@
 import { ClassNames } from './interfaces/class-names';
 import { Options } from './interfaces/options';
-import { sortByAlpha } from './lib/utils';
+import { sanitise, sortByAlpha } from './lib/utils';
+import { EventChoice } from './interfaces';
 
 export const DEFAULT_CLASSNAMES: ClassNames = {
   containerOuter: ['choices'],
@@ -28,6 +29,7 @@ export const DEFAULT_CLASSNAMES: ClassNames = {
   selectedState: ['is-selected'],
   flippedState: ['is-flipped'],
   loadingState: ['is-loading'],
+  invalidState: ['is-invalid'],
   notice: ['choices__notice'],
   addChoice: ['choices__item--selectable', 'add-choice'],
   noResults: ['has-no-results'],
@@ -44,7 +46,7 @@ export const DEFAULT_CONFIG: Options = {
   singleModeForMultiSelect: false,
   addChoices: false,
   addItems: true,
-  addItemFilter: (value) => !!value && value !== '',
+  addItemFilter: (value: string): boolean => !!value && value !== '',
   removeItems: true,
   removeItemButton: false,
   removeItemButtonAlignLeft: false,
@@ -56,6 +58,7 @@ export const DEFAULT_CONFIG: Options = {
   paste: true,
   searchEnabled: true,
   searchChoices: true,
+  searchDisabledChoices: false,
   searchFloor: 1,
   searchResultLimit: 4,
   searchFields: ['label', 'value'],
@@ -71,17 +74,19 @@ export const DEFAULT_CONFIG: Options = {
   prependValue: null,
   appendValue: null,
   renderSelectedChoices: 'auto',
+  searchRenderSelectedChoices: true,
   loadingText: 'Loading...',
   noResultsText: 'No results found',
   noChoicesText: 'No choices to choose from',
   itemSelectText: 'Press to select',
   uniqueItemText: 'Only unique values can be added',
   customAddItemText: 'Only values matching specific conditions can be added',
-  addItemText: (value) => `Press Enter to add <b>"${value}"</b>`,
-  removeItemIconText: () => `Remove item`,
-  removeItemLabelText: (value) => `Remove item: ${value}`,
-  maxItemText: (maxItemCount) => `Only ${maxItemCount} values can be added`,
-  valueComparer: (value1, value2) => value1 === value2,
+  addItemText: (value: string) => `Press Enter to add <b>"${value}"</b>`,
+  removeItemIconText: (): string => `Remove item`,
+  removeItemLabelText: (value: string, _valueRaw: string, i?: EventChoice): string =>
+    `Remove item: ${i ? sanitise<string>(i.label) : value}`,
+  maxItemText: (maxItemCount: number): string => `Only ${maxItemCount} values can be added`,
+  valueComparer: (value1: string, value2: string): boolean => value1 === value2,
   fuseOptions: {
     includeScore: true,
   },

data/node_modules/choices.js/src/scripts/interfaces/choice-full.ts

@@ -1,4 +1,5 @@
 import { StringUntrusted } from './string-untrusted';
+import { StringPreEscaped } from './string-pre-escaped';
 import { Types } from './types';
 // eslint-disable-next-line import/no-cycle
 import { GroupFull } from './group-full';
@@ -15,7 +16,7 @@ export interface ChoiceFull {
   itemEl?: HTMLElement;
   choiceEl?: HTMLElement;
   labelClass?: Array<string>;
-  labelDescription?: string;
+  labelDescription?: StringPreEscaped | StringUntrusted | string;
   customProperties?: Types.CustomProperties;
   disabled: boolean;
   active: boolean;

data/node_modules/choices.js/src/scripts/interfaces/class-names.ts

@@ -50,6 +50,8 @@ export interface ClassNames {
   flippedState: string | Array<string>;
   /** @default ['is-loading'] */
   loadingState: string | Array<string>;
+  /** @default ['is-invalid'] */
+  invalidState: string | Array<string>;
   /** @default ['choices__notice'] */
   notice: string | Array<string>;
   /** @default ['choices__item--selectable', 'add-choice'] */

data/node_modules/choices.js/src/scripts/interfaces/event-choice.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-cycle
 import { InputChoice } from './input-choice';
 
 export type EventChoiceValueType<B extends boolean> = B extends true ? string : EventChoice;

data/node_modules/choices.js/src/scripts/interfaces/input-choice.ts

@@ -1,11 +1,13 @@
 import { StringUntrusted } from './string-untrusted';
+import { StringPreEscaped } from './string-pre-escaped';
+// eslint-disable-next-line
 import { Types } from './types';
 
 export interface InputChoice {
   id?: number;
   highlighted?: boolean;
   labelClass?: string | Array<string>;
-  labelDescription?: string;
+  labelDescription?: StringPreEscaped | StringUntrusted | string;
   customProperties?: Types.CustomProperties;
   disabled?: boolean;
   active?: boolean;
@@ -13,5 +15,5 @@ export interface InputChoice {
   placeholder?: boolean;
   selected?: boolean;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  value: any;
+  value: any; // string;
 }

data/node_modules/choices.js/src/scripts/interfaces/options.ts

@@ -200,7 +200,7 @@ export interface Options {
    *
    * @default
    * ```
-   * (value, valueRaw) => `Remove item`;
+   * (value, valueRaw, item) => `Remove item`;
    * ```
    */
   removeItemIconText: string | Types.NoticeStringFunction;
@@ -215,7 +215,7 @@ export interface Options {
    *
    * @default
    * ```
-   * (value, valueRaw) => `Remove item: ${value}`;
+   * (value, valueRaw, item) => `Remove item: ${value}`;
    * ```
    */
   removeItemLabelText: string | Types.NoticeStringFunction;
@@ -321,6 +321,15 @@ export interface Options {
    */
   searchChoices: boolean;
 
+  /**
+   * Whether disabled choices should be included in search results. If `true`, disabled choices will appear in search results but still cannot be selected.
+   *
+   * **Input types affected:** select-one, select-multiple
+   *
+   * @default false
+   */
+  searchDisabledChoices: boolean;
+
   /**
    * The minimum length a search value should be before choices are searched.
    *
@@ -471,6 +480,15 @@ export interface Options {
    */
   renderSelectedChoices: 'auto' | 'always' | boolean;
 
+  /**
+   * Whether selected choices should be removed from the list during search.
+   *
+   * **Input types affected:** select-multiple
+   *
+   * @default false;
+   */
+  searchRenderSelectedChoices: boolean;
+
   /**
    * The text that is shown whilst choices are being populated via AJAX.
    *
@@ -615,5 +633,5 @@ export interface Options {
    */
   callbackOnCreateTemplates: CallbackOnCreateTemplatesFn | null;
 
-  appendGroupInSearch: false;
+  appendGroupInSearch: boolean;
 }

data/node_modules/choices.js/src/scripts/interfaces/store.ts

@@ -53,7 +53,8 @@ export interface Store {
   get activeChoices(): ChoiceFull[];
 
   /**
-   * Get choices that can be searched (excluding placeholders)
+   * Get choices that can be searched (excluding placeholders,
+   * optionally excluding disabled based on config)
    */
   get searchableChoices(): ChoiceFull[];
 

data/node_modules/choices.js/src/scripts/interfaces/types.ts

@@ -1,12 +1,14 @@
 import { StringUntrusted } from './string-untrusted';
 import { StringPreEscaped } from './string-pre-escaped';
+// eslint-disable-next-line import/no-cycle
+import { EventChoice } from './event-choice';
 
 export namespace Types {
   export type StrToEl = (str: string) => HTMLElement | HTMLInputElement | HTMLOptionElement;
   export type EscapeForTemplateFn = (allowHTML: boolean, s: StringUntrusted | StringPreEscaped | string) => string;
   export type GetClassNamesFn = (s: string | Array<string>) => string;
   export type StringFunction = () => string;
-  export type NoticeStringFunction = (value: string, valueRaw: string) => string;
+  export type NoticeStringFunction = (value: string, valueRaw: string, item?: EventChoice) => string;
   export type NoticeLimitFunction = (maxItemCount: number) => string;
   export type FilterFunction = (value: string) => boolean;
   export type ValueCompareFunction = (value1: string, value2: string) => boolean;