@reykjavik/hanna-react 0.10.67 → 0.10.68

package/ArticleCarousel/_ArticleCarouselCard.d.ts

@@ -10,6 +10,7 @@ export declare type ArticleCarouselCardProps = {
     title: string;
     summary: string;
     href: string;
+    target?: string;
     color?: ColorFamily;
     /** NOTE: if both `color` and `theme` are specified
      * then `color` takes precedence.

package/ArticleCarousel/_ArticleCarouselCard.js

@@ -9,11 +9,11 @@ const _Image_1 = tslib_1.__importDefault(require("../_abstract/_Image"));
 const _Link_1 = require("../_abstract/_Link");
 const constants_1 = require("../constants");
 const ArticleCarouselCard = (props) => {
-    const { date, title, summary, href, moreLabel, color, theme, illustration, image } = props;
+    const { date, title, summary, href, target, moreLabel, color, theme, illustration, image, } = props;
     const photo = image === null || image === void 0 ? void 0 : image.photo;
     const imageProps = illustration ? { src: (0, assets_1.getIllustrationUrl)(illustration) } : image;
     return (react_1.default.createElement("div", { className: "ArticleCarouselCard", "data-color": color && constants_1.colorFamilies[color], "data-color-theme": !color ? theme && constants_1.themeOptions[theme] : undefined },
-        react_1.default.createElement(_Link_1.Link, { className: "ArticleCarouselCard__link", href: href },
+        react_1.default.createElement(_Link_1.Link, { className: "ArticleCarouselCard__link", href: href, target: target },
             ' ',
             react_1.default.createElement(_Image_1.default, Object.assign({ placeholder: true, className: (0, getBemClass_1.default)('ArticleCarouselCard__illustration', photo && 'photo') }, imageProps)),
             react_1.default.createElement("h3", { className: "ArticleCarouselCard__title" }, title),
@@ -21,7 +21,7 @@ const ArticleCarouselCard = (props) => {
         ' ',
         date && react_1.default.createElement("span", { className: "ArticleCarouselCard__date" }, date),
         react_1.default.createElement("div", { className: "ArticleCarouselCard__summary" }, summary),
-        moreLabel && (react_1.default.createElement(_Link_1.Link, { className: "ArticleCarouselCard__morelink", href: href, "aria-label": title },
+        moreLabel && (react_1.default.createElement(_Link_1.Link, { className: "ArticleCarouselCard__morelink", href: href, target: target, "aria-label": title },
             ' ',
             moreLabel,
             ' '))));

package/CHANGELOG.md

@@ -4,6 +4,17 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.68
+
+_2022-09-26_
+
+- feat: Add prop `target` to `ArticleCarouselCardProps`
+- feat: Improve `Selectbox`'s `options` and `onSelected` prop generics
+- feat: Add prop `headingTag` to `ContentArticle` to support `<h1/>`
+- feat: Add prop `forceH1` to `Heading`
+- fix: Mark uncontrolled `TextInput`'s with user input `--filled` after reload
+- fix(ts): Botched re-export of `SelectboxOption*` types
+
 ## 0.10.67
 
 _2022-09-14_

package/ContentArticle.d.ts

@@ -7,6 +7,7 @@ export declare type ContentArticleProps = {
     /** Date, author, etc. */
     meta: ArticleMetaProps['items'];
     headline: string;
+    headlineTag?: 'h1' | 'h2';
     topImage?: ContentImageProps;
     body: ReactNode;
     relatedLinks?: RelatedLinksProps;

package/ContentArticle.js

@@ -13,7 +13,7 @@ const ContentArticle = (props) => {
     const [ref] = (0, seenEffect_1.useSeenEffect)(props.startSeen);
     return (react_1.default.createElement("div", { className: "ContentArticle", ref: ref },
         react_1.default.createElement(ArticleMeta_1.default, { items: props.meta }),
-        react_1.default.createElement(Heading_1.default, null, props.headline),
+        react_1.default.createElement(Heading_1.default, { forceH1: props.headlineTag === 'h1' }, props.headline),
         react_1.default.createElement(TextBlock_1.default, { startSeen: true },
             props.topImage && react_1.default.createElement(ContentImage_1.default, Object.assign({}, props.topImage)),
             props.body),

package/Heading.d.ts

@@ -11,6 +11,11 @@ export declare type HeadingProps = {
     Tag?: 'h2' | 'h3';
     size?: HeadingSize;
     children: ReactNode;
+    /**
+     * Make an exception and render a `<h1/>` element.
+     *
+     * This prop is ignore if the `Tag` prop is defined. */
+    forceH1?: boolean;
 } & ComponentLayoutProps;
 declare const Heading: (props: HeadingProps) => JSX.Element;
 export default Heading;

package/Heading.js

@@ -10,7 +10,8 @@ const sizes = {
     large: 'large',
 };
 const Heading = (props) => {
-    const { size = 'normal', Tag = 'h2', align, wide, children } = props;
+    const { size = 'normal', align, wide, children } = props;
+    const Tag = props.Tag || (props.forceH1 ? 'h1' : 'h2');
     return (react_1.default.createElement(Tag, { className: (0, getBemClass_1.default)('Heading', [
             sizes[size],
             align === 'right' && 'align--' + align,

package/Selectbox.d.ts

@@ -1,11 +1,11 @@
-import type { SelectboxOption as _SelectboxOption, SelectboxOptions as _SelectboxOptions, SelectboxProps as _SelectboxProps } from '@hugsmidjan/react/Selectbox';
+import type { SelectboxProps as _SelectboxProps } from '@hugsmidjan/react/Selectbox';
 import { FormFieldWrappingProps } from './FormField';
-export declare type SelectboxOption = _SelectboxOption;
+export { type SelectboxOption, type SelectboxOptions as SelectboxOptionList, 
 /** @deprecated Use `SelectboxOptionList` instead  (Will be removed in v0.11) */
-export declare type SelectboxOptions = _SelectboxOptions;
-export declare type SelectboxOptionList = _SelectboxOptions;
-export declare type SelectboxProps = FormFieldWrappingProps & Omit<_SelectboxProps, 'bem'> & {
+type SelectboxOptions, } from '@hugsmidjan/react/Selectbox';
+declare type OptionOrValue = _SelectboxProps['options'][0];
+export declare type SelectboxProps<O extends OptionOrValue = OptionOrValue> = FormFieldWrappingProps & Omit<_SelectboxProps<O>, 'bem'> & {
     small?: boolean;
 };
-declare const Selectbox: (props: SelectboxProps) => JSX.Element;
+declare const Selectbox: <O extends import("@hugsmidjan/react/__types/Selectbox.privates").OptionOrValue>(props: SelectboxProps<O>) => JSX.Element;
 export default Selectbox;

package/TextInput.js

@@ -6,7 +6,8 @@ const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/g
 const FormField_1 = tslib_1.__importDefault(require("./FormField"));
 const TextInput = (props) => {
     var _a;
-    const { className, label, assistText, hideLabel, disabled, readOnly, invalid, errorMessage, required, reqText, id, onChange, small, type, ssr, inputRef } = props, inputElementProps = tslib_1.__rest(props, ["className", "label", "assistText", "hideLabel", "disabled", "readOnly", "invalid", "errorMessage", "required", "reqText", "id", "onChange", "small", "type", "ssr", "inputRef"]);
+    const _inputRef = (0, react_1.useRef)(null);
+    const { className, label, assistText, hideLabel, disabled, readOnly, invalid, errorMessage, required, reqText, id, onChange, small, type, ssr, inputRef = _inputRef } = props, inputElementProps = tslib_1.__rest(props, ["className", "label", "assistText", "hideLabel", "disabled", "readOnly", "invalid", "errorMessage", "required", "reqText", "id", "onChange", "small", "type", "ssr", "inputRef"]);
     const { value, defaultValue, placeholder } = inputElementProps;
     const [hasValue, setHasValue] = (0, react_1.useState)(undefined);
     const filled = !!((_a = value !== null && value !== void 0 ? value : hasValue) !== null && _a !== void 0 ? _a : !!defaultValue);
@@ -22,6 +23,12 @@ const TextInput = (props) => {
                 // TypeScript is silly sometimes.
                 e);
         };
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) {
+            setHasValue(true);
+        }
+    }, []);
     return (react_1.default.createElement(FormField_1.default, { className: (0, getBemClass_1.default)('TextInput', modifiers, className), ssr: ssr, small: small, label: label, empty: empty, filled: filled, assistText: assistText, hideLabel: hideLabel, disabled: disabled, readOnly: readOnly, invalid: invalid, errorMessage: errorMessage, required: required, reqText: reqText, id: id, renderInput: (className, inputProps, addFocusProps) => multiline ? (react_1.default.createElement("textarea", Object.assign({ className: className.input, onChange: _onChange }, inputProps, addFocusProps(inputElementProps), { ref: inputRef }))) : (react_1.default.createElement("input", Object.assign({ className: className.input, onChange: _onChange, type: type }, inputProps, addFocusProps(inputElementProps), { ref: inputRef }))) }));
 };
 exports.default = TextInput;

package/package.json

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