@reykjavik/hanna-react 0.10.59 → 0.10.62

package/esm/VerticalTabsTOC.js

@@ -1,68 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { setFrag } from '@hugsmidjan/qj/frag';
-import { useDomid } from '@hugsmidjan/react/hooks';
-import Tabs from './Tabs';
-const getId = (url) => (url && decodeURIComponent(url.split('#')[1] || '')) || '';
-const getItemId = (item) => getId(item && item.href);
-const mapToItemsById = (items, domid) => {
-    const updatedItems = items.map((item) => {
-        return Object.assign(Object.assign({}, item), { 'aria-controls': item['aria-controls'] || domid });
-    });
-    const itemsById = {};
-    updatedItems.forEach((topItem, activeIdx) => {
-        const subItems = topItem.items;
-        if (!subItems) {
-            const itemId = getItemId(topItem);
-            itemsById[itemId] = { activeIdx };
-            return;
-        }
-        subItems.forEach((subItem, idx) => {
-            itemsById[getItemId(subItem)] = {
-                activeIdx,
-                subTabs: {
-                    activeIdx: idx,
-                    'aria-label': topItem.longLabel || topItem.label,
-                    id: topItem['aria-controls'],
-                    tabs: subItems,
-                    onSetActive: (_, item) => {
-                        const newId = getItemId(item);
-                        setFrag(newId);
-                    },
-                },
-            };
-            if (idx === 0) {
-                topItem.href = topItem.href || '#' + getItemId(subItem);
-            }
-        });
-    });
-    return { itemsById, updatedItems };
-};
-const VerticalTabsTOC = (props) => {
-    const { onItemSelect, items } = props;
-    const _domid = useDomid();
-    const domid = props.id || _domid;
-    const { itemsById, updatedItems } = useMemo(() => mapToItemsById(items, domid), [items, domid]);
-    const [state, setState] = useState(() => {
-        const initialId = typeof location !== 'undefined' ? getId(location.hash) : '';
-        return itemsById[initialId] || itemsById[getItemId(updatedItems[0])] || {};
-    });
-    useEffect(() => {
-        const handleHash = () => {
-            const newId = getId(location.href);
-            const newState = itemsById[newId];
-            if (newState) {
-                setState(newState);
-                onItemSelect(newId);
-            }
-        };
-        window.addEventListener('hashchange', handleHash);
-        return () => window.removeEventListener('hashchange', handleHash);
-    }, [itemsById, onItemSelect]);
-    return (React.createElement(Tabs, { id: domid, vertical: true, "aria-label": props['aria-label'], onSetActive: (_, item) => {
-            var _a;
-            const itemId = getItemId(item);
-            const newId = itemId || getItemId((_a = itemsById[itemId].subTabs) === null || _a === void 0 ? void 0 : _a.tabs[0]);
-            setFrag(newId);
-        }, tabs: updatedItems, role: "tablist", activeIdx: state.activeIdx, subTabs: state.subTabs }));
-};
-export default VerticalTabsTOC;

package/esm/WizardLayout.d.ts

@@ -1,15 +0,0 @@
-import { ReactNode } from 'react';
-import { SSRSupport } from '@hugsmidjan/react/hooks';
-import { HannaColorTheme } from '@reykjavik/hanna-css';
-declare type WizardLayoutProps = {
-    wizardStepper?: ReactNode;
-    wizardFooter?: ReactNode;
-    colorTheme?: HannaColorTheme;
-    siteName?: string;
-    logoLink?: string;
-    globalAlerts?: ReactNode;
-    ssr?: SSRSupport;
-    children?: ReactNode;
-};
-declare const WizardLayout: (props: WizardLayoutProps) => JSX.Element;
-export default WizardLayout;

package/esm/WizardLayout.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import { useIsBrowserSide } from '@hugsmidjan/react/hooks';
-import { getAssetUrl } from '@reykjavik/hanna-utils/assets';
-import Image from './_abstract/_Image';
-import { Link } from './_abstract/_Link';
-import { useScrollbarWidthCSSVar } from './utils/useScrollbarWidthCSSVar';
-const WizardLayout = (props) => {
-    useScrollbarWidthCSSVar();
-    const { 
-    // ssr,
-    wizardStepper, wizardFooter, children, colorTheme, logoLink = '/', siteName = 'Reykjavík', globalAlerts, } = props;
-    const isBrowser = useIsBrowserSide( /* ssr */);
-    return (React.createElement("div", { className: "WizardLayout", "data-sprinkled": isBrowser, "data-color-theme": colorTheme },
-        globalAlerts && (React.createElement("div", { className: "WizardLayout__alerts", role: "alert" }, globalAlerts)),
-        React.createElement("div", { className: "WizardLayout__content" },
-            React.createElement("div", { className: "WizardLayout__header", role: "banner" },
-                React.createElement(Link, { className: "WizardLayout__header__logo", href: logoLink },
-                    ' ',
-                    React.createElement(Image, { className: undefined, inline: true, src: getAssetUrl('reykjavik-logo.svg') }),
-                    ' ',
-                    siteName,
-                    ' '),
-                ' '),
-            React.createElement("div", { className: "WizardLayout__wrap" },
-                wizardStepper && (React.createElement("div", { className: "WizardLayout__stepper", role: "navigation" }, wizardStepper)),
-                React.createElement("div", { className: "WizardLayout__main", role: "main" }, children),
-                React.createElement("div", { className: "WizardLayout__deco WizardLayout__deco--geometry" })),
-            React.createElement("div", { className: "WizardLayout__footer", role: "complementary" }, wizardFooter))));
-};
-export default WizardLayout;

package/esm/WizardLayoutClose.d.ts

@@ -1,3 +0,0 @@
-import { ButtonProps } from './_abstract/_Button';
-declare const WizardLayoutClose: (props: ButtonProps) => JSX.Element;
-export default WizardLayoutClose;

package/esm/WizardLayoutClose.js

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

package/esm/WizardStepper.d.ts

@@ -1,36 +0,0 @@
-export declare type WizardStepperStep = {
-    label: string;
-    /**
-     * Should the step be clickable?
-     *
-     * * `true` = The items becomes clickable as allowed by the `activeStep`,
-     *    `disableBacktrack` and `allowForwardSkip` props.
-     * * `false | undefined` =  Never clickable, regardless of `activeStep`.
-     * * `"always"` = Always clickable regardless of `activeStep` or other props.
-     */
-    clickable?: boolean | 'always';
-    /**
-     * Flags the item as having a non-default done state
-     *
-     * * `undefined` = automatically set "done" on items before `activeStep`
-     * * `true` = Always flag as "done", regardless of `activeStep`
-     * * `false` = Never flag as "done", regardless of `activeStep`
-     */
-    done?: boolean;
-    /**
-     * Flags the step as not part of the numbering scheme
-     */
-    neutral?: boolean;
-};
-export declare type WizardStepperProps = {
-    steps: ReadonlyArray<WizardStepperStep>;
-    /** Zero-based index of the active (current) step */
-    activeStep?: number;
-    /** By default, clickable "done" steps remain clickable */
-    disableBacktrack?: boolean;
-    /** By default, clickable steps after the active step are not immediately clickable */
-    allowForwardSkip?: boolean;
-    onClick: (clickedIndex: number) => void;
-};
-declare const WizardStepper: (props: WizardStepperProps) => JSX.Element;
-export default WizardStepper;

package/esm/WizardStepper.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
-const WizardStepper = (props) => {
-    const { steps, activeStep = -1, allowForwardSkip, disableBacktrack, onClick } = props;
-    return (React.createElement("div", { className: getBemClass('WizardStepper', activeStep === -1 && 'preview') }, steps.map((step, i) => {
-        const { label, clickable, done, neutral } = step;
-        const stepClass = getBemClass('WizardStepper__step', [
-            (done || (done == null && i < activeStep)) && 'done',
-            neutral && 'neutral',
-        ]);
-        const isClickable = clickable === 'always' ||
-            (clickable &&
-                (activeStep === i ||
-                    (i > activeStep && allowForwardSkip) ||
-                    (i < activeStep && !disableBacktrack)));
-        const ariaCurrent = activeStep === i ? 'step' : undefined;
-        return (React.createElement(React.Fragment, { key: i },
-            isClickable ? (React.createElement("button", { type: "button", className: stepClass, onClick: () => onClick(i), "aria-current": ariaCurrent }, label)) : (React.createElement("span", { className: stepClass, "aria-current": ariaCurrent },
-                ' ',
-                label,
-                ' ')),
-            ' '));
-    })));
-};
-export default WizardStepper;

package/esm/_abstract/_AbstractCarousel.d.ts

@@ -1,25 +0,0 @@
-import { ReactElement } from 'react';
-import { SSRSupport } from '@hugsmidjan/react/hooks';
-import { BemProps } from '@hugsmidjan/react/types';
-import { SeenProp } from '../utils/seenEffect';
-export declare type CarouselProps<I extends Record<string, unknown> = {}, P extends Record<string, unknown> | undefined = {}> = {
-    className?: string;
-    ssr?: SSRSupport;
-    /** @deprecated Ingored because never used (Will be removed in v0.11) */
-    scrollRight?: boolean;
-} & ({
-    children?: never;
-    items: Array<I>;
-    Component: (props: P extends undefined ? I : I & P) => ReactElement | null;
-    ComponentProps?: P;
-} | {
-    children: Array<ReactElement>;
-    items?: never;
-    Component?: never;
-    ComponentProps?: never;
-}) & SeenProp;
-declare type AbstractCarouselProps<I extends Record<string, unknown> = {}, P extends Record<string, unknown> | undefined = {}> = 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;
-export default AbstractCarousel;

package/esm/_abstract/_AbstractCarousel.js

@@ -1,130 +0,0 @@
-import React, { useEffect, useRef, useState, } from 'react';
-import A from '@hugsmidjan/qj/A';
-import focusElm from '@hugsmidjan/qj/focusElm';
-import throttle from '@hugsmidjan/qj/throttle';
-import { useIsBrowserSide } from '@hugsmidjan/react/hooks';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
-import { notNully } from '@reykjavik/hanna-utils';
-import CarouselStepper from '../CarouselStepper';
-import { useSeenEffect } from '../utils/seenEffect';
-const WHEEL_AMPLIFIER = 3;
-const WHEEL_HIJACK_TIMEOUT_MS = 667;
-const scrollXBy = (elm, deltaX) => {
-    const left = elm.scrollLeft + deltaX;
-    elm.scrollTo(left, elm.scrollTop);
-    // NOTE 1: using elm.scrollTo({ left, behavior: 'smooth' }); seems to be too much
-    // as `behavior: 'smooth'` starts some weird interactions with the browser's
-    // `scroll-snap-type` behavior.
-    //
-    // NOTE 2: Both Chrome and Safari tend to snap hard to the nearest list item
-    // while Firefox is more smooth. Haven't found a way around that.
-};
-const exitWheelHijack = (elm) => () => {
-    elm.style.scrollSnapType = '';
-    const lastElmOffset = elm.lastElementChild
-        ? elm.lastElementChild.offsetLeft
-        : 0;
-    // trigger one last scroll event, to make sure the element's
-    // `style.scrollSnapType`'s behavior kicks in.
-    // Otherwise the list may stay stuck in an over-scrolled state —
-    // off to the right.
-    scrollXBy(elm, Math.min(0, lastElmOffset - elm.scrollLeft));
-};
-const handleMouseWheel = (e) => {
-    const elm = e.currentTarget;
-    if (e.deltaX || elm.$hasXDeltaed) {
-        elm.$hasXDeltaed = true;
-        exitWheelHijack(elm);
-        return;
-    }
-    if (e.deltaY && !e.deltaX) {
-        if (e.deltaY < 0) {
-            // Stop scroll-capture when list is at left-edge
-            if (elm.scrollLeft < 50) {
-                return;
-            }
-        }
-        else {
-            // Stop scroll-capture when list is beyond left edge of last list item
-            if (elm.scrollLeft >
-                (elm.lastElementChild ? elm.lastElementChild.offsetLeft : 0)) {
-                exitWheelHijack(elm);
-                return;
-            }
-        }
-        e.preventDefault();
-        e.stopImmediatePropagation();
-        // Disable `scroll-snap-style` because otherwise
-        // small-scale elm.scrollTo() calls have no effect
-        elm.style.scrollSnapType = 'initial';
-        scrollXBy(elm, e.deltaY * WHEEL_AMPLIFIER);
-        clearTimeout(elm.$timeout);
-        elm.$timeout = setTimeout(exitWheelHijack(elm), WHEEL_HIJACK_TIMEOUT_MS);
-    }
-};
-const handleMouseLeave = (e) => {
-    const elm = e.currentTarget;
-    exitWheelHijack(elm);
-    elm.$hasXDeltaed = undefined;
-};
-const AbstractCarousel = (props) => {
-    const { title, items = [], Component, ComponentProps, bem = 'Carousel', modifier, ssr, startSeen, } = props;
-    const children = props.children && props.children.filter(notNully);
-    const [leftOffset, setLeftOffset] = useState();
-    const itemCount = (children || items).length;
-    const listRef = useRef(null);
-    const [activeItem, setActiveItem] = useState(0);
-    const isBrowser = useIsBrowserSide(ssr);
-    // update on activeItem state change
-    useEffect(() => {
-        const listElm = listRef.current;
-        if (!listElm) {
-            return;
-        }
-        const calcLeftOffset = () => {
-            var _a;
-            setLeftOffset((_a = listElm.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left);
-            scrollXBy(listElm, 0);
-        };
-        const calcActiveItem = throttle(() => {
-            const { scrollLeft, children } = listElm;
-            // using Array#find as forEachUntil
-            A(children).find((item, i) => {
-                if (scrollLeft <= item.offsetLeft + item.offsetWidth / 2) {
-                    setActiveItem(i);
-                    return true;
-                }
-            });
-        }, 300, true);
-        calcLeftOffset();
-        listElm.addEventListener('wheel', handleMouseWheel);
-        listElm.addEventListener('scroll', calcActiveItem, { passive: true });
-        window.addEventListener('resize', calcLeftOffset, { passive: true });
-        return () => {
-            listElm.removeEventListener('wheel', handleMouseWheel);
-            listElm.removeEventListener('scroll', calcActiveItem);
-            window.removeEventListener('resize', calcLeftOffset);
-        };
-    }, []);
-    const scrollToItem = (newActive) => {
-        setActiveItem(newActive);
-        const listElm = listRef.current;
-        const newItem = listElm.children[newActive];
-        listElm.scrollTo(newItem ? newItem.offsetLeft : 0, 0);
-        setTimeout(() => focusElm(newItem), 500);
-    };
-    const [outerRef] = useSeenEffect(startSeen);
-    if (!itemCount) {
-        return null;
-    }
-    return (React.createElement("div", { className: getBemClass(bem, modifier, props.className), ref: outerRef, "data-sprinkled": isBrowser },
-        title && React.createElement("h2", { className: bem + '__title' }, title),
-        React.createElement("div", { className: bem + '__itemlist', style: leftOffset
-                ? { '--Carousel--leftOffset': `${leftOffset}px` }
-                : undefined, "data-scroll-snapping": leftOffset ? 'true' : undefined, onMouseLeave: handleMouseLeave, ref: listRef }, children ||
-            items.map((item, i) => (
-            // @ts-expect-error  (Can't be arsed...)
-            React.createElement(Component, Object.assign({ key: i }, ComponentProps, item))))),
-        isBrowser && (React.createElement(CarouselStepper, { itemCount: itemCount, setCurrent: scrollToItem, current: activeItem }))));
-};
-export default AbstractCarousel;

package/esm/_abstract/_Blings.d.ts

@@ -1,11 +0,0 @@
-import { BlingType } from '@reykjavik/hanna-utils/assets';
-import { BlingProps } from '../Bling';
-export declare type BlingComboProps = Array<Omit<BlingProps, 'type' | 'blingUrl'> & {
-    type: BlingType;
-}>;
-declare type BlingsProps = {
-    blings: BlingComboProps;
-    mirror?: boolean;
-};
-declare const Blings: (props: BlingsProps) => JSX.Element;
-export default Blings;

package/esm/_abstract/_Blings.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import Bling from '../Bling';
-const inverseAlignments = {
-    left: 'right',
-    'left-ish': 'right-ish',
-    'left-center': 'right-center',
-    'right-center': 'left-center',
-    'right-ish': 'left-ish',
-    right: 'left',
-};
-const Blings = (props) => (React.createElement(React.Fragment, null, props.blings.map(({ type, align, vertical, color, overlay, parent }, i) => (React.createElement(Bling, { key: type + '-' + i, type: type, align: props.mirror ? inverseAlignments[align || 'left'] : align, vertical: vertical, color: color, overlay: overlay, parent: parent })))));
-export default Blings;

package/esm/_abstract/_Block.d.ts

@@ -1,22 +0,0 @@
-import { BemPropsModifier } from '@hugsmidjan/react/types';
-import { SeenProp } from '../utils/seenEffect';
-import { ButtonProps } from './_Button';
-import { ImageProps } from './_Image';
-export declare type BlockItem = {
-    title: string;
-    summary?: string | JSX.Element;
-    buttons?: Array<ButtonProps>;
-};
-export declare type ContentImageBlock = {
-    content: BlockItem;
-    image: ImageProps;
-} & SeenProp;
-export declare type ContentBlock = {
-    content: Array<BlockItem>;
-    image?: undefined;
-} & SeenProp;
-export declare type BlockProps = BemPropsModifier & (ContentBlock | ContentImageBlock);
-declare const Block: (props: BlockProps & {
-    bem: string;
-}) => JSX.Element;
-export default Block;

package/esm/_abstract/_Block.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
-import { useSeenEffect } from '../utils/seenEffect';
-import Button from './_Button';
-import Image from './_Image';
-const Block = (props) => {
-    const { image, modifier, bem, content, startSeen } = props;
-    const [ref] = useSeenEffect(startSeen);
-    const contentItems = Array.isArray(content) ? content : [content];
-    return (React.createElement("div", { className: getBemClass(bem, modifier), ref: ref },
-        contentItems.map(({ title, summary, buttons = [] }, i) => {
-            const hasSummary = summary && (typeof summary !== 'string' || !!summary.trim());
-            return (React.createElement("div", { key: i, className: `${bem}__content` },
-                React.createElement("h2", { className: `${bem}__title` }, title),
-                hasSummary && React.createElement("div", { className: `${bem}__summary` }, summary),
-                buttons.length > 0 && (React.createElement("div", { className: `${bem}__buttons` },
-                    ' ',
-                    buttons.map((buttonProps, i) => (React.createElement(React.Fragment, null,
-                        React.createElement(Button, Object.assign({ bem: `${bem}__button`, key: i }, buttonProps)),
-                        ' ')))))));
-        }),
-        image && React.createElement(Image, Object.assign({ className: `${bem}__image` }, image))));
-};
-export default Block;

package/esm/_abstract/_Button.d.ts

@@ -1,40 +0,0 @@
-import { ReactNode } from 'react';
-import { BemProps, BemPropsModifier } from '@hugsmidjan/react/types';
-declare type ButtonElmProps = {
-    href?: never;
-} & BemPropsModifier & Omit<JSX.IntrinsicElements['button'], 'className' | 'style'>;
-declare type AnchorElmProps = {
-    href: string;
-    type?: never;
-    name?: never;
-    value?: never;
-} & BemPropsModifier & Omit<JSX.IntrinsicElements['a'], 'className' | 'style'>;
-export declare type ButtonProps = {
-    /** Label takes preference over `children` */
-    label?: string | JSX.Element;
-} & (ButtonElmProps | AnchorElmProps);
-declare const sizes: {
-    readonly normal: "";
-    readonly small: "small";
-    readonly wide: "wide";
-};
-declare type ButtonSize = keyof typeof sizes;
-declare const variants: {
-    readonly normal: "";
-    readonly destructive: "destructive";
-};
-declare type ButtonVariant = keyof typeof variants;
-declare type NavigationFlag = 'none' | 'go-back' | 'go-forward';
-declare type ButtonIcon = 'edit';
-export declare type ButtonVariantProps = {
-    size?: ButtonSize;
-    variant?: ButtonVariant;
-    icon?: ButtonIcon | NavigationFlag;
-    /** @deprecated (Will be removed in v0.11) */
-    small?: boolean;
-};
-declare type _ButtonProps = ButtonProps & ButtonVariantProps & BemProps & {
-    children?: ReactNode;
-};
-declare const Button: (props: _ButtonProps) => JSX.Element;
-export default Button;

package/esm/_abstract/_Button.js

@@ -1,47 +0,0 @@
-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 getBemClass from '@hugsmidjan/react/utils/getBemClass';
-import { Link } from './_Link';
-// ---------------------------------------------------------------------------
-const sizes = {
-    normal: '',
-    small: 'small',
-    wide: 'wide',
-};
-// ---------------------------------------------------------------------------
-const variants = {
-    normal: '',
-    destructive: 'destructive',
-};
-const navigationFlags = {
-    none: '',
-    'go-back': 'go--back',
-    'go-forward': 'go--forward',
-};
-const icons = {
-    // TODO: insert icons
-    edit: 'edit',
-};
-const Button = (props) => {
-    const { bem, small, size = 'normal', modifier, children, variant = 'normal', icon = 'none', label = children } = props, buttonProps = __rest(props, ["bem", "small", "size", "modifier", "children", "variant", "icon", "label"]);
-    const className = bem &&
-        getBemClass(bem, [modifier, variants[variant], sizes[size], navigationFlags[icon]]);
-    const iconProp = icons[icon] && { 'data-icon': icons[icon] };
-    if (buttonProps.href != null) {
-        return (React.createElement(Link, Object.assign({ className: className }, buttonProps, { style: undefined }, iconProp), label));
-    }
-    else {
-        return (React.createElement("button", Object.assign({ className: className, type: "button" }, buttonProps, { style: undefined }, iconProp), label));
-    }
-};
-export default Button;

package/esm/_abstract/_CardList.d.ts

@@ -1,30 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-import { ImageProps } from './_Image';
-declare type BaseCardProps = {
-    title: string;
-    href: string;
-    imgPlaceholder?: boolean;
-};
-export declare type ImageCardProps = BaseCardProps & {
-    meta?: string;
-    image?: ImageProps;
-};
-export declare type TextCardProps = BaseCardProps & {
-    summary?: string;
-};
-export declare type CardListProps<T> = {
-    cards: Array<T>;
-    title?: string | undefined;
-    summaryElement?: ReactElement;
-    titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'p';
-    imgPlaceholder?: boolean | string;
-};
-export declare type ImageCardListProps = CardListProps<ImageCardProps>;
-export declare type TextCardListProps = CardListProps<TextCardProps>;
-declare type _CardListProps = CardListProps<BaseCardProps> & {
-    bemPrefix: string;
-    children?: ReactNode;
-    standalone?: boolean;
-};
-export declare const CardList: (props: _CardListProps) => JSX.Element;
-export {};

package/esm/_abstract/_CardList.js

@@ -1,38 +0,0 @@
-import React from 'react';
-import Button from './_Button';
-import Image from './_Image';
-const Card = (props) => {
-    const { bem, href, title, imgPlaceholder } = props;
-    const cardClass = `${bem}__card`;
-    const image = 'image' in props && props.image;
-    const meta = 'meta' in props && props.meta;
-    const summary = 'summary' in props && props.summary;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { bem: cardClass, href: href },
-            ' ',
-            React.createElement(Image, Object.assign({ className: `${bem}__image` }, image, { placeholder: imgPlaceholder })),
-            React.createElement("span", { className: `${cardClass}__title` }, title),
-            ' ',
-            meta && React.createElement("span", { className: `${cardClass}__meta` }, meta),
-            ' ',
-            summary && React.createElement("span", { className: `${cardClass}__summary` }, summary),
-            ' '),
-        ' '));
-};
-export const CardList = (props) => {
-    const { bemPrefix, title, summaryElement, cards, titleTag = 'h2', children, imgPlaceholder, } = props;
-    const TitleTag = titleTag;
-    const fallbackImageUrl = (imgPlaceholder !== true && imgPlaceholder) || undefined;
-    const fallbackImageStyle = fallbackImageUrl
-        ? {
-            ['--' + bemPrefix + '--fallback']: `url("${fallbackImageUrl}")`,
-        }
-        : undefined;
-    return (React.createElement(React.Fragment, null,
-        summaryElement ? (React.createElement("div", { className: bemPrefix + '__summary' },
-            title && React.createElement(TitleTag, { className: bemPrefix + '__title' }, title),
-            summaryElement)) : (title && React.createElement(TitleTag, { className: bemPrefix + '__title' }, title)),
-        React.createElement("ul", { className: bemPrefix + (props.standalone ? '' : '__list'), style: fallbackImageStyle }, cards.map((card, i) => (React.createElement("li", { key: i, className: bemPrefix + '__item' },
-            React.createElement(Card, Object.assign({}, card, { bem: bemPrefix, imgPlaceholder: !!imgPlaceholder })))))),
-        children));
-};

package/esm/_abstract/_Image.d.ts

@@ -1,36 +0,0 @@
-export declare type Source = {
-    srcset: string;
-    media: string;
-};
-export declare type ImagePropsLinked = {
-    altText?: string;
-    sources?: Array<Source>;
-    /** The default image source to (lazy) load */
-    src?: string;
-    /** Eagerly-loaded placeholder/thunbnail to use until a `sources` item has been picked.  */
-    preloadSrc?: string;
-    inline?: false;
-    focalPoint?: string;
-};
-export declare type ImagePropsInlinedSvg = {
-    altText?: string;
-    /** Should the image be fetched and inlined as <svg/> */
-    inline: true;
-    src: string;
-    sources?: undefined;
-    preloadSrc?: undefined;
-    focalPoint?: undefined;
-};
-export declare type ImageProps = ImagePropsLinked | ImagePropsInlinedSvg;
-declare type _ImageProps = {
-    /** container className */
-    className: string | undefined;
-    /** Controls if the container is rendered when image is missing/undefined.
-     * (With a `--missing` className modifier added.)
-     *
-     * Accepts a function that defines a default content for the container.
-     */
-    placeholder?: boolean | (() => JSX.Element);
-};
-declare const Image: (props: ImageProps & _ImageProps) => JSX.Element | null;
-export default Image;

package/esm/_abstract/_Image.js

@@ -1,27 +0,0 @@
-import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
-import { useGetSVGtext } from '../utils/useGetSVGtext';
-// eslint-disable-next-line complexity
-const Image = (props) => {
-    const { src, altText = '', sources = [], preloadSrc, className, inline, placeholder, focalPoint, } = props;
-    const _src = (sources.length && preloadSrc) || src;
-    const imageSrc = _src || (sources[0] != null ? sources[0].srcset.split(' ')[0] : undefined);
-    const imgLoading = preloadSrc ? 'eager' : 'lazy';
-    const inlineSvg = useGetSVGtext(inline ? imageSrc : undefined);
-    if (!imageSrc) {
-        return placeholder ? (React.createElement("span", { className: className && getBemClass(className, 'missing') }, placeholder !== true && placeholder())) : null;
-    }
-    if (inline && inlineSvg) {
-        const __html = inlineSvg.imageSrc === imageSrc ? inlineSvg.code : '';
-        return React.createElement("span", { className: className, dangerouslySetInnerHTML: { __html } });
-    }
-    return (React.createElement("picture", { className: className, style: focalPoint ? { '--focalPoint': focalPoint } : undefined },
-        ' ',
-        sources.map((source, i) => (React.createElement(React.Fragment, null,
-            React.createElement("source", { key: i, srcSet: source.srcset, media: source.media }),
-            ' '))),
-        ' ',
-        React.createElement("img", { src: imageSrc, alt: altText, loading: imgLoading }),
-        '  '));
-};
-export default Image;