@reykjavik/hanna-react 0.10.114 → 0.10.115

package/CHANGELOG.md

@@ -4,6 +4,13 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.115
+
+_2024-01-09_
+
+- feat: Add `getSearchContent` prop to `Multiselect`
+- feat: Change icon on `MainMenu2`'s toggler button when menu is open
+
 ## 0.10.114
 
 _2023-12-13_

package/MainMenu2.js

@@ -194,18 +194,20 @@ const MainMenu2 = (props) => {
         isMenuOpen && react_1.default.createElement(FocusTrap_js_1.FocusTrap, { atTop: true }),
         react_1.default.createElement("div", { className: "MainMenu2__content" },
             react_1.default.createElement("h2", { className: "MainMenu2__title" }, txt.title),
-            isBrowser ? (react_1.default.createElement(ButtonPrimary_js_1.default, Object.assign({ className: "MainMenu2__toggler", size: "small", type: "button", "aria-pressed": isMenuOpen, "aria-controls": menuId, "data-icon": "text" }, (isMenuOpen
+            isBrowser ? (react_1.default.createElement(ButtonPrimary_js_1.default, Object.assign({ className: "MainMenu2__toggler", size: "small", type: "button", "aria-pressed": isMenuOpen, "aria-controls": menuId }, (isMenuOpen
                 ? {
                     onClick: closeMenu,
                     'aria-label': txt.closeMenuLong,
                     title: txt.closeMenuLong,
                     children: txt.closeMenu,
+                    'data-icon': 'text',
                 }
                 : {
                     onClick: openMenu,
                     'aria-label': txt.openMenuLong,
                     title: txt.openMenuLong,
                     children: txt.openMenu,
+                    'data-icon': 'close',
                 })))) : (react_1.default.createElement(ButtonPrimary_js_1.default, { className: "MainMenu2__toggler", size: "small", href: `#${menuId}`, onClick: a11yHelpers_js_1.handleAnchorLinkClick, "aria-hidden": "true", "data-icon": "text" }, txt.title)),
             mainItems && (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('MainMenu2__main', activeSubmenu < 0 && 'noneActive') },
                 renderItem('MainMenu2__main__', homeLinkItem, { Tag: 'div' }),

package/Multiselect/_Multiselect.search.d.ts

@@ -1,4 +1,4 @@
-import { TogglerGroupOptions } from '../_abstract/_TogglerGroup.js';
+import { TogglerGroupOption, TogglerGroupOptions } from '../_abstract/_TogglerGroup.js';
 import { TogglerGroupFieldOption } from '../_abstract/_TogglerGroupField.js';
 export declare const _weights: {
     WHOLE_WORD: number;
@@ -13,7 +13,9 @@ item: TogglerGroupFieldOption<string>,
 /** Trimmed list of `toLowerCase`d query words */
 queryWords: Array<string>, 
 /** The raw, untouched search query as typed by the user */
-rawQuery: string) => number;
+rawQuery: string, 
+/** Function to extract the item's label */
+itemContent: string | undefined) => number;
 export declare const defaultSearchScoring: SearchScoringfn;
 /** Returns a normalized, filtered list of options */
-export declare const filterItems: <Extras = Record<string, never>>(options: TogglerGroupOptions<string, Extras>, searchQuery: string, searchScoringFn?: SearchScoringfn) => TogglerGroupOptions<string, Extras>;
+export declare const filterItems: <Extras = Record<string, never>>(options: TogglerGroupOptions<string, Extras>, searchQuery: string, searchScoringFn?: SearchScoringfn, getLabel?: (item: TogglerGroupOption<string, Extras>) => string | undefined) => TogglerGroupOptions<string, Extras>;

package/Multiselect/_Multiselect.search.js

@@ -47,13 +47,12 @@ const calcScore = (itemString, queryWords) => {
     });
     return score;
 };
-const defaultSearchScoring = (item, queryWords) => {
-    var _a;
+const defaultSearchScoring = (item, queryWords, _, itemContent) => {
     if (!item.value) {
         return 0;
     }
     const value = item.value.toLowerCase().trim();
-    const label = ((_a = item.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().trim()) || value;
+    const label = (itemContent === null || itemContent === void 0 ? void 0 : itemContent.toLowerCase().trim()) || value;
     let score = calcScore(label, queryWords);
     if (!score) {
         score = VALUE_WEIGHT * calcScore(value, queryWords);
@@ -65,7 +64,7 @@ exports.defaultSearchScoring = defaultSearchScoring;
 // banana emoji
 const SEP = '🍌';
 /** Returns a normalized, filtered list of options */
-const filterItems = (options, searchQuery, searchScoringFn = exports.defaultSearchScoring) => {
+const filterItems = (options, searchQuery, searchScoringFn = exports.defaultSearchScoring, getLabel = (item) => item.label) => {
     if (!searchQuery.trim()) {
         return options;
     }
@@ -74,7 +73,7 @@ const filterItems = (options, searchQuery, searchScoringFn = exports.defaultSear
     return (options
         .map((item) => ({
         item,
-        score: searchScoringFn(item, queryWords, searchQuery),
+        score: searchScoringFn(item, queryWords, searchQuery, getLabel(item)),
     }))
         .filter(({ score }) => score > 0)
         .sort((a, b) => (a.score === b.score ? 0 : a.score < b.score ? 1 : -1))

package/Multiselect.d.ts

@@ -29,6 +29,11 @@ export type MultiselectProps = TogglerGroupFieldProps<string, {
      * A score of zero (or less) means the item is not a valid match.
      */
     searchScoring?: SearchScoringfn;
+    /**
+     * Custom function to extract the searchable content from a given option item.
+     * By default, the `label` property is used.
+     */
+    getSearchContent?: (item: MultiselectOption) => string;
     /**
      * Force display the current values at the top of the dropdown,
      * even when the total options are fewer than

package/Multiselect.js

@@ -97,7 +97,7 @@ const Multiselect = (props) => {
     */
     const showCurrentValues = values.length > 0 &&
         (props.forceSummary || !isOpen || options.length >= summaryLimit);
-    const filteredOptions = (0, react_1.useMemo)(() => (0, _Multiselect_search_js_1.filterItems)(options, searchQuery, props.searchScoring), [searchQuery, options, props.searchScoring]);
+    const filteredOptions = (0, react_1.useMemo)(() => (0, _Multiselect_search_js_1.filterItems)(options, searchQuery, props.searchScoring, props.getSearchContent), [searchQuery, options, props.searchScoring, props.getSearchContent]);
     const isFiltered = options !== filteredOptions;
     const handleCheckboxSelection = (0, react_1.useCallback)((selectedItem) => {
         const selValue = selectedItem.value;

package/esm/MainMenu2.js

@@ -190,18 +190,20 @@ export const MainMenu2 = (props) => {
         isMenuOpen && React.createElement(FocusTrap, { atTop: true }),
         React.createElement("div", { className: "MainMenu2__content" },
             React.createElement("h2", { className: "MainMenu2__title" }, txt.title),
-            isBrowser ? (React.createElement(ButtonPrimary, Object.assign({ className: "MainMenu2__toggler", size: "small", type: "button", "aria-pressed": isMenuOpen, "aria-controls": menuId, "data-icon": "text" }, (isMenuOpen
+            isBrowser ? (React.createElement(ButtonPrimary, Object.assign({ className: "MainMenu2__toggler", size: "small", type: "button", "aria-pressed": isMenuOpen, "aria-controls": menuId }, (isMenuOpen
                 ? {
                     onClick: closeMenu,
                     'aria-label': txt.closeMenuLong,
                     title: txt.closeMenuLong,
                     children: txt.closeMenu,
+                    'data-icon': 'text',
                 }
                 : {
                     onClick: openMenu,
                     'aria-label': txt.openMenuLong,
                     title: txt.openMenuLong,
                     children: txt.openMenu,
+                    'data-icon': 'close',
                 })))) : (React.createElement(ButtonPrimary, { className: "MainMenu2__toggler", size: "small", href: `#${menuId}`, onClick: handleAnchorLinkClick, "aria-hidden": "true", "data-icon": "text" }, txt.title)),
             mainItems && (React.createElement("div", { className: modifiedClass('MainMenu2__main', activeSubmenu < 0 && 'noneActive') },
                 renderItem('MainMenu2__main__', homeLinkItem, { Tag: 'div' }),

package/esm/Multiselect/_Multiselect.search.d.ts

@@ -1,4 +1,4 @@
-import { TogglerGroupOptions } from '../_abstract/_TogglerGroup.js';
+import { TogglerGroupOption, TogglerGroupOptions } from '../_abstract/_TogglerGroup.js';
 import { TogglerGroupFieldOption } from '../_abstract/_TogglerGroupField.js';
 export declare const _weights: {
     WHOLE_WORD: number;
@@ -13,7 +13,9 @@ item: TogglerGroupFieldOption<string>,
 /** Trimmed list of `toLowerCase`d query words */
 queryWords: Array<string>, 
 /** The raw, untouched search query as typed by the user */
-rawQuery: string) => number;
+rawQuery: string, 
+/** Function to extract the item's label */
+itemContent: string | undefined) => number;
 export declare const defaultSearchScoring: SearchScoringfn;
 /** Returns a normalized, filtered list of options */
-export declare const filterItems: <Extras = Record<string, never>>(options: TogglerGroupOptions<string, Extras>, searchQuery: string, searchScoringFn?: SearchScoringfn) => TogglerGroupOptions<string, Extras>;
+export declare const filterItems: <Extras = Record<string, never>>(options: TogglerGroupOptions<string, Extras>, searchQuery: string, searchScoringFn?: SearchScoringfn, getLabel?: (item: TogglerGroupOption<string, Extras>) => string | undefined) => TogglerGroupOptions<string, Extras>;

package/esm/Multiselect/_Multiselect.search.js

@@ -44,13 +44,12 @@ const calcScore = (itemString, queryWords) => {
     });
     return score;
 };
-export const defaultSearchScoring = (item, queryWords) => {
-    var _a;
+export const defaultSearchScoring = (item, queryWords, _, itemContent) => {
     if (!item.value) {
         return 0;
     }
     const value = item.value.toLowerCase().trim();
-    const label = ((_a = item.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().trim()) || value;
+    const label = (itemContent === null || itemContent === void 0 ? void 0 : itemContent.toLowerCase().trim()) || value;
     let score = calcScore(label, queryWords);
     if (!score) {
         score = VALUE_WEIGHT * calcScore(value, queryWords);
@@ -61,7 +60,7 @@ export const defaultSearchScoring = (item, queryWords) => {
 // banana emoji
 const SEP = '🍌';
 /** Returns a normalized, filtered list of options */
-export const filterItems = (options, searchQuery, searchScoringFn = defaultSearchScoring) => {
+export const filterItems = (options, searchQuery, searchScoringFn = defaultSearchScoring, getLabel = (item) => item.label) => {
     if (!searchQuery.trim()) {
         return options;
     }
@@ -70,7 +69,7 @@ export const filterItems = (options, searchQuery, searchScoringFn = defaultSearc
     return (options
         .map((item) => ({
         item,
-        score: searchScoringFn(item, queryWords, searchQuery),
+        score: searchScoringFn(item, queryWords, searchQuery, getLabel(item)),
     }))
         .filter(({ score }) => score > 0)
         .sort((a, b) => (a.score === b.score ? 0 : a.score < b.score ? 1 : -1))

package/esm/Multiselect.d.ts

@@ -29,6 +29,11 @@ export type MultiselectProps = TogglerGroupFieldProps<string, {
      * A score of zero (or less) means the item is not a valid match.
      */
     searchScoring?: SearchScoringfn;
+    /**
+     * Custom function to extract the searchable content from a given option item.
+     * By default, the `label` property is used.
+     */
+    getSearchContent?: (item: MultiselectOption) => string;
     /**
      * Force display the current values at the top of the dropdown,
      * even when the total options are fewer than

package/esm/Multiselect.js

@@ -93,7 +93,7 @@ export const Multiselect = (props) => {
     */
     const showCurrentValues = values.length > 0 &&
         (props.forceSummary || !isOpen || options.length >= summaryLimit);
-    const filteredOptions = useMemo(() => filterItems(options, searchQuery, props.searchScoring), [searchQuery, options, props.searchScoring]);
+    const filteredOptions = useMemo(() => filterItems(options, searchQuery, props.searchScoring, props.getSearchContent), [searchQuery, options, props.searchScoring, props.getSearchContent]);
     const isFiltered = options !== filteredOptions;
     const handleCheckboxSelection = useCallback((selectedItem) => {
         const selValue = selectedItem.value;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.114",
+	"version": "0.10.115",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",