slim-select 2.8.2 → 2.9.1

package/.prettierignore

@@ -0,0 +1 @@
+**/dist

package/.prettierrc

@@ -1,6 +1,7 @@
 {
   "semi": false,
   "singleQuote": true,
-  "trailingComma": "all",
-  "printWidth": 120
-}
+  "trailingComma": "none",
+  "printWidth": 120,
+  "tabWidth": 2
+}

package/README.md

@@ -5,6 +5,7 @@
 Advanced select dropdown
 
 [![NPM Downloads](https://img.shields.io/npm/dt/slim-select.svg)](https://www.npmjs.com/package/slim-select)
+![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/brianvoe/slim-select/jest.yml?logo=jest&label=unit%20tests)
 
 ## Support
 
@@ -14,7 +15,7 @@ Advanced select dropdown
 
 ## [Documentation and Examples](https://slimselectjs.com)
 
-See [website](https://slimselectjs.com) for the full list of settings, methods and event callbacks
+See [website](https://slimselectjs.com) for the full list of [settings](https://slimselectjs.com/settings), [methods](https://slimselectjs.com/methods) and [event callbacks](https://slimselectjs.com/events)
 
 ![](https://raw.githubusercontent.com/brianvoe/slim-select/master/slimselect.gif)
 
@@ -133,6 +134,7 @@ new SlimSelect({
     disabled: false,
     alwaysOpen: false,
     showSearch: true,
+    focusSearch: true,
     searchPlaceholder: 'Search',
     searchText: 'No Results',
     searchingText: 'Searching...',
@@ -150,6 +152,7 @@ new SlimSelect({
     timeoutDelay: 200,
     maxValuesShown: 20,
     maxValuesMessage: '{number} selected',
+    addableText: 'Press "Enter" to add {value}',
   },
 })
 ```
@@ -165,7 +168,7 @@ new SlimSelect({
   events: {
     search: (searchValue: string, currentData: DataArray) => Promise<DataArrayPartial> | DataArrayPartial
     searchFilter: (option: Option, search: string) => boolean
-    addable: (value: string) => Promise<OptionOptional | string> | OptionOptional | string
+    addable: (value: string) => Promise<OptionOptional | string> | OptionOptional | string | Error
     beforeChange: (newVal: Option[], oldVal: Option[]) => boolean | void
     afterChange: (newVal: Option[]) => void
     beforeOpen: () => void

package/dist/classes.d.ts

@@ -0,0 +1,43 @@
+export default class CssClasses {
+    main: string;
+    placeholder: string;
+    values: string;
+    single: string;
+    max: string;
+    value: string;
+    valueText: string;
+    valueDelete: string;
+    valueOut: string;
+    deselect: string;
+    deselectPath: string;
+    arrow: string;
+    arrowClose: string;
+    arrowOpen: string;
+    content: string;
+    openAbove: string;
+    openBelow: string;
+    search: string;
+    searchHighlighter: string;
+    searching: string;
+    addable: string;
+    addablePath: string;
+    list: string;
+    optgroup: string;
+    optgroupLabel: string;
+    optgroupLabelText: string;
+    optgroupActions: string;
+    optgroupSelectAll: string;
+    optgroupSelectAllBox: string;
+    optgroupSelectAllCheck: string;
+    optgroupClosable: string;
+    option: string;
+    optionDelete: string;
+    highlighted: string;
+    open: string;
+    close: string;
+    selected: string;
+    error: string;
+    disabled: string;
+    hide: string;
+    constructor(classes?: Partial<CssClasses>);
+}

package/dist/helpers.d.ts

@@ -1,5 +1,5 @@
 export declare function generateID(): string;
-export declare function hasClassInTree(element: HTMLElement, className: string): any;
+export declare function hasClassInTree(element: HTMLElement, className: string): HTMLElement | null;
 export declare function debounce<T extends (...args: any[]) => void>(func: T, wait?: number, immediate?: boolean): () => void;
 export declare function isEqual(a: any, b: any): boolean;
 export declare function kebabCase(str: string): string;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import CssClasses from './classes';
 import Render from './render';
 import Select from './select';
 import Settings, { SettingsPartial } from './settings';
@@ -6,12 +7,13 @@ export interface Config {
     select: string | Element;
     data?: DataArrayPartial;
     settings?: SettingsPartial;
+    cssClasses?: Partial<CssClasses>;
     events?: Events;
 }
 export interface Events {
     search?: (searchValue: string, currentData: DataArray) => Promise<DataArrayPartial> | DataArrayPartial;
     searchFilter?: (option: Option, search: string) => boolean;
-    addable?: (value: string) => Promise<OptionOptional | string> | OptionOptional | string | false | null | undefined;
+    addable?: (value: string) => Promise<OptionOptional | string> | OptionOptional | string | false | null | undefined | Error;
     beforeChange?: (newVal: Option[], oldVal: Option[]) => boolean | void;
     afterChange?: (newVal: Option[]) => void;
     beforeOpen?: () => void;
@@ -23,6 +25,7 @@ export interface Events {
 export default class SlimSelect {
     selectEl: HTMLSelectElement;
     settings: Settings;
+    cssClasses: CssClasses;
     select: Select;
     store: Store;
     render: Render;
@@ -33,7 +36,7 @@ export default class SlimSelect {
     getData(): DataArray;
     setData(data: DataArrayPartial): void;
     getSelected(): string[];
-    setSelected(value: string | string[], runAfterChange?: boolean): void;
+    setSelected(values: string | string[], runAfterChange?: boolean): void;
     addOption(option: OptionOptional): void;
     open(): void;
     close(eventType?: string | null): void;

package/dist/render.d.ts

@@ -1,9 +1,10 @@
 import Settings from './settings';
 import Store, { DataArray, Option, OptionOptional } from './store';
+import CssClasses from './classes';
 export interface Callbacks {
     open: () => void;
     close: () => void;
-    addable?: (value: string) => Promise<OptionOptional | string> | OptionOptional | string | false | undefined | null;
+    addable?: (value: string) => Promise<OptionOptional | string> | OptionOptional | string | false | undefined | null | Error;
     setSelected: (value: string | string[], runAfterChange: boolean) => void;
     addOption: (option: Option) => void;
     search: (search: string) => void;
@@ -43,49 +44,8 @@ export default class Render {
     callbacks: Callbacks;
     main: Main;
     content: Content;
-    classes: {
-        main: string;
-        placeholder: string;
-        values: string;
-        single: string;
-        max: string;
-        value: string;
-        valueText: string;
-        valueDelete: string;
-        valueOut: string;
-        deselect: string;
-        deselectPath: string;
-        arrow: string;
-        arrowClose: string;
-        arrowOpen: string;
-        content: string;
-        openAbove: string;
-        openBelow: string;
-        search: string;
-        searchHighlighter: string;
-        searching: string;
-        addable: string;
-        addablePath: string;
-        list: string;
-        optgroup: string;
-        optgroupLabel: string;
-        optgroupLabelText: string;
-        optgroupActions: string;
-        optgroupSelectAll: string;
-        optgroupSelectAllBox: string;
-        optgroupSelectAllCheck: string;
-        optgroupClosable: string;
-        option: string;
-        optionDelete: string;
-        highlighted: string;
-        open: string;
-        close: string;
-        selected: string;
-        error: string;
-        disabled: string;
-        hide: string;
-    };
-    constructor(settings: Required<Settings>, store: Store, callbacks: Callbacks);
+    classes: CssClasses;
+    constructor(settings: Required<Settings>, classes: Required<CssClasses>, store: Store, callbacks: Callbacks);
     enable(): void;
     disable(): void;
     open(): void;

package/dist/select.d.ts

@@ -1,7 +1,7 @@
 import { DataArray, DataArrayPartial, Optgroup, OptgroupOptional, Option } from './store';
 export default class Select {
     select: HTMLSelectElement;
-    onValueChange?: (value: string[]) => void;
+    onValueChange?: (value: Option[]) => void;
     onClassChange?: (classes: string[]) => void;
     onDisabledChange?: (disabled: boolean) => void;
     onOptionsChange?: (data: DataArrayPartial) => void;
@@ -18,8 +18,10 @@ export default class Select {
     getData(): DataArrayPartial;
     getDataFromOptgroup(optgroup: HTMLOptGroupElement): OptgroupOptional;
     getDataFromOption(option: HTMLOptionElement): Option;
+    getSelectedOptions(): Option[];
     getSelectedValues(): string[];
-    setSelected(value: string[]): void;
+    setSelected(ids: string[]): void;
+    setSelectedByValue(values: string[]): void;
     updateSelect(id?: string, style?: string, classes?: string[]): void;
     updateOptions(data: DataArray): void;
     createOptgroup(optgroup: Optgroup): HTMLOptGroupElement;

package/dist/settings.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 export type SettingsPartial = Partial<Settings>;
 export default class Settings {
     id: string;
@@ -11,6 +10,7 @@ export default class Settings {
     disabled: boolean;
     alwaysOpen: boolean;
     showSearch: boolean;
+    focusSearch: boolean;
     ariaLabel: string;
     searchPlaceholder: string;
     searchText: string;
@@ -30,5 +30,6 @@ export default class Settings {
     timeoutDelay: number;
     maxValuesShown: number;
     maxValuesMessage: string;
+    addableText: string;
     constructor(settings?: SettingsPartial);
 }