@reykjavik/hanna-react 0.10.84 → 0.10.85

package/esm/Picture.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { Image } from './_abstract/_Image.js';
+export const Picture = (props) => {
+    const { contain, className } = props;
+    return (React.createElement(Image, Object.assign({}, props, { className: getBemClass('Picture', contain && 'contain', className) })));
+};
+export default Picture;

package/esm/ProcessOverview.d.ts

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

package/esm/ProcessOverview.js

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

package/esm/PullQuote.d.ts

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

package/esm/PullQuote.js

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

package/esm/RadioButtonsGroup.d.ts

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

package/esm/RadioButtonsGroup.js

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

package/esm/RadioGroup.d.ts

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

package/esm/RadioGroup.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TogglerGroupField, } from './_abstract/_TogglerGroupField.js';
+import { TogglerInput } from './_abstract/_TogglerInput.js';
+const Radio = (props) => React.createElement(TogglerInput, Object.assign({}, props, { bem: "Radio", type: "radio" }));
+export const RadioGroup = (props) => (React.createElement(TogglerGroupField, Object.assign({}, props, { bem: "RadioGroup", modifier: props.layout, isRadio: true, Toggler: Radio })));
+/** @deprecated Exposed for testing purposes only. This may disappear at any time. */
+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 type RelatedLinkType = keyof typeof types;
+export type RelatedLinkItem = {
+    href: string;
+    label: string;
+    target?: string;
+    type?: RelatedLinkType;
+};
+export type RelatedLinksProps = {
+    title?: string;
+    titleTag?: 'h2' | 'h3' | 'h4' | 'h5';
+    links: Array<RelatedLinkItem>;
+};
+export declare const RelatedLinks: (props: RelatedLinksProps) => JSX.Element | null;
+export default RelatedLinks;

package/esm/RelatedLinks.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Link } from './_abstract/_Link.js';
+const types = {
+    external: 1,
+    document: 1,
+    pdf: 1,
+    link: 0,
+};
+export const RelatedLinks = (props) => {
+    const { title, links } = props;
+    if (links.length === 0) {
+        return null;
+    }
+    const TitleTag = props.titleTag || 'h3';
+    return (React.createElement("div", { className: "RelatedLinks" },
+        title && React.createElement(TitleTag, { className: "RelatedLinks__title" }, title),
+        React.createElement("ul", { className: "RelatedLinks__list" }, links.map(({ href, label, type, target }, i) => {
+            type = type && types[type] ? type : undefined;
+            return (React.createElement("li", { key: i, className: "RelatedLinks__item" },
+                React.createElement(Link, { className: "RelatedLinks__link", href: href, "data-type": type, target: target },
+                    ' ',
+                    label,
+                    ' ')));
+        }))));
+};
+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.js';
+export type RowBlockProps = {
+    /** Float the first RowBlockColumn to the right on larger screens. */
+    right?: boolean;
+    /** Custom **additional** class-name */
+    className?: string;
+    children: ReactNode;
+} & BemPropsModifier & SeenProp;
+export declare const RowBlock: (props: RowBlockProps) => JSX.Element;
+export default RowBlock;

package/esm/RowBlock.js

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

package/esm/RowBlockColumn.d.ts

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

package/esm/RowBlockColumn.js

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

package/esm/SearchInput.d.ts

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

package/esm/SearchInput.js

@@ -0,0 +1,23 @@
+import { __rest } from "tslib";
+import React, { useState } from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import FormField from './FormField.js';
+export 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 (React.createElement(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) => (React.createElement("div", Object.assign({ className: className.input }, addFocusProps()),
+            React.createElement("input", Object.assign({ className: "SearchInput__input", onChange: _onChange }, inputProps, inputElementProps, { ref: props.inputRef })),
+            ' ',
+            onButtonClick && (React.createElement("button", { className: "SearchInput__button", type: "button", onClick: onButtonClick, title: buttonText, ref: props.buttonRef, disabled: disabled || readOnly }, buttonText)))) }));
+};
+export default SearchInput;

package/esm/SearchResults/_SearchResultsItem.d.ts

@@ -0,0 +1,18 @@
+type MetaValue = string | (() => JSX.Element | string | number);
+export 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;
+};
+export declare const SearchResultsItem: (props: SearchResultsItemProps) => JSX.Element;
+export {};

package/esm/SearchResults/_SearchResultsItem.js

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

package/esm/SearchResults.d.ts

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

package/esm/SearchResults.js

@@ -0,0 +1,108 @@
+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 { getTexts } from '@reykjavik/hanna-utils/i18n';
+import { SearchResultsItem, } from './SearchResults/_SearchResultsItem.js';
+import Alert from './Alert.js';
+import Tabs from './Tabs.js';
+const renderDefaultErrorText = () => (React.createElement(React.Fragment, null,
+    "\u00DAps, \u00FEa\u00F0 hefur komi\u00F0 upp villa. M\u00E1 bj\u00F3\u00F0a \u00FE\u00E9r a\u00F0 pr\u00F3fa aftur a\u00F0 leita?",
+    React.createElement("br", null),
+    "Ef ekkert l\u00E1t er \u00E1 villunni \u00FE\u00E1 kunnum vi\u00F0 a\u00F0 meta a\u00F0 \u00FE\u00FA l\u00E1tir 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 ? (React.createElement(Tabs, { role: "tablist", "aria-controls": domid, tabs: tabs, activeIdx: activeIdx || 0, onSetActive: (i) => setFilter && setFilter(i) })) : null;
+};
+const LoadingScaffold = (props) => props.count ? (React.createElement("ol", { className: "SearchResults__list SearchResults__list--loading" }, range(1, props.count).map((item, i) => (React.createElement(SearchResultsItem, { key: i, title: "...", summary: "", href: "" }))))) : 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' ? (React.createElement(LoadingScaffold, { count: Math.min(pageSize, moreCount) })) : moreAvailable ? (React.createElement("button", { ref: refFn, className: "SearchResults__loadmore", type: "button", onClick: loadMore },
+        texts.loadMore,
+        ' ',
+        React.createElement("span", { className: "SearchResults__loadmore__count" },
+            "(",
+            prettyNum(moreCount, { lang }),
+            ")"))) : null;
+};
+// ===========================================================================
+const renderTitle = (props, texts) => {
+    const { status, totalHits, query } = props;
+    return (React.createElement("h2", { className: "SearchResults__title" },
+        status === 'loadingquery'
+            ? texts.loadQueryTitle
+            : totalHits
+                ? prettyNum(totalHits, { lang: texts.lang }) +
+                    ' ' +
+                    texts.resultsTitle
+                : texts.noResultsTitle,
+        React.createElement("span", { className: "SearchResults__query" }, query)));
+};
+// ---------------------------------------------------------------------------
+const renderResults = (props) => {
+    const { status, pageSize, items, hits } = props;
+    if (status === 'loadingquery' || status === 'loadingfilter') {
+        return React.createElement(LoadingScaffold, { count: Math.min(pageSize, hits || 999) });
+    }
+    return items && items.length ? (React.createElement("ol", { className: "SearchResults__list" }, items.map((item, i) => (React.createElement(SearchResultsItem, Object.assign({ key: i }, item)))))) : null;
+};
+// ---------------------------------------------------------------------------
+const renderLoadMore = (props, texts) => {
+    const { hits, items, status, pageSize, loadMore } = props;
+    return (React.createElement(SearchResults__loadmore, { hits: hits, numItems: items && items.length, status: status, pageSize: pageSize, loadMore: loadMore, texts: texts }));
+};
+// TODO: add plural translation thingy for result string
+export const SearchResults = (props) => {
+    const { filters, activeFilterIdx, setFilter, status, errorText } = props;
+    const texts = getTexts(props, defaultTexts);
+    const domid = useDomid();
+    return (React.createElement("div", { className: getBemClass('SearchResults', status !== 'results' && status) },
+        renderTitle(props, texts),
+        React.createElement(SearchResults_Tabs, { domid: domid, filters: filters, activeIdx: activeFilterIdx, setFilter: setFilter, lang: texts.lang }),
+        React.createElement("div", { className: "SearchResults__results", id: domid },
+            renderResults(props),
+            status === 'error' && (React.createElement(Alert, { type: "error" }, errorText || renderDefaultErrorText())),
+            renderLoadMore(props, texts))));
+};
+export default SearchResults;

package/esm/SeenEffect.d.ts

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

package/esm/SeenEffect.js

@@ -0,0 +1,9 @@
+import { __rest } from "tslib";
+import React from 'react';
+import { getEffectAttr, useSeenEffect, } from './utils/seenEffect.js';
+export const SeenEffect = (props) => {
+    const { effectType, startSeen } = props, divProps = __rest(props, ["effectType", "startSeen"]);
+    const [ref] = useSeenEffect(startSeen);
+    return React.createElement("div", Object.assign({}, divProps, { ref: ref }, getEffectAttr(effectType)));
+};
+export default SeenEffect;

package/esm/Selectbox.d.ts

@@ -0,0 +1,11 @@
+import type { SelectboxProps as _SelectboxProps } from '@hugsmidjan/react/Selectbox';
+import { FormFieldWrappingProps } from './FormField.js';
+export { type SelectboxOption, type SelectboxOptions as SelectboxOptionList, 
+/** @deprecated Use `SelectboxOptionList` instead  (Will be removed in v0.11) */
+type SelectboxOptions, } from '@hugsmidjan/react/Selectbox';
+type OptionOrValue = _SelectboxProps['options'][0];
+export type SelectboxProps<O extends OptionOrValue = OptionOrValue> = FormFieldWrappingProps & Omit<_SelectboxProps<O>, 'bem'> & {
+    small?: boolean;
+};
+export declare const Selectbox: <O extends import("@hugsmidjan/react/__types/Selectbox.privates.js").OptionOrValue>(props: SelectboxProps<O>) => JSX.Element;
+export default Selectbox;

package/esm/Selectbox.js

@@ -0,0 +1,40 @@
+import { __rest } from "tslib";
+import React, { useEffect, useRef, useState } from 'react';
+import _Selectbox from '@hugsmidjan/react/Selectbox';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import FormField from './FormField.js';
+const getValue = (opt) => {
+    const val = typeof opt === 'object' ? opt.value : opt;
+    return typeof val === 'number' ? String(val) : val;
+};
+export const Selectbox = (props) => {
+    const { className, label, assistText, hideLabel, disabled, readOnly, reqText, invalid, errorMessage, required, id, ssr, onChange, small } = props, selectProps = __rest(props, ["className", "label", "assistText", "hideLabel", "disabled", "readOnly", "reqText", "invalid", "errorMessage", "required", "id", "ssr", "onChange", "small"]);
+    const { value, defaultValue, placeholder, options } = selectProps;
+    const _selectRef = useRef(null);
+    const selectRef = selectProps.selectRef || _selectRef;
+    const getInitialValue = () => { var _a; return (_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : getValue(options[0]); };
+    const [isFilled, setIsFilled] = useState(() => !!getInitialValue());
+    const [isEmpty, setIsEmpty] = useState(() => !getInitialValue() && !placeholder);
+    useEffect(() => {
+        setTimeout(() => {
+            var _a;
+            const selectElm = selectRef.current;
+            if (selectElm) {
+                setIsFilled(!!selectElm.value);
+                setIsEmpty(!((_a = selectElm.selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.text));
+            }
+        }, 0);
+    }, [selectRef, value, defaultValue, options]);
+    const _onChange = (e) => {
+        var _a;
+        const selectElm = e.currentTarget;
+        setIsFilled(!!selectElm.value);
+        setIsEmpty(!((_a = selectElm.selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.text));
+        onChange && onChange(e);
+    };
+    return (React.createElement(FormField, { className: getBemClass('Selectbox', null, className), ssr: ssr, small: small, label: label, empty: isEmpty, filled: isFilled, assistText: assistText, hideLabel: hideLabel, disabled: disabled, readOnly: readOnly, invalid: invalid, errorMessage: errorMessage, required: required, reqText: reqText, id: id, renderInput: (className, inputProps, addFocusProps) => (React.createElement(_Selectbox, Object.assign({ bem: className.input, ssr: ssr, onChange: _onChange }, inputProps, addFocusProps(selectProps), { selectRef: selectRef }))) }));
+};
+// /** @deprecated Use named export instead (The default export will be removed in v0.11+) */
+// const SelectboxDefault = Selectbox;
+// export default SelectboxDefault;
+export default Selectbox;

package/esm/ShareButtons.d.ts

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

package/esm/ShareButtons.js

@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from 'react';
+import { DEFAULT_LANG } from '@reykjavik/hanna-utils/i18n';
+import { getDocMeta, getShareButtonLabel, openInPopup, shareButtonTexts, shareButtonTypes, } from '@reykjavik/hanna-utils/shareButtonsUtils';
+import { Link } from './_abstract/_Link.js';
+const generateTypeList = (facebook, twitter, linkedin, email) => {
+    const listStr = ((facebook ? 'facebook,' : '') +
+        (twitter ? 'twitter,' : '') +
+        (linkedin ? 'linkedin,' : '') +
+        (email ? 'email,' : '')).slice(0, -1);
+    return (listStr !== 'facebook,twitter' && listStr) || undefined;
+};
+// FIXME: see other FIXME below for details
+// TODO: Also figure out if/why the truthyness of document.location would be in doubt here
+const docLoc = typeof document !== 'undefined' ? document.location : { href: undefined };
+const ShareButtons__item = (props) => {
+    const { label, type, href } = props;
+    const buttonText = getShareButtonLabel(type, label);
+    const popup = type !== 'email';
+    return (React.createElement("li", { className: "ShareButtons__item" },
+        React.createElement(Link, { className: 'ShareButtons__link ShareButtons__link--' + type, href: href, title: buttonText, rel: "noopener noreferrer", target: popup ? '_blank' : undefined, onClick: popup ? openInPopup : undefined }, buttonText)));
+};
+export const ShareButtons = (props) => {
+    const { texts, lang, ssr, facebook = true, twitter = true, linkedin, email, } = props;
+    const [docMeta, setDocMeta] = useState();
+    const href = docLoc.href; // assign to local variable to silence `react-hooks/exhaustive-deps`
+    useEffect(() => {
+        // FIXME: Drop dependency on _loc.href and set up proper
+        // location/route monitoring event handler, with unsubscribe on unmount
+        setDocMeta(getDocMeta({
+            lang,
+            emailSubject: texts && texts.emailSubject,
+        }));
+    }, [texts, lang, href]);
+    if (!facebook && !twitter && !linkedin && !email) {
+        // no place to share
+        return null;
+    }
+    const txt = texts ||
+        (docMeta && (shareButtonTexts[docMeta.lang] || shareButtonTexts[DEFAULT_LANG])) ||
+        {};
+    const { label, buttonLabel, emailSubject } = txt;
+    if (!docMeta || ssr === 'ssr-only') {
+        // Generate SSR markup for hanna-sprinkles to pick up on.
+        return (React.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,
+        twitter,
+        linkedin,
+        email,
+    };
+    return (React.createElement("div", { className: "ShareButtons", "aria-label": label, "data-sprinkled": "true" },
+        label && React.createElement("strong", { className: "ShareButtons__label" }, label),
+        React.createElement("ul", { className: "ShareButtons__list" }, shareButtonTypes.map((type) => showTypes[type] && (React.createElement(ShareButtons__item, { key: type, type: type, label: buttonLabel || '', href: docMeta.hrefs[type] }))))));
+};
+export default ShareButtons;

package/esm/Sharpie.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+declare const colors: {
+    green: number;
+    red: number;
+};
+type SharpieColor = keyof typeof colors;
+declare const tags: {
+    span: number;
+    strong: number;
+    em: number;
+    b: number;
+    i: number;
+    u: number;
+    s: number;
+};
+type SharpieTag = keyof typeof tags;
+export type SharpieProps = {
+    color: SharpieColor;
+    tag?: SharpieTag;
+    children: ReactNode;
+};
+export declare const Sharpie: (props: SharpieProps) => JSX.Element;
+export default Sharpie;

package/esm/Sharpie.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+const colors = {
+    green: 1,
+    red: 1,
+};
+const tags = {
+    span: 1,
+    strong: 1,
+    em: 1,
+    b: 1,
+    i: 1,
+    u: 1,
+    s: 1,
+};
+export const Sharpie = (props) => {
+    const { color, tag, children } = props;
+    const colorModifier = colors[color] ? color : 'green';
+    const Tag = tag && tags[tag] ? tag : 'span';
+    return React.createElement(Tag, { className: getBemClass('Sharpie', colorModifier) }, children);
+};
+export default Sharpie;