treeselectjs 0.12.0 → 0.12.1

package/README.md

@@ -9,8 +9,8 @@ A multi-select js component with nested options.
 - Typescript support
 
 Build data:
-- treeselectjs.mjs  51.09 kB │ gzip: 11.58 kB
-- treeselectjs.umd.js  41.45 kB │ gzip: 10.54 kB
+- treeselectjs.mjs  48.50 kB │ gzip: 10.97 kB
+- treeselectjs.umd.js  39.65 kB │ gzip: 9.98 kB
 - treeselectjs.css   6.93 kB │ gzip:  1.38 kB
 
 **Live Demo:** https://dipson88.github.io/treeselectjs/
@@ -30,8 +30,8 @@ import Treeselect from 'treeselectjs'
 
 Import treeselectjs (UMD)
 ```
-<script src="https://cdn.jsdelivr.net/npm/treeselectjs@0.12.0/dist/treeselectjs.umd.js"></script>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/treeselectjs@0.12.0/dist/treeselectjs.css" />
+<script src="https://cdn.jsdelivr.net/npm/treeselectjs@0.12.1/dist/treeselectjs.umd.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/treeselectjs@0.12.1/dist/treeselectjs.css" />
 ...
 <script>
   ...
@@ -150,6 +150,7 @@ Name  | Type (default) | Description
 ------------- | ------------- | -------------
 **showTags**  | Boolean (true) | Selected values look like tags. The false value shows results as '{count} elements selected'. You can change text if you use `tagsCountText` prop. For one selected element, you will see a name of this element.
 **tagsCountText**  | String ('elements selected') | This text will be shown if you use 'showTags'. This text will be inserted after the count of the selected elements - ```'{count} {tagsCountText}'```.
+**tagsSortFn** | `(a: TagsSortItem, b: TagsSortItem) => number` \| `null` (null) | Defines the sorting order for tags in the input field.<br>`TagsSortItem` - `{ value: ValueOptionType, name: string }`.
 **clearable**  | Boolean (true) | Clear icon is available.
 **searchable**  | Boolean (true) | Search is available.
 **placeholder**  | String ('Search...') | Placeholder text.

package/dist/treeselectjs.d.ts

@@ -20,6 +20,7 @@ declare interface ITreeselect {
     alwaysOpen: boolean;
     showTags: boolean;
     tagsCountText: string;
+    tagsSortFn: TagsSortFnType;
     clearable: boolean;
     searchable: boolean;
     placeholder: string;
@@ -67,6 +68,7 @@ export declare interface ITreeselectParams {
     alwaysOpen?: boolean;
     showTags?: boolean;
     tagsCountText?: string;
+    tagsSortFn?: TagsSortFnType;
     clearable?: boolean;
     searchable?: boolean;
     placeholder?: string;
@@ -104,6 +106,13 @@ export declare type OptionType = {
     children: OptionType[];
 };
 
+declare type TagsSortFnType = ((itemA: TagsSortItem, itemB: TagsSortItem) => number) | null;
+
+declare type TagsSortItem = {
+    value: ValueOptionType;
+    name: string;
+};
+
 declare class Treeselect implements ITreeselect {
     #private;
     parentHtmlContainer: HTMLElement;
@@ -114,6 +123,7 @@ declare class Treeselect implements ITreeselect {
     alwaysOpen: boolean;
     showTags: boolean;
     tagsCountText: string;
+    tagsSortFn: TagsSortFnType;
     clearable: boolean;
     searchable: boolean;
     placeholder: string;
@@ -147,7 +157,7 @@ declare class Treeselect implements ITreeselect {
     isListOpened: boolean;
     selectedName: string;
     srcElement: HTMLElement | null;
-    constructor({ parentHtmlContainer, value, options, openLevel, appendToBody, alwaysOpen, showTags, tagsCountText, clearable, searchable, placeholder, grouped, isGroupedValue, listSlotHtmlComponent, disabled, emptyText, staticList, id, ariaLabel, isSingleSelect, showCount, disabledBranchNode, direction, expandSelected, saveScrollPosition, isIndependentNodes, rtl, listClassName, iconElements, inputCallback, openCallback, closeCallback, nameChangeCallback, searchCallback, openCloseGroupCallback }: ITreeselectParams);
+    constructor({ parentHtmlContainer, value, options, openLevel, appendToBody, alwaysOpen, showTags, tagsCountText, tagsSortFn, clearable, searchable, placeholder, grouped, isGroupedValue, listSlotHtmlComponent, disabled, emptyText, staticList, id, ariaLabel, isSingleSelect, showCount, disabledBranchNode, direction, expandSelected, saveScrollPosition, isIndependentNodes, rtl, listClassName, iconElements, inputCallback, openCallback, closeCallback, nameChangeCallback, searchCallback, openCloseGroupCallback }: ITreeselectParams);
     mount(): void;
     updateValue(newValue: ValueInputType): void;
     destroy(): void;