@reykjavik/hanna-react 0.10.57 → 0.10.60

package/_abstract/_Block.js

@@ -1,13 +1,11 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+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 = __importDefault(require("./Button"));
-const Image_1 = __importDefault(require("./Image"));
+const _Button_1 = tslib_1.__importDefault(require("./_Button"));
+const _Image_1 = tslib_1.__importDefault(require("./_Image"));
 const Block = (props) => {
     const { image, modifier, bem, content, startSeen } = props;
     const [ref] = (0, seenEffect_1.useSeenEffect)(startSeen);
@@ -21,9 +19,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.default, Object.assign({ bem: `${bem}__button`, key: i }, buttonProps)),
+                        react_1.default.createElement(_Button_1.default, Object.assign({ bem: `${bem}__button`, key: i }, buttonProps)),
                         ' ')))))));
         }),
-        image && react_1.default.createElement(Image_1.default, Object.assign({ className: `${bem}__image` }, image))));
+        image && react_1.default.createElement(_Image_1.default, Object.assign({ className: `${bem}__image` }, image))));
 };
 exports.default = Block;

package/_abstract/{Button.js → _Button.js}

@@ -1,22 +1,9 @@
 "use strict";
-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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
-const Link_1 = require("./Link");
+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 sizes = {
     normal: '',
@@ -38,12 +25,12 @@ const 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 { bem, small, size = 'normal', modifier, children, variant = 'normal', icon = 'none', label = children } = props, buttonProps = tslib_1.__rest(props, ["bem", "small", "size", "modifier", "children", "variant", "icon", "label"]);
     const className = bem &&
         (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_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/{esm/_abstract/CardList.d.ts → _abstract/_CardList.d.ts}

@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode } from 'react';
-import { ImageProps } from './Image';
+import { ImageProps } from './_Image';
 declare type BaseCardProps = {
     title: string;
     href: string;
@@ -24,6 +24,7 @@ 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/_abstract/{CardList.js → _CardList.js}

@@ -1,12 +1,10 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CardList = void 0;
-const react_1 = __importDefault(require("react"));
-const Button_1 = __importDefault(require("./Button"));
-const Image_1 = __importDefault(require("./Image"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const _Button_1 = tslib_1.__importDefault(require("./_Button"));
+const _Image_1 = tslib_1.__importDefault(require("./_Image"));
 const Card = (props) => {
     const { bem, href, title, imgPlaceholder } = props;
     const cardClass = `${bem}__card`;
@@ -14,9 +12,9 @@ const Card = (props) => {
     const meta = 'meta' in props && props.meta;
     const summary = 'summary' in props && props.summary;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Button_1.default, { bem: cardClass, href: href },
+        react_1.default.createElement(_Button_1.default, { bem: cardClass, href: href },
             ' ',
-            react_1.default.createElement(Image_1.default, Object.assign({ className: `${bem}__image` }, image, { placeholder: imgPlaceholder })),
+            react_1.default.createElement(_Image_1.default, 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),
@@ -28,15 +26,17 @@ const Card = (props) => {
 const CardList = (props) => {
     const { bemPrefix, title, summaryElement, cards, titleTag = 'h2', children, imgPlaceholder, } = props;
     const TitleTag = titleTag;
-    const fallbackImage = (imgPlaceholder !== true && imgPlaceholder) || undefined;
-    const fallbackImageStyle = fallbackImage
-        ? { '--ImageCards--fallback': `url("${fallbackImage}")` }
+    const fallbackImageUrl = (imgPlaceholder !== true && imgPlaceholder) || undefined;
+    const fallbackImageStyle = fallbackImageUrl
+        ? {
+            ['--' + bemPrefix + '--fallback']: `url("${fallbackImageUrl}")`,
+        }
         : undefined;
     return (react_1.default.createElement(react_1.default.Fragment, null,
         summaryElement ? (react_1.default.createElement("div", { className: bemPrefix + '__summary' },
             title && react_1.default.createElement(TitleTag, { className: bemPrefix + '__title' }, title),
             summaryElement)) : (title && react_1.default.createElement(TitleTag, { className: bemPrefix + '__title' }, title)),
-        react_1.default.createElement("ul", { className: bemPrefix + '__list', style: fallbackImageStyle }, cards.map((card, i) => (react_1.default.createElement("li", { key: i, className: bemPrefix + '__item' },
+        react_1.default.createElement("ul", { className: bemPrefix + (props.standalone ? '' : '__list'), style: fallbackImageStyle }, cards.map((card, i) => (react_1.default.createElement("li", { key: i, className: bemPrefix + '__item' },
             react_1.default.createElement(Card, Object.assign({}, card, { bem: bemPrefix, imgPlaceholder: !!imgPlaceholder })))))),
         children));
 };

package/{esm/_abstract/Image.d.ts → _abstract/_Image.d.ts}

@@ -2,25 +2,29 @@ export declare type Source = {
     srcset: string;
     media: string;
 };
-export declare type ImageProps = {
+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;
+    className: string | undefined;
     /** Controls if the container is rendered when image is missing/undefined.
      * (With a `--missing` className modifier added.)
      *

package/_abstract/{Image.js → _Image.js}

@@ -1,14 +1,12 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+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");
 // eslint-disable-next-line complexity
 const Image = (props) => {
-    const { src, altText = '', sources = [], preloadSrc, className, inline, placeholder, } = 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';
@@ -20,7 +18,7 @@ const Image = (props) => {
         const __html = inlineSvg.imageSrc === imageSrc ? inlineSvg.code : '';
         return react_1.default.createElement("span", { className: className, dangerouslySetInnerHTML: { __html } });
     }
-    return (react_1.default.createElement("picture", { className: className },
+    return (react_1.default.createElement("picture", { className: className, style: focalPoint ? { '--focalPoint': focalPoint } : undefined },
         ' ',
         sources.map((source, i) => (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("source", { key: i, srcSet: source.srcset, media: source.media }),

package/_abstract/{Link.js → _Link.js}

@@ -1,10 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setLinkRenderer = exports.Link = void 0;
-const react_1 = __importDefault(require("react"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 const DefaultLinkRenderer = (props) => react_1.default.createElement('a', props);
 exports.Link = DefaultLinkRenderer;
 /**

package/_abstract/_Quote.js

@@ -1,15 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports._Quote = void 0;
-const react_1 = __importDefault(require("react"));
-const Link_1 = require("./Link");
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const _Link_1 = require("./_Link");
 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_1.Link, { href: byHref }, by)) : typeof by === 'string' ? (react_1.default.createElement("span", null, by)) : (by)))));
 };
 exports._Quote = _Quote;

package/{esm/_abstract/TogglerGroup.d.ts → _abstract/_TogglerGroup.d.ts}

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

package/_abstract/{TogglerGroup.js → _TogglerGroup.js}

@@ -1,28 +1,28 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+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 TogglerGroup = (props) => {
     const { 
     // id,
     className, bem, name, disabled, Toggler, onSelected, options, inputProps = {}, } = props;
-    const values = props.value || [];
+    const values = 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
             : disabled && typeof disabled !== 'boolean'
                 ? disabled.includes(i)
                 : disabled;
-        const isChecked = values.includes(option.value);
+        const isChecked = values && values.includes(option.value);
         return (react_1.default.createElement(Toggler, Object.assign({ key: i }, inputProps, { className: bem + '__item', name: name, Wrapper: "li" }, option, { label: option.label || option.value, onChange: onSelected
                 ? (e) => {
                     const { value } = option;
                     const checked = e.currentTarget.checked;
                     inputProps.onChange && inputProps.onChange(e);
-                    const selectedValues = values.filter((val) => val !== value);
+                    const selectedValues = values
+                        ? values.filter((val) => val !== value)
+                        : [];
                     if (checked) {
                         selectedValues.push(value);
                     }

package/{esm/_abstract/TogglerGroupField.d.ts → _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 { TogglerGroupOption, TogglerGroupOptions, TogglerGroupProps } from './_TogglerGroup';
+import { TogglerInputProps } from './_TogglerInput';
 export declare type TogglerGroupFieldProps = {
     className?: string;
 } & FormFieldGroupWrappingProps & TogglerGroupProps;

package/_abstract/_TogglerGroupField.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 FormField_1 = tslib_1.__importDefault(require("../FormField"));
+const _TogglerGroup_1 = tslib_1.__importDefault(require("./_TogglerGroup"));
+const TogglerGroupField = (props) => {
+    const { bem, Toggler, className, modifier, label, LabelTag, assistText, hideLabel, disabled, readOnly, invalid, errorMessage, required, reqText, id, value } = props, togglerGroupProps = tslib_1.__rest(props, ["bem", "Toggler", "className", "modifier", "label", "LabelTag", "assistText", "hideLabel", "disabled", "readOnly", "invalid", "errorMessage", "required", "reqText", "id", "value"]);
+    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.default, Object.assign({ bem: className.options }, inputProps, togglerGroupProps, { value: Array.isArray(value) ? value : value != null ? [value] : undefined, Toggler: Toggler })));
+        } }));
+};
+exports.default = TogglerGroupField;

package/_abstract/{TogglerInput.js → _TogglerInput.js}

@@ -1,24 +1,11 @@
 "use strict";
-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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 const hooks_1 = require("@hugsmidjan/react/hooks");
-const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
 const TogglerInput = (props) => {
-    const { bem, modifier, className, label, invalid, errorMessage, Wrapper = 'div', required, reqText, type, id } = props, inputProps = __rest(props, ["bem", "modifier", "className", "label", "invalid", "errorMessage", "Wrapper", "required", "reqText", "type", "id"]);
+    const { bem, modifier, className, label, invalid, errorMessage, Wrapper = 'div', required, reqText, type, id } = props, inputProps = tslib_1.__rest(props, ["bem", "modifier", "className", "label", "invalid", "errorMessage", "Wrapper", "required", "reqText", "type", "id"]);
     const domid = (0, hooks_1.useDomid)(id);
     const errorId = errorMessage && 'error' + domid;
     const reqStar = required && reqText !== false && (react_1.default.createElement("abbr", { className: bem + '__label__reqstar', 

package/_abstract/breakOnNL.js

@@ -1,9 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 const breakOnNL = (text) => text &&
     text
         .trim()