@hanzogui/use-direction 8.3.5 → 8.4.0
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/LICENSE +26 -0
- package/NOTICE +60 -0
- package/dist/cjs/useDirection.js +46 -2
- package/dist/cjs/useDirection.js.map +1 -1
- package/dist/esm/useDirection.js +44 -1
- package/dist/esm/useDirection.js.map +1 -1
- package/package.json +5 -4
- package/src/useDirection.tsx +52 -2
- package/types/useDirection.d.ts +11 -1
- package/types/useDirection.d.ts.map +1 -1
package/LICENSE
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2020 Nate Wienert
|
|
4
|
+
Copyright (c) 2015-present, Nicolas Gallagher.
|
|
5
|
+
Copyright (c) 2015-present, Facebook, Inc.
|
|
6
|
+
Copyright (c) 2021 Radix
|
|
7
|
+
Copyright (c) 2017 Carmelo Pullara
|
|
8
|
+
Copyright (c) 2018 Framer B.V.
|
|
9
|
+
|
|
10
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
11
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
12
|
+
in the Software without restriction, including without limitation the rights
|
|
13
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
14
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
15
|
+
furnished to do so, subject to the following conditions:
|
|
16
|
+
|
|
17
|
+
The above copyright notice and this permission notice shall be included in all
|
|
18
|
+
copies or substantial portions of the Software.
|
|
19
|
+
|
|
20
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
21
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
22
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
23
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
24
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
25
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
26
|
+
SOFTWARE.
|
package/NOTICE
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
Hanzo GUI
|
|
2
|
+
Copyright (c) 2026-present, Hanzo AI, Inc.
|
|
3
|
+
|
|
4
|
+
This product is derived from Tamagui (https://github.com/tamagui/tamagui),
|
|
5
|
+
licensed under the MIT License. Its original copyright and permission notices
|
|
6
|
+
are reproduced below, as that license requires:
|
|
7
|
+
|
|
8
|
+
MIT License
|
|
9
|
+
|
|
10
|
+
Copyright (c) 2020 Nate Wienert
|
|
11
|
+
Copyright (c) 2015-present, Nicolas Gallagher.
|
|
12
|
+
Copyright (c) 2015-present, Facebook, Inc.
|
|
13
|
+
Copyright (c) 2021 Radix
|
|
14
|
+
Copyright (c) 2017 Carmelo Pullara
|
|
15
|
+
Copyright (c) 2018 Framer B.V.
|
|
16
|
+
|
|
17
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
18
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
19
|
+
in the Software without restriction, including without limitation the rights
|
|
20
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
21
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
22
|
+
furnished to do so, subject to the following conditions:
|
|
23
|
+
|
|
24
|
+
The above copyright notice and this permission notice shall be included in all
|
|
25
|
+
copies or substantial portions of the Software.
|
|
26
|
+
|
|
27
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
28
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
29
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
30
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
31
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
32
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
33
|
+
SOFTWARE.
|
|
34
|
+
|
|
35
|
+
--- Fork provenance ---
|
|
36
|
+
|
|
37
|
+
Hanzo GUI is a fork of Tamagui, not a product that bundles it. The git history
|
|
38
|
+
in this repository is Tamagui's history continued, and every package in this
|
|
39
|
+
workspace except the nine listed below is Tamagui's work, carried here under the
|
|
40
|
+
MIT license above. Renaming those packages into the @hanzogui scope changed what
|
|
41
|
+
they are called, not who wrote them.
|
|
42
|
+
|
|
43
|
+
Written at Hanzo:
|
|
44
|
+
|
|
45
|
+
@hanzogui/shell pkgs/ui/shell
|
|
46
|
+
@hanzogui/chrome pkgs/ui/chrome
|
|
47
|
+
@hanzogui/telemetry pkgs/telemetry
|
|
48
|
+
@hanzo/booker pkgs/calendar
|
|
49
|
+
@hanzogui/tauri pkgs/tauri
|
|
50
|
+
@hanzogui/get pkgs/get
|
|
51
|
+
@hanzogui/recipes pkgs/recipes
|
|
52
|
+
@hanzogui/font-zen pkgs/core/font-zen
|
|
53
|
+
@hanzogui/desktop apps/desktop
|
|
54
|
+
|
|
55
|
+
This file is the whole of the attribution, and it has to be exact rather than
|
|
56
|
+
approximate. Apart from it, the LICENSE, and one line of descent in the README,
|
|
57
|
+
the upstream name is deliberately absent from the product surface — the package
|
|
58
|
+
names, the UI, and the documentation site. That is the house rule for every
|
|
59
|
+
import we carry. Hanzo GUI is not affiliated with, sponsored by, or endorsed by
|
|
60
|
+
Tamagui.
|
package/dist/cjs/useDirection.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.Provider = exports.DirectionProvider = void 0;
|
|
3
|
+
exports.mirror = exports.Provider = exports.DirectionProvider = void 0;
|
|
4
|
+
exports.getDocumentDirection = getDocumentDirection;
|
|
4
5
|
exports.useDirection = useDirection;
|
|
5
6
|
const tslib_1 = require("tslib");
|
|
6
7
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
@@ -12,9 +13,52 @@ const DirectionProvider = (props) => {
|
|
|
12
13
|
return (0, jsx_runtime_1.jsx)(DirectionContext.Provider, { value: dir, children: children });
|
|
13
14
|
};
|
|
14
15
|
exports.DirectionProvider = DirectionProvider;
|
|
16
|
+
// The document's own direction: what an i18n layer sets with
|
|
17
|
+
// <html dir="rtl">. One observer serves every subscriber, and a change re-renders
|
|
18
|
+
// whatever read it, so switching language flips keyboard and slider direction
|
|
19
|
+
// without a provider anywhere.
|
|
20
|
+
const listeners = new Set();
|
|
21
|
+
let observer;
|
|
22
|
+
function subscribe(listener) {
|
|
23
|
+
if (typeof document === 'undefined' || typeof MutationObserver === 'undefined') {
|
|
24
|
+
return () => { };
|
|
25
|
+
}
|
|
26
|
+
listeners.add(listener);
|
|
27
|
+
if (!observer) {
|
|
28
|
+
observer = new MutationObserver(() => {
|
|
29
|
+
for (const notify of listeners)
|
|
30
|
+
notify();
|
|
31
|
+
});
|
|
32
|
+
observer.observe(document.documentElement, {
|
|
33
|
+
attributes: true,
|
|
34
|
+
attributeFilter: ['dir'],
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
return () => {
|
|
38
|
+
listeners.delete(listener);
|
|
39
|
+
if (!listeners.size && observer) {
|
|
40
|
+
observer.disconnect();
|
|
41
|
+
observer = undefined;
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
function getDocumentDirection() {
|
|
46
|
+
if (typeof document === 'undefined')
|
|
47
|
+
return 'ltr';
|
|
48
|
+
return document.documentElement.dir.toLowerCase() === 'rtl' ? 'rtl' : 'ltr';
|
|
49
|
+
}
|
|
50
|
+
const serverDirection = () => 'ltr';
|
|
15
51
|
function useDirection(localDir) {
|
|
16
52
|
const globalDir = React.useContext(DirectionContext);
|
|
17
|
-
|
|
53
|
+
const documentDir = React.useSyncExternalStore(subscribe, getDocumentDirection, serverDirection);
|
|
54
|
+
return localDir || globalDir || documentDir;
|
|
18
55
|
}
|
|
19
56
|
exports.Provider = exports.DirectionProvider;
|
|
57
|
+
/**
|
|
58
|
+
* Spread onto an icon whose meaning is a direction (chevron, arrow, back,
|
|
59
|
+
* forward, send) so it mirrors under RTL. Never on logos, media controls,
|
|
60
|
+
* numbers, code or a chart's time axis. The rule that reads it:
|
|
61
|
+
* `[data-i18n-mirror]:dir(rtl) { transform: scaleX(-1) }`.
|
|
62
|
+
*/
|
|
63
|
+
exports.mirror = { 'data-i18n-mirror': '' };
|
|
20
64
|
//# sourceMappingURL=useDirection.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDirection.js","sourceRoot":"","sources":["../../src/useDirection.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useDirection.js","sourceRoot":"","sources":["../../src/useDirection.tsx"],"names":[],"mappings":";;;;;;;AAAA,0GAA0G;AAE1G,MAAY,KAAK,0CAAa;AAG9B,MAAM,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAAwB,SAAS,CAAC,CAAA;AAOvE,MAAM,iBAAiB,GAAqC,CAAC,KAAK,EAAE,EAAE;IAC3E,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;IAC/B,OAAO,uBAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,YAAG,QAAQ,GAA6B,CAAA;AACtF,CAAC,CAAA;AAHY,QAAA,iBAAiB,GAAjB,iBAAiB,CAG7B;AAED,6DAA6D;AAC7D,kFAAkF;AAClF,8EAA8E;AAC9E,+BAA+B;AAC/B,MAAM,SAAS,GAAG,IAAI,GAAG,EAAc,CAAA;AACvC,IAAI,QAAsC,CAAA;AAE1C,SAAS,SAAS,CAAC,QAAoB;IACrC,IAAI,OAAO,QAAQ,KAAK,WAAW,IAAI,OAAO,gBAAgB,KAAK,WAAW,EAAE,CAAC;QAC/E,OAAO,GAAG,EAAE,GAAE,CAAC,CAAA;IACjB,CAAC;IACD,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;IACvB,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YACnC,KAAK,MAAM,MAAM,IAAI,SAAS;gBAAE,MAAM,EAAE,CAAA;QAC1C,CAAC,CAAC,CAAA;QACF,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,eAAe,EAAE;YACzC,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,KAAK,CAAC;SACzB,CAAC,CAAA;IACJ,CAAC;IACD,OAAO,GAAG,EAAE;QACV,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAA;QAC1B,IAAI,CAAC,SAAS,CAAC,IAAI,IAAI,QAAQ,EAAE,CAAC;YAChC,QAAQ,CAAC,UAAU,EAAE,CAAA;YACrB,QAAQ,GAAG,SAAS,CAAA;QACtB,CAAC;IACH,CAAC,CAAA;AACH,CAAC;AAED;IACE,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAO,KAAK,CAAA;IACjD,OAAO,QAAQ,CAAC,eAAe,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAA;AAC7E,CAAC;AAED,MAAM,eAAe,GAAG,GAAc,EAAE,CAAC,KAAK,CAAA;AAE9C,sBAA6B,QAAoB;IAC/C,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAA;IACpD,MAAM,WAAW,GAAG,KAAK,CAAC,oBAAoB,CAC5C,SAAS,EACT,oBAAoB,EACpB,eAAe,CAChB,CAAA;IACD,OAAO,QAAQ,IAAI,SAAS,IAAI,WAAW,CAAA;AAC7C,CAAC;AAEY,QAAA,QAAQ,GAAqC,QAAA,iBAAiB,CAAA;AAE3E;;;;;GAKG;AACU,QAAA,MAAM,GAAG,EAAE,kBAAkB,EAAE,EAAE,EAAW,CAAA"}
|
package/dist/esm/useDirection.js
CHANGED
|
@@ -6,9 +6,52 @@ export const DirectionProvider = (props) => {
|
|
|
6
6
|
const { dir, children } = props;
|
|
7
7
|
return _jsx(DirectionContext.Provider, { value: dir, children: children });
|
|
8
8
|
};
|
|
9
|
+
// The document's own direction: what an i18n layer sets with
|
|
10
|
+
// <html dir="rtl">. One observer serves every subscriber, and a change re-renders
|
|
11
|
+
// whatever read it, so switching language flips keyboard and slider direction
|
|
12
|
+
// without a provider anywhere.
|
|
13
|
+
const listeners = new Set();
|
|
14
|
+
let observer;
|
|
15
|
+
function subscribe(listener) {
|
|
16
|
+
if (typeof document === 'undefined' || typeof MutationObserver === 'undefined') {
|
|
17
|
+
return () => { };
|
|
18
|
+
}
|
|
19
|
+
listeners.add(listener);
|
|
20
|
+
if (!observer) {
|
|
21
|
+
observer = new MutationObserver(() => {
|
|
22
|
+
for (const notify of listeners)
|
|
23
|
+
notify();
|
|
24
|
+
});
|
|
25
|
+
observer.observe(document.documentElement, {
|
|
26
|
+
attributes: true,
|
|
27
|
+
attributeFilter: ['dir'],
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
return () => {
|
|
31
|
+
listeners.delete(listener);
|
|
32
|
+
if (!listeners.size && observer) {
|
|
33
|
+
observer.disconnect();
|
|
34
|
+
observer = undefined;
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
export function getDocumentDirection() {
|
|
39
|
+
if (typeof document === 'undefined')
|
|
40
|
+
return 'ltr';
|
|
41
|
+
return document.documentElement.dir.toLowerCase() === 'rtl' ? 'rtl' : 'ltr';
|
|
42
|
+
}
|
|
43
|
+
const serverDirection = () => 'ltr';
|
|
9
44
|
export function useDirection(localDir) {
|
|
10
45
|
const globalDir = React.useContext(DirectionContext);
|
|
11
|
-
|
|
46
|
+
const documentDir = React.useSyncExternalStore(subscribe, getDocumentDirection, serverDirection);
|
|
47
|
+
return localDir || globalDir || documentDir;
|
|
12
48
|
}
|
|
13
49
|
export const Provider = DirectionProvider;
|
|
50
|
+
/**
|
|
51
|
+
* Spread onto an icon whose meaning is a direction (chevron, arrow, back,
|
|
52
|
+
* forward, send) so it mirrors under RTL. Never on logos, media controls,
|
|
53
|
+
* numbers, code or a chart's time axis. The rule that reads it:
|
|
54
|
+
* `[data-i18n-mirror]:dir(rtl) { transform: scaleX(-1) }`.
|
|
55
|
+
*/
|
|
56
|
+
export const mirror = { 'data-i18n-mirror': '' };
|
|
14
57
|
//# sourceMappingURL=useDirection.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDirection.js","sourceRoot":"","sources":["../../src/useDirection.tsx"],"names":[],"mappings":";AAAA,0GAA0G;AAE1G,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAAwB,SAAS,CAAC,CAAA;AAO9E,MAAM,CAAC,MAAM,iBAAiB,GAAqC,CAAC,KAAK,EAAE,EAAE;IAC3E,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;IAC/B,OAAO,KAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,YAAG,QAAQ,GAA6B,CAAA;AACtF,CAAC,CAAA;AAED,MAAM,UAAU,YAAY,CAAC,QAAoB;IAC/C,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAA;IACpD,OAAO,QAAQ,IAAI,SAAS,IAAI,
|
|
1
|
+
{"version":3,"file":"useDirection.js","sourceRoot":"","sources":["../../src/useDirection.tsx"],"names":[],"mappings":";AAAA,0GAA0G;AAE1G,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAAwB,SAAS,CAAC,CAAA;AAO9E,MAAM,CAAC,MAAM,iBAAiB,GAAqC,CAAC,KAAK,EAAE,EAAE;IAC3E,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;IAC/B,OAAO,KAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,YAAG,QAAQ,GAA6B,CAAA;AACtF,CAAC,CAAA;AAED,6DAA6D;AAC7D,kFAAkF;AAClF,8EAA8E;AAC9E,+BAA+B;AAC/B,MAAM,SAAS,GAAG,IAAI,GAAG,EAAc,CAAA;AACvC,IAAI,QAAsC,CAAA;AAE1C,SAAS,SAAS,CAAC,QAAoB;IACrC,IAAI,OAAO,QAAQ,KAAK,WAAW,IAAI,OAAO,gBAAgB,KAAK,WAAW,EAAE,CAAC;QAC/E,OAAO,GAAG,EAAE,GAAE,CAAC,CAAA;IACjB,CAAC;IACD,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;IACvB,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YACnC,KAAK,MAAM,MAAM,IAAI,SAAS;gBAAE,MAAM,EAAE,CAAA;QAC1C,CAAC,CAAC,CAAA;QACF,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,eAAe,EAAE;YACzC,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,KAAK,CAAC;SACzB,CAAC,CAAA;IACJ,CAAC;IACD,OAAO,GAAG,EAAE;QACV,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAA;QAC1B,IAAI,CAAC,SAAS,CAAC,IAAI,IAAI,QAAQ,EAAE,CAAC;YAChC,QAAQ,CAAC,UAAU,EAAE,CAAA;YACrB,QAAQ,GAAG,SAAS,CAAA;QACtB,CAAC;IACH,CAAC,CAAA;AACH,CAAC;AAED,MAAM,UAAU,oBAAoB;IAClC,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAO,KAAK,CAAA;IACjD,OAAO,QAAQ,CAAC,eAAe,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAA;AAC7E,CAAC;AAED,MAAM,eAAe,GAAG,GAAc,EAAE,CAAC,KAAK,CAAA;AAE9C,MAAM,UAAU,YAAY,CAAC,QAAoB;IAC/C,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAA;IACpD,MAAM,WAAW,GAAG,KAAK,CAAC,oBAAoB,CAC5C,SAAS,EACT,oBAAoB,EACpB,eAAe,CAChB,CAAA;IACD,OAAO,QAAQ,IAAI,SAAS,IAAI,WAAW,CAAA;AAC7C,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAqC,iBAAiB,CAAA;AAE3E;;;;;GAKG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,EAAE,kBAAkB,EAAE,EAAE,EAAW,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hanzogui/use-direction",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.4.0",
|
|
4
4
|
"gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14",
|
|
5
5
|
"files": [
|
|
6
|
+
"NOTICE",
|
|
7
|
+
"dist",
|
|
6
8
|
"src",
|
|
7
|
-
"types"
|
|
8
|
-
"dist"
|
|
9
|
+
"types"
|
|
9
10
|
],
|
|
10
11
|
"type": "module",
|
|
11
12
|
"sideEffects": false,
|
|
@@ -34,7 +35,7 @@
|
|
|
34
35
|
"clean:build": "hanzogui-build clean:build"
|
|
35
36
|
},
|
|
36
37
|
"devDependencies": {
|
|
37
|
-
"@hanzogui/build": "8.
|
|
38
|
+
"@hanzogui/build": "8.4.0",
|
|
38
39
|
"react": "19.2.8"
|
|
39
40
|
},
|
|
40
41
|
"peerDependencies": {
|
package/src/useDirection.tsx
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
import * as React from 'react'
|
|
4
4
|
|
|
5
|
-
type Direction = 'ltr' | 'rtl'
|
|
5
|
+
export type Direction = 'ltr' | 'rtl'
|
|
6
6
|
const DirectionContext = React.createContext<Direction | undefined>(undefined)
|
|
7
7
|
|
|
8
8
|
interface DirectionProviderProps {
|
|
@@ -15,9 +15,59 @@ export const DirectionProvider: React.FC<DirectionProviderProps> = (props) => {
|
|
|
15
15
|
return <DirectionContext.Provider value={dir}>{children}</DirectionContext.Provider>
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
+
// The document's own direction: what an i18n layer sets with
|
|
19
|
+
// <html dir="rtl">. One observer serves every subscriber, and a change re-renders
|
|
20
|
+
// whatever read it, so switching language flips keyboard and slider direction
|
|
21
|
+
// without a provider anywhere.
|
|
22
|
+
const listeners = new Set<() => void>()
|
|
23
|
+
let observer: MutationObserver | undefined
|
|
24
|
+
|
|
25
|
+
function subscribe(listener: () => void) {
|
|
26
|
+
if (typeof document === 'undefined' || typeof MutationObserver === 'undefined') {
|
|
27
|
+
return () => {}
|
|
28
|
+
}
|
|
29
|
+
listeners.add(listener)
|
|
30
|
+
if (!observer) {
|
|
31
|
+
observer = new MutationObserver(() => {
|
|
32
|
+
for (const notify of listeners) notify()
|
|
33
|
+
})
|
|
34
|
+
observer.observe(document.documentElement, {
|
|
35
|
+
attributes: true,
|
|
36
|
+
attributeFilter: ['dir'],
|
|
37
|
+
})
|
|
38
|
+
}
|
|
39
|
+
return () => {
|
|
40
|
+
listeners.delete(listener)
|
|
41
|
+
if (!listeners.size && observer) {
|
|
42
|
+
observer.disconnect()
|
|
43
|
+
observer = undefined
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
export function getDocumentDirection(): Direction {
|
|
49
|
+
if (typeof document === 'undefined') return 'ltr'
|
|
50
|
+
return document.documentElement.dir.toLowerCase() === 'rtl' ? 'rtl' : 'ltr'
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
const serverDirection = (): Direction => 'ltr'
|
|
54
|
+
|
|
18
55
|
export function useDirection(localDir?: Direction): Direction {
|
|
19
56
|
const globalDir = React.useContext(DirectionContext)
|
|
20
|
-
|
|
57
|
+
const documentDir = React.useSyncExternalStore(
|
|
58
|
+
subscribe,
|
|
59
|
+
getDocumentDirection,
|
|
60
|
+
serverDirection
|
|
61
|
+
)
|
|
62
|
+
return localDir || globalDir || documentDir
|
|
21
63
|
}
|
|
22
64
|
|
|
23
65
|
export const Provider: React.FC<DirectionProviderProps> = DirectionProvider
|
|
66
|
+
|
|
67
|
+
/**
|
|
68
|
+
* Spread onto an icon whose meaning is a direction (chevron, arrow, back,
|
|
69
|
+
* forward, send) so it mirrors under RTL. Never on logos, media controls,
|
|
70
|
+
* numbers, code or a chart's time axis. The rule that reads it:
|
|
71
|
+
* `[data-i18n-mirror]:dir(rtl) { transform: scaleX(-1) }`.
|
|
72
|
+
*/
|
|
73
|
+
export const mirror = { 'data-i18n-mirror': '' } as const
|
package/types/useDirection.d.ts
CHANGED
|
@@ -1,11 +1,21 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
type Direction = 'ltr' | 'rtl';
|
|
2
|
+
export type Direction = 'ltr' | 'rtl';
|
|
3
3
|
interface DirectionProviderProps {
|
|
4
4
|
children?: React.ReactNode;
|
|
5
5
|
dir: Direction;
|
|
6
6
|
}
|
|
7
7
|
export declare const DirectionProvider: React.FC<DirectionProviderProps>;
|
|
8
|
+
export declare function getDocumentDirection(): Direction;
|
|
8
9
|
export declare function useDirection(localDir?: Direction): Direction;
|
|
9
10
|
export declare const Provider: React.FC<DirectionProviderProps>;
|
|
11
|
+
/**
|
|
12
|
+
* Spread onto an icon whose meaning is a direction (chevron, arrow, back,
|
|
13
|
+
* forward, send) so it mirrors under RTL. Never on logos, media controls,
|
|
14
|
+
* numbers, code or a chart's time axis. The rule that reads it:
|
|
15
|
+
* `[data-i18n-mirror]:dir(rtl) { transform: scaleX(-1) }`.
|
|
16
|
+
*/
|
|
17
|
+
export declare const mirror: {
|
|
18
|
+
readonly 'data-i18n-mirror': '';
|
|
19
|
+
};
|
|
10
20
|
export {};
|
|
11
21
|
//# sourceMappingURL=useDirection.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDirection.d.ts","sourceRoot":"","sources":["../src/useDirection.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,
|
|
1
|
+
{"version":3,"file":"useDirection.d.ts","sourceRoot":"","sources":["../src/useDirection.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,KAAK,CAAA;AAGrC,UAAU,sBAAsB;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,GAAG,EAAE,SAAS,CAAA;CACf;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAG9D,CAAA;AAgCD,wBAAgB,oBAAoB,IAAI,SAAS,CAGhD;AAID,wBAAgB,YAAY,CAAC,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,CAQ5D;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAAqB,CAAA;AAE3E;;;;;GAKG;AACH,eAAO,MAAM,MAAM;aAAK,kBAAkB,EAAE,EAAE;CAAW,CAAA"}
|