@reykjavik/hanna-react 0.10.84 → 0.10.85

package/esm/ContactBubble.d.ts

@@ -0,0 +1,58 @@
+import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
+import { SSRSupport } from './utils.js';
+export type ContactBubbleI18n = {
+    lang?: string;
+    openBtn: string;
+    openBtnLong?: string;
+    closeBtn: string;
+    closeBtnLong?: string;
+};
+export declare const defaultTexts: DefaultTexts<ContactBubbleI18n>;
+declare const icons: {
+    readonly suggestions: 1;
+    readonly phone: 1;
+    readonly faq: 1;
+    readonly livechat: 1;
+    readonly other: 0;
+};
+export type ContactBubbleIcon = keyof typeof icons;
+export declare const ensureIcon: (maybeIcon: string | undefined) => ContactBubbleIcon | undefined;
+export type ContactBubbleItem = {
+    label: string;
+    extraLabel?: string;
+    icon?: ContactBubbleIcon;
+} & ({
+    href: string;
+    /** Prevents default link behavior unless the handler function returns `true` */
+    onClick?: () => void | boolean;
+    target?: string;
+} | {
+    onClick: () => void | boolean;
+    href?: undefined;
+    target?: undefined;
+});
+export type ContactBubbleProps = {
+    title?: string;
+    links: Array<ContactBubbleItem>;
+    /** By default the ContactBubble's toggler is hidden if the page
+     * is scrolled to near the top or the bottom.
+     *
+     * This means that on short pages (with hardly any scrolling)
+     * the ContactBubble **always** hidden.
+     *
+     * Set this prop to `true` if you want to disable this
+     * magic and always show the bubble toggler
+     */
+    alwaysShow?: boolean;
+    texts?: ContactBubbleI18n;
+    lang?: string;
+    ssr?: SSRSupport;
+} & ({
+    open?: boolean;
+    onToggle: (isOpen: boolean) => void;
+} | {
+    open?: undefined;
+    onToggle?: (isOpen: boolean) => void;
+});
+export declare const ContactBubble: (props: ContactBubbleProps) => JSX.Element | null;
+export default ContactBubble;

package/esm/ContactBubble.js

@@ -0,0 +1,152 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import focusElm from '@hugsmidjan/qj/focusElm';
+import { useDomid } from '@hugsmidjan/react/hooks';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { getPageScrollElm } from '@reykjavik/hanna-utils';
+import { getTexts } from '@reykjavik/hanna-utils/i18n';
+import { Link } from './_abstract/_Link.js';
+import { breakOnNL } from './_abstract/breakOnNL.js';
+import { useIsBrowserSide } from './utils.js';
+export const defaultTexts = {
+    is: {
+        lang: 'is',
+        openBtn: 'Hafa samband',
+        closeBtn: 'Loka',
+        closeBtnLong: 'Loka valmynd',
+    },
+    en: {
+        lang: 'en',
+        openBtn: 'Contact us',
+        closeBtn: 'Close',
+        closeBtnLong: 'Close bubble',
+    },
+};
+// ---------------------------------------------------------------------------
+const icons = {
+    suggestions: 1,
+    phone: 1,
+    faq: 1,
+    livechat: 1,
+    other: 0,
+};
+export const ensureIcon = (maybeIcon) => maybeIcon && icons[maybeIcon]
+    ? maybeIcon
+    : undefined;
+export const ContactBubble = (props) => {
+    const { title, links, onToggle, alwaysShow } = props;
+    const txt = getTexts(props, defaultTexts);
+    const useLocalState = props.open == null;
+    const [localOpen, setLocalOpen] = useState(false);
+    const open = useLocalState ? localOpen : props.open;
+    const isBrowser = useIsBrowserSide(props.ssr);
+    const domid = useDomid();
+    const wrapperRef = useRef(null);
+    const { openBubble, closeBubble } = useMemo(() => ({
+        openBubble: () => {
+            useLocalState && setLocalOpen(true);
+            onToggle && onToggle(true);
+        },
+        closeBubble: (setFocus) => {
+            useLocalState && setLocalOpen(false);
+            onToggle && onToggle(false);
+            setFocus !== false && focusElm(wrapperRef.current);
+        },
+    }), [useLocalState, onToggle]);
+    useEffect(() => {
+        const wrapperElm = wrapperRef.current;
+        if (!wrapperElm) {
+            return;
+        }
+        if (alwaysShow) {
+            wrapperElm.dataset.show = 'true';
+            return;
+        }
+        const scrollElm = getPageScrollElm();
+        let pending = 0;
+        const checkScroll = () => {
+            if (!pending) {
+                pending = requestAnimationFrame(() => {
+                    const { scrollTop, scrollHeight, clientHeight } = scrollElm;
+                    const scrollLength = scrollHeight - clientHeight;
+                    // const f = scrollLength > 600 ? 1 : (scrollLength - 200) / 600;
+                    const f = 1;
+                    const show = scrollTop > f * 150 && scrollLength - scrollTop > f * 250;
+                    wrapperElm.dataset.show = String(show);
+                    !show && closeBubble(false);
+                    pending = 0;
+                });
+            }
+        };
+        checkScroll();
+        // Set scroll-listeners on both the ´document` and the `scrollElm`
+        // because mobile browsers seem to handle CSS height and overflow
+        // rules on <html> and <body> differently from desktop browsers.
+        // Only one of these two handlers seems to trigger though,
+        // (as Element scroll events don't bubble)
+        // and even if they did, the rAF throttling prevents that from
+        // becoming a problem.
+        document.addEventListener('scroll', checkScroll);
+        scrollElm.addEventListener('scroll', checkScroll);
+        return () => {
+            document.removeEventListener('scroll', checkScroll);
+            scrollElm.removeEventListener('scroll', checkScroll);
+        };
+    }, [isBrowser, alwaysShow, closeBubble]);
+    useEffect(() => {
+        const escHandler = (e) => e.key === 'Escape' && closeBubble();
+        const outsideClickHandler = (e) => {
+            var _a;
+            if (open && !((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+                closeBubble(false);
+            }
+        };
+        document.addEventListener('keydown', escHandler);
+        document.addEventListener('click', outsideClickHandler, true);
+        const htmlDataset = document.documentElement.dataset;
+        if (open) {
+            htmlDataset.contactBubble = 'true';
+        }
+        else {
+            delete htmlDataset.contactBubble;
+        }
+        return () => {
+            delete htmlDataset.contactBubble;
+            document.removeEventListener('keydown', escHandler);
+            document.removeEventListener('click', outsideClickHandler, true);
+        };
+    }, [open, closeBubble]);
+    if (links.length === 0) {
+        return null;
+    }
+    const menu = (React.createElement("div", { className: "ContactBubble", id: isBrowser && domid, hidden: isBrowser && !open, "data-always-show": alwaysShow || undefined, "data-sprinkled": isBrowser },
+        React.createElement("h2", { className: "ContactBubble__title" }, title || txt.openBtn),
+        React.createElement("ul", { className: "ContactBubble__list" }, links.map((linkInfo, i) => {
+            const { href, label, extraLabel, target, onClick } = linkInfo;
+            const icon = ensureIcon(linkInfo.icon);
+            const itemClass = getBemClass('ContactBubble__item', icon && 'type--' + icon);
+            const onClickHandler = (e) => {
+                if (onClick) {
+                    const doPreventDefault = onClick() !== true;
+                    if (doPreventDefault) {
+                        e.preventDefault();
+                    }
+                }
+                closeBubble(false);
+            };
+            const content = [
+                ' ',
+                label,
+                '\n',
+                extraLabel && React.createElement("small", { key: "\uD83E\uDD21" }, breakOnNL(extraLabel)),
+                '\n',
+            ];
+            return (React.createElement("li", { key: i, className: itemClass }, href && href !== '#' ? (React.createElement(Link, { className: "ContactBubble__link", href: href, onClick: onClickHandler, target: target }, content)) : (React.createElement("button", { className: "ContactBubble__link", onClick: onClickHandler, type: "button" }, content))));
+        })),
+        '\n\n',
+        isBrowser && (React.createElement("button", { className: "ContactBubble__closebtn", "aria-controls": domid, "aria-label": txt.closeBtnLong, onClick: () => closeBubble(), type: "button" }, txt.closeBtn))));
+    return isBrowser ? (React.createElement("div", { className: "ContactBubble__wrapper", ref: wrapperRef },
+        React.createElement("button", { className: "ContactBubble__openbtn", "aria-controls": domid, "aria-expanded": open, "aria-label": txt.openBtnLong, onClick: open ? () => closeBubble() : openBubble, type: "button" }, txt.openBtn),
+        '\n\n',
+        menu)) : (menu);
+};
+export default ContactBubble;

package/esm/ContentArticle.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { SeenProp } from './utils/seenEffect.js';
+import { ArticleMetaProps } from './ArticleMeta.js';
+import { ContentImageProps } from './ContentImage.js';
+import { RelatedLinksProps } from './RelatedLinks.js';
+export type ContentArticleProps = {
+    /** Date, author, etc. */
+    meta?: ArticleMetaProps['items'];
+    headline: string;
+    headlineTag?: 'h1' | 'h2';
+    topImage?: ContentImageProps;
+    body: ReactNode;
+    relatedLinks?: RelatedLinksProps;
+} & SeenProp;
+export declare const ContentArticle: (props: ContentArticleProps) => JSX.Element;
+export default ContentArticle;

package/esm/ContentArticle.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useSeenEffect } from './utils/seenEffect.js';
+import ArticleMeta from './ArticleMeta.js';
+import ContentImage from './ContentImage.js';
+import Heading from './Heading.js';
+import RelatedLinks from './RelatedLinks.js';
+import TextBlock from './TextBlock.js';
+import VSpacer from './VSpacer.js';
+export const ContentArticle = (props) => {
+    const { relatedLinks } = props;
+    const [ref] = useSeenEffect(props.startSeen);
+    const headingElm = (React.createElement(Heading, { forceH1: props.headlineTag === 'h1' }, props.headline));
+    return (React.createElement("div", { className: "ContentArticle", ref: ref },
+        props.meta ? (React.createElement("div", { className: "ContentArticle__header" },
+            headingElm,
+            React.createElement(ArticleMeta, { items: props.meta }))) : (headingElm),
+        React.createElement(TextBlock, { startSeen: true },
+            props.topImage && React.createElement(ContentImage, Object.assign({}, props.topImage)),
+            props.body),
+        relatedLinks && relatedLinks.links.length > 0 && (React.createElement(VSpacer, { size: "small" },
+            React.createElement("hr", null))),
+        relatedLinks && React.createElement(RelatedLinks, Object.assign({}, relatedLinks))));
+};
+export default ContentArticle;

package/esm/ContentImage.d.ts

@@ -0,0 +1,8 @@
+import { ImageProps } from './_abstract/_Image.js';
+export type ContentImageProps = {
+    image?: ImageProps;
+    caption?: string | JSX.Element;
+    credit?: string | JSX.Element;
+};
+export declare const ContentImage: (props: ContentImageProps) => JSX.Element;
+export default ContentImage;

package/esm/ContentImage.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Image } from './_abstract/_Image.js';
+export const ContentImage = (props) => {
+    const { image, caption, credit } = props;
+    return (React.createElement("figure", { className: "ContentImage" },
+        (caption || credit) && (React.createElement("figcaption", { className: "ContentImage__caption" },
+            caption && React.createElement("span", { className: "ContentImage__text" },
+                " ",
+                caption,
+                " "),
+            ' ',
+            credit && React.createElement("small", { className: "ContentImage__credit" },
+                " ",
+                credit,
+                " "))),
+        React.createElement(Image, Object.assign({ className: "ContentImage__image" }, image))));
+};
+export default ContentImage;

package/esm/Datepicker.d.ts

@@ -0,0 +1,40 @@
+import { RefObject } from 'react';
+import { FormFieldWrappingProps } from './FormField.js';
+export type DatepickerProps = {
+    small?: boolean;
+    placeholder?: string;
+    value?: Date;
+    name?: string;
+    startDate?: Date;
+    endDate?: Date;
+    minDate?: Date;
+    maxDate?: Date;
+    localeCode?: 'is' | 'en' | 'pl';
+    dateFormat?: string | Array<string>;
+    isStartDate?: boolean;
+    isEndDate?: boolean;
+    inputRef?: RefObject<HTMLInputElement>;
+    onChange: (date?: Date) => void;
+    datepickerExtraProps?: Record<string, unknown>;
+    /** @deprecated  use value instead.  (Will be removed in v0.11) */
+    initialDate?: Date;
+} & FormFieldWrappingProps;
+export declare const getDateDiff: (date: Date, diff: number) => Date;
+export type DatepickerLocaleProps = {
+    nextMonthAriaLabel: string;
+    nextMonthButtonLabel: string;
+    nextYearAriaLabel: string;
+    nextYearButtonLabel: string;
+    previousMonthAriaLabel: string;
+    previousMonthButtonLabel: string;
+    previousYearAriaLabel: string;
+    previousYearButtonLabel: string;
+    timeInputLabel: string;
+    weekAriaLabelPrefix: string;
+    weekLabel: string;
+    ariaLabelPrefix: string;
+    chooseDayAriaLabelPrefix: string;
+    disabledDayAriaLabelPrefix: string;
+};
+export declare const Datepicker: (props: DatepickerProps) => JSX.Element;
+export default Datepicker;

package/esm/Datepicker.js

@@ -0,0 +1,78 @@
+import React from 'react';
+// Documentation: https://reactdatepicker.com/
+import ReactDatePicker, { registerLocale,
+// setDefaultLocale,
+ } from 'react-datepicker';
+import { useDomid } from '@hugsmidjan/react/hooks';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+// For more info on localization see: https://stackoverflow.com/questions/54399084/change-locale-in-react-datepicker/58306958#58306958
+import is from 'date-fns/locale/is';
+import pl from 'date-fns/locale/pl';
+import FormField from './FormField.js';
+registerLocale('is', is);
+registerLocale('pl', pl);
+export const getDateDiff = (date, diff) => {
+    const newDate = new Date(date);
+    newDate.setDate(newDate.getDate() + diff);
+    return newDate;
+};
+const i18n = {
+    is: {
+        nextMonthAriaLabel: 'Næsti mánuður',
+        nextMonthButtonLabel: 'Næsti mánuður',
+        nextYearAriaLabel: 'Næsta ár',
+        nextYearButtonLabel: 'Næsta ár',
+        previousMonthAriaLabel: 'Fyrri mánuður',
+        previousMonthButtonLabel: 'Fyrri mánuður',
+        previousYearAriaLabel: 'Fyrra ár',
+        previousYearButtonLabel: 'Fyrra ár',
+        timeInputLabel: 'Tími: ',
+        weekAriaLabelPrefix: 'Vika: ',
+        weekLabel: 'Vika',
+        ariaLabelPrefix: 'Mánuður:',
+        chooseDayAriaLabelPrefix: 'Veldu:',
+        disabledDayAriaLabelPrefix: 'Dagsetning ekki í boði',
+    },
+    pl: {
+        nextMonthAriaLabel: 'Następny miesiącu',
+        nextMonthButtonLabel: 'Następny miesiącu',
+        nextYearAriaLabel: 'Następny rok',
+        nextYearButtonLabel: 'Następny rok',
+        previousMonthAriaLabel: 'Poprzedni miesiac',
+        previousMonthButtonLabel: 'Poprzedni miesiac',
+        previousYearAriaLabel: 'Poprzedni rok',
+        previousYearButtonLabel: 'Poprzedni rok',
+        timeInputLabel: 'Czas: ',
+        weekAriaLabelPrefix: 'Tydzień: ',
+        weekLabel: 'Tydzień',
+        ariaLabelPrefix: 'Miesiąc:',
+        chooseDayAriaLabelPrefix: 'Wybierać:',
+        disabledDayAriaLabelPrefix: 'Data niedostępna',
+    },
+};
+export const Datepicker = (props) => {
+    const { className, id, label, hideLabel, assistText, disabled, readOnly, invalid, errorMessage, required, reqText, placeholder, small, localeCode = 'is', dateFormat = 'd.M.yyyy', initialDate, value = initialDate, name, startDate, endDate, minDate, maxDate, isStartDate = false, isEndDate = false, onChange, datepickerExtraProps, ssr, inputRef, } = props;
+    const domid = useDomid(id);
+    const txts = i18n[localeCode] || {};
+    const filled = !!value;
+    const empty = !filled && !placeholder;
+    return (React.createElement(FormField, { className: getBemClass('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.createElement("div", Object.assign({ className: className.input, onClick: ({ target, currentTarget }) => { var _a; return target === currentTarget && ((_a = currentTarget.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus()); }, ref: inputRef &&
+                    ((elm) => {
+                        inputRef.current =
+                            (elm === null || elm === void 0 ? void 0 : elm.querySelector('input')) || undefined;
+                        return elm;
+                    }) }, addFocusProps()),
+                React.createElement(ReactDatePicker, 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) {
+                            inputElm.dispatchEvent(new Event('change', { bubbles: true }));
+                        }
+                    }, placeholderText: placeholder, 
+                    // TODO: Implement this
+                    // selectsRange
+                    minDate: minDate, maxDate: maxDate, startDate: startDate, endDate: endDate, selectsStart: isStartDate, selectsEnd: isEndDate, formatWeekDay: (weekday) => weekday.charAt(0).toUpperCase(), showYearDropdown: true, scrollableYearDropdown: true, yearDropdownItemNumber: 15, showMonthDropdown: true }, inputProps, txts, datepickerExtraProps))));
+        } }));
+};
+export default Datepicker;

package/esm/ExtraLinks.d.ts

@@ -0,0 +1,18 @@
+import { TextCardListProps } from './_abstract/_CardList.js';
+import { SeenProp } from './utils/seenEffect.js';
+export type RelatedLink = {
+    href: string;
+    label: string;
+    blank?: boolean;
+    type?: 'link' | 'pdf' | 'text';
+};
+type RelatedProps = {
+    relatedTitle?: string;
+    relatedLinks?: Array<RelatedLink>;
+};
+export type ExtraLinksCardProps = TextCardListProps['cards'][number];
+export type ExtraLinksProps = TextCardListProps & RelatedProps & {
+    className?: string;
+} & SeenProp;
+export declare const ExtraLinks: (props: ExtraLinksProps) => JSX.Element;
+export default ExtraLinks;

package/esm/ExtraLinks.js

@@ -0,0 +1,24 @@
+import { __rest } from "tslib";
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { CardList } from './_abstract/_CardList.js';
+import { Link } from './_abstract/_Link.js';
+import { useSeenEffect } from './utils/seenEffect.js';
+const ExtraLinks__related = (props) => {
+    const { relatedTitle, relatedLinks } = props;
+    return (React.createElement("div", { className: "ExtraLinks__related" },
+        relatedTitle && React.createElement("h3", { className: "ExtraLinks__related__title" }, relatedTitle),
+        React.createElement("ul", { className: "ExtraLinks__related__list" }, relatedLinks &&
+            relatedLinks.map(({ href, label, blank = false, type }, i) => (React.createElement("li", { className: "ExtraLinks__related__item", key: i },
+                React.createElement(Link, { className: getBemClass('ExtraLinks__related__link', type), href: href, target: blank ? '_blank' : '', rel: blank ? 'noreferrer noopener' : '' }, label)))))));
+};
+export const ExtraLinks = (props) => {
+    const { relatedTitle, relatedLinks, className, startSeen } = props, cardListProps = __rest(props, ["relatedTitle", "relatedLinks", "className", "startSeen"]);
+    const hasRelated = !!(relatedLinks && relatedLinks.length);
+    const [ref] = useSeenEffect(startSeen);
+    return (React.createElement("div", { className: getBemClass('ExtraLinks', hasRelated && 'related', className), ref: ref },
+        React.createElement("div", { className: "ExtraLinks__main" },
+            React.createElement(CardList, Object.assign({}, cardListProps, { bemPrefix: "ExtraLinks" }))),
+        hasRelated && (React.createElement(ExtraLinks__related, { relatedTitle: relatedTitle, relatedLinks: relatedLinks }))));
+};
+export default ExtraLinks;

package/esm/FeatureList.d.ts

@@ -0,0 +1,12 @@
+import { Efnistakn } from '@reykjavik/hanna-utils/assets';
+import { SeenProp } from './utils/seenEffect.js';
+export type FeatureListProps = {
+    title: string;
+    features: Array<{
+        icon?: Efnistakn;
+        iconUrl?: string;
+        name: string;
+    }>;
+} & SeenProp;
+export declare const FeatureList: (props: FeatureListProps) => JSX.Element;
+export default FeatureList;

package/esm/FeatureList.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useSeenEffect } from './utils/seenEffect.js';
+import Bling from './Bling.js';
+export const FeatureList = (props) => {
+    const { title, features, startSeen } = props;
+    const [ref] = useSeenEffect(startSeen);
+    const _features = features.length ? features : [{ name: '...' }];
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Bling, { type: "snake-large", align: "left", vertical: "down-ish" }),
+        React.createElement("div", { className: "FeatureList", ref: ref },
+            React.createElement("h2", { className: "FeatureList__title" }, title),
+            React.createElement("ul", { className: "FeatureList__list" }, _features.map(({ name, icon, iconUrl }, i) => (React.createElement("li", { key: i, className: "FeatureList__feature", style: iconUrl
+                    ? { '--efnistakn': `url("${iconUrl}")` }
+                    : undefined, "data-efnistakn": !iconUrl ? icon : undefined }, name)))))));
+};
+export default FeatureList;

package/esm/FieldGroup.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export type FieldGroupProps = {
+    legend: string;
+    disabled?: boolean;
+    small?: boolean;
+    className?: string;
+    children: ReactNode;
+};
+export declare const FieldGroup: (props: FieldGroupProps) => JSX.Element;
+export default FieldGroup;

package/esm/FieldGroup.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+export const FieldGroup = (props) => {
+    const { legend, children, className, disabled, small } = props;
+    return (React.createElement("fieldset", { className: getBemClass('FieldGroup', small && 'small', className), disabled: disabled },
+        React.createElement("legend", { className: "FieldGroup__legend" }, legend),
+        children));
+};
+export default FieldGroup;

package/esm/FileInput/_FileInput.utils.d.ts

@@ -0,0 +1,36 @@
+export type CustomFile = {
+    preview?: string;
+} & File;
+/**
+ * Attaches a `preview` prop to file objects that don't already have a `preview` key defined
+ *
+ * The preview's value is either a data URI (for image-type files) or `undefined`
+ */
+export declare const addPreview: (file: CustomFile) => void;
+/**
+ * Revokes `preview` data URIs to avoid memory leaks
+ *
+ * (See: https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL)
+ */
+export declare const releasePreview: (file: CustomFile) => void;
+/**
+ * Small+stupid file size pretty-printer.
+ */
+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
+ * what the updated fileList should look like.
+ *
+ *
+ */
+export declare const getFileListUpdate: (oldFileList: Array<File>, added: Array<File>, replaceMode: boolean) => {
+    fileList: File[];
+    diff: {
+        added: File[];
+        deleted: File[];
+    } | {
+        added: File[];
+        deleted?: undefined;
+    };
+};

package/esm/FileInput/_FileInput.utils.js

@@ -0,0 +1,69 @@
+/**
+ * Attaches a `preview` prop to file objects that don't already have a `preview` key defined
+ *
+ * The preview's value is either a data URI (for image-type files) or `undefined`
+ */
+export const addPreview = (file) => {
+    if (!('preview' in file)) {
+        file.preview = file.type.includes('image/') ? URL.createObjectURL(file) : undefined;
+    }
+};
+/**
+ * Revokes `preview` data URIs to avoid memory leaks
+ *
+ * (See: https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL)
+ */
+export const releasePreview = (file) => {
+    file.preview && URL.revokeObjectURL(file.preview);
+    delete file.preview;
+};
+// ---------------------------------------------------------------------------
+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.
+ */
+export const formatBytes = (bytes, lang = 'is', decimals = 2) => {
+    if (bytes === 0) {
+        return '0 Bytes';
+    }
+    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]}`;
+};
+/**
+ * Figures out how to handle adding files to a FileInput
+ * Which files to retaine, which too delete, and
+ * what the updated fileList should look like.
+ *
+ *
+ */
+export const getFileListUpdate = (oldFileList, added, 
+/**
+ * `replaceMode: true` is the default "single-file" input behavior.
+ *
+ * Pass `false` to this argument when the "multiple" prop is true.
+ */
+replaceMode) => {
+    const deleted = replaceMode ? oldFileList : [];
+    const retained = [];
+    if (!replaceMode) {
+        oldFileList.forEach((oldFile) => {
+            if (added.find(({ name }) => name === oldFile.name)) {
+                deleted.push(oldFile);
+            }
+            else {
+                retained.push(oldFile);
+            }
+        });
+    }
+    return {
+        fileList: retained.concat(added),
+        diff: deleted.length ? { added, deleted } : { added },
+    };
+};

package/esm/FileInput/_FileInputFileList.d.ts

@@ -0,0 +1,11 @@
+import type { formatBytes } from './_FileInput.utils';
+import { CustomFile } from './_FileInput.utils';
+export type FileListProps = {
+    files: Array<CustomFile>;
+    showFileSize?: boolean;
+    showImagePreviews?: boolean;
+    removeFileText: string;
+    removeFile: (file: File | string) => void;
+    formatBytes: typeof formatBytes;
+};
+export declare const DefaultFileList: (props: FileListProps) => JSX.Element | null;

package/esm/FileInput/_FileInputFileList.js

@@ -0,0 +1,19 @@
+import React from 'react';
+export const DefaultFileList = (props) => {
+    const { files, showFileSize, showImagePreviews, removeFileText, removeFile, formatBytes, } = props;
+    if (!files.length) {
+        return null;
+    }
+    return (React.createElement("ul", { className: "FileInput__filelist" }, files.map((file) => (React.createElement("li", { key: file.name, className: "FileInput__file" },
+        React.createElement("button", { className: "FileInput__file-remove", type: "button", onClick: () => removeFile(file), "aria-label": `${removeFileText} ${file.name}` }, removeFileText),
+        React.createElement("span", { className: "FileInput__fileinfo" },
+            showImagePreviews && file.preview && (React.createElement(React.Fragment, null,
+                React.createElement("span", { className: "FileInput__preview" },
+                    React.createElement("img", { src: file.preview, alt: "" })),
+                ' ')),
+            React.createElement("span", { className: "FileInput__filename" }, file.name),
+            showFileSize && (React.createElement("small", { className: "FileInput__filesize" },
+                " - (",
+                formatBytes(file.size),
+                ")"))))))));
+};