@reykjavik/hanna-react 0.10.102 → 0.10.103

package/CHANGELOG.md

@@ -4,6 +4,15 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.103
+
+_2023-09-13_
+
+- feat: Allow `BlingComboProps` values as `blingType` for `NewsHero` and
+  `InfoHero`
+- fix: Correctly pass `ssr` prop down to sub-`Tabs`
+- fix: Respect `ssr` passed to `VerticalTabsTOC`
+
 ## 0.10.102
 
 _2023-09-04_

package/InfoHero.d.ts

@@ -1,3 +1,4 @@
+import { BlingComboProps } from './_abstract/_Blings.js';
 import { ButtonProps } from './_abstract/_Button.js';
 import { ImageProps } from './_abstract/_Image.js';
 import { Alignment } from './constants.js';
@@ -13,7 +14,7 @@ export type InfoHeroProps = {
     footer?: string | JSX.Element;
     align?: Alignment;
     image?: ImageProps;
-    blingType?: BlingOptions;
+    blingType?: BlingOptions | BlingComboProps;
 } & WrapperElmProps;
 export declare const InfoHero: (props: InfoHeroProps) => JSX.Element;
 export default InfoHero;

package/InfoHero.js

@@ -71,8 +71,9 @@ const InfoHero = (props) => {
     const { title, titleBlurb, subTitle, blurb, image, buttons = [], footer, align, blingType, wrapperProps, } = props;
     const showButtons = Boolean(buttons.length);
     const alignment = align && constants_js_1.aligns[align] ? align : 'right';
-    const blings = (blingType && blingOptions[blingType]) ||
-        blingOptions.waves; // default to `waves`
+    const blings = typeof blingType === 'object'
+        ? blingType
+        : (blingType && blingOptions[blingType]) || blingOptions.waves; // default to `waves`
     return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('InfoHero', 'align--' + alignment, (wrapperProps || {}).className) }),
         react_1.default.createElement("div", { className: "InfoHero__content" },
             react_1.default.createElement("h1", { className: "InfoHero__title" }, title),

package/NewsHero.d.ts

@@ -1,3 +1,4 @@
+import { BlingComboProps } from './_abstract/_Blings.js';
 import { ImageProps } from './_abstract/_Image.js';
 import { DeprecatedSeenProp } from './utils/seenEffect.js';
 import { WrapperElmProps } from './utils.js';
@@ -9,7 +10,7 @@ export type NewsHeroProps = {
     /** For custom sharing component  */
     sharing?: boolean | (() => JSX.Element);
     image?: ImageProps;
-    blingType?: BlingOptions;
+    blingType?: BlingOptions | BlingComboProps;
 } & WrapperElmProps & DeprecatedSeenProp;
 export declare const NewsHero: (props: NewsHeroProps) => JSX.Element;
 export default NewsHero;

package/NewsHero.js

@@ -76,7 +76,10 @@ const blingOptions = {
 };
 const NewsHero = (props) => {
     const { title, sharing = true, meta, summary, image, blingType, wrapperProps } = props;
-    const blings = (blingType && blingOptions[blingType]) || (0, hanna_utils_1.getStableRandomItem)(blingOptions, title);
+    const blings = typeof blingType === 'object'
+        ? blingType
+        : (blingType && blingOptions[blingType]) ||
+            (0, hanna_utils_1.getStableRandomItem)(blingOptions, title);
     return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('NewsHero', [!image && 'align--right'], (wrapperProps || {}).className) }),
         react_1.default.createElement("div", { className: "NewsHero__content" },
             react_1.default.createElement("h1", { className: "NewsHero__title" }, title),

package/Tabs.d.ts

@@ -26,7 +26,7 @@ type BaseTabsProps<T extends TabItemProps = TabItemProps> = {
 export type TabsProps<T extends TabItemProps = TabItemProps> = BaseTabsProps<T> & {
     vertical?: boolean;
     /** Optional <Tabs/> block connected to the currently active tab */
-    subTabs?: BaseTabsProps;
+    subTabs?: Omit<BaseTabsProps, 'ssr'>;
 } & WrapperElmProps<null, 'role' | 'aria-label' | 'aria-labelledby'> & DeprecatedSeenProp;
 /** @deprecated  Use `TabsProps` instead  (Will be removed in v0.11) */
 export type TablistProps<T extends TabItemProps = TabItemProps> = TabsProps<T>;

package/Tabs.js

@@ -47,7 +47,7 @@ const renderTab = (tabProps, index, listProps) => {
 // NOTE: This isBrowser tablist behavior is based on
 // https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html
 const Tabs = (props) => {
-    var _a, _b;
+    var _a;
     const { tabs, role, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-controls': listAriaControls, wrapperProps = {}, id = wrapperProps.id, activeIdx, onSetActive, activateOnFocus, ssr, vertical, subTabs, } = props;
     const isBrowser = (0, utils_js_1.useIsBrowserSide)(ssr);
     const [focusedIdx, setFocusedIdx] = (0, react_1.useState)(activeIdx || 0);
@@ -89,7 +89,7 @@ const Tabs = (props) => {
     };
     return (react_1.default.createElement("div", Object.assign({}, props.wrapperProps, { className: (0, classUtils_1.modifiedClass)('Tabs', vertical && 'vertical', wrapperProps.className), role: tabRole && role, id: id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onKeyDown: handleKeydown, "data-sprinkled": isBrowser }),
         tabs.map((tabProps, index) => renderTab(tabProps, index, listProps)),
-        subTabs && (react_1.default.createElement(exports.Tabs, Object.assign({}, subTabs, { role: 'role' in subTabs ? subTabs.role : role, activateOnFocus: (_a = subTabs.activateOnFocus) !== null && _a !== void 0 ? _a : activateOnFocus, ssr: (_b = subTabs.ssr) !== null && _b !== void 0 ? _b : ssr, 
+        subTabs && (react_1.default.createElement(exports.Tabs, Object.assign({}, subTabs, { role: 'role' in subTabs ? subTabs.role : role, activateOnFocus: (_a = subTabs.activateOnFocus) !== null && _a !== void 0 ? _a : activateOnFocus, ssr: ssr, 
             // just to be sure
             vertical: undefined, subTabs: undefined })))));
 };

package/VerticalTabsTOC.js

@@ -67,7 +67,7 @@ const VerticalTabsTOC = (props) => {
             const itemId = getItemId(item);
             const newId = itemId || getItemId((_a = itemsById[itemId].subTabs) === null || _a === void 0 ? void 0 : _a.tabs[0]);
             (0, frag_1.setFrag)(newId);
-        }, tabs: updatedItems, role: "tablist", activateOnFocus: props.activateOnFocus, activeIdx: state.activeIdx, subTabs: state.subTabs }));
+        }, tabs: updatedItems, role: "tablist", activateOnFocus: props.activateOnFocus, activeIdx: state.activeIdx, subTabs: state.subTabs, ssr: props.ssr }));
 };
 exports.VerticalTabsTOC = VerticalTabsTOC;
 exports.default = exports.VerticalTabsTOC;

package/_abstract/_Blings.d.ts

@@ -1,8 +1,9 @@
 import { BlingType } from '@reykjavik/hanna-utils/assets';
 import { BlingProps } from '../Bling.js';
-export type BlingComboProps = Array<Omit<BlingProps, 'type' | 'blingUrl'> & {
+type ConstrainedBlingProps = {
     type: BlingType;
-}>;
+} & Omit<BlingProps, 'type' | 'blingUrl'>;
+export type BlingComboProps = [ConstrainedBlingProps, ...Array<ConstrainedBlingProps>];
 type BlingsProps = {
     blings: BlingComboProps;
     mirror?: boolean;

package/esm/InfoHero.d.ts

@@ -1,3 +1,4 @@
+import { BlingComboProps } from './_abstract/_Blings.js';
 import { ButtonProps } from './_abstract/_Button.js';
 import { ImageProps } from './_abstract/_Image.js';
 import { Alignment } from './constants.js';
@@ -13,7 +14,7 @@ export type InfoHeroProps = {
     footer?: string | JSX.Element;
     align?: Alignment;
     image?: ImageProps;
-    blingType?: BlingOptions;
+    blingType?: BlingOptions | BlingComboProps;
 } & WrapperElmProps;
 export declare const InfoHero: (props: InfoHeroProps) => JSX.Element;
 export default InfoHero;

package/esm/InfoHero.js

@@ -67,8 +67,9 @@ export const InfoHero = (props) => {
     const { title, titleBlurb, subTitle, blurb, image, buttons = [], footer, align, blingType, wrapperProps, } = props;
     const showButtons = Boolean(buttons.length);
     const alignment = align && aligns[align] ? align : 'right';
-    const blings = (blingType && blingOptions[blingType]) ||
-        blingOptions.waves; // default to `waves`
+    const blings = typeof blingType === 'object'
+        ? blingType
+        : (blingType && blingOptions[blingType]) || blingOptions.waves; // default to `waves`
     return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('InfoHero', 'align--' + alignment, (wrapperProps || {}).className) }),
         React.createElement("div", { className: "InfoHero__content" },
             React.createElement("h1", { className: "InfoHero__title" }, title),

package/esm/NewsHero.d.ts

@@ -1,3 +1,4 @@
+import { BlingComboProps } from './_abstract/_Blings.js';
 import { ImageProps } from './_abstract/_Image.js';
 import { DeprecatedSeenProp } from './utils/seenEffect.js';
 import { WrapperElmProps } from './utils.js';
@@ -9,7 +10,7 @@ export type NewsHeroProps = {
     /** For custom sharing component  */
     sharing?: boolean | (() => JSX.Element);
     image?: ImageProps;
-    blingType?: BlingOptions;
+    blingType?: BlingOptions | BlingComboProps;
 } & WrapperElmProps & DeprecatedSeenProp;
 export declare const NewsHero: (props: NewsHeroProps) => JSX.Element;
 export default NewsHero;

package/esm/NewsHero.js

@@ -72,7 +72,10 @@ const blingOptions = {
 };
 export const NewsHero = (props) => {
     const { title, sharing = true, meta, summary, image, blingType, wrapperProps } = props;
-    const blings = (blingType && blingOptions[blingType]) || getStableRandomItem(blingOptions, title);
+    const blings = typeof blingType === 'object'
+        ? blingType
+        : (blingType && blingOptions[blingType]) ||
+            getStableRandomItem(blingOptions, title);
     return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('NewsHero', [!image && 'align--right'], (wrapperProps || {}).className) }),
         React.createElement("div", { className: "NewsHero__content" },
             React.createElement("h1", { className: "NewsHero__title" }, title),

package/esm/Tabs.d.ts

@@ -26,7 +26,7 @@ type BaseTabsProps<T extends TabItemProps = TabItemProps> = {
 export type TabsProps<T extends TabItemProps = TabItemProps> = BaseTabsProps<T> & {
     vertical?: boolean;
     /** Optional <Tabs/> block connected to the currently active tab */
-    subTabs?: BaseTabsProps;
+    subTabs?: Omit<BaseTabsProps, 'ssr'>;
 } & WrapperElmProps<null, 'role' | 'aria-label' | 'aria-labelledby'> & DeprecatedSeenProp;
 /** @deprecated  Use `TabsProps` instead  (Will be removed in v0.11) */
 export type TablistProps<T extends TabItemProps = TabItemProps> = TabsProps<T>;

package/esm/Tabs.js

@@ -43,7 +43,7 @@ const renderTab = (tabProps, index, listProps) => {
 // NOTE: This isBrowser tablist behavior is based on
 // https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html
 export const Tabs = (props) => {
-    var _a, _b;
+    var _a;
     const { tabs, role, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-controls': listAriaControls, wrapperProps = {}, id = wrapperProps.id, activeIdx, onSetActive, activateOnFocus, ssr, vertical, subTabs, } = props;
     const isBrowser = useIsBrowserSide(ssr);
     const [focusedIdx, setFocusedIdx] = useState(activeIdx || 0);
@@ -85,7 +85,7 @@ export const Tabs = (props) => {
     };
     return (React.createElement("div", Object.assign({}, props.wrapperProps, { className: modifiedClass('Tabs', vertical && 'vertical', wrapperProps.className), role: tabRole && role, id: id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onKeyDown: handleKeydown, "data-sprinkled": isBrowser }),
         tabs.map((tabProps, index) => renderTab(tabProps, index, listProps)),
-        subTabs && (React.createElement(Tabs, Object.assign({}, subTabs, { role: 'role' in subTabs ? subTabs.role : role, activateOnFocus: (_a = subTabs.activateOnFocus) !== null && _a !== void 0 ? _a : activateOnFocus, ssr: (_b = subTabs.ssr) !== null && _b !== void 0 ? _b : ssr, 
+        subTabs && (React.createElement(Tabs, Object.assign({}, subTabs, { role: 'role' in subTabs ? subTabs.role : role, activateOnFocus: (_a = subTabs.activateOnFocus) !== null && _a !== void 0 ? _a : activateOnFocus, ssr: ssr, 
             // just to be sure
             vertical: undefined, subTabs: undefined })))));
 };

package/esm/VerticalTabsTOC.js

@@ -63,6 +63,6 @@ export const VerticalTabsTOC = (props) => {
             const itemId = getItemId(item);
             const newId = itemId || getItemId((_a = itemsById[itemId].subTabs) === null || _a === void 0 ? void 0 : _a.tabs[0]);
             setFrag(newId);
-        }, tabs: updatedItems, role: "tablist", activateOnFocus: props.activateOnFocus, activeIdx: state.activeIdx, subTabs: state.subTabs }));
+        }, tabs: updatedItems, role: "tablist", activateOnFocus: props.activateOnFocus, activeIdx: state.activeIdx, subTabs: state.subTabs, ssr: props.ssr }));
 };
 export default VerticalTabsTOC;

package/esm/_abstract/_Blings.d.ts

@@ -1,8 +1,9 @@
 import { BlingType } from '@reykjavik/hanna-utils/assets';
 import { BlingProps } from '../Bling.js';
-export type BlingComboProps = Array<Omit<BlingProps, 'type' | 'blingUrl'> & {
+type ConstrainedBlingProps = {
     type: BlingType;
-}>;
+} & Omit<BlingProps, 'type' | 'blingUrl'>;
+export type BlingComboProps = [ConstrainedBlingProps, ...Array<ConstrainedBlingProps>];
 type BlingsProps = {
     blings: BlingComboProps;
     mirror?: boolean;

package/esm/utils/seenEffect.d.ts

@@ -1,8 +1,8 @@
 import { RefObject } from 'react';
-export declare const DATA_ATTR_NAME = "is-seen";
+export declare const DATA_ATTR_NAME: "is-seen";
 export declare const getObserver: {
     (target: Element, callback?: ((target: Element) => void) | undefined): (() => void) | undefined;
-    DATA_ATTR_NAME: string;
+    DATA_ATTR_NAME: "is-seen";
 };
 declare const effects: {
     /** The default effect type */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.102",
+	"version": "0.10.103",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",

package/utils/seenEffect.d.ts

@@ -1,8 +1,8 @@
 import { RefObject } from 'react';
-export declare const DATA_ATTR_NAME = "is-seen";
+export declare const DATA_ATTR_NAME: "is-seen";
 export declare const getObserver: {
     (target: Element, callback?: ((target: Element) => void) | undefined): (() => void) | undefined;
-    DATA_ATTR_NAME: string;
+    DATA_ATTR_NAME: "is-seen";
 };
 declare const effects: {
     /** The default effect type */