npm - @reykjavik/hanna-react - Versions diffs - 0.10.91 → 0.10.93 - Mend

@reykjavik/hanna-react 0.10.91 → 0.10.93

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.

Files changed (66) hide show

package/ArticleCarousel/_ArticleCarouselCard.d.ts +2 -1
package/CHANGELOG.md +23 -0
package/ContactBubble.d.ts +2 -1
package/ContactBubble.js +4 -6
package/Datepicker.d.ts +31 -3
package/Datepicker.js +25 -6
package/FormField.d.ts +11 -2
package/FormField.js +5 -5
package/MainMenu/_PrimaryPanel.d.ts +2 -2
package/MainMenu.d.ts +2 -1
package/MainMenu.js +5 -6
package/Multiselect/_Multiselect.search.d.ts +19 -0
package/Multiselect/_Multiselect.search.js +80 -0
package/Multiselect.d.ts +64 -0
package/Multiselect.js +236 -0
package/ReadSpeakerPlayer.d.ts +64 -0
package/ReadSpeakerPlayer.js +78 -0
package/RelatedLinks.d.ts +2 -1
package/Selectbox.d.ts +3 -3
package/TextInput.d.ts +0 -1
package/_abstract/_CardList.d.ts +2 -1
package/_abstract/_CardList.js +2 -2
package/_abstract/_FocusTrap.d.ts +14 -0
package/_abstract/_FocusTrap.js +24 -0
package/_abstract/_TogglerGroup.d.ts +11 -7
package/_abstract/_TogglerGroup.js +11 -3
package/_abstract/_TogglerGroupField.d.ts +4 -4
package/_abstract/_TogglerGroupField.js +2 -2
package/_abstract/_TogglerInput.d.ts +3 -1
package/_abstract/_TogglerInput.js +7 -4
package/esm/ArticleCarousel/_ArticleCarouselCard.d.ts +2 -1
package/esm/ContactBubble.d.ts +2 -1
package/esm/ContactBubble.js +4 -6
package/esm/Datepicker.d.ts +31 -3
package/esm/Datepicker.js +25 -6
package/esm/FormField.d.ts +11 -2
package/esm/FormField.js +5 -5
package/esm/MainMenu/_PrimaryPanel.d.ts +2 -2
package/esm/MainMenu.d.ts +2 -1
package/esm/MainMenu.js +5 -6
package/esm/Multiselect/_Multiselect.search.d.ts +19 -0
package/esm/Multiselect/_Multiselect.search.js +75 -0
package/esm/Multiselect.d.ts +64 -0
package/esm/Multiselect.js +231 -0
package/esm/ReadSpeakerPlayer.d.ts +64 -0
package/esm/ReadSpeakerPlayer.js +72 -0
package/esm/RelatedLinks.d.ts +2 -1
package/esm/Selectbox.d.ts +3 -3
package/esm/TextInput.d.ts +0 -1
package/esm/_abstract/_CardList.d.ts +2 -1
package/esm/_abstract/_CardList.js +2 -2
package/esm/_abstract/_FocusTrap.d.ts +14 -0
package/esm/_abstract/_FocusTrap.js +19 -0
package/esm/_abstract/_TogglerGroup.d.ts +11 -7
package/esm/_abstract/_TogglerGroup.js +11 -3
package/esm/_abstract/_TogglerGroupField.d.ts +4 -4
package/esm/_abstract/_TogglerGroupField.js +2 -2
package/esm/_abstract/_TogglerInput.d.ts +3 -1
package/esm/_abstract/_TogglerInput.js +7 -4
package/esm/index.d.ts +2 -0
package/esm/utils/useFormatMonitor.d.ts +4 -2
package/esm/utils/useFormatMonitor.js +4 -2
package/index.d.ts +2 -0
package/package.json +13 -5
package/utils/useFormatMonitor.d.ts +4 -2
package/utils/useFormatMonitor.js +4 -2

package/ArticleCarousel/_ArticleCarouselCard.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { HannaColorTheme } from '@reykjavik/hanna-css';
 import { Illustration } from '@reykjavik/hanna-utils/assets';
 import { ImageProps } from '../_abstract/_Image.js';
@@ -10,7 +11,7 @@ export type ArticleCarouselCardProps = {
     title: string;
     summary: string;
     href: string;
-    target?: string;
+    target?: React.HTMLAttributeAnchorTarget;
     color?: ColorFamily;
     /** NOTE: if both `color` and `theme` are specified
      * then `color` takes precedence.

package/CHANGELOG.md CHANGED Viewed

@@ -4,6 +4,29 @@
 - ... <!-- Add new lines here. -->
+## 0.10.93
+_2023-07-06_
+- feat: Add component `Multiselect`
+- fix: Add `target` prop to all "\*Cards" components that have `href`s
+- `Datepicker`:
+  - feat: Add support for "uncontrolled" mode — (add prop `defaultValue`, make
+    `value` and `onChange` optional.)
+  - feat: Add prop `isoMode` to generate/submit ISO-8601 `<input/>` values
+- Checkboxes and Radio buttons
+  - feat: Support `readOnly` — using `disabled` + `input[type=hidden]`
+  - feat: Support passing `options` as simple string array
+  - feat: Make `name` prop optional for groups
+  - fix: Handling of `disabled` as array of indexes
+## 0.10.92
+_2023-06-06_
+- feat: Add component `ReadSpeakerPlayer` and a `stopReading` helper
+- fix: Update dependencies for minor esm and `Modal`-related bugfixes
 ## 0.10.90 – 0.10.91
 _2023-06-01_

package/ContactBubble.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import React from 'react';
 import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
 import { SSRSupport } from './utils.js';
 export type ContactBubbleI18n = {
@@ -25,7 +26,7 @@ export type ContactBubbleItem = {
     href: string;
     /** Prevents default link behavior unless the handler function returns `true` */
     onClick?: () => void | boolean;
-    target?: string;
+    target?: React.HTMLAttributeAnchorTarget;
 } | {
     onClick: () => void | boolean;
     href?: undefined;

package/ContactBubble.js CHANGED Viewed

@@ -6,7 +6,6 @@ const react_1 = tslib_1.__importStar(require("react"));
 const focusElm_1 = require("@hugsmidjan/qj/focusElm");
 const hooks_1 = require("@hugsmidjan/react/hooks");
 const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
-const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const _Link_js_1 = require("./_abstract/_Link.js");
 const breakOnNL_js_1 = require("./_abstract/breakOnNL.js");
@@ -66,12 +65,11 @@ const ContactBubble = (props) => {
             wrapperElm.dataset.show = 'true';
             return;
         }
-        const scrollElm = (0, hanna_utils_1.getPageScrollElm)();
         let pending = 0;
         const checkScroll = () => {
             if (!pending) {
                 pending = requestAnimationFrame(() => {
-                    const { scrollTop, scrollHeight, clientHeight } = scrollElm;
+                    const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
                     const scrollLength = scrollHeight - clientHeight;
                     // const f = scrollLength > 600 ? 1 : (scrollLength - 200) / 600;
                     const f = 1;
@@ -83,7 +81,7 @@ const ContactBubble = (props) => {
             }
         };
         checkScroll();
-        // Set scroll-listeners on both the ´document` and the `scrollElm`
+        // Set scroll-listeners on both the ´document` and the `document.documentElement`
         // because mobile browsers seem to handle CSS height and overflow
         // rules on <html> and <body> differently from desktop browsers.
         // Only one of these two handlers seems to trigger though,
@@ -91,10 +89,10 @@ const ContactBubble = (props) => {
         // and even if they did, the rAF throttling prevents that from
         // becoming a problem.
         document.addEventListener('scroll', checkScroll);
-        scrollElm.addEventListener('scroll', checkScroll);
+        document.documentElement.addEventListener('scroll', checkScroll);
         return () => {
             document.removeEventListener('scroll', checkScroll);
-            scrollElm.removeEventListener('scroll', checkScroll);
+            document.documentElement.removeEventListener('scroll', checkScroll);
         };
     }, [isBrowser, alwaysShow, closeBubble]);
     (0, react_1.useEffect)(() => {

package/Datepicker.d.ts CHANGED Viewed

@@ -4,22 +4,45 @@ export type DatepickerProps = {
     small?: boolean;
     placeholder?: string;
     value?: Date;
+    /**
+     * Default value for "uncontrolled" mode.
+     *
+     * NOTE: Even though defaultValue and the `onChange` value are both `Date`
+     * the `<input/>` element is still `type="text"` and it's `.value` is
+     * the human-readable (parsed) date `string`.
+     *
+     * Use this incombination with the `isoMode` prop to submit ISO-8601
+     * formatted input values
+     */
+    defaultValue?: Date;
     name?: string;
     startDate?: Date;
     endDate?: Date;
     minDate?: Date;
     maxDate?: Date;
+    /**
+     * Turn this on to generate a form <input/> that contains (and submits)
+     * an ISO-date formatted string value, instead of the default "human
+     * readable" format.
+     *
+     * NOTE: This will be the default mode in v0.11.
+     */
+    isoMode?: boolean;
     localeCode?: 'is' | 'en' | 'pl';
     dateFormat?: string | Array<string>;
     isStartDate?: boolean;
     isEndDate?: boolean;
     inputRef?: RefObject<HTMLInputElement>;
-    onChange: (date?: Date) => void;
+    onChange?: (date?: Date) => void;
     datepickerExtraProps?: Record<string, unknown>;
-    /** @deprecated  use value instead.  (Will be removed in v0.11) */
+    /** @deprecated  Use `value` or `defaultValue` instead.  (Will be removed in v0.11) */
     initialDate?: Date;
 } & FormFieldWrappingProps;
-export declare const getDateDiff: (date: Date, diff: number) => Date;
+/**
+ * Dumb utility function that returns a new Date that's `dayOffset` days away
+ * from the input `date`.
+ */
+export declare const getDateDiff: (refDate: Date, dayOffset: number) => Date;
 export type DatepickerLocaleProps = {
     nextMonthAriaLabel: string;
     nextMonthButtonLabel: string;
@@ -36,5 +59,10 @@ export type DatepickerLocaleProps = {
     chooseDayAriaLabelPrefix: string;
     disabledDayAriaLabelPrefix: string;
 };
+/**
+ * A compo
+ *
+ * Internally, this component uses the [`react-datepicker`](https://reactdatepicker.com/) component.
+ */
 export declare const Datepicker: (props: DatepickerProps) => JSX.Element;
 export default Datepicker;

package/Datepicker.js CHANGED Viewed

@@ -10,11 +10,16 @@ const index_js_1 = tslib_1.__importDefault(require("date-fns/locale/is/index.js"
 const index_js_2 = tslib_1.__importDefault(require("date-fns/locale/pl/index.js"));
 const ReactDatepicker_js_1 = require("./_mixed_export_resolution_/ReactDatepicker.js"); // Docs: https://reactdatepicker.com/
 const FormField_js_1 = require("./FormField.js");
+const utils_js_1 = require("./utils.js");
 (0, ReactDatepicker_js_1.registerLocale)('is', index_js_1.default);
 (0, ReactDatepicker_js_1.registerLocale)('pl', index_js_2.default);
-const getDateDiff = (date, diff) => {
-    const newDate = new Date(date);
-    newDate.setDate(newDate.getDate() + diff);
+/**
+ * Dumb utility function that returns a new Date that's `dayOffset` days away
+ * from the input `date`.
+ */
+const getDateDiff = (refDate, dayOffset) => {
+    const newDate = new Date(refDate);
+    newDate.setDate(newDate.getDate() + dayOffset);
     return newDate;
 };
 exports.getDateDiff = getDateDiff;
@@ -52,8 +57,19 @@ const i18n = {
         disabledDayAriaLabelPrefix: 'Data niedostępna',
     },
 };
+/**
+ * A compo
+ *
+ * Internally, this component uses the [`react-datepicker`](https://reactdatepicker.com/) component.
+ */
 const Datepicker = (props) => {
-    const { className, id, label, hideLabel, assistText, disabled, readOnly, invalid, errorMessage, required, reqText, placeholder, small, localeCode = 'is', dateFormat = 'd.M.yyyy', initialDate, value = initialDate, name, startDate, endDate, minDate, maxDate, isStartDate = false, isEndDate = false, onChange, datepickerExtraProps, ssr, inputRef, } = props;
+    const { className, id, label, hideLabel, assistText, disabled, readOnly, invalid, errorMessage, required, reqText, placeholder, small, localeCode = 'is', dateFormat = 'd.M.yyyy', name, startDate, endDate, minDate, maxDate, isStartDate = false, isEndDate = false, onChange, datepickerExtraProps, ssr, inputRef, isoMode, } = props;
+    const [value, setValue] = utils_js_1.useMixedControlState.raw(props.value || props.initialDate, props.defaultValue, 'value');
+    /*
+      TODO: Revert to this simpler pattern once we hit v0.11
+      and `props.initialDate` is removed:
+    */
+    // const [value, setValue] = useMixedControlState(props, 'value');
     const domid = (0, hooks_1.useDomid)(id);
     const txts = i18n[localeCode] || {};
     const filled = !!value;
@@ -65,7 +81,8 @@ const Datepicker = (props) => {
                             (elm === null || elm === void 0 ? void 0 : elm.querySelector('input')) || undefined;
                         return elm;
                     }) }, addFocusProps()),
-                react_1.default.createElement(ReactDatepicker_js_1.ReactDatePicker, Object.assign({ id: domid, required: inputProps.required, disabled: inputProps.disabled, readOnly: inputProps.readOnly, selected: value, name: name, locale: localeCode, dateFormat:
+                isoMode && (react_1.default.createElement("input", { type: "hidden", name: name, value: value === null || value === void 0 ? void 0 : value.toISOString().slice(0, 10) })),
+                react_1.default.createElement(ReactDatepicker_js_1.ReactDatePicker, Object.assign({ id: domid, required: inputProps.required, disabled: inputProps.disabled, readOnly: inputProps.readOnly, selected: value, name: isoMode ? undefined : name, locale: localeCode, dateFormat:
                     // NOTE: Force all dateFormat values into Array<string> to temporarily work around
                     // a bug in the current version of react-datepicker where invalid **string** values
                     // are re-parsed with `new Date()`, causing surprising (weird) false positives
@@ -76,7 +93,9 @@ const Datepicker = (props) => {
                     typeof dateFormat === 'string'
                         ? [dateFormat]
                         : dateFormat.slice(0).reverse(), onChange: (date) => {
-                        onChange(date || undefined);
+                        date = date || undefined;
+                        setValue(date);
+                        onChange && onChange(date);
                         const inputElm = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
                         if (inputElm) {
                             inputElm.dispatchEvent(new Event('change', { bubbles: true }));

package/FormField.d.ts CHANGED Viewed

@@ -24,6 +24,10 @@ type FocusEvents = {
     onBlur?: (e: any) => void;
 };
 type FocusPropMaker = <P extends FocusEvents>(ownProps?: P) => P & Required<FocusEvents>;
+/**
+ * Mixin base props type for components using the `FormField` to contain
+ * simple, singular input widgets. E.g. `TextInput`, `Seleccbox`, etc.
+ */
 export type FormFieldWrappingProps = {
     /** Container className - alongside "FormField" */
     className?: string;
@@ -49,14 +53,19 @@ export type FormFieldWrappingProps = {
     wrapperRef?: RefObject<HTMLElement>;
     ssr?: SSRSupport;
 };
+/**
+ * Mixin base props type for components using `FormField` to contain
+ * more complex multi-element, grouped choices, that require a Heading
+ * E.g. `RadioGroup`, `CheckboxGroup`, etc.
+ */
 export type FormFieldGroupWrappingProps = FormFieldWrappingProps & {
     LabelTag?: 'h3' | 'h4' | 'h5';
 };
-export type FormFieldProps = FormFieldGroupWrappingProps & {
+type FormFieldProps = FormFieldGroupWrappingProps & {
     /** Container className - alongside "FormField" */
     className: string;
     small?: boolean;
-    group?: boolean;
+    group?: boolean | 'inputlike';
     empty?: boolean;
     filled?: boolean;
     renderInput(className: InputClassNames, inputProps: FormFieldInputProps, addFocusProps: FocusPropMaker, isBrowser?: boolean): JSX.Element;

package/FormField.js CHANGED Viewed

@@ -52,12 +52,12 @@ const FormField = (props) => {
         }
         return focusProps;
     }, []);
-    const errorId = errorMessage ? 'error:' + domid : undefined;
-    const assistTextId = assistText ? 'assist:' + domid : undefined;
-    const labelId = LabelTag ? 'label:' + domid : undefined;
+    const errorId = errorMessage ? `error:${domid}` : undefined;
+    const assistTextId = assistText ? `assist:${domid}` : undefined;
+    const labelId = LabelTag ? `label:${domid}` : undefined;
     const reqStar = required && reqText !== false && (react_1.default.createElement("abbr", { className: "FormField__label__reqstar",
         // TODO: add mo-better i18n thinking
-        title: (reqText || 'Þarf að fylla út') + ': ' }, "*"));
+        title: `${reqText || 'Þarf að fylla út'}: ` }, "*"));
     const inputProps = {
         id: domid,
         disabled: disabled,
@@ -77,7 +77,7 @@ const FormField = (props) => {
             isBrowser && filled && 'filled',
             isBrowser && focused && 'focused',
         ], className), ref: props.wrapperRef },
-        LabelTag ? (react_1.default.createElement(LabelTag, { className: "FormField__label", id: labelId },
+        LabelTag ? (react_1.default.createElement(LabelTag, { className: "FormField__label", "data-inputlabel": group === 'inputlike' || undefined, id: labelId },
             ' ',
             reqStar,
             " ",

package/MainMenu/_PrimaryPanel.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { RefObject } from 'react';
+import React, { RefObject } from 'react';
 export type PrimaryPanelI18n = {
     backToMenu: string;
     backToMenuLong?: string;
@@ -9,7 +9,7 @@ export type MegaMenuItem = {
     href: string;
     lang?: string;
     current?: boolean;
-    target?: string;
+    target?: React.HTMLAttributeAnchorTarget;
 };
 export type MegaMenuPanel = {
     title: string;

package/MainMenu.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Cleanup } from '@reykjavik/hanna-utils';
 import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
 import { AuxilaryPanelIllustration, AuxiliaryPanelProps } from './MainMenu/_Auxiliary.js';
@@ -34,7 +35,7 @@ export type MainMenuItem = {
      */
     onClick?: (index: number, item: MainMenuItem) => void | boolean;
     controlsId?: string;
-    target?: JSX.IntrinsicElements['a']['target'];
+    target?: React.HTMLAttributeAnchorTarget;
 };
 export type MainMenuSeparator = '---';
 export type MainMenuItemList = Array<MainMenuItem | MainMenuSeparator>;

package/MainMenu.js CHANGED Viewed

@@ -6,7 +6,6 @@ const react_1 = tslib_1.__importStar(require("react"));
 const focusElm_1 = require("@hugsmidjan/qj/focusElm");
 const useShortState_1 = tslib_1.__importDefault(require("@hugsmidjan/react/hooks/useShortState"));
 const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
-const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const _Link_js_1 = require("./_abstract/_Link.js");
 const _Auxiliary_js_1 = require("./MainMenu/_Auxiliary.js");
@@ -98,20 +97,20 @@ const MainMenu = (props) => {
     const [laggyActivePanel, setLaggyActivePanel] = (0, useShortState_1.default)();
     const setActivePanel = (0, react_1.useMemo)(() => isBrowser
         ? (newActive, setFocus = true) => {
-            const htmlElmDataset = document.documentElement.dataset;
+            const htmlElm = document.documentElement;
+            const htmlElmDataset = htmlElm.dataset;
             // const menuElm = menuElmRef.current as HTMLElement;
             _setActivePanel((activePanel) => {
-                const scrollElm = (0, hanna_utils_1.getPageScrollElm)();
                 if (!newActive) {
                     activePanel && setLaggyActivePanel(activePanel, 1000);
-                    scrollElm.scrollTop = parseInt(htmlElmDataset.scrollTop || '') || 0;
+                    htmlElm.scrollTop = parseInt(htmlElmDataset.scrollTop || '') || 0;
                     delete htmlElmDataset.scrollTop;
                     delete htmlElmDataset.megaPanelActive;
                 }
                 else {
                     setLaggyActivePanel(undefined, 0);
-                    htmlElmDataset.scrollTop = String(scrollElm.scrollTop);
-                    scrollElm.scrollTop = 0;
+                    htmlElmDataset.scrollTop = String(htmlElm.scrollTop);
+                    htmlElm.scrollTop = 0;
                     htmlElmDataset.megaPanelActive = '';
                 }
                 if (setFocus) {

package/Multiselect/_Multiselect.search.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+import { TogglerGroupOptions } from '../_abstract/_TogglerGroup.js';
+import { TogglerGroupFieldOption } from '../_abstract/_TogglerGroupField.js';
+export declare const _weights: {
+    WHOLE_WORD: number;
+    STARTS_WITH: number;
+    CONTAINS: number;
+    VALUE_WEIGHT: number;
+    wordWeight: (wordIndex: number) => number;
+};
+export type SearchScoringfn = (
+/** The Multiselect item object to calculate search score for */
+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;
+export declare const defaultSearchScoring: SearchScoringfn;
+/** Returns a normalized, filtered list of options */
+export declare const filterItems: (options: TogglerGroupOptions<string>, searchQuery: string, searchScoringFn?: SearchScoringfn) => TogglerGroupOptions<string>;

package/Multiselect/_Multiselect.search.js ADDED Viewed

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterItems = exports.defaultSearchScoring = exports._weights = void 0;
+const WHOLE_WORD = 10000;
+const STARTS_WITH = 100;
+const CONTAINS = 1;
+const VALUE_WEIGHT = 1 / 10;
+/** Scoring weight modifier based on a word's positional index within the value */
+const wordWeight = (wordIndex) => 10 / (10 + wordIndex);
+// Exported for testing purposes
+exports._weights = {
+    WHOLE_WORD,
+    STARTS_WITH,
+    CONTAINS,
+    VALUE_WEIGHT,
+    wordWeight,
+};
+/**
+ * Calculates a score based on how well an item string (either label or value)
+ * matches a given list of query words.
+ * Splits the item string into words and scores each word.
+ * Favors full matches and matches at the start of the word.
+ * Weighs earlier words higher than words near the end.
+ *
+ * Limitation: Does currently not give extra points when query words
+ * appear in the correct order in the item string.
+ */
+const calcScore = (itemString, queryWords) => {
+    let score = 0;
+    queryWords.forEach((queryWord) => {
+        itemString.split(/\s+/).forEach((word, wi) => {
+            let wordScore = 0;
+            if (word === queryWord) {
+                wordScore += WHOLE_WORD;
+            }
+            else {
+                const pos = word.indexOf(queryWord);
+                if (pos === 0) {
+                    wordScore += STARTS_WITH;
+                }
+                else if (pos > 0) {
+                    wordScore += CONTAINS;
+                }
+            }
+            score += wordScore * wordWeight(wi);
+        });
+    });
+    return score;
+};
+const defaultSearchScoring = (item, queryWords) => {
+    var _a;
+    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;
+    let score = calcScore(label, queryWords);
+    if (!score) {
+        score = VALUE_WEIGHT * calcScore(value, queryWords);
+    }
+    return score;
+};
+exports.defaultSearchScoring = defaultSearchScoring;
+// ---------------------------------------------------------------------------
+/** Returns a normalized, filtered list of options */
+const filterItems = (options, searchQuery, searchScoringFn = exports.defaultSearchScoring) => {
+    if (!searchQuery.trim()) {
+        return [...options];
+    }
+    const queryWords = searchQuery.toLowerCase().trim().split(/\s+/);
+    return options
+        .map((item) => ({
+        item,
+        score: searchScoringFn(item, queryWords, searchQuery),
+    }))
+        .filter(({ score }) => score > 0)
+        .sort((a, b) => (a.score === b.score ? 0 : a.score < b.score ? 1 : -1))
+        .map(({ item }) => item);
+};
+exports.filterItems = filterItems;

package/Multiselect.d.ts ADDED Viewed

@@ -0,0 +1,64 @@
+import { TogglerGroupFieldProps } from './_abstract/_TogglerGroupField.js';
+import { SearchScoringfn } from './Multiselect/_Multiselect.search.js';
+export type MultiselectI18n = {
+    search: string;
+    buttonShow: string;
+    currentValues: string;
+    noneFoundMsg: string;
+};
+export type MultiselectProps = TogglerGroupFieldProps<string> & {
+    value?: Array<string>;
+    defaultValue?: Array<string>;
+    placeholder?: string;
+    small?: boolean;
+    /**
+     * Prevent the selected items from wrapping into multiple lines.
+     * Use this option when vertical space is limited.
+     */
+    nowrap?: boolean;
+    /**
+     * Custom function to calculate a search score for a given option item.
+     * Higher scores mean better matches.
+     *
+     * A score of zero (or less) means the item is not a valid match.
+     */
+    searchScoring?: SearchScoringfn;
+    /**
+     * Force display the current values at the top of the dropdown,
+     * even when the total options are fewer than
+     * `Multiselect.meta.summaryLimit`.
+     *
+     * NOTE: Using this option is generally not recommended.
+     */
+    forceSummary?: boolean;
+    /**
+     * Force the options to be searchable, even when they're
+     * fewer than `Multiselect.meta.searchableLimit`.
+     *
+     * NOTE: Using this option is generally not recommended.
+     */
+    forceSearchable?: boolean;
+    texts?: MultiselectI18n;
+    lang?: string;
+};
+export type MultiSelectOption = Exclude<MultiselectProps['options'][number], string>;
+export declare const Multiselect: {
+    (props: MultiselectProps): JSX.Element;
+    /** Configuration constants for the Multiselect components */
+    meta: {
+        /**
+         * The item-count where the list becomes searchable.
+         *
+         * (The search UI, including the on-screen keyboard, takes up a lot of space
+         * on mobile devices, so there's a balance that we want to strike.)
+         */
+        searchableLimit: number;
+        /**
+         * The item-count above which we display a summary of "current" values
+         * at the top of the drop-down list.
+         *
+         * (This summary just gets in the way with ultra short option lists.)
+         */
+        summaryLimit: number;
+    };
+};