@reykjavik/hanna-react 0.10.103 → 0.10.104

package/Layout.js

@@ -11,19 +11,16 @@ const _Link_js_1 = require("./_abstract/_Link.js");
 const utils_js_1 = require("./utils.js");
 exports.defaultLayoutTexts = {
     is: {
-        lang: 'is',
         skipLinkLabel: 'Valmynd',
         closeMenuLabel: 'Loka',
         closeMenuLabelLong: 'Loka valmynd',
     },
     en: {
-        lang: 'en',
         skipLinkLabel: 'Skip to navigation',
         closeMenuLabel: 'Close',
         closeMenuLabelLong: 'Close menu',
     },
     pl: {
-        lang: 'pl',
         skipLinkLabel: 'Przejdź do nawigacji',
         closeMenuLabel: 'Zamknij',
         closeMenuLabelLong: 'Zamknij menu',

package/MainMenu/_PrimaryPanel.d.ts

@@ -1,19 +1,18 @@
 import React, { RefObject } from 'react';
-import { Modifiers } from '@hugsmidjan/react/types';
 import { EitherObj } from '@reykjavik/hanna-utils';
+import { BemModifierProps } from '../utils/types.js';
 export type PrimaryPanelI18n = {
     backToMenu: string;
     backToMenuLong?: string;
 };
 export type MegaMenuItem = {
     current?: boolean;
-    /** Puts a modifier className on the menu item element. */
-    modifier?: Modifiers;
-} & EitherObj<{
+} & BemModifierProps & EitherObj<{
     label: string;
     summary?: string;
     href: string;
     lang?: string;
+    hrefLang?: string;
     target?: React.HTMLAttributeAnchorTarget;
 }, {
     Content: () => JSX.Element;

package/MainMenu/_PrimaryPanel.js

@@ -16,7 +16,7 @@ const PrimaryPanel = (props) => {
         react_1.default.createElement("h3", { className: "PrimaryPanel__title" },
             ' ',
             isBrowser && !isActive ? (react_1.default.createElement("button", { className: "MainMenu__mega__title-toggler", "aria-controls": panel.id, onClick: () => setActivePanel(panel, false), "aria-pressed": isActive, type: "button" }, panel.title)) : (panel.title)),
-        react_1.default.createElement("ul", { className: "PrimaryPanel__items" }, items.map((item, i) => (react_1.default.createElement("li", { key: i, className: (0, classUtils_1.modifiedClass)('PrimaryPanel__item', item.modifier), "aria-current": item.current || undefined }, item.Content ? (react_1.default.createElement(item.Content, null)) : (react_1.default.createElement(_Link_js_1.Link, { className: "PrimaryPanel__link", href: item.href, target: item.target, lang: item.lang },
+        react_1.default.createElement("ul", { className: "PrimaryPanel__items" }, items.map((item, i) => (react_1.default.createElement("li", { key: i, className: (0, classUtils_1.modifiedClass)('PrimaryPanel__item', item.modifier), "aria-current": item.current || undefined }, item.Content ? (react_1.default.createElement(item.Content, null)) : (react_1.default.createElement(_Link_js_1.Link, { className: "PrimaryPanel__link", href: item.href, target: item.target, lang: item.lang, hrefLang: item.hrefLang },
             react_1.default.createElement("span", { className: "PrimaryPanel__linkTitle" }, item.label),
             ' ',
             react_1.default.createElement("small", { className: "PrimaryPanel__summary" }, item.summary),

package/MainMenu.d.ts

@@ -1,21 +1,23 @@
 import React from 'react';
 import { Modifiers } from '@hugsmidjan/qj/classUtils';
 import { Cleanup } from '@reykjavik/hanna-utils';
-import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
+import { DefaultTexts, HannaLang } from '@reykjavik/hanna-utils/i18n';
 import { AuxilaryPanelIllustration, AuxiliaryPanelProps } from './MainMenu/_Auxiliary.js';
 import { MegaMenuItem, MegaMenuItemList, MegaMenuPanel, PrimaryPanelI18n } from './MainMenu/_PrimaryPanel.js';
 import { SSRSupportProps, WrapperElmProps } from './utils.js';
 export type MainMenuI18n = Cleanup<{
-    lang?: string;
     homeLabel?: string;
     title: string;
+    /** @deprecated Not used (Will be removed in v0.11) */
+    lang?: string;
 } & PrimaryPanelI18n>;
-export declare const defaultMainMenuTexts: DefaultTexts<Required<MainMenuI18n>>;
+export declare const defaultMainMenuTexts: DefaultTexts<Required<Omit<MainMenuI18n, 'lang'>>>;
 export type { AuxilaryPanelIllustration, AuxiliaryPanelProps, MegaMenuItem, MegaMenuItemList, MegaMenuPanel, };
 export type MainMenuItem = {
     label: string;
     labelLong?: string;
     lang?: string;
+    hrefLang?: string;
     /**
      * Puts a modifier className on the menu item element.
      *
@@ -63,7 +65,7 @@ export type MainMenuProps = {
     onItemClick?: (index: number, item: MainMenuItem) => void | boolean;
     activePanelId?: string;
     texts?: MainMenuI18n;
-    lang?: string;
+    lang?: HannaLang;
 } & SSRSupportProps & WrapperElmProps<null, 'aria-label'>;
 export declare const MainMenu: (props: MainMenuProps) => JSX.Element | null;
 export default MainMenu;

package/MainMenu.js

@@ -5,32 +5,29 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const focusElm_1 = require("@hugsmidjan/qj/focusElm");
-const useShortState_1 = tslib_1.__importDefault(require("@hugsmidjan/react/hooks/useShortState"));
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const _Link_js_1 = require("./_abstract/_Link.js");
 const _Auxiliary_js_1 = require("./MainMenu/_Auxiliary.js");
 const _PrimaryPanel_js_1 = require("./MainMenu/_PrimaryPanel.js");
 const HannaUIState_js_1 = require("./utils/HannaUIState.js");
 const useFormatMonitor_js_1 = require("./utils/useFormatMonitor.js");
+const useShortState_js_1 = require("./utils/useShortState.js");
 const utils_js_1 = require("./utils.js");
 const findActivePanel = (megaPanels, activeId) => activeId ? megaPanels.find((panel) => activeId === panel.id) : undefined;
 exports.defaultMainMenuTexts = {
     is: {
-        lang: 'is',
         title: 'Aðalvalmynd',
         homeLabel: 'Forsíða',
         backToMenu: 'Loka',
         backToMenuLong: 'Til baka í valmynd',
     },
     en: {
-        lang: 'en',
         title: 'Main Menu',
         homeLabel: 'Home page',
         backToMenu: 'Close',
         backToMenuLong: 'Close and return to menu',
     },
     pl: {
-        lang: 'pl',
         title: 'Menu główne',
         homeLabel: 'Strona główna',
         backToMenu: 'Zamknij',
@@ -70,16 +67,11 @@ const normalizeMenuItems = (itemsProp, megaPanels, homeLink, texts) => {
         }
         if (!hasHomeItem) {
             if (!homeLink || typeof homeLink === 'string') {
-                let label = texts.homeLabel;
-                let lang;
-                if (label == null) {
-                    const def = exports.defaultMainMenuTexts[texts.lang || 'en'] ||
-                        exports.defaultMainMenuTexts.en ||
-                        exports.defaultMainMenuTexts.is;
-                    label = def.homeLabel;
-                    lang = def.lang;
-                }
-                homeLink = { href: homeLink || '/', label, lang };
+                homeLink = {
+                    href: homeLink || '/',
+                    label: texts.homeLabel || exports.defaultMainMenuTexts[i18n_1.DEFAULT_LANG].homeLabel,
+                    lang: texts.homeLabel ? undefined : i18n_1.DEFAULT_LANG,
+                };
             }
             items.unshift(Object.assign(Object.assign({}, homeLink), { modifier: 'home' }));
         }
@@ -99,7 +91,7 @@ const MainMenu = (props) => {
     const pressedLinkRef = (0, react_1.useRef)(null);
     const activePanelRef = (0, react_1.useRef)(null);
     const [activePanel, _setActivePanel] = (0, react_1.useState)(() => isBrowser && findActivePanel(megaPanels, props.activePanelId));
-    const [laggyActivePanel, setLaggyActivePanel] = (0, useShortState_1.default)();
+    const [laggyActivePanel, setLaggyActivePanel] = (0, useShortState_js_1.useShortState)();
     const setActivePanel = (0, react_1.useMemo)(() => isBrowser
         ? (newActive, setFocus = true) => {
             const htmlElm = document.documentElement;
@@ -215,7 +207,7 @@ const MainMenu = (props) => {
             react_1.default.createElement(_Link_js_1.Link, { className: "MainMenu__link", href: item.href, target: item.target, "aria-label": labelLong, title: labelLong, onClick: () => {
                     const keepOpen = onItemClick && onItemClick(i, item) === false;
                     !keepOpen && closeHamburgerMenu();
-                }, lang: lang }, label)) : undefined // skip rendering non-link menu items server side
+                }, lang: lang, hrefLang: item.hrefLang }, label)) : undefined // skip rendering non-link menu items server side
             ));
         })),
         '\n\n',

package/Multiselect.d.ts

@@ -1,3 +1,4 @@
+import { HannaLang } from '@reykjavik/hanna-utils/i18n';
 import { TogglerGroupFieldProps } from './_abstract/_TogglerGroupField.js';
 import { SearchScoringfn } from './Multiselect/_Multiselect.search.js';
 export type MultiselectI18n = {
@@ -46,7 +47,7 @@ export type MultiselectProps = TogglerGroupFieldProps<string> & {
      */
     forceSearchable?: boolean;
     texts?: MultiselectI18n;
-    lang?: string;
+    lang?: HannaLang;
 };
 export declare const Multiselect: {
     (props: MultiselectProps): JSX.Element;

package/Multiselect.js

@@ -5,11 +5,12 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const domid_1 = tslib_1.__importDefault(require("@hugsmidjan/qj/domid"));
-const hooks_1 = require("@hugsmidjan/react/hooks");
 const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const _FocusTrap_js_1 = require("./_abstract/_FocusTrap.js");
 const _Multiselect_search_js_1 = require("./Multiselect/_Multiselect.search.js");
+const useDomid_js_1 = require("./utils/useDomid.js");
+const useOnClickOutside_js_1 = require("./utils/useOnClickOutside.js");
 const Checkbox_js_1 = tslib_1.__importDefault(require("./Checkbox.js"));
 const FormField_js_1 = tslib_1.__importStar(require("./FormField.js"));
 const TagPill_js_1 = tslib_1.__importDefault(require("./TagPill.js"));
@@ -62,7 +63,7 @@ const Multiselect = (props) => {
     const { onSelected, options: _options, disabled: _disabled, readOnly } = props;
     const disabled = _disabled === true;
     const disableds = !disabled && _disabled;
-    const name = (0, hooks_1.useDomid)(props.name);
+    const name = (0, useDomid_js_1.useDomid)(props.name);
     const [values, setValues] = (0, utils_js_1.useMixedControlState)(props, 'value', []);
     const filled = values.length > 0;
     const empty = !filled && !props.placeholder;
@@ -84,7 +85,7 @@ const Multiselect = (props) => {
             return newIsOpen;
         });
     };
-    (0, hooks_1.useOnClickOutside)(inputWrapperRef, () => toggleOpen(false));
+    (0, useOnClickOutside_js_1.useOnClickOutside)(inputWrapperRef, () => toggleOpen(false));
     const options = (0, react_1.useMemo)(() => _options.map((item) => (typeof item === 'string' ? { value: item } : item)), [_options]);
     const isSearchable = props.forceSearchable || options.length >= searchableLimit;
     /*

package/NameCard.d.ts

@@ -1,3 +1,4 @@
+import { HannaLang } from '@reykjavik/hanna-utils/i18n';
 import { WrapperElmProps } from './utils.js';
 export type NameCardI18n = {
     updatedLabel: string;
@@ -54,8 +55,8 @@ export type NameCardProps = {
     available?: boolean;
     /** Meta data about freshness status, etc. */
     updated?: string | Date;
-    lang?: string;
     texts?: NameCardI18n;
+    lang?: HannaLang;
     /** @deprecated Use `available` instead  (will be removed in v0.11) */
     vacancy?: boolean;
     /** @deprecated Use `contactInfo` instead  (will be removed in v0.11) */

package/NameCard.js

@@ -38,6 +38,13 @@ const defaultTexts = {
         vacancyLabel: 'Laus pláss',
         noVacancyLabel: 'Ekki laus pláss',
     },
+    pl: {
+        updatedLabel: 'Zaktualizowano',
+        availableLabel: '',
+        unavailableLabel: '',
+        vacancyLabel: 'Wakat',
+        noVacancyLabel: 'Brak wakatów',
+    },
 };
 const NameCard = (props) => {
     const { name, location, hours, aboutText, available = props.vacancy, // eslint-disable-line deprecation/deprecation

package/Pagination.d.ts

@@ -1,6 +1,6 @@
 import React, { MouseEvent } from 'react';
 import { EitherObj } from '@reykjavik/hanna-utils';
-import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
+import { DefaultTexts, HannaLang } from '@reykjavik/hanna-utils/i18n';
 import { SSRSupportProps, WrapperElmProps } from './utils.js';
 type StringContaining<Token extends string> = `${string}${Token}${string}`;
 export type PageTemplateString = StringContaining<'${page}'>;
@@ -19,8 +19,8 @@ export type PaginationProps = {
     'aria-controls'?: string;
     title?: string;
     submit?: boolean;
-    lang?: string;
     texts?: PaginationI18n;
+    lang?: HannaLang;
 } & EitherObj<{
     href: PageTemplateString | ((page: number) => string);
     onChange?: (page: number, clickEvent: MouseEvent) => void;

package/ReadSpeakerPlayer.js

@@ -7,6 +7,13 @@ const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const scriptTagId = 'rs_req_Init';
 const scriptTagSelector = `script#${scriptTagId}`;
+/**
+ * Counts the number of ReadSpeaker buttons mounted on the page.
+ * When mounting the first button, a script tag will be added to the page,
+ * and this counter incremented. When unmounting, this counter is decremented,
+ * and when it reaches `0`, the script tag will be removed from the page.
+ * GC FTW!
+ */
 let buttons = 0;
 exports.defaultReadSpeakerPlayerTexts = {
     en: { linkText: 'Listen', linkLabel: 'Listen to this page read outloud' },
@@ -23,13 +30,14 @@ const ReadSpeakerPlayer = (props) => {
     const { linkText, linkLabel } = (0, i18n_1.getTexts)({ lang: lang.slice(0, 2), texts }, exports.defaultReadSpeakerPlayerTexts);
     (0, react_1.useEffect)(() => {
         var _a, _b;
-        if (buttons < 0) {
-            return;
-        }
         if (buttons === 0) {
             if (document.querySelector(scriptTagSelector)) {
-                buttons = -1;
+                // If the script element has been already added to the page
+                // while our `button` count is at 0, then someone else
+                // must have injected the script, and is presumably managing it.
+                // Therefore, our job is done here.
                 return;
+                // NOTE: We check this every time, in case the script gets removed.
             }
             const script = document.createElement('script');
             script.id = scriptTagId;
@@ -50,7 +58,7 @@ const ReadSpeakerPlayer = (props) => {
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
-    // We're not trying to support dynamic changes to `customerId`
+    // NOTE: We do not support dynamic changes to `customerId`
     // or multiple different `customerId`s on the same page.
     // If you try that, things will be weird and wonky.
     ]);

package/SearchInput.d.ts

@@ -1,12 +1,34 @@
 import { RefObject } from 'react';
 import { FormFieldWrappingProps } from './FormField.js';
+type InputElmProps = Omit<JSX.IntrinsicElements['input'], 'className' | 'type' | 'disabled' | 'readOnly' | 'required' | 'onSubmit' | 'ref' | 'value'> & {
+    value?: string;
+};
 export type SearchInputProps = FormFieldWrappingProps & {
     small?: boolean;
     type?: string;
-    onButtonClick?: () => void;
+    /**
+     * Triggered when user hits ENTER key with the focus inside the input field.
+     *
+     * Return `true` to __allow__ the browser's default submit hehavior.
+     */
+    onSubmit?: (value: string) => boolean | void;
+    /**
+     * Custom action to perform when the user clicks the search button.
+     *
+     * Return `true` to __allow__ the browser's default submit hehavior.
+     *
+     * Defaults to `onSubmit`.
+     */
+    onButtonClick?: (value: string) => boolean | void;
+    /**
+     * Toggle the search `<button/>`.
+     *
+     * Defaults to `true` if onButtonClick is passed, otherwise false.
+     */
+    button?: boolean;
     buttonText?: string;
     inputRef?: RefObject<HTMLInputElement>;
     buttonRef?: RefObject<HTMLButtonElement>;
-} & JSX.IntrinsicElements['input'];
+} & InputElmProps;
 export declare const SearchInput: (props: SearchInputProps) => JSX.Element;
 export default SearchInput;

package/SearchInput.js

@@ -6,7 +6,7 @@ const react_1 = tslib_1.__importStar(require("react"));
 const FormField_js_1 = tslib_1.__importStar(require("./FormField.js"));
 const SearchInput = (props) => {
     var _a;
-    const _b = (0, FormField_js_1.groupFormFieldWrapperProps)(props), { onChange, onButtonClick, buttonText = 'Leita', fieldWrapperProps } = _b, inputElementProps = tslib_1.__rest(_b, ["onChange", "onButtonClick", "buttonText", "fieldWrapperProps"]);
+    const _b = (0, FormField_js_1.groupFormFieldWrapperProps)(props), { onChange, onKeyDown, onSubmit, onButtonClick, button, buttonText = 'Leita', inputRef, buttonRef, fieldWrapperProps } = _b, inputElementProps = tslib_1.__rest(_b, ["onChange", "onKeyDown", "onSubmit", "onButtonClick", "button", "buttonText", "inputRef", "buttonRef", "fieldWrapperProps"]);
     const { value, defaultValue, placeholder } = inputElementProps;
     const [hasValue, setHasValue] = (0, react_1.useState)(undefined);
     const filled = !!((_a = value !== null && value !== void 0 ? value : hasValue) !== null && _a !== void 0 ? _a : !!defaultValue);
@@ -17,10 +17,20 @@ const SearchInput = (props) => {
             setHasValue(!!e.target.value);
             onChange && onChange(e);
         };
+    const showButton = !!onButtonClick || button;
+    const handleButtonClick = onButtonClick || onSubmit;
     return (react_1.default.createElement(FormField_js_1.default, Object.assign({ extraClassName: "SearchInput", empty: empty, filled: filled }, fieldWrapperProps, { renderInput: (className, inputProps, addFocusProps) => (react_1.default.createElement("div", Object.assign({ className: className.input }, addFocusProps()),
-            react_1.default.createElement("input", Object.assign({ className: "SearchInput__input", onChange: _onChange }, inputProps, inputElementProps, { ref: props.inputRef })),
+            react_1.default.createElement("input", Object.assign({ className: "SearchInput__input", onChange: _onChange }, inputProps, { onKeyDown: onSubmit
+                    ? (e) => {
+                        if (e.key === 'Enter' && !onSubmit(e.currentTarget.value)) {
+                            e.preventDefault();
+                        }
+                        onKeyDown && onKeyDown(e);
+                    }
+                    : onKeyDown }, inputElementProps, { ref: inputRef })),
             ' ',
-            onButtonClick && (react_1.default.createElement("button", { className: "SearchInput__button", type: "button", onClick: onButtonClick, title: buttonText, ref: props.buttonRef, disabled: props.disabled || props.readOnly }, buttonText)))) })));
+            showButton && (react_1.default.createElement("button", { className: "SearchInput__button", type: "submit", onClick: handleButtonClick &&
+                    ((e) => !handleButtonClick(e.currentTarget.value) && e.preventDefault()), title: buttonText, ref: buttonRef, disabled: props.disabled || props.readOnly }, buttonText)))) })));
 };
 exports.SearchInput = SearchInput;
 exports.default = exports.SearchInput;

package/SearchResults.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { HannaLang } from '@reykjavik/hanna-utils/i18n';
 import { SearchResultsItemProps } from './SearchResults/_SearchResultsItem.js';
 import { WrapperElmProps } from './utils.js';
 export type SearchReesultI18n = {
@@ -32,7 +33,7 @@ export type SearchResultsProps = {
     pages?: number;
     loadMore?: () => void;
     texts?: SearchReesultI18n;
-    lang?: string;
+    lang?: HannaLang;
 } & WrapperElmProps;
 export declare const SearchResults: (props: SearchResultsProps) => JSX.Element;
 export default SearchResults;

package/SearchResults.js

@@ -7,9 +7,9 @@ const react_intersection_observer_1 = require("react-intersection-observer");
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const prettyNum_1 = require("@hugsmidjan/qj/prettyNum");
 const range_1 = tslib_1.__importDefault(require("@hugsmidjan/qj/range"));
-const hooks_1 = require("@hugsmidjan/react/hooks");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const _SearchResultsItem_js_1 = require("./SearchResults/_SearchResultsItem.js");
+const useDomid_js_1 = require("./utils/useDomid.js");
 const Alert_js_1 = tslib_1.__importDefault(require("./Alert.js"));
 const Tabs_js_1 = tslib_1.__importDefault(require("./Tabs.js"));
 const renderDefaultErrorText = () => (react_1.default.createElement(react_1.default.Fragment, null,
@@ -33,6 +33,14 @@ const defaultTexts = {
         loadMore: 'Sækja fleiri',
         // loadingMore: 'Sæki fleiri...',
     },
+    pl: {
+        lang: 'pl',
+        loadQueryTitle: 'Ładowanie wyników...',
+        resultsTitle: 'wyniki wyszukiwania dla',
+        noResultsTitle: 'Nie znaleziono wyników dla',
+        loadMore: 'Załaduj więcej',
+        // loadingMore: 'Ładowanie...',
+    },
 };
 const SearchResults_Tabs = (props) => {
     const { domid, filters, activeIdx, setFilter, lang } = props;
@@ -100,7 +108,7 @@ const renderLoadMore = (props, texts) => {
 const SearchResults = (props) => {
     const { filters, activeFilterIdx, setFilter, status, errorText, wrapperProps } = props;
     const texts = (0, i18n_1.getTexts)(props, defaultTexts);
-    const domid = (0, hooks_1.useDomid)();
+    const domid = (0, useDomid_js_1.useDomid)();
     return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('SearchResults', status !== 'results' && status, (wrapperProps || {}).className) }),
         renderTitle(props, texts),
         react_1.default.createElement(SearchResults_Tabs, { domid: domid, filters: filters, activeIdx: activeFilterIdx, setFilter: setFilter, lang: texts.lang }),

package/ShareButtons.d.ts

@@ -1,8 +1,9 @@
+import { HannaLang } from '@reykjavik/hanna-utils/i18n';
 import { ShareButtonI18n, ShareButtonPlatforms } from '@reykjavik/hanna-utils/shareButtonsUtils';
 import { SSRSupportProps, WrapperElmProps } from './utils.js';
 export type ShareButtonsProps = {
-    texts?: Readonly<ShareButtonI18n>;
-    lang?: string;
+    texts?: ShareButtonI18n;
+    lang?: HannaLang;
 } & SSRSupportProps & WrapperElmProps<null, 'aria-label'> & Partial<Record<ShareButtonPlatforms, boolean>>;
 export declare const ShareButtons: (props: ShareButtonsProps) => JSX.Element | null;
 export default ShareButtons;

package/SiteSearchAutocomplete.d.ts

@@ -1,18 +1,22 @@
 import React from 'react';
 import Autosuggest, { RenderSuggestion } from 'react-autosuggest';
-import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
+import { DefaultTexts, HannaLang } from '@reykjavik/hanna-utils/i18n';
 import { BemProps } from './utils/types.js';
+import { SiteSearchInputProps } from './SiteSearchInput.js';
 import { WrapperElmProps } from './utils.js';
 export type SiteSearchACI18n = {
-    lang?: string;
     /** Label for the autocomplete's combobox container div */
     label: string;
     /** Label for the text input */
     inputLabel: string;
     /** Placeholder text for the text input */
     placeholder?: string;
+    /** Label for the search button */
+    buttonText?: string;
     /** Label for the suggestions item list container */
     suggestionsLabel: string;
+    /** @deprecated Not used (Will be removed in v0.11) */
+    lang?: string;
 };
 export declare const defaultSiteSearchACTexts: DefaultTexts<SiteSearchACI18n>;
 export type SiteSearchAutocompleteProps<T> = {
@@ -25,17 +29,13 @@ export type SiteSearchAutocompleteProps<T> = {
     onSuggestionHighlighted?: (params: {
         suggestion: T;
     }) => void;
-    /** Triggered when user hits ENTER key with the focus inside the input field */
-    onSubmit?: (value: string) => void;
-    /** Custom action to perform when the user clicks the search button
-     *
-     * Defaults to `onSubmit`
-     */
-    onButtonClick?: (value: string) => void;
-    lang?: string;
     texts?: SiteSearchACI18n;
+    lang?: HannaLang;
     /** @deprecated  Use `text` prop instead  (will be removed in v0.11) */
     label?: string;
-} & BemProps & WrapperElmProps;
+} & Pick<SiteSearchInputProps, 'onSubmit' | 'onButtonClick'> & Pick<BemProps, 'bem'> & WrapperElmProps;
+/**
+ * @deprecated Use `<AutosuggestSearch InputComponent={SiteSearchInput} itemActionIcon="search" />` instead   (Will be removed in v0.11)
+ */
 export declare const SiteSearchAutocomplete: <T>(props: SiteSearchAutocompleteProps<T>) => JSX.Element;
 export default SiteSearchAutocomplete;

package/SiteSearchAutocomplete.js

@@ -5,28 +5,41 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const react_autosuggest_1 = tslib_1.__importDefault(require("react-autosuggest"));
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
-const SiteSearchInput_js_1 = tslib_1.__importDefault(require("./SiteSearchInput.js"));
+const SiteSearchInput_js_1 = require("./SiteSearchInput.js");
 exports.defaultSiteSearchACTexts = {
     is: {
-        lang: 'is',
         label: 'Leit á vefnum',
         inputLabel: 'Leitarorð',
+        buttonText: 'Leita',
         placeholder: 'Sláðu inn leitarorð',
         suggestionsLabel: 'Tillögur',
     },
     en: {
-        lang: 'en',
         label: 'Site search',
         inputLabel: 'Search terms',
+        buttonText: 'Search',
         placeholder: 'Enter search terms',
         suggestionsLabel: 'Suggestions',
     },
+    pl: {
+        label: 'Wyszukiwanie na stronie',
+        inputLabel: 'Wyszukiwane słowa',
+        buttonText: 'Szukaj',
+        placeholder: 'Wpisz wyszukiwane słowa',
+        suggestionsLabel: 'Sugestie',
+    },
 };
+/**
+ * @deprecated Use `<AutosuggestSearch InputComponent={SiteSearchInput} itemActionIcon="search" />` instead   (Will be removed in v0.11)
+ */
 const SiteSearchAutocomplete = (props) => {
-    const { suggestions, setSuggestions, renderSuggestion, getSuggestionValue, onSuggestionsFetchRequested, onSuggestionSelected, onSuggestionHighlighted, onSubmit, onButtonClick = onSubmit, bem = 'SiteSearchAutocomplete', wrapperProps, } = props;
+    const { suggestions, setSuggestions, renderSuggestion, getSuggestionValue, onSuggestionsFetchRequested, onSuggestionSelected, onSuggestionHighlighted, onSubmit, onButtonClick, bem = 'SiteSearchAutocomplete', wrapperProps, } = props;
     const [value, setValue] = (0, react_1.useState)('');
     const inputRef = (0, react_1.createRef)();
     const txt = (0, i18n_1.getTexts)(props, exports.defaultSiteSearchACTexts);
+    if (process.env.NODE_ENV !== 'production' && !txt.buttonText) {
+        console.warn('SiteSearchAutocomplete: Missing translation: `buttonText`');
+    }
     return (react_1.default.createElement(react_autosuggest_1.default, { theme: {
             container: bem,
             containerOpen: bem + '--open',
@@ -35,7 +48,7 @@ const SiteSearchAutocomplete = (props) => {
             suggestionsList: bem + '__list',
             suggestion: bem + '__item',
             suggestionHighlighted: bem + '__item--highlighted',
-        }, focusInputOnSuggestionClick: true, suggestions: suggestions, onSuggestionsClearRequested: () => setSuggestions([]), onSuggestionsFetchRequested: onSuggestionsFetchRequested, getSuggestionValue: getSuggestionValue, onSuggestionSelected: onSuggestionSelected, onSuggestionHighlighted: onSuggestionHighlighted, renderSuggestion: renderSuggestion || ((s) => String(s)), containerProps: { 'aria-label': txt.label }, renderSuggestionsContainer: ({ containerProps, children }) => (react_1.default.createElement("div", Object.assign({}, containerProps, { "aria-label": suggestions.length ? txt.suggestionsLabel : undefined }), children)), inputProps: {
+        }, focusInputOnSuggestionClick: true, suggestions: suggestions, onSuggestionsClearRequested: () => setSuggestions([]), onSuggestionsFetchRequested: onSuggestionsFetchRequested, getSuggestionValue: getSuggestionValue, onSuggestionSelected: onSuggestionSelected, onSuggestionHighlighted: onSuggestionHighlighted, renderSuggestion: renderSuggestion || ((s) => String(s)), containerProps: Object.assign(Object.assign({}, wrapperProps), { 'aria-label': txt.label }), renderSuggestionsContainer: ({ containerProps, children }) => (react_1.default.createElement("div", Object.assign({}, containerProps, { "aria-label": suggestions.length ? txt.suggestionsLabel : undefined }), children)), inputProps: {
             ref: inputRef,
             value: value,
             onChange: (_, { newValue }) => {
@@ -44,9 +57,10 @@ const SiteSearchAutocomplete = (props) => {
         }, renderInputComponent: (inputProps) => {
             /* prettier-ignore */
             const { className, type, disabled, readOnly, required, children } = inputProps, siteSearchProps = tslib_1.__rest(inputProps, ["className", "type", "disabled", "readOnly", "required", "children"]);
-            return (react_1.default.createElement(SiteSearchInput_js_1.default, Object.assign({}, siteSearchProps, { wrapperProps: wrapperProps, label: props.label || // eslint-disable-line deprecation/deprecation
-                    txt.inputLabel, placeholder: txt.placeholder, onSubmit: onSubmit && (() => onSubmit(value)), onButtonClick: onButtonClick && (() => onButtonClick(value)) })));
+            return (react_1.default.createElement(SiteSearchInput_js_1.SiteSearchInput, Object.assign({}, siteSearchProps, { label: props.label || // eslint-disable-line deprecation/deprecation
+                    txt.inputLabel, placeholder: txt.placeholder, buttonText: txt.buttonText, onSubmit: onSubmit && (() => onSubmit(value)), onButtonClick: onButtonClick && (() => onButtonClick(value)) })));
         } }));
 };
 exports.SiteSearchAutocomplete = SiteSearchAutocomplete;
+// eslint-disable-next-line deprecation/deprecation
 exports.default = exports.SiteSearchAutocomplete;

package/SiteSearchCurtain.js

@@ -4,12 +4,12 @@ exports.SiteSearchCurtain = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
-const hooks_1 = require("@hugsmidjan/react/hooks");
 const env_js_1 = require("./utils/env.js");
+const useLaggedState_js_1 = require("./utils/useLaggedState.js");
 // NOTE: This component is too low-level (and too esoteric and rarely used)
 // to justify `wrapperProps`
 const SiteSearchCurtain = (props) => {
-    const [focused, setFocused] = (0, hooks_1.useLaggedState)(false);
+    const [focused, setFocused] = (0, useLaggedState_js_1.useLaggedState)(false);
     (0, react_1.useEffect)(() => {
         const closeSearch = (e) => {
             if (e.key === 'Escape') {

package/SiteSearchInput.d.ts

@@ -1,20 +1,29 @@
-import React from 'react';
 import { FormFieldWrappingProps } from './FormField.js';
-type InputElmProps = Omit<JSX.IntrinsicElements['input'], 'className' | 'type' | 'disabled' | 'readOnly' | 'required' | 'onSubmit'>;
+type InputElmProps = Omit<JSX.IntrinsicElements['input'], 'className' | 'type' | 'disabled' | 'readOnly' | 'required' | 'onSubmit' | 'ref' | 'value'> & {
+    value?: string;
+};
 export type SiteSearchInputProps = Pick<FormFieldWrappingProps, 'id' | 'label' | 'ssr' | 'wrapperProps'> & {
-    /** Triggered when user hits ENTER key with the focus inside the input field
+    /**
+     * Triggered when user hits ENTER key with the focus inside the input field.
      *
-     * Return `true` to __allow__ the browser's default submit hehavior
+     * Return `true` to __allow__ the browser's default submit hehavior.
      */
-    onSubmit?: () => boolean | void;
-    /** Custom action to perform when the user clicks the search button
+    onSubmit?: (value: string) => boolean | void;
+    /**
+     * Custom action to perform when the user clicks the search button.
      *
-     * Return `true` to __allow__ the browser's default submit hehavior
+     * Return `true` to __allow__ the browser's default submit hehavior.
      *
-     * Defaults to `onSearch`
+     * Defaults to `onSubmit`.
      */
-    onButtonClick?: () => boolean | void;
+    onButtonClick?: (value: string) => boolean | void;
+    /**
+     * Toggle the search `<button/>`.
+     *
+     * Defaults to `true`.
+     */
+    button?: boolean;
     buttonText?: string;
 } & InputElmProps;
-export declare const SiteSearchInput: React.ForwardRefExoticComponent<Pick<SiteSearchInputProps, "form" | "label" | "slot" | "style" | "title" | "key" | "list" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "step" | "value" | "pattern" | "name" | "wrapperProps" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "size" | "src" | "multiple" | "alt" | "ssr" | "accept" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "enterKeyHint" | "height" | "max" | "maxLength" | "min" | "minLength" | "width" | "onButtonClick" | "buttonText"> & React.RefAttributes<HTMLInputElement>>;
+export declare const SiteSearchInput: (props: SiteSearchInputProps) => JSX.Element;
 export default SiteSearchInput;