@reykjavik/hanna-react 0.10.112 → 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/Alert.js

@@ -52,8 +52,8 @@ const Alert = (props) => {
     closeUrl, closable = !!(onClose || closeUrl != null), ssr, onClosed, wrapperProps, } = props;
     const autoClose = Math.max(props.autoClose || 0, 0);
     const closing = (0, react_1.useRef)();
-    const [open, setOpen] = (0, react_1.useState)(!!ssr);
     const isBrowser = (0, utils_js_1.useIsBrowserSide)(ssr);
+    const [open, setOpen] = (0, react_1.useState)(!isBrowser);
     const showCloseButton = closable && (isBrowser || closeUrl != null);
     const { closeLabel, closeLabelLong } = (0, i18n_1.getTexts)(props, exports.defaultAlertTexts);
     (0, react_1.useEffect)(() => {

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,22 +11,22 @@ const tableTypes = {
     number: 'data--number',
 };
 const BasicTable = (props) => {
-    // eslint-disable-next-line deprecation/deprecation
-    const { align, fullWidth, type, tbody, tbodies, modifier } = 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: props.wrapperProps },
+        ], wrapperProps: wrapperProps },
         react_1.default.createElement(_Table_js_1.Table, Object.assign({ className: (0, classUtils_1.modifiedClass)('BasicTable', [
-                props.compact && 'compact',
+                compact && 'compact',
                 type && tableTypes[type],
                 modifier,
-            ]), cols: props.cols, caption: props.caption, thead: props.thead, tfoot: props.tfoot }, (tbody ? { tbody } : { tbodies }), { wrapperProps: props.tableProps }))));
+            ]), cols: cols, caption: caption, thead: thead, tfoot: tfoot }, (tbody ? { tbody } : { tbodies }), { rowProps: rowProps, wrapperProps: tableProps }))));
 };
 exports.BasicTable = BasicTable;
 exports.default = exports.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,42 @@
 
 - ... <!-- 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_
+
+- feat: Add component `MainMenu2`
+- feat: Make `Datepicker` more flexible when parsing manual input strings –
+  adds several, localized default formats.
+- feat: Add accessibility helper component `FocusTrap`
+- Decouple all mobile-menu toggling logic from the `Layout` component
+  - feat: Deprecate `useFormatMonitor` media flags `*Hamburger`, `*Topmenu`
+  - feat: Deprecate `useMenuToggling` hook
+  - feat: Add `.Layout__header__navlink`
+  - feat: Make `MainMenu` define its own toggler button and "Hamburger" mode
+- feat: Add standalone `MobileMenuToggler` component
+- `Multiselect`:
+  - fix: Suppress required asterisks on individual options
+  - fix: Deduplicate the currentvalues list
+  - fix: Manage focus after clicking remove buttons on currentvalues
+- `BasicTable`:
+  - feat: Pass `rowData` as 3rd param to `rowProps` callbacks
+  - fix: Actually apply `rowProps` to the `<tr/>`s. (Awk)
+- `ButtonPrimary`, `ButtonSecondary`, `ButtonTertiary`, `ButtonBack`,
+  `TextButton`:
+  - feat: Allow props `className` and `style`
+- feat: Tweak `ContactBubble`'s show/hide scroll-distance thresholds
+- fix: Suppress `MainMenu` server-rendering no-op `<button/>` elements
+
 ## 0.10.112
 
 _2023-11-17_
@@ -156,7 +192,7 @@ _2023-07-26_
 _2023-07-25_
 
 - feat: Add optional `altText` parameter to `useGetSVGtext()`
-- feat: Export `useMenuToggling` from 'utils' module
+- feat: Export `useMenuToggling` from `utils` module
 - feat: Export `SSRSupportProps` type
 - perf: Reduce render thrashing of `Layout`'s navChildren
 - fix: `Layout` components set `alt="Reykjavík"` text on their header logo

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

@@ -59,7 +59,9 @@ const ContactBubble = (props) => {
             onToggle && onToggle(false);
             setFocus !== false && (0, focusElm_1.focusElm)(wrapperRef.current);
         },
-    }), [useLocalState, onToggle]);
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [useLocalState, onToggle]);
     (0, react_1.useEffect)(() => {
         const wrapperElm = wrapperRef.current;
         if (!wrapperElm) {
@@ -77,7 +79,8 @@ const ContactBubble = (props) => {
                     const scrollLength = scrollHeight - clientHeight;
                     // const f = scrollLength > 600 ? 1 : (scrollLength - 200) / 600;
                     const f = 1;
-                    const show = scrollTop > f * 150 && scrollLength - scrollTop > f * 250;
+                    const show = scrollTop > f * 130 && // minimum distance from the top
+                        scrollLength - scrollTop > f * 200; // ...and bottom
                     wrapperElm.dataset.show = String(show);
                     !show && closeBubble(false);
                     pending = 0;
@@ -98,7 +101,9 @@ const ContactBubble = (props) => {
             document.removeEventListener('scroll', checkScroll);
             document.documentElement.removeEventListener('scroll', checkScroll);
         };
-    }, [isBrowser, alwaysShow, closeBubble]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isBrowser, alwaysShow, closeBubble /* , wrapperRef */]);
     (0, react_1.useEffect)(() => {
         const escHandler = (e) => e.key === 'Escape' && closeBubble();
         const outsideClickHandler = (e) => {
@@ -121,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;
     }
@@ -130,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.d.ts

@@ -63,6 +63,7 @@ export type DatepickerLocaleProps = {
     weekLabel: string;
     chooseDayAriaLabelPrefix: string;
     disabledDayAriaLabelPrefix: string;
+    dateFormats: Array<string>;
 };
 /**
  * A compo

package/Datepicker.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Datepicker = exports.getDateDiff = void 0;
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 // For more info on localization see: https://stackoverflow.com/questions/54399084/change-locale-in-react-datepicker/58306958#58306958
 const index_js_1 = tslib_1.__importDefault(require("date-fns/locale/is/index.js"));
@@ -40,6 +40,16 @@ const defaultDatepickerTexts = {
         monthAriaLabelPrefix: 'Mánuður:',
         chooseDayAriaLabelPrefix: 'Veldu:',
         disabledDayAriaLabelPrefix: 'Ekki í boði:',
+        dateFormats: [
+            'dd.MM.yyyy',
+            'dd.MM.yy',
+            'dd/MM/yyyy',
+            'dd/MM/yy',
+            'dd. MM. yyyy',
+            'dd. MM. yy',
+            'dd MM yyyy',
+            'dd MM yy',
+        ],
     },
     // React-datepicker has its own (default) English translation built in.
     // No need to repeat all of it here.
@@ -59,6 +69,16 @@ const defaultDatepickerTexts = {
         monthAriaLabelPrefix: 'Month:',
         chooseDayAriaLabelPrefix: 'Choose:',
         disabledDayAriaLabelPrefix: 'Not available:',
+        dateFormats: [
+            'MM.dd.yyyy',
+            'MM.dd.yy',
+            'MM/dd/yyyy',
+            'MM/dd/yy',
+            'MM. dd. yyyy',
+            'MM. dd. yy',
+            'MM dd yyyy',
+            'MM dd yy',
+        ],
     },
     pl: {
         ariaLabelClose: 'Zamknij',
@@ -76,6 +96,16 @@ const defaultDatepickerTexts = {
         monthAriaLabelPrefix: 'Miesiąc:',
         chooseDayAriaLabelPrefix: 'Wybierać:',
         disabledDayAriaLabelPrefix: 'Niedostępna:',
+        dateFormats: [
+            'dd.MM.yyyy',
+            'dd.MM.yy',
+            'dd/MM/yyyy',
+            'dd/MM/yy',
+            'dd. MM. yyyy',
+            'dd. MM. yy',
+            'dd MM yyyy',
+            'dd MM yy',
+        ],
     },
 };
 /**
@@ -84,7 +114,8 @@ const defaultDatepickerTexts = {
  * Internally, this component uses the [`react-datepicker`](https://reactdatepicker.com/) component.
  */
 const Datepicker = (props) => {
-    const { placeholder, dateFormat = 'd.M.yyyy', 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');
     /*
@@ -96,6 +127,24 @@ const Datepicker = (props) => {
     const txts = (0, i18n_1.getTexts)({ texts, lang }, defaultDatepickerTexts);
     const filled = !!value;
     const empty = !filled && !placeholder;
+    const normalizedDateFormats = (0, react_1.useMemo)(() => {
+        const dateFormatProp = !dateFormat
+            ? ['d.M.yyyy']
+            : typeof dateFormat === 'string'
+                ? [dateFormat]
+                : dateFormat.slice(0);
+        // NOTE: Force all dateFormat values into Array<string> to temporarily work around
+        // a bug in the current version of react-datepicker where invalid `string` values
+        // are re-parsed with `new Date()`, causing surprising (weird) false positives
+        // AND where Arrayed formats get parsed in order of "increasing priority".
+        //
+        // TODO: Revert back to the plain `dateFormat={dateFormat}` pass-through once
+        // https://github.com/Hacker0x01/react-datepicker/pull/3988 has been accepted and released.
+        return dateFormatProp
+            .concat(['yyyy-MM-dd'])
+            .concat(txts.dateFormats)
+            .concat(['P', 'PP', 'PPP']);
+    }, [dateFormat, txts]);
     return (react_1.default.createElement(FormField_js_1.FormField, Object.assign({ extraClassName: "Datepicker", filled: filled, empty: empty }, fieldWrapperProps, { renderInput: (className, inputProps, addFocusProps) => {
             return (react_1.default.createElement("div", Object.assign({ className: className.input, onClick: ({ target, currentTarget }) => { var _a; return target === currentTarget && ((_a = currentTarget.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus()); }, ref: inputRef &&
                     ((elm) => {
@@ -104,17 +153,7 @@ const Datepicker = (props) => {
                         return elm;
                     }) }, addFocusProps()),
                 isoMode && (react_1.default.createElement("input", { type: "hidden", name: name, value: value === null || value === void 0 ? void 0 : value.toISOString().slice(0, 10) })),
-                react_1.default.createElement(ReactDatepicker_js_1.ReactDatePicker, Object.assign({ id: domid, required: inputProps.required, disabled: inputProps.disabled, readOnly: inputProps.readOnly, selected: value, name: isoMode ? undefined : name, locale: lang, dateFormat: 
-                    // NOTE: Force all dateFormat values into Array<string> to temporarily work around
-                    // a bug in the current version of react-datepicker where invalid `string` values
-                    // are re-parsed with `new Date()`, causing surprising (weird) false positives
-                    // AND where Arrayed formats get parsed in order of "increasing priority".
-                    //
-                    // TODO: Revert back to the plain `dateFormat={dateFormat}` pass-through once
-                    // https://github.com/Hacker0x01/react-datepicker/pull/3988 has been accepted and released.
-                    typeof dateFormat === 'string'
-                        ? [dateFormat]
-                        : dateFormat.slice(0).reverse(), onChange: (date) => {
+                react_1.default.createElement(ReactDatepicker_js_1.ReactDatePicker, Object.assign({ id: domid, required: inputProps.required, disabled: inputProps.disabled, readOnly: inputProps.readOnly, selected: value, name: isoMode ? undefined : name, locale: lang, dateFormat: normalizedDateFormats, onChange: (date) => {
                         date = date || undefined;
                         setValue(date);
                         onChange && onChange(date);

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/{_abstract/_FocusTrap.d.ts → FocusTrap.d.ts}

@@ -10,5 +10,9 @@ export type FocusTrapProps = {
      */
     depth?: number;
 };
-/** A focus trap element that can be used to keep keyboard focus within a container block. */
+/**
+ * A focus trap element that can be used to keep keyboard focus within a container block.
+ *
+ * Make sure you only trap focus when a modal or
+ */
 export declare const FocusTrap: (props: FocusTrapProps) => JSX.Element;

package/{_abstract/_FocusTrap.js → FocusTrap.js}

@@ -3,7 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FocusTrap = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-/** A focus trap element that can be used to keep keyboard focus within a container block. */
+/**
+ * A focus trap element that can be used to keep keyboard focus within a container block.
+ *
+ * Make sure you only trap focus when a modal or
+ */
 const FocusTrap = (props) => {
     const Tag = props.Tag || 'span';
     return (react_1.default.createElement(Tag, { tabIndex: 0, onFocus: (e) => {

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/Layout.d.ts

@@ -3,10 +3,12 @@ import type { HannaColorTheme } from '@reykjavik/hanna-css';
 import { EitherObj } from '@reykjavik/hanna-utils';
 import { DefaultTexts, HannaLang } from '@reykjavik/hanna-utils/i18n';
 import { BemModifierProps } from './utils/types.js';
-import { SSRSupportProps, WrapperElmProps } from './utils.js';
+import { SSRSupport, WrapperElmProps } from './utils.js';
 export type LayoutI18n = {
     skipLinkLabel: string;
-    closeMenuLabel: string;
+    /** @deprecated Not used (Will be removed in v0.11) */
+    closeMenuLabel?: string;
+    /** @deprecated Not used (Will be removed in v0.11) */
     closeMenuLabelLong?: string;
     /** @deprecated Not used (Will be removed in v0.11) */
     lang?: string;
@@ -21,7 +23,9 @@ type LayoutProps = {
     siteName?: string;
     texts?: LayoutI18n;
     lang?: HannaLang;
-} & SSRSupportProps & WrapperElmProps & BemModifierProps & EitherObj<{
+    /** @deprecated Not used (Will be removed in v0.11) */
+    ssr?: SSRSupport;
+} & WrapperElmProps & BemModifierProps & EitherObj<{
     mainChildren: ReactNode;
 }, {
     children: ReactNode;