ink 6.8.0 → 7.0.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/build/components/AnimationContext.d.ts +9 -0
- package/build/components/AnimationContext.js +13 -0
- package/build/components/AnimationContext.js.map +1 -0
- package/build/components/App.d.ts +4 -1
- package/build/components/App.js +140 -20
- package/build/components/App.js.map +1 -1
- package/build/components/AppContext.d.ts +28 -2
- package/build/components/AppContext.js +2 -1
- package/build/components/AppContext.js.map +1 -1
- package/build/components/Box.d.ts +16 -3
- package/build/components/ErrorBoundary.d.ts +2 -2
- package/build/components/ErrorOverview.js +6 -6
- package/build/components/ErrorOverview.js.map +1 -1
- package/build/components/Static.js.map +1 -1
- package/build/components/StdinContext.d.ts +7 -1
- package/build/components/StdinContext.js +1 -0
- package/build/components/StdinContext.js.map +1 -1
- package/build/components/Text.d.ts +1 -1
- package/build/components/Text.js +1 -1
- package/build/components/Text.js.map +1 -1
- package/build/components/Transform.d.ts +1 -1
- package/build/devtools-window-polyfill.js +7 -4
- package/build/devtools-window-polyfill.js.map +1 -1
- package/build/devtools.js +31 -6
- package/build/devtools.js.map +1 -1
- package/build/dom.d.ts +5 -1
- package/build/dom.js +20 -1
- package/build/dom.js.map +1 -1
- package/build/hooks/use-animation.d.ts +49 -0
- package/build/hooks/use-animation.js +87 -0
- package/build/hooks/use-animation.js.map +1 -0
- package/build/hooks/use-app.d.ts +5 -2
- package/build/hooks/use-app.js +1 -1
- package/build/hooks/use-box-metrics.d.ts +59 -0
- package/build/hooks/use-box-metrics.js +88 -0
- package/build/hooks/use-box-metrics.js.map +1 -0
- package/build/hooks/use-cursor.d.ts +1 -1
- package/build/hooks/use-cursor.js +1 -1
- package/build/hooks/use-focus-manager.d.ts +17 -2
- package/build/hooks/use-focus-manager.js +2 -1
- package/build/hooks/use-focus-manager.js.map +1 -1
- package/build/hooks/use-focus.d.ts +2 -1
- package/build/hooks/use-focus.js +5 -4
- package/build/hooks/use-focus.js.map +1 -1
- package/build/hooks/use-input.d.ts +2 -1
- package/build/hooks/use-input.js +82 -80
- package/build/hooks/use-input.js.map +1 -1
- package/build/hooks/use-is-screen-reader-enabled.d.ts +2 -1
- package/build/hooks/use-is-screen-reader-enabled.js +2 -1
- package/build/hooks/use-is-screen-reader-enabled.js.map +1 -1
- package/build/hooks/use-paste.d.ts +35 -0
- package/build/hooks/use-paste.js +62 -0
- package/build/hooks/use-paste.js.map +1 -0
- package/build/hooks/use-stderr.d.ts +1 -1
- package/build/hooks/use-stderr.js +1 -1
- package/build/hooks/use-stdin.d.ts +4 -2
- package/build/hooks/use-stdin.js +2 -1
- package/build/hooks/use-stdin.js.map +1 -1
- package/build/hooks/use-stdout.d.ts +1 -1
- package/build/hooks/use-stdout.js +1 -1
- package/build/hooks/use-window-size.d.ts +18 -0
- package/build/hooks/use-window-size.js +22 -0
- package/build/hooks/use-window-size.js.map +1 -0
- package/build/index.d.ts +8 -1
- package/build/index.js +4 -0
- package/build/index.js.map +1 -1
- package/build/ink.d.ts +48 -3
- package/build/ink.js +325 -155
- package/build/ink.js.map +1 -1
- package/build/input-parser.d.ts +4 -1
- package/build/input-parser.js +70 -30
- package/build/input-parser.js.map +1 -1
- package/build/log-update.d.ts +1 -0
- package/build/log-update.js +13 -1
- package/build/log-update.js.map +1 -1
- package/build/measure-element.d.ts +4 -0
- package/build/measure-element.js +4 -0
- package/build/measure-element.js.map +1 -1
- package/build/output.js +25 -0
- package/build/output.js.map +1 -1
- package/build/parse-keypress.d.ts +1 -3
- package/build/parse-keypress.js +19 -17
- package/build/parse-keypress.js.map +1 -1
- package/build/reconciler.js +46 -27
- package/build/reconciler.js.map +1 -1
- package/build/render-border.js +29 -18
- package/build/render-border.js.map +1 -1
- package/build/render-to-string.js +2 -1
- package/build/render-to-string.js.map +1 -1
- package/build/render.d.ts +57 -2
- package/build/render.js +18 -11
- package/build/render.js.map +1 -1
- package/build/styles.d.ts +78 -16
- package/build/styles.js +102 -31
- package/build/styles.js.map +1 -1
- package/build/utils.d.ts +9 -2
- package/build/utils.js +18 -3
- package/build/utils.js.map +1 -1
- package/build/wrap-text.js +7 -0
- package/build/wrap-text.js.map +1 -1
- package/build/write-synchronized.d.ts +1 -1
- package/build/write-synchronized.js +4 -2
- package/build/write-synchronized.js.map +1 -1
- package/package.json +34 -98
- package/readme.md +554 -48
- package/build/apply-styles.js +0 -175
- package/build/build-layout.js +0 -77
- package/build/calculate-wrapped-text.js +0 -53
- package/build/components/Color.js +0 -62
- package/build/components/Cursor.d.ts +0 -83
- package/build/components/Cursor.js +0 -53
- package/build/components/Cursor.js.map +0 -1
- package/build/experimental/apply-style.js +0 -140
- package/build/experimental/dom.js +0 -123
- package/build/experimental/output.js +0 -91
- package/build/experimental/reconciler.js +0 -141
- package/build/experimental/renderer.js +0 -81
- package/build/hooks/useInput.js +0 -38
- package/build/instance.js +0 -205
- package/build/layout.d.ts +0 -7
- package/build/layout.js +0 -33
- package/build/layout.js.map +0 -1
- package/build/options.d.ts +0 -52
- package/build/options.js +0 -2
- package/build/options.js.map +0 -1
- package/build/screen-reader-update.d.ts +0 -13
- package/build/screen-reader-update.js +0 -38
- package/build/screen-reader-update.js.map +0 -1
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
// Ignoring missing types error to avoid adding another dependency for this hack to work
|
|
2
2
|
import ws from 'ws';
|
|
3
3
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
|
4
|
-
const customGlobal =
|
|
4
|
+
const customGlobal = globalThis;
|
|
5
5
|
// These things must exist before importing `react-devtools-core`
|
|
6
|
-
//
|
|
6
|
+
// Using ||= intentionally to set falsy values, not just null/undefined
|
|
7
|
+
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
|
|
7
8
|
customGlobal.WebSocket ||= ws;
|
|
8
|
-
|
|
9
|
-
customGlobal.
|
|
9
|
+
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
|
|
10
|
+
customGlobal.window ||= globalThis;
|
|
11
|
+
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
|
|
12
|
+
customGlobal.self ||= globalThis;
|
|
10
13
|
// Filter out Ink's internal components from devtools for a cleaner view.
|
|
11
14
|
// Also, ince `react-devtools-shared` package isn't published on npm, we can't
|
|
12
15
|
// use its types, that's why there are hard-coded values in `type` fields below.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"devtools-window-polyfill.js","sourceRoot":"","sources":["../src/devtools-window-polyfill.ts"],"names":[],"mappings":"AAAA,wFAAwF;AACxF,OAAO,EAAE,MAAM,IAAI,CAAC;AAEpB,mEAAmE;AACnE,MAAM,YAAY,GAAG,
|
|
1
|
+
{"version":3,"file":"devtools-window-polyfill.js","sourceRoot":"","sources":["../src/devtools-window-polyfill.ts"],"names":[],"mappings":"AAAA,wFAAwF;AACxF,OAAO,EAAE,MAAM,IAAI,CAAC;AAEpB,mEAAmE;AACnE,MAAM,YAAY,GAAG,UAAiB,CAAC;AAEvC,iEAAiE;AACjE,uEAAuE;AAEvE,wEAAwE;AACxE,YAAY,CAAC,SAAS,KAAK,EAAE,CAAC;AAE9B,wEAAwE;AACxE,YAAY,CAAC,MAAM,KAAK,UAAU,CAAC;AAEnC,wEAAwE;AACxE,YAAY,CAAC,IAAI,KAAK,UAAU,CAAC;AAEjC,yEAAyE;AACzE,8EAA8E;AAC9E,gFAAgF;AAChF,sIAAsI;AACtI,YAAY,CAAC,MAAM,CAAC,oCAAoC,GAAG;IAC1D;QACC,6BAA6B;QAC7B,IAAI,EAAE,CAAC;QACP,2BAA2B;QAC3B,KAAK,EAAE,CAAC;QACR,SAAS,EAAE,IAAI;KACf;IACD;QACC,6BAA6B;QAC7B,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,aAAa;QACpB,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,IAAI;KACb;IACD;QACC,6BAA6B;QAC7B,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,oBAAoB;QAC3B,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,IAAI;KACb;IACD;QACC,6BAA6B;QAC7B,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,IAAI;KACb;IACD;QACC,6BAA6B;QAC7B,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,uBAAuB;QAC9B,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,IAAI;KACb;IACD;QACC,6BAA6B;QAC7B,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,sBAAsB;QAC7B,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,IAAI;KACb;IACD;QACC,6BAA6B;QAC7B,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,sBAAsB;QAC7B,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,IAAI;KACb;CACD,CAAC"}
|
package/build/devtools.js
CHANGED
|
@@ -1,11 +1,36 @@
|
|
|
1
|
-
/* eslint-disable import/order */
|
|
2
|
-
// eslint-disable-next-line import/no-unassigned-import
|
|
1
|
+
/* eslint-disable import-x/order */
|
|
2
|
+
// eslint-disable-next-line import-x/no-unassigned-import
|
|
3
3
|
import './devtools-window-polyfill.js';
|
|
4
|
+
import WebSocket from 'ws';
|
|
4
5
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
5
6
|
// @ts-expect-error
|
|
6
7
|
import devtools from 'react-devtools-core';
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
const isDevToolsReachable = async () => new Promise(resolve => {
|
|
9
|
+
const socket = new WebSocket('ws://localhost:8097');
|
|
10
|
+
const timeout = setTimeout(() => {
|
|
11
|
+
socket.terminate();
|
|
12
|
+
resolve(false);
|
|
13
|
+
}, 2000);
|
|
14
|
+
// Don't let the timeout keep the process alive on its own
|
|
15
|
+
timeout.unref();
|
|
16
|
+
socket.on('open', () => {
|
|
17
|
+
clearTimeout(timeout);
|
|
18
|
+
socket.terminate();
|
|
19
|
+
resolve(true);
|
|
20
|
+
});
|
|
21
|
+
socket.on('error', () => {
|
|
22
|
+
clearTimeout(timeout);
|
|
23
|
+
socket.terminate();
|
|
24
|
+
resolve(false);
|
|
25
|
+
});
|
|
26
|
+
});
|
|
27
|
+
if (await isDevToolsReachable()) {
|
|
28
|
+
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
|
|
29
|
+
devtools.initialize();
|
|
30
|
+
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
|
|
31
|
+
devtools.connectToDevTools();
|
|
32
|
+
}
|
|
33
|
+
else {
|
|
34
|
+
console.warn('DEV is set to true, but the React DevTools server is not running. Start it with:\n\n$ npx react-devtools\n');
|
|
35
|
+
}
|
|
11
36
|
//# sourceMappingURL=devtools.js.map
|
package/build/devtools.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"devtools.js","sourceRoot":"","sources":["../src/devtools.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"devtools.js","sourceRoot":"","sources":["../src/devtools.ts"],"names":[],"mappings":"AAAA,mCAAmC;AAEnC,yDAAyD;AACzD,OAAO,+BAA+B,CAAC;AAEvC,OAAO,SAAS,MAAM,IAAI,CAAC;AAE3B,6DAA6D;AAC7D,mBAAmB;AACnB,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAE3C,MAAM,mBAAmB,GAAG,KAAK,IAAsB,EAAE,CACxD,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;IACrB,MAAM,MAAM,GAAG,IAAI,SAAS,CAAC,qBAAqB,CAAC,CAAC;IAEpD,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;QAC/B,MAAM,CAAC,SAAS,EAAE,CAAC;QACnB,OAAO,CAAC,KAAK,CAAC,CAAC;IAChB,CAAC,EAAE,IAAI,CAAC,CAAC;IACT,0DAA0D;IAC1D,OAAO,CAAC,KAAK,EAAE,CAAC;IAEhB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE;QACtB,YAAY,CAAC,OAAO,CAAC,CAAC;QACtB,MAAM,CAAC,SAAS,EAAE,CAAC;QACnB,OAAO,CAAC,IAAI,CAAC,CAAC;IACf,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,EAAE;QACvB,YAAY,CAAC,OAAO,CAAC,CAAC;QACtB,MAAM,CAAC,SAAS,EAAE,CAAC;QACnB,OAAO,CAAC,KAAK,CAAC,CAAC;IAChB,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEJ,IAAI,MAAM,mBAAmB,EAAE,EAAE,CAAC;IACjC,6DAA6D;IAC5D,QAAgB,CAAC,UAAU,EAAE,CAAC;IAC/B,6DAA6D;IAC5D,QAAgB,CAAC,iBAAiB,EAAE,CAAC;AACvC,CAAC;KAAM,CAAC;IACP,OAAO,CAAC,IAAI,CACX,4GAA4G,CAC5G,CAAC;AACH,CAAC"}
|
package/build/dom.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ type InkNode = {
|
|
|
7
7
|
internal_static?: boolean;
|
|
8
8
|
style: Styles;
|
|
9
9
|
};
|
|
10
|
+
type LayoutListener = () => void;
|
|
10
11
|
export type TextName = '#text';
|
|
11
12
|
export type ElementNames = 'ink-root' | 'ink-box' | 'ink-text' | 'ink-virtual-text';
|
|
12
13
|
export type NodeNames = ElementNames | TextName;
|
|
@@ -34,6 +35,7 @@ export type DOMElement = {
|
|
|
34
35
|
onComputeLayout?: () => void;
|
|
35
36
|
onRender?: () => void;
|
|
36
37
|
onImmediateRender?: () => void;
|
|
38
|
+
internal_layoutListeners?: Set<LayoutListener>;
|
|
37
39
|
} & InkNode;
|
|
38
40
|
export type TextNode = {
|
|
39
41
|
nodeName: TextName;
|
|
@@ -50,7 +52,9 @@ export declare const appendChildNode: (node: DOMElement, childNode: DOMElement)
|
|
|
50
52
|
export declare const insertBeforeNode: (node: DOMElement, newChildNode: DOMNode, beforeChildNode: DOMNode) => void;
|
|
51
53
|
export declare const removeChildNode: (node: DOMElement, removeNode: DOMNode) => void;
|
|
52
54
|
export declare const setAttribute: (node: DOMElement, key: string, value: DOMNodeAttribute) => void;
|
|
53
|
-
export declare const setStyle: (node: DOMNode, style
|
|
55
|
+
export declare const setStyle: (node: DOMNode, style?: Styles) => void;
|
|
54
56
|
export declare const createTextNode: (text: string) => TextNode;
|
|
55
57
|
export declare const setTextNodeValue: (node: TextNode, text: string) => void;
|
|
58
|
+
export declare const addLayoutListener: (rootNode: DOMElement, listener: LayoutListener) => (() => void);
|
|
59
|
+
export declare const emitLayoutListeners: (rootNode: DOMElement) => void;
|
|
56
60
|
export {};
|
package/build/dom.js
CHANGED
|
@@ -74,7 +74,8 @@ export const setAttribute = (node, key, value) => {
|
|
|
74
74
|
node.attributes[key] = value;
|
|
75
75
|
};
|
|
76
76
|
export const setStyle = (node, style) => {
|
|
77
|
-
|
|
77
|
+
// Rendering code assumes style is always an object.
|
|
78
|
+
node.style = style ?? {};
|
|
78
79
|
};
|
|
79
80
|
export const createTextNode = (text) => {
|
|
80
81
|
const node = {
|
|
@@ -121,4 +122,22 @@ export const setTextNodeValue = (node, text) => {
|
|
|
121
122
|
node.nodeValue = text;
|
|
122
123
|
markNodeAsDirty(node);
|
|
123
124
|
};
|
|
125
|
+
export const addLayoutListener = (rootNode, listener) => {
|
|
126
|
+
if (rootNode.nodeName !== 'ink-root') {
|
|
127
|
+
return () => { };
|
|
128
|
+
}
|
|
129
|
+
rootNode.internal_layoutListeners ??= new Set();
|
|
130
|
+
rootNode.internal_layoutListeners.add(listener);
|
|
131
|
+
return () => {
|
|
132
|
+
rootNode.internal_layoutListeners?.delete(listener);
|
|
133
|
+
};
|
|
134
|
+
};
|
|
135
|
+
export const emitLayoutListeners = (rootNode) => {
|
|
136
|
+
if (rootNode.nodeName !== 'ink-root' || !rootNode.internal_layoutListeners) {
|
|
137
|
+
return;
|
|
138
|
+
}
|
|
139
|
+
for (const listener of rootNode.internal_layoutListeners) {
|
|
140
|
+
listener();
|
|
141
|
+
}
|
|
142
|
+
};
|
|
124
143
|
//# sourceMappingURL=dom.js.map
|
package/build/dom.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dom.js","sourceRoot":"","sources":["../src/dom.ts"],"names":[],"mappings":"AAAA,OAAO,IAA6B,MAAM,aAAa,CAAC;AACxD,OAAO,WAAW,MAAM,mBAAmB,CAAC;AAE5C,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AACtC,OAAO,eAAe,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"dom.js","sourceRoot":"","sources":["../src/dom.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
type Options = {
|
|
2
|
+
/**
|
|
3
|
+
Time between ticks in milliseconds.
|
|
4
|
+
|
|
5
|
+
@default 100
|
|
6
|
+
*/
|
|
7
|
+
readonly interval?: number;
|
|
8
|
+
/**
|
|
9
|
+
Whether the animation is running. When set to `false`, the animation stops. When toggled back to `true`, all values reset to `0`.
|
|
10
|
+
|
|
11
|
+
@default true
|
|
12
|
+
*/
|
|
13
|
+
readonly isActive?: boolean;
|
|
14
|
+
};
|
|
15
|
+
export type AnimationResult = {
|
|
16
|
+
/**
|
|
17
|
+
Discrete counter that increments by 1 each interval. Useful for indexed sequences like spinner frames.
|
|
18
|
+
*/
|
|
19
|
+
readonly frame: number;
|
|
20
|
+
/**
|
|
21
|
+
Total elapsed time in milliseconds since the animation started or was last reset. Useful for continuous math-based animations like sine waves: `Math.sin(time / 1000 * Math.PI * 2)`.
|
|
22
|
+
*/
|
|
23
|
+
readonly time: number;
|
|
24
|
+
/**
|
|
25
|
+
Time in milliseconds since the previous rendered tick. Accounts for throttled renders. Useful for physics-based or velocity-driven motion: `position += speed * delta`.
|
|
26
|
+
*/
|
|
27
|
+
readonly delta: number;
|
|
28
|
+
/**
|
|
29
|
+
Resets `frame`, `time`, and `delta` to `0` and restarts timing from the current moment. Useful for one-shot animations triggered by events.
|
|
30
|
+
*/
|
|
31
|
+
readonly reset: () => void;
|
|
32
|
+
};
|
|
33
|
+
/**
|
|
34
|
+
A React hook that drives animations. Returns a frame counter, elapsed time, frame delta, and a reset function. All animations share a single timer internally, so multiple animated components consolidate into one render cycle.
|
|
35
|
+
|
|
36
|
+
@example
|
|
37
|
+
```
|
|
38
|
+
import {Text, useAnimation} from 'ink';
|
|
39
|
+
|
|
40
|
+
const Spinner = () => {
|
|
41
|
+
const {frame} = useAnimation({interval: 80});
|
|
42
|
+
const characters = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
|
|
43
|
+
|
|
44
|
+
return <Text>{characters[frame % characters.length]}</Text>;
|
|
45
|
+
};
|
|
46
|
+
```
|
|
47
|
+
*/
|
|
48
|
+
export default function useAnimation(options?: Options): AnimationResult;
|
|
49
|
+
export {};
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import { useState, useLayoutEffect, useRef, useCallback, useContext, } from 'react';
|
|
2
|
+
import AnimationContext from '../components/AnimationContext.js';
|
|
3
|
+
const defaultAnimationInterval = 100;
|
|
4
|
+
const maximumTimerInterval = 2_147_483_647;
|
|
5
|
+
const zeroAnimState = { frame: 0, time: 0, delta: 0 };
|
|
6
|
+
/**
|
|
7
|
+
A React hook that drives animations. Returns a frame counter, elapsed time, frame delta, and a reset function. All animations share a single timer internally, so multiple animated components consolidate into one render cycle.
|
|
8
|
+
|
|
9
|
+
@example
|
|
10
|
+
```
|
|
11
|
+
import {Text, useAnimation} from 'ink';
|
|
12
|
+
|
|
13
|
+
const Spinner = () => {
|
|
14
|
+
const {frame} = useAnimation({interval: 80});
|
|
15
|
+
const characters = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
|
|
16
|
+
|
|
17
|
+
return <Text>{characters[frame % characters.length]}</Text>;
|
|
18
|
+
};
|
|
19
|
+
```
|
|
20
|
+
*/
|
|
21
|
+
export default function useAnimation(options) {
|
|
22
|
+
const { interval = defaultAnimationInterval, isActive = true } = options ?? {};
|
|
23
|
+
const safeInterval = normalizeAnimationInterval(interval);
|
|
24
|
+
const { subscribe, renderThrottleMs } = useContext(AnimationContext);
|
|
25
|
+
const [resetKey, setResetKey] = useState(0);
|
|
26
|
+
const [animState, setAnimState] = useState(zeroAnimState);
|
|
27
|
+
const nextRenderTimeRef = useRef(0);
|
|
28
|
+
const lastRenderTimeRef = useRef(0);
|
|
29
|
+
const previousOptionsRef = useRef({ isActive, safeInterval, resetKey });
|
|
30
|
+
const previousOptions = previousOptionsRef.current;
|
|
31
|
+
const shouldReset = isActive &&
|
|
32
|
+
(safeInterval !== previousOptions.safeInterval ||
|
|
33
|
+
!previousOptions.isActive ||
|
|
34
|
+
resetKey !== previousOptions.resetKey);
|
|
35
|
+
const reset = useCallback(() => {
|
|
36
|
+
setResetKey(k => k + 1);
|
|
37
|
+
}, []);
|
|
38
|
+
useLayoutEffect(() => {
|
|
39
|
+
if (!isActive) {
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
// Reset to zero immediately so any render that occurs between this
|
|
43
|
+
// effect commit and the first tick shows zeros, not stale values.
|
|
44
|
+
// On initial mount this is a no-op: Object.is bails out because the
|
|
45
|
+
// state was initialized with the same zeroAnimState reference.
|
|
46
|
+
setAnimState(zeroAnimState);
|
|
47
|
+
let startTime = 0;
|
|
48
|
+
const { startTime: subscriberStartTime, unsubscribe } = subscribe(currentTime => {
|
|
49
|
+
const isThrottled = renderThrottleMs > 0 && currentTime < nextRenderTimeRef.current;
|
|
50
|
+
if (isThrottled) {
|
|
51
|
+
// Coalesce intermediate ticks while Ink is inside the current
|
|
52
|
+
// render-throttle window; the next allowed render will jump
|
|
53
|
+
// straight to the latest elapsed values.
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
const elapsed = currentTime - startTime;
|
|
57
|
+
const nextDelta = currentTime - lastRenderTimeRef.current;
|
|
58
|
+
lastRenderTimeRef.current = currentTime;
|
|
59
|
+
nextRenderTimeRef.current = currentTime + renderThrottleMs;
|
|
60
|
+
setAnimState({
|
|
61
|
+
frame: Math.floor(elapsed / safeInterval),
|
|
62
|
+
time: elapsed,
|
|
63
|
+
delta: nextDelta,
|
|
64
|
+
});
|
|
65
|
+
}, safeInterval);
|
|
66
|
+
// Use the scheduler's start time instead of sampling our own clock so the
|
|
67
|
+
// first delivered tick cannot start one frame late.
|
|
68
|
+
startTime = subscriberStartTime;
|
|
69
|
+
lastRenderTimeRef.current = subscriberStartTime;
|
|
70
|
+
nextRenderTimeRef.current = startTime + renderThrottleMs;
|
|
71
|
+
return unsubscribe;
|
|
72
|
+
}, [safeInterval, isActive, subscribe, renderThrottleMs, resetKey]);
|
|
73
|
+
useLayoutEffect(() => {
|
|
74
|
+
previousOptionsRef.current = { isActive, safeInterval, resetKey };
|
|
75
|
+
}, [isActive, safeInterval, resetKey]);
|
|
76
|
+
if (shouldReset) {
|
|
77
|
+
return { ...zeroAnimState, reset };
|
|
78
|
+
}
|
|
79
|
+
return { ...animState, reset };
|
|
80
|
+
}
|
|
81
|
+
function normalizeAnimationInterval(interval) {
|
|
82
|
+
if (!Number.isFinite(interval)) {
|
|
83
|
+
return defaultAnimationInterval;
|
|
84
|
+
}
|
|
85
|
+
return Math.min(maximumTimerInterval, Math.max(1, interval));
|
|
86
|
+
}
|
|
87
|
+
//# sourceMappingURL=use-animation.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-animation.js","sourceRoot":"","sources":["../../src/hooks/use-animation.ts"],"names":[],"mappings":"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"}
|
package/build/hooks/use-app.d.ts
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
|
-
|
|
2
|
+
A React hook that returns app lifecycle methods like `exit()` and `waitUntilRenderFlush()`.
|
|
3
3
|
*/
|
|
4
|
-
declare const useApp: () =>
|
|
4
|
+
declare const useApp: () => {
|
|
5
|
+
exit(): void;
|
|
6
|
+
waitUntilRenderFlush(): Promise<void>;
|
|
7
|
+
};
|
|
5
8
|
export default useApp;
|
package/build/hooks/use-app.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useContext } from 'react';
|
|
2
2
|
import AppContext from '../components/AppContext.js';
|
|
3
3
|
/**
|
|
4
|
-
|
|
4
|
+
A React hook that returns app lifecycle methods like `exit()` and `waitUntilRenderFlush()`.
|
|
5
5
|
*/
|
|
6
6
|
const useApp = () => useContext(AppContext);
|
|
7
7
|
export default useApp;
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { type RefObject } from 'react';
|
|
2
|
+
import { type DOMElement } from '../dom.js';
|
|
3
|
+
/**
|
|
4
|
+
Metrics of a box element.
|
|
5
|
+
|
|
6
|
+
All positions are relative to the element's parent.
|
|
7
|
+
*/
|
|
8
|
+
export type BoxMetrics = {
|
|
9
|
+
/**
|
|
10
|
+
Element width.
|
|
11
|
+
*/
|
|
12
|
+
readonly width: number;
|
|
13
|
+
/**
|
|
14
|
+
Element height.
|
|
15
|
+
*/
|
|
16
|
+
readonly height: number;
|
|
17
|
+
/**
|
|
18
|
+
Distance from the left edge of the parent.
|
|
19
|
+
*/
|
|
20
|
+
readonly left: number;
|
|
21
|
+
/**
|
|
22
|
+
Distance from the top edge of the parent.
|
|
23
|
+
*/
|
|
24
|
+
readonly top: number;
|
|
25
|
+
};
|
|
26
|
+
export type UseBoxMetricsResult = BoxMetrics & {
|
|
27
|
+
/**
|
|
28
|
+
Whether the currently tracked element has been measured in the latest layout pass.
|
|
29
|
+
*/
|
|
30
|
+
readonly hasMeasured: boolean;
|
|
31
|
+
};
|
|
32
|
+
/**
|
|
33
|
+
A React hook that returns the current layout metrics for a tracked box element.
|
|
34
|
+
It updates when layout changes (for example terminal resize, sibling/content changes, or position changes).
|
|
35
|
+
|
|
36
|
+
The hook returns `{width: 0, height: 0, left: 0, top: 0}` until the first layout pass completes. It also returns zeros when the tracked ref is detached.
|
|
37
|
+
|
|
38
|
+
Use `hasMeasured` to detect when the currently tracked element has been measured.
|
|
39
|
+
|
|
40
|
+
@example
|
|
41
|
+
```tsx
|
|
42
|
+
import {useRef} from 'react';
|
|
43
|
+
import {Box, Text, useBoxMetrics} from 'ink';
|
|
44
|
+
|
|
45
|
+
const Example = () => {
|
|
46
|
+
const ref = useRef(null);
|
|
47
|
+
const {width, height, left, top, hasMeasured} = useBoxMetrics(ref);
|
|
48
|
+
return (
|
|
49
|
+
<Box ref={ref}>
|
|
50
|
+
<Text>
|
|
51
|
+
{hasMeasured ? `${width}x${height} at ${left},${top}` : 'Measuring...'}
|
|
52
|
+
</Text>
|
|
53
|
+
</Box>
|
|
54
|
+
);
|
|
55
|
+
};
|
|
56
|
+
```
|
|
57
|
+
*/
|
|
58
|
+
declare const useBoxMetrics: (ref: RefObject<DOMElement>) => UseBoxMetricsResult;
|
|
59
|
+
export default useBoxMetrics;
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import { useState, useEffect, useCallback, useMemo } from 'react';
|
|
2
|
+
import { addLayoutListener } from '../dom.js';
|
|
3
|
+
import useStdout from './use-stdout.js';
|
|
4
|
+
const emptyMetrics = {
|
|
5
|
+
width: 0,
|
|
6
|
+
height: 0,
|
|
7
|
+
left: 0,
|
|
8
|
+
top: 0,
|
|
9
|
+
};
|
|
10
|
+
const findRootNode = (node) => {
|
|
11
|
+
if (!node) {
|
|
12
|
+
return undefined;
|
|
13
|
+
}
|
|
14
|
+
if (!node.parentNode) {
|
|
15
|
+
return node.nodeName === 'ink-root' ? node : undefined;
|
|
16
|
+
}
|
|
17
|
+
return findRootNode(node.parentNode);
|
|
18
|
+
};
|
|
19
|
+
/**
|
|
20
|
+
A React hook that returns the current layout metrics for a tracked box element.
|
|
21
|
+
It updates when layout changes (for example terminal resize, sibling/content changes, or position changes).
|
|
22
|
+
|
|
23
|
+
The hook returns `{width: 0, height: 0, left: 0, top: 0}` until the first layout pass completes. It also returns zeros when the tracked ref is detached.
|
|
24
|
+
|
|
25
|
+
Use `hasMeasured` to detect when the currently tracked element has been measured.
|
|
26
|
+
|
|
27
|
+
@example
|
|
28
|
+
```tsx
|
|
29
|
+
import {useRef} from 'react';
|
|
30
|
+
import {Box, Text, useBoxMetrics} from 'ink';
|
|
31
|
+
|
|
32
|
+
const Example = () => {
|
|
33
|
+
const ref = useRef(null);
|
|
34
|
+
const {width, height, left, top, hasMeasured} = useBoxMetrics(ref);
|
|
35
|
+
return (
|
|
36
|
+
<Box ref={ref}>
|
|
37
|
+
<Text>
|
|
38
|
+
{hasMeasured ? `${width}x${height} at ${left},${top}` : 'Measuring...'}
|
|
39
|
+
</Text>
|
|
40
|
+
</Box>
|
|
41
|
+
);
|
|
42
|
+
};
|
|
43
|
+
```
|
|
44
|
+
*/
|
|
45
|
+
const useBoxMetrics = (ref) => {
|
|
46
|
+
const [metrics, setMetrics] = useState(emptyMetrics);
|
|
47
|
+
const [hasMeasured, setHasMeasured] = useState(false);
|
|
48
|
+
const { stdout } = useStdout();
|
|
49
|
+
const updateMetrics = useCallback(() => {
|
|
50
|
+
const layout = ref.current?.yogaNode?.getComputedLayout() ?? emptyMetrics;
|
|
51
|
+
setMetrics(previousMetrics => {
|
|
52
|
+
const hasChanged = previousMetrics.width !== layout.width ||
|
|
53
|
+
previousMetrics.height !== layout.height ||
|
|
54
|
+
previousMetrics.left !== layout.left ||
|
|
55
|
+
previousMetrics.top !== layout.top;
|
|
56
|
+
return hasChanged ? layout : previousMetrics;
|
|
57
|
+
});
|
|
58
|
+
setHasMeasured(Boolean(ref.current));
|
|
59
|
+
}, [ref]);
|
|
60
|
+
// Runs after every render of this component.
|
|
61
|
+
// This keeps metrics fresh when local state/props in this subtree change.
|
|
62
|
+
useEffect(updateMetrics);
|
|
63
|
+
// Subscribe to root layout commits so memoized components still receive
|
|
64
|
+
// sibling-driven position/size updates, even when they skip re-rendering.
|
|
65
|
+
useEffect(() => {
|
|
66
|
+
const rootNode = findRootNode(ref.current);
|
|
67
|
+
if (!rootNode) {
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
70
|
+
return addLayoutListener(rootNode, updateMetrics);
|
|
71
|
+
});
|
|
72
|
+
// Terminal resize events do not go through React's render cycle. Ink
|
|
73
|
+
// recalculates Yoga layout in its own resize handler — registered in the
|
|
74
|
+
// Ink constructor, before this hook mounts — so by the time the resize
|
|
75
|
+
// callback runs, Yoga has already computed the post-resize metrics.
|
|
76
|
+
useEffect(() => {
|
|
77
|
+
stdout.on('resize', updateMetrics);
|
|
78
|
+
return () => {
|
|
79
|
+
stdout.off('resize', updateMetrics);
|
|
80
|
+
};
|
|
81
|
+
}, [stdout, updateMetrics]);
|
|
82
|
+
return useMemo(() => ({
|
|
83
|
+
...metrics,
|
|
84
|
+
hasMeasured,
|
|
85
|
+
}), [metrics, hasMeasured]);
|
|
86
|
+
};
|
|
87
|
+
export default useBoxMetrics;
|
|
88
|
+
//# sourceMappingURL=use-box-metrics.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-box-metrics.js","sourceRoot":"","sources":["../../src/hooks/use-box-metrics.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type CursorPosition } from '../log-update.js';
|
|
2
2
|
/**
|
|
3
|
-
|
|
3
|
+
A React hook that returns methods to control the terminal cursor position.
|
|
4
4
|
|
|
5
5
|
Setting a cursor position makes the cursor visible at the specified coordinates (relative to the Ink output origin). This is useful for IME (Input Method Editor) support, where the composing character is displayed at the cursor location.
|
|
6
6
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useContext, useRef, useCallback, useInsertionEffect } from 'react';
|
|
2
2
|
import CursorContext from '../components/CursorContext.js';
|
|
3
3
|
/**
|
|
4
|
-
|
|
4
|
+
A React hook that returns methods to control the terminal cursor position.
|
|
5
5
|
|
|
6
6
|
Setting a cursor position makes the cursor visible at the specified coordinates (relative to the Ink output origin). This is useful for IME (Input Method Editor) support, where the composing character is displayed at the cursor location.
|
|
7
7
|
|
|
@@ -17,12 +17,27 @@ type Output = {
|
|
|
17
17
|
*/
|
|
18
18
|
focusPrevious: Props['focusPrevious'];
|
|
19
19
|
/**
|
|
20
|
-
Switch focus to the element with provided `id`. If there's no element with that `id`, focus
|
|
20
|
+
Switch focus to the element with provided `id`. If there's no element with that `id`, focus is not changed.
|
|
21
21
|
*/
|
|
22
22
|
focus: Props['focus'];
|
|
23
|
+
/**
|
|
24
|
+
The ID of the currently focused component, or `undefined` if no component is focused.
|
|
25
|
+
|
|
26
|
+
@example
|
|
27
|
+
```tsx
|
|
28
|
+
import {Text, useFocusManager} from 'ink';
|
|
29
|
+
|
|
30
|
+
const Example = () => {
|
|
31
|
+
const {activeId} = useFocusManager();
|
|
32
|
+
|
|
33
|
+
return <Text>Focused: {activeId ?? 'none'}</Text>;
|
|
34
|
+
};
|
|
35
|
+
```
|
|
36
|
+
*/
|
|
37
|
+
activeId: Props['activeId'];
|
|
23
38
|
};
|
|
24
39
|
/**
|
|
25
|
-
|
|
40
|
+
A React hook that returns methods to enable or disable focus management for all components or manually switch focus to the next or previous components.
|
|
26
41
|
*/
|
|
27
42
|
declare const useFocusManager: () => Output;
|
|
28
43
|
export default useFocusManager;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useContext } from 'react';
|
|
2
2
|
import FocusContext from '../components/FocusContext.js';
|
|
3
3
|
/**
|
|
4
|
-
|
|
4
|
+
A React hook that returns methods to enable or disable focus management for all components or manually switch focus to the next or previous components.
|
|
5
5
|
*/
|
|
6
6
|
const useFocusManager = () => {
|
|
7
7
|
const focusContext = useContext(FocusContext);
|
|
@@ -11,6 +11,7 @@ const useFocusManager = () => {
|
|
|
11
11
|
focusNext: focusContext.focusNext,
|
|
12
12
|
focusPrevious: focusContext.focusPrevious,
|
|
13
13
|
focus: focusContext.focus,
|
|
14
|
+
activeId: focusContext.activeId,
|
|
14
15
|
};
|
|
15
16
|
};
|
|
16
17
|
export default useFocusManager;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-focus-manager.js","sourceRoot":"","sources":["../../src/hooks/use-focus-manager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,OAAO,CAAC;AACjC,OAAO,YAA0B,MAAM,+BAA+B,CAAC;
|
|
1
|
+
{"version":3,"file":"use-focus-manager.js","sourceRoot":"","sources":["../../src/hooks/use-focus-manager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,OAAO,CAAC;AACjC,OAAO,YAA0B,MAAM,+BAA+B,CAAC;AA6CvE;;EAEE;AACF,MAAM,eAAe,GAAG,GAAW,EAAE;IACpC,MAAM,YAAY,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAE9C,OAAO;QACN,WAAW,EAAE,YAAY,CAAC,WAAW;QACrC,YAAY,EAAE,YAAY,CAAC,YAAY;QACvC,SAAS,EAAE,YAAY,CAAC,SAAS;QACjC,aAAa,EAAE,YAAY,CAAC,aAAa;QACzC,KAAK,EAAE,YAAY,CAAC,KAAK;QACzB,QAAQ,EAAE,YAAY,CAAC,QAAQ;KAC/B,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}
|
|
@@ -23,7 +23,8 @@ type Output = {
|
|
|
23
23
|
focus: (id: string) => void;
|
|
24
24
|
};
|
|
25
25
|
/**
|
|
26
|
-
A
|
|
26
|
+
A React hook that returns focus state and focus controls for the current component.
|
|
27
|
+
A component that uses the `useFocus` hook becomes "focusable" to Ink, so when the user presses <kbd>Tab</kbd>, Ink will switch focus to this component. If there are multiple components that execute the `useFocus` hook, focus will be given to them in the order in which these components are rendered.
|
|
27
28
|
*/
|
|
28
29
|
declare const useFocus: ({ isActive, autoFocus, id: customId, }?: Input) => Output;
|
|
29
30
|
export default useFocus;
|
package/build/hooks/use-focus.js
CHANGED
|
@@ -2,7 +2,8 @@ import { useEffect, useContext, useMemo } from 'react';
|
|
|
2
2
|
import FocusContext from '../components/FocusContext.js';
|
|
3
3
|
import useStdin from './use-stdin.js';
|
|
4
4
|
/**
|
|
5
|
-
A
|
|
5
|
+
A React hook that returns focus state and focus controls for the current component.
|
|
6
|
+
A component that uses the `useFocus` hook becomes "focusable" to Ink, so when the user presses <kbd>Tab</kbd>, Ink will switch focus to this component. If there are multiple components that execute the `useFocus` hook, focus will be given to them in the order in which these components are rendered.
|
|
6
7
|
*/
|
|
7
8
|
const useFocus = ({ isActive = true, autoFocus = false, id: customId, } = {}) => {
|
|
8
9
|
const { isRawModeSupported, setRawMode } = useStdin();
|
|
@@ -15,7 +16,7 @@ const useFocus = ({ isActive = true, autoFocus = false, id: customId, } = {}) =>
|
|
|
15
16
|
return () => {
|
|
16
17
|
remove(id);
|
|
17
18
|
};
|
|
18
|
-
}, [id, autoFocus]);
|
|
19
|
+
}, [id, autoFocus, add, remove]);
|
|
19
20
|
useEffect(() => {
|
|
20
21
|
if (isActive) {
|
|
21
22
|
activate(id);
|
|
@@ -23,7 +24,7 @@ const useFocus = ({ isActive = true, autoFocus = false, id: customId, } = {}) =>
|
|
|
23
24
|
else {
|
|
24
25
|
deactivate(id);
|
|
25
26
|
}
|
|
26
|
-
}, [isActive, id]);
|
|
27
|
+
}, [isActive, id, activate, deactivate]);
|
|
27
28
|
useEffect(() => {
|
|
28
29
|
if (!isRawModeSupported || !isActive) {
|
|
29
30
|
return;
|
|
@@ -32,7 +33,7 @@ const useFocus = ({ isActive = true, autoFocus = false, id: customId, } = {}) =>
|
|
|
32
33
|
return () => {
|
|
33
34
|
setRawMode(false);
|
|
34
35
|
};
|
|
35
|
-
}, [isActive]);
|
|
36
|
+
}, [isActive, isRawModeSupported, setRawMode]);
|
|
36
37
|
return {
|
|
37
38
|
isFocused: Boolean(id) && activeId === id,
|
|
38
39
|
focus,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-focus.js","sourceRoot":"","sources":["../../src/hooks/use-focus.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,UAAU,EAAE,OAAO,EAAC,MAAM,OAAO,CAAC;AACrD,OAAO,YAAY,MAAM,+BAA+B,CAAC;AACzD,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AA+BtC
|
|
1
|
+
{"version":3,"file":"use-focus.js","sourceRoot":"","sources":["../../src/hooks/use-focus.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,UAAU,EAAE,OAAO,EAAC,MAAM,OAAO,CAAC;AACrD,OAAO,YAAY,MAAM,+BAA+B,CAAC;AACzD,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AA+BtC;;;EAGE;AACF,MAAM,QAAQ,GAAG,CAAC,EACjB,QAAQ,GAAG,IAAI,EACf,SAAS,GAAG,KAAK,EACjB,EAAE,EAAE,QAAQ,MACF,EAAE,EAAU,EAAE;IACxB,MAAM,EAAC,kBAAkB,EAAE,UAAU,EAAC,GAAG,QAAQ,EAAE,CAAC;IACpD,MAAM,EAAC,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAC,GACzD,UAAU,CAAC,YAAY,CAAC,CAAC;IAE1B,MAAM,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE;QACvB,OAAO,QAAQ,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACzD,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,SAAS,CAAC,GAAG,EAAE;QACd,GAAG,CAAC,EAAE,EAAE,EAAC,SAAS,EAAC,CAAC,CAAC;QAErB,OAAO,GAAG,EAAE;YACX,MAAM,CAAC,EAAE,CAAC,CAAC;QACZ,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC;IAEjC,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,QAAQ,EAAE,CAAC;YACd,QAAQ,CAAC,EAAE,CAAC,CAAC;QACd,CAAC;aAAM,CAAC;YACP,UAAU,CAAC,EAAE,CAAC,CAAC;QAChB,CAAC;IACF,CAAC,EAAE,CAAC,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC;IAEzC,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,CAAC,kBAAkB,IAAI,CAAC,QAAQ,EAAE,CAAC;YACtC,OAAO;QACR,CAAC;QAED,UAAU,CAAC,IAAI,CAAC,CAAC;QAEjB,OAAO,GAAG,EAAE;YACX,UAAU,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,EAAE,UAAU,CAAC,CAAC,CAAC;IAE/C,OAAO;QACN,SAAS,EAAE,OAAO,CAAC,EAAE,CAAC,IAAI,QAAQ,KAAK,EAAE;QACzC,KAAK;KACL,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -107,7 +107,8 @@ type Options = {
|
|
|
107
107
|
isActive?: boolean;
|
|
108
108
|
};
|
|
109
109
|
/**
|
|
110
|
-
|
|
110
|
+
A React hook that returns `void` and handles user input.
|
|
111
|
+
It's a more convenient alternative to using `StdinContext` and listening for `data` events. The callback you pass to `useInput` is called for each character when the user enters any input. However, if the user pastes text and it's more than one character, the callback will be called only once, and the whole string will be passed as `input`.
|
|
111
112
|
|
|
112
113
|
```
|
|
113
114
|
import {useInput} from 'ink';
|