@reykjavik/hanna-react 0.10.113 → 0.10.115

package/SearchResults/_SearchResultsItem.js

@@ -10,10 +10,10 @@ const SearchResultsItem = (props) => {
     const bem = highlight ? 'SearchResultsHighlightItem' : 'SearchResultsItem';
     const metaArr = (Array.isArray(meta) ? meta : [meta]);
     return (react_1.default.createElement("li", { className: bem },
-        react_1.default.createElement(_Link_js_1.Link, { className: bem + '__link', href: href },
-            react_1.default.createElement("h3", { className: bem + '__title' }, title),
-            metaArr.length > 0 && (react_1.default.createElement("span", { className: bem + '__meta' }, metaArr.map((item, i) => typeof item === 'function' ? item() : item && react_1.default.createElement("span", { key: i }, item)))),
-            highlight && image && react_1.default.createElement(_Image_js_1.Image, { bem: bem + '__image', src: image }),
-            react_1.default.createElement("div", { className: bem + '__summary', dangerouslySetInnerHTML: { __html: summary } }))));
+        react_1.default.createElement(_Link_js_1.Link, { className: `${bem}__link`, href: href },
+            react_1.default.createElement("h3", { className: `${bem}__title` }, title),
+            metaArr.length > 0 && (react_1.default.createElement("span", { className: `${bem}__meta` }, metaArr.map((item, i) => typeof item === 'function' ? item() : item && react_1.default.createElement("span", { key: i }, item)))),
+            highlight && image && react_1.default.createElement(_Image_js_1.Image, { bem: `${bem}__image`, src: image }),
+            react_1.default.createElement("div", { className: `${bem}__summary`, dangerouslySetInnerHTML: { __html: summary } }))));
 };
 exports.SearchResultsItem = SearchResultsItem;

package/SearchResults.js

@@ -85,9 +85,7 @@ const renderTitle = (props, texts) => {
         status === 'loadingquery'
             ? texts.loadQueryTitle
             : totalHits
-                ? (0, prettyNum_1.prettyNum)(totalHits, { lang: texts.lang }) +
-                    ' ' +
-                    texts.resultsTitle
+                ? `${(0, prettyNum_1.prettyNum)(totalHits, { lang: texts.lang })} ${texts.resultsTitle}`
                 : texts.noResultsTitle,
         react_1.default.createElement("span", { className: "SearchResults__query" }, query)));
 };

package/ShareButtons.js

@@ -22,7 +22,7 @@ const ShareButtons__item = (props) => {
     const buttonText = (0, shareButtonsUtils_1.getShareButtonLabel)(type, label);
     const popup = type !== 'email';
     return (react_1.default.createElement("li", { className: "ShareButtons__item" },
-        react_1.default.createElement(_Link_js_1.Link, { className: 'ShareButtons__link ShareButtons__link--' + type, href: href, title: buttonText, rel: "noopener noreferrer", target: popup ? '_blank' : undefined, onClick: popup ? shareButtonsUtils_1.openInPopup : undefined }, buttonText)));
+        react_1.default.createElement(_Link_js_1.Link, { className: `ShareButtons__link ShareButtons__link--${type}`, href: href, title: buttonText, rel: "noopener noreferrer", target: popup ? '_blank' : undefined, onClick: popup ? shareButtonsUtils_1.openInPopup : undefined }, buttonText)));
 };
 const ShareButtons = (props) => {
     const { texts, lang, ssr, facebook = true, twitter = true, linkedin, email, wrapperProps, } = props;
@@ -41,8 +41,8 @@ const ShareButtons = (props) => {
         return null;
     }
     const txt = texts ||
-        (docMeta && (shareButtonsUtils_1.shareButtonTexts[docMeta.lang] || shareButtonsUtils_1.shareButtonTexts[i18n_1.DEFAULT_LANG])) ||
-        {};
+        (docMeta && shareButtonsUtils_1.shareButtonTexts[docMeta.lang]) ||
+        shareButtonsUtils_1.shareButtonTexts[i18n_1.DEFAULT_LANG];
     const { label, buttonLabel, emailSubject } = txt;
     const className = (0, classUtils_1.modifiedClass)('ShareButtons', null, (wrapperProps || {}).className);
     if (!docMeta || ssr === 'ssr-only') {

package/SiteSearchAutocomplete.js

@@ -42,12 +42,12 @@ const SiteSearchAutocomplete = (props) => {
     }
     return (react_1.default.createElement(react_autosuggest_1.default, { theme: {
             container: bem,
-            containerOpen: bem + '--open',
-            suggestionsContainer: bem + '__container',
-            suggestionsContainerOpen: bem + '__container--open',
-            suggestionsList: bem + '__list',
-            suggestion: bem + '__item',
-            suggestionHighlighted: bem + '__item--highlighted',
+            containerOpen: `${bem}--open`,
+            suggestionsContainer: `${bem}__container`,
+            suggestionsContainerOpen: `${bem}__container--open`,
+            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: 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,

package/Skeleton.js

@@ -24,7 +24,7 @@ const Skeleton = (props) => {
     const gap = minmax(props.gap, 5, 1);
     const items = minmax(props.items, 20, 2) || 1;
     const { wrapperProps } = props;
-    const className = (0, classUtils_1.modifiedClass)('Skeleton', [props.text && 'text', height && 'height--' + height, gap && 'gap--' + gap], (wrapperProps || {}).className);
+    const className = (0, classUtils_1.modifiedClass)('Skeleton', [props.text && 'text', height && `height--${height}`, gap && `gap--${gap}`], (wrapperProps || {}).className);
     if (items) {
         return (react_1.default.createElement(react_1.default.Fragment, null, (0, range_1.default)(1, items).map((key) => (react_1.default.createElement("span", { key: key, className: className })))));
     }

package/SubHeading.js

@@ -8,7 +8,7 @@ const SubHeading = (props) => {
     const { small, Tag = 'h2', children, align, wide, wrapperProps } = props;
     return (react_1.default.createElement(Tag, Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('SubHeading', [
             small && 'small',
-            align === 'right' && 'align--' + align,
+            align === 'right' && `align--${align}`,
             !align && wide && 'wide',
         ], (wrapperProps || {}).className) }), children));
 };

package/TextInput.js

@@ -28,7 +28,8 @@ const TextInput = (props) => {
         if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) {
             setHasValue(true);
         }
-    }, []);
+    }, [] // eslint-disable-line react-hooks/exhaustive-deps
+    );
     return (react_1.default.createElement(FormField_js_1.default, Object.assign({ extraClassName: (0, classUtils_1.modifiedClass)('TextInput', [multiline && 'multiline']), empty: empty, filled: filled }, fieldWrapperProps, { renderInput: (className, inputProps, addFocusProps) => multiline ? (react_1.default.createElement("textarea", Object.assign({ className: className.input, onChange: _onChange }, inputProps, addFocusProps(inputElementProps), { ref: inputRef }))) : (react_1.default.createElement("input", Object.assign({ className: className.input, onChange: _onChange, type: type }, inputProps, addFocusProps(inputElementProps), { ref: inputRef }))) })));
 };
 exports.TextInput = TextInput;

package/VSpacer.js

@@ -35,7 +35,7 @@ const VSpacer = (props) => {
             bottomVal = undefined;
         }
     }
-    const className = (0, classUtils_1.modifiedClass)('VSpacer', [sizeVal, topVal && 'top--' + topVal, bottomVal && 'bottom--' + bottomVal], (wrapperProps || {}).className);
+    const className = (0, classUtils_1.modifiedClass)('VSpacer', [sizeVal, topVal && `top--${topVal}`, bottomVal && `bottom--${bottomVal}`], (wrapperProps || {}).className);
     return isWrapper ? (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: className }), children)) : (react_1.default.createElement("hr", Object.assign({}, wrapperProps, { className: className })));
 };
 exports.VSpacer = VSpacer;

package/VerticalTabsTOC.js

@@ -35,7 +35,7 @@ const mapToItemsById = (items, domid) => {
                 },
             };
             if (idx === 0) {
-                topItem.href = topItem.href || '#' + getItemId(subItem);
+                topItem.href = topItem.href || `#${getItemId(subItem)}`;
             }
         });
     });

package/_abstract/_AbstractCarousel.d.ts

@@ -3,13 +3,13 @@ import { EitherObj } from '@reykjavik/hanna-utils';
 import { SSRSupportProps, WrapperElmProps } from '../utils.js';
 import { DeprecatedSeenProp } from '../utils/seenEffect.js';
 import { BemProps } from '../utils/types.js';
-export type CarouselProps<I extends Record<string, unknown> = {}, P extends Record<string, unknown> | undefined = {}> = {
+export type CarouselProps<I extends Record<string, unknown> = Record<string, never>, P extends Record<string, unknown> | undefined = Record<string, never>> = {
     className?: string;
     /** @deprecated Ingored because never used (Will be removed in v0.11) */
     scrollRight?: boolean;
 } & SSRSupportProps & EitherObj<{
     items: Array<I>;
-    Component: (props: P extends undefined ? I : I & P) => ReactElement | null;
+    Component: (props: I & P) => ReactElement | null;
     ComponentProps?: P;
 }, {
     children: ReactNode;

package/_abstract/_AbstractCarousel.js

@@ -89,7 +89,7 @@ const AbstractCarousel = (props) => {
     if (!itemCount) {
         return null;
     }
-    const itemList = (react_1.default.createElement("div", { className: bem + '__itemlist', style: leftOffset
+    const itemList = (react_1.default.createElement("div", { className: `${bem}__itemlist`, style: leftOffset
             ? { '--Carousel--leftOffset': `${leftOffset}px` }
             : undefined, "data-scroll-snapping": leftOffset ? 'true' : undefined, ref: listRef }, children ||
         items.map((item, i) => (
@@ -98,14 +98,14 @@ const AbstractCarousel = (props) => {
     return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)(bem, modifier, 
         // Prefer `className` over `wrapperProps.className`
         className || (wrapperProps || {}).className), "data-sprinkled": isBrowser }),
-        title && react_1.default.createElement("h2", { className: bem + '__title' }, title),
-        isBrowser ? (react_1.default.createElement("div", { className: bem + '__itemlist-wrapper' },
+        title && react_1.default.createElement("h2", { className: `${bem}__title` }, title),
+        isBrowser ? (react_1.default.createElement("div", { className: `${bem}__itemlist-wrapper` },
             itemList,
-            activeItem > 0 && (react_1.default.createElement("div", { className: bem + '__itemlist-goLeft', onClick: () => {
+            activeItem > 0 && (react_1.default.createElement("div", { className: `${bem}__itemlist-goLeft`, onClick: () => {
                     delayedScrollLeft.cancel();
                     scrollToItem(activeItem - 1);
                 }, onMouseOver: () => delayedScrollLeft(activeItem), onMouseOut: () => delayedScrollLeft.cancel() })),
-            activeItem < itemCount - 1 && (react_1.default.createElement("div", { className: bem + '__itemlist-goRight', onClick: () => {
+            activeItem < itemCount - 1 && (react_1.default.createElement("div", { className: `${bem}__itemlist-goRight`, onClick: () => {
                     delayedScrollRight.cancel();
                     scrollToItem(activeItem + 1);
                 }, onMouseOver: () => delayedScrollRight(activeItem), onMouseOut: () => delayedScrollRight.cancel() })))) : (itemList),

package/_abstract/_AbstractModal.js

@@ -49,6 +49,7 @@ exports.defaultAbstractModalTexts = {
 const AbstractModal = (props) => {
     var _a;
     const { bem, modifier, closeDelay = 500, wrapperProps = {}, ssr } = props;
+    // eslint-disable-next-line deprecation/deprecation
     const isFickle = !((_a = props.stable) !== null && _a !== void 0 ? _a : props.fickle === false) || undefined;
     const txt = (0, i18n_1.getTexts)(props, exports.defaultAbstractModalTexts);
     const isBrowser = (0, utils_js_1.useIsBrowserSide)(ssr);

package/_abstract/_Blings.js

@@ -12,5 +12,5 @@ const inverseAlignments = {
     'right-ish': 'left-ish',
     right: 'left',
 };
-const Blings = (props) => (react_1.default.createElement(react_1.default.Fragment, null, props.blings.map(({ type, align, vertical, color, overlay, parent }, i) => (react_1.default.createElement(Bling_js_1.default, { key: type + '-' + i, type: type, align: props.mirror ? inverseAlignments[align || 'left'] : align, vertical: vertical, color: color, overlay: overlay, parent: parent })))));
+const Blings = (props) => (react_1.default.createElement(react_1.default.Fragment, null, props.blings.map(({ type, align, vertical, color, overlay, parent }, i) => (react_1.default.createElement(Bling_js_1.default, { key: `${type}-${i}`, type: type, align: props.mirror ? inverseAlignments[align || 'left'] : align, vertical: vertical, color: color, overlay: overlay, parent: parent })))));
 exports.Blings = Blings;

package/_abstract/_CardList.js

@@ -27,16 +27,16 @@ const CardList = (props) => {
     const fallbackImageUrl = (imgPlaceholder !== true && imgPlaceholder) || undefined;
     const fallbackImageStyle = fallbackImageUrl
         ? {
-            ['--' + bemPrefix + '--fallback']: `url("${fallbackImageUrl}")`,
+            [`--${bemPrefix}--fallback`]: `url("${fallbackImageUrl}")`,
         }
         : undefined;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        summaryElement ? (react_1.default.createElement("div", { className: bemPrefix + '__summary' },
-            title && react_1.default.createElement(TitleTag, { className: bemPrefix + '__title' }, title),
-            summaryElement)) : (title && react_1.default.createElement(TitleTag, { className: bemPrefix + '__title' }, title)),
+        summaryElement ? (react_1.default.createElement("div", { className: `${bemPrefix}__summary` },
+            title && react_1.default.createElement(TitleTag, { className: `${bemPrefix}__title` }, title),
+            summaryElement)) : (title && react_1.default.createElement(TitleTag, { className: `${bemPrefix}__title` }, title)),
         react_1.default.createElement("ul", Object.assign({}, wrapperProps, { className: props.standalone
                 ? (0, classUtils_1.modifiedClass)(bemPrefix, modifier, (wrapperProps || {}).className)
-                : bemPrefix + '__list', style: fallbackImageStyle }), cards.map((card, i) => (react_1.default.createElement("li", { key: i, className: bemPrefix + '__item' },
+                : `${bemPrefix}__list`, style: fallbackImageStyle }), cards.map((card, i) => (react_1.default.createElement("li", { key: i, className: `${bemPrefix}__item` },
             react_1.default.createElement(Card
             /* Assert as `ImageCardProps` to silence the imgPlaceholder false-positive */
             , Object.assign({}, card, { bem: bemPrefix, imgPlaceholder: !!imgPlaceholder })))))),

package/_abstract/_Quote.js

@@ -8,7 +8,7 @@ const _Link_js_1 = require("./_Link.js");
 const _Quote = (props) => {
     const { bem, children, by, byHref, wrapperProps } = props;
     return (react_1.default.createElement("figure", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)(bem, null, (wrapperProps || {}).className) }),
-        react_1.default.createElement("blockquote", { className: bem + '__quote' }, children),
-        by && (react_1.default.createElement("figcaption", { className: bem + '__by' }, byHref ? (react_1.default.createElement(_Link_js_1.Link, { href: byHref }, by)) : typeof by === 'string' ? (react_1.default.createElement("span", null, by)) : (by)))));
+        react_1.default.createElement("blockquote", { className: `${bem}__quote` }, children),
+        by && (react_1.default.createElement("figcaption", { className: `${bem}__by` }, byHref ? (react_1.default.createElement(_Link_js_1.Link, { href: byHref }, by)) : typeof by === 'string' ? (react_1.default.createElement("span", null, by)) : (by)))));
 };
 exports._Quote = _Quote;

package/_abstract/_Table.js

@@ -13,12 +13,12 @@ const TableCell = (props) => {
         ? ''
         : number === true
             ? 'Cell--number'
-            : 'Cell--number Cell--number--' + number;
+            : `Cell--number Cell--number--${number}`;
     const textClass = !text
         ? ''
         : text === true
             ? 'Cell--text'
-            : 'Cell--text Cell--text--' + text;
+            : `Cell--text Cell--text--${text}`;
     const telClass = tel ? 'Cell--tel' : '';
     return (react_1.default.createElement(Tag, { className: (0, classUtils_1.classes)(numberClass || telClass || textClass, className), colSpan: colSpan && colSpan > 1 ? colSpan : undefined, scope: rowScope ? 'row' : undefined }, typeof value === 'function' ? value(rowIdx) : value));
 };

package/_abstract/_TogglerGroup.js

@@ -25,7 +25,7 @@ const TogglerGroup = (props) => {
                 ? disabled.includes(i)
                 : disabled;
         const isChecked = values.includes(option.value);
-        return (react_1.default.createElement(Toggler, Object.assign({ key: i }, inputProps, { className: bem + '__item', name: name, Wrapper: "li" }, option, { label: option.label || option.value, onChange: (e) => {
+        return (react_1.default.createElement(Toggler, Object.assign({ key: i }, inputProps, { className: `${bem}__item`, name: name, Wrapper: "li" }, option, { label: option.label || option.value, onChange: (e) => {
                 inputProps.onChange && inputProps.onChange(e);
                 const { value } = option;
                 const checked = e.currentTarget.checked;

package/_abstract/_TogglerInput.d.ts

@@ -12,6 +12,7 @@ export type TogglerInputProps = {
      * Default: `"Þarf að fylla út"`
      * */
     reqText?: string | false;
+    hideLabel?: boolean;
     errorMessage?: string | JSX.Element;
     Wrapper?: 'div' | 'li';
     inputProps?: JSX.IntrinsicElements['input'];

package/_abstract/_TogglerInput.js

@@ -5,13 +5,14 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const useDomid_js_1 = require("../utils/useDomid.js");
+// eslint-disable-next-line complexity
 const TogglerInput = (props) => {
-    const { bem, modifier, className, label, invalid, errorMessage, Wrapper = 'div', required, reqText, type, id, innerWrap, wrapperProps, inputProps } = props, restInputProps = tslib_1.__rest(props, ["bem", "modifier", "className", "label", "invalid", "errorMessage", "Wrapper", "required", "reqText", "type", "id", "innerWrap", "wrapperProps", "inputProps"]);
+    const { bem, modifier, className, label, hideLabel, invalid, errorMessage, Wrapper = 'div', required, reqText, type, id, innerWrap, wrapperProps, inputProps } = props, restInputProps = tslib_1.__rest(props, ["bem", "modifier", "className", "label", "hideLabel", "invalid", "errorMessage", "Wrapper", "required", "reqText", "type", "id", "innerWrap", "wrapperProps", "inputProps"]);
     const domid = (0, useDomid_js_1.useDomid)(id);
-    const errorId = errorMessage && 'error' + domid;
-    const reqStar = required && reqText !== false && (react_1.default.createElement("abbr", { className: bem + '__label__reqstar', 
+    const errorId = errorMessage && `error${domid}`;
+    const reqStar = required && reqText !== false && (react_1.default.createElement("abbr", { className: `${bem}__label__reqstar`, 
         // FIXME: add mo-better i18n thinking
-        title: (reqText || 'Þarf að haka í') + ': ' }, "*"));
+        title: `${reqText || 'Þarf að haka í'}: ` }, "*"));
     const readOnly = restInputProps.readOnly || (inputProps || {}).readOnly;
     const labelContent = (react_1.default.createElement(react_1.default.Fragment, null,
         ' ',
@@ -19,14 +20,14 @@ const TogglerInput = (props) => {
         " ",
         label,
         ' '));
-    return (react_1.default.createElement(Wrapper, Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)(bem, modifier, 
+    return (react_1.default.createElement(Wrapper, Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)(bem, [modifier, hideLabel && 'nolabel'], 
         // Prefer `className` over `wrapperProps.className`
         className || (wrapperProps || {}).className) }),
-        react_1.default.createElement("input", Object.assign({ className: bem + '__input', type: type, id: domid, "aria-invalid": invalid || !!errorMessage || undefined, "aria-describedby": errorId }, restInputProps, inputProps, (readOnly && { disabled: true }))),
+        react_1.default.createElement("input", Object.assign({ className: `${bem}__input`, type: type, id: domid, "aria-invalid": invalid || !!errorMessage || undefined, "aria-describedby": errorId }, restInputProps, inputProps, (readOnly && { disabled: true }))),
         ' ',
-        react_1.default.createElement("label", { className: bem + '__label', htmlFor: domid },
-            innerWrap ? (react_1.default.createElement("span", { className: bem + '__label__wrap' }, labelContent)) : (labelContent),
+        react_1.default.createElement("label", { className: `${bem}__label`, htmlFor: domid },
+            innerWrap ? (react_1.default.createElement("span", { className: `${bem}__label__wrap` }, labelContent)) : (labelContent),
             readOnly && (react_1.default.createElement("input", { type: "hidden", name: restInputProps.name, value: restInputProps.value }))),
-        errorMessage && (react_1.default.createElement("div", { className: bem + '__error', id: errorId }, errorMessage))));
+        errorMessage && (react_1.default.createElement("div", { className: `${bem}__error`, id: errorId }, errorMessage))));
 };
 exports.TogglerInput = TogglerInput;

package/esm/AccordionList.js

@@ -14,7 +14,7 @@ const AccordionListItem = (props) => {
 };
 export const AccordionList = (props) => {
     const { items, ssr, wide, defaultOpen, wrapperProps } = props;
-    const [open, setOpenArray, mode] = useMixedControlState(props, 'open', []);
+    const [open, setOpenArray /*, mode */] = useMixedControlState(props, 'open', []);
     const onToggle = (index) => {
         setOpenArray((prevOpen) => {
             const opened = !prevOpen.includes(index);

package/esm/AutosuggestSearch.d.ts

@@ -18,8 +18,13 @@ export type AutosuggestSearchI18n = {
     lang?: string;
 };
 export declare const defaultAutosuggestSearchTexts: DefaultTexts<AutosuggestSearchI18n>;
+type EmptyMessage = {
+    message: string | JSX.Element;
+    type: 'empty' | 'loading';
+};
 export type AutosuggestSearchProps<T extends string | object> = {
     options: Array<T>;
+    emptyMessage?: EmptyMessage | EmptyMessage['message'];
     onInput: (value: string) => void;
     onSelected: (payload: {
         value: string;
@@ -38,3 +43,4 @@ export type AutosuggestSearchProps<T extends string | object> = {
     lang?: HannaLang;
 } & Pick<SearchInputProps, 'onSubmit' | 'onButtonClick' | 'button'> & WrapperElmProps;
 export declare const AutosuggestSearch: <T extends string | object>(props: AutosuggestSearchProps<T>) => JSX.Element;
+export {};

package/esm/AutosuggestSearch.js

@@ -28,7 +28,7 @@ export const defaultAutosuggestSearchTexts = {
     },
 };
 export const AutosuggestSearch = (props) => {
-    const { options, itemActionIcon, onInput, onSelected, onClearOptions, onSubmit, onButtonClick = onSubmit, button, getOptionValue = (opt) => typeof opt !== 'object' || !('value' in opt)
+    const { options, emptyMessage, itemActionIcon, onInput, onSelected, onClearOptions, onSubmit, onButtonClick = onSubmit, button, getOptionValue = (opt) => typeof opt !== 'object' || !('value' in opt)
         ? opt.toString()
         : opt.value != null
             ? opt.value.toString()
@@ -38,6 +38,7 @@ export const AutosuggestSearch = (props) => {
     const [value, setValue] = useState('');
     const inputRef = useRef(null);
     const txt = getTexts(props, defaultAutosuggestSearchTexts);
+    const showEmptyMessage = !options.length && emptyMessage;
     return (React.createElement(Autosuggest, { theme: {
             container: 'AutosuggestSearch',
             containerOpen: 'AutosuggestSearch--open',
@@ -46,11 +47,26 @@ export const AutosuggestSearch = (props) => {
             suggestionsList: modifiedClass('AutosuggestSearch__list', itemActionIcon && `action--${itemActionIcon}`),
             suggestion: 'AutosuggestSearch__item',
             suggestionHighlighted: 'AutosuggestSearch__item--highlighted',
-        }, focusInputOnSuggestionClick: true, suggestions: options, onSuggestionsClearRequested: onClearOptions, onSuggestionsFetchRequested: ({ value }) => onInput(value), getSuggestionValue: getOptionValue, onSuggestionSelected: (_event, data) => {
+        }, focusInputOnSuggestionClick: true, suggestions: showEmptyMessage ? [true] : options, onSuggestionsClearRequested: onClearOptions, onSuggestionsFetchRequested: ({ value }) => onInput(value), getSuggestionValue: showEmptyMessage
+            ? () => value // Return the input value in case the user uses the up/down keys to select the hidden empty message
+            : getOptionValue, onSuggestionSelected: (event, data) => {
+            if (showEmptyMessage) {
+                event.preventDefault();
+                return;
+            }
             onSelected({ value: data.suggestionValue, option: data.suggestion });
         }, 
         // onSuggestionHighlighted={onSuggestionHighlighted}
-        renderSuggestion: renderSuggestion, containerProps: Object.assign(Object.assign({}, wrapperProps), { 'aria-label': txt.label }), renderSuggestionsContainer: ({ containerProps, children }) => (React.createElement("div", Object.assign({}, containerProps, { "aria-label": options.length ? txt.suggestionsLabel : undefined }), children)), inputProps: {
+        renderSuggestion: showEmptyMessage ? () => '' : renderSuggestion, containerProps: Object.assign(Object.assign({}, wrapperProps), { 'aria-label': txt.label }), renderSuggestionsContainer: ({ containerProps, children }) => {
+            let contents = children;
+            if (showEmptyMessage) {
+                const { message, type } = typeof emptyMessage === 'string' || !('message' in emptyMessage)
+                    ? { message: emptyMessage, type: 'empty' }
+                    : emptyMessage;
+                contents = (React.createElement("div", { className: modifiedClass('AutosuggestSearch__emptyMessage', type !== 'empty' && type) }, message));
+            }
+            return (React.createElement("div", Object.assign({}, containerProps, { "aria-label": options.length ? txt.suggestionsLabel : undefined }), contents));
+        }, inputProps: {
             ref: inputRef,
             value: value,
             onChange: (_, { newValue }) => {

package/esm/BasicTable.js

@@ -7,15 +7,15 @@ const tableTypes = {
     number: 'data--number',
 };
 export const BasicTable = (props) => {
-    // eslint-disable-next-line deprecation/deprecation
-    const { align, fullWidth, type, tbody, tbodies, modifier, thead, tfoot, tableProps, caption, rowProps, compact, cols, wrapperProps, } = props;
+    const { align, fullWidth, type, tbody, tbodies, modifier, // eslint-disable-line deprecation/deprecation
+    thead, tfoot, tableProps, caption, rowProps, compact, cols, wrapperProps, } = props;
     return (React.createElement(ScrollWrapper, { bem: "TableWrapper", modifier: [
             'BasicTable',
-            modifier && 'BasicTable--' + modifier,
+            modifier && `BasicTable--${modifier}`,
             fullWidth
                 ? 'BasicTable--fullwidth'
                 : align === 'right'
-                    ? 'BasicTable--align--' + align
+                    ? `BasicTable--align--${align}`
                     : undefined,
         ], wrapperProps: wrapperProps },
         React.createElement(Table, Object.assign({ className: modifiedClass('BasicTable', [

package/esm/BgBox.d.ts

@@ -1,9 +1,12 @@
 import { ReactNode } from 'react';
-import { DeprecatedSeenProp, EffectProp } from './utils/seenEffect.js';
+import { DeprecatedSeenProp } from './utils/seenEffect.js';
 import { WrapperElmProps } from './utils.js';
 export type BgBoxProps = {
     className?: string;
     children: ReactNode;
-} & WrapperElmProps & DeprecatedSeenProp & EffectProp;
+} & WrapperElmProps & DeprecatedSeenProp & {
+    /** @deprecated  This prop does nothing nowadays (Will be removed in v0.11) */
+    effectType?: string;
+};
 export declare const BgBox: (props: BgBoxProps) => JSX.Element;
 export default BgBox;

package/esm/BgBox.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 export const BgBox = (props) => {
-    const { className, children, effectType, wrapperProps } = props;
+    const { className, children, wrapperProps } = props;
     return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('BgBox', undefined, 
         // Prefer `className` over `wrapperProps.className`
         className || (wrapperProps || {}).className) }), children));

package/esm/Bling.js

@@ -34,10 +34,10 @@ export const Bling = (props) => {
     const imageUrl = type ? getBlingUrl(type) : blingUrl;
     const inlineSvg = useGetSVGtext(imageUrl);
     return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('Bling', [
-            'align--' + (align && align in aligns ? align : 'left'),
-            vertical && vertical in valigns && 'vertical--' + vertical,
-            color && color in colors && 'color--' + color,
-            parent && parent in parentOffset && 'parent--' + parent,
+            `align--${align && align in aligns ? align : 'left'}`,
+            vertical && vertical in valigns && `vertical--${vertical}`,
+            color && color in colors && `color--${color}`,
+            parent && parent in parentOffset && `parent--${parent}`,
             overlay && 'overlay',
         ], 
         // Prefer `className` over `wrapperProps.className`

package/esm/Carousel.d.ts

@@ -1,4 +1,4 @@
 import { CarouselProps } from './_abstract/_AbstractCarousel.js';
 export type { CarouselProps } from './_abstract/_AbstractCarousel.js';
-export declare const Carousel: <I extends Record<string, unknown> = {}, P extends Record<string, unknown> | undefined = {}>(props: CarouselProps<I, P>) => JSX.Element;
+export declare const Carousel: <I extends Record<string, unknown> = Record<string, never>, P extends Record<string, unknown> | undefined = Record<string, never>>(props: CarouselProps<I, P>) => JSX.Element;
 export default Carousel;

package/esm/CarouselStepper.js

@@ -6,11 +6,11 @@ const defaultTexts = {
 const array = new Array(50).join(' ').split('');
 export const CarouselStepper = (props) => {
     const { current, itemCount, setCurrent, texts = defaultTexts, wrapperProps } = props;
-    const labelPrefix = texts.prefix ? texts.prefix + ' ' : '';
+    const labelPrefix = texts.prefix ? `${texts.prefix} ` : '';
     return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('CarouselStepper', null, (wrapperProps || {}).className) }), array.slice(0, itemCount).map((_, i) => {
         const isCurrent = current === i || undefined;
         const label = labelPrefix + (i + 1);
-        return (React.createElement("button", { key: i, className: 'CarouselStepper__button', type: "button", disabled: isCurrent, "aria-pressed": isCurrent, "aria-controls": props['aria-controls'], onClick: () => setCurrent(i), "aria-label": label, title: label }, label));
+        return (React.createElement("button", { key: i, className: "CarouselStepper__button", type: "button", disabled: isCurrent, "aria-pressed": isCurrent, "aria-controls": props['aria-controls'], onClick: () => setCurrent(i), "aria-label": label, title: label }, label));
     })));
 };
 export default CarouselStepper;

package/esm/CheckboxButton.d.ts

@@ -1,6 +1,6 @@
 import { TogglerInputProps } from './_abstract/_TogglerInput.js';
 /** @deprecated Use `CheckboxButtonProps` instead  (Will be removed in v0.11) */
 export type CheckboxProps = CheckboxButtonProps;
-export type CheckboxButtonProps = TogglerInputProps;
+export type CheckboxButtonProps = Omit<TogglerInputProps, 'hideLabel'>;
 export declare const CheckboxButton: (props: CheckboxButtonProps) => JSX.Element;
 export default CheckboxButton;

package/esm/CityBlock.js

@@ -9,7 +9,7 @@ const types = {
 export const CityBlock = (props) => {
     const align = props.align || 'right';
     const type = !props.illustration && props.type; // The presence of illustration prop suppresses type
-    const modifier = [aligns[align] && 'align--' + align, type && types[type] && type];
+    const modifier = [aligns[align] && `align--${align}`, type && types[type] && type];
     const imageProps = props.illustration != null
         ? { src: getIllustrationUrl(props.illustration) }
         : props.image;

package/esm/ContactBubble.js

@@ -98,7 +98,7 @@ export const ContactBubble = (props) => {
         };
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [isBrowser, alwaysShow, closeBubble]);
+    [isBrowser, alwaysShow, closeBubble /* , wrapperRef */]);
     useEffect(() => {
         const escHandler = (e) => e.key === 'Escape' && closeBubble();
         const outsideClickHandler = (e) => {
@@ -121,7 +121,9 @@ export const ContactBubble = (props) => {
             document.removeEventListener('keydown', escHandler);
             document.removeEventListener('click', outsideClickHandler, true);
         };
-    }, [open, closeBubble]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [open, closeBubble /* , wrapperRef */]);
     if (links.length === 0) {
         return null;
     }
@@ -130,7 +132,7 @@ export const ContactBubble = (props) => {
         React.createElement("ul", { className: "ContactBubble__list" }, links.map((linkInfo, i) => {
             const { href, label, extraLabel, target, onClick } = linkInfo;
             const icon = ensureIcon(linkInfo.icon);
-            const itemClass = modifiedClass('ContactBubble__item', icon && 'type--' + icon);
+            const itemClass = modifiedClass('ContactBubble__item', icon && `type--${icon}`);
             const onClickHandler = (e) => {
                 if (onClick) {
                     const doPreventDefault = onClick() !== true;

package/esm/Datepicker.js

@@ -109,7 +109,8 @@ const defaultDatepickerTexts = {
  * Internally, this component uses the [`react-datepicker`](https://reactdatepicker.com/) component.
  */
 export const Datepicker = (props) => {
-    const { placeholder, dateFormat, name, startDate, endDate, minDate, maxDate, isStartDate = false, isEndDate = false, onChange, datepickerExtraProps, inputRef, isoMode, texts, lang = props.localeCode, fieldWrapperProps, } = groupFormFieldWrapperProps(props);
+    const { placeholder, dateFormat, name, startDate, endDate, minDate, maxDate, isStartDate = false, isEndDate = false, onChange, datepickerExtraProps, inputRef, isoMode, texts, lang = props.localeCode, // eslint-disable-line deprecation/deprecation
+    fieldWrapperProps, } = groupFormFieldWrapperProps(props);
     const [value, setValue] = useMixedControlState.raw(props.value || props.initialDate, // eslint-disable-line deprecation/deprecation
     props.defaultValue, 'value');
     /*

package/esm/FileInput/_FileInput.utils.js

@@ -31,7 +31,7 @@ export const formatBytes = (bytes, lang = 'is', decimals = 2) => {
     }
     const i = Math.min(Math.floor(Math.log(Math.abs(bytes) / kThreshold) / Math.log(k)), units.length - 1);
     const scaled = bytes / Math.pow(k, i);
-    const formatted = (parseFloat(scaled.toFixed(decimals)) + '').replace('.', 
+    const formatted = `${parseFloat(scaled.toFixed(decimals))}`.replace('.', 
     // NOTE: As of 2022-11 Chrome still doesn't support Icelandic
     decimalSymbols[lang] || (1.1).toLocaleString(lang)[1]);
     return `${formatted} ${units[i]}`;

package/esm/FileInput.js

@@ -13,12 +13,11 @@ const defaultRemoveFileText = {
     pl: 'Usuń',
 };
 const defaultOnFilesRejected = (rejectedFiles) => {
-    window.alert('Error:\n' +
-        rejectedFiles
-            .map((elm) => {
-            return elm.name;
-        })
-            .join(', '));
+    window.alert(`Error:\n${rejectedFiles
+        .map((elm) => {
+        return elm.name;
+    })
+        .join(', ')}`);
 };
 const arrayToFileList = (arr) => {
     const fileList = new DataTransfer();
@@ -106,7 +105,7 @@ export const FileInput = (props) => {
         }
         onFilesUpdated(fileList, diff);
     };
-    return (React.createElement(FormField, Object.assign({ extraClassName: modifiedClass('FileInput', [multiple && 'multi']) }, fieldWrapperProps, { id: domid + '-fake', LabelTag: "h4", renderInput: (className, inputProps /* , addFocusProps */) => {
+    return (React.createElement(FormField, Object.assign({ extraClassName: modifiedClass('FileInput', [multiple && 'multi']) }, fieldWrapperProps, { id: `${domid}-fake`, LabelTag: "h4", renderInput: (className, inputProps /* , addFocusProps */) => {
             return (React.createElement("div", { className: className.control, ref: fileInputWrapper },
                 // Explicitly skip rendering of input element if no
                 // name prop is provided. This is implicitly what the

package/esm/Form.js

@@ -5,6 +5,6 @@ import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 // it makes little sense to add support for `wrapperProps` on top.
 export const Form = (props) => {
     const { children, align, wide, className } = props, formProps = __rest(props, ["children", "align", "wide", "className"]);
-    return (React.createElement("form", Object.assign({}, formProps, { className: modifiedClass('Form', [align === 'right' && 'align--' + align, !align && wide && 'wide'], className) }), children));
+    return (React.createElement("form", Object.assign({}, formProps, { className: modifiedClass('Form', [align === 'right' && `align--${align}`, !align && wide && 'wide'], className) }), children));
 };
 export default Form;

package/esm/FormField.d.ts

@@ -86,8 +86,8 @@ export declare const getFormFieldWrapperProps: (props: (FormFieldGroupWrappingPr
 }) => RequireExplicitUndefined<FormFieldGroupWrappingProps> & {
     small: boolean | undefined;
 };
-export declare const groupFormFieldWrapperProps: <T extends (FormFieldGroupWrappingProps | Pick<TogglerGroupFieldProps<"default", {}>, "label" | "className" | "id" | "wrapperProps" | "disabled" | "ssr" | "invalid" | "readOnly" | "required" | "errorMessage" | "reqText" | "assistText" | "hideLabel" | "wrapperRef" | "LabelTag">) & {
+export declare const groupFormFieldWrapperProps: <T extends (FormFieldGroupWrappingProps | Pick<TogglerGroupFieldProps<"default", {}>, "label" | "className" | "id" | "wrapperProps" | "disabled" | "ssr" | "invalid" | "readOnly" | "required" | "hideLabel" | "errorMessage" | "reqText" | "assistText" | "wrapperRef" | "LabelTag">) & {
     small?: boolean | undefined;
-}>(props: T) => Omit<T, "label" | "small" | "className" | "id" | "wrapperProps" | "disabled" | "ssr" | "invalid" | "readOnly" | "required" | "errorMessage" | "reqText" | "assistText" | "hideLabel" | "wrapperRef" | "LabelTag"> & {
+}>(props: T) => Omit<T, "label" | "small" | "className" | "id" | "wrapperProps" | "disabled" | "ssr" | "invalid" | "readOnly" | "required" | "hideLabel" | "errorMessage" | "reqText" | "assistText" | "wrapperRef" | "LabelTag"> & {
     fieldWrapperProps: ReturnType<typeof getFormFieldWrapperProps>;
 };