@reykjavik/hanna-react 0.10.84 → 0.10.85

package/VerticalTabsTOC.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const frag_1 = require("@hugsmidjan/qj/frag");
 const hooks_1 = require("@hugsmidjan/react/hooks");
-const Tabs_1 = tslib_1.__importDefault(require("./Tabs"));
+const Tabs_js_1 = tslib_1.__importDefault(require("./Tabs.js"));
 const getId = (url) => (url && decodeURIComponent(url.split('#')[1] || '')) || '';
 const getItemId = (item) => getId(item && item.href);
 const mapToItemsById = (items, domid) => {
@@ -62,7 +62,7 @@ const VerticalTabsTOC = (props) => {
         window.addEventListener('hashchange', handleHash);
         return () => window.removeEventListener('hashchange', handleHash);
     }, [itemsById, onItemSelect]);
-    return (react_1.default.createElement(Tabs_1.default, { id: domid, vertical: true, "aria-label": props['aria-label'], onSetActive: (_, item) => {
+    return (react_1.default.createElement(Tabs_js_1.default, { 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]);

package/WizardLayout.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import type { HannaColorTheme } from '@reykjavik/hanna-css';
-import { SSRSupport } from './utils';
+import { SSRSupport } from './utils.js';
 type WizardLayoutProps = {
     wizardStepper?: ReactNode | false;
     wizardFooter?: ReactNode | false;

package/WizardLayout.js

@@ -4,23 +4,23 @@ exports.WizardLayout = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const assets_1 = require("@reykjavik/hanna-utils/assets");
-const _Image_1 = require("./_abstract/_Image");
-const _Link_1 = require("./_abstract/_Link");
-const useScrollbarWidthCSSVar_1 = require("./utils/useScrollbarWidthCSSVar");
-const utils_1 = require("./utils");
+const _Image_js_1 = require("./_abstract/_Image.js");
+const _Link_js_1 = require("./_abstract/_Link.js");
+const useScrollbarWidthCSSVar_js_1 = require("./utils/useScrollbarWidthCSSVar.js");
+const utils_js_1 = require("./utils.js");
 const WizardLayout = (props) => {
-    (0, useScrollbarWidthCSSVar_1.useScrollbarWidthCSSVar)();
+    (0, useScrollbarWidthCSSVar_js_1.useScrollbarWidthCSSVar)();
     const { 
     // ssr,
     wizardStepper, wizardFooter, children, colorTheme, logoLink = '/', siteName = 'Reykjavík', globalAlerts, } = props;
-    const isBrowser = (0, utils_1.useIsBrowserSide)( /* ssr */);
+    const isBrowser = (0, utils_js_1.useIsBrowserSide)( /* ssr */);
     return (react_1.default.createElement("div", { className: "WizardLayout", "data-sprinkled": isBrowser, "data-color-theme": colorTheme },
         globalAlerts && (react_1.default.createElement("div", { className: "WizardLayout__alerts", role: "alert" }, globalAlerts)),
         react_1.default.createElement("div", { className: "WizardLayout__content" },
             react_1.default.createElement("div", { className: "WizardLayout__header", role: "banner" },
-                react_1.default.createElement(_Link_1.Link, { className: "WizardLayout__header__logo", href: logoLink },
+                react_1.default.createElement(_Link_js_1.Link, { className: "WizardLayout__header__logo", href: logoLink },
                     ' ',
-                    react_1.default.createElement(_Image_1.Image, { className: undefined, inline: true, src: (0, assets_1.getAssetUrl)('reykjavik-logo.svg') }),
+                    react_1.default.createElement(_Image_js_1.Image, { className: undefined, inline: true, src: (0, assets_1.getAssetUrl)('reykjavik-logo.svg') }),
                     ' ',
                     siteName,
                     ' '),

package/WizardLayoutClose.d.ts

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

package/WizardLayoutClose.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.WizardLayoutClose = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const _Button_1 = require("./_abstract/_Button");
-const WizardLayoutClose = (props) => (react_1.default.createElement(_Button_1.Button, Object.assign({ bem: "WizardLayoutClose" }, props)));
+const _Button_js_1 = require("./_abstract/_Button.js");
+const WizardLayoutClose = (props) => (react_1.default.createElement(_Button_js_1.Button, Object.assign({ bem: "WizardLayoutClose" }, props)));
 exports.WizardLayoutClose = WizardLayoutClose;
 exports.default = exports.WizardLayoutClose;

package/_abstract/_AbstractCarousel.d.ts

@@ -1,8 +1,8 @@
 import { ReactElement, ReactNode } from 'react';
 import { BemProps } from '@hugsmidjan/react/types';
 import { EitherObj } from '@reykjavik/hanna-utils';
-import { SSRSupport } from '../utils';
-import { SeenProp } from '../utils/seenEffect';
+import { SSRSupport } from '../utils.js';
+import { SeenProp } from '../utils/seenEffect.js';
 export type CarouselProps<I extends Record<string, unknown> = {}, P extends Record<string, unknown> | undefined = {}> = {
     className?: string;
     ssr?: SSRSupport;

package/_abstract/_AbstractCarousel.js

@@ -9,9 +9,9 @@ const focusElm_1 = tslib_1.__importDefault(require("@hugsmidjan/qj/focusElm"));
 const throttle_1 = tslib_1.__importDefault(require("@hugsmidjan/qj/throttle"));
 const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
 const hanna_utils_1 = require("@reykjavik/hanna-utils");
-const CarouselStepper_1 = tslib_1.__importDefault(require("../CarouselStepper"));
-const utils_1 = require("../utils");
-const seenEffect_1 = require("../utils/seenEffect");
+const CarouselStepper_js_1 = tslib_1.__importDefault(require("../CarouselStepper.js"));
+const utils_js_1 = require("../utils.js");
+const seenEffect_js_1 = require("../utils/seenEffect.js");
 // ---------------------------------------------------------------------------
 const scrollXBy = (elm, deltaX) => {
     const left = elm.scrollLeft + deltaX;
@@ -34,7 +34,7 @@ const AbstractCarousel = (props) => {
     const itemCount = props.itemCount || (children || items).length;
     const listRef = (0, react_1.useRef)(null);
     const [activeItem, setActiveItem] = (0, react_1.useState)(0);
-    const isBrowser = (0, utils_1.useIsBrowserSide)(ssr);
+    const isBrowser = (0, utils_js_1.useIsBrowserSide)(ssr);
     // Since listElm gets unmounted and remounted based on isBrowser, we
     // wait for isBrowser is true before setting scroll and resize events.
     const listElm = isBrowser && listRef.current;
@@ -86,7 +86,7 @@ const AbstractCarousel = (props) => {
         }, 1000);
         return { delayedScrollLeft, delayedScrollRight };
     }, []);
-    const [outerRef] = (0, seenEffect_1.useSeenEffect)(startSeen);
+    const [outerRef] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
     if (!itemCount) {
         return null;
     }
@@ -108,6 +108,6 @@ const AbstractCarousel = (props) => {
                     delayedScrollRight.cancel();
                     scrollToItem(activeItem + 1);
                 }, onMouseOver: () => delayedScrollRight(activeItem), onMouseOut: () => delayedScrollRight.cancel() })))) : (itemList),
-        isBrowser && (react_1.default.createElement(CarouselStepper_1.default, { itemCount: itemCount, setCurrent: scrollToItem, current: activeItem }))));
+        isBrowser && (react_1.default.createElement(CarouselStepper_js_1.default, { itemCount: itemCount, setCurrent: scrollToItem, current: activeItem }))));
 };
 exports.AbstractCarousel = AbstractCarousel;

package/_abstract/_Blings.d.ts

@@ -1,5 +1,5 @@
 import { BlingType } from '@reykjavik/hanna-utils/assets';
-import { BlingProps } from '../Bling';
+import { BlingProps } from '../Bling.js';
 export type BlingComboProps = Array<Omit<BlingProps, 'type' | 'blingUrl'> & {
     type: BlingType;
 }>;

package/_abstract/_Blings.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Blings = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const Bling_1 = tslib_1.__importDefault(require("../Bling"));
+const Bling_js_1 = tslib_1.__importDefault(require("../Bling.js"));
 const inverseAlignments = {
     left: 'right',
     'left-ish': 'right-ish',
@@ -12,5 +12,5 @@ const inverseAlignments = {
     'right-ish': 'left-ish',
     right: 'left',
 };
-const Blings = (props) => (react_1.default.createElement(react_1.default.Fragment, null, props.blings.map(({ type, align, vertical, color, overlay, parent }, i) => (react_1.default.createElement(Bling_1.default, { key: type + '-' + i, type: type, align: props.mirror ? inverseAlignments[align || 'left'] : align, vertical: vertical, color: color, overlay: overlay, parent: parent })))));
+const Blings = (props) => (react_1.default.createElement(react_1.default.Fragment, null, props.blings.map(({ type, align, vertical, color, overlay, parent }, i) => (react_1.default.createElement(Bling_js_1.default, { key: type + '-' + i, type: type, align: props.mirror ? inverseAlignments[align || 'left'] : align, vertical: vertical, color: color, overlay: overlay, parent: parent })))));
 exports.Blings = Blings;

package/_abstract/_Block.d.ts

@@ -1,7 +1,7 @@
 import { BemPropsModifier } from '@hugsmidjan/react/types';
-import { SeenProp } from '../utils/seenEffect';
-import { ButtonProps } from './_Button';
-import { ImageProps } from './_Image';
+import { SeenProp } from '../utils/seenEffect.js';
+import { ButtonProps } from './_Button.js';
+import { ImageProps } from './_Image.js';
 export type BlockItem = {
     title: string;
     summary?: string | JSX.Element;

package/_abstract/_Block.js

@@ -4,12 +4,12 @@ exports.Block = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
-const seenEffect_1 = require("../utils/seenEffect");
-const _Button_1 = require("./_Button");
-const _Image_1 = require("./_Image");
+const seenEffect_js_1 = require("../utils/seenEffect.js");
+const _Button_js_1 = require("./_Button.js");
+const _Image_js_1 = require("./_Image.js");
 const Block = (props) => {
     const { image, modifier, bem, content, startSeen } = props;
-    const [ref] = (0, seenEffect_1.useSeenEffect)(startSeen);
+    const [ref] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
     const contentItems = Array.isArray(content) ? content : [content];
     return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)(bem, modifier), ref: ref },
         contentItems.map(({ title, summary, buttons = [] }, i) => {
@@ -20,9 +20,9 @@ const Block = (props) => {
                 buttons.length > 0 && (react_1.default.createElement("div", { className: `${bem}__buttons` },
                     ' ',
                     buttons.map((buttonProps, i) => (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(_Button_1.Button, Object.assign({ bem: `${bem}__button`, key: i }, buttonProps)),
+                        react_1.default.createElement(_Button_js_1.Button, Object.assign({ bem: `${bem}__button`, key: i }, buttonProps)),
                         ' ')))))));
         }),
-        image && react_1.default.createElement(_Image_1.Image, Object.assign({ className: `${bem}__image` }, image))));
+        image && react_1.default.createElement(_Image_js_1.Image, Object.assign({ className: `${bem}__image` }, image))));
 };
 exports.Block = Block;

package/_abstract/_Button.js

@@ -4,7 +4,7 @@ exports.Button = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
-const _Link_1 = require("./_Link");
+const _Link_js_1 = require("./_Link.js");
 // ---------------------------------------------------------------------------
 const sizes = {
     normal: '',
@@ -31,7 +31,7 @@ const Button = (props) => {
         (0, getBemClass_1.default)(bem, [modifier, variants[variant], sizes[size], navigationFlags[icon]]);
     const iconProp = icons[icon] && { 'data-icon': icons[icon] };
     if (buttonProps.href != null) {
-        return (react_1.default.createElement(_Link_1.Link, Object.assign({ className: className }, buttonProps, { style: undefined }, iconProp), label));
+        return (react_1.default.createElement(_Link_js_1.Link, Object.assign({ className: className }, buttonProps, { style: undefined }, iconProp), label));
     }
     else {
         return (react_1.default.createElement("button", Object.assign({ className: className, type: "button" }, buttonProps, { style: undefined }, iconProp), label));

package/_abstract/_CardList.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement, ReactNode } from 'react';
 import { EitherObj } from '@reykjavik/hanna-utils';
-import { ImageProps } from './_Image';
+import { ImageProps } from './_Image.js';
 type BaseCardProps = {
     title: string;
     href: string;

package/_abstract/_CardList.js

@@ -3,15 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CardList = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const _Button_1 = require("./_Button");
-const _Image_1 = require("./_Image");
+const _Button_js_1 = require("./_Button.js");
+const _Image_js_1 = require("./_Image.js");
 const Card = (props) => {
     const { bem, href, title, imgPlaceholder, image, meta, summary } = props;
     const cardClass = `${bem}__card`;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(_Button_1.Button, { bem: cardClass, href: href },
+        react_1.default.createElement(_Button_js_1.Button, { bem: cardClass, href: href },
             ' ',
-            react_1.default.createElement(_Image_1.Image, Object.assign({ className: `${bem}__image` }, image, { placeholder: imgPlaceholder })),
+            react_1.default.createElement(_Image_js_1.Image, Object.assign({ className: `${bem}__image` }, image, { placeholder: imgPlaceholder })),
             react_1.default.createElement("span", { className: `${cardClass}__title` }, title),
             ' ',
             meta && react_1.default.createElement("span", { className: `${cardClass}__meta` }, meta),

package/_abstract/_Image.js

@@ -4,14 +4,14 @@ exports.Image = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
-const useGetSVGtext_1 = require("../utils/useGetSVGtext");
+const useGetSVGtext_js_1 = require("../utils/useGetSVGtext.js");
 // 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 = (0, useGetSVGtext_1.useGetSVGtext)(inline ? imageSrc : undefined);
+    const inlineSvg = (0, useGetSVGtext_js_1.useGetSVGtext)(inline ? imageSrc : undefined);
     if (!imageSrc) {
         return placeholder ? (react_1.default.createElement("span", { className: className && (0, getBemClass_1.default)(className, 'missing') }, placeholder !== true && placeholder())) : null;
     }

package/_abstract/_Quote.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports._Quote = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const _Link_1 = require("./_Link");
+const _Link_js_1 = require("./_Link.js");
 const _Quote = (props) => {
     const { bem, children, by, byHref } = props;
     return (react_1.default.createElement("figure", { className: bem },
         react_1.default.createElement("blockquote", { className: bem + '__quote' }, children),
-        by && (react_1.default.createElement("figcaption", { className: bem + '__by' }, byHref ? (react_1.default.createElement(_Link_1.Link, { href: byHref }, by)) : typeof by === 'string' ? (react_1.default.createElement("span", null, by)) : (by)))));
+        by && (react_1.default.createElement("figcaption", { className: bem + '__by' }, byHref ? (react_1.default.createElement(_Link_js_1.Link, { href: byHref }, by)) : typeof by === 'string' ? (react_1.default.createElement("span", null, by)) : (by)))));
 };
 exports._Quote = _Quote;

package/_abstract/_TogglerGroup.d.ts

@@ -1,5 +1,5 @@
-import { FormFieldInputProps } from '../FormField';
-import { TogglerInputProps } from './_TogglerInput';
+import { FormFieldInputProps } from '../FormField.js';
+import { TogglerInputProps } from './_TogglerInput.js';
 export type TogglerGroupOption = {
     value: string;
     label?: string | JSX.Element;

package/_abstract/_TogglerGroup.js

@@ -4,12 +4,12 @@ exports.TogglerGroup = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
-const utils_1 = require("../utils");
+const utils_js_1 = require("../utils.js");
 const TogglerGroup = (props) => {
     const { 
     // id,
     className, bem, name, disabled, Toggler, onSelected, options, isRadio, inputProps = {}, } = props;
-    const [values, setValues] = (0, utils_1.useMixedControlState)(props, 'value', []);
+    const [values, setValues] = (0, utils_js_1.useMixedControlState)(props, 'value', []);
     return (react_1.default.createElement("ul", { className: (0, getBemClass_1.default)(bem, null, className), role: "group", "aria-labelledby": props['aria-labelledby'], "aria-describedby": props['aria-describedby'], "aria-required": props.required }, options.map((option, i) => {
         const isDisabled = option.disabled != null
             ? option.disabled

package/_abstract/_TogglerGroupField.d.ts

@@ -1,8 +1,8 @@
 import { ReactElement } from 'react';
 import { BemPropsModifier } from '@hugsmidjan/react/types';
-import { FormFieldGroupWrappingProps } from '../FormField';
-import { TogglerGroupOption, TogglerGroupOptions, TogglerGroupProps } from './_TogglerGroup';
-import { TogglerInputProps } from './_TogglerInput';
+import { FormFieldGroupWrappingProps } from '../FormField.js';
+import { TogglerGroupOption, TogglerGroupOptions, TogglerGroupProps } from './_TogglerGroup.js';
+import { TogglerInputProps } from './_TogglerInput.js';
 export type TogglerGroupFieldProps = {
     className?: string;
 } & FormFieldGroupWrappingProps & TogglerGroupProps;

package/_abstract/_TogglerGroupField.js

@@ -4,8 +4,8 @@ exports.TogglerGroupField = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
-const FormField_1 = tslib_1.__importDefault(require("../FormField"));
-const _TogglerGroup_1 = require("./_TogglerGroup");
+const FormField_js_1 = tslib_1.__importDefault(require("../FormField.js"));
+const _TogglerGroup_js_1 = require("./_TogglerGroup.js");
 const TogglerGroupField = (props) => {
     const { bem, Toggler, className, modifier, label, LabelTag, assistText, hideLabel, disabled, readOnly, invalid, errorMessage, required, reqText, id, value, defaultValue } = props, togglerGroupProps = tslib_1.__rest(props, ["bem", "Toggler", "className", "modifier", "label", "LabelTag", "assistText", "hideLabel", "disabled", "readOnly", "invalid", "errorMessage", "required", "reqText", "id", "value", "defaultValue"]);
     const _value = (0, react_1.useMemo)(() => (value == null ? undefined : typeof value === 'string' ? [value] : value), [value]);
@@ -14,8 +14,8 @@ const TogglerGroupField = (props) => {
         : typeof defaultValue === 'string'
             ? [defaultValue]
             : defaultValue, [defaultValue]);
-    return (react_1.default.createElement(FormField_1.default, { className: (0, getBemClass_1.default)(bem, modifier, className), group: true, label: label, LabelTag: LabelTag, assistText: assistText, hideLabel: hideLabel, disabled: disabled, readOnly: readOnly, invalid: invalid, errorMessage: errorMessage, required: required, reqText: reqText, id: id, renderInput: (className, inputProps) => {
-            return (react_1.default.createElement(_TogglerGroup_1.TogglerGroup, Object.assign({ bem: className.options }, inputProps, togglerGroupProps, { value: _value, defaultValue: _defaultValue, Toggler: Toggler })));
+    return (react_1.default.createElement(FormField_js_1.default, { className: (0, getBemClass_1.default)(bem, modifier, className), group: true, label: label, LabelTag: LabelTag, assistText: assistText, hideLabel: hideLabel, disabled: disabled, readOnly: readOnly, invalid: invalid, errorMessage: errorMessage, required: required, reqText: reqText, id: id, renderInput: (className, inputProps) => {
+            return (react_1.default.createElement(_TogglerGroup_js_1.TogglerGroup, Object.assign({ bem: className.options }, inputProps, togglerGroupProps, { value: _value, defaultValue: _defaultValue, Toggler: Toggler })));
         } }));
 };
 exports.TogglerGroupField = TogglerGroupField;

package/assets.d.ts

@@ -31,11 +31,11 @@ export declare const getCssBundleUrl: (cssTokens: string | Array<string>, versio
 /** @deprecated  (Will be removed in v0.11) */
 export declare const efnistakn_menu: readonly ["menu/borgarstjori", "menu/borgarstjorn", "menu/bygg_framkv", "menu/fjarmal", "menu/fundargerdir", "menu/itrottir_aftreying", "menu/log_reglugerdir", "menu/mannaudur", "menu/menning", "menu/rad_nefndir", "menu/skipulag", "menu/skolar_fristund", "menu/svid_deildir", "menu/umhverfi_samgongur", "menu/velferd_fjolskylda"];
 /** @deprecated  (Will be removed in v0.11) */
-export type Efnistakn_Menu = typeof efnistakn_menu[number];
+export type Efnistakn_Menu = (typeof efnistakn_menu)[number];
 /** @deprecated  (Will be removed in v0.11) */
 export declare const auxiliary_menu_images: Array<Illustration>;
 /** @deprecated  Instead `import type { AuxilaryPanelIllustration } from '@reykjavik/hanna-react/MainMenu';` (Will be removed in v0.11) */
-export type Auxilary_MenuImages = typeof auxiliary_menu_images[number];
+export type Auxilary_MenuImages = (typeof auxiliary_menu_images)[number];
 /** @deprecated  Instead `import type { BlingType } from '@reykjavik/hanna-utils/assets';` (Will be removed in v0.11) */
 export type BlingTypes = BlingType;
 /** @deprecated  Instead `import type { Illustration } from '@reykjavik/hanna-utils/assets';` (Will be removed in v0.11) */

package/esm/AccordionList.d.ts

@@ -0,0 +1,25 @@
+import { SeenProp } from './utils/seenEffect.js';
+import { SSRSupport } from './utils.js';
+export type AccordionListItemProps = {
+    title: string | JSX.Element;
+    content: string | JSX.Element | undefined;
+    id?: string;
+    disabled?: boolean;
+};
+export type AccordionListProps = {
+    items: Array<AccordionListItemProps>;
+    /** Index of the currently open items (controlled use) */
+    open?: Array<number>;
+    /** Called whenever an AccodrionList item is toggled  */
+    onToggle?: (data: {
+        newOpen: Array<number>;
+        index: number;
+        opened: boolean;
+    }) => void;
+    /** Index of those items that should start open (uncontrolled use) */
+    defaultOpen?: Array<number>;
+    wide?: boolean;
+    ssr?: SSRSupport;
+} & SeenProp;
+export declare const AccordionList: (props: AccordionListProps) => JSX.Element;
+export default AccordionList;

package/esm/AccordionList.js

@@ -0,0 +1,32 @@
+import React, { useRef } from 'react';
+import { useDomid } from '@hugsmidjan/react/hooks';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { useSeenEffect } from './utils/seenEffect.js';
+import { useIsBrowserSide, useMixedControlState } from './utils.js';
+const AccordionListItem = (props) => {
+    const { title, content, id, disabled = false, ssr, open, onToggle } = props;
+    const defaultOpen = useRef(props.defaultOpen);
+    const domid = useDomid();
+    const isBrowser = useIsBrowserSide(ssr);
+    const itemDisabled = (isBrowser && disabled) || !content;
+    return (React.createElement("div", { className: getBemClass('AccordionList__item', [itemDisabled && 'disabled']), id: id, "data-start-open": defaultOpen.current, "data-sprinkled": isBrowser },
+        React.createElement("h3", { className: "AccordionList__title" }, isBrowser ? (React.createElement("button", { type: "button", className: "AccordionList__button", "aria-controls": domid, "aria-expanded": open || undefined, onClick: onToggle, disabled: itemDisabled }, title)) : (title)),
+        React.createElement("div", { id: isBrowser && domid, className: "AccordionList__content", hidden: isBrowser && (!open || itemDisabled) }, content)));
+};
+export const AccordionList = (props) => {
+    const { items, ssr, wide, startSeen, defaultOpen } = props;
+    const [ref] = useSeenEffect(startSeen);
+    const [open, setOpenArray, mode] = useMixedControlState(props, 'open', []);
+    const onToggle = (index) => {
+        setOpenArray((prevOpen) => {
+            const opened = !prevOpen.includes(index);
+            const newOpen = opened
+                ? prevOpen.concat(index)
+                : prevOpen.filter((idx) => idx !== index);
+            props.onToggle && props.onToggle({ newOpen, index, opened });
+            return newOpen;
+        });
+    };
+    return (React.createElement("div", { className: getBemClass('AccordionList', [wide && 'wide']), ref: ref }, items.map((item, i) => (React.createElement(AccordionListItem, Object.assign({ key: i }, item, { ssr: ssr, open: open.includes(i), onToggle: () => onToggle(i), defaultOpen: defaultOpen && defaultOpen.includes(i) }))))));
+};
+export default AccordionList;

package/esm/ActionCards.d.ts

@@ -0,0 +1,6 @@
+import { CardListSummaryProps, TextCardListProps, TextCardProps } from './_abstract/_CardList.js';
+import { SeenProp } from './utils/seenEffect.js';
+export type ActionCardsProps = TextCardListProps & CardListSummaryProps & SeenProp;
+export type ActionCardsItemProps = TextCardProps;
+export declare const ActionCards: (props: ActionCardsProps) => JSX.Element;
+export default ActionCards;

package/esm/ActionCards.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { CardList, } from './_abstract/_CardList.js';
+import { useSeenEffect } from './utils/seenEffect.js';
+export const ActionCards = (props) => {
+    const [ref] = useSeenEffect(props.startSeen);
+    return (React.createElement("div", { className: "ActionCards", ref: ref },
+        React.createElement(CardList, Object.assign({}, props, { bemPrefix: "ActionCards" }))));
+};
+export default ActionCards;

package/esm/Alert.d.ts

@@ -0,0 +1,48 @@
+import { MouseEvent, ReactNode } from 'react';
+import { EitherObj } from '@reykjavik/hanna-utils';
+import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
+import { SSRSupport } from './utils.js';
+export type AlertI18n = {
+    closeLabel: string;
+    closeLabelLong?: string;
+};
+export declare const defaultAlertTexts: DefaultTexts<AlertI18n>;
+export declare const alertTypes: {
+    info: number;
+    success: number;
+    warning: number;
+    error: number;
+    critical: number;
+};
+type AlertType = keyof typeof alertTypes;
+export type AlertProps = {
+    type: AlertType;
+    closable?: boolean;
+    children?: ReactNode;
+    childrenHTML?: string;
+    /** server-side anchor href */
+    closeUrl?: string;
+    texts?: AlertI18n;
+    lang?: string;
+    ssr?: SSRSupport;
+} & EitherObj<{
+    /** Seconds until the Alert auto-closes.
+     *
+     * Mosueover and keyboard focus resets the timer.
+     */
+    autoClose: number;
+    /** Return `false` to prevent the alert from closing. */
+    onClose?: () => void | boolean;
+    /** Callback that fires when the alert has closed/transitoned out */
+    onClosed: () => void;
+}, {
+    /** @deprecated This signature with the `event` argument will be removed in hanna-react v0.11
+     *
+     * Return `false` to prevent the alert from closing
+     */
+    onClose?(event: MouseEvent): void | boolean;
+    /** Callback that fires after the alert has closed/transitoned out */
+    onClosed?(): void;
+}>;
+export declare const Alert: (props: AlertProps) => JSX.Element;
+export default Alert;

package/esm/Alert.js

@@ -0,0 +1,90 @@
+import React, { useCallback, useEffect, useRef, useState, } from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { getTexts } from '@reykjavik/hanna-utils/i18n';
+import { Button } from './_abstract/_Button.js';
+import { isPreact } from './utils/env.js';
+import { useIsBrowserSide } from './utils.js';
+// FIXME: Eventually import from @reykjavik/hanna-css
+const AlertCloseTransitionDuration = 400;
+const useAutoClosing = (autoClose) => {
+    const [temp, setTemp] = useState(0);
+    if (!autoClose) {
+        return { autoClosing: false };
+    }
+    const thaw = () => setTemp((temp) => temp + 1);
+    const freeze = () => setTemp((temp) => temp - 1);
+    return {
+        autoClosing: temp === 0,
+        autoClosingProps: Object.assign({ onMouseEnter: freeze, onMouseLeave: thaw, onFocus: freeze, onBlur: thaw }, (isPreact && {
+            onfocusin: (e) => e.currentTarget !== e.target && freeze(),
+            onfocusout: (e) => e.currentTarget !== e.target && thaw(),
+        })),
+    };
+};
+export const defaultAlertTexts = {
+    en: { closeLabel: 'Hide' },
+    is: { closeLabel: 'Fela' },
+};
+export const alertTypes = {
+    info: 1,
+    success: 1,
+    warning: 1,
+    error: 1,
+    critical: 1,
+};
+export const Alert = (props) => {
+    const { type, childrenHTML, children, onClose, closeUrl, closable = !!(onClose || closeUrl != null), ssr, onClosed, } = props;
+    const autoClose = Math.max(props.autoClose || 0, 0);
+    const closing = useRef();
+    const [open, setOpen] = useState(!!ssr);
+    const isBrowser = useIsBrowserSide(ssr);
+    const showCloseButton = closable && (isBrowser || closeUrl != null);
+    const { closeLabel, closeLabelLong } = getTexts(props, defaultAlertTexts);
+    useEffect(() => {
+        setOpen(true);
+    }, []);
+    const closeAlert = useCallback((event) => {
+        const ret = onClose &&
+            // @ts-expect-error  (@deprecated `event` parameter will be removed in v0.11)
+            onClose(event);
+        if (ret !== false) {
+            setOpen(false);
+            if (closing.current) {
+                clearTimeout(closing.current);
+                closing.current = undefined;
+            }
+            closing.current = setTimeout(() => {
+                onClosed && onClosed();
+            }, AlertCloseTransitionDuration);
+        }
+    }, [onClose, onClosed]);
+    const { autoClosing, autoClosingProps } = useAutoClosing(autoClose);
+    useEffect(() => {
+        if (autoClosing) {
+            let autoCloseTimeout;
+            autoCloseTimeout = setTimeout(() => {
+                closeAlert();
+            }, autoClose * 1000);
+            return () => {
+                if (autoCloseTimeout) {
+                    clearTimeout(autoCloseTimeout);
+                    autoCloseTimeout = undefined;
+                }
+                if (closing.current) {
+                    clearTimeout(closing.current);
+                    closing.current = undefined;
+                }
+            };
+        }
+    }, [closeAlert, autoClosing, autoClose]);
+    return (React.createElement("div", Object.assign({ className: getBemClass('Alert', [
+            !!alertTypes[type] && type,
+            closable && 'closable',
+        ]), role: "alert", hidden: !open || undefined }, autoClosingProps),
+        childrenHTML ? (React.createElement("div", { dangerouslySetInnerHTML: { __html: childrenHTML } })) : (children),
+        ' ',
+        showCloseButton && (React.createElement(Button, Object.assign({ bem: "Alert__close" }, (closeUrl != null ? { href: closeUrl } : { type: 'button' }), { onClick: (e) => {
+                closeAlert(e);
+            }, "aria-label": closeLabelLong, title: closeLabelLong || closeLabel }), closeLabel))));
+};
+export default Alert;

package/esm/ArticleCards.d.ts

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

package/esm/ArticleCards.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CardList } from './_abstract/_CardList.js';
+export const ArticleCards = (props) => (React.createElement(CardList, { bemPrefix: "ArticleCards", standalone: true, cards: props.cards, imgPlaceholder: props.imgPlaceholder || true }));
+export default ArticleCards;

package/esm/ArticleCarousel/_ArticleCarouselCard.d.ts

@@ -0,0 +1,28 @@
+import type { HannaColorTheme } from '@reykjavik/hanna-css';
+import { Illustration } from '@reykjavik/hanna-utils/assets';
+import { ImageProps } from '../_abstract/_Image.js';
+import { ColorFamily } from '../constants.js';
+export type ArticleCarouselImageProps = ImageProps & {
+    photo?: boolean;
+};
+export type ArticleCarouselCardProps = {
+    date?: string;
+    title: string;
+    summary: string;
+    href: string;
+    target?: string;
+    color?: ColorFamily;
+    /** NOTE: if both `color` and `theme` are specified
+     * then `color` takes precedence.
+     */
+    theme?: HannaColorTheme;
+} & ({
+    illustration: Illustration;
+    image?: undefined;
+} | {
+    illustration?: undefined;
+    image: ArticleCarouselImageProps | undefined;
+});
+export declare const ArticleCarouselCard: (props: ArticleCarouselCardProps & {
+    moreLabel?: string;
+}) => JSX.Element;