@reykjavik/hanna-react 0.10.67 → 0.10.69

package/AccordionList.d.ts

@@ -1,6 +1,6 @@
 import { SSRSupport } from '@hugsmidjan/react/hooks';
 import { SeenProp } from './utils/seenEffect';
-declare type AccordionListItemProps = {
+export declare type AccordionListItemProps = {
     title: string | JSX.Element;
     content: string | JSX.Element | undefined;
     id?: string;
@@ -8,10 +8,18 @@ declare type AccordionListItemProps = {
 };
 export declare type AccordionListProps = {
     items: Array<AccordionListItemProps>;
-    ssr?: SSRSupport;
-    wide?: boolean;
-    /** Index of those items that should start open */
+    /** 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;
 declare const AccordionList: (props: AccordionListProps) => JSX.Element;
 export default AccordionList;

package/AccordionList.js

@@ -5,25 +5,35 @@ const react_1 = tslib_1.__importStar(require("react"));
 const hooks_1 = require("@hugsmidjan/react/hooks");
 const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
 const seenEffect_1 = require("./utils/seenEffect");
+const utils_1 = require("./utils");
 const AccordionListItem = (props) => {
-    const { title, content, id, disabled = false, ssr } = props;
-    // TODO: Add controlled state support to this component, and then switch
-    // to usw the hooks exported from `utils/useMixecControlState.ts`
-    const [open, setOpen] = (0, react_1.useState)(props.defaultOpen);
+    const { title, content, id, disabled = false, ssr, open, onToggle } = props;
     const defaultOpen = (0, react_1.useRef)(props.defaultOpen);
     const domid = (0, hooks_1.useDomid)();
     const isBrowser = (0, hooks_1.useIsBrowserSide)(ssr);
     const itemDisabled = (isBrowser && disabled) || !content;
     return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('AccordionList__item', [itemDisabled && 'disabled']), id: id, "data-start-open": defaultOpen.current, "data-sprinkled": isBrowser },
-        react_1.default.createElement("h3", { className: "AccordionList__title" }, isBrowser ? (react_1.default.createElement("button", { type: "button", className: "AccordionList__button", "aria-controls": domid, "aria-expanded": open || undefined, onClick: () => {
-                setOpen(!open);
-            }, disabled: itemDisabled }, title)) : (title)),
+        react_1.default.createElement("h3", { className: "AccordionList__title" }, isBrowser ? (react_1.default.createElement("button", { type: "button", className: "AccordionList__button", "aria-controls": domid, "aria-expanded": open || undefined, onClick: onToggle, disabled: itemDisabled }, title)) : (title)),
         react_1.default.createElement("div", { id: isBrowser && domid, className: "AccordionList__content", hidden: isBrowser && (!open || itemDisabled) }, content)));
 };
-// ---------------------------------------------------------------------------
 const AccordionList = (props) => {
-    const { items, ssr, wide, defaultOpen, startSeen } = props;
+    const { items, ssr, wide, startSeen, defaultOpen } = props;
     const [ref] = (0, seenEffect_1.useSeenEffect)(startSeen);
-    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('AccordionList', [wide && 'wide']), ref: ref }, items.map((item, i) => (react_1.default.createElement(AccordionListItem, Object.assign({ key: i }, item, { ssr: ssr, defaultOpen: defaultOpen && defaultOpen.includes(i) }))))));
+    const [open, setOpenArray, mode] = (0, utils_1.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_1.default.createElement("div", { className: (0, getBemClass_1.default)('AccordionList', [wide && 'wide']), ref: ref },
+        String(open),
+        react_1.default.createElement("br", null),
+        String(mode),
+        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.default = AccordionList;

package/ArticleCards.d.ts

@@ -1,6 +1,6 @@
-import type { Resolve } from '@reykjavik/hanna-utils';
+import type { Cleanup } from '@reykjavik/hanna-utils';
 import { ImageCardListProps, ImageCardProps } from './_abstract/_CardList';
 export declare type ArticleCardProps = ImageCardProps;
-export declare type ArticleCardsProps = Resolve<Pick<ImageCardListProps, 'cards' | 'imgPlaceholder'>>;
+export declare type ArticleCardsProps = Cleanup<Pick<ImageCardListProps, 'cards' | 'imgPlaceholder'>>;
 declare const ArticleCards: (props: ArticleCardsProps) => JSX.Element;
 export default ArticleCards;

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,25 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.69
+
+_2022-09-27_
+
+- feat: Add controlled props `open` and `onToggle` to `AccordionList` — it now
+  supports either [controlled or uncontrolled](./README-conventions.md) use.
+- fix: Squash `useMixedControlState` bugs/misbehavior and improve its typing
+
+## 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/SiteSearchInput.d.ts

@@ -20,5 +20,5 @@ export declare type SiteSearchInputProps = {
     children?: undefined;
     ssr?: SSRSupport;
 } & WrappingProps & InputElmProps;
-declare const SiteSearchInput: React.ForwardRefExoticComponent<Pick<SiteSearchInputProps, "title" | "id" | "ssr" | "form" | "label" | "slot" | "style" | "pattern" | "children" | "hidden" | "onClick" | "is" | "key" | "list" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "size" | "step" | "src" | "multiple" | "alt" | "width" | "accept" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "enterKeyHint" | "height" | "max" | "maxLength" | "min" | "minLength" | "onButtonClick" | "buttonText"> & React.RefAttributes<HTMLInputElement>>;
+declare const SiteSearchInput: React.ForwardRefExoticComponent<Pick<SiteSearchInputProps, "form" | "label" | "slot" | "style" | "title" | "pattern" | "is" | "value" | "defaultValue" | "id" | "ssr" | "children" | "hidden" | "onClick" | "key" | "list" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "size" | "step" | "src" | "multiple" | "alt" | "width" | "accept" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "enterKeyHint" | "height" | "max" | "maxLength" | "min" | "minLength" | "onButtonClick" | "buttonText"> & React.RefAttributes<HTMLInputElement>>;
 export default SiteSearchInput;

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.69",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",
@@ -16,7 +16,7 @@
 		"@hugsmidjan/qj": "^4.10.2",
 		"@hugsmidjan/react": "^0.4.17",
 		"@reykjavik/hanna-css": "^0.3.7",
-		"@reykjavik/hanna-utils": "^0.1.13",
+		"@reykjavik/hanna-utils": "^0.1.14",
 		"@types/react": "^17.0.24",
 		"@types/react-autosuggest": "^10.1.0",
 		"@types/react-datepicker": "^3.0.2",

package/utils/useMixedControlState.d.ts

@@ -1,4 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
+declare type CtrlMode = 'controlled' | 'uncontrolled' | undefined;
+declare type RetArray<R> = [value: R, setValue: Dispatch<SetStateAction<R>>, mode: CtrlMode];
 declare type DefaultProp<N extends string> = `default${Capitalize<N>}`;
 declare type PropPair<N extends string> = N | DefaultProp<N>;
 declare type StrictKeys<P extends Record<string, unknown>, N extends string> = PropPair<N> extends keyof P ? P : {
@@ -48,28 +50,88 @@ declare type StrictKeys<P extends Record<string, unknown>, N extends string> = P
  * };
  * ```
  */
-export declare const useMixedControlState: {
-    <N extends string, P extends { [x in PropPair<N>]?: unknown; }>(props: StrictKeys<P, N>, name: N, defaultDefault?: P[`default${Capitalize<N>}`] | undefined): [StrictKeys<P, N>[N] | StrictKeys<P, N>[`default${Capitalize<N>}`] | undefined, Dispatch<SetStateAction<StrictKeys<P, N>[N] | StrictKeys<P, N>[`default${Capitalize<N>}`] | undefined>>];
-    /**
-     * a slightly lower-level hook alternative to
-     * `useMixedControlState(props, name)`, for cases where you don't
-     * have a neatly-/conventionally-shaped props object, or if you need to do
-     * some sort of pre-processing of either prop value.
-     *
-     * ```tsx
-     * import { useMixedControlState } from '@reykjavik/hanna-react/utils';
-     *
-     * declare const props: { visible?: boolean; defaultVisible?: boolean };
-     *
-     * const [vislble, setVisible] = useMixedControlState.raw(
-     *    props.vislble,
-     *    props.defaultVisible,
-     *    'visible'
-     * );
-     * // has the same effect as this:
-     * const [visible, setVisible] = useMixedControlState(props, 'visible');
-     * ```
-     */
-    raw<C, U>(value: C, defaultValue: U, warningPropName?: string): [C | U, Dispatch<SetStateAction<C | U>>];
-};
+export declare function useMixedControlState<N extends string, P extends {
+    [x in PropPair<N>]?: unknown;
+}, D extends Exclude<V, undefined>, V = P[DefaultProp<N>] | P[N]>(
+/** The props object of your component  */
+props: StrictKeys<P, N>, // StrictKeys give nicer error messages to users.
+/** Name of the prop for the controlled value */
+name: N, 
+/**
+ * A last-resort default value to use instead of `undefined`.  \
+ * **NOTE:** All post-factum changes/updates to this value are ignored!
+ */
+emptyValue: D): RetArray<Exclude<V, undefined>>;
+export declare function useMixedControlState<N extends string, P extends {
+    [x in PropPair<N>]?: unknown;
+}, D extends Exclude<V, undefined>, V = P[DefaultProp<N>] | P[N]>(
+/** The props object of your component  */
+props: StrictKeys<P, N>, // StrictKeys give nicer error messages to users.
+/** Name of the prop for the controlled value */
+name: N, 
+/**
+ * A last-resort default value to use instead of `undefined`.  \
+ * **NOTE:** All post-factum changes/updates to this value are ignored!
+ */
+emptyValue?: D): RetArray<V>;
+export declare namespace useMixedControlState {
+    var $warningLogger: ((message: string) => void) | undefined;
+    var raw: typeof useRaw;
+}
+/**
+ * A slightly lower-level hook alternative to
+ * `useMixedControlState(props, name)`, for cases where you don't
+ * have a neatly-/conventionally-shaped props object, or if you need to do
+ * some sort of pre-processing of either prop value.
+ *
+ * ```tsx
+ * import { useMixedControlState } from '@reykjavik/hanna-react/utils';
+ *
+ * declare const props: { visible?: boolean; defaultVisible?: boolean };
+ *
+ * const [vislble, setVisible] = useMixedControlState.raw(
+ *    props.vislble,
+ *    props.defaultVisible,
+ *    'visible'
+ * );
+ * // has the same effect as this:
+ * const [visible, setVisible] = useMixedControlState(props, 'visible');
+ * ```
+ */
+declare function useRaw<C, U, D extends Exclude<C | U, undefined>>(
+/** Controlled value. */
+value: C, 
+/** Default/initial value for uncontrolled use. */
+defaultValue: U, 
+/**
+ * Prop name to display more meaningful warnings about when value
+ * and defaultValue are both defined, or if the component switches
+ * between modes mid-stream.
+ *
+ * If left undefined, the hook emits more generic/vague warnings
+ */
+warningPropName: string | undefined, 
+/**
+ * A last-resort default value to use instead of `undefined`.  \
+ * **NOTE:** All post-factum changes/updates to this value are ignored!
+ */
+emptyValue: D): RetArray<Exclude<C | U, undefined>>;
+declare function useRaw<C, U, D extends C | U>(
+/** Controlled value. */
+value: C, 
+/** Default/initial value for uncontrolled use. */
+defaultValue: U, 
+/**
+ * Prop name to display more meaningful warnings about when value
+ * and defaultValue are both defined, or if the component switches
+ * between modes mid-stream.
+ *
+ * If left undefined, the hook emits more generic/vague warnings
+ */
+warningPropName?: string, 
+/**
+ * A last-resort default value to use instead of `undefined`.  \
+ * **NOTE:** All post-factum changes/updates to this value are ignored!
+ */
+emptyValue?: D): RetArray<C | U>;
 export {};

package/utils/useMixedControlState.js

@@ -4,151 +4,87 @@ exports.useMixedControlState = void 0;
 const react_1 = require("react");
 const hanna_utils_1 = require("@reykjavik/hanna-utils");
 // ---------------------------------------------------------------------------
-/**
- * State hook to simplify dealing with a the complexities of supporting a mixture
- * of "controlled" and "uncontrolled" component state.
- *
- * The returned value and dispatcher/setter function return the controlled
- * `value`, but gracefully handle changes in defaultValue in uncontrolled mode,
- * and handles (unexpected) "mode-changes" in a predictable manner.
- *
- * It assumes (by default) that the calling component has
- * a pair of props following the naming convention `foo` and `defaultFoo` —
- * similar to React's own `<input/>` and `<select/>` HTML components warn about
- * their `value` and `defaultValue` props being misused.
- *
- * NOTE: This hook also exposes a slightly lower-level helper hook
- * `useMixedControlState.raw(value, defaultValue)`, for cases where you don't
- * have a neatly-shaped props object as described above, or you need to do
- * some sort of pre-processing of either prop value.
- *
- * ```tsx
- * import React, { FC, ReactNode } from 'react';
- * import { useMixedControlState } from '@reykjavik/hanna-react/utils';
- *
- * type FooBarProps = {
- *   visible?: boolean;
- *   onChange?: (newVisible: boolean) => void;
- *   defaultVisible?: boolean;
- * };
- *
- * export const FooBar: FC<FooBarProps> = (props) => {
- *   const [visible, setVisible] = useMixedControlState(props, 'visible', true);
- *
- *   const handleToggle = () => {
- *     props.onChange?.(!visible);
- *     setVisible(!visible);
- *   };
- *   return (
- *     <div>
- *       <button onClick={handleToggle}>Toggle</button>
- *       <div hidden={!visible}>{props.children}</div>
- *     </div>
- *   );
- * };
- * ```
- */
-const useMixedControlState = (
-/** The props object of your component  */
-props, 
-/** Name of the prop for the controlled value */
-name, 
-/**
- * A last-resort default value for the defaultValue prop
- *
- * Used as uncontrolled default if the `default${capitalize(name)}` value
- * of `props` is missing/undefined.
- */
-defaultDefault) => {
-    let defaultValue = props[`default${(0, hanna_utils_1.capitalize)(name)}`];
-    if (defaultValue === undefined) {
-        defaultValue = defaultDefault;
+function useMixedControlState(props, name, emptyValue) {
+    const value = props[name];
+    const defaultValue = props[`default${(0, hanna_utils_1.capitalize)(name)}`];
+    return useMixedControlState.raw(value, defaultValue, name, emptyValue);
+}
+exports.useMixedControlState = useMixedControlState;
+// ===========================================================================
+//
+//
+// ===========================================================================
+const defaultWarningLogger = (message) => console.error(message);
+useMixedControlState.$warningLogger = defaultWarningLogger;
+/** Validate sane use of the component, during development. */
+const validateSaneUse = ({ warningPropName, value, defaultValue, lastMode, }) => {
+    const warn = useMixedControlState.$warningLogger || defaultWarningLogger;
+    if (value !== undefined && defaultValue !== undefined) {
+        warn(`WARNING:` +
+            ` Don't mix` +
+            (warningPropName
+                ? ` \`${warningPropName}\` and \`default${(0, hanna_utils_1.capitalize)(warningPropName)}\` props`
+                : 'controlled and uncontrolled mode') +
+            `\n` +
+            `Use one or the other.`);
+        return;
+    }
+    const C_to_U = lastMode === 'controlled' && defaultValue !== undefined;
+    const U_to_C = lastMode === 'uncontrolled' && value !== undefined;
+    if (C_to_U || U_to_C) {
+        warn(`WARNING:` +
+            (C_to_U
+                ? `A component seems to be attempting to change ` +
+                    `from controlled to uncontrolled mode. ` +
+                    `This is not possible.`
+                : `A component is changing ` + `from uncontrolled to controlled mode.`) +
+            `\n` +
+            `Decide between using ` +
+            (warningPropName
+                ? `\`${warningPropName}\` (controlled) prop` +
+                    ` OR \`default${(0, hanna_utils_1.capitalize)(warningPropName)}\` (uncontrolled)`
+                : `either controlled OR uncontrolled mode`) +
+            ` for the lifetime of the component.`);
     }
-    return exports.useMixedControlState.raw(props[name], defaultValue, name);
 };
-exports.useMixedControlState = useMixedControlState;
 // ---------------------------------------------------------------------------
-/**
- * a slightly lower-level hook alternative to
- * `useMixedControlState(props, name)`, for cases where you don't
- * have a neatly-/conventionally-shaped props object, or if you need to do
- * some sort of pre-processing of either prop value.
- *
- * ```tsx
- * import { useMixedControlState } from '@reykjavik/hanna-react/utils';
- *
- * declare const props: { visible?: boolean; defaultVisible?: boolean };
- *
- * const [vislble, setVisible] = useMixedControlState.raw(
- *    props.vislble,
- *    props.defaultVisible,
- *    'visible'
- * );
- * // has the same effect as this:
- * const [visible, setVisible] = useMixedControlState(props, 'visible');
- * ```
- */
-exports.useMixedControlState.raw = (
-/** Controlled value. */
-value, 
-/** Default/initial value for uncontrolled use. */
-defaultValue, 
-/**
- * Prop name to display more meaningful warnings about when value
- * and defaultValue are both defined, or if the component switches
- * between modes mid-stream.
- *
- * If left undefined, the hook emits more generic/vague warnings
- */
-warningPropName) => {
-    /* eslint-disable react-hooks/rules-of-hooks */
-    const meta = (0, react_1.useRef)({
+function useRaw(value, defaultValue, warningPropName, emptyValue) {
+    const metaRef = (0, react_1.useRef)({
         lastMode: undefined,
         lastDefault: defaultValue,
         // lastValue: value,
-    }).current;
-    const { lastMode, lastDefault /*,  lastValue  */ } = meta;
-    const mode = value !== undefined
-        ? 'controlled'
-        : defaultValue !== undefined
-            ? 'uncontrolled'
-            : lastMode;
-    // Validate sane use of the component, during development.
+        _emptyValue: emptyValue,
+    });
+    const meta = metaRef.current;
+    const { lastMode, lastDefault, _emptyValue /*,  lastValue  */ } = meta;
     if (process.env.NODE_ENV !== 'production') {
-        if (value !== undefined && defaultValue !== undefined) {
-            console.error(`WARNING:` +
-                ` Don't mix` +
-                (warningPropName
-                    ? ` \`${warningPropName}\` and \`default${(0, hanna_utils_1.capitalize)(warningPropName)}\` props`
-                    : 'controlled and uncontrolled mode') +
-                `\n` +
-                `Use one or the other.`);
-        }
-        if (lastMode && lastMode !== mode) {
-            console.error(`WARNING:` +
-                `A component is changing from ${lastMode} to ${mode} mode.` +
-                `\n` +
-                (warningPropName
-                    ? `Decide between using \`${warningPropName}\` (controlled) prop` +
-                        ` OR \`default${(0, hanna_utils_1.capitalize)(warningPropName)}\` (uncontrolled)`
-                    : `Decide between using either controlled OR uncontrolled mode`) +
-                ` for the lifetime of the component.`);
-        }
+        validateSaneUse({ warningPropName, value, defaultValue, lastMode });
     }
-    const [localValue, _setLocalValue] = (0, react_1.useState)(defaultValue);
+    const mode = lastMode === 'controlled'
+        ? 'controlled'
+        : value !== undefined
+            ? 'controlled'
+            : defaultValue !== undefined
+                ? 'uncontrolled'
+                : lastMode;
+    const [localValue, _setLocalValue] = (0, react_1.useState)(defaultValue !== undefined ? defaultValue : _emptyValue);
     const setLocalValue = (0, react_1.useCallback)((newState) => {
         if (mode === 'controlled' && typeof newState === 'function') {
-            // @ts-expect-error  (TS needs a bit of help here, it seems,
-            // because the C and U gernerics are too …err… generic?)
-            const action = newState;
-            newState = action(value);
+            newState = newState(value !== undefined ? value : _emptyValue);
         }
-        _setLocalValue.$called = true;
-        _setLocalValue(newState);
-    }, [value, mode]);
+        metaRef.current.lastMode = mode || 'uncontrolled';
+        const setterFn = typeof newState === 'function' ? newState : () => newState;
+        _setLocalValue((prevState) => {
+            let newState = setterFn(prevState);
+            newState = newState !== undefined ? newState : _emptyValue;
+            if (prevState !== newState) {
+                _setLocalValue.$isCalled = true;
+            }
+            return newState;
+        });
+    }, [value, mode, _emptyValue]);
     // The mode can change but it should never go back to `undefined` state
-    // this is similar to what React does with it's <input> and <select>
-    // elements.
+    // this is similar to what React does with <input/> and <select/> elements.
     // In dev-mode an WARNING gets logged whenever the mode changes.
     meta.lastMode = mode;
     if (mode === 'uncontrolled') {
@@ -157,12 +93,13 @@ warningPropName) => {
         // controlled mode. Something that should ideally not happen
         // but is worth keeping as sane as possible nonetheless.
         meta.lastDefault = defaultValue;
-        if (!_setLocalValue.$called && defaultValue !== lastDefault) {
-            _setLocalValue(defaultValue); // Immediately exits and re-renders the component
+        if (!_setLocalValue.$isCalled && defaultValue !== lastDefault) {
+            // Immediately exits and re-renders the component
+            _setLocalValue(defaultValue !== undefined ? defaultValue : _emptyValue);
         }
     }
     // meta.lastValue = value;
     const retValue = mode === 'controlled' ? value : localValue;
-    return [retValue, setLocalValue];
-    /* eslint-enable react-hooks/rules-of-hooks */
-};
+    return [retValue, setLocalValue, mode];
+}
+useMixedControlState.raw = useRaw;