@reykjavik/hanna-react 0.10.70 → 0.10.71

package/Alert.d.ts

@@ -36,8 +36,7 @@ export declare type AlertProps = {
     /** Callback that fires when the alert has closed/transitoned out */
     onClosed: () => void;
 }, {
-    /**
-     * @deprecated This signature with the `event` argument will be removed in hanna-react v0.9
+    /** @deprecated This signature with the `event` argument will be removed in hanna-react v0.11
      *
      * Return `false` to prevent the alert from closing
      */

package/ArticleCards.d.ts

@@ -1,6 +1,8 @@
 import type { Cleanup } from '@reykjavik/hanna-utils';
 import { ImageCardListProps, ImageCardProps } from './_abstract/_CardList';
-export declare type ArticleCardProps = ImageCardProps;
+export declare type ArticleCardsItemProps = ImageCardProps;
+/** @deprecated Use `ArticleCardsItemProps` instead (Remove in v0.11) */
+export declare type ArticleCardProps = ArticleCardsItemProps;
 export declare type ArticleCardsProps = Cleanup<Pick<ImageCardListProps, 'cards' | 'imgPlaceholder'>>;
 declare const ArticleCards: (props: ArticleCardsProps) => JSX.Element;
 export default ArticleCards;

package/BasicTable.d.ts

@@ -1,12 +1,15 @@
 import { TableProps } from '@hugsmidjan/react/Table';
+import { EitherObj } from '@reykjavik/hanna-utils';
 import { SeenProp } from './utils/seenEffect';
 export declare type BasicTableProps = {
     compact?: boolean;
     type?: 'text' | 'number';
     children?: undefined;
     modifier?: string;
+} & EitherObj<{
     fullWidth?: boolean;
+}, {
     align?: 'right';
-} & SeenProp & Omit<TableProps, 'className' | 'children'>;
+}> & SeenProp & Omit<TableProps, 'className' | 'children'>;
 declare const BasicTable: (props: BasicTableProps) => JSX.Element;
 export default BasicTable;

package/CHANGELOG.md

@@ -4,6 +4,37 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.71
+
+_2022-11-23_
+
+- feat: Add prop `onFilesRejected` to `FileInputProps`
+- feat: Add prop `itemCount` for all Carousel-related components with
+  `children` — drop requirement for children to be an Array.
+- feat(ts): Export `ArticleCardsItemProps`, deprecate `ArticleCardProps`
+- feat(ts): Only allow either `align="right"` or `fullWidth` on `BasicTable`
+- feat: Make `SiteSearchAutocompleteProps.renderSuggestion` optional
+- feat: Add `FooterInfoGroup.main`, deprecate `FooterInfoGroup.role`
+- `FileInput`:
+  - feat: Add prop `lang` (default: `'is'`)
+  - feat: Make prop `removeFileText` optional
+  - fix: File-sizes are now formatted based on `lang` prop
+- `ShareButton`:
+  - fix: Add support for Polish
+  - fix: Make Icelandic the default/fallback locale
+  - fix: Swap in Icelandic and English `emailSubject`s
+- fix: Lingering `--focus` state when keyboard navigating from `DatePicker`
+- fix: Suppress Autocomplete suggestion container until suggestions arrive
+- fix: Disable `button` element when `SearchInput` is disabled or readonly
+- fix: Add missing `title` prop on `IframeBlock`
+- fix: Set default value for empty `WizardStepper` step labels
+- fix: Add missing prop `name` to `DatePicker`
+- fix: Make `ContentArticleProps.meta` optional
+- fix: Suppress `<hr>` in `ContentArticleProps` when `relatedLinks` is missing
+- fix: Make `InfoBlockProps.subTitle` optional
+- fix: Clicks inside `.Datepicker .FormField__input` div always focus `input`
+- fix(ts): Remove unused (`never`) props from `ModalProps`
+
 ## 0.10.70
 
 _2022-09-28_

package/CheckboxButtonsGroup.d.ts

@@ -1,9 +1,9 @@
 import { TogglerGroupFieldOptions, TogglerGroupFieldProps } from './_abstract/_TogglerGroupField';
 export declare type CheckboxButtonsGroupProps = TogglerGroupFieldProps & {
     value?: Array<string>;
-    /** @deprecated (Will be removed in v0.9) */
+    /** @deprecated (Will be removed in v0.11) */
     columns?: '2col' | '3col';
-    /** @deprecated (Will be removed in v0.9) */
+    /** @deprecated (Will be removed in v0.11) */
     layout?: 'slim';
 };
 export declare type CheckboxButtonsGroupOptions = TogglerGroupFieldOptions;

package/ContentArticle.d.ts

@@ -5,7 +5,7 @@ import { ContentImageProps } from './ContentImage';
 import { RelatedLinksProps } from './RelatedLinks';
 export declare type ContentArticleProps = {
     /** Date, author, etc. */
-    meta: ArticleMetaProps['items'];
+    meta?: ArticleMetaProps['items'];
     headline: string;
     headlineTag?: 'h1' | 'h2';
     topImage?: ContentImageProps;

package/ContentArticle.js

@@ -10,15 +10,16 @@ const RelatedLinks_1 = tslib_1.__importDefault(require("./RelatedLinks"));
 const TextBlock_1 = tslib_1.__importDefault(require("./TextBlock"));
 const VSpacer_1 = tslib_1.__importDefault(require("./VSpacer"));
 const ContentArticle = (props) => {
+    const { relatedLinks } = props;
     const [ref] = (0, seenEffect_1.useSeenEffect)(props.startSeen);
     return (react_1.default.createElement("div", { className: "ContentArticle", ref: ref },
-        react_1.default.createElement(ArticleMeta_1.default, { items: props.meta }),
+        props.meta && react_1.default.createElement(ArticleMeta_1.default, { items: props.meta }),
         react_1.default.createElement(Heading_1.default, { forceH1: props.headlineTag === 'h1' }, props.headline),
         react_1.default.createElement(TextBlock_1.default, { startSeen: true },
             props.topImage && react_1.default.createElement(ContentImage_1.default, Object.assign({}, props.topImage)),
             props.body),
-        react_1.default.createElement(VSpacer_1.default, { size: "small" },
-            react_1.default.createElement("hr", null)),
-        props.relatedLinks && react_1.default.createElement(RelatedLinks_1.default, Object.assign({}, props.relatedLinks))));
+        relatedLinks && relatedLinks.links.length > 0 && (react_1.default.createElement(VSpacer_1.default, { size: "small" },
+            react_1.default.createElement("hr", null))),
+        relatedLinks && react_1.default.createElement(RelatedLinks_1.default, Object.assign({}, relatedLinks))));
 };
 exports.default = ContentArticle;

package/Datepicker.d.ts

@@ -4,6 +4,7 @@ export declare type DatepickerProps = {
     small?: boolean;
     placeholder?: string;
     value?: Date;
+    name?: string;
     startDate?: Date;
     endDate?: Date;
     minDate?: Date;

package/Datepicker.js

@@ -36,19 +36,19 @@ const i18n = {
     },
 };
 const Datepicker = (props) => {
-    const { className, id, label, hideLabel, assistText, disabled, readOnly, invalid, errorMessage, required, reqText, placeholder, small, localeCode, dateFormat = 'd.M.yyy', initialDate, value = initialDate, startDate, endDate, minDate, maxDate, isStartDate = false, isEndDate = false, onChange, datepickerExtraProps, ssr, inputRef, } = props;
+    const { className, id, label, hideLabel, assistText, disabled, readOnly, invalid, errorMessage, required, reqText, placeholder, small, localeCode, dateFormat = 'd.M.yyy', initialDate, value = initialDate, name, startDate, endDate, minDate, maxDate, isStartDate = false, isEndDate = false, onChange, datepickerExtraProps, ssr, inputRef, } = props;
     const domid = (0, hooks_1.useDomid)(id);
     const txts = (localeCode && i18n[localeCode]) || {};
     const filled = !!value;
     const empty = !filled && !placeholder;
     return (react_1.default.createElement(FormField_1.default, { className: (0, getBemClass_1.default)('Datepicker', [], className), ssr: ssr, label: label, small: small, assistText: assistText, hideLabel: hideLabel, invalid: invalid, required: required, reqText: reqText, disabled: disabled, readOnly: readOnly, filled: filled, empty: empty, errorMessage: errorMessage, renderInput: (className, inputProps, addFocusProps) => {
-            return (react_1.default.createElement("div", { className: className.input, ref: inputRef &&
+            return (react_1.default.createElement("div", Object.assign({ className: className.input, onClick: (e) => e.currentTarget.querySelector('input').focus(), ref: inputRef &&
                     ((elm) => {
                         inputRef.current =
                             (elm === null || elm === void 0 ? void 0 : elm.querySelector('input')) || undefined;
                         return elm;
-                    }) },
-                react_1.default.createElement(react_datepicker_1.default, Object.assign({ id: domid, required: inputProps.required, disabled: inputProps.disabled, readOnly: inputProps.readOnly, selected: value, locale: localeCode, dateFormat: dateFormat, onChange: (date) => {
+                    }) }, addFocusProps()),
+                react_1.default.createElement(react_datepicker_1.default, Object.assign({ id: domid, required: inputProps.required, disabled: inputProps.disabled, readOnly: inputProps.readOnly, selected: value, name: name, locale: localeCode, dateFormat: dateFormat, onChange: (date) => {
                         onChange(date || undefined);
                         const inputElm = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
                         if (inputElm) {
@@ -60,7 +60,7 @@ const Datepicker = (props) => {
                     minDate: minDate, maxDate: maxDate, startDate: startDate, endDate: endDate, selectsStart: isStartDate, selectsEnd: isEndDate, formatWeekDay: (weekday) => {
                         // TODO: if we use costom locale we don't need this
                         return weekday.charAt(0).toUpperCase();
-                    }, showYearDropdown: true, scrollableYearDropdown: true, yearDropdownItemNumber: 15, showMonthDropdown: true }, inputProps, txts, addFocusProps(datepickerExtraProps)))));
+                    }, showYearDropdown: true, scrollableYearDropdown: true, yearDropdownItemNumber: 15, showMonthDropdown: true }, inputProps, txts, datepickerExtraProps))));
         } }));
 };
 exports.default = Datepicker;

package/FileInput/_FileInput.utils.d.ts

@@ -16,7 +16,7 @@ export declare const releasePreview: (file: CustomFile) => void;
 /**
  * Small+stupid file size pretty-printer.
  */
-export declare const formatBytes: (bytes: number, decimals?: number) => string;
+export declare const formatBytes: (bytes: number, lang?: string, decimals?: number) => string;
 /**
  * Figures out how to handle adding files to a FileInput
  * Which files to retaine, which too delete, and

package/FileInput/_FileInput.utils.js

@@ -22,17 +22,24 @@ const releasePreview = (file) => {
     delete file.preview;
 };
 exports.releasePreview = releasePreview;
+// ---------------------------------------------------------------------------
+const k = 1024;
+const kThreshold = 970 / k; // Snap up a unit level at this point
+const units = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB' /*, 'EB', 'ZB', 'YB' */];
+const decimalSymbols = { is: ',', en: '.', pl: ',' };
 /**
  * Small+stupid file size pretty-printer.
  */
-const formatBytes = (bytes, decimals = 2) => {
+const formatBytes = (bytes, lang = 'is', decimals = 2) => {
     if (bytes === 0) {
         return '0 Bytes';
     }
-    const k = 1024;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(decimals)) + ' ' + sizes[i];
+    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('.', 
+    // NOTE: As of 2022-11 Chrome still doesn't support Icelandic
+    decimalSymbols[lang] || (1.1).toLocaleString(lang)[1]);
+    return `${formatted} ${units[i]}`;
 };
 exports.formatBytes = formatBytes;
 /**

package/FileInput/_FileInputFileList.js

@@ -9,7 +9,7 @@ const DefaultFileList = (props) => {
         return null;
     }
     return (react_1.default.createElement("ul", { className: "FileInput__filelist" }, files.map((file) => (react_1.default.createElement("li", { key: file.name, className: "FileInput__file" },
-        react_1.default.createElement("button", { className: "FileInput__file-remove", type: "button", onClick: () => removeFile(file), "aria-label": removeFileText }, removeFileText),
+        react_1.default.createElement("button", { className: "FileInput__file-remove", type: "button", onClick: () => removeFile(file), "aria-label": `${removeFileText} ${file.name}` }, removeFileText),
         react_1.default.createElement("span", { className: "FileInput__fileinfo" },
             showImagePreviews && file.preview && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement("span", { className: "FileInput__preview" },

package/FileInput.d.ts

@@ -14,7 +14,8 @@ export declare type FileInputProps = {
      */
     accept?: string | Array<string>;
     dropzoneText: string | JSX.Element;
-    removeFileText: string;
+    removeFileText?: string;
+    lang?: string;
     showFileSize?: boolean;
     showImagePreviews?: boolean;
     FileList?: false | ((props: FileListProps) => JSX.Element | null);
@@ -34,11 +35,10 @@ export declare type FileInputProps = {
         deleted?: Array<File>;
         added?: Array<File>;
     }) => void;
+    onFilesRejected?: (rejectedFiles: Array<File>) => void;
     name?: string;
     value?: ReadonlyArray<File>;
-    /**
-     * @deprecated Use props `multiple`, `accept` instead  (Will be removed in v0.11)
-     */
+    /** @deprecated Use props `multiple`, `accept` instead  (Will be removed in v0.11) */
     dropzoneProps?: {
         accept?: string;
         multiple?: boolean;

package/FileInput.js

@@ -5,9 +5,23 @@ const react_1 = tslib_1.__importStar(require("react"));
 const react_dropzone_1 = require("react-dropzone"); // https://react-dropzone.js.org/#!/Dropzone
 const hooks_1 = require("@hugsmidjan/react/hooks");
 const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const _FileInput_utils_1 = require("./FileInput/_FileInput.utils");
 const _FileInputFileList_1 = require("./FileInput/_FileInputFileList");
 const FormField_1 = tslib_1.__importDefault(require("./FormField"));
+const defaultRemoveFileText = {
+    is: 'Fjarlægja',
+    en: 'Remove',
+    pl: 'Usuń',
+};
+const defaultOnFilesRejected = (rejectedFiles) => {
+    window.alert('Error:\n' +
+        rejectedFiles
+            .map((elm) => {
+            return elm.name;
+        })
+            .join(', '));
+};
 const arrayToFileList = (arr) => {
     const fileList = new DataTransfer();
     arr.forEach((item) => {
@@ -16,7 +30,7 @@ const arrayToFileList = (arr) => {
     return fileList.files;
 };
 const FileInput = (props) => {
-    const { className, id, label, hideLabel, dropzoneProps = { multiple: true }, multiple = dropzoneProps.multiple, accept, dropzoneText, removeFileText, assistText, disabled, invalid, errorMessage, required, reqText, FileList = _FileInputFileList_1.DefaultFileList, onFilesUpdated = () => undefined, showFileSize, showImagePreviews, value = [] } = props, inputElementProps = tslib_1.__rest(props, ["className", "id", "label", "hideLabel", "dropzoneProps", "multiple", "accept", "dropzoneText", "removeFileText", "assistText", "disabled", "invalid", "errorMessage", "required", "reqText", "FileList", "onFilesUpdated", "showFileSize", "showImagePreviews", "value"]);
+    const { className, id, label, hideLabel, dropzoneProps = { multiple: true }, multiple = dropzoneProps.multiple, accept, dropzoneText, lang = i18n_1.DEFAULT_LANG, removeFileText = defaultRemoveFileText[lang] || defaultRemoveFileText[i18n_1.DEFAULT_LANG], assistText, disabled, invalid, errorMessage, required, reqText, FileList = _FileInputFileList_1.DefaultFileList, onFilesUpdated = () => undefined, onFilesRejected, showFileSize, showImagePreviews, value = [] } = props, inputElementProps = tslib_1.__rest(props, ["className", "id", "label", "hideLabel", "dropzoneProps", "multiple", "accept", "dropzoneText", "lang", "removeFileText", "assistText", "disabled", "invalid", "errorMessage", "required", "reqText", "FileList", "onFilesUpdated", "onFilesRejected", "showFileSize", "showImagePreviews", "value"]);
     const domid = (0, hooks_1.useDomid)(id);
     const fileInputWrapper = (0, react_1.useRef)(null);
     const fileInput = (0, react_1.useRef)(null);
@@ -32,14 +46,7 @@ const FileInput = (props) => {
             addFiles(acceptedFiles);
             setIsHover(false);
         },
-        onDropRejected: (rejectedFiles) => {
-            window.alert('Error:\n' +
-                rejectedFiles
-                    .map((elm) => {
-                    return elm.name;
-                })
-                    .join(', '));
-        },
+        onDropRejected: onFilesRejected || defaultOnFilesRejected,
         onDragEnter: () => {
             // 'dragLeave' always fires right after 'dragEnter', use 'dragOver' instead
             // console.log('enter');

package/FooterInfo.d.ts

@@ -1,8 +1,10 @@
 import { BemPropsModifier } from '@hugsmidjan/react/types';
 export declare type FooterInfoGroup = {
     title: string;
-    role?: JSX.IntrinsicElements['div']['role'];
     modifier?: string;
+    main?: boolean;
+    /** @deprecated (Will be removed in v0.11) */
+    role?: JSX.IntrinsicElements['div']['role'];
 } & BemPropsModifier & ({
     content: JSX.Element;
     html?: undefined;

package/FooterInfo.js

@@ -5,7 +5,10 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
 const FooterInfo = (props) => {
     const { boxes } = props;
-    return (react_1.default.createElement("div", { className: "FooterInfo" }, boxes.map((group, i) => (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('FooterInfo__group', group.modifier), role: group.role, key: i },
+    return (react_1.default.createElement("div", { className: "FooterInfo" }, boxes.map((group, i) => (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('FooterInfo__group', [
+            group.main && 'main',
+            group.modifier,
+        ]), key: i },
         react_1.default.createElement("h3", { className: "FooterInfo__grouptitle" }, group.title),
         group.content ? (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('FooterInfo__groupcontent', group.modifier) }, group.content)) : (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('FooterInfo__groupcontent', group.modifier), dangerouslySetInnerHTML: { __html: group.html } })))))));
 };

package/Heading.d.ts

@@ -14,7 +14,8 @@ export declare type HeadingProps = {
     /**
      * Make an exception and render a `<h1/>` element.
      *
-     * This prop is ignore if the `Tag` prop is defined. */
+     * This prop is ignore if the `Tag` prop is defined.
+     */
     forceH1?: boolean;
 } & ComponentLayoutProps;
 declare const Heading: (props: HeadingProps) => JSX.Element;

package/Heading.js

@@ -12,7 +12,8 @@ const sizes = {
 const Heading = (props) => {
     const { size = 'normal', align, wide, children } = props;
     const Tag = props.Tag || (props.forceH1 ? 'h1' : 'h2');
-    return (react_1.default.createElement(Tag, { className: (0, getBemClass_1.default)('Heading', [
+    const suppressWarning = process.env.NODE_ENV !== 'production' && Tag === 'h1' ? true : undefined;
+    return (react_1.default.createElement(Tag, { "data-dev-forcedH1": suppressWarning, className: (0, getBemClass_1.default)('Heading', [
             sizes[size],
             align === 'right' && 'align--' + align,
             !align && wide && 'wide',

package/IframeBlock.d.ts

@@ -2,6 +2,8 @@ import { EitherObj } from '@reykjavik/hanna-utils';
 import { ResizerOptions } from 'iframe-resizer-react';
 export declare type IframeBlockProps = {
     src: string;
+    /** Accessible title attribute for the iframe (similar to alt="" on images) */
+    title: string;
     framed?: boolean;
     compact?: boolean;
     align?: 'right';

package/IframeBlock.js

@@ -13,13 +13,13 @@ const iframe_resizer_react_1 = tslib_1.__importDefault(require("iframe-resizer-r
  * ```
  */
 const IframeBlock = (props) => {
-    const { src, framed, compact, scrolling, height = 'auto', align, checkOrigin = false, } = props;
+    const { title, src, framed, compact, scrolling, height = 'auto', align, checkOrigin = false, } = props;
     const className = (0, getBemClass_1.default)('IframeBlock', [
         framed && 'framed',
         compact && 'compact',
         align === 'right' && 'align--' + align,
     ]);
-    return height === 'auto' ? (react_1.default.createElement(iframe_resizer_react_1.default, { className: className, src: src, checkOrigin: checkOrigin })) : (react_1.default.createElement("iframe", { className: className, src: src, 
+    return height === 'auto' ? (react_1.default.createElement(iframe_resizer_react_1.default, { className: className, title: title, src: src, checkOrigin: checkOrigin })) : (react_1.default.createElement("iframe", { className: className, title: title, src: src, 
         // hidden tiger: pass negative height to disable iframe-resizer but not set height explicitly
         // (Silly hack, don't rely on this)
         height: height < 0 ? undefined : height, 

package/ImageCards.d.ts

@@ -1,8 +1,8 @@
 import { CardListSummaryProps, ImageCardListProps, ImageCardProps as _ImageCardProps } from './_abstract/_CardList';
 import { SeenProp } from './utils/seenEffect';
-/** @deprecated Use `ImageCard` instead.  (Will be removed in v0.11) */
-export declare type ImageCardProps = _ImageCardProps;
 export declare type ImageCardsItemProps = _ImageCardProps;
+/** @deprecated Use `ImageCardsItemProps` instead.  (Will be removed in v0.11) */
+export declare type ImageCardProps = ImageCardsItemProps;
 export declare type ImageCardsProps = ImageCardListProps & CardListSummaryProps & {
     background?: boolean;
 } & SeenProp;

package/InfoBlock.d.ts

@@ -1,17 +1,13 @@
+import { EitherObj } from '@reykjavik/hanna-utils';
 import { SeenProp } from './utils/seenEffect';
 export declare type InfoBlockProps = {
     title: string;
-    subtitle: string | JSX.Element;
+    subtitle?: string | JSX.Element;
     items: Array<string | JSX.Element>;
-} & ({
-    attention?: undefined;
-    extraInfo?: undefined;
-} | {
-    attention: string | JSX.Element;
-    extraInfo?: undefined;
-} | {
-    extraInfo: string | JSX.Element;
-    attention?: undefined;
-}) & SeenProp;
+} & EitherObj<{
+    attention?: string | JSX.Element;
+}, {
+    extraInfo?: string | JSX.Element;
+}> & SeenProp;
 declare const InfoBlock: (props: InfoBlockProps) => JSX.Element;
 export default InfoBlock;

package/InfoBlock.js

@@ -8,7 +8,7 @@ const InfoBlock = (props) => {
     const [ref] = (0, seenEffect_1.useSeenEffect)(startSeen);
     return (react_1.default.createElement("div", { className: "InfoBlock", ref: ref },
         react_1.default.createElement("h2", { className: "InfoBlock__title" }, title),
-        react_1.default.createElement("div", { className: "InfoBlock__subtitle" }, subtitle),
+        subtitle && react_1.default.createElement("div", { className: "InfoBlock__subtitle" }, subtitle),
         react_1.default.createElement("ul", { className: "InfoBlock__items" }, items.map((item, i) => (react_1.default.createElement("li", { key: i, className: "InfoBlock__item" }, item)))),
         'extraInfo' in props && (react_1.default.createElement("div", { className: "InfoBlock__extrainfo" }, props.extraInfo)),
         'attention' in props && (react_1.default.createElement("div", { className: "InfoBlock__attention" }, props.attention))));

package/Modal.d.ts

@@ -1,8 +1,6 @@
 import { ReactElement } from 'react';
 import { ModalProps as _ModalProps } from '@hugsmidjan/react/Modal';
-export declare type ModalProps = _ModalProps & {
-    bem?: never;
-    bodyWrap?: never;
+export declare type ModalProps = Omit<_ModalProps, 'bem' | 'bodyWrap' | 'modifier'> & {
     modifier?: 'w6' | 'w8' | 'w10';
     bling?: ReactElement;
 };

package/README.md

@@ -32,7 +32,7 @@ automatically triggers a major version bump in this package.
 
 If you need a version of this package that "targets" an older Hanna markup
 version, you'll find the appropriate package version in the
-[change log](CHANGELOG.md).
+[change log](https://github.com/rvk-utd/hanna/blob/main/modules/hanna-react/CHANGELOG.md).
 
 ## CSS
 
@@ -72,3 +72,8 @@ To view the documentation for older versions of Hanna, check out the
 corresponding branches in the git repo.
 
 -->
+
+## Changelog
+
+See
+[CHANGELOG.md](https://github.com/rvk-utd/hanna/blob/main/modules/hanna-react/CHANGELOG-lib.md)

package/RadioButtonsGroup.d.ts

@@ -1,9 +1,9 @@
 import { TogglerGroupFieldOptions, TogglerGroupFieldProps } from './_abstract/_TogglerGroupField';
 export declare type RadioButtonsGroupProps = TogglerGroupFieldProps & {
     value?: string;
-    /** @deprecated (Will be removed in v0.9) */
+    /** @deprecated (Will be removed in v0.11) */
     columns?: '2col' | '3col';
-    /** @deprecated (Will be removed in v0.9) */
+    /** @deprecated (Will be removed in v0.11) */
     layout?: 'slim';
 };
 export declare type RadioButtonsGroupOptions = TogglerGroupFieldOptions;

package/RadioGroup.d.ts

@@ -8,6 +8,7 @@ export declare type RadioGroupOption = TogglerGroupFieldOption;
 export declare type RadioGroupOptions = TogglerGroupFieldOptions;
 declare const RadioGroup: {
     (props: RadioGroupProps): JSX.Element;
+    /** @deprecated Exposed for testing purposes only. This may disappear at any time. */
     __Radio: (props: TogglerInputProps) => JSX.Element;
 };
 export default RadioGroup;

package/RadioGroup.js

@@ -6,5 +6,6 @@ const _TogglerGroupField_1 = tslib_1.__importDefault(require("./_abstract/_Toggl
 const _TogglerInput_1 = tslib_1.__importDefault(require("./_abstract/_TogglerInput"));
 const Radio = (props) => (react_1.default.createElement(_TogglerInput_1.default, Object.assign({}, props, { bem: "Radio", type: "radio" })));
 const RadioGroup = (props) => (react_1.default.createElement(_TogglerGroupField_1.default, Object.assign({}, props, { bem: "RadioGroup", modifier: props.layout, Toggler: Radio })));
+/** @deprecated Exposed for testing purposes only. This may disappear at any time. */
 RadioGroup.__Radio = Radio;
 exports.default = RadioGroup;

package/SearchInput.js

@@ -20,6 +20,6 @@ const SearchInput = (props) => {
     return (react_1.default.createElement(FormField_1.default, { className: (0, getBemClass_1.default)('SearchInput', [], className), ssr: ssr, small: small, label: label, empty: empty, filled: filled, assistText: assistText, hideLabel: hideLabel, disabled: disabled, readOnly: readOnly, invalid: invalid, errorMessage: errorMessage, required: required, reqText: reqText, id: id, renderInput: (className, inputProps, addFocusProps) => (react_1.default.createElement("div", Object.assign({ className: className.input }, addFocusProps()),
             react_1.default.createElement("input", Object.assign({ className: "SearchInput__input", onChange: _onChange }, inputProps, inputElementProps, { ref: props.inputRef })),
             ' ',
-            onButtonClick && (react_1.default.createElement("button", { className: "SearchInput__button", type: "button", onClick: onButtonClick, title: buttonText, ref: props.buttonRef }, buttonText)))) }));
+            onButtonClick && (react_1.default.createElement("button", { className: "SearchInput__button", type: "button", onClick: onButtonClick, title: buttonText, ref: props.buttonRef, disabled: disabled || readOnly }, buttonText)))) }));
 };
 exports.default = SearchInput;

package/SearchResults.js

@@ -72,12 +72,11 @@ const SearchResults__loadmore = (props) => {
 // ===========================================================================
 const renderTitle = (props, texts) => {
     const { status, totalHits, query } = props;
-    const lang = texts.lang || props.lang || i18n_1.DEFAULT_LANG;
     return (react_1.default.createElement("h2", { className: "SearchResults__title" },
         status === 'loadingquery'
             ? texts.loadQueryTitle
             : totalHits
-                ? (0, prettyNum_1.prettyNum)(totalHits, { lang: lang }) +
+                ? (0, prettyNum_1.prettyNum)(totalHits, { lang: texts.lang }) +
                     ' ' +
                     texts.resultsTitle
                 : texts.noResultsTitle,

package/ShareButtons.d.ts

@@ -2,8 +2,8 @@ import { SSRSupport } from '@hugsmidjan/react/hooks';
 import { ShareButtonI18n, ShareButtonPlatforms } from '@reykjavik/hanna-utils/shareButtonsUtils';
 export declare type ShareButtonsProps = {
     ssr?: SSRSupport;
-    children?: undefined;
     texts?: Readonly<ShareButtonI18n>;
+    lang?: string;
 } & Partial<Record<ShareButtonPlatforms, boolean>>;
 declare const ShareButtons: (props: ShareButtonsProps) => JSX.Element | null;
 export default ShareButtons;

package/ShareButtons.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const shareButtonsUtils_1 = require("@reykjavik/hanna-utils/shareButtonsUtils");
 const _Link_1 = require("./_abstract/_Link");
 const generateTypeList = (facebook, twitter, linkedin, email) => {
@@ -22,24 +23,28 @@ const ShareButtons__item = (props) => {
         react_1.default.createElement(_Link_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, ssr, facebook = true, twitter = true, linkedin, email, } = props;
+    const { texts, lang, ssr, facebook = true, twitter = true, linkedin, email, } = props;
     const [docMeta, setDocMeta] = (0, react_1.useState)();
     const href = docLoc.href; // assign to local variable to silence `react-hooks/exhaustive-deps`
     (0, react_1.useEffect)(() => {
         // FIXME: Drop dependency on _loc.href and set up proper
         // location/route monitoring event handler, with unsubscribe on unmount
-        const { emailSubject } = texts || {};
-        setDocMeta((0, shareButtonsUtils_1.getDocMeta)({ emailSubject }));
-    }, [texts, href]);
+        setDocMeta((0, shareButtonsUtils_1.getDocMeta)({
+            lang,
+            emailSubject: texts && texts.emailSubject,
+        }));
+    }, [texts, lang, href]);
     if (!facebook && !twitter && !linkedin && !email) {
         // no place to share
         return null;
     }
-    const txt = texts || (docMeta && shareButtonsUtils_1.i18n[docMeta.lang]) || {};
-    const { label, buttonLabel } = txt;
+    const txt = texts ||
+        (docMeta && (shareButtonsUtils_1.shareButtonTexts[docMeta.lang] || shareButtonsUtils_1.shareButtonTexts[i18n_1.DEFAULT_LANG])) ||
+        {};
+    const { label, buttonLabel, emailSubject } = txt;
     if (!docMeta || ssr === 'ssr-only') {
         // Generate SSR markup for hanna-sprinkles to pick up on.
-        return (react_1.default.createElement("div", { className: "ShareButtons", "data-button-types": generateTypeList(facebook, twitter, linkedin, email), "data-label": label, "data-buttonlabel": buttonLabel, "data-emailsubject": txt.emailSubject || undefined }));
+        return (react_1.default.createElement("div", { className: "ShareButtons", "data-button-types": generateTypeList(facebook, twitter, linkedin, email), "data-label": label, "data-buttonlabel": buttonLabel, "data-emailsubject": emailSubject || undefined }));
     }
     const showTypes = {
         facebook,

package/SiteSearchAutocomplete.d.ts

@@ -16,7 +16,7 @@ export declare type SiteSearchACI18n = {
 export declare const defaultSiteSearchACTexts: DefaultTexts<SiteSearchACI18n>;
 export declare type SiteSearchAutocompleteProps<T> = {
     suggestions: Array<T>;
-    renderSuggestion: RenderSuggestion<T>;
+    renderSuggestion?: RenderSuggestion<T>;
     setSuggestions: (suggestions: Array<T>) => void;
     getSuggestionValue: (suggestion: T) => string;
     onSuggestionsFetchRequested: (request: Autosuggest.SuggestionsFetchRequestedParams) => void;

package/SiteSearchAutocomplete.js

@@ -35,7 +35,7 @@ const SiteSearchAutocomplete = (props) => {
             suggestionsList: bem + '__list',
             suggestion: bem + '__item',
             suggestionHighlighted: bem + '__item--highlighted',
-        }, focusInputOnSuggestionClick: true, suggestions: suggestions, onSuggestionsClearRequested: () => setSuggestions([]), onSuggestionsFetchRequested: onSuggestionsFetchRequested, getSuggestionValue: getSuggestionValue, onSuggestionSelected: onSuggestionSelected, onSuggestionHighlighted: onSuggestionHighlighted, renderSuggestion: renderSuggestion, containerProps: { 'aria-label': txt.label }, renderSuggestionsContainer: ({ containerProps, children }) => (react_1.default.createElement("div", Object.assign({}, containerProps, { "aria-label": txt.suggestionsLabel }), children)), inputProps: {
+        }, focusInputOnSuggestionClick: true, suggestions: suggestions, onSuggestionsClearRequested: () => setSuggestions([]), onSuggestionsFetchRequested: onSuggestionsFetchRequested, getSuggestionValue: getSuggestionValue, onSuggestionSelected: onSuggestionSelected, onSuggestionHighlighted: onSuggestionHighlighted, renderSuggestion: renderSuggestion || ((s) => String(s)), containerProps: { 'aria-label': txt.label }, renderSuggestionsContainer: ({ containerProps, children }) => (react_1.default.createElement("div", Object.assign({}, containerProps, { "aria-label": suggestions.length ? txt.suggestionsLabel : undefined }), children)), inputProps: {
             ref: inputRef,
             value: value,
             onChange: (_, { newValue }) => {

package/WizardLayout.d.ts

@@ -2,8 +2,8 @@ import { ReactNode } from 'react';
 import { SSRSupport } from '@hugsmidjan/react/hooks';
 import { HannaColorTheme } from '@reykjavik/hanna-css';
 declare type WizardLayoutProps = {
-    wizardStepper?: ReactNode;
-    wizardFooter?: ReactNode;
+    wizardStepper?: ReactNode | false;
+    wizardFooter?: ReactNode | false;
     colorTheme?: HannaColorTheme;
     siteName?: string;
     logoLink?: string;

package/WizardStepper.d.ts

@@ -26,7 +26,7 @@ export declare type WizardStepperProps = {
     steps: ReadonlyArray<WizardStepperStep>;
     /** Zero-based index of the active (current) step */
     activeStep?: number;
-    /** By default, clickable "done" steps remain clickable */
+    /** By default, clickable steps remain clickable once "done" */
     disableBacktrack?: boolean;
     /** By default, clickable steps after the active step are not immediately clickable */
     allowForwardSkip?: boolean;

package/WizardStepper.js

@@ -6,7 +6,8 @@ const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/g
 const WizardStepper = (props) => {
     const { steps, activeStep = -1, allowForwardSkip, disableBacktrack, onClick } = props;
     return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('WizardStepper', activeStep === -1 && 'preview') }, steps.map((step, i) => {
-        const { label, clickable, done, neutral } = step;
+        const { clickable, done, neutral } = step;
+        const label = step.label || '…';
         const stepClass = (0, getBemClass_1.default)('WizardStepper__step', [
             (done || (done == null && i < activeStep)) && 'done',
             neutral && 'neutral',

package/_abstract/_AbstractCarousel.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { SSRSupport } from '@hugsmidjan/react/hooks';
 import { BemProps } from '@hugsmidjan/react/types';
 import { EitherObj } from '@reykjavik/hanna-utils';
@@ -13,10 +13,17 @@ export declare type CarouselProps<I extends Record<string, unknown> = {}, P exte
     Component: (props: P extends undefined ? I : I & P) => ReactElement | null;
     ComponentProps?: P;
 }, {
-    children: Array<ReactElement>;
+    children: ReactNode;
+    /**
+     * Explicit number of items contained by the `children` prop
+     *
+     * Use this when your returned child elements are wrapped in a
+     * `<Fragment />` or some such.
+     */
+    itemCount?: number;
 }> & SeenProp;
-declare type AbstractCarouselProps<I extends Record<string, unknown> = {}, P extends Record<string, unknown> | undefined = {}> = CarouselProps<I, P> & BemProps & {
+declare type AbstractCarouselProps<I extends Record<string, unknown> = Record<string, unknown>, P extends Record<string, unknown> | undefined = Record<string, unknown>> = CarouselProps<I, P> & BemProps & {
     title?: string;
 };
-declare const AbstractCarousel: <I extends Record<string, unknown> = {}, P extends Record<string, unknown> | undefined = {}>(props: AbstractCarouselProps<I, P>) => JSX.Element | null;
+declare const AbstractCarousel: <I extends Record<string, unknown> = Record<string, unknown>, P extends Record<string, unknown> | undefined = Record<string, unknown>>(props: AbstractCarouselProps<I, P>) => JSX.Element | null;
 export default AbstractCarousel;

package/_abstract/_AbstractCarousel.js

@@ -24,9 +24,13 @@ const scrollXBy = (elm, deltaX) => {
 };
 const AbstractCarousel = (props) => {
     const { title, items = [], Component, ComponentProps, bem = 'Carousel', modifier, ssr, startSeen, } = props;
-    const children = props.children && props.children.filter(hanna_utils_1.notNully);
+    const children = !props.children
+        ? undefined
+        : Array.isArray(props.children)
+            ? props.children.filter(hanna_utils_1.notNully)
+            : [props.children];
     const [leftOffset, setLeftOffset] = (0, react_1.useState)();
-    const itemCount = (children || items).length;
+    const itemCount = props.itemCount || (children || items).length;
     const listRef = (0, react_1.useRef)(null);
     const [activeItem, setActiveItem] = (0, react_1.useState)(0);
     const isBrowser = (0, hooks_1.useIsBrowserSide)(ssr);

package/assets.js

@@ -14,7 +14,7 @@ Object.defineProperty(exports, "illustrations", { enumerable: true, get: functio
 /** @deprecated Use `getCssBundleUrl` from '@reykjavik/hanna-css' instead  (Will be reomved in v0.11) */
 const getCssBundleUrl = (cssTokens, 
 /** If you want to pin your CSS files to a specific version */
-version) => (0, hanna_css_1.getCssBundleUrl)(cssTokens, { version });
+version) => (0, hanna_css_1.getCssBundleUrl)(cssTokens, { version: version });
 exports.getCssBundleUrl = getCssBundleUrl;
 // ---------------------------------------------------------------------------
 // Based on "https://styles.reykjavik.is/assets/efnistakn/menu/files.json"

package/constants.d.ts

@@ -1,39 +1,19 @@
+import { EitherObj } from '@reykjavik/hanna-utils';
 /** @depcrecated import `colorFamilies` from  `@reykjavik/hanna-css` instead  (Will be removed in v0.11) */
-export declare const colorFamilies: readonly ["esja", "faxafloi", "nautholsvik", "heidmork", "ellidaardalur", "blafjoll", "sund", "rokkur", "suld"] & {
-    readonly esja: "esja";
-    readonly faxafloi: "faxafloi";
-    readonly nautholsvik: "nautholsvik";
-    readonly heidmork: "heidmork";
-    readonly ellidaardalur: "ellidaardalur";
-    readonly blafjoll: "blafjoll";
-    readonly sund: "sund";
-    readonly rokkur: "rokkur";
-    readonly suld: "suld";
-} & {
+export declare const colorFamilies: readonly ["esja", "faxafloi", "nautholsvik", "heidmork", "ellidaardalur", "blafjoll", "sund", "rokkur", "suld"] & Readonly<Record<import("@reykjavik/hanna-css").ColorFamily, import("@reykjavik/hanna-css").ColorFamily>> & {
     /** @deprecated  This is a typo  (Will be removed in v0.11) */
     ellidarardalur: string;
 };
 /** @depcrecated import type `ColorFamily` from `@reykjavik/hanna-css` instead  (Will be removed in v0.11) */
 export type { ColorFamily } from '@reykjavik/hanna-css';
 /** @depcrecated import `colorThemes` from  `@reykjavik/hanna-css` instead  (Will be removed in v0.11) */
-export declare const themeOptions: readonly ["trustworthy", "dependable", "friendly", "lively", "colorful"] & {
-    readonly trustworthy: "trustworthy";
-    readonly dependable: "dependable";
-    readonly friendly: "friendly";
-    readonly lively: "lively";
-    readonly colorful: "colorful";
-};
+export declare const themeOptions: readonly ["trustworthy", "dependable", "friendly", "lively", "colorful"] & Readonly<Record<import("@reykjavik/hanna-css").HannaColorTheme, import("@reykjavik/hanna-css").HannaColorTheme>>;
 /** @depcrecated import type `HannaColorTheme` from `@reykjavik/hanna-css` instead  (Will be removed in v0.11) */
 export type { HannaColorTheme as ThemeOption } from '@reykjavik/hanna-css';
 export declare type Alignment = 'right' | 'left';
 export declare const aligns: Record<string, true | undefined>;
-export declare type ComponentLayoutProps<Align extends string = 'right'> = {
-    wide?: undefined;
-    align?: undefined;
-} | {
-    wide: boolean;
-    align?: undefined;
-} | {
-    wide?: undefined;
-    align: Align;
-};
+export declare type ComponentLayoutProps<Align extends string = 'right'> = EitherObj<{
+    wide?: boolean;
+}, {
+    align?: Align;
+}>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.70",
+	"version": "0.10.71",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",
@@ -15,8 +15,8 @@
 	"dependencies": {
 		"@hugsmidjan/qj": "^4.10.2",
 		"@hugsmidjan/react": "^0.4.17",
-		"@reykjavik/hanna-css": "^0.3.7",
-		"@reykjavik/hanna-utils": "^0.1.14",
+		"@reykjavik/hanna-css": "^0.3.10",
+		"@reykjavik/hanna-utils": "^0.1.17",
 		"@types/react": "^17.0.24",
 		"@types/react-autosuggest": "^10.1.0",
 		"@types/react-datepicker": "^3.0.2",