@reykjavik/hanna-react 0.10.75 → 0.10.76

package/CHANGELOG.md

@@ -4,12 +4,15 @@
 
 - ... <!-- Add new lines here. -->
 
-## 0.10.75
+## 0.10.75 – 0.10.76
 
 _2022-12-15_
 
+- feat: Add `setLinkRenderer.pop()` to unset the last custom renderer
 - feat: Add `setLinkRenderer`, exported from `/utils` — to allow hooking
   `hanna-react` into custom routing components
+- fix: Suppress react warning about mixed-case `data-*` attributes
+- fix: Update props type of `LinkRenderer` to use "modern" `ref`
 
 ## 0.10.74
 

package/Heading.js

@@ -14,7 +14,7 @@ const Heading = (props) => {
     const { size = 'normal', align, wide, children } = props;
     const Tag = props.Tag || (props.forceH1 ? 'h1' : 'h2');
     const suppressWarning = process.env.NODE_ENV !== 'production' && Tag === 'h1' ? true : undefined;
-    return (react_1.default.createElement(Tag, { "data-dev-forcedH1": suppressWarning, className: (0, getBemClass_1.default)('Heading', [
+    return (react_1.default.createElement(Tag, { "data-dev-forcedh1": suppressWarning, className: (0, getBemClass_1.default)('Heading', [
             sizes[size],
             align === 'right' && 'align--' + align,
             !align && wide && 'wide',

package/SiteSearchInput.d.ts

@@ -20,5 +20,5 @@ export declare type SiteSearchInputProps = {
     children?: never;
     ssr?: SSRSupport;
 } & WrappingProps & InputElmProps;
-export declare const SiteSearchInput: React.ForwardRefExoticComponent<Pick<SiteSearchInputProps, "form" | "label" | "slot" | "style" | "title" | "key" | "list" | "pattern" | "is" | "value" | "defaultValue" | "id" | "ssr" | "children" | "hidden" | "onClick" | "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 declare const SiteSearchInput: React.ForwardRefExoticComponent<Pick<SiteSearchInputProps, "form" | "label" | "slot" | "style" | "title" | "key" | "list" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "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" | "is" | "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" | "children" | "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" | "onClick" | "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" | "step" | "pattern" | "value" | "ssr" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "size" | "src" | "multiple" | "alt" | "width" | "accept" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "enterKeyHint" | "height" | "max" | "maxLength" | "min" | "minLength" | "onButtonClick" | "buttonText"> & React.RefAttributes<HTMLInputElement>>;
 export default SiteSearchInput;

package/_abstract/_Link.d.ts

@@ -1,11 +1,16 @@
+declare type HTMLAnchorProps = JSX.IntrinsicElements['a'];
+declare type LinkProps = HTMLAnchorProps & {
+    href: string;
+};
+declare type _LinkRenderer_internal = (props: LinkProps) => JSX.Element;
+export declare let Link: _LinkRenderer_internal;
 /**
  * Props object ready to be ..spread onto an anchor element
  * */
-export declare type LinkProps = JSX.IntrinsicElements['a'] & {
-    href: string;
+export declare type LinkRendererProps = Omit<LinkProps, 'ref'> & {
+    ref: Exclude<HTMLAnchorProps['ref'], string>;
 };
-export declare type LinkRenderer = (props: LinkProps) => JSX.Element;
-export declare let Link: LinkRenderer;
+export declare type LinkRenderer = (props: LinkRendererProps) => JSX.Element;
 /**
  * Allows you to set a callback function to wrapp <a href=""/> links with
  * a custom routing component.
@@ -13,15 +18,43 @@ export declare let Link: LinkRenderer;
  * Example use:
  *
  * ```js
- *   import { Link } from 'remix'; // or whatever :-)
+ * import { Link } from 'remix'; // or whatever :-)
+ *
+ * setLinkRenderer((linkProps) =>
+ *   <Link to={linkProps.href}><a {...linkProps} /></Link>);
+ * ```
+ *
+ * The link renderers are pushed to a simple stack, and if you want to unset
+ * a custom renderer, use the `setLinkRenderer.pop()` method to go back to
+ * the previous one. Example:
+ *
+ * ```js
+ * const BlockLinks = (props) =>
+ *   <span className={props.className}>[Link temporarily out of order]</span>
  *
- *   setLinkRenderer((linkProps) =>
- *     <Link to={linkProps.href}><a {...linkProps} /></Link>);
+ * setLinkRenderer(BlockLinks);
+ * // ...render some Hanna components...
+ * setLinkRenderer.pop(); // reset link rendering
  * ```
  *
- * The Default linkrenderer defined as:
+ * The Default linkrenderer is defined as:
+ *
  * ```js
  * 	(linkProps) => React.createElement('a', linkProps);
  * ```
+ *
+ * ...and you can explicitly switch to using this default by passing `undefined`
+ * as an argument — like so:
+ *
+ * ```js
+ * setLinkRenderer(undefined);
+ * ```
  */
-export declare const setLinkRenderer: (linkRenderer: LinkRenderer | undefined) => void;
+export declare const setLinkRenderer: {
+    (linkRenderer: LinkRenderer | undefined): void;
+    /**
+     *
+     */
+    pop(): void;
+};
+export {};

package/_abstract/_Link.js

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const DefaultLinkRenderer = (props) => react_1.default.createElement('a', props);
 exports.Link = DefaultLinkRenderer;
+const history = [];
 /**
  * Allows you to set a callback function to wrapp <a href=""/> links with
  * a custom routing component.
@@ -12,18 +13,57 @@ exports.Link = DefaultLinkRenderer;
  * Example use:
  *
  * ```js
- *   import { Link } from 'remix'; // or whatever :-)
+ * import { Link } from 'remix'; // or whatever :-)
  *
- *   setLinkRenderer((linkProps) =>
- *     <Link to={linkProps.href}><a {...linkProps} /></Link>);
+ * setLinkRenderer((linkProps) =>
+ *   <Link to={linkProps.href}><a {...linkProps} /></Link>);
  * ```
  *
- * The Default linkrenderer defined as:
+ * The link renderers are pushed to a simple stack, and if you want to unset
+ * a custom renderer, use the `setLinkRenderer.pop()` method to go back to
+ * the previous one. Example:
+ *
+ * ```js
+ * const BlockLinks = (props) =>
+ *   <span className={props.className}>[Link temporarily out of order]</span>
+ *
+ * setLinkRenderer(BlockLinks);
+ * // ...render some Hanna components...
+ * setLinkRenderer.pop(); // reset link rendering
+ * ```
+ *
+ * The Default linkrenderer is defined as:
+ *
  * ```js
  * 	(linkProps) => React.createElement('a', linkProps);
  * ```
+ *
+ * ...and you can explicitly switch to using this default by passing `undefined`
+ * as an argument — like so:
+ *
+ * ```js
+ * setLinkRenderer(undefined);
+ * ```
  */
 const setLinkRenderer = (linkRenderer) => {
+    // Here we tell a "white" lie. Nobody uses string-type `ref` attributes
+    // anymore. With this lie we're able to provide nice type signature for modern
+    // use-cases (e.g. Next.js and Remix.run <Link> elements) while still
+    // providing easy to use (easy to Type `JSX.IntrinsicElements['a']` signatures)
+    // internally within the hanna-react codebase.
+    //
+    // This decision may need to be reversed if scream-test results are negative.
+    //
+    // TODO: Add a project-global `HTMLAnchorProps` with modern `ref` and use it
+    // everywhere, and then remove this hack.
     exports.Link = linkRenderer || DefaultLinkRenderer;
+    history.unshift(exports.Link);
 };
 exports.setLinkRenderer = setLinkRenderer;
+/**
+ *
+ */
+exports.setLinkRenderer.pop = () => {
+    history.shift();
+    exports.Link = history[0] || DefaultLinkRenderer;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.75",
+	"version": "0.10.76",
 	"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.20",
 		"@reykjavik/hanna-css": "^0.3.10",
-		"@reykjavik/hanna-utils": "^0.1.18",
+		"@reykjavik/hanna-utils": "^0.2.0",
 		"@types/react": "^17.0.24",
 		"@types/react-autosuggest": "^10.1.0",
 		"@types/react-datepicker": "^3.0.2",

package/utils/useFormatMonitor.js

@@ -41,4 +41,4 @@ const react_1 = require("formatchange/react");
  *  media.leftHamburger
  * ```
  */
-exports.useFormatMonitor = (0, react_1.makeFormatMonitorHook)(hanna_utils_1.formatMonitor);
+exports.useFormatMonitor = (0, react_1.makeFormatMonitorHook)(hanna_utils_1.getFormatMonitor);