@reykjavik/hanna-react 0.10.74 → 0.10.76
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +10 -2
- package/Heading.js +1 -1
- package/SiteSearchInput.d.ts +1 -1
- package/_abstract/_Link.d.ts +42 -9
- package/_abstract/_Link.js +44 -4
- package/package.json +2 -2
- package/utils/config.d.ts +2 -0
- package/utils/config.js +8 -0
- package/utils/useFormatMonitor.d.ts +1 -1
- package/utils/useFormatMonitor.js +1 -1
- package/utils/useGetSVGtext.d.ts +4 -0
- package/utils/useGetSVGtext.js +4 -0
- package/utils.d.ts +1 -0
- package/utils.js +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,16 @@
|
|
|
4
4
|
|
|
5
5
|
- ... <!-- Add new lines here. -->
|
|
6
6
|
|
|
7
|
+
## 0.10.75 – 0.10.76
|
|
8
|
+
|
|
9
|
+
_2022-12-15_
|
|
10
|
+
|
|
11
|
+
- feat: Add `setLinkRenderer.pop()` to unset the last custom renderer
|
|
12
|
+
- feat: Add `setLinkRenderer`, exported from `/utils` — to allow hooking
|
|
13
|
+
`hanna-react` into custom routing components
|
|
14
|
+
- fix: Suppress react warning about mixed-case `data-*` attributes
|
|
15
|
+
- fix: Update props type of `LinkRenderer` to use "modern" `ref`
|
|
16
|
+
|
|
7
17
|
## 0.10.74
|
|
8
18
|
|
|
9
19
|
_2022-12-12_
|
|
@@ -405,8 +415,6 @@ _2022-02-15_
|
|
|
405
415
|
|
|
406
416
|
_2022-02-08_
|
|
407
417
|
|
|
408
|
-
- feat: Add `setLinkRenderer`, exported from `utils/config` — to allow hooking
|
|
409
|
-
`hanna-react` into custom routing components
|
|
410
418
|
- feat: Add optional prop `lang` to `MegaMenuItem` (and export that type)
|
|
411
419
|
- feat(ts): Export type `MainMenuSeparator`
|
|
412
420
|
- fix: `ContactBubble` not reacting/appearing on scroll on mobile browsers
|
package/Heading.js
CHANGED
|
@@ -14,7 +14,7 @@ const Heading = (props) => {
|
|
|
14
14
|
const { size = 'normal', align, wide, children } = props;
|
|
15
15
|
const Tag = props.Tag || (props.forceH1 ? 'h1' : 'h2');
|
|
16
16
|
const suppressWarning = process.env.NODE_ENV !== 'production' && Tag === 'h1' ? true : undefined;
|
|
17
|
-
return (react_1.default.createElement(Tag, { "data-dev-
|
|
17
|
+
return (react_1.default.createElement(Tag, { "data-dev-forcedh1": suppressWarning, className: (0, getBemClass_1.default)('Heading', [
|
|
18
18
|
sizes[size],
|
|
19
19
|
align === 'right' && 'align--' + align,
|
|
20
20
|
!align && wide && 'wide',
|
package/SiteSearchInput.d.ts
CHANGED
|
@@ -20,5 +20,5 @@ export declare type SiteSearchInputProps = {
|
|
|
20
20
|
children?: never;
|
|
21
21
|
ssr?: SSRSupport;
|
|
22
22
|
} & WrappingProps & InputElmProps;
|
|
23
|
-
export declare const SiteSearchInput: React.ForwardRefExoticComponent<Pick<SiteSearchInputProps, "form" | "label" | "slot" | "style" | "title" | "
|
|
23
|
+
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>>;
|
|
24
24
|
export default SiteSearchInput;
|
package/_abstract/_Link.d.ts
CHANGED
|
@@ -1,11 +1,16 @@
|
|
|
1
|
+
declare type HTMLAnchorProps = JSX.IntrinsicElements['a'];
|
|
2
|
+
declare type LinkProps = HTMLAnchorProps & {
|
|
3
|
+
href: string;
|
|
4
|
+
};
|
|
5
|
+
declare type _LinkRenderer_internal = (props: LinkProps) => JSX.Element;
|
|
6
|
+
export declare let Link: _LinkRenderer_internal;
|
|
1
7
|
/**
|
|
2
8
|
* Props object ready to be ..spread onto an anchor element
|
|
3
9
|
* */
|
|
4
|
-
export declare type
|
|
5
|
-
|
|
10
|
+
export declare type LinkRendererProps = Omit<LinkProps, 'ref'> & {
|
|
11
|
+
ref: Exclude<HTMLAnchorProps['ref'], string>;
|
|
6
12
|
};
|
|
7
|
-
export declare type LinkRenderer = (props:
|
|
8
|
-
export declare let Link: LinkRenderer;
|
|
13
|
+
export declare type LinkRenderer = (props: LinkRendererProps) => JSX.Element;
|
|
9
14
|
/**
|
|
10
15
|
* Allows you to set a callback function to wrapp <a href=""/> links with
|
|
11
16
|
* a custom routing component.
|
|
@@ -13,15 +18,43 @@ export declare let Link: LinkRenderer;
|
|
|
13
18
|
* Example use:
|
|
14
19
|
*
|
|
15
20
|
* ```js
|
|
16
|
-
*
|
|
21
|
+
* import { Link } from 'remix'; // or whatever :-)
|
|
22
|
+
*
|
|
23
|
+
* setLinkRenderer((linkProps) =>
|
|
24
|
+
* <Link to={linkProps.href}><a {...linkProps} /></Link>);
|
|
25
|
+
* ```
|
|
26
|
+
*
|
|
27
|
+
* The link renderers are pushed to a simple stack, and if you want to unset
|
|
28
|
+
* a custom renderer, use the `setLinkRenderer.pop()` method to go back to
|
|
29
|
+
* the previous one. Example:
|
|
30
|
+
*
|
|
31
|
+
* ```js
|
|
32
|
+
* const BlockLinks = (props) =>
|
|
33
|
+
* <span className={props.className}>[Link temporarily out of order]</span>
|
|
17
34
|
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
35
|
+
* setLinkRenderer(BlockLinks);
|
|
36
|
+
* // ...render some Hanna components...
|
|
37
|
+
* setLinkRenderer.pop(); // reset link rendering
|
|
20
38
|
* ```
|
|
21
39
|
*
|
|
22
|
-
* The Default linkrenderer defined as:
|
|
40
|
+
* The Default linkrenderer is defined as:
|
|
41
|
+
*
|
|
23
42
|
* ```js
|
|
24
43
|
* (linkProps) => React.createElement('a', linkProps);
|
|
25
44
|
* ```
|
|
45
|
+
*
|
|
46
|
+
* ...and you can explicitly switch to using this default by passing `undefined`
|
|
47
|
+
* as an argument — like so:
|
|
48
|
+
*
|
|
49
|
+
* ```js
|
|
50
|
+
* setLinkRenderer(undefined);
|
|
51
|
+
* ```
|
|
26
52
|
*/
|
|
27
|
-
export declare const setLinkRenderer:
|
|
53
|
+
export declare const setLinkRenderer: {
|
|
54
|
+
(linkRenderer: LinkRenderer | undefined): void;
|
|
55
|
+
/**
|
|
56
|
+
*
|
|
57
|
+
*/
|
|
58
|
+
pop(): void;
|
|
59
|
+
};
|
|
60
|
+
export {};
|
package/_abstract/_Link.js
CHANGED
|
@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
|
|
|
5
5
|
const react_1 = tslib_1.__importDefault(require("react"));
|
|
6
6
|
const DefaultLinkRenderer = (props) => react_1.default.createElement('a', props);
|
|
7
7
|
exports.Link = DefaultLinkRenderer;
|
|
8
|
+
const history = [];
|
|
8
9
|
/**
|
|
9
10
|
* Allows you to set a callback function to wrapp <a href=""/> links with
|
|
10
11
|
* a custom routing component.
|
|
@@ -12,18 +13,57 @@ exports.Link = DefaultLinkRenderer;
|
|
|
12
13
|
* Example use:
|
|
13
14
|
*
|
|
14
15
|
* ```js
|
|
15
|
-
*
|
|
16
|
+
* import { Link } from 'remix'; // or whatever :-)
|
|
16
17
|
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
18
|
+
* setLinkRenderer((linkProps) =>
|
|
19
|
+
* <Link to={linkProps.href}><a {...linkProps} /></Link>);
|
|
19
20
|
* ```
|
|
20
21
|
*
|
|
21
|
-
* The
|
|
22
|
+
* The link renderers are pushed to a simple stack, and if you want to unset
|
|
23
|
+
* a custom renderer, use the `setLinkRenderer.pop()` method to go back to
|
|
24
|
+
* the previous one. Example:
|
|
25
|
+
*
|
|
26
|
+
* ```js
|
|
27
|
+
* const BlockLinks = (props) =>
|
|
28
|
+
* <span className={props.className}>[Link temporarily out of order]</span>
|
|
29
|
+
*
|
|
30
|
+
* setLinkRenderer(BlockLinks);
|
|
31
|
+
* // ...render some Hanna components...
|
|
32
|
+
* setLinkRenderer.pop(); // reset link rendering
|
|
33
|
+
* ```
|
|
34
|
+
*
|
|
35
|
+
* The Default linkrenderer is defined as:
|
|
36
|
+
*
|
|
22
37
|
* ```js
|
|
23
38
|
* (linkProps) => React.createElement('a', linkProps);
|
|
24
39
|
* ```
|
|
40
|
+
*
|
|
41
|
+
* ...and you can explicitly switch to using this default by passing `undefined`
|
|
42
|
+
* as an argument — like so:
|
|
43
|
+
*
|
|
44
|
+
* ```js
|
|
45
|
+
* setLinkRenderer(undefined);
|
|
46
|
+
* ```
|
|
25
47
|
*/
|
|
26
48
|
const setLinkRenderer = (linkRenderer) => {
|
|
49
|
+
// Here we tell a "white" lie. Nobody uses string-type `ref` attributes
|
|
50
|
+
// anymore. With this lie we're able to provide nice type signature for modern
|
|
51
|
+
// use-cases (e.g. Next.js and Remix.run <Link> elements) while still
|
|
52
|
+
// providing easy to use (easy to Type `JSX.IntrinsicElements['a']` signatures)
|
|
53
|
+
// internally within the hanna-react codebase.
|
|
54
|
+
//
|
|
55
|
+
// This decision may need to be reversed if scream-test results are negative.
|
|
56
|
+
//
|
|
57
|
+
// TODO: Add a project-global `HTMLAnchorProps` with modern `ref` and use it
|
|
58
|
+
// everywhere, and then remove this hack.
|
|
27
59
|
exports.Link = linkRenderer || DefaultLinkRenderer;
|
|
60
|
+
history.unshift(exports.Link);
|
|
28
61
|
};
|
|
29
62
|
exports.setLinkRenderer = setLinkRenderer;
|
|
63
|
+
/**
|
|
64
|
+
*
|
|
65
|
+
*/
|
|
66
|
+
exports.setLinkRenderer.pop = () => {
|
|
67
|
+
history.shift();
|
|
68
|
+
exports.Link = history[0] || DefaultLinkRenderer;
|
|
69
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@reykjavik/hanna-react",
|
|
3
|
-
"version": "0.10.
|
|
3
|
+
"version": "0.10.76",
|
|
4
4
|
"author": "Reykjavík (http://www.reykjavik.is)",
|
|
5
5
|
"contributors": [
|
|
6
6
|
"Hugsmiðjan ehf (http://www.hugsmidjan.is)",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"@hugsmidjan/qj": "^4.10.2",
|
|
17
17
|
"@hugsmidjan/react": "^0.4.20",
|
|
18
18
|
"@reykjavik/hanna-css": "^0.3.10",
|
|
19
|
-
"@reykjavik/hanna-utils": "^0.
|
|
19
|
+
"@reykjavik/hanna-utils": "^0.2.0",
|
|
20
20
|
"@types/react": "^17.0.24",
|
|
21
21
|
"@types/react-autosuggest": "^10.1.0",
|
|
22
22
|
"@types/react-datepicker": "^3.0.2",
|
package/utils/config.js
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.setLinkRenderer = void 0;
|
|
4
|
+
var _Link_1 = require("../_abstract/_Link");
|
|
5
|
+
Object.defineProperty(exports, "setLinkRenderer", { enumerable: true, get: function () { return _Link_1.setLinkRenderer; } });
|
|
6
|
+
// ---------------------------------------------------------------------------
|
|
7
|
+
// TODO:
|
|
8
|
+
// * Add defaultSSR variable that can be set globally for
|
|
@@ -35,4 +35,4 @@
|
|
|
35
35
|
* media.leftHamburger
|
|
36
36
|
* ```
|
|
37
37
|
*/
|
|
38
|
-
export declare const useFormatMonitor: (callback: (media: import("formatchange").BaseMedia & Record<"isHamburger" | "isTopmenu" | "wasHamburger" | "wasTopmenu" | "becameHamburger" | "becameTopmenu" | "leftHamburger" | "leftTopmenu", boolean>) => void) => void;
|
|
38
|
+
export declare const useFormatMonitor: (callback: ((media: import("formatchange").BaseMedia & Record<"isHamburger" | "isTopmenu" | "wasHamburger" | "wasTopmenu" | "becameHamburger" | "becameTopmenu" | "leftHamburger" | "leftTopmenu", boolean>) => void) | undefined) => void;
|
|
@@ -41,4 +41,4 @@ const react_1 = require("formatchange/react");
|
|
|
41
41
|
* media.leftHamburger
|
|
42
42
|
* ```
|
|
43
43
|
*/
|
|
44
|
-
exports.useFormatMonitor = (0, react_1.makeFormatMonitorHook)(hanna_utils_1.
|
|
44
|
+
exports.useFormatMonitor = (0, react_1.makeFormatMonitorHook)(hanna_utils_1.getFormatMonitor);
|
package/utils/useGetSVGtext.d.ts
CHANGED
|
@@ -2,5 +2,9 @@ declare type SVGMeta = {
|
|
|
2
2
|
imageSrc: string;
|
|
3
3
|
code: string;
|
|
4
4
|
};
|
|
5
|
+
/**
|
|
6
|
+
* Fetches a remote SVG image and returns its XML/source
|
|
7
|
+
* string for inlining, or further processing
|
|
8
|
+
*/
|
|
5
9
|
export declare const useGetSVGtext: (imageSrc: string | undefined) => SVGMeta | undefined;
|
|
6
10
|
export {};
|
package/utils/useGetSVGtext.js
CHANGED
|
@@ -3,6 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.useGetSVGtext = void 0;
|
|
4
4
|
const react_1 = require("react");
|
|
5
5
|
const hanna_utils_1 = require("@reykjavik/hanna-utils");
|
|
6
|
+
/**
|
|
7
|
+
* Fetches a remote SVG image and returns its XML/source
|
|
8
|
+
* string for inlining, or further processing
|
|
9
|
+
*/
|
|
6
10
|
const useGetSVGtext = (imageSrc) => {
|
|
7
11
|
const [inlineSvg, setInlineSvg] = (0, react_1.useState)();
|
|
8
12
|
const srcRef = (0, react_1.useRef)(imageSrc);
|
package/utils.d.ts
CHANGED
package/utils.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const tslib_1 = require("tslib");
|
|
4
|
+
tslib_1.__exportStar(require("./utils/config"), exports);
|
|
4
5
|
tslib_1.__exportStar(require("./utils/useDidChange"), exports);
|
|
5
6
|
tslib_1.__exportStar(require("./utils/useFormatMonitor"), exports);
|
|
6
7
|
tslib_1.__exportStar(require("./utils/useGetSVGtext"), exports);
|