@ark-ui/react 5.38.2 → 5.39.1
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/dist/components/anatomy.cjs +7 -0
- package/dist/components/anatomy.d.cts +1 -0
- package/dist/components/anatomy.d.ts +1 -0
- package/dist/components/anatomy.js +2 -1
- package/dist/components/collapsible/split-collapsible-props.d.cts +1 -1
- package/dist/components/collapsible/split-collapsible-props.d.ts +1 -1
- package/dist/components/factory.cjs +9 -1
- package/dist/components/factory.js +9 -1
- package/dist/components/field/use-field.cjs +1 -1
- package/dist/components/field/use-field.js +2 -2
- package/dist/components/fieldset/use-fieldset.js +1 -1
- package/dist/components/index.cjs +38 -0
- package/dist/components/index.d.cts +1 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +15 -1
- package/dist/components/navigation-menu/navigation-menu-content.cjs +1 -1
- package/dist/components/navigation-menu/navigation-menu-content.js +1 -1
- package/dist/components/presence/split-presence-props.cjs +1 -0
- package/dist/components/presence/split-presence-props.d.cts +1 -1
- package/dist/components/presence/split-presence-props.d.ts +1 -1
- package/dist/components/presence/split-presence-props.js +1 -0
- package/dist/components/presence/use-presence.cjs +1 -0
- package/dist/components/presence/use-presence.js +1 -0
- package/dist/components/toc/index.cjs +39 -0
- package/dist/components/toc/index.d.cts +15 -0
- package/dist/components/toc/index.d.ts +15 -0
- package/dist/components/toc/index.js +15 -0
- package/dist/components/toc/toc-content.cjs +13 -0
- package/dist/components/toc/toc-content.d.cts +7 -0
- package/dist/components/toc/toc-content.d.ts +7 -0
- package/dist/components/toc/toc-content.js +13 -0
- package/dist/components/toc/toc-context.cjs +5 -0
- package/dist/components/toc/toc-context.d.cts +6 -0
- package/dist/components/toc/toc-context.d.ts +6 -0
- package/dist/components/toc/toc-context.js +5 -0
- package/dist/components/toc/toc-indicator.cjs +17 -0
- package/dist/components/toc/toc-indicator.d.cts +7 -0
- package/dist/components/toc/toc-indicator.d.ts +7 -0
- package/dist/components/toc/toc-indicator.js +17 -0
- package/dist/components/toc/toc-item.cjs +24 -0
- package/dist/components/toc/toc-item.d.cts +8 -0
- package/dist/components/toc/toc-item.d.ts +8 -0
- package/dist/components/toc/toc-item.js +24 -0
- package/dist/components/toc/toc-link.cjs +19 -0
- package/dist/components/toc/toc-link.d.cts +7 -0
- package/dist/components/toc/toc-link.d.ts +7 -0
- package/dist/components/toc/toc-link.js +19 -0
- package/dist/components/toc/toc-list.cjs +17 -0
- package/dist/components/toc/toc-list.d.cts +7 -0
- package/dist/components/toc/toc-list.d.ts +7 -0
- package/dist/components/toc/toc-list.js +17 -0
- package/dist/components/toc/toc-nav.cjs +19 -0
- package/dist/components/toc/toc-nav.d.cts +8 -0
- package/dist/components/toc/toc-nav.d.ts +8 -0
- package/dist/components/toc/toc-nav.js +19 -0
- package/dist/components/toc/toc-root-provider.cjs +20 -0
- package/dist/components/toc/toc-root-provider.d.cts +13 -0
- package/dist/components/toc/toc-root-provider.d.ts +13 -0
- package/dist/components/toc/toc-root-provider.js +20 -0
- package/dist/components/toc/toc-root.cjs +36 -0
- package/dist/components/toc/toc-root.d.cts +9 -0
- package/dist/components/toc/toc-root.d.ts +9 -0
- package/dist/components/toc/toc-root.js +36 -0
- package/dist/components/toc/toc-title.cjs +17 -0
- package/dist/components/toc/toc-title.d.cts +7 -0
- package/dist/components/toc/toc-title.d.ts +7 -0
- package/dist/components/toc/toc-title.js +17 -0
- package/dist/components/toc/toc.anatomy.d.cts +1 -0
- package/dist/components/toc/toc.anatomy.d.ts +1 -0
- package/dist/components/toc/toc.anatomy.js +2 -0
- package/dist/components/toc/toc.cjs +41 -0
- package/dist/components/toc/toc.d.cts +11 -0
- package/dist/components/toc/toc.d.ts +11 -0
- package/dist/components/toc/toc.js +26 -0
- package/dist/components/toc/use-toc-context.cjs +9 -0
- package/dist/components/toc/use-toc-context.d.cts +5 -0
- package/dist/components/toc/use-toc-context.d.ts +5 -0
- package/dist/components/toc/use-toc-context.js +9 -0
- package/dist/components/toc/use-toc-item-props-context.cjs +9 -0
- package/dist/components/toc/use-toc-item-props-context.d.cts +5 -0
- package/dist/components/toc/use-toc-item-props-context.d.ts +5 -0
- package/dist/components/toc/use-toc-item-props-context.js +9 -0
- package/dist/components/toc/use-toc.cjs +24 -0
- package/dist/components/toc/use-toc.d.cts +8 -0
- package/dist/components/toc/use-toc.d.ts +8 -0
- package/dist/components/toc/use-toc.js +22 -0
- package/dist/index.cjs +106 -0
- package/dist/index.js +26 -1
- package/dist/providers/hotkeys/index.cjs +56 -0
- package/dist/providers/hotkeys/index.d.cts +11 -0
- package/dist/providers/hotkeys/index.d.ts +11 -0
- package/dist/providers/hotkeys/index.js +11 -0
- package/dist/providers/hotkeys/use-format-hotkey.cjs +14 -0
- package/dist/providers/hotkeys/use-format-hotkey.d.cts +3 -0
- package/dist/providers/hotkeys/use-format-hotkey.d.ts +3 -0
- package/dist/providers/hotkeys/use-format-hotkey.js +14 -0
- package/dist/providers/hotkeys/use-hotkey-recorder.cjs +58 -0
- package/dist/providers/hotkeys/use-hotkey-recorder.d.cts +30 -0
- package/dist/providers/hotkeys/use-hotkey-recorder.d.ts +30 -0
- package/dist/providers/hotkeys/use-hotkey-recorder.js +58 -0
- package/dist/providers/hotkeys/use-hotkey-registrations.cjs +12 -0
- package/dist/providers/hotkeys/use-hotkey-registrations.d.cts +3 -0
- package/dist/providers/hotkeys/use-hotkey-registrations.d.ts +3 -0
- package/dist/providers/hotkeys/use-hotkey-registrations.js +12 -0
- package/dist/providers/hotkeys/use-hotkey-store.cjs +23 -0
- package/dist/providers/hotkeys/use-hotkey-store.d.cts +12 -0
- package/dist/providers/hotkeys/use-hotkey-store.d.ts +12 -0
- package/dist/providers/hotkeys/use-hotkey-store.js +23 -0
- package/dist/providers/hotkeys/use-hotkey.cjs +12 -0
- package/dist/providers/hotkeys/use-hotkey.d.cts +4 -0
- package/dist/providers/hotkeys/use-hotkey.d.ts +4 -0
- package/dist/providers/hotkeys/use-hotkey.js +12 -0
- package/dist/providers/hotkeys/use-hotkeys.cjs +69 -0
- package/dist/providers/hotkeys/use-hotkeys.d.cts +21 -0
- package/dist/providers/hotkeys/use-hotkeys.d.ts +21 -0
- package/dist/providers/hotkeys/use-hotkeys.js +69 -0
- package/dist/providers/hotkeys/use-is-key-pressed.cjs +13 -0
- package/dist/providers/hotkeys/use-is-key-pressed.d.cts +8 -0
- package/dist/providers/hotkeys/use-is-key-pressed.d.ts +8 -0
- package/dist/providers/hotkeys/use-is-key-pressed.js +13 -0
- package/dist/providers/hotkeys/use-platform.cjs +18 -0
- package/dist/providers/hotkeys/use-platform.d.cts +2 -0
- package/dist/providers/hotkeys/use-platform.d.ts +2 -0
- package/dist/providers/hotkeys/use-platform.js +18 -0
- package/dist/providers/hotkeys/use-pressed-keys.cjs +12 -0
- package/dist/providers/hotkeys/use-pressed-keys.d.cts +2 -0
- package/dist/providers/hotkeys/use-pressed-keys.d.ts +2 -0
- package/dist/providers/hotkeys/use-pressed-keys.js +12 -0
- package/dist/providers/hotkeys/use-store-snapshot.cjs +23 -0
- package/dist/providers/hotkeys/use-store-snapshot.d.cts +2 -0
- package/dist/providers/hotkeys/use-store-snapshot.d.ts +2 -0
- package/dist/providers/hotkeys/use-store-snapshot.js +23 -0
- package/dist/providers/index.cjs +55 -0
- package/dist/providers/index.d.cts +1 -0
- package/dist/providers/index.d.ts +1 -0
- package/dist/providers/index.js +11 -1
- package/dist/utils/attr.d.cts +1 -0
- package/dist/utils/attr.d.ts +1 -0
- package/dist/utils/attr.js +2 -0
- package/dist/utils/index.cjs +13 -0
- package/dist/utils/index.d.cts +1 -0
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/index.js +2 -1
- package/package.json +86 -83
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
const require_use_environment_context = require("../environment/use-environment-context.cjs");
|
|
3
|
+
const require_use_safe_layout_effect = require("../../utils/use-safe-layout-effect.cjs");
|
|
4
|
+
const require_use_event = require("../../utils/use-event.cjs");
|
|
5
|
+
let react = require("react");
|
|
6
|
+
let _zag_js_hotkeys = require("@zag-js/hotkeys");
|
|
7
|
+
//#region src/providers/hotkeys/use-hotkey-recorder.ts
|
|
8
|
+
var useHotkeyRecorder = (props = {}) => {
|
|
9
|
+
const { formatOptions, sequenceTimeoutMs } = props;
|
|
10
|
+
const env = require_use_environment_context.useEnvironmentContext();
|
|
11
|
+
const [recorder] = (0, react.useState)(() => (0, _zag_js_hotkeys.createHotkeyRecorder)());
|
|
12
|
+
const onRecord = require_use_event.useEvent(props.onRecord);
|
|
13
|
+
const onCancel = require_use_event.useEvent(props.onCancel);
|
|
14
|
+
const onClear = require_use_event.useEvent(props.onClear);
|
|
15
|
+
require_use_safe_layout_effect.useSafeLayoutEffect(() => {
|
|
16
|
+
recorder.init(env.getRootNode());
|
|
17
|
+
recorder.setOptions({
|
|
18
|
+
onRecord,
|
|
19
|
+
onCancel,
|
|
20
|
+
onClear
|
|
21
|
+
});
|
|
22
|
+
return () => {
|
|
23
|
+
recorder.destroy();
|
|
24
|
+
};
|
|
25
|
+
}, [
|
|
26
|
+
recorder,
|
|
27
|
+
env,
|
|
28
|
+
onRecord,
|
|
29
|
+
onCancel,
|
|
30
|
+
onClear
|
|
31
|
+
]);
|
|
32
|
+
const formatRef = (0, react.useRef)(formatOptions);
|
|
33
|
+
formatRef.current = formatOptions;
|
|
34
|
+
const formatKey = formatOptions ? JSON.stringify(formatOptions) : "";
|
|
35
|
+
require_use_safe_layout_effect.useSafeLayoutEffect(() => {
|
|
36
|
+
recorder.setOptions({
|
|
37
|
+
...formatRef.current && { formatOptions: formatRef.current },
|
|
38
|
+
...sequenceTimeoutMs !== void 0 && { sequenceTimeoutMs }
|
|
39
|
+
});
|
|
40
|
+
}, [
|
|
41
|
+
recorder,
|
|
42
|
+
formatKey,
|
|
43
|
+
sequenceTimeoutMs
|
|
44
|
+
]);
|
|
45
|
+
const subscribe = (0, react.useCallback)((onChange) => recorder.subscribe(onChange), [recorder]);
|
|
46
|
+
const getSnapshot = (0, react.useCallback)(() => recorder.getState(), [recorder]);
|
|
47
|
+
const state = (0, react.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
|
|
48
|
+
return (0, react.useMemo)(() => ({
|
|
49
|
+
recording: state.recording,
|
|
50
|
+
value: state.value,
|
|
51
|
+
start: () => void recorder.start(),
|
|
52
|
+
stop: () => void recorder.stop(),
|
|
53
|
+
cancel: () => void recorder.cancel(),
|
|
54
|
+
clear: () => void recorder.clear()
|
|
55
|
+
}), [state, recorder]);
|
|
56
|
+
};
|
|
57
|
+
//#endregion
|
|
58
|
+
exports.useHotkeyRecorder = useHotkeyRecorder;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { HotkeyRecorderOptions, RecordedHotkey } from '@zag-js/hotkeys';
|
|
2
|
+
export interface UseHotkeyRecorderProps extends Omit<HotkeyRecorderOptions, 'target'> {
|
|
3
|
+
}
|
|
4
|
+
export interface UseHotkeyRecorderReturn {
|
|
5
|
+
/**
|
|
6
|
+
* Whether the recorder is currently listening for key events.
|
|
7
|
+
*/
|
|
8
|
+
recording: boolean;
|
|
9
|
+
/**
|
|
10
|
+
* The hotkey recorded so far, or `null` if nothing has been recorded.
|
|
11
|
+
*/
|
|
12
|
+
value: RecordedHotkey | null;
|
|
13
|
+
/**
|
|
14
|
+
* Start listening for key events.
|
|
15
|
+
*/
|
|
16
|
+
start: () => void;
|
|
17
|
+
/**
|
|
18
|
+
* Stop listening and finalize the recorded hotkey.
|
|
19
|
+
*/
|
|
20
|
+
stop: () => void;
|
|
21
|
+
/**
|
|
22
|
+
* Stop listening and discard the recorded hotkey.
|
|
23
|
+
*/
|
|
24
|
+
cancel: () => void;
|
|
25
|
+
/**
|
|
26
|
+
* Clear the recorded hotkey.
|
|
27
|
+
*/
|
|
28
|
+
clear: () => void;
|
|
29
|
+
}
|
|
30
|
+
export declare const useHotkeyRecorder: (props?: UseHotkeyRecorderProps) => UseHotkeyRecorderReturn;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { HotkeyRecorderOptions, RecordedHotkey } from '@zag-js/hotkeys';
|
|
2
|
+
export interface UseHotkeyRecorderProps extends Omit<HotkeyRecorderOptions, 'target'> {
|
|
3
|
+
}
|
|
4
|
+
export interface UseHotkeyRecorderReturn {
|
|
5
|
+
/**
|
|
6
|
+
* Whether the recorder is currently listening for key events.
|
|
7
|
+
*/
|
|
8
|
+
recording: boolean;
|
|
9
|
+
/**
|
|
10
|
+
* The hotkey recorded so far, or `null` if nothing has been recorded.
|
|
11
|
+
*/
|
|
12
|
+
value: RecordedHotkey | null;
|
|
13
|
+
/**
|
|
14
|
+
* Start listening for key events.
|
|
15
|
+
*/
|
|
16
|
+
start: () => void;
|
|
17
|
+
/**
|
|
18
|
+
* Stop listening and finalize the recorded hotkey.
|
|
19
|
+
*/
|
|
20
|
+
stop: () => void;
|
|
21
|
+
/**
|
|
22
|
+
* Stop listening and discard the recorded hotkey.
|
|
23
|
+
*/
|
|
24
|
+
cancel: () => void;
|
|
25
|
+
/**
|
|
26
|
+
* Clear the recorded hotkey.
|
|
27
|
+
*/
|
|
28
|
+
clear: () => void;
|
|
29
|
+
}
|
|
30
|
+
export declare const useHotkeyRecorder: (props?: UseHotkeyRecorderProps) => UseHotkeyRecorderReturn;
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { useEnvironmentContext } from "../environment/use-environment-context.js";
|
|
3
|
+
import { useSafeLayoutEffect } from "../../utils/use-safe-layout-effect.js";
|
|
4
|
+
import { useEvent } from "../../utils/use-event.js";
|
|
5
|
+
import { useCallback, useMemo, useRef, useState, useSyncExternalStore } from "react";
|
|
6
|
+
import { createHotkeyRecorder } from "@zag-js/hotkeys";
|
|
7
|
+
//#region src/providers/hotkeys/use-hotkey-recorder.ts
|
|
8
|
+
var useHotkeyRecorder = (props = {}) => {
|
|
9
|
+
const { formatOptions, sequenceTimeoutMs } = props;
|
|
10
|
+
const env = useEnvironmentContext();
|
|
11
|
+
const [recorder] = useState(() => createHotkeyRecorder());
|
|
12
|
+
const onRecord = useEvent(props.onRecord);
|
|
13
|
+
const onCancel = useEvent(props.onCancel);
|
|
14
|
+
const onClear = useEvent(props.onClear);
|
|
15
|
+
useSafeLayoutEffect(() => {
|
|
16
|
+
recorder.init(env.getRootNode());
|
|
17
|
+
recorder.setOptions({
|
|
18
|
+
onRecord,
|
|
19
|
+
onCancel,
|
|
20
|
+
onClear
|
|
21
|
+
});
|
|
22
|
+
return () => {
|
|
23
|
+
recorder.destroy();
|
|
24
|
+
};
|
|
25
|
+
}, [
|
|
26
|
+
recorder,
|
|
27
|
+
env,
|
|
28
|
+
onRecord,
|
|
29
|
+
onCancel,
|
|
30
|
+
onClear
|
|
31
|
+
]);
|
|
32
|
+
const formatRef = useRef(formatOptions);
|
|
33
|
+
formatRef.current = formatOptions;
|
|
34
|
+
const formatKey = formatOptions ? JSON.stringify(formatOptions) : "";
|
|
35
|
+
useSafeLayoutEffect(() => {
|
|
36
|
+
recorder.setOptions({
|
|
37
|
+
...formatRef.current && { formatOptions: formatRef.current },
|
|
38
|
+
...sequenceTimeoutMs !== void 0 && { sequenceTimeoutMs }
|
|
39
|
+
});
|
|
40
|
+
}, [
|
|
41
|
+
recorder,
|
|
42
|
+
formatKey,
|
|
43
|
+
sequenceTimeoutMs
|
|
44
|
+
]);
|
|
45
|
+
const subscribe = useCallback((onChange) => recorder.subscribe(onChange), [recorder]);
|
|
46
|
+
const getSnapshot = useCallback(() => recorder.getState(), [recorder]);
|
|
47
|
+
const state = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
|
|
48
|
+
return useMemo(() => ({
|
|
49
|
+
recording: state.recording,
|
|
50
|
+
value: state.value,
|
|
51
|
+
start: () => void recorder.start(),
|
|
52
|
+
stop: () => void recorder.stop(),
|
|
53
|
+
cancel: () => void recorder.cancel(),
|
|
54
|
+
clear: () => void recorder.clear()
|
|
55
|
+
}), [state, recorder]);
|
|
56
|
+
};
|
|
57
|
+
//#endregion
|
|
58
|
+
export { useHotkeyRecorder };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
const require_use_hotkey_store = require("./use-hotkey-store.cjs");
|
|
3
|
+
const require_use_store_snapshot = require("./use-store-snapshot.cjs");
|
|
4
|
+
//#region src/providers/hotkeys/use-hotkey-registrations.ts
|
|
5
|
+
var getVersion = (state) => Array.from(state.commands.values(), (command) => `${command.id}:${command.hotkey}:${command.label ?? ""}`).join("|");
|
|
6
|
+
var build = (state) => Array.from(state.commands.values());
|
|
7
|
+
var useHotkeyRegistrations = (props = {}) => {
|
|
8
|
+
const store = require_use_hotkey_store.useHotkeyStore(props);
|
|
9
|
+
return require_use_store_snapshot.useStoreSnapshot(store, getVersion, build);
|
|
10
|
+
};
|
|
11
|
+
//#endregion
|
|
12
|
+
exports.useHotkeyRegistrations = useHotkeyRegistrations;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { useHotkeyStore } from "./use-hotkey-store.js";
|
|
3
|
+
import { useStoreSnapshot } from "./use-store-snapshot.js";
|
|
4
|
+
//#region src/providers/hotkeys/use-hotkey-registrations.ts
|
|
5
|
+
var getVersion = (state) => Array.from(state.commands.values(), (command) => `${command.id}:${command.hotkey}:${command.label ?? ""}`).join("|");
|
|
6
|
+
var build = (state) => Array.from(state.commands.values());
|
|
7
|
+
var useHotkeyRegistrations = (props = {}) => {
|
|
8
|
+
const store = useHotkeyStore(props);
|
|
9
|
+
return useStoreSnapshot(store, getVersion, build);
|
|
10
|
+
};
|
|
11
|
+
//#endregion
|
|
12
|
+
export { useHotkeyRegistrations };
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
const require_use_environment_context = require("../environment/use-environment-context.cjs");
|
|
3
|
+
const require_use_safe_layout_effect = require("../../utils/use-safe-layout-effect.cjs");
|
|
4
|
+
let _zag_js_hotkeys = require("@zag-js/hotkeys");
|
|
5
|
+
//#region src/providers/hotkeys/use-hotkey-store.ts
|
|
6
|
+
var defaultHotkeyStore;
|
|
7
|
+
var getDefaultHotkeyStore = () => {
|
|
8
|
+
defaultHotkeyStore ??= (0, _zag_js_hotkeys.createHotkeyStore)();
|
|
9
|
+
return defaultHotkeyStore;
|
|
10
|
+
};
|
|
11
|
+
var initialized = /* @__PURE__ */ new WeakSet();
|
|
12
|
+
var useHotkeyStore = (props = {}) => {
|
|
13
|
+
const env = require_use_environment_context.useEnvironmentContext();
|
|
14
|
+
const store = props.store ?? getDefaultHotkeyStore();
|
|
15
|
+
require_use_safe_layout_effect.useSafeLayoutEffect(() => {
|
|
16
|
+
if (initialized.has(store)) return;
|
|
17
|
+
initialized.add(store);
|
|
18
|
+
store.init({ target: env.getRootNode() });
|
|
19
|
+
}, [store, env]);
|
|
20
|
+
return store;
|
|
21
|
+
};
|
|
22
|
+
//#endregion
|
|
23
|
+
exports.useHotkeyStore = useHotkeyStore;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { HotkeyStore } from '@zag-js/hotkeys';
|
|
2
|
+
export interface UseHotkeyStoreProps {
|
|
3
|
+
/**
|
|
4
|
+
* The store to read from and register on. Defaults to a store shared by every hook that
|
|
5
|
+
* does not name one.
|
|
6
|
+
*
|
|
7
|
+
* Keep it stable: build it outside the component or memoize it, since a store created
|
|
8
|
+
* during render is rebuilt on every render and loses its registrations.
|
|
9
|
+
*/
|
|
10
|
+
store?: HotkeyStore | undefined;
|
|
11
|
+
}
|
|
12
|
+
export declare const useHotkeyStore: (props?: UseHotkeyStoreProps) => HotkeyStore;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { HotkeyStore } from '@zag-js/hotkeys';
|
|
2
|
+
export interface UseHotkeyStoreProps {
|
|
3
|
+
/**
|
|
4
|
+
* The store to read from and register on. Defaults to a store shared by every hook that
|
|
5
|
+
* does not name one.
|
|
6
|
+
*
|
|
7
|
+
* Keep it stable: build it outside the component or memoize it, since a store created
|
|
8
|
+
* during render is rebuilt on every render and loses its registrations.
|
|
9
|
+
*/
|
|
10
|
+
store?: HotkeyStore | undefined;
|
|
11
|
+
}
|
|
12
|
+
export declare const useHotkeyStore: (props?: UseHotkeyStoreProps) => HotkeyStore;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { useEnvironmentContext } from "../environment/use-environment-context.js";
|
|
3
|
+
import { useSafeLayoutEffect } from "../../utils/use-safe-layout-effect.js";
|
|
4
|
+
import { createHotkeyStore } from "@zag-js/hotkeys";
|
|
5
|
+
//#region src/providers/hotkeys/use-hotkey-store.ts
|
|
6
|
+
var defaultHotkeyStore;
|
|
7
|
+
var getDefaultHotkeyStore = () => {
|
|
8
|
+
defaultHotkeyStore ??= createHotkeyStore();
|
|
9
|
+
return defaultHotkeyStore;
|
|
10
|
+
};
|
|
11
|
+
var initialized = /* @__PURE__ */ new WeakSet();
|
|
12
|
+
var useHotkeyStore = (props = {}) => {
|
|
13
|
+
const env = useEnvironmentContext();
|
|
14
|
+
const store = props.store ?? getDefaultHotkeyStore();
|
|
15
|
+
useSafeLayoutEffect(() => {
|
|
16
|
+
if (initialized.has(store)) return;
|
|
17
|
+
initialized.add(store);
|
|
18
|
+
store.init({ target: env.getRootNode() });
|
|
19
|
+
}, [store, env]);
|
|
20
|
+
return store;
|
|
21
|
+
};
|
|
22
|
+
//#endregion
|
|
23
|
+
export { useHotkeyStore };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
const require_use_hotkeys = require("./use-hotkeys.cjs");
|
|
3
|
+
//#region src/providers/hotkeys/use-hotkey.ts
|
|
4
|
+
var useHotkey = (props) => {
|
|
5
|
+
const { store, ...command } = props;
|
|
6
|
+
require_use_hotkeys.useHotkeys({
|
|
7
|
+
commands: [command],
|
|
8
|
+
store
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
//#endregion
|
|
12
|
+
exports.useHotkey = useHotkey;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { useHotkeys } from "./use-hotkeys.js";
|
|
3
|
+
//#region src/providers/hotkeys/use-hotkey.ts
|
|
4
|
+
var useHotkey = (props) => {
|
|
5
|
+
const { store, ...command } = props;
|
|
6
|
+
useHotkeys({
|
|
7
|
+
commands: [command],
|
|
8
|
+
store
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
//#endregion
|
|
12
|
+
export { useHotkey };
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
const require_use_platform = require("./use-platform.cjs");
|
|
3
|
+
const require_use_hotkey_store = require("./use-hotkey-store.cjs");
|
|
4
|
+
let _zag_js_utils = require("@zag-js/utils");
|
|
5
|
+
let react = require("react");
|
|
6
|
+
let _zag_js_hotkeys = require("@zag-js/hotkeys");
|
|
7
|
+
//#region src/providers/hotkeys/use-hotkeys.ts
|
|
8
|
+
var warnOnForeignId = (store, id) => {
|
|
9
|
+
(0, _zag_js_utils.warn)(store.getState().commands.has(id), `[ark-ui/hotkeys] Command id "${id}" is already registered on this store by another component, so the earlier command will stop firing. Use a unique id, omit it to have one generated, or register on a separate store.`);
|
|
10
|
+
};
|
|
11
|
+
var toRegistration = (command, platform) => ({
|
|
12
|
+
hotkey: (0, _zag_js_hotkeys.normalizeHotkey)(command.hotkey, platform),
|
|
13
|
+
scopes: command.scopes,
|
|
14
|
+
label: command.label,
|
|
15
|
+
description: command.description,
|
|
16
|
+
category: command.category,
|
|
17
|
+
keywords: command.keywords,
|
|
18
|
+
options: command.options
|
|
19
|
+
});
|
|
20
|
+
var useHotkeys = (props) => {
|
|
21
|
+
const store = require_use_hotkey_store.useHotkeyStore(props);
|
|
22
|
+
const platform = require_use_platform.usePlatform();
|
|
23
|
+
const generatedId = (0, react.useId)();
|
|
24
|
+
const instanceId = props.id ?? generatedId;
|
|
25
|
+
const commandsRef = (0, react.useRef)(props.commands);
|
|
26
|
+
commandsRef.current = props.commands;
|
|
27
|
+
const registered = (0, react.useRef)(/* @__PURE__ */ new Map());
|
|
28
|
+
const resolveId = (command, index) => command.id ?? `${instanceId}:${index}`;
|
|
29
|
+
const findCommand = (id) => commandsRef.current.find((item, index) => resolveId(item, index) === id);
|
|
30
|
+
(0, react.useEffect)(() => {
|
|
31
|
+
const current = commandsRef.current;
|
|
32
|
+
const nextIds = new Set(current.map(resolveId));
|
|
33
|
+
for (const id of [...registered.current.keys()]) {
|
|
34
|
+
if (nextIds.has(id)) continue;
|
|
35
|
+
store.unregister(id);
|
|
36
|
+
registered.current.delete(id);
|
|
37
|
+
}
|
|
38
|
+
current.forEach((command, index) => {
|
|
39
|
+
const id = resolveId(command, index);
|
|
40
|
+
const next = toRegistration(command, platform);
|
|
41
|
+
const previous = registered.current.get(id);
|
|
42
|
+
if (previous && (0, _zag_js_utils.isEqual)(previous, next)) return;
|
|
43
|
+
if (previous) store.unregister(id);
|
|
44
|
+
else warnOnForeignId(store, id);
|
|
45
|
+
store.register({
|
|
46
|
+
...command,
|
|
47
|
+
id,
|
|
48
|
+
action: (event) => {
|
|
49
|
+
findCommand(id)?.action(event);
|
|
50
|
+
},
|
|
51
|
+
enabled: () => {
|
|
52
|
+
const enabled = findCommand(id)?.enabled;
|
|
53
|
+
if (enabled === void 0) return true;
|
|
54
|
+
return typeof enabled === "function" ? enabled() : enabled;
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
registered.current.set(id, next);
|
|
58
|
+
});
|
|
59
|
+
});
|
|
60
|
+
(0, react.useEffect)(() => {
|
|
61
|
+
const registry = registered.current;
|
|
62
|
+
return () => {
|
|
63
|
+
for (const id of registry.keys()) store.unregister(id);
|
|
64
|
+
registry.clear();
|
|
65
|
+
};
|
|
66
|
+
}, [store]);
|
|
67
|
+
};
|
|
68
|
+
//#endregion
|
|
69
|
+
exports.useHotkeys = useHotkeys;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { CommandDefinition } from '@zag-js/hotkeys';
|
|
2
|
+
import { UseHotkeyStoreProps } from './use-hotkey-store.js';
|
|
3
|
+
export interface UseHotkeysCommand extends Omit<CommandDefinition, 'id'> {
|
|
4
|
+
/**
|
|
5
|
+
* Identifies the command across renders. One is generated when omitted, which is enough
|
|
6
|
+
* unless something else needs to address this command by name.
|
|
7
|
+
*/
|
|
8
|
+
id?: string | undefined;
|
|
9
|
+
}
|
|
10
|
+
export interface UseHotkeysProps extends UseHotkeyStoreProps {
|
|
11
|
+
/**
|
|
12
|
+
* The commands to register.
|
|
13
|
+
*/
|
|
14
|
+
commands: UseHotkeysCommand[];
|
|
15
|
+
/**
|
|
16
|
+
* Prefix for the ids generated for commands that do not set their own. One is generated
|
|
17
|
+
* when omitted.
|
|
18
|
+
*/
|
|
19
|
+
id?: string | undefined;
|
|
20
|
+
}
|
|
21
|
+
export declare const useHotkeys: (props: UseHotkeysProps) => void;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { CommandDefinition } from '@zag-js/hotkeys';
|
|
2
|
+
import { UseHotkeyStoreProps } from './use-hotkey-store.js';
|
|
3
|
+
export interface UseHotkeysCommand extends Omit<CommandDefinition, 'id'> {
|
|
4
|
+
/**
|
|
5
|
+
* Identifies the command across renders. One is generated when omitted, which is enough
|
|
6
|
+
* unless something else needs to address this command by name.
|
|
7
|
+
*/
|
|
8
|
+
id?: string | undefined;
|
|
9
|
+
}
|
|
10
|
+
export interface UseHotkeysProps extends UseHotkeyStoreProps {
|
|
11
|
+
/**
|
|
12
|
+
* The commands to register.
|
|
13
|
+
*/
|
|
14
|
+
commands: UseHotkeysCommand[];
|
|
15
|
+
/**
|
|
16
|
+
* Prefix for the ids generated for commands that do not set their own. One is generated
|
|
17
|
+
* when omitted.
|
|
18
|
+
*/
|
|
19
|
+
id?: string | undefined;
|
|
20
|
+
}
|
|
21
|
+
export declare const useHotkeys: (props: UseHotkeysProps) => void;
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { usePlatform } from "./use-platform.js";
|
|
3
|
+
import { useHotkeyStore } from "./use-hotkey-store.js";
|
|
4
|
+
import { isEqual, warn } from "@zag-js/utils";
|
|
5
|
+
import { useEffect, useId, useRef } from "react";
|
|
6
|
+
import { normalizeHotkey } from "@zag-js/hotkeys";
|
|
7
|
+
//#region src/providers/hotkeys/use-hotkeys.ts
|
|
8
|
+
var warnOnForeignId = (store, id) => {
|
|
9
|
+
warn(store.getState().commands.has(id), `[ark-ui/hotkeys] Command id "${id}" is already registered on this store by another component, so the earlier command will stop firing. Use a unique id, omit it to have one generated, or register on a separate store.`);
|
|
10
|
+
};
|
|
11
|
+
var toRegistration = (command, platform) => ({
|
|
12
|
+
hotkey: normalizeHotkey(command.hotkey, platform),
|
|
13
|
+
scopes: command.scopes,
|
|
14
|
+
label: command.label,
|
|
15
|
+
description: command.description,
|
|
16
|
+
category: command.category,
|
|
17
|
+
keywords: command.keywords,
|
|
18
|
+
options: command.options
|
|
19
|
+
});
|
|
20
|
+
var useHotkeys = (props) => {
|
|
21
|
+
const store = useHotkeyStore(props);
|
|
22
|
+
const platform = usePlatform();
|
|
23
|
+
const generatedId = useId();
|
|
24
|
+
const instanceId = props.id ?? generatedId;
|
|
25
|
+
const commandsRef = useRef(props.commands);
|
|
26
|
+
commandsRef.current = props.commands;
|
|
27
|
+
const registered = useRef(/* @__PURE__ */ new Map());
|
|
28
|
+
const resolveId = (command, index) => command.id ?? `${instanceId}:${index}`;
|
|
29
|
+
const findCommand = (id) => commandsRef.current.find((item, index) => resolveId(item, index) === id);
|
|
30
|
+
useEffect(() => {
|
|
31
|
+
const current = commandsRef.current;
|
|
32
|
+
const nextIds = new Set(current.map(resolveId));
|
|
33
|
+
for (const id of [...registered.current.keys()]) {
|
|
34
|
+
if (nextIds.has(id)) continue;
|
|
35
|
+
store.unregister(id);
|
|
36
|
+
registered.current.delete(id);
|
|
37
|
+
}
|
|
38
|
+
current.forEach((command, index) => {
|
|
39
|
+
const id = resolveId(command, index);
|
|
40
|
+
const next = toRegistration(command, platform);
|
|
41
|
+
const previous = registered.current.get(id);
|
|
42
|
+
if (previous && isEqual(previous, next)) return;
|
|
43
|
+
if (previous) store.unregister(id);
|
|
44
|
+
else warnOnForeignId(store, id);
|
|
45
|
+
store.register({
|
|
46
|
+
...command,
|
|
47
|
+
id,
|
|
48
|
+
action: (event) => {
|
|
49
|
+
findCommand(id)?.action(event);
|
|
50
|
+
},
|
|
51
|
+
enabled: () => {
|
|
52
|
+
const enabled = findCommand(id)?.enabled;
|
|
53
|
+
if (enabled === void 0) return true;
|
|
54
|
+
return typeof enabled === "function" ? enabled() : enabled;
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
registered.current.set(id, next);
|
|
58
|
+
});
|
|
59
|
+
});
|
|
60
|
+
useEffect(() => {
|
|
61
|
+
const registry = registered.current;
|
|
62
|
+
return () => {
|
|
63
|
+
for (const id of registry.keys()) store.unregister(id);
|
|
64
|
+
registry.clear();
|
|
65
|
+
};
|
|
66
|
+
}, [store]);
|
|
67
|
+
};
|
|
68
|
+
//#endregion
|
|
69
|
+
export { useHotkeys };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
const require_use_hotkey_store = require("./use-hotkey-store.cjs");
|
|
3
|
+
let react = require("react");
|
|
4
|
+
//#region src/providers/hotkeys/use-is-key-pressed.ts
|
|
5
|
+
var useIsKeyPressed = (props) => {
|
|
6
|
+
const { hotkey } = props;
|
|
7
|
+
const store = require_use_hotkey_store.useHotkeyStore(props);
|
|
8
|
+
const subscribe = (0, react.useCallback)((onChange) => store.subscribe(() => store.isPressed(hotkey), onChange), [store, hotkey]);
|
|
9
|
+
const getSnapshot = (0, react.useCallback)(() => store.isPressed(hotkey), [store, hotkey]);
|
|
10
|
+
return (0, react.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
|
|
11
|
+
};
|
|
12
|
+
//#endregion
|
|
13
|
+
exports.useIsKeyPressed = useIsKeyPressed;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { UseHotkeyStoreProps } from './use-hotkey-store.js';
|
|
2
|
+
export interface UseIsKeyPressedProps extends UseHotkeyStoreProps {
|
|
3
|
+
/**
|
|
4
|
+
* The key or combination to watch.
|
|
5
|
+
*/
|
|
6
|
+
hotkey: string;
|
|
7
|
+
}
|
|
8
|
+
export declare const useIsKeyPressed: (props: UseIsKeyPressedProps) => boolean;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { UseHotkeyStoreProps } from './use-hotkey-store.js';
|
|
2
|
+
export interface UseIsKeyPressedProps extends UseHotkeyStoreProps {
|
|
3
|
+
/**
|
|
4
|
+
* The key or combination to watch.
|
|
5
|
+
*/
|
|
6
|
+
hotkey: string;
|
|
7
|
+
}
|
|
8
|
+
export declare const useIsKeyPressed: (props: UseIsKeyPressedProps) => boolean;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { useHotkeyStore } from "./use-hotkey-store.js";
|
|
3
|
+
import { useCallback, useSyncExternalStore } from "react";
|
|
4
|
+
//#region src/providers/hotkeys/use-is-key-pressed.ts
|
|
5
|
+
var useIsKeyPressed = (props) => {
|
|
6
|
+
const { hotkey } = props;
|
|
7
|
+
const store = useHotkeyStore(props);
|
|
8
|
+
const subscribe = useCallback((onChange) => store.subscribe(() => store.isPressed(hotkey), onChange), [store, hotkey]);
|
|
9
|
+
const getSnapshot = useCallback(() => store.isPressed(hotkey), [store, hotkey]);
|
|
10
|
+
return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
|
|
11
|
+
};
|
|
12
|
+
//#endregion
|
|
13
|
+
export { useIsKeyPressed };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
let react = require("react");
|
|
3
|
+
let _zag_js_dom_query = require("@zag-js/dom-query");
|
|
4
|
+
//#region src/providers/hotkeys/use-platform.ts
|
|
5
|
+
var isLinux = () => /^Linux|^CrOS/i.test((0, _zag_js_dom_query.getPlatform)()) && !(0, _zag_js_dom_query.isAndroid)();
|
|
6
|
+
var subscribe = () => () => {};
|
|
7
|
+
var detect = () => {
|
|
8
|
+
if ((0, _zag_js_dom_query.isApple)()) return "mac";
|
|
9
|
+
if (isLinux()) return "linux";
|
|
10
|
+
return "windows";
|
|
11
|
+
};
|
|
12
|
+
var usePlatform = () => {
|
|
13
|
+
const getSnapshot = (0, react.useCallback)(detect, []);
|
|
14
|
+
const getServerSnapshot = (0, react.useCallback)(() => "windows", []);
|
|
15
|
+
return (0, react.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
|
|
16
|
+
};
|
|
17
|
+
//#endregion
|
|
18
|
+
exports.usePlatform = usePlatform;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { useCallback, useSyncExternalStore } from "react";
|
|
3
|
+
import { getPlatform, isAndroid, isApple } from "@zag-js/dom-query";
|
|
4
|
+
//#region src/providers/hotkeys/use-platform.ts
|
|
5
|
+
var isLinux = () => /^Linux|^CrOS/i.test(getPlatform()) && !isAndroid();
|
|
6
|
+
var subscribe = () => () => {};
|
|
7
|
+
var detect = () => {
|
|
8
|
+
if (isApple()) return "mac";
|
|
9
|
+
if (isLinux()) return "linux";
|
|
10
|
+
return "windows";
|
|
11
|
+
};
|
|
12
|
+
var usePlatform = () => {
|
|
13
|
+
const getSnapshot = useCallback(detect, []);
|
|
14
|
+
const getServerSnapshot = useCallback(() => "windows", []);
|
|
15
|
+
return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
|
|
16
|
+
};
|
|
17
|
+
//#endregion
|
|
18
|
+
export { usePlatform };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
const require_use_hotkey_store = require("./use-hotkey-store.cjs");
|
|
3
|
+
const require_use_store_snapshot = require("./use-store-snapshot.cjs");
|
|
4
|
+
//#region src/providers/hotkeys/use-pressed-keys.ts
|
|
5
|
+
var getVersion = (state) => Array.from(state.pressedKeys).join("|");
|
|
6
|
+
var build = (state) => Array.from(state.pressedKeys);
|
|
7
|
+
var usePressedKeys = (props = {}) => {
|
|
8
|
+
const store = require_use_hotkey_store.useHotkeyStore(props);
|
|
9
|
+
return require_use_store_snapshot.useStoreSnapshot(store, getVersion, build);
|
|
10
|
+
};
|
|
11
|
+
//#endregion
|
|
12
|
+
exports.usePressedKeys = usePressedKeys;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { useHotkeyStore } from "./use-hotkey-store.js";
|
|
3
|
+
import { useStoreSnapshot } from "./use-store-snapshot.js";
|
|
4
|
+
//#region src/providers/hotkeys/use-pressed-keys.ts
|
|
5
|
+
var getVersion = (state) => Array.from(state.pressedKeys).join("|");
|
|
6
|
+
var build = (state) => Array.from(state.pressedKeys);
|
|
7
|
+
var usePressedKeys = (props = {}) => {
|
|
8
|
+
const store = useHotkeyStore(props);
|
|
9
|
+
return useStoreSnapshot(store, getVersion, build);
|
|
10
|
+
};
|
|
11
|
+
//#endregion
|
|
12
|
+
export { usePressedKeys };
|