@reykjavik/hanna-react 0.10.101 → 0.10.102

package/AccordionList.d.ts

@@ -1,4 +1,4 @@
-import { SeenProp } from './utils/seenEffect.js';
+import { DeprecatedSeenProp } from './utils/seenEffect.js';
 import { SSRSupportProps, WrapperElmProps } from './utils.js';
 export type AccordionListItemProps = {
     title: string | JSX.Element;
@@ -19,6 +19,6 @@ export type AccordionListProps = {
     /** Index of those items that should start open (uncontrolled use) */
     defaultOpen?: Array<number>;
     wide?: boolean;
-} & WrapperElmProps & SSRSupportProps & SeenProp;
+} & WrapperElmProps & SSRSupportProps & DeprecatedSeenProp;
 export declare const AccordionList: (props: AccordionListProps) => JSX.Element;
 export default AccordionList;

package/AccordionList.js

@@ -5,7 +5,6 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const hooks_1 = require("@hugsmidjan/react/hooks");
-const seenEffect_js_1 = require("./utils/seenEffect.js");
 const utils_js_1 = require("./utils.js");
 const AccordionListItem = (props) => {
     const { title, content, id, disabled = false, ssr, open, onToggle } = props;
@@ -18,8 +17,7 @@ const AccordionListItem = (props) => {
         react_1.default.createElement("div", { id: isBrowser && domid, className: "AccordionList__content", hidden: isBrowser && (!open || itemDisabled) }, content)));
 };
 const AccordionList = (props) => {
-    const { items, ssr, wide, startSeen, defaultOpen, wrapperProps } = props;
-    const [ref] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
+    const { items, ssr, wide, defaultOpen, wrapperProps } = props;
     const [open, setOpenArray, mode] = (0, utils_js_1.useMixedControlState)(props, 'open', []);
     const onToggle = (index) => {
         setOpenArray((prevOpen) => {
@@ -31,7 +29,7 @@ const AccordionList = (props) => {
             return newOpen;
         });
     };
-    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('AccordionList', [wide && 'wide'], (wrapperProps || {}).className), ref: ref }), items.map((item, i) => (react_1.default.createElement(AccordionListItem, Object.assign({ key: i }, item, { ssr: ssr, open: open.includes(i), onToggle: () => onToggle(i), defaultOpen: defaultOpen && defaultOpen.includes(i) }))))));
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('AccordionList', [wide && 'wide'], (wrapperProps || {}).className) }), items.map((item, i) => (react_1.default.createElement(AccordionListItem, Object.assign({ key: i }, item, { ssr: ssr, open: open.includes(i), onToggle: () => onToggle(i), defaultOpen: defaultOpen && defaultOpen.includes(i) }))))));
 };
 exports.AccordionList = AccordionList;
 exports.default = exports.AccordionList;

package/ActionCards.d.ts

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

package/ActionCards.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionCards = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const _CardList_js_1 = require("./_abstract/_CardList.js");
-const seenEffect_js_1 = require("./utils/seenEffect.js");
 const ActionCards = (props) => {
-    const [ref] = (0, seenEffect_js_1.useSeenEffect)(props.startSeen);
-    return (react_1.default.createElement("div", { className: "ActionCards", ref: ref },
+    const { wrapperProps } = props;
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('ActionCards', null, (wrapperProps || {}).className) }),
         react_1.default.createElement(_CardList_js_1.CardList, Object.assign({ bemPrefix: "ActionCards" }, props, { wrapperProps: undefined }))));
 };
 exports.ActionCards = ActionCards;

package/ArticleCarousel.d.ts

@@ -1,11 +1,11 @@
 import { ArticleCarouselCardProps, ArticleCarouselImageProps } from './ArticleCarousel/_ArticleCarouselCard.js';
-import { SeenProp } from './utils/seenEffect.js';
+import { DeprecatedSeenProp } from './utils/seenEffect.js';
 import { SSRSupportProps, WrapperElmProps } from './utils.js';
 export type ArticleCarouselProps = {
     items: Array<ArticleCarouselCardProps>;
     title?: string;
     moreLabel?: string;
-} & WrapperElmProps & SSRSupportProps & SeenProp;
+} & WrapperElmProps & SSRSupportProps & DeprecatedSeenProp;
 export type { ArticleCarouselCardProps, ArticleCarouselImageProps };
 export declare const ArticleCarousel: (props: ArticleCarouselProps) => JSX.Element;
 export default ArticleCarousel;

package/ArticleCarousel.js

@@ -6,8 +6,8 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const _AbstractCarousel_js_1 = require("./_abstract/_AbstractCarousel.js");
 const _ArticleCarouselCard_js_1 = require("./ArticleCarousel/_ArticleCarouselCard.js");
 const ArticleCarousel = (props) => {
-    const { title, items, moreLabel, ssr, startSeen } = props;
-    return (react_1.default.createElement(_AbstractCarousel_js_1.AbstractCarousel, { bem: "ArticleCarousel", title: title, items: items, Component: _ArticleCarouselCard_js_1.ArticleCarouselCard, ComponentProps: { moreLabel }, ssr: ssr, startSeen: startSeen, wrapperProps: props.wrapperProps }));
+    const { title, items, moreLabel, ssr } = props;
+    return (react_1.default.createElement(_AbstractCarousel_js_1.AbstractCarousel, { bem: "ArticleCarousel", title: title, items: items, Component: _ArticleCarouselCard_js_1.ArticleCarouselCard, ComponentProps: { moreLabel }, ssr: ssr, wrapperProps: props.wrapperProps }));
 };
 exports.ArticleCarousel = ArticleCarousel;
 exports.default = exports.ArticleCarousel;

package/BasicTable.d.ts

@@ -1,6 +1,6 @@
 import { TableProps } from '@hugsmidjan/react/Table';
 import { EitherObj } from '@reykjavik/hanna-utils';
-import { SeenProp } from './utils/seenEffect.js';
+import { DeprecatedSeenProp } from './utils/seenEffect.js';
 import { MissingWrapperElmProps } from './utils.js';
 export type BasicTableProps = {
     compact?: boolean;
@@ -10,6 +10,6 @@ export type BasicTableProps = {
     fullWidth?: boolean;
 }, {
     align?: 'right';
-}> & MissingWrapperElmProps & SeenProp & Omit<TableProps, 'className' | 'children'>;
+}> & MissingWrapperElmProps & DeprecatedSeenProp & Omit<TableProps, 'className' | 'children'>;
 export declare const BasicTable: (props: BasicTableProps) => JSX.Element;
 export default BasicTable;

package/BasicTable.js

@@ -6,20 +6,18 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const Table_1 = tslib_1.__importDefault(require("@hugsmidjan/react/Table"));
 const TableWrapper_1 = tslib_1.__importDefault(require("@hugsmidjan/react/TableWrapper"));
-const seenEffect_js_1 = require("./utils/seenEffect.js");
 const BasicTable = (props) => {
-    const { cols, caption, thead, tfoot, align, fullWidth, startSeen } = props;
+    const { cols, caption, thead, tfoot, align, fullWidth } = props;
     const tbodyProps = props.tbodies
         ? { tbodies: props.tbodies }
         : { tbody: props.tbody || [] };
     const modifier = props.modifier;
-    const [ref] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
     return (react_1.default.createElement(TableWrapper_1.default, { modifier: [
             'BasicTable',
             modifier && 'BasicTable--' + modifier,
             fullWidth && 'BasicTable--fullwidth',
             align === 'right' && !fullWidth && 'BasicTable--align--' + align,
-        ], wrapperRef: ref },
+        ] },
         react_1.default.createElement(Table_1.default, Object.assign({ className: (0, classUtils_1.modifiedClass)('BasicTable', [
                 props.compact && 'compact',
                 modifier && modifier,

package/BgBox.d.ts

@@ -1,9 +1,9 @@
 import { ReactNode } from 'react';
-import { EffectProp, SeenProp } from './utils/seenEffect.js';
+import { DeprecatedSeenProp, EffectProp } from './utils/seenEffect.js';
 import { WrapperElmProps } from './utils.js';
 export type BgBoxProps = {
     className?: string;
     children: ReactNode;
-} & WrapperElmProps & SeenProp & EffectProp;
+} & WrapperElmProps & DeprecatedSeenProp & EffectProp;
 export declare const BgBox: (props: BgBoxProps) => JSX.Element;
 export default BgBox;

package/BgBox.js

@@ -4,13 +4,11 @@ exports.BgBox = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
-const seenEffect_js_1 = require("./utils/seenEffect.js");
 const BgBox = (props) => {
-    const { className, children, effectType, startSeen, wrapperProps } = props;
-    const [ref] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
+    const { className, children, effectType, wrapperProps } = props;
     return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('BgBox', undefined, 
         // Prefer `className` over `wrapperProps.className`
-        className || (wrapperProps || {}).className), ref: ref }, (0, seenEffect_js_1.getEffectAttr)(effectType)), children));
+        className || (wrapperProps || {}).className) }), children));
 };
 exports.BgBox = BgBox;
 exports.default = exports.BgBox;

package/CHANGELOG.md

@@ -4,6 +4,22 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.102
+
+_2023-09-04_
+
+- feat: Add component `Pagination`
+- `MegaPanelItem` type:
+  - feat: add prop `Content` for custom `*Panel__item` children
+  - feat: add prop `modifier`, similar to `MainMenuItem.modifier`
+- feat: Export `MegaPanelItemList` from `MainMenu`
+- feat: Expand `MainMenuItem.modifier` to accept falsy and array values
+- feat: Add props `wrapperProps` to `CarouselStepper`
+- feat: Remove defeault/implicit seen-effect styling from all
+  components(except `SeenEffect`, `BgBox` and `CenterColumn`) — flag
+  `startSeen` prop as deprecated.
+- fix: Export type `MultiselectOption`, deprecate `MultiSelectOption`
+
 ## 0.10.101
 
 _2023-08-28_

package/CarouselStepper.d.ts

@@ -1,5 +1,12 @@
-import { Props } from '@hugsmidjan/react/CarouselStepper';
-import { MissingWrapperElmProps } from './utils.js';
-type CarouselStepperProps = Omit<Props, 'bem' | 'modifier'> & MissingWrapperElmProps;
+import { WrapperElmProps } from './utils.js';
+type CarouselStepperProps = {
+    current: number;
+    itemCount: number;
+    setCurrent: (idx: number) => void;
+    'aria-controls'?: string;
+    texts?: Readonly<{
+        prefix: string;
+    }>;
+} & WrapperElmProps;
 export declare const CarouselStepper: (props: CarouselStepperProps) => JSX.Element;
 export default CarouselStepper;

package/CarouselStepper.js

@@ -3,7 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CarouselStepper = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const CarouselStepper_1 = tslib_1.__importDefault(require("@hugsmidjan/react/CarouselStepper"));
-const CarouselStepper = (props) => (react_1.default.createElement(CarouselStepper_1.default, Object.assign({}, props, { bem: undefined, modifier: undefined })));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const defaultTexts = {
+    prefix: '',
+};
+const array = new Array(50).join(' ').split('');
+const CarouselStepper = (props) => {
+    const { current, itemCount, setCurrent, texts = defaultTexts, wrapperProps } = props;
+    const labelPrefix = texts.prefix ? texts.prefix + ' ' : '';
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('CarouselStepper', null, (wrapperProps || {}).className) }), array.slice(0, itemCount).map((_, i) => {
+        const isCurrent = current === i || undefined;
+        const label = labelPrefix + (i + 1);
+        return (react_1.default.createElement("button", { key: i, className: 'CarouselStepper__button', type: "button", disabled: isCurrent, "aria-pressed": isCurrent, "aria-controls": props['aria-controls'], onClick: () => setCurrent(i), "aria-label": label, title: label }, label));
+    })));
+};
 exports.CarouselStepper = CarouselStepper;
 exports.default = exports.CarouselStepper;

package/CenterColumn.d.ts

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
-import { EffectProp, SeenProp } from './utils/seenEffect.js';
+import { DeprecatedSeenProp, EffectProp } from './utils/seenEffect.js';
 import { WrapperElmProps } from './utils.js';
 export type CenterColumnProps = {
     children: ReactNode;
-} & SeenProp & WrapperElmProps & EffectProp;
+} & EffectProp & WrapperElmProps & DeprecatedSeenProp;
 export declare const CenterColumn: (props: CenterColumnProps) => JSX.Element;
 export default CenterColumn;

package/CenterColumn.js

@@ -5,10 +5,8 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const SeenEffect_js_1 = tslib_1.__importDefault(require("./SeenEffect.js"));
-const CenterColumn = (props) => {
-    const { children, startSeen, effectType, wrapperProps } = props;
-    const className = (0, classUtils_1.modifiedClass)('CenterColumn', null, (wrapperProps || {}).className);
-    return startSeen == null ? (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: className }), children)) : (react_1.default.createElement(SeenEffect_js_1.default, Object.assign({}, wrapperProps, { className: className, startSeen: startSeen, effectType: effectType }), children));
-};
+const CenterColumn = (props) => (react_1.default.createElement(SeenEffect_js_1.default, Object.assign({}, props.wrapperProps, props, { 
+    // @ts-expect-error  (overriding `props.wrapperProps` exactly bcause it should NOT be forwarded)
+    wrapperProps: undefined, className: (0, classUtils_1.modifiedClass)('CenterColumn', null, (props.wrapperProps || {}).className), effectType: props.effectType || 'none' })));
 exports.CenterColumn = CenterColumn;
 exports.default = exports.CenterColumn;

package/CityBlock.d.ts

@@ -2,7 +2,7 @@ import { EitherObj } from '@reykjavik/hanna-utils';
 import { Illustration } from '@reykjavik/hanna-utils/assets';
 import { BlockItem } from './_abstract/_Block.js';
 import { ImageProps } from './_abstract/_Image.js';
-import { SeenProp } from './utils/seenEffect.js';
+import { DeprecatedSeenProp } from './utils/seenEffect.js';
 import { Alignment } from './constants.js';
 import { WrapperElmProps } from './utils.js';
 declare const types: {
@@ -17,6 +17,6 @@ export type CityBlockProps = {
     illustration: Illustration;
 }, {
     image: ImageProps;
-}> & WrapperElmProps & SeenProp;
+}> & WrapperElmProps & DeprecatedSeenProp;
 export declare const CityBlock: (props: CityBlockProps) => JSX.Element;
 export default CityBlock;

package/CityBlock.js

@@ -17,7 +17,7 @@ const CityBlock = (props) => {
     const imageProps = props.illustration != null
         ? { src: (0, assets_1.getIllustrationUrl)(props.illustration) }
         : props.image;
-    return (react_1.default.createElement(_Block_js_1.Block, { bem: "CityBlock", modifier: modifier, content: props.content, image: imageProps, wrapperProps: props.wrapperProps, startSeen: props.startSeen }));
+    return (react_1.default.createElement(_Block_js_1.Block, { bem: "CityBlock", modifier: modifier, content: props.content, image: imageProps, wrapperProps: props.wrapperProps }));
 };
 exports.CityBlock = CityBlock;
 exports.default = exports.CityBlock;

package/ContactBubble.d.ts

@@ -39,7 +39,7 @@ export type ContactBubbleProps = {
      * is scrolled to near the top or the bottom.
      *
      * This means that on short pages (with hardly any scrolling)
-     * the ContactBubble **always** hidden.
+     * the ContactBubble __always__ hidden.
      *
      * Set this prop to `true` if you want to disable this
      * magic and always show the bubble toggler

package/ContentArticle.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { SeenProp } from './utils/seenEffect.js';
+import { DeprecatedSeenProp } from './utils/seenEffect.js';
 import { ArticleMetaProps } from './ArticleMeta.js';
 import { ContentImageProps } from './ContentImage.js';
 import { RelatedLinksProps } from './RelatedLinks.js';
@@ -12,6 +12,6 @@ export type ContentArticleProps = {
     topImage?: ContentImageProps;
     body: ReactNode;
     relatedLinks?: RelatedLinksProps;
-} & SeenProp & WrapperElmProps;
+} & WrapperElmProps & DeprecatedSeenProp;
 export declare const ContentArticle: (props: ContentArticleProps) => JSX.Element;
 export default ContentArticle;

package/ContentArticle.js

@@ -4,7 +4,6 @@ exports.ContentArticle = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
-const seenEffect_js_1 = require("./utils/seenEffect.js");
 const ArticleMeta_js_1 = tslib_1.__importDefault(require("./ArticleMeta.js"));
 const ContentImage_js_1 = tslib_1.__importDefault(require("./ContentImage.js"));
 const Heading_js_1 = tslib_1.__importDefault(require("./Heading.js"));
@@ -13,13 +12,12 @@ const TextBlock_js_1 = tslib_1.__importDefault(require("./TextBlock.js"));
 const VSpacer_js_1 = tslib_1.__importDefault(require("./VSpacer.js"));
 const ContentArticle = (props) => {
     const { relatedLinks, wrapperProps } = props;
-    const [ref] = (0, seenEffect_js_1.useSeenEffect)(props.startSeen);
     const headingElm = (react_1.default.createElement(Heading_js_1.default, { forceH1: props.headlineTag === 'h1' }, props.headline));
-    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('ContentArticle', null, (wrapperProps || {}).className), ref: ref }),
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('ContentArticle', null, (wrapperProps || {}).className) }),
         props.meta ? (react_1.default.createElement("div", { className: "ContentArticle__header" },
             headingElm,
             react_1.default.createElement(ArticleMeta_js_1.default, { items: props.meta }))) : (headingElm),
-        react_1.default.createElement(TextBlock_js_1.default, { startSeen: true },
+        react_1.default.createElement(TextBlock_js_1.default, null,
             props.topImage && react_1.default.createElement(ContentImage_js_1.default, Object.assign({}, props.topImage)),
             props.body),
         relatedLinks && relatedLinks.links.length > 0 && (react_1.default.createElement(VSpacer_js_1.default, { size: "small" },

package/Datepicker.js

@@ -84,7 +84,7 @@ const Datepicker = (props) => {
                 isoMode && (react_1.default.createElement("input", { type: "hidden", name: name, value: value === null || value === void 0 ? void 0 : value.toISOString().slice(0, 10) })),
                 react_1.default.createElement(ReactDatepicker_js_1.ReactDatePicker, Object.assign({ id: domid, required: inputProps.required, disabled: inputProps.disabled, readOnly: inputProps.readOnly, selected: value, name: isoMode ? undefined : name, locale: localeCode, dateFormat: 
                     // NOTE: Force all dateFormat values into Array<string> to temporarily work around
-                    // a bug in the current version of react-datepicker where invalid **string** values
+                    // a bug in the current version of react-datepicker where invalid `string` values
                     // are re-parsed with `new Date()`, causing surprising (weird) false positives
                     // AND where Arrayed formats get parsed in order of "increasing priority".
                     //

package/ExtraLinks.d.ts

@@ -1,5 +1,5 @@
 import { CardListProps, TextCardProps } from './_abstract/_CardList.js';
-import { SeenProp } from './utils/seenEffect.js';
+import { DeprecatedSeenProp } from './utils/seenEffect.js';
 import { WrapperElmProps } from './utils.js';
 export type RelatedLink = {
     href: string;
@@ -14,6 +14,6 @@ type RelatedProps = {
 export type ExtraLinksCardProps = Omit<TextCardProps, 'meta'>;
 export type ExtraLinksProps = CardListProps<ExtraLinksCardProps> & RelatedProps & {
     className?: string;
-} & WrapperElmProps & SeenProp;
+} & WrapperElmProps & DeprecatedSeenProp;
 export declare const ExtraLinks: (props: ExtraLinksProps) => JSX.Element;
 export default ExtraLinks;

package/ExtraLinks.js

@@ -6,7 +6,6 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const _CardList_js_1 = require("./_abstract/_CardList.js");
 const _Link_js_1 = require("./_abstract/_Link.js");
-const seenEffect_js_1 = require("./utils/seenEffect.js");
 const ExtraLinks__related = (props) => {
     const { relatedTitle, relatedLinks } = props;
     return (react_1.default.createElement("div", { className: "ExtraLinks__related" },
@@ -16,12 +15,11 @@ const ExtraLinks__related = (props) => {
                 react_1.default.createElement(_Link_js_1.Link, { className: (0, classUtils_1.modifiedClass)('ExtraLinks__related__link', type), href: href, target: blank ? '_blank' : '', rel: blank ? 'noreferrer noopener' : '' }, label)))))));
 };
 const ExtraLinks = (props) => {
-    const { relatedTitle, relatedLinks, className, startSeen, wrapperProps } = props, cardListProps = tslib_1.__rest(props, ["relatedTitle", "relatedLinks", "className", "startSeen", "wrapperProps"]);
+    const { relatedTitle, relatedLinks, className, wrapperProps } = props, cardListProps = tslib_1.__rest(props, ["relatedTitle", "relatedLinks", "className", "wrapperProps"]);
     const hasRelated = !!(relatedLinks && relatedLinks.length);
-    const [ref] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
     return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('ExtraLinks', hasRelated && 'related', 
         // Prefer `className` over `wrapperProps.className`
-        className || (wrapperProps || {}).className), ref: ref }),
+        className || (wrapperProps || {}).className) }),
         react_1.default.createElement("div", { className: "ExtraLinks__main" },
             react_1.default.createElement(_CardList_js_1.CardList, Object.assign({}, cardListProps, { bemPrefix: "ExtraLinks" }))),
         hasRelated && (react_1.default.createElement(ExtraLinks__related, { relatedTitle: relatedTitle, relatedLinks: relatedLinks }))));

package/FeatureList.d.ts

@@ -1,5 +1,5 @@
 import { Efnistakn } from '@reykjavik/hanna-utils/assets';
-import { SeenProp } from './utils/seenEffect.js';
+import { DeprecatedSeenProp } from './utils/seenEffect.js';
 import { WrapperElmProps } from './utils.js';
 export type FeatureListProps = {
     title: string;
@@ -8,6 +8,6 @@ export type FeatureListProps = {
         iconUrl?: string;
         name: string;
     }>;
-} & WrapperElmProps & SeenProp;
+} & WrapperElmProps & DeprecatedSeenProp;
 export declare const FeatureList: (props: FeatureListProps) => JSX.Element;
 export default FeatureList;

package/FeatureList.js

@@ -4,15 +4,13 @@ exports.FeatureList = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
-const seenEffect_js_1 = require("./utils/seenEffect.js");
 const Bling_js_1 = tslib_1.__importDefault(require("./Bling.js"));
 const FeatureList = (props) => {
-    const { title, features, startSeen, wrapperProps } = props;
-    const [ref] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
+    const { title, features, wrapperProps } = props;
     const _features = features.length ? features : [{ name: '...' }];
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(Bling_js_1.default, { type: "snake-large", align: "left", vertical: "down-ish" }),
-        react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('FeatureList', null, (wrapperProps || {}).className), ref: ref }),
+        react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('FeatureList', null, (wrapperProps || {}).className) }),
             react_1.default.createElement("h2", { className: "FeatureList__title" }, title),
             react_1.default.createElement("ul", { className: "FeatureList__list" }, _features.map(({ name, icon, iconUrl }, i) => (react_1.default.createElement("li", { key: i, className: "FeatureList__feature", style: iconUrl
                     ? { '--efnistakn': `url("${iconUrl}")` }

package/Gallery.d.ts

@@ -1,5 +1,5 @@
 import { GalleryItemProps } from './Gallery/_GalleryItem.js';
-import { SeenProp } from './utils/seenEffect.js';
+import { DeprecatedSeenProp } from './utils/seenEffect.js';
 import { SSRSupportProps, WrapperElmProps } from './utils.js';
 export type { GalleryItemProps } from './Gallery/_GalleryItem.js';
 export type GalleryI18n = {
@@ -11,6 +11,6 @@ export type GalleryProps = {
     items: Array<GalleryItemProps>;
     texts?: GalleryI18n;
     lang?: string;
-} & SSRSupportProps & WrapperElmProps & SeenProp;
+} & SSRSupportProps & WrapperElmProps & DeprecatedSeenProp;
 export declare const Gallery: (props: GalleryProps) => JSX.Element;
 export default Gallery;

package/Gallery.js

@@ -21,12 +21,12 @@ const defaultTexts = {
     },
 };
 const Gallery = (props) => {
-    const { items, ssr, startSeen } = props;
+    const { items, ssr } = props;
     const texts = (0, i18n_1.getTexts)(props, defaultTexts);
     const [currentImage, setCurrentImage] = (0, react_1.useState)(undefined);
     const galleryState = (0, react_1.useMemo)(() => ({ items, setCurrentImage, currentImage }), [items, currentImage]);
     return (react_1.default.createElement(_GalleryModalContext_js_1.GalleryModalContext.Provider, { value: galleryState },
-        react_1.default.createElement(_AbstractCarousel_js_1.AbstractCarousel, { bem: "Gallery", items: items, Component: _GalleryItem_js_1.GalleryItem, ssr: ssr, startSeen: startSeen, wrapperProps: props.wrapperProps }),
+        react_1.default.createElement(_AbstractCarousel_js_1.AbstractCarousel, { bem: "Gallery", items: items, Component: _GalleryItem_js_1.GalleryItem, ssr: ssr, wrapperProps: props.wrapperProps }),
         react_1.default.createElement(_GalleryModal_js_1.GalleryModal, Object.assign({}, currentImage, { texts: texts }))));
 };
 exports.Gallery = Gallery;

package/GridBlocks.d.ts

@@ -1,7 +1,7 @@
 import { Efnistakn } from '@reykjavik/hanna-utils/assets';
 import { ButtonProps } from './_abstract/_Button.js';
 import { ImageProps } from './_abstract/_Image.js';
-import { SeenProp } from './utils/seenEffect.js';
+import { DeprecatedSeenProp } from './utils/seenEffect.js';
 import { WrapperElmProps } from './utils.js';
 export type GridBlockItem = {
     title: string;
@@ -18,6 +18,6 @@ export type GridBlockItem = {
 export type GridBlocksProps = {
     blocks: Array<GridBlockItem>;
     twocol?: boolean;
-} & WrapperElmProps & SeenProp;
+} & WrapperElmProps & DeprecatedSeenProp;
 export declare const GridBlocks: (props: GridBlocksProps) => JSX.Element;
 export default GridBlocks;

package/GridBlocks.js

@@ -7,12 +7,10 @@ const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const assets_1 = require("@reykjavik/hanna-utils/assets");
 const _Image_js_1 = require("./_abstract/_Image.js");
 const _Link_js_1 = require("./_abstract/_Link.js");
-const seenEffect_js_1 = require("./utils/seenEffect.js");
 const ButtonTertiary_js_1 = tslib_1.__importDefault(require("./ButtonTertiary.js"));
 const GridBlocks = (props) => {
-    const { blocks, twocol, startSeen, wrapperProps } = props;
-    const [ref] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
-    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('GridBlocks', [twocol && 'twocol'], (wrapperProps || {}).className), ref: ref }), blocks.map(({ title, summary, href, links = [], icon, image }, i) => {
+    const { blocks, twocol, wrapperProps } = props;
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('GridBlocks', [twocol && 'twocol'], (wrapperProps || {}).className) }), blocks.map(({ title, summary, href, links = [], icon, image }, i) => {
         const imageProps = icon ? { src: (0, assets_1.getEfnistaknUrl)(icon) } : image;
         return (react_1.default.createElement("div", { key: i, className: "GridBlocks__item" },
             imageProps && react_1.default.createElement(_Image_js_1.Image, Object.assign({ bem: "GridBlocks__illustration" }, imageProps)),

package/HeroBlock.d.ts

@@ -1,7 +1,7 @@
 import { Illustration } from '@reykjavik/hanna-utils/assets';
 import { ButtonProps } from './_abstract/_Button.js';
 import { ImageProps } from './_abstract/_Image.js';
-import { SeenProp } from './utils/seenEffect.js';
+import { DeprecatedSeenProp } from './utils/seenEffect.js';
 import { WrapperElmProps } from './utils.js';
 type HeroBlockImageProps = {
     illustration: Illustration;
@@ -15,6 +15,6 @@ export type HeroBlockProps = {
     summary: string | JSX.Element;
     primaryButton?: ButtonProps;
     secondaryButton?: ButtonProps;
-} & HeroBlockImageProps & WrapperElmProps & SeenProp;
+} & HeroBlockImageProps & WrapperElmProps & DeprecatedSeenProp;
 export declare const HeroBlock: (props: HeroBlockProps) => JSX.Element;
 export default HeroBlock;

package/HeroBlock.js

@@ -6,15 +6,13 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const assets_1 = require("@reykjavik/hanna-utils/assets");
 const _Image_js_1 = require("./_abstract/_Image.js");
-const seenEffect_js_1 = require("./utils/seenEffect.js");
 const ButtonPrimary_js_1 = tslib_1.__importDefault(require("./ButtonPrimary.js"));
 const ButtonTertiary_js_1 = tslib_1.__importDefault(require("./ButtonTertiary.js"));
 const HeroBlock = (props) => {
-    const { title, summary, illustration, image, primaryButton, secondaryButton, startSeen, wrapperProps, } = props;
+    const { title, summary, illustration, image, primaryButton, secondaryButton, wrapperProps, } = props;
     const hasButtons = Boolean(primaryButton || secondaryButton);
     const imgProps = illustration ? { src: (0, assets_1.getIllustrationUrl)(illustration) } : image;
-    const [ref] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
-    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('HeroBlock', null, (wrapperProps || {}).className), ref: ref }),
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('HeroBlock', null, (wrapperProps || {}).className) }),
         react_1.default.createElement("h1", { className: "HeroBlock__title" }, title),
         react_1.default.createElement(_Image_js_1.Image, Object.assign({ bem: "HeroBlock__image" }, imgProps)),
         react_1.default.createElement("div", { className: "HeroBlock__summary" }, summary),

package/ImageCards.d.ts

@@ -1,11 +1,11 @@
 import { CardListSummaryProps, ImageCardListProps, ImageCardProps as _ImageCardProps } from './_abstract/_CardList.js';
-import { SeenProp } from './utils/seenEffect.js';
+import { DeprecatedSeenProp } from './utils/seenEffect.js';
 import { WrapperElmProps } from './utils.js';
 export type ImageCardsItemProps = _ImageCardProps;
 /** @deprecated Use `ImageCardsItemProps` instead.  (Will be removed in v0.11) */
 export type ImageCardProps = ImageCardsItemProps;
 export type ImageCardsProps = ImageCardListProps & CardListSummaryProps & {
     background?: boolean;
-} & WrapperElmProps & SeenProp;
+} & WrapperElmProps & DeprecatedSeenProp;
 export declare const ImageCards: (props: ImageCardsProps) => JSX.Element;
 export default ImageCards;

package/ImageCards.js

@@ -5,11 +5,9 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const _CardList_js_1 = require("./_abstract/_CardList.js");
-const seenEffect_js_1 = require("./utils/seenEffect.js");
 const ImageCards = (props) => {
-    const { background, startSeen, wrapperProps } = props, cardListProps = tslib_1.__rest(props, ["background", "startSeen", "wrapperProps"]);
-    const [ref] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
-    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('ImageCards', background && 'background', (wrapperProps || {}).className), ref: ref }),
+    const { background, wrapperProps } = props, cardListProps = tslib_1.__rest(props, ["background", "wrapperProps"]);
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('ImageCards', background && 'background', (wrapperProps || {}).className) }),
         react_1.default.createElement(_CardList_js_1.CardList, Object.assign({}, cardListProps, { bemPrefix: "ImageCards", imgPlaceholder: props.imgPlaceholder || true }))));
 };
 exports.ImageCards = ImageCards;

package/InfoBlock.d.ts

@@ -1,5 +1,5 @@
 import { EitherObj } from '@reykjavik/hanna-utils';
-import { SeenProp } from './utils/seenEffect.js';
+import { DeprecatedSeenProp } from './utils/seenEffect.js';
 import { WrapperElmProps } from './utils.js';
 export type InfoBlockProps = {
     title: string;
@@ -9,6 +9,6 @@ export type InfoBlockProps = {
     attention?: string | JSX.Element;
 }, {
     extraInfo?: string | JSX.Element;
-}> & WrapperElmProps & SeenProp;
+}> & WrapperElmProps & DeprecatedSeenProp;
 export declare const InfoBlock: (props: InfoBlockProps) => JSX.Element;
 export default InfoBlock;

package/InfoBlock.js

@@ -4,11 +4,9 @@ exports.InfoBlock = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
-const seenEffect_js_1 = require("./utils/seenEffect.js");
 const InfoBlock = (props) => {
-    const { title, subtitle, items, startSeen, wrapperProps } = props;
-    const [ref] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
-    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('InfoBlock', null, (wrapperProps || {}).className), ref: ref }),
+    const { title, subtitle, items, wrapperProps } = props;
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('InfoBlock', null, (wrapperProps || {}).className) }),
         react_1.default.createElement("h2", { className: "InfoBlock__title" }, title),
         subtitle && react_1.default.createElement("div", { className: "InfoBlock__subtitle" }, subtitle),
         react_1.default.createElement("ul", { className: "InfoBlock__items" }, items.map((item, i) => (react_1.default.createElement("li", { key: i, className: "InfoBlock__item" }, item)))),

package/IslandBlock.d.ts

@@ -1,7 +1,7 @@
 import { Formheimur } from '@reykjavik/hanna-utils/assets';
 import { BlockItem } from './_abstract/_Block.js';
 import { ImageProps } from './_abstract/_Image.js';
-import { SeenProp } from './utils/seenEffect.js';
+import { DeprecatedSeenProp } from './utils/seenEffect.js';
 import { Alignment } from './constants.js';
 import { WrapperElmProps } from './utils.js';
 type IslandBaseBlockProps = {
@@ -21,6 +21,6 @@ type IslandContentBlocks = {
     shapes?: undefined;
     image?: undefined;
 };
-export type IslandBlockProps = IslandBaseBlockProps & (IslandContentBlocks | IslandImageBlock) & WrapperElmProps & SeenProp;
+export type IslandBlockProps = IslandBaseBlockProps & (IslandContentBlocks | IslandImageBlock) & WrapperElmProps & DeprecatedSeenProp;
 export declare const IslandBlock: (props: IslandBlockProps) => JSX.Element;
 export default IslandBlock;