deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2026-03-14 14:45:47 +01:00
Code Issues Projects Releases Wiki Activity

deploy: f3cdf0020e

Browse source
This commit is contained in:
Xon 2024-08-23 02:11:54 +08:00
commit a5af7dd794
64 changed files with 27504 additions and 7281 deletions
Download patch file Download diff file Expand all files Collapse all files

2
assets/images/logo.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Before After
Before After

11948
assets/scripts/choices.js
View file

File diff suppressed because it is too large Load diff

4
assets/scripts/choices.min.js vendored
View file

File diff suppressed because one or more lines are too long

5189
assets/scripts/choices.mjs Normal file
View file

File diff suppressed because it is too large Load diff

4715
assets/scripts/choices.search-basic.js Normal file
View file

File diff suppressed because it is too large Load diff

2
assets/scripts/choices.search-basic.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

4707
assets/scripts/choices.search-basic.mjs Normal file
View file

File diff suppressed because it is too large Load diff

3566
assets/scripts/choices.search-prefix.js Normal file
View file

File diff suppressed because it is too large Load diff

2
assets/scripts/choices.search-prefix.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

3558
assets/scripts/choices.search-prefix.mjs Normal file
View file

File diff suppressed because it is too large Load diff

5
assets/styles/base.css
View file

@ -78,8 +78,7 @@ a:focus {
border: 1px solid #ddd;
border-radius: 2.5px;
font-size: 14px;
-webkit-appearance: none;
appearance: none;
appearance: none;
margin-bottom: 24px;
}
@ -137,7 +136,7 @@ label + p {
.section a,
.section a:visited,
.section a:focus {
color: #00bcd4;
color: #005F75;
}
.logo {

2
assets/styles/base.min.css vendored
View file

@ -1 +1 @@
*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,::after,::before{box-sizing:border-box}body,html{position:relative;margin:0;width:100%;height:100%}body{font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:16px;line-height:1.4;color:#fff;background-color:#333;overflow-x:hidden}hr,label{display:block}label,p{margin-bottom:8px}label{font-size:14px;font-weight:500;cursor:pointer}p{margin-top:0}hr{margin:30px 0;border:0;border-bottom:1px solid #eaeaea;height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:12px;font-weight:400;line-height:1.2}a,a:focus,a:visited{color:#fff;text-decoration:none;font-weight:600}.form-control{display:block;width:100%;background-color:#f9f9f9;padding:12px;border:1px solid #ddd;border-radius:2.5px;font-size:14px;-webkit-appearance:none;appearance:none;margin-bottom:24px}.h1,h1{font-size:32px}.h2,h2{font-size:24px}.h3,h3{font-size:20px}.h4,h4{font-size:18px}.h5,h5{font-size:16px}.h6,h6{font-size:14px}label+p{margin-top:-4px}.container{display:block;margin:auto;max-width:40em;padding:48px}@media (max-width:620px){.container{padding:0}}.section{background-color:#fff;padding:24px;color:#333}.section a,.section a:focus,.section a:visited{color:#00bcd4}.logo{display:block;margin-bottom:12px}.logo-img{width:100%;height:auto;display:inline-block;max-width:100%;vertical-align:top;padding:6px 0}.visible-ie{display:none}.push-bottom{margin-bottom:24px}.zero-bottom{margin-bottom:0}.zero-top{margin-top:0}.text-center{text-align:center}[data-test-hook]{margin-bottom:24px}
*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,::after,::before{box-sizing:border-box}body,html{position:relative;margin:0;width:100%;height:100%}body{font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:16px;line-height:1.4;color:#fff;background-color:#333;overflow-x:hidden}hr,label{display:block}label,p{margin-bottom:8px}label{font-size:14px;font-weight:500;cursor:pointer}p{margin-top:0}hr{margin:30px 0;border:0;border-bottom:1px solid #eaeaea;height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:12px;font-weight:400;line-height:1.2}a,a:focus,a:visited{color:#fff;text-decoration:none;font-weight:600}.form-control{display:block;width:100%;background-color:#f9f9f9;padding:12px;border:1px solid #ddd;border-radius:2.5px;font-size:14px;appearance:none;margin-bottom:24px}.h1,h1{font-size:32px}.h2,h2{font-size:24px}.h3,h3{font-size:20px}.h4,h4{font-size:18px}.h5,h5{font-size:16px}.h6,h6{font-size:14px}label+p{margin-top:-4px}.container{display:block;margin:auto;max-width:40em;padding:48px}@media (max-width:620px){.container{padding:0}}.section{background-color:#fff;padding:24px;color:#333}.section a,.section a:focus,.section a:visited{color:#005f75}.logo{display:block;margin-bottom:12px}.logo-img{width:100%;height:auto;display:inline-block;max-width:100%;vertical-align:top;padding:6px 0}.visible-ie{display:none}.push-bottom{margin-bottom:24px}.zero-bottom{margin-bottom:0}.zero-top{margin-top:0}.text-center{text-align:center}[data-test-hook]{margin-bottom:24px}

19
assets/styles/choices.css
View file

@ -62,9 +62,9 @@
opacity: 1;
}
.choices[data-type*=select-one] .choices__button:focus {
box-shadow: 0 0 0 2px #00bcd4;
box-shadow: 0 0 0 2px #005F75;
}
.choices[data-type*=select-one] .choices__item[data-value=""] .choices__button {
.choices[data-type*=select-one] .choices__item[data-placeholder] .choices__button {
display: none;
}
.choices[data-type*=select-one]::after {
@ -81,7 +81,7 @@
pointer-events: none;
}
.choices[data-type*=select-one].is-open::after {
border-color: transparent transparent #333 transparent;
border-color: transparent transparent #333;
margin-top: -7.5px;
}
.choices[data-type*=select-one][dir=rtl]::after {
@ -108,7 +108,7 @@
margin-bottom: 0;
margin-left: 8px;
padding-left: 16px;
border-left: 1px solid #008fa1;
border-left: 1px solid #003642;
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
background-size: 8px;
width: 8px;
@ -174,8 +174,8 @@
font-weight: 500;
margin-right: 3.75px;
margin-bottom: 3.75px;
background-color: #00bcd4;
border: 1px solid #00a5bb;
background-color: #005F75;
border: 1px solid #004a5c;
color: #fff;
word-break: break-all;
box-sizing: border-box;
@ -188,8 +188,8 @@
margin-left: 3.75px;
}
.choices__list--multiple .choices__item.is-highlighted {
background-color: #00a5bb;
border: 1px solid #008fa1;
background-color: #004a5c;
border: 1px solid #003642;
}
.is-disabled .choices__list--multiple .choices__item {
background-color: #aaaaaa;
@ -294,8 +294,7 @@
.choices__button {
text-indent: -9999px;
-webkit-appearance: none;
appearance: none;
appearance: none;
border: 0;
background-color: transparent;
background-repeat: no-repeat;

2
assets/styles/choices.min.css vendored
View file

File diff suppressed because one or more lines are too long

29
index.html
View file

@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1,user-scalable=no"
content="width=device-width,initial-scale=1,viewport-fit=cover"
/>
<title>Choices</title>
<meta
@ -33,7 +33,7 @@
<link
rel="mask-icon"
href="assets/images/safari-pinned-tab.svg"
color="#00bcd4"
color="#005F75"
/>
<link rel="shortcut icon" href="assets/images/favicon.ico" />
<meta
@ -47,7 +47,7 @@
<!-- End ignore these -->
<!-- Optional includes -->
<script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=Array.from%2Ces5%2Ces6%2CSymbol%2CSymbol.iterator%2CDOMTokenList%2CObject.assign%2CCustomEvent%2CElement.prototype.classList%2CElement.prototype.closest%2CElement.prototype.dataset%2CArray.prototype.find%2CArray.prototype.includes"></script>
<script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=Array.from%2Ces5%2Ces6%2CSymbol%2CSymbol.iterator%2CDOMTokenList%2CObject.assign%2CCustomEvent%2CElement.prototype.classList%2CElement.prototype.closest%2CElement.prototype.dataset%2CArray.prototype.find%2CArray.prototype.includes%2Cfetch"></script>
<!-- End optional includes -->
<!-- Choices includes -->
@ -477,6 +477,7 @@
<option value="Michigan">Michigan</option>
</select>
<div data-test-hook="custom-templates">
<label for="choices-single-custom-templates">Custom templates</label>
<select
class="form-control"
@ -488,6 +489,7 @@
<option value="Ember">Ember</option>
<option value="Vue">Vue</option>
</select>
</div>
<p>
Below is an example of how you could have two select inputs depend on
@ -520,6 +522,7 @@
<h2>Form interaction</h2>
<p>Change the values and press reset to restore to initial state.</p>
<form>
<div data-test-hook="reset-simple">
<label for="reset-simple">Change me!</label>
<select class="form-control" name="reset-simple" id="reset-simple">
<option value="Option 1">Option 1</option>
@ -528,6 +531,7 @@
<option value="Option 4">Option 4</option>
<option value="Option 5">Option 5</option>
</select>
</div>
<label for="reset-multiple">And me!</label>
<select
@ -746,7 +750,7 @@
var singleNoSearch = new Choices('#choices-single-no-search', {
allowHTML: true,
searchEnabled: false,
removeItemButton: true,
removeItemButton: true,
choices: [
{ value: 'One', label: 'Label One' },
{ value: 'Two', label: 'Label Two', disabled: true },
@ -841,9 +845,11 @@
document.getElementById('choices-single-custom-templates'),
{
allowHTML: true,
callbackOnCreateTemplates: function(strToEl) {
position: 'bottom',
callbackOnCreateTemplates: function(strToEl, escapeForTemplate) {
var classNames = this.config.classNames;
var itemSelectText = this.config.itemSelectText;
var allowHTML = this.config.allowHTML;
return {
item: function({ classNames }, data) {
return strToEl(
@ -859,11 +865,12 @@
) +
'"\
data-item\
role="option"\
data-id="' +
String(data.id) +
'"\
data-value="' +
String(data.value) +
String(escapeForTemplate(allowHTML, data.value)) +
'"\
' +
String(data.active ? 'aria-selected="true"' : '') +
@ -873,7 +880,7 @@
'\
>\
<span style="margin-right:10px;">🎉</span> ' +
String(data.label) +
String(escapeForTemplate(allowHTML, data.label)) +
'\
</div>\
'
@ -909,7 +916,7 @@
String(data.id) +
'"\
data-value="' +
String(data.value) +
String(escapeForTemplate(allowHTML, data.value)) +
'"\
' +
String(
@ -918,7 +925,7 @@
'\
>\
<span style="margin-right:10px;">👉🏽</span> ' +
String(data.label) +
String(escapeForTemplate(allowHTML, data.label)) +
'\
</div>\
'
@ -942,6 +949,7 @@
<!-- Google Analytics - Ignore me -->
<script>
try {
window.ga =
window.ga ||
function() {
@ -950,6 +958,9 @@
ga.l = +new Date();
ga('create', 'UA-31575166-1', 'auto');
ga('send', 'pageview');
} catch (e) {
console.log(e);
}
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
<!-- End Google Analytics -->

1
types/src/index.d.ts vendored
View file

@ -4,4 +4,3 @@ export * from './scripts/constants';
export * from './scripts/defaults';
export { default as templates } from './scripts/templates';
export default Choices;
//# sourceMappingURL=index.d.ts.map

52
types/src/scripts/actions/choices.d.ts vendored
View file

@ -1,44 +1,24 @@
import { ACTION_TYPES } from '../constants';
import { Choice } from '../interfaces/choice';
export interface AddChoiceAction {
type: typeof ACTION_TYPES.ADD_CHOICE;
id: number;
value: string;
label: string;
groupId: number;
disabled: boolean;
elementId: number;
customProperties: object;
placeholder: boolean;
keyCode: number;
import { ChoiceFull } from '../interfaces/choice-full';
import { ActionType } from '../interfaces';
import { SearchResult } from '../interfaces/search';
import { AnyAction } from '../interfaces/store';
export type ChoiceActions = AddChoiceAction | RemoveChoiceAction | FilterChoicesAction | ActivateChoicesAction | ClearChoicesAction;
export interface AddChoiceAction extends AnyAction<typeof ActionType.ADD_CHOICE> {
choice: ChoiceFull;
}
export interface Result<T> {
item: T;
score: number;
export interface RemoveChoiceAction extends AnyAction<typeof ActionType.REMOVE_CHOICE> {
choice: ChoiceFull;
}
export interface FilterChoicesAction {
type: typeof ACTION_TYPES.FILTER_CHOICES;
results: Result<Choice>[];
export interface FilterChoicesAction extends AnyAction<typeof ActionType.FILTER_CHOICES> {
results: SearchResult<ChoiceFull>[];
}
export interface ActivateChoicesAction {
type: typeof ACTION_TYPES.ACTIVATE_CHOICES;
export interface ActivateChoicesAction extends AnyAction<typeof ActionType.ACTIVATE_CHOICES> {
active: boolean;
}
export interface ClearChoicesAction {
type: typeof ACTION_TYPES.CLEAR_CHOICES;
export interface ClearChoicesAction extends AnyAction<typeof ActionType.CLEAR_CHOICES> {
}
export declare const addChoice: ({ value, label, id, groupId, disabled, elementId, customProperties, placeholder, keyCode, }: {
value: any;
label: any;
id: any;
groupId: any;
disabled: any;
elementId: any;
customProperties: any;
placeholder: any;
keyCode: any;
}) => AddChoiceAction;
export declare const filterChoices: (results: Result<Choice>[]) => FilterChoicesAction;
export declare const addChoice: (choice: ChoiceFull) => AddChoiceAction;
export declare const removeChoice: (choice: ChoiceFull) => RemoveChoiceAction;
export declare const filterChoices: (results: SearchResult<ChoiceFull>[]) => FilterChoicesAction;
export declare const activateChoices: (active?: boolean) => ActivateChoicesAction;
export declare const clearChoices: () => ClearChoicesAction;
//# sourceMappingURL=choices.d.ts.map

21
types/src/scripts/actions/groups.d.ts vendored
View file

@ -1,15 +1,8 @@
import { ACTION_TYPES } from '../constants';
export interface AddGroupAction {
type: typeof ACTION_TYPES.ADD_GROUP;
id: number;
value: string;
active: boolean;
disabled: boolean;
import { GroupFull } from '../interfaces/group-full';
import { ActionType } from '../interfaces';
import { AnyAction } from '../interfaces/store';
export type GroupActions = AddGroupAction;
export interface AddGroupAction extends AnyAction<typeof ActionType.ADD_GROUP> {
group: GroupFull;
}
export declare const addGroup: ({ value, id, active, disabled, }: {
id: number;
value: string;
active: boolean;
disabled: boolean;
}) => AddGroupAction;
//# sourceMappingURL=groups.d.ts.map
export declare const addGroup: (group: GroupFull) => AddGroupAction;

44
types/src/scripts/actions/items.d.ts vendored
View file

@ -1,35 +1,17 @@
import { ACTION_TYPES } from '../constants';
export interface AddItemAction {
type: typeof ACTION_TYPES.ADD_ITEM;
id: number;
value: string;
label: string;
choiceId: number;
groupId: number;
customProperties: object;
placeholder: boolean;
keyCode: number;
import { ChoiceFull } from '../interfaces/choice-full';
import { ActionType } from '../interfaces';
import { AnyAction } from '../interfaces/store';
export type ItemActions = AddItemAction | RemoveItemAction | HighlightItemAction;
export interface AddItemAction extends AnyAction<typeof ActionType.ADD_ITEM> {
item: ChoiceFull;
}
export interface RemoveItemAction {
type: typeof ACTION_TYPES.REMOVE_ITEM;
id: number;
choiceId: number;
export interface RemoveItemAction extends AnyAction<typeof ActionType.REMOVE_ITEM> {
item: ChoiceFull;
}
export interface HighlightItemAction {
type: typeof ACTION_TYPES.HIGHLIGHT_ITEM;
id: number;
export interface HighlightItemAction extends AnyAction<typeof ActionType.HIGHLIGHT_ITEM> {
item: ChoiceFull;
highlighted: boolean;
}
export declare const addItem: ({ value, label, id, choiceId, groupId, customProperties, placeholder, keyCode, }: {
id: number;
value: string;
label: string;
choiceId: number;
groupId: number;
customProperties: object;
placeholder: boolean;
keyCode: number;
}) => AddItemAction;
export declare const removeItem: (id: number, choiceId: number) => RemoveItemAction;
export declare const highlightItem: (id: number, highlighted: boolean) => HighlightItemAction;
//# sourceMappingURL=items.d.ts.map
export declare const addItem: (item: ChoiceFull) => AddItemAction;
export declare const removeItem: (item: ChoiceFull) => RemoveItemAction;
export declare const highlightItem: (item: ChoiceFull, highlighted: boolean) => HighlightItemAction;

141
types/src/scripts/choices.d.ts vendored
View file

@ -1,22 +1,28 @@
import { Container, Dropdown, Input, List, WrappedInput, WrappedSelect } from './components';
import { Choice } from './interfaces/choice';
import { Group } from './interfaces/group';
import { Item } from './interfaces/item';
import { Notice } from './interfaces/notice';
import { InputChoice } from './interfaces/input-choice';
import { InputGroup } from './interfaces/input-group';
import { Options } from './interfaces/options';
import { State } from './interfaces/state';
import { StateChangeSet } from './interfaces/state';
import Store from './store/store';
import templates from './templates';
import { ChoiceFull } from './interfaces/choice-full';
import { GroupFull } from './interfaces/group-full';
import { PassedElementType } from './interfaces';
import { EventChoice } from './interfaces/event-choice';
import { NoticeType, Templates } from './interfaces/templates';
import { Searcher } from './interfaces/search';
/**
* Choices
* @author Josh Johnson<josh@joshuajohnson.co.uk>
*/
declare class Choices implements Choices {
declare class Choices {
static version: string;
static get defaults(): {
options: Partial<Options>;
templates: typeof templates;
allOptions: Options;
templates: Templates;
};
initialised: boolean;
initialisedOK?: boolean;
config: Options;
passedElement: WrappedInput | WrappedSelect;
containerOuter: Container;
@ -25,15 +31,17 @@ declare class Choices implements Choices {
itemList: List;
input: Input;
dropdown: Dropdown;
_elementType: PassedElementType;
_isTextElement: boolean;
_isSelectOneElement: boolean;
_isSelectMultipleElement: boolean;
_isSelectElement: boolean;
_hasNonChoicePlaceholder: boolean;
_canAddUserChoices: boolean;
_store: Store;
_templates: typeof templates;
_initialState: State;
_currentState: State;
_prevState: State;
_templates: Templates;
_lastAddedChoiceId: number;
_lastAddedGroupId: number;
_currentValue: string;
_canSearch: boolean;
_isScrollingOnIe: boolean;
@ -46,26 +54,30 @@ declare class Choices implements Choices {
_idNames: {
itemChoice: string;
};
_presetGroups: Group[] | HTMLOptGroupElement[] | Element[];
_presetOptions: Item[] | HTMLOptionElement[];
_presetChoices: Partial<Choice>[];
_presetItems: Item[] | string[];
_presetChoices: (ChoiceFull | GroupFull)[];
_initialItems: string[];
_searcher: Searcher<ChoiceFull>;
_notice?: {
type: NoticeType;
text: string;
};
_docRoot: ShadowRoot | HTMLElement;
constructor(element?: string | Element | HTMLInputElement | HTMLSelectElement, userConfig?: Partial<Options>);
init(): void;
destroy(): void;
enable(): this;
disable(): this;
highlightItem(item: Item, runEvent?: boolean): this;
unhighlightItem(item: Item): this;
highlightItem(item: InputChoice, runEvent?: boolean): this;
unhighlightItem(item: InputChoice, runEvent?: boolean): this;
highlightAll(): this;
unhighlightAll(): this;
removeActiveItemsByValue(value: string): this;
removeActiveItems(excludedId: number): this;
removeActiveItems(excludedId?: number): this;
removeHighlightedItems(runEvent?: boolean): this;
showDropdown(preventInputFocus?: boolean): this;
hideDropdown(preventInputBlur?: boolean): this;
getValue(valueOnly?: boolean): string[] | Item[] | Item | string;
setValue(items: string[] | Item[]): this;
getValue(valueOnly?: boolean): string[] | EventChoice[] | EventChoice | string;
setValue(items: string[] | InputChoice[]): this;
setChoiceByValue(value: string | string[]): this;
/**
* Set choices of select input via an array of objects (or function that returns array of object or promise of it),
@ -130,37 +142,45 @@ declare class Choices implements Choices {
* }], 'value', 'label', false);
* ```
*/
setChoices(choicesArrayOrFetcher?: Choice[] | Group[] | ((instance: Choices) => Choice[] | Promise<Choice[]>), value?: string, label?: string, replaceChoices?: boolean): this | Promise<this>;
setChoices(choicesArrayOrFetcher?: (InputChoice | InputGroup)[] | ((instance: Choices) => (InputChoice | InputGroup)[] | Promise<(InputChoice | InputGroup)[]>), value?: string | null, label?: string, replaceChoices?: boolean): this | Promise<this>;
refresh(withEvents?: boolean, selectFirstOption?: boolean, deselectAll?: boolean): this;
removeChoice(value: string): this;
clearChoices(): this;
clearStore(): this;
clearInput(): this;
_render(): void;
_validateConfig(): void;
_render(changes?: StateChangeSet): void;
_renderChoices(): void;
_renderItems(): void;
_createGroupsFragment(groups: Group[], choices: Choice[], fragment?: DocumentFragment): DocumentFragment;
_createChoicesFragment(choices: Choice[], fragment?: DocumentFragment, withinGroup?: boolean): DocumentFragment;
_createItemsFragment(items: Item[], fragment?: DocumentFragment): DocumentFragment;
_createGroupsFragment(groups: GroupFull[], choices: ChoiceFull[], fragment?: DocumentFragment): DocumentFragment;
_createChoicesFragment(choices: ChoiceFull[], fragment?: DocumentFragment, withinGroup?: boolean): DocumentFragment;
_createItemsFragment(items: InputChoice[], fragment?: DocumentFragment): DocumentFragment;
_displayNotice(text: string, type: NoticeType, openDropdown?: boolean): void;
_clearNotice(): void;
_renderNotice(): void;
_getChoiceForOutput(choice?: ChoiceFull, keyCode?: number): EventChoice | undefined;
_triggerChange(value: any): void;
_selectPlaceholderChoice(placeholderChoice: Choice): void;
_handleButtonAction(activeItems?: Item[], element?: HTMLElement): void;
_handleItemAction(activeItems?: Item[], element?: HTMLElement, hasShiftKey?: boolean): void;
_handleChoiceAction(activeItems?: Item[], element?: HTMLElement): void;
_handleBackspace(activeItems?: Item[]): void;
_startLoading(): void;
_stopLoading(): void;
_handleButtonAction(element?: HTMLElement): void;
_handleItemAction(element?: HTMLElement, hasShiftKey?: boolean): void;
_handleChoiceAction(element?: HTMLElement): boolean;
_handleBackspace(items: ChoiceFull[]): void;
_loadChoices(): void;
_handleLoadingState(setLoading?: boolean): void;
_handleSearch(value: string): void;
_canAddItem(activeItems: Item[], value: string): Notice;
_searchChoices(value: string): number;
_handleSearch(value?: string): void;
_canAddItems(): boolean;
_canCreateItem(value: string): boolean;
_searchChoices(value: string): number | null;
_stopSearch(): void;
_addEventListeners(): void;
_removeEventListeners(): void;
_onKeyDown(event: KeyboardEvent): void;
_onKeyUp({ target, keyCode, }: Pick<KeyboardEvent, 'target' | 'keyCode'>): void;
_onKeyUp(): void;
_onInput(): void;
_onSelectKey(event: KeyboardEvent, hasItems: boolean): void;
_onEnterKey(event: KeyboardEvent, activeItems: Item[], hasActiveDropdown: boolean): void;
_onEscapeKey(hasActiveDropdown: boolean): void;
_onEnterKey(event: KeyboardEvent, hasActiveDropdown: boolean): void;
_onEscapeKey(event: KeyboardEvent, hasActiveDropdown: boolean): void;
_onDirectionKey(event: KeyboardEvent, hasActiveDropdown: boolean): void;
_onDeleteKey(event: KeyboardEvent, activeItems: Item[], hasFocusedInput: boolean): void;
_onDeleteKey(event: KeyboardEvent, items: ChoiceFull[], hasFocusedInput: boolean): void;
_onTouchMove(): void;
_onTouchEnd(event: TouchEvent): void;
/**
@ -177,42 +197,17 @@ declare class Choices implements Choices {
_onBlur({ target }: Pick<FocusEvent, 'target'>): void;
_onFormReset(): void;
_highlightChoice(el?: HTMLElement | null): void;
_addItem({ value, label, choiceId, groupId, customProperties, placeholder, keyCode, }: {
value: string;
label?: string | null;
choiceId?: number;
groupId?: number;
customProperties?: object;
placeholder?: boolean;
keyCode?: number;
}): void;
_removeItem(item: Item): void;
_addChoice({ value, label, isSelected, isDisabled, groupId, customProperties, placeholder, keyCode, }: {
value: string;
label?: string | null;
isSelected?: boolean;
isDisabled?: boolean;
groupId?: number;
customProperties?: Record<string, any>;
placeholder?: boolean;
keyCode?: number;
}): void;
_addGroup({ group, id, valueKey, labelKey }: {
group: any;
id: any;
valueKey?: string | undefined;
labelKey?: string | undefined;
}): void;
_getTemplate(template: string, ...args: any): any;
_addItem(item: ChoiceFull, withEvents?: boolean, userTriggered?: boolean): void;
_removeItem(item: ChoiceFull): void;
_addChoice(choice: ChoiceFull, withEvents?: boolean, userTriggered?: boolean): void;
_addGroup(group: GroupFull, withEvents?: boolean): void;
_createTemplates(): void;
_createElements(): void;
_createStructure(): void;
_addPredefinedGroups(groups: Group[] | HTMLOptGroupElement[] | Element[]): void;
_addPredefinedChoices(choices: Partial<Choice>[]): void;
_addPredefinedItems(items: Item[] | string[]): void;
_setChoiceOrItem(item: any): void;
_findAndSelectChoiceByValue(value: string): void;
_initStore(): void;
_addPredefinedChoices(choices: (ChoiceFull | GroupFull)[], selectFirstOption?: boolean, withEvents?: boolean): void;
_findAndSelectChoiceByValue(value: string, userTriggered?: boolean): boolean;
_generatePlaceholderValue(): string | null;
_warnChoicesInitFailed(caller: string): void;
}
export default Choices;
//# sourceMappingURL=choices.d.ts.map

9
types/src/scripts/components/container.d.ts vendored
View file

@ -8,7 +8,6 @@ export default class Container {
position: PositionOptionsType;
isOpen: boolean;
isFlipped: boolean;
isFocussed: boolean;
isDisabled: boolean;
isLoading: boolean;
constructor({ element, type, classNames, position, }: {
@ -17,8 +16,6 @@ export default class Container {
classNames: ClassNames;
position: PositionOptionsType;
});
addEventListeners(): void;
removeEventListeners(): void;
/**
* Determine whether container should be flipped based on passed
* dropdown position
@ -28,16 +25,12 @@ export default class Container {
removeActiveDescendant(): void;
open(dropdownPos: number): void;
close(): void;
focus(): void;
addFocusState(): void;
removeFocusState(): void;
enable(): void;
disable(): void;
wrap(element: HTMLSelectElement | HTMLInputElement | HTMLElement): void;
wrap(element: HTMLElement): void;
unwrap(element: HTMLElement): void;
addLoadingState(): void;
removeLoadingState(): void;
_onFocus(): void;
_onBlur(): void;
}
//# sourceMappingURL=container.d.ts.map

2
types/src/scripts/components/dropdown.d.ts vendored
View file

@ -14,7 +14,6 @@ export default class Dropdown {
* Bottom position of dropdown in viewport coordinates
*/
get distanceFromTopWindow(): number;
getChild(selector: string): HTMLElement | null;
/**
* Show dropdown to user by adding active state class
*/
@ -24,4 +23,3 @@ export default class Dropdown {
*/
hide(): this;
}
//# sourceMappingURL=dropdown.d.ts.map

1
types/src/scripts/components/index.d.ts vendored
View file

@ -5,4 +5,3 @@ import List from './list';
import WrappedInput from './wrapped-input';
import WrappedSelect from './wrapped-select';
export { Dropdown, Container, Input, List, WrappedInput, WrappedSelect };
//# sourceMappingURL=index.d.ts.map

2
types/src/scripts/components/input.d.ts vendored
View file

@ -16,7 +16,6 @@ export default class Input {
set placeholder(placeholder: string);
get value(): string;
set value(value: string);
get rawValue(): string;
addEventListeners(): void;
removeEventListeners(): void;
enable(): void;
@ -36,4 +35,3 @@ export default class Input {
_onFocus(): void;
_onBlur(): void;
}
//# sourceMappingURL=input.d.ts.map

5
types/src/scripts/components/list.d.ts vendored
View file

@ -6,13 +6,10 @@ export default class List {
element: HTMLElement;
});
clear(): void;
append(node: Element | DocumentFragment): void;
getChild(selector: string): HTMLElement | null;
hasChildren(): boolean;
prepend(node: Element | DocumentFragment): void;
scrollToTop(): void;
scrollToChildElement(element: HTMLElement, direction: 1 | -1): void;
_scrollDown(scrollPos: number, strength: number, destination: number): void;
_scrollUp(scrollPos: number, strength: number, destination: number): void;
_animateScroll(destination: number, direction: number): void;
}
//# sourceMappingURL=list.d.ts.map

8
types/src/scripts/components/wrapped-element.d.ts vendored
View file

@ -1,7 +1,8 @@
import { ClassNames } from '../interfaces/class-names';
import { EventType } from '../interfaces/event-type';
export default class WrappedElement {
element: HTMLInputElement | HTMLSelectElement;
import { EventMap } from '../interfaces';
export default class WrappedElement<T extends HTMLInputElement | HTMLSelectElement> {
element: T;
classNames: ClassNames;
isDisabled: boolean;
constructor({ element, classNames }: {
@ -16,6 +17,5 @@ export default class WrappedElement {
reveal(): void;
enable(): void;
disable(): void;
triggerEvent(eventType: EventType, data?: object): void;
triggerEvent<K extends EventType>(eventType: EventType, data?: EventMap[K]['detail']): void;
}
//# sourceMappingURL=wrapped-element.d.ts.map

13
types/src/scripts/components/wrapped-input.d.ts vendored
View file

@ -1,14 +1,3 @@
import { ClassNames } from '../interfaces/class-names';
import WrappedElement from './wrapped-element';
export default class WrappedInput extends WrappedElement {
element: HTMLInputElement;
delimiter: string;
constructor({ element, classNames, delimiter, }: {
element: HTMLInputElement;
classNames: ClassNames;
delimiter: string;
});
get value(): string;
set value(value: string);
export default class WrappedInput extends WrappedElement<HTMLInputElement> {
}
//# sourceMappingURL=wrapped-input.d.ts.map

19
types/src/scripts/components/wrapped-select.d.ts vendored
View file

@ -1,19 +1,20 @@
import { ClassNames } from '../interfaces/class-names';
import { Item } from '../interfaces/item';
import WrappedElement from './wrapped-element';
export default class WrappedSelect extends WrappedElement {
element: HTMLSelectElement;
import { GroupFull } from '../interfaces/group-full';
import { ChoiceFull } from '../interfaces/choice-full';
export default class WrappedSelect extends WrappedElement<HTMLSelectElement> {
classNames: ClassNames;
template: (data: object) => HTMLOptionElement;
constructor({ element, classNames, template, }: {
extractPlaceholder: boolean;
constructor({ element, classNames, template, extractPlaceholder, }: {
element: HTMLSelectElement;
classNames: ClassNames;
template: (data: object) => HTMLOptionElement;
extractPlaceholder: boolean;
});
get placeholderOption(): HTMLOptionElement | null;
get optionGroups(): Element[];
get options(): Item[] | HTMLOptionElement[];
set options(options: Item[] | HTMLOptionElement[]);
appendDocFragment(fragment: DocumentFragment): void;
addOptions(choices: ChoiceFull[]): void;
optionsAsChoices(): (ChoiceFull | GroupFull)[];
_optionToChoice(option: HTMLOptionElement): ChoiceFull;
_optgroupToChoice(optgroup: HTMLOptGroupElement): GroupFull;
}
//# sourceMappingURL=wrapped-select.d.ts.map

9
types/src/scripts/constants.d.ts vendored
View file

@ -1,11 +1,4 @@
import { ActionType } from './interfaces/action-type';
import { EventType } from './interfaces/event-type';
import { KeyCodeMap } from './interfaces/keycode-map';
export declare const EVENTS: Record<EventType, EventType>;
export declare const ACTION_TYPES: Record<ActionType, ActionType>;
export declare const KEY_CODES: KeyCodeMap;
export declare const TEXT_TYPE: HTMLInputElement['type'];
export declare const SELECT_ONE_TYPE: HTMLSelectElement['type'];
export declare const SELECT_MULTIPLE_TYPE: HTMLSelectElement['type'];
export declare const SCROLLING_SPEED = 4;
//# sourceMappingURL=constants.d.ts.map
export declare const SCROLLING_SPEED: number;

1
types/src/scripts/defaults.d.ts vendored
View file

@ -2,4 +2,3 @@ import { ClassNames } from './interfaces/class-names';
import { Options } from './interfaces/options';
export declare const DEFAULT_CLASSNAMES: ClassNames;
export declare const DEFAULT_CONFIG: Options;
//# sourceMappingURL=defaults.d.ts.map

14
types/src/scripts/interfaces/action-type.d.ts vendored
View file

@ -1,2 +1,12 @@
export type ActionType = 'ADD_CHOICE' | 'FILTER_CHOICES' | 'ACTIVATE_CHOICES' | 'CLEAR_CHOICES' | 'ADD_GROUP' | 'ADD_ITEM' | 'REMOVE_ITEM' | 'HIGHLIGHT_ITEM' | 'CLEAR_ALL' | 'RESET_TO' | 'SET_IS_LOADING';
//# sourceMappingURL=action-type.d.ts.map
export declare const ActionType: {
readonly ADD_CHOICE: "ADD_CHOICE";
readonly REMOVE_CHOICE: "REMOVE_CHOICE";
readonly FILTER_CHOICES: "FILTER_CHOICES";
readonly ACTIVATE_CHOICES: "ACTIVATE_CHOICES";
readonly CLEAR_CHOICES: "CLEAR_CHOICES";
readonly ADD_GROUP: "ADD_GROUP";
readonly ADD_ITEM: "ADD_ITEM";
readonly REMOVE_ITEM: "REMOVE_ITEM";
readonly HIGHLIGHT_ITEM: "HIGHLIGHT_ITEM";
};
export type ActionTypes = (typeof ActionType)[keyof typeof ActionType];

9
types/src/scripts/interfaces/build-flags.d.ts vendored Normal file
View file

@ -0,0 +1,9 @@
export declare const canUseDom: boolean;
export declare const searchFuse: string | undefined;
/**
* These are not directly used, as an exported object (even as const) will prevent tree-shake away code paths
*/
export declare const BuildFlags: {
readonly searchFuse: string | undefined;
readonly canUseDom: boolean;
};

20
types/src/scripts/interfaces/choice-full.d.ts vendored Normal file
View file

@ -0,0 +1,20 @@
import { StringUntrusted } from './string-untrusted';
export type CustomProperties = Record<string, any> | string;
export interface ChoiceFull {
id: number;
highlighted: boolean;
element?: HTMLOptionElement | HTMLOptGroupElement;
labelClass?: Array<string>;
labelDescription?: string;
customProperties?: CustomProperties;
disabled: boolean;
active: boolean;
elementId?: string;
groupId: number;
label: StringUntrusted | string;
placeholder: boolean;
selected: boolean;
value: string;
score: number;
rank: number;
}

111
types/src/scripts/interfaces/class-names.d.ts vendored
View file

@ -1,56 +1,61 @@
/** Classes added to HTML generated by By default classnames follow the BEM notation. */
export interface ClassNames {
/** @default 'choices' */
containerOuter: string;
/** @default 'choices__inner' */
containerInner: string;
/** @default 'choices__input' */
input: string;
/** @default 'choices__input--cloned' */
inputCloned: string;
/** @default 'choices__list' */
list: string;
/** @default 'choices__list--multiple' */
listItems: string;
/** @default 'choices__list--single' */
listSingle: string;
/** @default 'choices__list--dropdown' */
listDropdown: string;
/** @default 'choices__item' */
item: string;
/** @default 'choices__item--selectable' */
itemSelectable: string;
/** @default 'choices__item--disabled' */
itemDisabled: string;
/** @default 'choices__item--choice' */
itemChoice: string;
/** @default 'choices__placeholder' */
placeholder: string;
/** @default 'choices__group' */
group: string;
/** @default 'choices__heading' */
groupHeading: string;
/** @default 'choices__button' */
button: string;
/** @default 'is-active' */
activeState: string;
/** @default 'is-focused' */
focusState: string;
/** @default 'is-open' */
openState: string;
/** @default 'is-disabled' */
disabledState: string;
/** @default 'is-highlighted' */
highlightedState: string;
/** @default 'is-selected' */
selectedState: string;
/** @default 'is-flipped' */
flippedState: string;
/** @default 'is-loading' */
loadingState: string;
/** @default 'has-no-results' */
noResults: string;
/** @default 'has-no-choices' */
noChoices: string;
/** @default ['choices'] */
containerOuter: string | Array<string>;
/** @default ['choices__inner'] */
containerInner: string | Array<string>;
/** @default ['choices__input'] */
input: string | Array<string>;
/** @default ['choices__input--cloned'] */
inputCloned: string | Array<string>;
/** @default ['choices__list'] */
list: string | Array<string>;
/** @default ['choices__list--multiple'] */
listItems: string | Array<string>;
/** @default ['choices__list--single'] */
listSingle: string | Array<string>;
/** @default ['choices__list--dropdown'] */
listDropdown: string | Array<string>;
/** @default ['choices__item'] */
item: string | Array<string>;
/** @default ['choices__item--selectable'] */
itemSelectable: string | Array<string>;
/** @default ['choices__item--disabled'] */
itemDisabled: string | Array<string>;
/** @default ['choices__item--choice'] */
itemChoice: string | Array<string>;
/** @default ['choices__description'] */
description: string | Array<string>;
/** @default ['choices__placeholder'] */
placeholder: string | Array<string>;
/** @default ['choices__group'] */
group: string | Array<string>;
/** @default ['choices__heading'] */
groupHeading: string | Array<string>;
/** @default ['choices__button'] */
button: string | Array<string>;
/** @default ['is-active'] */
activeState: string | Array<string>;
/** @default ['is-focused'] */
focusState: string | Array<string>;
/** @default ['is-open'] */
openState: string | Array<string>;
/** @default ['is-disabled'] */
disabledState: string | Array<string>;
/** @default ['is-highlighted'] */
highlightedState: string | Array<string>;
/** @default ['is-selected'] */
selectedState: string | Array<string>;
/** @default ['is-flipped'] */
flippedState: string | Array<string>;
/** @default ['is-loading'] */
loadingState: string | Array<string>;
/** @default ['choices__notice'] */
notice: string | Array<string>;
/** @default ['choices__item--selectable', 'add-choice'] */
addChoice: string | Array<string>;
/** @default ['has-no-results'] */
noResults: string | Array<string>;
/** @default ['has-no-choices'] */
noChoices: string | Array<string>;
}
//# sourceMappingURL=class-names.d.ts.map

6
types/src/scripts/interfaces/event-choice.d.ts vendored Normal file
View file

@ -0,0 +1,6 @@
import { InputChoice } from './input-choice';
export interface EventChoice extends InputChoice {
element?: HTMLOptionElement | HTMLOptGroupElement;
groupValue?: string;
keyCode?: number;
}

14
types/src/scripts/interfaces/event-type.d.ts vendored
View file

@ -1,2 +1,12 @@
export type EventType = 'addItem' | 'removeItem' | 'highlightItem' | 'unhighlightItem' | 'choice' | 'change' | 'search' | 'showDropdown' | 'hideDropdown' | 'highlightChoice';
//# sourceMappingURL=event-type.d.ts.map
export declare const enum EventType {
showDropdown = "showDropdown",
hideDropdown = "hideDropdown",
change = "change",
choice = "choice",
search = "search",
addItem = "addItem",
removeItem = "removeItem",
highlightItem = "highlightItem",
highlightChoice = "highlightChoice",
unhighlightItem = "unhighlightItem"
}

9
types/src/scripts/interfaces/group-full.d.ts vendored Normal file
View file

@ -0,0 +1,9 @@
import { ChoiceFull } from './choice-full';
export interface GroupFull {
id: number;
active: boolean;
disabled: boolean;
label: string;
element?: HTMLOptGroupElement;
choices: ChoiceFull[];
}

8
types/src/scripts/interfaces/index.d.ts vendored
View file

@ -1,16 +1,14 @@
export * from './action-type';
export * from './choice';
export * from './choices';
export * from './input-choice';
export * from './input-group';
export * from './event-choice';
export * from './class-names';
export * from './event-type';
export * from './group';
export * from './item';
export * from './keycode-map';
export * from './notice';
export * from './options';
export * from './passed-element';
export * from './passed-element-type';
export * from './position-options-type';
export * from './state';
export * from './types';
//# sourceMappingURL=index.d.ts.map

14
types/src/scripts/interfaces/input-choice.d.ts vendored Normal file
View file

@ -0,0 +1,14 @@
import { StringUntrusted } from './string-untrusted';
export interface InputChoice {
id?: number;
highlighted?: boolean;
labelClass?: string | Array<string>;
labelDescription?: string;
customProperties?: Record<string, any> | string;
disabled?: boolean;
active?: boolean;
label: StringUntrusted | string;
placeholder?: boolean;
selected?: boolean;
value: any;
}

10
types/src/scripts/interfaces/input-group.d.ts vendored Normal file
View file

@ -0,0 +1,10 @@
import { InputChoice } from './input-choice';
import { StringUntrusted } from './string-untrusted';
export interface InputGroup {
id?: number;
active?: boolean;
disabled?: boolean;
label?: StringUntrusted | string;
value: string;
choices: InputChoice[];
}

21
types/src/scripts/interfaces/item.d.ts vendored
View file

@ -1,6 +1,17 @@
import { Choice } from './choice';
export interface Item extends Choice {
choiceId?: number;
highlighted?: boolean;
import { InputChoice } from './input-choice';
import { InputGroup } from './input-group';
/**
* @deprecated Use InputChoice instead
*/
export interface Item extends InputChoice {
}
/**
* @deprecated Use InputChoice instead
*/
export interface Choice extends InputChoice {
}
/**
* @deprecated Use InputGroup instead
*/
export interface Group extends InputGroup {
}
//# sourceMappingURL=item.d.ts.map

21
types/src/scripts/interfaces/keycode-map.d.ts vendored
View file

@ -1,12 +1,11 @@
export interface KeyCodeMap {
BACK_KEY: 46;
DELETE_KEY: 8;
ENTER_KEY: 13;
A_KEY: 65;
ESC_KEY: 27;
UP_KEY: 38;
DOWN_KEY: 40;
PAGE_UP_KEY: 33;
PAGE_DOWN_KEY: 34;
export declare const enum KeyCodeMap {
BACK_KEY = 46,
DELETE_KEY = 8,
ENTER_KEY = 13,
A_KEY = 65,
ESC_KEY = 27,
UP_KEY = 38,
DOWN_KEY = 40,
PAGE_UP_KEY = 33,
PAGE_DOWN_KEY = 34
}
//# sourceMappingURL=keycode-map.d.ts.map

157
types/src/scripts/interfaces/options.d.ts vendored
View file

@ -1,9 +1,9 @@
import Fuse from 'fuse.js';
import { Choices } from './choices';
import { Choice } from './choice';
import { IFuseOptions } from 'fuse.js';
import { InputChoice } from './input-choice';
import { ClassNames } from './class-names';
import { PositionOptionsType } from './position-options-type';
import { Types } from './types';
export declare const ObjectsInConfig: string[];
/**
* Choices options interface
*
@ -51,7 +51,7 @@ export interface Options {
*
* @default []
*/
items: string[] | Choice[];
items: string[] | InputChoice[];
/**
* Add choices (see terminology) to select input.
*
@ -74,12 +74,31 @@ export interface Options {
* description: 'Custom description about Option 2',
* random: 'Another random custom property'
* },
* },
* {
* label: 'Group 1',
* choices: [{
* value: 'Option 3',
* label: 'Option 4',
* selected: true,
* disabled: false,
* },
* {
* value: 'Option 2',
* label: 'Option 2',
* selected: false,
* disabled: true,
* customProperties: {
* description: 'Custom description about Option 2',
* random: 'Another random custom property'
* }
* }]
* }]
* ```
*
* @default []
*/
choices: Choice[];
choices: InputChoice[];
/**
* The amount of choices to be rendered within the dropdown list `("-1" indicates no limit)`. This is useful if you have a lot of choices where it is easier for a user to use the search area to find a choice.
*
@ -96,6 +115,36 @@ export interface Options {
* @default -1
*/
maxItemCount: number;
/**
* Control how the dropdown closes after making a selection for select-one or select-multiple
*
* 'auto' defaults based on backing-element type:
* select-one: true
* select-multiple: false
*
* **Input types affected:** select-one, select-multiple
*
* @default 'auto'
*/
closeDropdownOnSelect: boolean | 'auto';
/**
* Make select-multiple with a max item count of 1 work similar to select-one does.
* Selecting an item will auto-close the dropdown and swap any existing item for the just selected choice.
* If applied to a select-one, it functions as above and not the standard select-one.
*
* **Input types affected:** select-one, select-multiple
*
* @default false
*/
singleModeForMultiSelect: boolean;
/**
* Whether a user can add choices dynamically.
*
* **Input types affected:** select-one, select-multiple
*
* @default false
*/
addChoices: boolean;
/**
* Whether a user can add items.
*
@ -107,22 +156,53 @@ export interface Options {
/**
* A filter that will need to pass for a user to successfully add an item.
*
* **Input types affected:** text
* **Input types affected:** text, select-one, select-multiple
*
* @default null
* @default (value) => !!value && value !== ''
*/
addItemFilter: string | RegExp | Types.FilterFunction | null;
/**
* The text that is shown when a user has inputted a new item but has not pressed the enter key. To access the current input value, pass a function with a `value` argument (see the **default config** [https://github.com/jshjohnson/Choices#setup] for an example), otherwise pass a string.
* The raw non-sanitised value is passed as a 2nd argument.
*
* **Input types affected:** text
* Return type must be safe to insert into HTML (ie use the 1st argument which is sanitised)
*
* **Input types affected:** text, one-select, select-one, select-multiple
*
* @default
* ```
* (value) => `Press Enter to add <b>"${value}"</b>`;
* (value, valueRaw) => `Press Enter to add <b>"${value}"</b>`;
* ```
*/
addItemText: string | Types.NoticeStringFunction;
/**
* The text/icon for the remove button. To access the item's value, pass a function with a `value` argument (see the **default config** [https://github.com/jshjohnson/Choices#setup] for an example), otherwise pass a string.
* The raw non-sanitised value is passed as a 2nd argument.
*
* Return type must be safe to insert into HTML (ie use the 1st argument which is sanitised)
*
* **Input types affected:** text, select-one, select-multiple
*
* @default
* ```
* (value, valueRaw) => `Remove item`;
* ```
*/
removeItemIconText: string | Types.NoticeStringFunction;
/**
* The text for the remove button's aria label. To access the item's value, pass a function with a `value` argument (see the **default config** [https://github.com/jshjohnson/Choices#setup] for an example), otherwise pass a string.
* The raw non-sanitised value is passed as a 2nd argument.
*
* Return type must be safe to insert into HTML (ie use the 1st argument which is sanitised)
*
* **Input types affected:** text, select-one, select-multiple
*
* @default
* ```
* (value, valueRaw) => `Remove item: ${value}`;
* ```
*/
removeItemLabelText: string | Types.NoticeStringFunction;
/**
* Whether a user can remove items.
*
@ -139,6 +219,14 @@ export interface Options {
* @default false
*/
removeItemButton: boolean;
/**
* Align item remove button left vs right.
*
* **Input types affected:** text, select-one, select-multiple
*
* @default false
*/
removeItemButtonAlignLeft: boolean;
/**
* Whether a user can edit items. An item's value can be edited by pressing the backspace.
*
@ -152,17 +240,25 @@ export interface Options {
* If `false`, all elements (placeholder, items, etc.) will be treated as plain text.
* If `true`, this can be used to perform XSS scripting attacks if you load choices from a remote source.
*
* **Deprecation Warning:** This will default to `false` in a future release.
*
* **Input types affected:** text, select-one, select-multiple
*
* @default true
* @default false
*/
allowHTML: boolean;
/**
* Whether HTML should be escaped on input when `addItems` or `addChoices` is true.
* If `false`, user input will be treated as plain text.
* If `true`, this can be used to perform XSS scripting attacks if you load previously submitted choices from a remote source.
*
* **Input types affected:** text, select-one, select-multiple
*
* @default false
*/
allowHtmlUserInput: boolean;
/**
* Whether each inputted/chosen item should be unique.
*
* **Input types affected:** text, select-multiple
* **Input types affected:** text
*
* @default true
*/
@ -186,9 +282,7 @@ export interface Options {
/**
* Whether a search area should be shown.
*
* @note Multiple select boxes will always show search areas.
*
* **Input types affected:** select-one
* **Input types affected:** select-one, select-multiple
*
* @default true
*/
@ -210,7 +304,7 @@ export interface Options {
*/
searchFloor: number;
/**
* The maximum amount of search results to show.
* The maximum amount of search results to show. `("-1" indicates no limit)`
*
* **Input types affected:** select-one, select-multiple
*
@ -241,6 +335,10 @@ export interface Options {
* @default true
*/
resetScrollPosition: boolean;
/**
* The shadow root for use within ShadowDom
*/
shadowRoot: ShadowRoot | null;
/**
* Whether choices and groups should be sorted. If false, choices/groups will appear in the order they were given.
*
@ -274,7 +372,7 @@ export interface Options {
*
* @default sortByAlpha
*/
sorter: (current: Choice, next: Choice) => number;
sorter: (current: Types.RecordToCompare, next: Types.RecordToCompare) => number;
/**
* Whether the input should show a placeholder. Used in conjunction with `placeholderValue`. If `placeholder` is set to true and no value is passed to `placeholderValue`, the passed input's placeholder attribute will be used as the placeholder value.
*
@ -282,8 +380,7 @@ export interface Options {
*
* @note For single select boxes, the recommended way of adding a placeholder is as follows:
* ```
* <select>
* <option placeholder>This is a placeholder</option>
* <select data-placeholder="This is a placeholder">
* <option>...</option>
* <option>...</option>
* <option>...</option>
@ -379,12 +476,16 @@ export interface Options {
/**
* If no duplicates are allowed, and the value already exists in the array.
*
* Return type must be safe to insert into HTML (ie use the 1st argument which is sanitised)
*
* @default 'Only unique values can be added'
*/
uniqueItemText: string | Types.NoticeStringFunction;
/**
* The text that is shown when addItemFilter is passed and it returns false
*
* Return type must be safe to insert into HTML (ie use the 1st argument which is sanitised)
*
* **Input types affected:** text
*
* @default 'Only values matching specific conditions can be added'
@ -410,7 +511,7 @@ export interface Options {
/**
* Choices uses the great Fuse library for searching. You can find more options here: https://fusejs.io/api/options.html
*/
fuseOptions: Fuse.IFuseOptions<Choices>;
fuseOptions: IFuseOptions<unknown>;
/**
* ID of the connected label to improve a11y. If set, aria-labelledby will be added.
*/
@ -424,30 +525,30 @@ export interface Options {
*
* @default null
*/
callbackOnInit: ((this: Choices) => void) | null;
callbackOnInit: (() => void) | null;
/**
* Function to run on template creation. Through this callback it is possible to provide custom templates for the various components of Choices (see terminology). For Choices to work with custom templates, it is important you maintain the various data attributes defined here [https://github.com/jshjohnson/Choices/blob/67f29c286aa21d88847adfcd6304dc7d068dc01f/assets/scripts/src/choices.js#L1993-L2067].
*
* **Input types affected:** text, select-one, select-multiple
*
* @note For each callback, this refers to the current instance of This can be useful if you need access to methods `(this.disable())` or the config object `(this.config)`.
* @note For each callback, `this` refers to the current instance of Choices. This can be useful if you need access to methods `(this.disable())`.
*
* @example
* ```
* const example = new Choices(element, {
* callbackOnCreateTemplates: function (template) {
* callbackOnCreateTemplates: function (template, originalTemplates) {
* var classNames = this.config.classNames;
* return {
* item: (data) => {
* return template(`
* <div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}" data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''}>
* <div class="${getClassNames(classNames.item).join(' ')} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}" data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''}>
* <span>&bigstar;</span> ${data.label}
* </div>
* `);
* },
* choice: (data) => {
* return template(`
* <div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${this.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
* <div class="${getClassNames(classNames.item).join(' ')} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${this.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
* <span>&bigstar;</span> ${data.label}
* </div>
* `);
@ -459,6 +560,6 @@ export interface Options {
*
* @default null
*/
callbackOnCreateTemplates: ((template: Types.StrToEl) => void) | null;
callbackOnCreateTemplates: ((template: Types.StrToEl, escapeForTemplate: Types.EscapeForTemplateFn) => void) | null;
appendGroupInSearch: false;
}
//# sourceMappingURL=options.d.ts.map

1
types/src/scripts/interfaces/passed-element-type.d.ts vendored
View file

@ -1,2 +1 @@
export type PassedElementType = 'text' | 'select-one' | 'select-multiple';
//# sourceMappingURL=passed-element-type.d.ts.map

54
types/src/scripts/interfaces/passed-element.d.ts vendored
View file

@ -1,17 +1,5 @@
import { Choices } from './choices';
import { Choice } from './choice';
import { ClassNames } from './class-names';
import { EventType } from './event-type';
import { PassedElementType } from './passed-element-type';
export interface PassedElement extends HTMLElement {
classNames: ClassNames;
element: (HTMLInputElement | HTMLSelectElement) & {
addEventListener<K extends EventType>(type: K, listener: (this: HTMLInputElement | HTMLSelectElement, ev: EventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
};
type: PassedElementType;
isDisabled: boolean;
parentInstance: Choices;
}
import { InputChoice } from './input-choice';
import { EventChoice } from './event-choice';
/**
* Events fired by Choices behave the same as standard events. Each event is triggered on the element passed to Choices (accessible via `this.passedElement`. Arguments are accessible within the `event.detail` object.
*/
@ -21,15 +9,9 @@ export interface EventMap {
*
* **Input types affected:** text, select-one, select-multiple
*
* Arguments: id, value, label, groupValue, keyCode
* Arguments: id, value, label, groupValue
*/
addItem: CustomEvent<{
id: number;
value: string;
label: string;
groupValue: string;
keyCode: number;
}>;
addItem: CustomEvent<EventChoice>;
/**
* Triggered each time an item is removed (programmatically or by the user).
*
@ -37,12 +19,7 @@ export interface EventMap {
*
* Arguments: id, value, label, groupValue
*/
removeItem: CustomEvent<{
id: number;
value: string;
label: string;
groupValue: string;
}>;
removeItem: CustomEvent<EventChoice | undefined>;
/**
* Triggered each time an item is highlighted.
*
@ -50,12 +27,7 @@ export interface EventMap {
*
* Arguments: id, value, label, groupValue
*/
highlightItem: CustomEvent<{
id: number;
value: string;
label: string;
groupValue: string;
}>;
highlightItem: CustomEvent<EventChoice | undefined>;
/**
* Triggered each time an item is unhighlighted.
*
@ -63,12 +35,7 @@ export interface EventMap {
*
* Arguments: id, value, label, groupValue
*/
unhighlightItem: CustomEvent<{
id: number;
value: string;
label: string;
groupValue: string;
}>;
unhighlightItem: CustomEvent<EventChoice | undefined>;
/**
* Triggered each time a choice is selected **by a user**, regardless if it changes the value of the input.
*
@ -77,7 +44,7 @@ export interface EventMap {
* Arguments: choice: Choice
*/
choice: CustomEvent<{
choice: Choice;
choice: InputChoice;
}>;
/**
* Triggered each time an item is added/removed **by a user**.
@ -90,7 +57,7 @@ export interface EventMap {
value: string;
}>;
/**
* Triggered when a user types into an input to search choices.
* Triggered when a user types into an input to search choices. When a search is ended, a search event with an empty value with no resultCount is triggered.
*
* **Input types affected:** select-one, select-multiple
*
@ -123,7 +90,6 @@ export interface EventMap {
* Arguments: el is the choice.passedElement that was affected.
*/
highlightChoice: CustomEvent<{
el: PassedElement;
el: HTMLElement;
}>;
}
//# sourceMappingURL=passed-element.d.ts.map

1
types/src/scripts/interfaces/position-options-type.d.ts vendored
View file

@ -1,2 +1 @@
export type PositionOptionsType = 'auto' | 'top' | 'bottom';
//# sourceMappingURL=position-options-type.d.ts.map

11
types/src/scripts/interfaces/search.d.ts vendored Normal file
View file

@ -0,0 +1,11 @@
export interface SearchResult<T extends object> {
item: T;
score: number;
rank: number;
}
export interface Searcher<T extends object> {
reset(): void;
isEmptyIndex(): boolean;
index(data: T[]): void;
search(needle: string): SearchResult<T>[];
}

16
types/src/scripts/interfaces/state.d.ts vendored
View file

@ -1,10 +1,10 @@
import { Choice } from './choice';
import { Group } from './group';
import { Item } from './item';
import { ChoiceFull } from './choice-full';
import { GroupFull } from './group-full';
export interface State {
choices: Choice[];
groups: Group[];
items: Item[];
loading: boolean;
choices: ChoiceFull[];
groups: GroupFull[];
items: ChoiceFull[];
}
//# sourceMappingURL=state.d.ts.map
export type StateChangeSet = {
[K in keyof State]: boolean;
};

64
types/src/scripts/interfaces/store.d.ts vendored Normal file
View file

@ -0,0 +1,64 @@
import { StateChangeSet, State } from './state';
import { ChoiceFull } from './choice-full';
import { GroupFull } from './group-full';
import { ActionTypes } from './action-type';
export interface AnyAction<A extends ActionTypes = ActionTypes> {
type: A;
}
export interface StateUpdate<T> {
update: boolean;
state: T;
}
export type Reducer<T> = (state: T, action: AnyAction) => StateUpdate<T>;
export type StoreListener = (changes: StateChangeSet) => void;
export interface Store {
dispatch(action: AnyAction): void;
subscribe(onChange: StoreListener): void;
withTxn(func: () => void): void;
reset(): void;
get defaultState(): State;
/**
* Get store object
*/
get state(): State;
/**
* Get items from store
*/
get items(): ChoiceFull[];
/**
* Get highlighted items from store
*/
get highlightedActiveItems(): ChoiceFull[];
/**
* Get choices from store
*/
get choices(): ChoiceFull[];
/**
* Get active choices from store
*/
get activeChoices(): ChoiceFull[];
/**
* Get choices that can be searched (excluding placeholders)
*/
get searchableChoices(): ChoiceFull[];
/**
* Get groups from store
*/
get groups(): GroupFull[];
/**
* Get active groups from store
*/
get activeGroups(): GroupFull[];
/**
* Get loading state from store
*/
inTxn(): boolean;
/**
* Get single choice by it's ID
*/
getChoiceById(id: number): ChoiceFull | undefined;
/**
* Get group by group id
*/
getGroupById(id: number): GroupFull | undefined;
}

3
types/src/scripts/interfaces/string-pre-escaped.d.ts vendored Normal file
View file

@ -0,0 +1,3 @@
export interface StringPreEscaped {
readonly trusted: string;
}

4
types/src/scripts/interfaces/string-untrusted.d.ts vendored Normal file
View file

@ -0,0 +1,4 @@
export interface StringUntrusted {
readonly escaped: string;
readonly raw: string;
}

27
types/src/scripts/interfaces/templates.d.ts vendored Normal file
View file

@ -0,0 +1,27 @@
import { PassedElementType } from './passed-element-type';
import { StringPreEscaped } from './string-pre-escaped';
import { ChoiceFull } from './choice-full';
import { GroupFull } from './group-full';
import { Options } from './options';
export type TemplateOptions = Pick<Options, 'classNames' | 'allowHTML' | 'removeItemButtonAlignLeft' | 'removeItemIconText' | 'removeItemLabelText' | 'searchEnabled' | 'labelId'>;
export declare const NoticeTypes: {
readonly noChoices: "no-choices";
readonly noResults: "no-results";
readonly addChoice: "add-choice";
readonly generic: "";
};
export type NoticeType = (typeof NoticeTypes)[keyof typeof NoticeTypes];
export interface Templates {
containerOuter(options: TemplateOptions, dir: HTMLElement['dir'], isSelectElement: boolean, isSelectOneElement: boolean, searchEnabled: boolean, passedElementType: PassedElementType, labelId: string): HTMLDivElement;
containerInner({ classNames: { containerInner } }: TemplateOptions): HTMLDivElement;
itemList(options: TemplateOptions, isSelectOneElement: boolean): HTMLDivElement;
placeholder(options: TemplateOptions, value: StringPreEscaped | string): HTMLDivElement;
item(options: TemplateOptions, choice: ChoiceFull, removeItemButton: boolean): HTMLDivElement;
choiceList(options: TemplateOptions, isSelectOneElement: boolean): HTMLDivElement;
choiceGroup(options: TemplateOptions, group: GroupFull): HTMLDivElement;
choice(options: TemplateOptions, choice: ChoiceFull, selectText: string): HTMLDivElement;
input(options: TemplateOptions, placeholderValue: string | null): HTMLInputElement;
dropdown(options: TemplateOptions): HTMLDivElement;
notice(options: TemplateOptions, innerText: string, type: NoticeType): HTMLDivElement;
option(choice: ChoiceFull): HTMLOptionElement;
}

10
types/src/scripts/interfaces/types.d.ts vendored
View file

@ -1,9 +1,15 @@
import { StringUntrusted } from './string-untrusted';
import { StringPreEscaped } from './string-pre-escaped';
export declare namespace Types {
type StrToEl = (str: string) => HTMLElement | HTMLInputElement | HTMLOptionElement;
type EscapeForTemplateFn = (allowHTML: boolean, s: StringUntrusted | StringPreEscaped | string) => string;
type StringFunction = () => string;
type NoticeStringFunction = (value: string) => string;
type NoticeStringFunction = (value: string, valueRaw: string) => string;
type NoticeLimitFunction = (maxItemCount: number) => string;
type FilterFunction = (value: string) => boolean;
type ValueCompareFunction = (value1: string, value2: string) => boolean;
interface RecordToCompare {
value?: StringUntrusted | string;
label?: StringUntrusted | string;
}
}
//# sourceMappingURL=types.d.ts.map

9
types/src/scripts/lib/choice-input.d.ts vendored Normal file
View file

@ -0,0 +1,9 @@
import { InputChoice } from '../interfaces/input-choice';
import { InputGroup } from '../interfaces/input-group';
import { GroupFull } from '../interfaces/group-full';
import { ChoiceFull } from '../interfaces/choice-full';
type MappedInputTypeToChoiceType<T extends string | InputChoice | InputGroup> = T extends InputGroup ? GroupFull : ChoiceFull;
export declare const coerceBool: (arg: unknown, defaultValue?: boolean) => boolean;
export declare const stringToHtmlClass: (input: string | string[] | undefined) => string[] | undefined;
export declare const mapInputToChoice: <T extends string | InputChoice | InputGroup>(value: T, allowGroup: boolean) => MappedInputTypeToChoiceType<T>;
export {};

4
types/src/scripts/lib/html-guard-statements.d.ts vendored Normal file
View file

@ -0,0 +1,4 @@
export declare const isHtmlInputElement: (e: Element) => e is HTMLInputElement;
export declare const isHtmlSelectElement: (e: Element) => e is HTMLSelectElement;
export declare const isHtmlOption: (e: Element) => e is HTMLOptionElement;
export declare const isHtmlOptgroup: (e: Element) => e is HTMLOptGroupElement;

38
types/src/scripts/lib/utils.d.ts vendored
View file

@ -1,28 +1,28 @@
import { Choice } from '../interfaces/choice';
import { EventType } from '../interfaces/event-type';
export declare const getRandomNumber: (min: number, max: number) => number;
export declare const generateChars: (length: number) => string;
import { StringUntrusted } from '../interfaces/string-untrusted';
import { StringPreEscaped } from '../interfaces/string-pre-escaped';
import { ChoiceFull } from '../interfaces/choice-full';
import { Types } from '../interfaces/types';
export declare const generateId: (element: HTMLInputElement | HTMLSelectElement, prefix: string) => string;
export declare const getType: (obj: any) => string;
export declare const isType: (type: string, obj: any) => boolean;
export declare const wrap: (element: HTMLElement, wrapper?: HTMLElement) => HTMLElement;
export declare const getAdjacentEl: (startEl: Element, selector: string, direction?: number) => Element;
export declare const getAdjacentEl: (startEl: HTMLElement, selector: string, direction?: number) => HTMLElement | null;
export declare const isScrolledIntoView: (element: HTMLElement, parent: HTMLElement, direction?: number) => boolean;
export declare const sanitise: <T>(value: string | T) => string | T;
export declare const sanitise: <T>(value: T | StringUntrusted | StringPreEscaped | string) => T | string;
export declare const strToEl: (str: string) => Element;
interface RecordToCompare {
value: string;
label?: string;
}
export declare const sortByAlpha: ({ value, label }: RecordToCompare, { value: value2, label: label2 }: RecordToCompare) => number;
export declare const sortByScore: (a: Pick<Choice, 'score'>, b: Pick<Choice, 'score'>) => number;
export declare const resolveNoticeFunction: (fn: Types.NoticeStringFunction | string, value: string) => string;
export declare const resolveStringFunction: (fn: Types.StringFunction | string) => string;
export declare const unwrapStringForRaw: (s?: StringUntrusted | StringPreEscaped | string) => string;
export declare const unwrapStringForEscaped: (s?: StringUntrusted | StringPreEscaped | string) => string;
export declare const escapeForTemplate: (allowHTML: boolean, s: StringUntrusted | StringPreEscaped | string) => string;
export declare const setElementHtml: (el: HTMLElement, allowHtml: boolean, html: StringUntrusted | StringPreEscaped | string) => void;
export declare const sortByAlpha: ({ value, label }: Types.RecordToCompare, { value: value2, label: label2 }: Types.RecordToCompare) => number;
export declare const sortByScore: (a: Pick<ChoiceFull, "score">, b: Pick<ChoiceFull, "score">) => number;
export declare const sortByRank: (a: Pick<ChoiceFull, "rank">, b: Pick<ChoiceFull, "rank">) => number;
export declare const dispatchEvent: (element: HTMLElement, type: EventType, customArgs?: object | null) => boolean;
export declare const existsInArray: (array: any[], value: string, key?: string) => boolean;
export declare const cloneObject: (obj: object) => object;
export declare const cloneObject: <T>(obj: T) => T;
/**
* Returns an array of keys present on the first but missing on the second object
*/
export declare const diff: (a: Record<string, any>, b: Record<string, any>) => string[];
export declare const parseCustomProperties: (customProperties: any) => any;
export {};
//# sourceMappingURL=utils.d.ts.map
export declare const getClassNames: (ClassNames: Array<string> | string) => Array<string>;
export declare const getClassNamesSelector: (option: string | Array<string> | null) => string;
export declare const parseCustomProperties: (customProperties?: string) => object | string;

14
types/src/scripts/reducers/choices.d.ts vendored
View file

@ -1,8 +1,8 @@
import { AddChoiceAction, FilterChoicesAction, ActivateChoicesAction, ClearChoicesAction } from '../actions/choices';
import { AddItemAction, RemoveItemAction } from '../actions/items';
import { Choice } from '../interfaces/choice';
export declare const defaultState: never[];
type ActionTypes = AddChoiceAction | FilterChoicesAction | ActivateChoicesAction | ClearChoicesAction | AddItemAction | RemoveItemAction | Record<string, never>;
export default function choices(state?: Choice[], action?: ActionTypes): Choice[];
import { State } from '../interfaces';
import { StateUpdate } from '../interfaces/store';
import { ChoiceActions } from '../actions/choices';
import { ItemActions } from '../actions/items';
type ActionTypes = ChoiceActions | ItemActions;
type StateType = State['choices'];
export default function choices(s: StateType, action: ActionTypes): StateUpdate<StateType>;
export {};
//# sourceMappingURL=choices.d.ts.map

13
types/src/scripts/reducers/groups.d.ts vendored
View file

@ -1,9 +1,8 @@
import { AddGroupAction } from '../actions/groups';
import { ClearChoicesAction } from '../actions/choices';
import { Group } from '../interfaces/group';
import { GroupActions } from '../actions/groups';
import { State } from '../interfaces/state';
export declare const defaultState: never[];
type ActionTypes = AddGroupAction | ClearChoicesAction | Record<string, never>;
export default function groups(state?: Group[], action?: ActionTypes): State['groups'];
import { StateUpdate } from '../interfaces/store';
import { ChoiceActions } from '../actions/choices';
type ActionTypes = ChoiceActions | GroupActions;
type StateType = State['groups'];
export default function groups(s: StateType, action: ActionTypes): StateUpdate<StateType>;
export {};
//# sourceMappingURL=groups.d.ts.map

12
types/src/scripts/reducers/items.d.ts vendored
View file

@ -1,8 +1,8 @@
import { AddItemAction, RemoveItemAction, HighlightItemAction } from '../actions/items';
import { Item } from '../interfaces/item';
import { ItemActions } from '../actions/items';
import { State } from '../interfaces/state';
export declare const defaultState: never[];
type ActionTypes = AddItemAction | RemoveItemAction | HighlightItemAction | Record<string, never>;
export default function items(state?: Item[], action?: ActionTypes): State['items'];
import { ChoiceActions } from '../actions/choices';
import { StateUpdate } from '../interfaces/store';
type ActionTypes = ChoiceActions | ItemActions;
type StateType = State['items'];
export default function items(s: StateType, action: ActionTypes): StateUpdate<StateType>;
export {};
//# sourceMappingURL=items.d.ts.map

14
types/src/scripts/search/fuse.d.ts vendored Normal file
View file

@ -0,0 +1,14 @@
import { default as FuseFull, IFuseOptions } from 'fuse.js';
import { default as FuseBasic } from 'fuse.js/basic';
import { Options } from '../interfaces/options';
import { Searcher, SearchResult } from '../interfaces/search';
export declare class SearchByFuse<T extends object> implements Searcher<T> {
_fuseOptions: IFuseOptions<T>;
_haystack: T[];
_fuse: FuseFull<T> | FuseBasic<T> | undefined;
constructor(config: Options);
index(data: T[]): void;
reset(): void;
isEmptyIndex(): boolean;
search(needle: string): SearchResult<T>[];
}

3
types/src/scripts/search/index.d.ts vendored Normal file
View file

@ -0,0 +1,3 @@
import { Options } from '../interfaces';
import { Searcher } from '../interfaces/search';
export declare function getSearcher<T extends object>(config: Options): Searcher<T>;

11
types/src/scripts/search/prefix-filter.d.ts vendored Normal file
View file

@ -0,0 +1,11 @@
import { Options } from '../interfaces';
import { Searcher, SearchResult } from '../interfaces/search';
export declare class SearchByPrefixFilter<T extends object> implements Searcher<T> {
_fields: string[];
_haystack: T[];
constructor(config: Options);
index(data: T[]): void;
reset(): void;
isEmptyIndex(): boolean;
search(_needle: string): SearchResult<T>[];
}

67
types/src/scripts/store/store.d.ts vendored
View file

@ -1,74 +1,57 @@
import { Store as IStore, AnyAction } from 'redux';
import { Choice } from '../interfaces/choice';
import { Group } from '../interfaces/group';
import { Item } from '../interfaces/item';
import { State } from '../interfaces/state';
export default class Store {
_store: IStore;
constructor();
/**
* Subscribe store to function call (wrapped Redux method)
*/
subscribe(onChange: () => void): void;
/**
* Dispatch event to store (wrapped Redux method)
*/
import { AnyAction, Store as IStore, StoreListener } from '../interfaces/store';
import { StateChangeSet, State } from '../interfaces/state';
import { ChoiceFull } from '../interfaces/choice-full';
import { GroupFull } from '../interfaces/group-full';
export default class Store implements IStore {
_state: State;
_listeners: StoreListener[];
_txn: number;
_changeSet?: StateChangeSet;
get defaultState(): State;
changeSet(init: boolean): StateChangeSet;
reset(): void;
subscribe(onChange: StoreListener): void;
dispatch(action: AnyAction): void;
withTxn(func: () => void): void;
/**
* Get store object (wrapping Redux method)
* Get store object
*/
get state(): State;
/**
* Get items from store
*/
get items(): Item[];
/**
* Get active items from store
*/
get activeItems(): Item[];
get items(): ChoiceFull[];
/**
* Get highlighted items from store
*/
get highlightedActiveItems(): Item[];
get highlightedActiveItems(): ChoiceFull[];
/**
* Get choices from store
*/
get choices(): Choice[];
get choices(): ChoiceFull[];
/**
* Get active choices from store
*/
get activeChoices(): Choice[];
/**
* Get selectable choices from store
*/
get selectableChoices(): Choice[];
get activeChoices(): ChoiceFull[];
/**
* Get choices that can be searched (excluding placeholders)
*/
get searchableChoices(): Choice[];
/**
* Get placeholder choice from store
*/
get placeholderChoice(): Choice | undefined;
get searchableChoices(): ChoiceFull[];
/**
* Get groups from store
*/
get groups(): Group[];
get groups(): GroupFull[];
/**
* Get active groups from store
*/
get activeGroups(): Group[];
/**
* Get loading state from store
*/
isLoading(): boolean;
get activeGroups(): GroupFull[];
inTxn(): boolean;
/**
* Get single choice by it's ID
*/
getChoiceById(id: string): Choice | undefined;
getChoiceById(id: number): ChoiceFull | undefined;
/**
* Get group by group id
*/
getGroupById(id: number): Group | undefined;
getGroupById(id: number): GroupFull | undefined;
}
//# sourceMappingURL=store.d.ts.map

25
types/src/scripts/templates.d.ts vendored
View file

@ -1,25 +1,8 @@
/**
* Helpers to create HTML elements used by Choices
* Can be overridden by providing `callbackOnCreateTemplates` option
* Can be overridden by providing `callbackOnCreateTemplates` option.
* `Choices.defaults.templates` allows access to the default template methods from `callbackOnCreateTemplates`
*/
import { Choice } from './interfaces/choice';
import { Group } from './interfaces/group';
import { Item } from './interfaces/item';
import { PassedElementType } from './interfaces/passed-element-type';
type TemplateOptions = Record<'classNames' | 'allowHTML', any>;
declare const templates: {
containerOuter({ classNames: { containerOuter } }: TemplateOptions, dir: HTMLElement['dir'], isSelectElement: boolean, isSelectOneElement: boolean, searchEnabled: boolean, passedElementType: PassedElementType, labelId: string): HTMLDivElement;
containerInner({ classNames: { containerInner }, }: TemplateOptions): HTMLDivElement;
itemList({ classNames: { list, listSingle, listItems } }: TemplateOptions, isSelectOneElement: boolean): HTMLDivElement;
placeholder({ allowHTML, classNames: { placeholder } }: TemplateOptions, value: string): HTMLDivElement;
item({ allowHTML, classNames: { item, button, highlightedState, itemSelectable, placeholder, }, }: TemplateOptions, { id, value, label, customProperties, active, disabled, highlighted, placeholder: isPlaceholder, }: Item, removeItemButton: boolean): HTMLDivElement;
choiceList({ classNames: { list } }: TemplateOptions, isSelectOneElement: boolean): HTMLDivElement;
choiceGroup({ allowHTML, classNames: { group, groupHeading, itemDisabled }, }: TemplateOptions, { id, value, disabled }: Group): HTMLDivElement;
choice({ allowHTML, classNames: { item, itemChoice, itemSelectable, selectedState, itemDisabled, placeholder, }, }: TemplateOptions, { id, value, label, groupId, elementId, disabled: isDisabled, selected: isSelected, placeholder: isPlaceholder, }: Choice, selectText: string): HTMLDivElement;
input({ classNames: { input, inputCloned } }: TemplateOptions, placeholderValue: string): HTMLInputElement;
dropdown({ classNames: { list, listDropdown }, }: TemplateOptions): HTMLDivElement;
notice({ allowHTML, classNames: { item, itemChoice, noResults, noChoices }, }: TemplateOptions, innerText: string, type?: 'no-choices' | 'no-results' | ''): HTMLDivElement;
option({ label, value, customProperties, active, disabled, }: Item): HTMLOptionElement;
};
import { Templates as TemplatesInterface } from './interfaces/templates';
declare const templates: TemplatesInterface;
export default templates;
//# sourceMappingURL=templates.d.ts.map