@ultraviolet/ui 2.0.0-beta.6 → 2.0.0-beta.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Popup/index.cjs +4 -3
- package/dist/components/Popup/index.d.ts +4 -0
- package/dist/components/Popup/index.js +5 -4
- package/dist/components/SelectInputV2/SearchBarDropdown.cjs +16 -8
- package/dist/components/SelectInputV2/SearchBarDropdown.d.ts +3 -1
- package/dist/components/SelectInputV2/SearchBarDropdown.js +17 -9
- package/dist/components/SelectInputV2/SelectBar.cjs +158 -62
- package/dist/components/SelectInputV2/SelectBar.d.ts +4 -20
- package/dist/components/SelectInputV2/SelectBar.js +155 -59
- package/dist/components/SelectInputV2/types.cjs +0 -5
- package/dist/components/SelectInputV2/types.d.ts +0 -4
- package/dist/components/SelectInputV2/types.js +1 -6
- package/dist/utils/searchAlgorithm.cjs +30 -0
- package/dist/utils/searchAlgorithm.d.ts +12 -0
- package/dist/utils/searchAlgorithm.js +30 -0
- package/package.json +2 -2
|
@@ -3,6 +3,7 @@ import { jsx } from "@emotion/react/jsx-runtime";
|
|
|
3
3
|
import _styled from "@emotion/styled/base";
|
|
4
4
|
import { SearchIcon } from "@ultraviolet/icons";
|
|
5
5
|
import { useRef, useEffect } from "react";
|
|
6
|
+
import { isFuzzyMatch, normalizeString } from "../../utils/searchAlgorithm.js";
|
|
6
7
|
import { TextInputV2 } from "../TextInputV2/index.js";
|
|
7
8
|
import { useSelectInput } from "./SelectInputProvider.js";
|
|
8
9
|
const StyledInput = /* @__PURE__ */ _styled(TextInputV2, process.env.NODE_ENV === "production" ? {
|
|
@@ -18,11 +19,17 @@ const StyledInput = /* @__PURE__ */ _styled(TextInputV2, process.env.NODE_ENV ==
|
|
|
18
19
|
theme
|
|
19
20
|
}) => theme.space[2], ";padding-right:", ({
|
|
20
21
|
theme
|
|
21
|
-
}) => theme.space[2], ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
22
|
-
const
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
22
|
+
}) => theme.space[2], ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NlbGVjdElucHV0VjIvU2VhcmNoQmFyRHJvcGRvd24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCdUMiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvdWkvc3JjL2NvbXBvbmVudHMvU2VsZWN0SW5wdXRWMi9TZWFyY2hCYXJEcm9wZG93bi50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBTZWFyY2hJY29uIH0gZnJvbSAnQHVsdHJhdmlvbGV0L2ljb25zJ1xuaW1wb3J0IHR5cGUgeyBEaXNwYXRjaCwgU2V0U3RhdGVBY3Rpb24gfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IHVzZUVmZmVjdCwgdXNlUmVmIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBpc0Z1enp5TWF0Y2gsIG5vcm1hbGl6ZVN0cmluZyB9IGZyb20gJy4uLy4uL3V0aWxzL3NlYXJjaEFsZ29yaXRobSdcbmltcG9ydCB7IFRleHRJbnB1dFYyIH0gZnJvbSAnLi4vVGV4dElucHV0VjInXG5pbXBvcnQgeyB1c2VTZWxlY3RJbnB1dCB9IGZyb20gJy4vU2VsZWN0SW5wdXRQcm92aWRlcidcbmltcG9ydCB0eXBlIHsgRGF0YVR5cGUsIE9wdGlvblR5cGUgfSBmcm9tICcuL3R5cGVzJ1xuXG50eXBlIFNlYXJjaEJhclByb3BzID0ge1xuICBwbGFjZWhvbGRlcjogc3RyaW5nXG4gIGRpc3BsYXllZE9wdGlvbnM6IERhdGFUeXBlXG4gIHNldFNlYXJjaEJhckFjdGl2ZTogRGlzcGF0Y2g8U2V0U3RhdGVBY3Rpb248Ym9vbGVhbj4+XG59XG5cbmNvbnN0IFN0eWxlZElucHV0ID0gc3R5bGVkKFRleHRJbnB1dFYyKWBcbiAgcGFkZGluZy10b3A6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbMS41XX07XG4gIHBhZGRpbmctYm90dG9tOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWzEuNV19O1xuICBwYWRkaW5nLWxlZnQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbMl19O1xuICBwYWRkaW5nLXJpZ2h0OiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWzJdfTtcbmBcbmV4cG9ydCBjb25zdCBnZXRSZWZlcmVuY2VUZXh0ID0gKG9wdGlvbjogT3B0aW9uVHlwZSkgPT4ge1xuICBpZiAob3B0aW9uLnNlYXJjaFRleHQpIHJldHVybiBub3JtYWxpemVTdHJpbmcob3B0aW9uLnNlYXJjaFRleHQpXG4gIGlmICh0eXBlb2Ygb3B0aW9uLmxhYmVsID09PSAnc3RyaW5nJykgcmV0dXJuIG5vcm1hbGl6ZVN0cmluZyhvcHRpb24ubGFiZWwpXG5cbiAgcmV0dXJuICcnXG59XG5cbi8vIEl0IHVzZXMgTGV2ZW5zaHRlaW4gZGlzdGFuY2Ugc28gdGhhdCB0aGUgc2VhcmNoIGlzIHR5cG8tdG9sZXJhbnQgZm9yIGEgc2ltcGxlIGZ1enp5LXNlYXJjaFxuZXhwb3J0IGNvbnN0IHNlYXJjaFJlZ2V4ID0gKGRhdGE6IE9wdGlvblR5cGVbXSwgcXVlcnk6IHN0cmluZykgPT5cbiAgZGF0YS5maWx0ZXIob3B0aW9uID0+IHtcbiAgICBjb25zdCByZWZlcmVuY2VUZXh0ID0gZ2V0UmVmZXJlbmNlVGV4dChvcHRpb24pXG4gICAgY29uc3QgcmVnZXggPSBuZXcgUmVnRXhwKHF1ZXJ5LCAnaScpXG5cbiAgICByZXR1cm4gKFxuICAgICAgKHF1ZXJ5Lmxlbmd0aCA+IDJcbiAgICAgICAgPyBpc0Z1enp5TWF0Y2gocXVlcnksIHJlZmVyZW5jZVRleHQpXG4gICAgICAgIDogcmVmZXJlbmNlVGV4dC5tYXRjaChyZWdleCkpIHx8XG4gICAgICAodHlwZW9mIG9wdGlvbi5kZXNjcmlwdGlvbiA9PT0gJ3N0cmluZycgJiZcbiAgICAgICAgb3B0aW9uLmRlc2NyaXB0aW9uLm1hdGNoKHJlZ2V4KSkgfHxcbiAgICAgIG9wdGlvbi52YWx1ZS5tYXRjaChyZWdleClcbiAgICApXG4gIH0pXG5cbmNvbnN0IGZpbmRDbG9zZXN0T3B0aW9uID0gKFxuICBvcHRpb25zOiBEYXRhVHlwZSxcbiAgc2VhcmNoSW5wdXQ6IHN0cmluZyB8IHVuZGVmaW5lZCxcbikgPT4ge1xuICBpZiAoc2VhcmNoSW5wdXQpIHtcbiAgICBpZiAoIUFycmF5LmlzQXJyYXkob3B0aW9ucykpIHtcbiAgICAgIGNvbnN0IHBvc3NpYmxlT3B0aW9ucyA9IHsgLi4ub3B0aW9ucyB9XG4gICAgICBPYmplY3Qua2V5cyhwb3NzaWJsZU9wdGlvbnMpLm1hcCgoZ3JvdXA6IHN0cmluZykgPT4ge1xuICAgICAgICBwb3NzaWJsZU9wdGlvbnNbZ3JvdXBdID0gcG9zc2libGVPcHRpb25zW2dyb3VwXS5maWx0ZXIoXG4gICAgICAgICAgb3B0aW9uID0+ICFvcHRpb24uZGlzYWJsZWQsXG4gICAgICAgIClcblxuICAgICAgICByZXR1cm4gbnVsbFxuICAgICAgfSlcbiAgICAgIGlmIChcbiAgICAgICAgT2JqZWN0LmtleXMocG9zc2libGVPcHRpb25zKS5zb21lKFxuICAgICAgICAgIGdyb3VwID0+IHBvc3NpYmxlT3B0aW9uc1tncm91cF0ubGVuZ3RoID4gMCxcbiAgICAgICAgKVxuICAgICAgKSB7XG4gICAgICAgIGNvbnN0IGZpcnN0Rml0ID0gT2JqZWN0LmtleXMocG9zc2libGVPcHRpb25zKVxuICAgICAgICAgIC5tYXAoZ3JvdXAgPT4gcG9zc2libGVPcHRpb25zW2dyb3VwXVswXSlcbiAgICAgICAgICAuZmlsdGVyKHZhbHVlID0+ICEhdmFsdWUpWzBdXG5cbiAgICAgICAgcmV0dXJuIGZpcnN0Rml0XG4gICAgICB9XG4gICAgfSBlbHNlIHtcbiAgICAgIGNvbnN0IHBvc3NpYmxlT3B0aW9ucyA9IFsuLi5vcHRpb25zXS5maWx0ZXIob3B0aW9uID0+ICFvcHRpb24uZGlzYWJsZWQpXG5cbiAgICAgIGlmIChwb3NzaWJsZU9wdGlvbnMubGVuZ3RoID4gMCkge1xuICAgICAgICByZXR1cm4gcG9zc2libGVPcHRpb25zWzBdXG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgcmV0dXJuIG51bGxcbn1cbmV4cG9ydCBjb25zdCBTZWFyY2hCYXJEcm9wZG93biA9ICh7XG4gIHBsYWNlaG9sZGVyLFxuICBkaXNwbGF5ZWRPcHRpb25zLFxuICBzZXRTZWFyY2hCYXJBY3RpdmUsXG59OiBTZWFyY2hCYXJQcm9wcykgPT4ge1xuICBjb25zdCBzZWFyY2hJbnB1dFJlZiA9IHVzZVJlZjxIVE1MSW5wdXRFbGVtZW50PihudWxsKVxuICBjb25zdCB7XG4gICAgb25DaGFuZ2UsXG4gICAgb25TZWFyY2gsXG4gICAgc2V0U2VhcmNoSW5wdXQsXG4gICAgc2VhcmNoSW5wdXQsXG4gICAgb3B0aW9ucyxcbiAgICBtdWx0aXNlbGVjdCxcbiAgICBzZXRTZWxlY3RlZERhdGEsXG4gICAgc2VsZWN0ZWREYXRhLFxuICB9ID0gdXNlU2VsZWN0SW5wdXQoKVxuICBjb25zdCBlc2NhcGVSZWdFeHAgPSAoc3RyaW5nOiBzdHJpbmcpID0+XG4gICAgc3RyaW5nLnJlcGxhY2UoL1suKis/Xnt9KCl8W1xcXVxcXFxdL2csIFN0cmluZy5yYXdgXFwkJmApXG5cbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gKHNlYXJjaDogc3RyaW5nKSA9PiB7XG4gICAgaWYgKHNlYXJjaC5sZW5ndGggPiAwKSB7XG4gICAgICBpZiAoIUFycmF5LmlzQXJyYXkob3B0aW9ucykpIHtcbiAgICAgICAgY29uc3QgZmlsdGVyZWRPcHRpb25zID0geyAuLi5vcHRpb25zIH1cbiAgICAgICAgT2JqZWN0LmtleXMoZmlsdGVyZWRPcHRpb25zKS5tYXAoKGdyb3VwOiBzdHJpbmcpID0+IHtcbiAgICAgICAgICBmaWx0ZXJlZE9wdGlvbnNbZ3JvdXBdID0gc2VhcmNoUmVnZXgoXG4gICAgICAgICAgICBmaWx0ZXJlZE9wdGlvbnNbZ3JvdXBdLFxuICAgICAgICAgICAgZXNjYXBlUmVnRXhwKHNlYXJjaC50b1N0cmluZygpKSxcbiAgICAgICAgICApXG5cbiAgICAgICAgICByZXR1cm4gbnVsbFxuICAgICAgICB9KVxuICAgICAgICBvblNlYXJjaChmaWx0ZXJlZE9wdGlvbnMpXG4gICAgICB9IGVsc2Uge1xuICAgICAgICBjb25zdCBmaWx0ZXJlZE9wdGlvbnMgPSBzZWFyY2hSZWdleChcbiAgICAgICAgICBbLi4ub3B0aW9uc10sXG4gICAgICAgICAgZXNjYXBlUmVnRXhwKHNlYXJjaC50b1N0cmluZygpKSxcbiAgICAgICAgKVxuICAgICAgICBvblNlYXJjaChmaWx0ZXJlZE9wdGlvbnMpXG4gICAgICB9XG4gICAgfSBlbHNlIHtcbiAgICAgIG9uU2VhcmNoKG9wdGlvbnMpXG4gICAgfVxuICAgIHNldFNlYXJjaElucHV0KHNlYXJjaClcbiAgfVxuXG4gIGNvbnN0IGhhbmRsZUtleURvd24gPSAoa2V5OiBzdHJpbmcsIHNlYXJjaD86IHN0cmluZykgPT4ge1xuICAgIGlmIChrZXkgPT09ICdFbnRlcicpIHtcbiAgICAgIGNvbnN0IGNsb3Nlc3RPcHRpb24gPSBmaW5kQ2xvc2VzdE9wdGlvbihkaXNwbGF5ZWRPcHRpb25zLCBzZWFyY2gpXG4gICAgICBpZiAoY2xvc2VzdE9wdGlvbikge1xuICAgICAgICBpZiAobXVsdGlzZWxlY3QpIHtcbiAgICAgICAgICBzZXRTZWxlY3RlZERhdGEoe1xuICAgICAgICAgICAgdHlwZTogJ3NlbGVjdE9wdGlvbicsXG4gICAgICAgICAgICBjbGlja2VkT3B0aW9uOiBjbG9zZXN0T3B0aW9uLFxuICAgICAgICAgICAgZ3JvdXA6ICFBcnJheS5pc0FycmF5KG9wdGlvbnMpXG4gICAgICAgICAgICAgID8gT2JqZWN0LmtleXMob3B0aW9ucykuZmlsdGVyKGdyb3VwID0+XG4gICAgICAgICAgICAgICAgICBvcHRpb25zW2dyb3VwXS5pbmNsdWRlcyhjbG9zZXN0T3B0aW9uKSxcbiAgICAgICAgICAgICAgICApWzBdXG4gICAgICAgICAgICAgIDogdW5kZWZpbmVkLFxuICAgICAgICAgIH0pXG4gICAgICAgICAgb25DaGFuZ2U/LihcbiAgICAgICAgICAgIHNlbGVjdGVkRGF0YS5zZWxlY3RlZFZhbHVlcy5pbmNsdWRlcyhjbG9zZXN0T3B0aW9uLnZhbHVlKVxuICAgICAgICAgICAgICA/IHNlbGVjdGVkRGF0YS5zZWxlY3RlZFZhbHVlc1xuICAgICAgICAgICAgICA6IFsuLi5zZWxlY3RlZERhdGEuc2VsZWN0ZWRWYWx1ZXMsIGNsb3Nlc3RPcHRpb24udmFsdWVdLFxuICAgICAgICAgIClcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICBzZXRTZWxlY3RlZERhdGEoe1xuICAgICAgICAgICAgdHlwZTogJ3NlbGVjdE9wdGlvbicsXG4gICAgICAgICAgICBjbGlja2VkT3B0aW9uOiBjbG9zZXN0T3B0aW9uLFxuICAgICAgICAgIH0pXG4gICAgICAgICAgb25DaGFuZ2U/LihzZWxlY3RlZERhdGEuc2VsZWN0ZWRWYWx1ZXNbMF0gPz8gJycpXG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9IGVsc2UgaWYgKGtleSA9PT0gJ1RhYicpIHtcbiAgICAgIHNlYXJjaElucHV0UmVmLmN1cnJlbnQ/LmJsdXIoKVxuICAgIH1cbiAgfVxuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgLy8gVE9ETzogUmVtb3ZlIG1lIGFuZCB1c2UgYXV0b0ZvY3VzIHdoZW4gcG9wdXAgaXMgZml4ZWRcbiAgICAvLyBBdXRvZm9jdXMgb24gdGhlIHNlYXJjaCBiYXIgY3JlYXRlIHNvbWUgc2Nyb2xsIGlzc3Vlc1xuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgc2VhcmNoSW5wdXRSZWYuY3VycmVudD8uZm9jdXMoKVxuICAgIH0sIDUwKVxuICB9LCBbXSlcblxuICByZXR1cm4gKFxuICAgIDxTdHlsZWRJbnB1dFxuICAgICAgdmFsdWU9e3NlYXJjaElucHV0fVxuICAgICAgb25DaGFuZ2U9e2V2ZW50ID0+IGhhbmRsZUNoYW5nZShldmVudC50YXJnZXQudmFsdWUpfVxuICAgICAgcGxhY2Vob2xkZXI9e3BsYWNlaG9sZGVyfVxuICAgICAgb25Gb2N1cz17KCkgPT4gc2V0U2VhcmNoQmFyQWN0aXZlKHRydWUpfVxuICAgICAgb25CbHVyPXsoKSA9PiBzZXRTZWFyY2hCYXJBY3RpdmUoZmFsc2UpfVxuICAgICAgZGF0YS10ZXN0aWQ9XCJzZWFyY2gtYmFyXCJcbiAgICAgIHByZWZpeD17PFNlYXJjaEljb24gc2l6ZT1cInNtYWxsXCIgc2VudGltZW50PVwibmV1dHJhbFwiIC8+fVxuICAgICAgb25LZXlEb3duPXtldmVudCA9PiBoYW5kbGVLZXlEb3duKGV2ZW50LmtleSwgc2VhcmNoSW5wdXQpfVxuICAgICAgc2l6ZT1cIm1lZGl1bVwiXG4gICAgICBhcmlhLWxhYmVsPVwic2VhcmNoLWJhclwiXG4gICAgICByZWY9e3NlYXJjaElucHV0UmVmfVxuICAgIC8+XG4gIClcbn1cbiJdfQ== */"));
|
|
23
|
+
const getReferenceText = (option) => {
|
|
24
|
+
if (option.searchText) return normalizeString(option.searchText);
|
|
25
|
+
if (typeof option.label === "string") return normalizeString(option.label);
|
|
26
|
+
return "";
|
|
27
|
+
};
|
|
28
|
+
const searchRegex = (data, query) => data.filter((option) => {
|
|
29
|
+
const referenceText = getReferenceText(option);
|
|
30
|
+
const regex = new RegExp(query, "i");
|
|
31
|
+
return (query.length > 2 ? isFuzzyMatch(query, referenceText) : referenceText.match(regex)) || typeof option.description === "string" && option.description.match(regex) || option.value.match(regex);
|
|
32
|
+
});
|
|
26
33
|
const findClosestOption = (options, searchInput) => {
|
|
27
34
|
if (searchInput) {
|
|
28
35
|
if (!Array.isArray(options)) {
|
|
@@ -65,18 +72,17 @@ const SearchBarDropdown = ({
|
|
|
65
72
|
const escapeRegExp = (string) => string.replace(/[.*+?^{}()|[\]\\]/g, String.raw`\$&`);
|
|
66
73
|
const handleChange = (search) => {
|
|
67
74
|
if (search.length > 0) {
|
|
68
|
-
const regex = new RegExp(escapeRegExp(search.toString()), "i");
|
|
69
75
|
if (!Array.isArray(options)) {
|
|
70
76
|
const filteredOptions = {
|
|
71
77
|
...options
|
|
72
78
|
};
|
|
73
79
|
Object.keys(filteredOptions).map((group) => {
|
|
74
|
-
filteredOptions[group] =
|
|
80
|
+
filteredOptions[group] = searchRegex(filteredOptions[group], escapeRegExp(search.toString()));
|
|
75
81
|
return null;
|
|
76
82
|
});
|
|
77
83
|
onSearch(filteredOptions);
|
|
78
84
|
} else {
|
|
79
|
-
const filteredOptions =
|
|
85
|
+
const filteredOptions = searchRegex([...options], escapeRegExp(search.toString()));
|
|
80
86
|
onSearch(filteredOptions);
|
|
81
87
|
}
|
|
82
88
|
} else {
|
|
@@ -115,5 +121,7 @@ const SearchBarDropdown = ({
|
|
|
115
121
|
return /* @__PURE__ */ jsx(StyledInput, { value: searchInput, onChange: (event) => handleChange(event.target.value), placeholder, onFocus: () => setSearchBarActive(true), onBlur: () => setSearchBarActive(false), "data-testid": "search-bar", prefix: /* @__PURE__ */ jsx(SearchIcon, { size: "small", sentiment: "neutral" }), onKeyDown: (event) => handleKeyDown(event.key, searchInput), size: "medium", "aria-label": "search-bar", ref: searchInputRef });
|
|
116
122
|
};
|
|
117
123
|
export {
|
|
118
|
-
SearchBarDropdown
|
|
124
|
+
SearchBarDropdown,
|
|
125
|
+
getReferenceText,
|
|
126
|
+
searchRegex
|
|
119
127
|
};
|