@reykjavik/hanna-react 0.10.53 → 0.10.56

package/esm/NewsHero.jsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { getStableRandomItem } from '@reykjavik/hanna-utils';
+import Blings from './_abstract/_Blings';
+import Image from './_abstract/Image';
+import { useSeenEffect } from './utils/seenEffect';
+import ShareButtons from './ShareButtons';
+const blingOptions = {
+    interesting: [
+        {
+            type: 'circle-xlarge',
+            parent: 'center',
+        },
+        {
+            type: 'loops-small',
+            color: 'secondary',
+            align: 'left-ish',
+            vertical: 'down-ish',
+            parent: 'center',
+        },
+    ],
+    snake: [
+        {
+            type: 'snake-large',
+            align: 'left',
+            parent: 'top',
+            vertical: 'down',
+        },
+    ],
+    pentagon: [
+        {
+            type: 'pentagon-large',
+            align: 'left',
+            parent: 'center',
+        },
+    ],
+    dome: [
+        {
+            type: 'dome-large',
+            align: 'left-ish',
+            parent: 'top',
+            vertical: 'down',
+        },
+    ],
+    'balls-small': [
+        {
+            type: 'circle-large',
+            align: 'left',
+            parent: 'center',
+        },
+        {
+            type: 'circle-small',
+            color: 'secondary',
+            align: 'right',
+            parent: 'bottom',
+            vertical: 'down',
+        },
+    ],
+    'balls-large': [
+        {
+            type: 'halfcircle-down-large',
+            align: 'left',
+            parent: 'bottom',
+            vertical: 'up',
+        },
+        {
+            type: 'circle-medium',
+            color: 'secondary',
+            align: 'left-center',
+            parent: 'bottom',
+        },
+    ],
+};
+const NewsHero = (props) => {
+    const { title, sharing = true, meta, summary, image, blingType, startSeen } = props;
+    const [ref] = useSeenEffect(startSeen);
+    const blings = (blingType && blingOptions[blingType]) || getStableRandomItem(blingOptions, title);
+    return (<div className={getBemClass('NewsHero', [!image && 'align--right'])} ref={ref}>
+      <div className="NewsHero__content">
+        <h1 className="NewsHero__title">{title}</h1>
+        {meta && <span className="NewsHero__meta">{meta}</span>}
+        <div className="NewsHero__summary">{summary}</div>
+        {sharing === true ? <ShareButtons /> : sharing && sharing()}
+      </div>
+      {image ? (<Image className="NewsHero__image" {...image}/>) : (<Blings blings={blings}/>)}
+    </div>);
+};
+export default NewsHero;

package/esm/PageFilter.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { SeenProp } from './utils/seenEffect';
+export declare type PageFilterProps = {
+    title: string;
+    summary?: React.ReactNode;
+    footnote?: React.ReactNode;
+    buttonRow?: React.ReactNode;
+    underlap?: boolean;
+} & ({
+    filters: React.ReactNode;
+    children?: never;
+} | {
+    filters?: never;
+    children: React.ReactNode;
+}) & SeenProp;
+declare const PageFilter: (props: PageFilterProps) => JSX.Element;
+export default PageFilter;

package/esm/PageFilter.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { useSeenEffect } from './utils/seenEffect';
+import Footnote from './Footnote';
+const PageFilter = (props) => {
+    const { title, summary, footnote, filters, children, buttonRow, underlap, startSeen } = props;
+    const [ref] = useSeenEffect(startSeen);
+    return (<div className={getBemClass('PageFilter', underlap && 'underlap')} ref={ref}>
+      <h2 className="PageFilter__title">{title}</h2>
+      {summary && <div className="PageFilter__summary">{summary}</div>}
+      <div className="PageFilter__filters">{filters || children}</div>
+      <div className="PageFilter__buttons">{buttonRow}</div>
+      {footnote && <Footnote>{footnote}</Footnote>}
+    </div>);
+};
+export default PageFilter;

package/esm/PageHeading.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { SeenProp } from './utils/seenEffect';
+export declare type PageHeadingProps = {
+    Tag?: 'h1' | 'h2';
+    align?: 'right';
+    small?: boolean;
+    children: ReactNode;
+} & SeenProp;
+declare const PageHeading: (props: PageHeadingProps) => JSX.Element;
+export default PageHeading;

package/esm/PageHeading.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { useSeenEffect } from './utils/seenEffect';
+const PageHeading = (props) => {
+    const { Tag = 'h1', align, small, children, startSeen } = props;
+    const [ref] = useSeenEffect(startSeen);
+    return (<Tag className={getBemClass('PageHeading', [
+            small && 'small',
+            align === 'right' && 'align--' + align,
+        ])} ref={ref}>
+      {children}
+    </Tag>);
+};
+export default PageHeading;

package/esm/ProcessOverview.d.ts

@@ -0,0 +1,13 @@
+export declare type ProcessOverviewItemProps = {
+    title: string;
+    content: string | JSX.Element;
+};
+export declare type ProcessOverviewProps = {
+    title: string;
+    items: Array<ProcessOverviewItemProps>;
+    attention?: string | JSX.Element;
+    transparent?: boolean;
+    narrow?: boolean;
+};
+declare const ProcessOverview: (props: ProcessOverviewProps) => JSX.Element;
+export default ProcessOverview;

package/esm/ProcessOverview.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+const ProcessOverview = (props) => {
+    const { title, items, attention, transparent, narrow } = props;
+    return (<div className={getBemClass('ProcessOverview', [
+            transparent && 'transparent',
+            narrow && 'narrow',
+        ])}>
+      <h2 className="ProcessOverview__title">{title}</h2>
+      {items.map(({ title, content }, i) => {
+            return (<div key={i} className="ProcessOverview__item">
+            <h3 className="ProcessOverview__item__title">{title}</h3>
+            <div className="ProcessOverview__item__content">{content}</div>
+          </div>);
+        })}
+
+      {attention && <div className="ProcessOverview__attention">{attention}</div>}
+    </div>);
+};
+export default ProcessOverview;

package/esm/PullQuote.d.ts

@@ -0,0 +1,4 @@
+import { QuoteProps } from './_abstract/_Quote';
+export declare type PullQuoteProps = QuoteProps;
+declare const PullQuote: (props: PullQuoteProps) => JSX.Element;
+export default PullQuote;

package/esm/PullQuote.jsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { _Quote } from './_abstract/_Quote';
+const PullQuote = (props) => <_Quote bem="PullQuote" {...props}/>;
+export default PullQuote;

package/esm/RadioButtonsGroup.d.ts

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

package/esm/RadioButtonsGroup.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import TogglerGroupField from './_abstract/TogglerGroupField';
+import TogglerInput from './_abstract/TogglerInput';
+const RadioButton = (props) => (<TogglerInput {...props} bem="RadioButton" type="radio"/>);
+const RadioButtonsGroup = (props) => {
+    if (props.layout) {
+        console.warn('`RadioButtonsGroupProps.layout` is deprecated.');
+    }
+    if (props.columns) {
+        console.warn('`RadioButtonsGroupProps.columns` is deprecated.');
+    }
+    return <TogglerGroupField {...props} bem="RadioButtonsGroup" Toggler={RadioButton}/>;
+};
+export default RadioButtonsGroup;

package/esm/RadioGroup.d.ts

@@ -0,0 +1,13 @@
+import { TogglerGroupFieldOption, TogglerGroupFieldOptions, TogglerGroupFieldProps } from './_abstract/TogglerGroupField';
+import { TogglerInputProps } from './_abstract/TogglerInput';
+export declare type RadioGroupProps = TogglerGroupFieldProps & {
+    layout?: 'inline';
+    value?: string;
+};
+export declare type RadioGroupOption = TogglerGroupFieldOption;
+export declare type RadioGroupOptions = TogglerGroupFieldOptions;
+declare const RadioGroup: {
+    (props: RadioGroupProps): JSX.Element;
+    __Radio: (props: TogglerInputProps) => JSX.Element;
+};
+export default RadioGroup;

package/esm/RadioGroup.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import TogglerGroupField from './_abstract/TogglerGroupField';
+import TogglerInput from './_abstract/TogglerInput';
+const Radio = (props) => (<TogglerInput {...props} bem="Radio" type="radio"/>);
+const RadioGroup = (props) => (<TogglerGroupField {...props} bem="RadioGroup" modifier={props.layout} Toggler={Radio}/>);
+RadioGroup.__Radio = Radio;
+export default RadioGroup;

package/esm/RelatedLinks.d.ts

@@ -0,0 +1,20 @@
+declare const types: {
+    readonly external: 1;
+    readonly document: 1;
+    readonly pdf: 1;
+    readonly link: 0;
+};
+export declare type RelatedLinkType = keyof typeof types;
+export declare type RelatedLinkItem = {
+    href: string;
+    label: string;
+    target?: string;
+    type?: RelatedLinkType;
+};
+export declare type RelatedLinksProps = {
+    title?: string;
+    titleTag?: 'h2' | 'h3' | 'h4' | 'h5';
+    links: Array<RelatedLinkItem>;
+};
+declare const RelatedLinks: (props: RelatedLinksProps) => JSX.Element | null;
+export default RelatedLinks;

package/esm/RelatedLinks.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Link } from './_abstract/Link';
+const types = {
+    external: 1,
+    document: 1,
+    pdf: 1,
+    link: 0,
+};
+const RelatedLinks = (props) => {
+    const { title, links } = props;
+    if (links.length === 0) {
+        return null;
+    }
+    const TitleTag = props.titleTag || 'h3';
+    return (<div className="RelatedLinks">
+      {title && <TitleTag className="RelatedLinks__title">{title}</TitleTag>}
+      <ul className="RelatedLinks__list">
+        {links.map(({ href, label, type, target }, i) => {
+            type = type && types[type] ? type : undefined;
+            return (<li key={i} className="RelatedLinks__item">
+              <Link className="RelatedLinks__link" href={href} data-type={type} target={target}>
+                {' '}
+                {label}{' '}
+              </Link>
+            </li>);
+        })}
+      </ul>
+    </div>);
+};
+export default RelatedLinks;

package/esm/RowBlock.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { BemPropsModifier } from '@hugsmidjan/react/types';
+import { SeenProp } from './utils/seenEffect';
+export declare type RowBlockProps = {
+    /** Float the first RowBlockColumn to the right on larger screens. */
+    right?: boolean;
+    /** Custom **additional** class-name */
+    className?: string;
+    children: ReactNode;
+} & BemPropsModifier & SeenProp;
+declare const RowBlock: (props: RowBlockProps) => JSX.Element;
+export default RowBlock;

package/esm/RowBlock.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { useSeenEffect } from './utils/seenEffect';
+const RowBlock = (props) => {
+    const { right, modifier, className, children, startSeen } = props;
+    const [ref] = useSeenEffect(startSeen);
+    return (<div className={getBemClass('RowBlock', [modifier, right && 'align--right'], className)} ref={ref}>
+      {children}
+    </div>);
+};
+export default RowBlock;

package/esm/RowBlockColumn.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export declare type RowBlockColumnProps = {
+    background?: boolean | 'primary';
+    narrow?: boolean;
+    children: ReactNode;
+};
+declare const RowBlockColumn: (props: RowBlockColumnProps) => JSX.Element;
+export default RowBlockColumn;

package/esm/RowBlockColumn.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+const RowBlockColumn = (props) => {
+    const { background, narrow, children } = props;
+    return (<div className={getBemClass('RowBlockColumn', [
+            narrow && 'narrow',
+            background && 'background',
+            background === 'primary' && 'background--primary',
+        ])}>
+      {children}
+    </div>);
+};
+export default RowBlockColumn;

package/esm/SearchInput.d.ts

@@ -0,0 +1,18 @@
+import { RefObject } from 'react';
+import { FormFieldWrappingProps } from './FormField';
+declare type InputElmProps = JSX.IntrinsicElements['input'];
+declare type BaseProps<Type extends {
+    type?: string;
+}, InputProps extends object> = {
+    small?: boolean;
+    children?: undefined;
+    onButtonClick?: () => void;
+    buttonText?: string;
+    inputRef?: RefObject<HTMLInputElement>;
+    buttonRef?: RefObject<HTMLButtonElement>;
+} & Type & FormFieldWrappingProps & InputProps;
+export declare type SearchInputProps = BaseProps<{
+    type?: 'text';
+}, InputElmProps>;
+declare const SearchInput: (props: SearchInputProps) => JSX.Element;
+export default SearchInput;

package/esm/SearchInput.jsx

@@ -0,0 +1,35 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useState } from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import FormField from './FormField';
+const SearchInput = (props) => {
+    var _a;
+    const { className, label, assistText, hideLabel, disabled, readOnly, invalid, errorMessage, required, reqText, id, onChange, small, onButtonClick, buttonText = 'Leita', ssr } = props, inputElementProps = __rest(props, ["className", "label", "assistText", "hideLabel", "disabled", "readOnly", "invalid", "errorMessage", "required", "reqText", "id", "onChange", "small", "onButtonClick", "buttonText", "ssr"]);
+    const { value, defaultValue, placeholder } = inputElementProps;
+    const [hasValue, setHasValue] = useState(undefined);
+    const filled = !!((_a = value !== null && value !== void 0 ? value : hasValue) !== null && _a !== void 0 ? _a : !!defaultValue);
+    const empty = !filled && !placeholder;
+    const _onChange = value != null
+        ? onChange
+        : (e) => {
+            setHasValue(!!e.target.value);
+            onChange && onChange(e);
+        };
+    return (<FormField className={getBemClass('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) => (<div className={className.input} {...addFocusProps()}>
+          <input className="SearchInput__input" onChange={_onChange} {...inputProps} {...inputElementProps} ref={props.inputRef}/>{' '}
+          {onButtonClick && (<button className="SearchInput__button" type="button" onClick={onButtonClick} title={buttonText} ref={props.buttonRef}>
+              {buttonText}
+            </button>)}
+        </div>)}/>);
+};
+export default SearchInput;

package/esm/SearchResults/_SearchResultsItem.d.ts

@@ -0,0 +1,18 @@
+declare type MetaValue = string | (() => JSX.Element | string | number);
+export declare type SearchResultsItemProps = {
+    /** Plain text title */
+    title: string;
+    /** Simple HTML-encoded summary (excluding any layout)  */
+    summary: string;
+    href: string;
+    meta?: MetaValue | ReadonlyArray<MetaValue>;
+    /**
+     * URL to the image to display with the result item.
+     * Should ideally be approximately 600-700px wide
+     */
+    image?: string;
+    /** Should this search-result item be displayed as a "major"/"main" result at the top */
+    highlight?: boolean;
+};
+declare const SearchResultsItem: (props: SearchResultsItemProps) => JSX.Element;
+export default SearchResultsItem;

package/esm/SearchResults/_SearchResultsItem.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Image from '../_abstract/Image';
+import { Link } from '../_abstract/Link';
+const SearchResultsItem = (props) => {
+    const { highlight, title, summary, href, meta, image } = props;
+    const bem = highlight ? 'SearchResultsHighlightItem' : 'SearchResultsItem';
+    const metaArr = (Array.isArray(meta) ? meta : [meta]);
+    return (<li className={bem}>
+      <Link className={bem + '__link'} href={href}>
+        <h3 className={bem + '__title'}>{title}</h3>
+        {metaArr.length > 0 && (<span className={bem + '__meta'}>
+            {metaArr.map((item, i) => typeof item === 'function' ? item() : item && <span key={i}>{item}</span>)}
+          </span>)}
+        {highlight && image && <Image className={bem + '__image'} src={image}/>}
+        <div className={bem + '__summary'} dangerouslySetInnerHTML={{ __html: summary }}/>
+      </Link>
+    </li>);
+};
+export default SearchResultsItem;

package/esm/SearchResults.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { SearchResultsItemProps } from './SearchResults/_SearchResultsItem';
+export declare type SearchReesultI18n = {
+    lang: string;
+    loadQueryTitle: string;
+    resultsTitle: string;
+    noResultsTitle: string;
+    loadMore: string;
+};
+export declare type SearchStatus = 'loadingquery' | 'loadingfilter' | 'error' | 'results' | 'loadingmore';
+export declare type SearchResultsFilter = {
+    label: string;
+    count?: number;
+};
+export type { SearchResultsItemProps } from './SearchResults/_SearchResultsItem';
+export declare type SearchResultsProps = {
+    totalHits?: number;
+    hits?: number;
+    query?: string;
+    items?: Array<SearchResultsItemProps>;
+    filters?: Array<SearchResultsFilter>;
+    activeFilterIdx?: number;
+    setFilter?: (activeTab: number) => void;
+    status: SearchStatus;
+    errorText?: string | ReactNode;
+    pageSize: number;
+    pages?: number;
+    loadMore?: () => void;
+    texts?: SearchReesultI18n;
+    lang?: string;
+};
+declare const SearchResults: (props: SearchResultsProps) => JSX.Element;
+export default SearchResults;

package/esm/SearchResults.jsx

@@ -0,0 +1,118 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import { useInView } from 'react-intersection-observer';
+import { prettyNum } from '@hugsmidjan/qj/prettyNum';
+import range from '@hugsmidjan/qj/range';
+import { useDomid } from '@hugsmidjan/react/hooks';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { DEFAULT_LANG, getTexts } from '@reykjavik/hanna-utils/i18n';
+import SearchResultsItem from './SearchResults/_SearchResultsItem';
+import Alert from './Alert';
+import Tabs from './Tabs';
+const renderDefaultErrorText = () => (<>
+    Úps, það hefur komið upp villa. Má bjóða þér að prófa aftur að leita?
+    <br />
+    Ef ekkert lát er á villunni þá kunnum við að meta að þú látir okkur vita.
+  </>);
+const defaultTexts = {
+    en: {
+        lang: 'en',
+        loadQueryTitle: 'Loading results...',
+        resultsTitle: 'results found for',
+        noResultsTitle: 'No results were found for',
+        loadMore: 'Load more',
+        // loadingMore: 'Loading...',
+    },
+    is: {
+        lang: 'is',
+        loadQueryTitle: 'Sæki niðurstöður...',
+        resultsTitle: 'leitarniðurstöður fyrir',
+        noResultsTitle: 'Engar leitarniðurstöður fundust fyrir',
+        loadMore: 'Sækja fleiri',
+        // loadingMore: 'Sæki fleiri...',
+    },
+};
+const SearchResults_Tabs = (props) => {
+    const { domid, filters, activeIdx, setFilter, lang } = props;
+    const tabs = useMemo(() => (filters || []).map(({ label, count }) => ({
+        label,
+        badge: prettyNum(count, { lang }),
+    })), [filters, lang]);
+    return tabs.length ? (<Tabs role="tablist" aria-controls={domid} tabs={tabs} activeIdx={activeIdx || 0} onSetActive={(i) => setFilter && setFilter(i)}/>) : null;
+};
+const LoadingScaffold = (props) => props.count ? (<ol className="SearchResults__list SearchResults__list--loading">
+      {range(1, props.count).map((item, i) => (<SearchResultsItem key={i} title="..." summary="" href=""/>))}
+    </ol>) : null;
+// ===========================================================================
+const NUM_AUTOLOADS = 2;
+const SearchResults__loadmore = (props) => {
+    const { status, hits, numItems, loadMore, pageSize, texts } = props;
+    const { lang } = texts;
+    const moreCount = (hits || 0) - (numItems || 0);
+    const autoLoadCount = useRef(0);
+    const skip = !loadMore || autoLoadCount.current >= NUM_AUTOLOADS;
+    const [refFn, theEndIsNigh] = useInView({
+        rootMargin: '150px 0px 0px 0px',
+        skip, // disable after two clicks
+    });
+    useEffect(() => {
+        if (theEndIsNigh && loadMore) {
+            autoLoadCount.current = autoLoadCount.current + 1;
+            loadMore();
+        }
+    }, [theEndIsNigh, loadMore]);
+    const moreAvailable = status === 'results' && moreCount && loadMore;
+    return status === 'loadingmore' ? (<LoadingScaffold count={Math.min(pageSize, moreCount)}/>) : moreAvailable ? (<button ref={refFn} className="SearchResults__loadmore" type="button" onClick={loadMore}>
+      {texts.loadMore}{' '}
+      <span className="SearchResults__loadmore__count">
+        ({prettyNum(moreCount, { lang })})
+      </span>
+    </button>) : null;
+};
+// ===========================================================================
+const renderTitle = (props, texts) => {
+    const { status, totalHits, query } = props;
+    const lang = texts.lang || props.lang || DEFAULT_LANG;
+    return (<h2 className="SearchResults__title">
+      {status === 'loadingquery'
+            ? texts.loadQueryTitle
+            : totalHits
+                ? prettyNum(totalHits, { lang: lang }) +
+                    ' ' +
+                    texts.resultsTitle
+                : texts.noResultsTitle}
+      <span className="SearchResults__query">{query}</span>
+    </h2>);
+};
+// ---------------------------------------------------------------------------
+const renderResults = (props) => {
+    const { status, pageSize, items, hits } = props;
+    if (status === 'loadingquery' || status === 'loadingfilter') {
+        return <LoadingScaffold count={Math.min(pageSize, hits || 999)}/>;
+    }
+    return items && items.length ? (<ol className="SearchResults__list">
+      {items.map((item, i) => (<SearchResultsItem key={i} {...item}/>))}
+    </ol>) : null;
+};
+// ---------------------------------------------------------------------------
+const renderLoadMore = (props, texts) => {
+    const { hits, items, status, pageSize, loadMore } = props;
+    return (<SearchResults__loadmore hits={hits} numItems={items && items.length} status={status} pageSize={pageSize} loadMore={loadMore} texts={texts}/>);
+};
+// TODO: add plural translation thingy for result string
+const SearchResults = (props) => {
+    const { filters, activeFilterIdx, setFilter, status, errorText } = props;
+    const texts = getTexts(props, defaultTexts);
+    const domid = useDomid();
+    return (<div className={getBemClass('SearchResults', status !== 'results' && status)}>
+      {renderTitle(props, texts)}
+
+      <SearchResults_Tabs domid={domid} filters={filters} activeIdx={activeFilterIdx} setFilter={setFilter} lang={texts.lang}/>
+
+      <div className="SearchResults__results" id={domid}>
+        {renderResults(props)}
+        {status === 'error' && (<Alert type="error">{errorText || renderDefaultErrorText()}</Alert>)}
+        {renderLoadMore(props, texts)}
+      </div>
+    </div>);
+};
+export default SearchResults;

package/esm/SeenEffect.d.ts

@@ -0,0 +1,4 @@
+import { EffectProp, SeenProp } from './utils/seenEffect';
+export declare type SeenEffectProps = Omit<JSX.IntrinsicElements['div'], 'ref'> & SeenProp & EffectProp;
+declare const SeenEffect: (props: SeenEffectProps) => JSX.Element;
+export default SeenEffect;

package/esm/SeenEffect.jsx

@@ -0,0 +1,19 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { getEffectAttr, useSeenEffect } from './utils/seenEffect';
+const SeenEffect = (props) => {
+    const { effectType, startSeen } = props, divProps = __rest(props, ["effectType", "startSeen"]);
+    const [ref] = useSeenEffect(startSeen);
+    return <div {...divProps} ref={ref} {...getEffectAttr(effectType)}/>;
+};
+export default SeenEffect;

package/esm/Selectbox.d.ts

@@ -0,0 +1,8 @@
+import { SelectboxProps as _SelectboxProps } from '@hugsmidjan/react/Selectbox';
+import { FormFieldWrappingProps } from './FormField';
+export declare type SelectboxProps = FormFieldWrappingProps & Omit<_SelectboxProps, 'bem'> & {
+    small?: boolean;
+};
+export type { SelectboxOptions } from '@hugsmidjan/react/Selectbox';
+declare const Selectbox: (props: SelectboxProps) => JSX.Element;
+export default Selectbox;