@reykjavik/hanna-react 0.10.113 → 0.10.114

package/AccordionList.js

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

package/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/AutosuggestSearch.js

@@ -31,7 +31,7 @@ exports.defaultAutosuggestSearchTexts = {
     },
 };
 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()
@@ -41,6 +41,7 @@ const AutosuggestSearch = (props) => {
     const [value, setValue] = (0, react_1.useState)('');
     const inputRef = (0, react_1.useRef)(null);
     const txt = (0, i18n_1.getTexts)(props, exports.defaultAutosuggestSearchTexts);
+    const showEmptyMessage = !options.length && emptyMessage;
     return (react_1.default.createElement(react_autosuggest_1.default, { theme: {
             container: 'AutosuggestSearch',
             containerOpen: 'AutosuggestSearch--open',
@@ -49,11 +50,26 @@ const AutosuggestSearch = (props) => {
             suggestionsList: (0, classUtils_1.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_1.default.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_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('AutosuggestSearch__emptyMessage', type !== 'empty' && type) }, message));
+            }
+            return (react_1.default.createElement("div", Object.assign({}, containerProps, { "aria-label": options.length ? txt.suggestionsLabel : undefined }), contents));
+        }, inputProps: {
             ref: inputRef,
             value: value,
             onChange: (_, { newValue }) => {

package/BasicTable.js

@@ -11,15 +11,15 @@ const tableTypes = {
     number: 'data--number',
 };
 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_1.default.createElement(_ScrollWrapper_js_1.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_1.default.createElement(_Table_js_1.Table, Object.assign({ className: (0, classUtils_1.modifiedClass)('BasicTable', [

package/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/BgBox.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const BgBox = (props) => {
-    const { className, children, effectType, wrapperProps } = props;
+    const { className, children, wrapperProps } = props;
     return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('BgBox', undefined, 
         // Prefer `className` over `wrapperProps.className`
         className || (wrapperProps || {}).className) }), children));

package/Bling.js

@@ -38,10 +38,10 @@ const Bling = (props) => {
     const imageUrl = type ? (0, assets_1.getBlingUrl)(type) : blingUrl;
     const inlineSvg = (0, useGetSVGtext_js_1.useGetSVGtext)(imageUrl);
     return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.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/CHANGELOG.md

@@ -4,6 +4,15 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.114
+
+_2023-12-13_
+
+- feat: Add prop `emptyMessage` to `AutosuggestSearch`
+- feat: Add component `Radio` as a standalone atomic widget
+- feat: Add prop `hideLabel` to `Checkbox` for minimal/atomic use
+- fix: Regression in `Checkbox`- and `Radio`-related option typing
+
 ## 0.10.113
 
 _2023-12-08_

package/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/CarouselStepper.js

@@ -10,11 +10,11 @@ const defaultTexts = {
 const array = new Array(50).join(' ').split('');
 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_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('CarouselStepper', null, (wrapperProps || {}).className) }), array.slice(0, itemCount).map((_, i) => {
         const isCurrent = current === i || undefined;
         const label = labelPrefix + (i + 1);
-        return (react_1.default.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_1.default.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));
     })));
 };
 exports.CarouselStepper = CarouselStepper;

package/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/CityBlock.js

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

package/ContactBubble.js

@@ -103,7 +103,7 @@ const ContactBubble = (props) => {
         };
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [isBrowser, alwaysShow, closeBubble]);
+    [isBrowser, alwaysShow, closeBubble /* , wrapperRef */]);
     (0, react_1.useEffect)(() => {
         const escHandler = (e) => e.key === 'Escape' && closeBubble();
         const outsideClickHandler = (e) => {
@@ -126,7 +126,9 @@ 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;
     }
@@ -135,7 +137,7 @@ const ContactBubble = (props) => {
         react_1.default.createElement("ul", { className: "ContactBubble__list" }, links.map((linkInfo, i) => {
             const { href, label, extraLabel, target, onClick } = linkInfo;
             const icon = (0, exports.ensureIcon)(linkInfo.icon);
-            const itemClass = (0, classUtils_1.modifiedClass)('ContactBubble__item', icon && 'type--' + icon);
+            const itemClass = (0, classUtils_1.modifiedClass)('ContactBubble__item', icon && `type--${icon}`);
             const onClickHandler = (e) => {
                 if (onClick) {
                     const doPreventDefault = onClick() !== true;

package/Datepicker.js

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

package/FileInput/_FileInput.utils.js

@@ -36,7 +36,7 @@ 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/FileInput.js

@@ -16,12 +16,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();
@@ -109,7 +108,7 @@ const FileInput = (props) => {
         }
         onFilesUpdated(fileList, diff);
     };
-    return (react_1.default.createElement(FormField_js_1.default, Object.assign({ extraClassName: (0, classUtils_1.modifiedClass)('FileInput', [multiple && 'multi']) }, fieldWrapperProps, { id: domid + '-fake', LabelTag: "h4", renderInput: (className, inputProps /* , addFocusProps */) => {
+    return (react_1.default.createElement(FormField_js_1.default, Object.assign({ extraClassName: (0, classUtils_1.modifiedClass)('FileInput', [multiple && 'multi']) }, fieldWrapperProps, { id: `${domid}-fake`, LabelTag: "h4", renderInput: (className, inputProps /* , addFocusProps */) => {
             return (react_1.default.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/Form.js

@@ -8,7 +8,7 @@ const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 // it makes little sense to add support for `wrapperProps` on top.
 const Form = (props) => {
     const { children, align, wide, className } = props, formProps = tslib_1.__rest(props, ["children", "align", "wide", "className"]);
-    return (react_1.default.createElement("form", Object.assign({}, formProps, { className: (0, classUtils_1.modifiedClass)('Form', [align === 'right' && 'align--' + align, !align && wide && 'wide'], className) }), children));
+    return (react_1.default.createElement("form", Object.assign({}, formProps, { className: (0, classUtils_1.modifiedClass)('Form', [align === 'right' && `align--${align}`, !align && wide && 'wide'], className) }), children));
 };
 exports.Form = Form;
 exports.default = exports.Form;

package/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>;
 };

package/FormField.js

@@ -64,7 +64,7 @@ const FormField = (props) => {
         required: required,
         readOnly: readOnly,
         'aria-invalid': isInvalid,
-        'aria-describedby': assistTextId && errorId ? assistTextId + ' ' + errorId : assistTextId || errorId,
+        'aria-describedby': assistTextId && errorId ? `${assistTextId} ${errorId}` : assistTextId || errorId,
         'aria-labelledby': labelId, // undefined if normalLabel
     };
     return (react_1.default.createElement("div", Object.assign({ ref: props.wrapperRef }, wrapperProps, { className: (0, classUtils_1.modifiedClass)('FormField', [

package/Heading.js

@@ -16,7 +16,7 @@ const Heading = (props) => {
     const suppressWarning = process.env.NODE_ENV !== 'production' && Tag === 'h1' ? true : undefined;
     return (react_1.default.createElement(Tag, Object.assign({}, wrapperProps, { "data-dev-forcedh1": suppressWarning, className: (0, classUtils_1.modifiedClass)('Heading', [
             sizes[size],
-            align === 'right' && 'align--' + align,
+            align === 'right' && `align--${align}`,
             !align && wide && 'wide',
             (wrapperProps || {}).className,
         ]) }), children));

package/IframeBlock.js

@@ -15,7 +15,7 @@ const iframe_resizer_react_1 = tslib_1.__importDefault(require("iframe-resizer-r
  */
 const IframeBlock = (props) => {
     const { title, src, framed, compact, align } = props;
-    const className = (0, classUtils_1.modifiedClass)('IframeBlock', [framed && 'framed', compact && 'compact', align === 'right' && 'align--' + align], (props.wrapperProps || {}).className);
+    const className = (0, classUtils_1.modifiedClass)('IframeBlock', [framed && 'framed', compact && 'compact', align === 'right' && `align--${align}`], (props.wrapperProps || {}).className);
     if (typeof props.height === 'number') {
         const { wrapperProps, scrolling, height } = props;
         return (react_1.default.createElement("iframe", Object.assign({}, wrapperProps, { className: className, title: title, src: src, 

package/InfoHero.js

@@ -74,7 +74,7 @@ const InfoHero = (props) => {
     const blings = typeof blingType === 'object'
         ? blingType
         : (blingType && blingOptions[blingType]) || blingOptions.waves; // default to `waves`
-    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('InfoHero', 'align--' + alignment, (wrapperProps || {}).className) }),
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('InfoHero', `align--${alignment}`, (wrapperProps || {}).className) }),
         react_1.default.createElement("div", { className: "InfoHero__content" },
             react_1.default.createElement("h1", { className: "InfoHero__title" }, title),
             titleBlurb && react_1.default.createElement("div", { className: "InfoHero__titleblurb" }, titleBlurb),

package/IslandBlock.js

@@ -15,7 +15,7 @@ const IslandBlock = (props) => {
             content,
             image: shapes ? { src: (0, assets_1.getFormheimurUrl)(shapes), inline: true } : image || {},
         };
-    return (react_1.default.createElement(_Block_js_1.Block, Object.assign({ wrapperProps: wrapperProps, bem: "IslandBlock", modifier: 'align--' + alignment }, blockProps)));
+    return (react_1.default.createElement(_Block_js_1.Block, Object.assign({ wrapperProps: wrapperProps, bem: "IslandBlock", modifier: `align--${alignment}` }, blockProps)));
 };
 exports.IslandBlock = IslandBlock;
 exports.default = exports.IslandBlock;

package/IslandPageBlock.js

@@ -15,7 +15,7 @@ const IslandPageBlock = (props) => {
     const { title, summary, buttons, illustration, image, align, background, wrapperProps, } = props;
     const alignment = align && constants_js_1.aligns[align] ? align : 'right';
     const bg = backgrounds[background || 'none'];
-    return (react_1.default.createElement(_Block_js_1.Block, { wrapperProps: wrapperProps, bem: "IslandPageBlock", modifier: ['align--' + alignment, bg && 'background--' + bg], content: { title, summary, buttons }, image: illustration ? { src: (0, assets_1.getIllustrationUrl)(illustration) } : image || {} }));
+    return (react_1.default.createElement(_Block_js_1.Block, { wrapperProps: wrapperProps, bem: "IslandPageBlock", modifier: [`align--${alignment}`, bg && `background--${bg}`], content: { title, summary, buttons }, image: illustration ? { src: (0, assets_1.getIllustrationUrl)(illustration) } : image }));
 };
 exports.IslandPageBlock = IslandPageBlock;
 exports.default = exports.IslandPageBlock;

package/MainMenu.js

@@ -173,7 +173,9 @@ const _MainMenu = (props) => {
             document.removeEventListener('keydown', escHandler);
             document.removeEventListener('click', clickHandler, true);
         };
-    }, [hasActivePanel, setActivePanel, isBrowser]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [hasActivePanel, setActivePanel, isBrowser /* , menuElmRef */]);
     if (menuItems.length === 0) {
         return null;
     }

package/MainMenu2.js

@@ -71,7 +71,6 @@ const iconMap = {
  */
 const getRenderers = (props) => {
     const { onItemClick, closeMenu, isBrowser } = props;
-    // eslint-disable-next-line complexity
     const renderItem = (classPrefix, item, opts = {}) => {
         const { key, Tag = 'li', button } = opts;
         if (typeof item === 'function') {

package/MobileMenuToggler/_useMobileMenuToggling.js

@@ -48,7 +48,7 @@ const useMobileMenuToggling = (opts) => {
             const toggler = typeof togglerElm === 'string' ? document.querySelector(togglerElm) : togglerElm;
             const menuElmId = toggler === null || toggler === void 0 ? void 0 : toggler.getAttribute('aria-controls');
             if (menuElmId) {
-                (0, hanna_utils_1.focusElement)('#' + menuElmId);
+                (0, hanna_utils_1.focusElement)(`#${menuElmId}`);
             }
         }
     };

package/Multiselect/_Multiselect.search.d.ts

@@ -16,4 +16,4 @@ queryWords: Array<string>,
 rawQuery: string) => number;
 export declare const defaultSearchScoring: SearchScoringfn;
 /** Returns a normalized, filtered list of options */
-export declare const filterItems: <Extras = {}>(options: TogglerGroupOptions<string, Extras>, searchQuery: string, searchScoringFn?: SearchScoringfn) => TogglerGroupOptions<string, Extras>;
+export declare const filterItems: <Extras = Record<string, never>>(options: TogglerGroupOptions<string, Extras>, searchQuery: string, searchScoringFn?: SearchScoringfn) => TogglerGroupOptions<string, Extras>;

package/Multiselect.js

@@ -224,7 +224,6 @@ const Multiselect = (props) => {
                             removable: true,
                             onRemove: () => {
                                 handleCheckboxSelection(item);
-                                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                                 inputWrapperRef
                                     .current.querySelector('.Multiselect__choices')
                                     .focus();

package/NameCard.js

@@ -18,7 +18,7 @@ const _telToContactInfo = (tel) => {
     }
     tel = typeof tel === 'string' ? [tel] : tel;
     return tel.map((tel) => ({
-        href: 'tel:' + tel,
+        href: `tel:${tel}`,
         value: tel,
     }));
 };

package/PageHeading.js

@@ -6,7 +6,7 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const PageHeading = (props) => {
     const { Tag = 'h1', align, small, children, wrapperProps } = props;
-    return (react_1.default.createElement(Tag, Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('PageHeading', [small && 'small', align === 'right' && 'align--' + align], (wrapperProps || {}).className) }), children));
+    return (react_1.default.createElement(Tag, Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('PageHeading', [small && 'small', align === 'right' && `align--${align}`], (wrapperProps || {}).className) }), children));
 };
 exports.PageHeading = PageHeading;
 exports.default = exports.PageHeading;

package/Pagination.js

@@ -10,8 +10,8 @@ const Pagination_privates_js_1 = require("./utils/Pagination.privates.js");
 const utils_js_1 = require("./utils.js");
 const PaginationButton = (props) => {
     const { page, label, modifier, disabled, onChange, href } = props;
-    const labelLong = props.labelLong.replace(/\$\{page\}/, page + '');
-    const labelShort = label ? label.replace(/\$\{page\}/, page + '') : page + '';
+    const labelLong = props.labelLong.replace(/\$\{page\}/, `${page}`);
+    const labelShort = label ? label.replace(/\$\{page\}/, `${page}`) : `${page}`;
     const btnProps = {
         key: props.key,
         className: (0, classUtils_1.modifiedClass)('Pagination__button', modifier),

package/Radio.d.ts

@@ -0,0 +1,3 @@
+import { TogglerInputProps } from './_abstract/_TogglerInput.js';
+export type RadioProps = Omit<TogglerInputProps, 'reqText'>;
+export declare const Radio: (props: RadioProps) => JSX.Element;

package/Radio.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Radio = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const _TogglerInput_js_1 = require("./_abstract/_TogglerInput.js");
+const Radio = (props) => (react_1.default.createElement(_TogglerInput_js_1.TogglerInput, Object.assign({ bem: "Radio" }, props, { type: "radio", reqText: false })));
+exports.Radio = Radio;

package/RadioGroup.d.ts

@@ -1,6 +1,4 @@
 import { TogglerGroupFieldOption, TogglerGroupFieldOptions, TogglerGroupFieldProps } from './_abstract/_TogglerGroupField.js';
-import { TogglerInputProps } from './_abstract/_TogglerInput.js';
-type RadioProps = Omit<TogglerInputProps, 'reqText'>;
 export type RadioGroupProps = TogglerGroupFieldProps & {
     layout?: 'inline';
     value?: string;
@@ -8,9 +6,5 @@ export type RadioGroupProps = TogglerGroupFieldProps & {
 };
 export type RadioGroupOption = TogglerGroupFieldOption;
 export type RadioGroupOptions = TogglerGroupFieldOptions;
-export declare const RadioGroup: {
-    (props: RadioGroupProps): JSX.Element;
-    /** @deprecated Exposed for testing purposes only. This may disappear at any time. */
-    __Radio: (props: RadioProps) => JSX.Element;
-};
+export declare const RadioGroup: (props: RadioGroupProps) => JSX.Element;
 export default RadioGroup;

package/RadioGroup.js

@@ -4,10 +4,7 @@ exports.RadioGroup = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const _TogglerGroupField_js_1 = require("./_abstract/_TogglerGroupField.js");
-const _TogglerInput_js_1 = require("./_abstract/_TogglerInput.js");
-const Radio = (props) => react_1.default.createElement(_TogglerInput_js_1.TogglerInput, Object.assign({}, props, { bem: "Radio", type: "radio" }));
-const RadioGroup = (props) => (react_1.default.createElement(_TogglerGroupField_js_1.TogglerGroupField, Object.assign({}, props, { bem: "RadioGroup", modifier: props.layout, isRadio: true, Toggler: Radio })));
+const Radio_js_1 = require("./Radio.js");
+const RadioGroup = (props) => (react_1.default.createElement(_TogglerGroupField_js_1.TogglerGroupField, Object.assign({}, props, { bem: "RadioGroup", modifier: props.layout, isRadio: true, Toggler: Radio_js_1.Radio })));
 exports.RadioGroup = RadioGroup;
-/** @deprecated Exposed for testing purposes only. This may disappear at any time. */
-exports.RadioGroup.__Radio = Radio; // eslint-disable-line deprecation/deprecation
 exports.default = exports.RadioGroup;

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;