@rescui/select 0.20.1 → 0.21.1

package/lib/_virtual/index.css.js

@@ -1,16 +1,16 @@
 var styles = {
-  "icon": "_icon_622m6a_4",
-  "sizeXS": "_sizeXS_622m6a_14",
-  "sizeS": "_sizeS_622m6a_18",
-  "sizeM": "_sizeM_622m6a_22",
-  "sizeL": "_sizeL_622m6a_26",
-  "light": "_light_622m6a_30",
-  "dark": "_dark_622m6a_34",
-  "allVariants": "_allVariants_622m6a_48",
-  "variant16": "_variant16_622m6a_53",
-  "variant20": "_variant20_622m6a_54",
-  "variant24": "_variant24_622m6a_55",
-  "variant28": "_variant28_622m6a_58"
+  "icon": "_icon_g46ng3_4",
+  "sizeXS": "_sizeXS_g46ng3_14",
+  "sizeS": "_sizeS_g46ng3_18",
+  "sizeM": "_sizeM_g46ng3_22",
+  "sizeL": "_sizeL_g46ng3_26",
+  "light": "_light_g46ng3_30",
+  "dark": "_dark_g46ng3_34",
+  "allVariants": "_allVariants_g46ng3_48",
+  "variant16": "_variant16_g46ng3_53",
+  "variant20": "_variant20_g46ng3_54",
+  "variant24": "_variant24_g46ng3_55",
+  "variant28": "_variant28_g46ng3_58"
 };
 
 export { styles as default };

package/lib/hooks/use-options.d.ts

@@ -3,7 +3,8 @@ import type { SelectOptionOrGroup, SelectOption, ListBoxItem } from '../types';
 /**
  * Convert an array of options with possible groups to the flat array of options, stripping them of the groups.
  * Also creating a list for ListBox component with indexes and keys.
- * Supports filtering by returning the setFilterString function.
+ * Supports filtering by returning the setFilterString function: options that
+ * contain the filter string are kept, the ones starting with it go first.
  * @param options
  */
 export declare const useOptions: (options: SelectOptionOrGroup[]) => {

package/lib/hooks/use-options.js

@@ -4,20 +4,92 @@ import { isOptionAGroup } from '../utils/is-option-a-group.js';
 import { getTextFromNodes } from '../utils/get-text-from-nodes.js';
 import { getOptionValue } from '../utils/get-option-value.js';
 
-const createFilter = substring => {
+const RANK_ANY = 0;
+const RANK_LABEL_START = 0;
+const RANK_WORD_START = 1;
+const RANK_SUBSTRING = 2;
+const WORD_CHAR = /[\p{L}\p{N}]/u;
+const createRankFn = substring => {
   if (substring.length === 0) {
-    return () => true;
+    return () => RANK_ANY;
   }
   const lowerSubstring = substring.toLowerCase();
-  return string => {
-    return string.toLowerCase().includes(lowerSubstring);
+  return label => {
+    const lowerLabel = label.toLowerCase();
+    let matchIndex = lowerLabel.indexOf(lowerSubstring);
+    if (matchIndex === -1) {
+      return null;
+    }
+    if (matchIndex === 0) {
+      return RANK_LABEL_START;
+    }
+    while (matchIndex !== -1) {
+      if (!WORD_CHAR.test(lowerLabel[matchIndex - 1])) {
+        return RANK_WORD_START;
+      }
+      matchIndex = lowerLabel.indexOf(lowerSubstring, matchIndex + 1);
+    }
+    return RANK_SUBSTRING;
   };
 };
-const processOptions = (options, filterFn) => {
+const rankOptions = (options, rankFn) => {
+  const ranked = [];
+  options.forEach(option => {
+    const rank = rankFn(getTextFromNodes(option.label));
+    if (rank !== null) {
+      ranked.push({
+        option,
+        rank
+      });
+    }
+  });
+  // Array.prototype.sort is stable, so the original order is kept within a rank
+  return ranked.sort((a, b) => a.rank - b.rank);
+};
+const processOptions = (options, rankFn) => {
   const flattenedOptions = [];
   const listBoxItems = [];
+  // Filter and rank first: options inside a group are sorted by their rank,
+  // top-level entries (options and groups) are sorted by their best rank.
+  const rankedEntries = [];
+  options.forEach((optionOrGroup, arrayIndex) => {
+    if (isOptionAGroup(optionOrGroup)) {
+      const group = optionOrGroup;
+      if (!group.options || group.options.length === 0) {
+        return;
+      }
+      const rankedGroupOptions = rankOptions(group.options, rankFn);
+      if (rankedGroupOptions.length > 0) {
+        rankedEntries.push({
+          type: 'group',
+          group,
+          arrayIndex,
+          options: rankedGroupOptions.map(_ref => {
+            let {
+              option
+            } = _ref;
+            return option;
+          }),
+          rank: rankedGroupOptions[0].rank
+        });
+      }
+      return;
+    }
+    const option = optionOrGroup;
+    const rank = rankFn(getTextFromNodes(option.label));
+    if (rank !== null) {
+      rankedEntries.push({
+        type: 'option',
+        option,
+        rank
+      });
+    }
+  });
+  rankedEntries.sort((a, b) => a.rank - b.rank);
+  // Indexes are assigned after sorting to match the order of flattenedOptions
   let index = 0;
   const createOptionItem = option => {
+    flattenedOptions.push(option);
     return {
       ...option,
       index: index++,
@@ -25,12 +97,12 @@ const processOptions = (options, filterFn) => {
       key: getOptionValue(option)
     };
   };
-  options.forEach((optionOrGroup, arrayIndex) => {
-    if (isOptionAGroup(optionOrGroup)) {
-      const group = optionOrGroup;
-      if (!group.options || group.options.length === 0) {
-        return;
-      }
+  rankedEntries.forEach(entry => {
+    if (entry.type === 'group') {
+      const {
+        group,
+        arrayIndex
+      } = entry;
       // Render as Group (with or without label)
       const groupLabelText = group.label ? getTextFromNodes(group.label) : '';
       // Use a special prefix that's unlikely to collide with user values
@@ -38,24 +110,13 @@ const processOptions = (options, filterFn) => {
       const listBoxGroupItem = {
         ...group,
         type: 'group',
-        options: [],
+        options: entry.options.map(createOptionItem),
         key: groupKey
       };
-      group.options.forEach(option => {
-        if (filterFn(getTextFromNodes(option.label))) {
-          flattenedOptions.push(option);
-          listBoxGroupItem.options.push(createOptionItem(option));
-        }
-      });
-      if (listBoxGroupItem.options.length > 0) {
-        listBoxItems.push(listBoxGroupItem);
-      }
+      listBoxItems.push(listBoxGroupItem);
       return;
     }
-    if (filterFn(getTextFromNodes(optionOrGroup.label))) {
-      flattenedOptions.push(optionOrGroup);
-      listBoxItems.push(createOptionItem(optionOrGroup));
-    }
+    listBoxItems.push(createOptionItem(entry.option));
   });
   return {
     flattenedOptions,
@@ -65,7 +126,8 @@ const processOptions = (options, filterFn) => {
 /**
  * Convert an array of options with possible groups to the flat array of options, stripping them of the groups.
  * Also creating a list for ListBox component with indexes and keys.
- * Supports filtering by returning the setFilterString function.
+ * Supports filtering by returning the setFilterString function: options that
+ * contain the filter string are kept, the ones starting with it go first.
  * @param options
  */
 const useOptions = options => {
@@ -73,18 +135,18 @@ const useOptions = options => {
   const [filterString, setFilterString] = useState("");
   let t0;
   if ($[0] !== filterString) {
-    t0 = createFilter(filterString);
+    t0 = createRankFn(filterString);
     $[0] = filterString;
     $[1] = t0;
   } else {
     t0 = $[1];
   }
-  const filterFn = t0;
+  const rankFn = t0;
   let t1;
-  if ($[2] !== filterFn || $[3] !== options) {
-    t1 = processOptions(options, filterFn);
-    $[2] = filterFn;
-    $[3] = options;
+  if ($[2] !== options || $[3] !== rankFn) {
+    t1 = processOptions(options, rankFn);
+    $[2] = options;
+    $[3] = rankFn;
     $[4] = t1;
   } else {
     t1 = $[4];