@koine/react 1.1.8 → 1.1.10
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/Autocomplete/AutocompleteDownshift.js +1 -1
- package/Autocomplete/AutocompleteDownshiftMultiselect.js +1 -1
- package/Autocomplete/AutocompleteMui.js +1 -1
- package/Autocomplete/AutocompleteReach.js +1 -1
- package/Autocomplete/helpers.js +2 -1
- package/Breadcrumbs/Breadcrumbs.js +1 -1
- package/Calendar/calendar-api-google.js +3 -1
- package/Details/Details.d.ts +1 -1
- package/Dialog/DialogMui.d.ts +2 -2
- package/Dialog/tw/bare.d.ts +6 -6
- package/Dialog/tw/elegant.d.ts +6 -6
- package/Dialog/tw/framer.d.ts +2 -2
- package/Dialog/tw/framerMaterial.d.ts +4 -4
- package/Dialog/tw/material.d.ts +6 -6
- package/Form/Form.d.ts +1 -1
- package/Form/Form.js +1 -1
- package/Forms/Checkbox/Checkbox.d.ts +1 -1
- package/Forms/Field/FieldControl.js +1 -1
- package/Forms/Input/Input.d.ts +1 -1
- package/Forms/Password/Password.d.ts +1 -1
- package/Forms/Radio/Radio.d.ts +1 -1
- package/Forms/Switch/Switch.d.ts +1 -1
- package/Forms/antispam.d.ts +1 -1
- package/Forms/antispam.js +3 -1
- package/Forms/helpers.js +2 -1
- package/Header/useHeader.d.ts +1 -1
- package/Header/useHeader.js +1 -0
- package/Menu/MenuMui.js +1 -1
- package/MenuItem/MenuItemMui.js +1 -1
- package/Pagination/PaginationNav.js +1 -1
- package/Spacing/Spacing.js +1 -1
- package/Tabs/TabsMui.d.ts +2 -2
- package/Tabs/tw/material.d.ts +6 -6
- package/helpers/classed.d.ts +7 -2
- package/helpers/classed.js +7 -2
- package/helpers/createUseMediaQueryWidth.d.ts +1 -1
- package/helpers/createUseMediaQueryWidth.js +5 -3
- package/hooks/useFixedOffset.js +6 -3
- package/hooks/useInterval.js +1 -1
- package/hooks/useIsomorphicLayoutEffect.js +1 -1
- package/hooks/useKeyUp.js +1 -1
- package/hooks/useMeasure.js +6 -2
- package/hooks/useNavigateAway.js +1 -1
- package/hooks/useScrollPosition.js +3 -3
- package/hooks/useScrollThreshold.js +2 -2
- package/hooks/useScrollTo.js +2 -2
- package/hooks/useSmoothScroll.js +4 -3
- package/hooks/useWindowSize.d.ts +1 -1
- package/hooks/useWindowSize.js +2 -1
- package/m/MotionProvider.d.ts +1 -1
- package/node/Autocomplete/AutocompleteDownshift.js +1 -1
- package/node/Autocomplete/AutocompleteDownshiftMultiselect.js +1 -1
- package/node/Autocomplete/AutocompleteMui.js +6 -6
- package/node/Autocomplete/AutocompleteReach.js +1 -1
- package/node/Autocomplete/helpers.js +6 -4
- package/node/Breadcrumbs/Breadcrumbs.js +2 -2
- package/node/Calendar/calendar-api-google.js +9 -7
- package/node/Form/Form.js +1 -1
- package/node/Forms/Field/FieldControl.js +2 -2
- package/node/Forms/antispam.js +7 -4
- package/node/Forms/helpers.js +5 -3
- package/node/Header/useHeader.js +1 -0
- package/node/Menu/MenuMui.js +2 -2
- package/node/MenuItem/MenuItemMui.js +2 -2
- package/node/Pagination/PaginationNav.js +4 -4
- package/node/Spacing/Spacing.js +2 -2
- package/node/helpers/classed.js +7 -2
- package/node/helpers/createUseMediaQueryWidth.js +11 -8
- package/node/hooks/useFixedOffset.js +13 -9
- package/node/hooks/useInterval.js +2 -2
- package/node/hooks/useIsomorphicLayoutEffect.js +3 -2
- package/node/hooks/useKeyUp.js +2 -2
- package/node/hooks/useMeasure.js +12 -8
- package/node/hooks/useNavigateAway.js +3 -2
- package/node/hooks/useScrollPosition.js +8 -7
- package/node/hooks/useScrollThreshold.js +5 -4
- package/node/hooks/useScrollTo.js +5 -4
- package/node/hooks/useSmoothScroll.js +10 -8
- package/node/hooks/useWindowSize.js +5 -3
- package/node/styles/theme--vanilla.js +10 -7
- package/package.json +8 -5
- package/styles/theme--vanilla.js +5 -2
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.createUseMediaQueryWidth = void 0;
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
4
5
|
var react_1 = require("react");
|
|
5
|
-
var
|
|
6
|
-
var
|
|
6
|
+
var isUndefined_1 = tslib_1.__importDefault(require("@koine/utils/isUndefined"));
|
|
7
|
+
var getMediaQueryWidthResolvers_1 = tslib_1.__importDefault(require("@koine/utils/getMediaQueryWidthResolvers"));
|
|
8
|
+
var useIsomorphicLayoutEffect_1 = tslib_1.__importDefault(require("../hooks/useIsomorphicLayoutEffect"));
|
|
7
9
|
/**
|
|
8
10
|
* Use `null` instead of `false` as default value, @see https://observablehq.com/@werehamster/avoiding-hydration-mismatch-when-using-react-hooks
|
|
9
11
|
*
|
|
@@ -11,14 +13,14 @@ var useIsomorphicLayoutEffect_1 = require("../hooks/useIsomorphicLayoutEffect");
|
|
|
11
13
|
* @returns
|
|
12
14
|
*/
|
|
13
15
|
function createUseMediaQueryWidth(customBreakpoints) {
|
|
14
|
-
var queryResolvers = (0,
|
|
16
|
+
var queryResolvers = (0, getMediaQueryWidthResolvers_1.default)(customBreakpoints);
|
|
15
17
|
return function useMediaQueryWidth(media, serverValue) {
|
|
16
18
|
var definition = media.substring(1);
|
|
17
19
|
var _a = definition.split("-"), rule = _a[0], ruleBreakpoint = _a[1];
|
|
18
|
-
if ((0,
|
|
20
|
+
if ((0, isUndefined_1.default)(ruleBreakpoint)) {
|
|
19
21
|
ruleBreakpoint = rule;
|
|
20
22
|
}
|
|
21
|
-
if ((0,
|
|
23
|
+
if ((0, isUndefined_1.default)(rule)) {
|
|
22
24
|
rule = "min";
|
|
23
25
|
}
|
|
24
26
|
// with the hook creator approach these breakpoint types cannot be deduced
|
|
@@ -28,8 +30,8 @@ function createUseMediaQueryWidth(customBreakpoints) {
|
|
|
28
30
|
// >;
|
|
29
31
|
var _b = ruleBreakpoint.split("_"), br1 = _b[0], br2 = _b[1];
|
|
30
32
|
var query = queryResolvers[rule](br1, br2);
|
|
31
|
-
var _c = (0, react_1.useState)((0,
|
|
32
|
-
(0, useIsomorphicLayoutEffect_1.
|
|
33
|
+
var _c = (0, react_1.useState)((0, isUndefined_1.default)(serverValue) ? null : serverValue), matches = _c[0], setMatches = _c[1];
|
|
34
|
+
(0, useIsomorphicLayoutEffect_1.default)(function () {
|
|
33
35
|
var mq = window.matchMedia(query);
|
|
34
36
|
var handleChange = function (event) {
|
|
35
37
|
setMatches(event.matches);
|
|
@@ -58,7 +60,8 @@ exports.default = createUseMediaQueryWidth;
|
|
|
58
60
|
//// without creator it would be:
|
|
59
61
|
//// ---------------------------------------------------------------------------
|
|
60
62
|
// import { useState, useIsomorphicLayoutEffect, useMemo } from "react";
|
|
61
|
-
// import {
|
|
63
|
+
// import type { Split } from "@koine/utils";
|
|
64
|
+
// import isBrowser from "@koine/utils/isBrowser";
|
|
62
65
|
// import { breakpoints as themeBreakpoints } from "@/config/theme/breakpoints";
|
|
63
66
|
// import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect"
|
|
64
67
|
// type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl";
|
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useFixedOffset = void 0;
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
4
5
|
var react_1 = require("react");
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
6
|
+
var injectCss_1 = tslib_1.__importDefault(require("@koine/dom/injectCss"));
|
|
7
|
+
var calculateFixedOffset_1 = tslib_1.__importDefault(require("@koine/dom/calculateFixedOffset"));
|
|
8
|
+
var listenResizeDebounced_1 = tslib_1.__importDefault(require("@koine/dom/listenResizeDebounced"));
|
|
9
|
+
var _each_1 = tslib_1.__importDefault(require("@koine/dom/$each"));
|
|
10
|
+
var debounce_1 = tslib_1.__importDefault(require("@koine/utils/debounce"));
|
|
11
|
+
var useIsomorphicLayoutEffect_1 = tslib_1.__importDefault(require("./useIsomorphicLayoutEffect"));
|
|
8
12
|
var inject = function (value) {
|
|
9
|
-
(0,
|
|
13
|
+
(0, injectCss_1.default)("useFixedOffset", "html{scroll-padding-top: ".concat(value, "px}"));
|
|
10
14
|
};
|
|
11
15
|
/**
|
|
12
16
|
* # Use fixed offset
|
|
@@ -19,9 +23,9 @@ var inject = function (value) {
|
|
|
19
23
|
*/
|
|
20
24
|
function useFixedOffset(selector) {
|
|
21
25
|
var fixedOffset = (0, react_1.useRef)(0);
|
|
22
|
-
(0, useIsomorphicLayoutEffect_1.
|
|
26
|
+
(0, useIsomorphicLayoutEffect_1.default)(function () {
|
|
23
27
|
var update = function () {
|
|
24
|
-
var newFixedOffset = (0,
|
|
28
|
+
var newFixedOffset = (0, calculateFixedOffset_1.default)();
|
|
25
29
|
fixedOffset.current = newFixedOffset;
|
|
26
30
|
// inject this CSS make the hashed deeplinks position the scroll at the
|
|
27
31
|
// right offset
|
|
@@ -36,10 +40,10 @@ function useFixedOffset(selector) {
|
|
|
36
40
|
newFixedOffset += entry.contentRect.height;
|
|
37
41
|
});
|
|
38
42
|
fixedOffset.current = newFixedOffset;
|
|
39
|
-
var updateOnResize = (0,
|
|
43
|
+
var updateOnResize = (0, debounce_1.default)(function () { return inject(newFixedOffset); }, 400, true);
|
|
40
44
|
updateOnResize();
|
|
41
45
|
});
|
|
42
|
-
(0,
|
|
46
|
+
(0, _each_1.default)(selector || "[data-fixed]", function ($el) {
|
|
43
47
|
if (observer_1)
|
|
44
48
|
observer_1.observe($el);
|
|
45
49
|
});
|
|
@@ -48,7 +52,7 @@ function useFixedOffset(selector) {
|
|
|
48
52
|
};
|
|
49
53
|
}
|
|
50
54
|
else {
|
|
51
|
-
var listener = (0,
|
|
55
|
+
var listener = (0, listenResizeDebounced_1.default)(0, update);
|
|
52
56
|
return listener;
|
|
53
57
|
}
|
|
54
58
|
}, [selector]);
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.useInterval = void 0;
|
|
4
4
|
var tslib_1 = require("tslib");
|
|
5
5
|
var react_1 = require("react");
|
|
6
|
-
var
|
|
6
|
+
var noop_1 = tslib_1.__importDefault(require("@koine/utils/noop"));
|
|
7
7
|
/**
|
|
8
8
|
* @borrows [dan abramov](https://overreacted.io/making-setinterval-declarative-with-react-hooks/)
|
|
9
9
|
*
|
|
@@ -25,7 +25,7 @@ function useInterval(callback, delay, deps) {
|
|
|
25
25
|
var id_1 = setInterval(tick, delay);
|
|
26
26
|
return function () { return clearInterval(id_1); };
|
|
27
27
|
}
|
|
28
|
-
return
|
|
28
|
+
return noop_1.default;
|
|
29
29
|
}, [delay]);
|
|
30
30
|
}
|
|
31
31
|
exports.useInterval = useInterval;
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useIsomorphicLayoutEffect = void 0;
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
4
5
|
var react_1 = require("react");
|
|
5
|
-
var
|
|
6
|
+
var isBrowser_1 = tslib_1.__importDefault(require("@koine/utils/isBrowser"));
|
|
6
7
|
/**
|
|
7
8
|
* @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useFirstMountState.ts)
|
|
8
9
|
*/
|
|
9
|
-
exports.useIsomorphicLayoutEffect =
|
|
10
|
+
exports.useIsomorphicLayoutEffect = isBrowser_1.default
|
|
10
11
|
? react_1.useLayoutEffect
|
|
11
12
|
: react_1.useEffect;
|
|
12
13
|
exports.default = exports.useIsomorphicLayoutEffect;
|
package/node/hooks/useKeyUp.js
CHANGED
|
@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.useKeyUp = void 0;
|
|
4
4
|
var tslib_1 = require("tslib");
|
|
5
5
|
var react_1 = require("react");
|
|
6
|
-
var
|
|
6
|
+
var on_1 = tslib_1.__importDefault(require("@koine/dom/on"));
|
|
7
7
|
function useKeyUp(callback, deps) {
|
|
8
8
|
if (deps === void 0) { deps = []; }
|
|
9
9
|
(0, react_1.useEffect)(function () {
|
|
10
|
-
var listener = (0,
|
|
10
|
+
var listener = (0, on_1.default)(window, "keyup", function (event) {
|
|
11
11
|
// const { key } = event;
|
|
12
12
|
// be sure we do not intercept keys combinations maybe used for other
|
|
13
13
|
// actions like native browser navigation shortcuts
|
package/node/hooks/useMeasure.js
CHANGED
|
@@ -3,8 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.useMeasure = void 0;
|
|
4
4
|
var tslib_1 = require("tslib");
|
|
5
5
|
var react_1 = require("react");
|
|
6
|
-
var
|
|
7
|
-
var
|
|
6
|
+
var debounce_1 = tslib_1.__importDefault(require("@koine/utils/debounce"));
|
|
7
|
+
var noop_1 = tslib_1.__importDefault(require("@koine/utils/noop"));
|
|
8
|
+
var listenResizeDebounced_1 = tslib_1.__importDefault(require("@koine/dom/listenResizeDebounced"));
|
|
9
|
+
var listenScrollDebounced_1 = tslib_1.__importDefault(require("@koine/dom/listenScrollDebounced"));
|
|
10
|
+
var on_1 = tslib_1.__importDefault(require("@koine/dom/on"));
|
|
11
|
+
var off_1 = tslib_1.__importDefault(require("@koine/dom/off"));
|
|
8
12
|
var observer;
|
|
9
13
|
// Returns a list of scroll offsets
|
|
10
14
|
function findScrollContainers(element) {
|
|
@@ -84,7 +88,7 @@ function useMeasure(options) {
|
|
|
84
88
|
setBounds(size);
|
|
85
89
|
}
|
|
86
90
|
};
|
|
87
|
-
var debouncedCallback = (0,
|
|
91
|
+
var debouncedCallback = (0, debounce_1.default)(callback);
|
|
88
92
|
return [callback, debouncedCallback, debouncedCallback];
|
|
89
93
|
}, [setBounds /* , offsetSize */]), forceRefresh = _c[0] /* resizeChange */, scrollChange = _c[2];
|
|
90
94
|
// cleanup current scroll-listeners / observers
|
|
@@ -92,7 +96,7 @@ function useMeasure(options) {
|
|
|
92
96
|
var _a = state.current, scrollContainers = _a[1], resizeObserver = _a[2];
|
|
93
97
|
if (scrollContainers) {
|
|
94
98
|
scrollContainers.forEach(function (element) {
|
|
95
|
-
return (0,
|
|
99
|
+
return (0, off_1.default)(element, "scroll", scrollChange);
|
|
96
100
|
});
|
|
97
101
|
state.current[1] = null;
|
|
98
102
|
}
|
|
@@ -112,7 +116,7 @@ function useMeasure(options) {
|
|
|
112
116
|
observer.observe(element);
|
|
113
117
|
if (scroll && scrollContainers) {
|
|
114
118
|
scrollContainers.forEach(function (scrollContainer) {
|
|
115
|
-
return (0,
|
|
119
|
+
return (0, on_1.default)(scrollContainer, "scroll", scrollChange, {
|
|
116
120
|
capture: true,
|
|
117
121
|
passive: true,
|
|
118
122
|
});
|
|
@@ -137,15 +141,15 @@ function useMeasure(options) {
|
|
|
137
141
|
// });
|
|
138
142
|
(0, react_1.useEffect)(function () {
|
|
139
143
|
if (scroll) {
|
|
140
|
-
var listener = (0,
|
|
144
|
+
var listener = (0, listenScrollDebounced_1.default)(0, forceRefresh, 100);
|
|
141
145
|
return listener;
|
|
142
146
|
}
|
|
143
|
-
return
|
|
147
|
+
return noop_1.default;
|
|
144
148
|
}, [scroll, forceRefresh]);
|
|
145
149
|
(0, react_1.useEffect)(function () {
|
|
146
150
|
// const listener = listenResizeDebounced(onWindowResize);
|
|
147
151
|
// return listener;
|
|
148
|
-
var listener = (0,
|
|
152
|
+
var listener = (0, listenResizeDebounced_1.default)(0, forceRefresh, 100);
|
|
149
153
|
return listener;
|
|
150
154
|
}, [forceRefresh]);
|
|
151
155
|
// respond to changes that are relevant for the listeners
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useNavigateAway = void 0;
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
4
5
|
var react_1 = require("react");
|
|
5
|
-
var
|
|
6
|
+
var on_1 = tslib_1.__importDefault(require("@koine/dom/on"));
|
|
6
7
|
// type UseNavigateAwayPagehideHandler = (event: PageTransitionEvent) => unknown;
|
|
7
8
|
/**
|
|
8
9
|
* @resources
|
|
@@ -57,7 +58,7 @@ var useNavigateAway = function (handler) {
|
|
|
57
58
|
// };
|
|
58
59
|
}, [handler]);
|
|
59
60
|
(0, react_1.useEffect)(function () {
|
|
60
|
-
var listenerBeforeunload = (0,
|
|
61
|
+
var listenerBeforeunload = (0, on_1.default)(window, "beforeunload", function (event) { var _a; return (_a = beforeUnloadHandlerRef.current) === null || _a === void 0 ? void 0 : _a.call(beforeUnloadHandlerRef, event); });
|
|
61
62
|
// const listenerPagehide = on(window, "pagehide", (event) =>
|
|
62
63
|
// pagehideHandlerRef.current?.(event)
|
|
63
64
|
// );
|
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useScrollPosition = void 0;
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
4
5
|
var react_1 = require("react");
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
6
|
+
var isBrowser_1 = tslib_1.__importDefault(require("@koine/utils/isBrowser"));
|
|
7
|
+
var listenScroll_1 = tslib_1.__importDefault(require("@koine/dom/listenScroll"));
|
|
8
|
+
var useIsomorphicLayoutEffect_1 = tslib_1.__importDefault(require("./useIsomorphicLayoutEffect"));
|
|
8
9
|
var zeroPosition = { x: 0, y: 0 };
|
|
9
10
|
var getClientRect = function (element) {
|
|
10
11
|
return element === null || element === void 0 ? void 0 : element.getBoundingClientRect();
|
|
11
12
|
};
|
|
12
13
|
var getScrollPosition = function (element, boundingElement) {
|
|
13
|
-
if (!
|
|
14
|
+
if (!isBrowser_1.default) {
|
|
14
15
|
return zeroPosition;
|
|
15
16
|
}
|
|
16
17
|
if (!boundingElement) {
|
|
@@ -45,8 +46,8 @@ var useScrollPosition = function (effect, deps, element, boundingElement, wait)
|
|
|
45
46
|
position.current = current;
|
|
46
47
|
throttleTimeout = null;
|
|
47
48
|
};
|
|
48
|
-
(0, useIsomorphicLayoutEffect_1.
|
|
49
|
-
if (!
|
|
49
|
+
(0, useIsomorphicLayoutEffect_1.default)(function () {
|
|
50
|
+
if (!isBrowser_1.default) {
|
|
50
51
|
return undefined;
|
|
51
52
|
}
|
|
52
53
|
var handleScroll = function () {
|
|
@@ -59,7 +60,7 @@ var useScrollPosition = function (effect, deps, element, boundingElement, wait)
|
|
|
59
60
|
callBack();
|
|
60
61
|
}
|
|
61
62
|
};
|
|
62
|
-
var listener = (0,
|
|
63
|
+
var listener = (0, listenScroll_1.default)(handleScroll, boundingElement === null || boundingElement === void 0 ? void 0 : boundingElement.current);
|
|
63
64
|
return function () {
|
|
64
65
|
listener();
|
|
65
66
|
if (throttleTimeout) {
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useScrollThreshold = void 0;
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
4
5
|
var react_1 = require("react");
|
|
5
|
-
var
|
|
6
|
-
var
|
|
6
|
+
var noop_1 = tslib_1.__importDefault(require("@koine/utils/noop"));
|
|
7
|
+
var listenScroll_1 = tslib_1.__importDefault(require("@koine/dom/listenScroll"));
|
|
7
8
|
var useScrollThreshold = function (threshold, callback) {
|
|
8
9
|
var _a = (0, react_1.useState)(false), isBelow = _a[0], setIsBelow = _a[1];
|
|
9
10
|
var handler = (0, react_1.useCallback)(function () {
|
|
@@ -20,11 +21,11 @@ var useScrollThreshold = function (threshold, callback) {
|
|
|
20
21
|
(0, react_1.useEffect)(function () {
|
|
21
22
|
if (threshold) {
|
|
22
23
|
// const listener = listenScrollThrottled(0, handler, 50);
|
|
23
|
-
var listener = (0,
|
|
24
|
+
var listener = (0, listenScroll_1.default)(handler);
|
|
24
25
|
handler();
|
|
25
26
|
return listener;
|
|
26
27
|
}
|
|
27
|
-
return
|
|
28
|
+
return noop_1.default;
|
|
28
29
|
}, [threshold, handler]);
|
|
29
30
|
return isBelow;
|
|
30
31
|
};
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useScrollTo = void 0;
|
|
4
|
-
var
|
|
5
|
-
var
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
5
|
+
var isBrowser_1 = tslib_1.__importDefault(require("@koine/utils/isBrowser"));
|
|
6
|
+
var useHeader_1 = tslib_1.__importDefault(require("../Header/useHeader"));
|
|
6
7
|
function useScrollTo(id, offset) {
|
|
7
8
|
if (id === void 0) { id = ""; }
|
|
8
9
|
if (offset === void 0) { offset = 0; }
|
|
9
|
-
var _a = (0, useHeader_1.
|
|
10
|
-
if (!
|
|
10
|
+
var _a = (0, useHeader_1.default)(), headerHeight = _a[2];
|
|
11
|
+
if (!isBrowser_1.default) {
|
|
11
12
|
return;
|
|
12
13
|
}
|
|
13
14
|
var headerOffset = headerHeight || 0;
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useSmoothScroll = void 0;
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
4
5
|
var react_1 = require("react");
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
6
|
+
var isNumber_1 = tslib_1.__importDefault(require("@koine/utils/isNumber"));
|
|
7
|
+
var getOffsetTopSlim_1 = tslib_1.__importDefault(require("@koine/dom/getOffsetTopSlim"));
|
|
8
|
+
var scrollTo_1 = tslib_1.__importDefault(require("@koine/dom/scrollTo"));
|
|
9
|
+
var useFixedOffset_1 = tslib_1.__importDefault(require("./useFixedOffset"));
|
|
8
10
|
/**
|
|
9
11
|
*
|
|
10
12
|
* @param disregardAutomaticFixedOffset When the `to` scroll argument is a DOM
|
|
@@ -12,28 +14,28 @@ var useFixedOffset_1 = require("./useFixedOffset");
|
|
|
12
14
|
* @returns
|
|
13
15
|
*/
|
|
14
16
|
function useSmoothScroll(disregardAutomaticFixedOffset) {
|
|
15
|
-
var fixedOffset = (0, useFixedOffset_1.
|
|
17
|
+
var fixedOffset = (0, useFixedOffset_1.default)();
|
|
16
18
|
var scroll = (0, react_1.useCallback)(function (to, customOffset, callback, fallbackTimeout, behavior) {
|
|
17
19
|
var top = undefined;
|
|
18
20
|
var toIsElement = false;
|
|
19
|
-
if ((0,
|
|
21
|
+
if ((0, isNumber_1.default)(to)) {
|
|
20
22
|
top = to;
|
|
21
23
|
}
|
|
22
24
|
else if (to) {
|
|
23
25
|
var el = document.getElementById(to);
|
|
24
26
|
if (el) {
|
|
25
|
-
top = (0,
|
|
27
|
+
top = (0, getOffsetTopSlim_1.default)(el) - fixedOffset.current;
|
|
26
28
|
toIsElement = true;
|
|
27
29
|
}
|
|
28
30
|
}
|
|
29
|
-
if ((0,
|
|
31
|
+
if ((0, isNumber_1.default)(top)) {
|
|
30
32
|
top =
|
|
31
33
|
top +
|
|
32
34
|
(customOffset || 0) +
|
|
33
35
|
(disregardAutomaticFixedOffset || toIsElement
|
|
34
36
|
? 0
|
|
35
37
|
: fixedOffset.current);
|
|
36
|
-
(0,
|
|
38
|
+
(0, scrollTo_1.default)(top, callback, fallbackTimeout, behavior);
|
|
37
39
|
}
|
|
38
40
|
}, [disregardAutomaticFixedOffset, fixedOffset]);
|
|
39
41
|
return scroll;
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useWindowSize = void 0;
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
4
5
|
var react_1 = require("react");
|
|
5
|
-
var
|
|
6
|
+
var listenResize_1 = tslib_1.__importDefault(require("@koine/dom/listenResize"));
|
|
7
|
+
var listenResizeDebounced_1 = tslib_1.__importDefault(require("@koine/dom/listenResizeDebounced"));
|
|
6
8
|
/**
|
|
7
9
|
* # Use `window` size
|
|
8
10
|
*
|
|
@@ -21,8 +23,8 @@ function useWindowSize(wait, immediate) {
|
|
|
21
23
|
heightSet(window.innerHeight);
|
|
22
24
|
}
|
|
23
25
|
var listener = wait
|
|
24
|
-
? (0,
|
|
25
|
-
: (0,
|
|
26
|
+
? (0, listenResizeDebounced_1.default)(0, updateSize, wait, immediate)
|
|
27
|
+
: (0, listenResize_1.default)(updateSize);
|
|
26
28
|
updateSize();
|
|
27
29
|
return listener;
|
|
28
30
|
}, [wait, immediate]);
|
|
@@ -4,13 +4,16 @@ exports.ThemeVanillaProvider = exports.ThemeVanillaContext = exports.getInitialT
|
|
|
4
4
|
var tslib_1 = require("tslib");
|
|
5
5
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
6
|
var react_1 = require("react");
|
|
7
|
-
var
|
|
8
|
-
var
|
|
7
|
+
var isBrowser_1 = tslib_1.__importDefault(require("@koine/utils/isBrowser"));
|
|
8
|
+
var setCookie_1 = tslib_1.__importDefault(require("@koine/utils/setCookie"));
|
|
9
|
+
var parseCookie_1 = tslib_1.__importDefault(require("@koine/utils/parseCookie"));
|
|
10
|
+
var useMount_1 = tslib_1.__importDefault(require("../hooks/useMount"));
|
|
11
|
+
var useUpdateEffect_1 = tslib_1.__importDefault(require("../hooks/useUpdateEffect"));
|
|
9
12
|
exports.THEME_KEY = "theme";
|
|
10
13
|
exports.THEME_DEFAULT = "light";
|
|
11
14
|
var getInitialThemeFromRequest = function (cookie) {
|
|
12
15
|
if (cookie) {
|
|
13
|
-
var parsed = (0,
|
|
16
|
+
var parsed = (0, parseCookie_1.default)(cookie);
|
|
14
17
|
return parsed === null || parsed === void 0 ? void 0 : parsed.theme;
|
|
15
18
|
}
|
|
16
19
|
return exports.THEME_DEFAULT;
|
|
@@ -38,7 +41,7 @@ var ThemeVanillaProvider = function (_a) {
|
|
|
38
41
|
var initialTheme = _a.initialTheme, children = _a.children;
|
|
39
42
|
var _b = (0, react_1.useState)(initialTheme), theme = _b[0], setTheme = _b[1];
|
|
40
43
|
var rawSetTheme = function (rawTheme) {
|
|
41
|
-
if (!rawTheme || !
|
|
44
|
+
if (!rawTheme || !isBrowser_1.default) {
|
|
42
45
|
return;
|
|
43
46
|
}
|
|
44
47
|
var root = window.document.documentElement;
|
|
@@ -46,14 +49,14 @@ var ThemeVanillaProvider = function (_a) {
|
|
|
46
49
|
root.classList.remove(isDark ? "light" : "dark");
|
|
47
50
|
root.classList.add(rawTheme);
|
|
48
51
|
localStorage.setItem(exports.THEME_KEY, rawTheme);
|
|
49
|
-
(0,
|
|
52
|
+
(0, setCookie_1.default)(exports.THEME_KEY, rawTheme);
|
|
50
53
|
};
|
|
51
|
-
(0,
|
|
54
|
+
(0, useMount_1.default)(function () {
|
|
52
55
|
var theme = (0, exports.getInitialThemeFromClient)();
|
|
53
56
|
setTheme(theme);
|
|
54
57
|
rawSetTheme(theme);
|
|
55
58
|
});
|
|
56
|
-
(0,
|
|
59
|
+
(0, useUpdateEffect_1.default)(function () {
|
|
57
60
|
rawSetTheme(theme);
|
|
58
61
|
}, [theme]);
|
|
59
62
|
return ((0, jsx_runtime_1.jsx)(exports.ThemeVanillaContext.Provider, tslib_1.__assign({ value: { theme: theme, setTheme: setTheme } }, { children: children })));
|
package/package.json
CHANGED
|
@@ -40,6 +40,9 @@
|
|
|
40
40
|
},
|
|
41
41
|
"styled-components": {
|
|
42
42
|
"optional": true
|
|
43
|
+
},
|
|
44
|
+
"tailwindcss": {
|
|
45
|
+
"optional": true
|
|
43
46
|
}
|
|
44
47
|
},
|
|
45
48
|
"main": "./node/index.js",
|
|
@@ -50,20 +53,20 @@
|
|
|
50
53
|
"framer-motion": "8.5.5",
|
|
51
54
|
"react": "18.2.0",
|
|
52
55
|
"@mui/base": "5.0.0-alpha.115",
|
|
53
|
-
"@koine/utils": "1.1.
|
|
54
|
-
"ts-debounce": "4.0.0",
|
|
55
|
-
"type-fest": "3.5.3",
|
|
56
|
+
"@koine/utils": "1.1.10",
|
|
56
57
|
"react-icons": "4.7.1",
|
|
57
58
|
"date-fns": "2.29.3",
|
|
58
59
|
"react-swipeable": "7.0.0",
|
|
60
|
+
"ts-debounce": "4.0.0",
|
|
61
|
+
"type-fest": "3.5.3",
|
|
59
62
|
"@tiptap/react": "2.0.0-beta.209",
|
|
60
63
|
"@tiptap/starter-kit": "2.0.0-beta.209",
|
|
61
64
|
"@kuus/yup": "1.0.0-beta.7",
|
|
62
65
|
"react-hook-form": "7.42.1",
|
|
63
|
-
"@
|
|
66
|
+
"@mui/utils": "5.11.2",
|
|
64
67
|
"react-popper": "2.3.0",
|
|
65
68
|
"tslib": "2.5.0"
|
|
66
69
|
},
|
|
67
|
-
"version": "1.1.
|
|
70
|
+
"version": "1.1.10",
|
|
68
71
|
"module": "./index.js"
|
|
69
72
|
}
|
package/styles/theme--vanilla.js
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import { __assign } from "tslib";
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import { createContext, useState } from "react";
|
|
4
|
-
import
|
|
5
|
-
import
|
|
4
|
+
import isBrowser from "@koine/utils/isBrowser";
|
|
5
|
+
import setCookie from "@koine/utils/setCookie";
|
|
6
|
+
import parseCookie from "@koine/utils/parseCookie";
|
|
7
|
+
import useMount from "../hooks/useMount";
|
|
8
|
+
import useUpdateEffect from "../hooks/useUpdateEffect";
|
|
6
9
|
export var THEME_KEY = "theme";
|
|
7
10
|
export var THEME_DEFAULT = "light";
|
|
8
11
|
export var getInitialThemeFromRequest = function (cookie) {
|