roamjs-components 0.66.9 → 0.66.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/AutocompleteInput.js +3 -1
- package/components/AutocompleteInput.js.map +1 -1
- package/components/BlockInput.js +3 -1
- package/components/BlockInput.js.map +1 -1
- package/components/PageInput.js +3 -1
- package/components/PageInput.js.map +1 -1
- package/hooks/useArrowKeyDown.d.ts +3 -1
- package/hooks/useArrowKeyDown.js +26 -3
- package/hooks/useArrowKeyDown.js.map +1 -1
- package/package.json +1 -1
|
@@ -16,6 +16,7 @@ const AutocompleteInput = ({ value, setValue, onBlur, onConfirm, showButton, opt
|
|
|
16
16
|
.slice(0, 9)
|
|
17
17
|
.map((e) => e.string)
|
|
18
18
|
: options, [value, options]);
|
|
19
|
+
const menuRef = (0, react_1.useRef)(null);
|
|
19
20
|
const inputRef = (0, react_1.useRef)(null);
|
|
20
21
|
const onEnter = (0, react_1.useCallback)((value) => {
|
|
21
22
|
if (isOpen) {
|
|
@@ -32,6 +33,7 @@ const AutocompleteInput = ({ value, setValue, onBlur, onConfirm, showButton, opt
|
|
|
32
33
|
const { activeIndex, onKeyDown } = (0, useArrowKeyDown_1.default)({
|
|
33
34
|
onEnter,
|
|
34
35
|
results: items,
|
|
36
|
+
menuRef,
|
|
35
37
|
});
|
|
36
38
|
(0, react_1.useEffect)(() => {
|
|
37
39
|
if (!items.length || !isTyping)
|
|
@@ -42,7 +44,7 @@ const AutocompleteInput = ({ value, setValue, onBlur, onConfirm, showButton, opt
|
|
|
42
44
|
return (react_1.default.createElement(core_1.Popover, { portalClassName: "roamjs-autocomplete-input", targetClassName: "roamjs-autocomplete-input-target", captureDismiss: true, isOpen: isOpen, onOpened: open, minimal: true, autoFocus: false, enforceFocus: false, position: core_1.PopoverPosition.BOTTOM_LEFT, modifiers: {
|
|
43
45
|
flip: { enabled: false },
|
|
44
46
|
preventOverflow: { enabled: false },
|
|
45
|
-
}, content: react_1.default.createElement(core_1.Menu, { className: "max-h-64 overflow-auto max-w-md" }, items.map((t, i) => (react_1.default.createElement(core_1.MenuItem, { text: t, active: activeIndex === i, key: i, multiline: true, onClick: () => {
|
|
47
|
+
}, content: react_1.default.createElement(core_1.Menu, { className: "max-h-64 overflow-auto max-w-md", ulRef: menuRef }, items.map((t, i) => (react_1.default.createElement(core_1.MenuItem, { text: t, active: activeIndex === i, key: i, multiline: true, onClick: () => {
|
|
46
48
|
var _a;
|
|
47
49
|
setIsTyping(false);
|
|
48
50
|
setValue(t);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AutocompleteInput.js","sourceRoot":"","sources":["../src/components/AutocompleteInput.tsx"],"names":[],"mappings":";;;AAAA,4CAO2B;AAC3B,uDAMe;AACf,uFAAuD;AACvD,0DAA0B;AAE1B,MAAM,iBAAiB,GAAG,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,UAAU,EACV,OAAO,GAAG,EAAE,EACZ,WAAW,GAAG,aAAa,GAS5B,EAAsB,EAAE;IACvB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,IAAI,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAC7D,MAAM,KAAK,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAC/D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAChD,MAAM,KAAK,GAAG,IAAA,eAAO,EACnB,GAAG,EAAE,CACH,KAAK;QACH,CAAC,CAAC,eAAK;aACF,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC;aACtB,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;aACX,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;QACzB,CAAC,CAAC,OAAO,EACb,CAAC,KAAK,EAAE,OAAO,CAAC,CACjB,CAAC;IACF,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,IAAA,mBAAW,EACzB,CAAC,KAAK,EAAE,EAAE;QACR,IAAI,MAAM,EAAE;YACV,QAAQ,CAAC,KAAK,CAAC,CAAC;YAChB,WAAW,CAAC,KAAK,CAAC,CAAC;SACpB;aAAM,IAAI,SAAS,EAAE;YACpB,SAAS,EAAE,CAAC;SACb;aAAM;YACL,SAAS,CAAC,IAAI,CAAC,CAAC;SACjB;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,CACrC,CAAC;IACF,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,IAAA,yBAAe,EAAC;QACjD,OAAO;QACP,OAAO,EAAE,KAAK;
|
|
1
|
+
{"version":3,"file":"AutocompleteInput.js","sourceRoot":"","sources":["../src/components/AutocompleteInput.tsx"],"names":[],"mappings":"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"}
|
package/components/BlockInput.js
CHANGED
|
@@ -15,6 +15,7 @@ const BlockInput = ({ value, setValue, onBlur, onConfirm, getAllBlocks = getAllB
|
|
|
15
15
|
const close = (0, react_1.useCallback)(() => setIsOpen(false), [setIsOpen]);
|
|
16
16
|
const allBlocks = (0, react_1.useMemo)(getAllBlocks, []);
|
|
17
17
|
const items = (0, react_1.useMemo)(() => (value && isOpen ? searchBlocksByString(value, allBlocks) : []), [value, allBlocks]);
|
|
18
|
+
const menuRef = (0, react_1.useRef)(null);
|
|
18
19
|
const inputRef = (0, react_1.useRef)(null);
|
|
19
20
|
const { activeIndex, onKeyDown } = (0, useArrowKeyDown_1.default)({
|
|
20
21
|
onEnter: (value) => {
|
|
@@ -27,11 +28,12 @@ const BlockInput = ({ value, setValue, onBlur, onConfirm, getAllBlocks = getAllB
|
|
|
27
28
|
}
|
|
28
29
|
},
|
|
29
30
|
results: items,
|
|
31
|
+
menuRef,
|
|
30
32
|
});
|
|
31
33
|
return (react_1.default.createElement(core_1.Popover, { portalClassName: "roamjs-block-input", targetClassName: "roamjs-block-input-target", captureDismiss: true, isOpen: isOpen, onOpened: open, minimal: true, autoFocus: false, enforceFocus: false, position: core_1.PopoverPosition.BOTTOM_LEFT, modifiers: {
|
|
32
34
|
flip: { enabled: false },
|
|
33
35
|
preventOverflow: { enabled: false },
|
|
34
|
-
}, content: react_1.default.createElement(core_1.Menu, {
|
|
36
|
+
}, content: react_1.default.createElement(core_1.Menu, { className: "max-h-64 overflow-auto max-w-md", ulRef: menuRef }, items.map((t, i) => (react_1.default.createElement(core_1.MenuItem, { text: t.text, active: activeIndex === i, key: t.uid, multiline: true, onClick: () => {
|
|
35
37
|
var _a;
|
|
36
38
|
setValue(t.text, t.uid);
|
|
37
39
|
close();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlockInput.js","sourceRoot":"","sources":["../src/components/BlockInput.tsx"],"names":[],"mappings":";;;AAAA,4CAM2B;AAC3B,uDAAsE;AACtE,yGAAyE;AACzE,uFAAuD;AAEvD,MAAM,oBAAoB,GAAG,CAC3B,CAAS,EACT,MAAuC,EACvC,EAAE;IACF,MAAM,KAAK,GAAG,IAAI,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IACjC,OAAO,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC9D,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,EAClB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,YAAY,GAAG,iCAAuB,GAOvC,EAAsB,EAAE;IACvB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,IAAI,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAC7D,MAAM,KAAK,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,IAAA,eAAO,EAAC,YAAY,EAAE,EAAE,CAAC,CAAC;IAC5C,MAAM,KAAK,GAAG,IAAA,eAAO,EACnB,GAAG,EAAE,CAAC,CAAC,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,oBAAoB,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EACrE,CAAC,KAAK,EAAE,SAAS,CAAC,CACnB,CAAC;IACF,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IAChD,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,IAAA,yBAAe,EAAC;QACjD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACjB,IAAI,MAAM,EAAE;gBACV,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;gBAChC,KAAK,EAAE,CAAC;aACT;iBAAM,IAAI,SAAS,EAAE;gBACpB,SAAS,EAAE,CAAC;aACb;QACH,CAAC;QACD,OAAO,EAAE,KAAK;
|
|
1
|
+
{"version":3,"file":"BlockInput.js","sourceRoot":"","sources":["../src/components/BlockInput.tsx"],"names":[],"mappings":"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"}
|
package/components/PageInput.js
CHANGED
|
@@ -18,6 +18,7 @@ const PageInput = ({ value, setValue, onBlur, onConfirm, showButton, extra = DEF
|
|
|
18
18
|
.slice(0, 9)
|
|
19
19
|
.map((e) => e.string)
|
|
20
20
|
: [], [value, allPages]);
|
|
21
|
+
const menuRef = (0, react_1.useRef)(null);
|
|
21
22
|
const inputRef = (0, react_1.useRef)(null);
|
|
22
23
|
const onEnter = (0, react_1.useCallback)((value) => {
|
|
23
24
|
if (isOpen) {
|
|
@@ -31,11 +32,12 @@ const PageInput = ({ value, setValue, onBlur, onConfirm, showButton, extra = DEF
|
|
|
31
32
|
const { activeIndex, onKeyDown } = (0, useArrowKeyDown_1.default)({
|
|
32
33
|
onEnter,
|
|
33
34
|
results: items,
|
|
35
|
+
menuRef,
|
|
34
36
|
});
|
|
35
37
|
return (react_1.default.createElement(core_1.Popover, { portalClassName: "roamjs-page-input", targetClassName: "roamjs-page-input-target", captureDismiss: true, isOpen: isOpen, onOpened: open, minimal: true, autoFocus: false, enforceFocus: false, position: core_1.PopoverPosition.BOTTOM_LEFT, modifiers: {
|
|
36
38
|
flip: { enabled: false },
|
|
37
39
|
preventOverflow: { enabled: false },
|
|
38
|
-
}, content: react_1.default.createElement(core_1.Menu, {
|
|
40
|
+
}, content: react_1.default.createElement(core_1.Menu, { className: "max-h-64 overflow-auto max-w-md", ulRef: menuRef }, items.map((t, i) => (react_1.default.createElement(core_1.MenuItem, { text: t, active: activeIndex === i, key: i, multiline: true, onClick: () => {
|
|
39
41
|
var _a;
|
|
40
42
|
setValue(items[i]);
|
|
41
43
|
close();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageInput.js","sourceRoot":"","sources":["../src/components/PageInput.tsx"],"names":[],"mappings":";;;AAAA,4CAO2B;AAC3B,uDAAsE;AACtE,yFAAyD;AACzD,uFAAuD;AACvD,0DAA0B;AAE1B,MAAM,aAAa,GAAa,EAAE,CAAC;AAEnC,MAAM,SAAS,GAAG,CAAC,EACjB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,UAAU,EACV,KAAK,GAAG,aAAa,GAQtB,EAAsB,EAAE;IACvB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,IAAI,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAC7D,MAAM,KAAK,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAC/D,MAAM,QAAQ,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,CAAC,GAAG,IAAA,yBAAe,GAAE,EAAE,GAAG,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAC1E,MAAM,KAAK,GAAG,IAAA,eAAO,EACnB,GAAG,EAAE,CACH,KAAK,IAAI,MAAM;QACb,CAAC,CAAC,eAAK;aACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC;aACvB,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;aACX,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;QACzB,CAAC,CAAC,EAAE,EACR,CAAC,KAAK,EAAE,QAAQ,CAAC,CAClB,CAAC;IACF,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,IAAA,mBAAW,EACzB,CAAC,KAAK,EAAE,EAAE;QACR,IAAI,MAAM,EAAE;YACV,QAAQ,CAAC,KAAK,CAAC,CAAC;YAChB,KAAK,EAAE,CAAC;SACT;aAAM,IAAI,SAAS,EAAE;YACpB,SAAS,EAAE,CAAC;SACb;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,CACrC,CAAC;IACF,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,IAAA,yBAAe,EAAC;QACjD,OAAO;QACP,OAAO,EAAE,KAAK;
|
|
1
|
+
{"version":3,"file":"PageInput.js","sourceRoot":"","sources":["../src/components/PageInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
import React from "react";
|
|
2
|
+
declare const useArrowKeyDown: <T>({ results, onEnter, menuRef, }: {
|
|
2
3
|
results: T[];
|
|
3
4
|
onEnter: (i: T) => void;
|
|
5
|
+
menuRef: React.RefObject<HTMLUListElement>;
|
|
4
6
|
}) => {
|
|
5
7
|
activeIndex: number;
|
|
6
8
|
onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
|
package/hooks/useArrowKeyDown.js
CHANGED
|
@@ -1,17 +1,40 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const react_1 = require("react");
|
|
4
|
-
const
|
|
4
|
+
const isElInView = (el, ul) => {
|
|
5
|
+
const containerTop = ul.scrollTop;
|
|
6
|
+
const containerBottom = containerTop + ul.offsetHeight;
|
|
7
|
+
const elemTop = el.offsetTop;
|
|
8
|
+
const elemBottom = elemTop + el.offsetHeight;
|
|
9
|
+
return elemBottom <= containerBottom && elemTop >= containerTop;
|
|
10
|
+
};
|
|
11
|
+
const useArrowKeyDown = ({ results, onEnter, menuRef, }) => {
|
|
5
12
|
const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
|
|
6
13
|
const onKeyDown = (0, react_1.useCallback)((e) => {
|
|
7
14
|
if (results.length > 0) {
|
|
8
15
|
if (e.key === "ArrowDown") {
|
|
9
|
-
|
|
16
|
+
const newIndex = (activeIndex + 1) % results.length;
|
|
17
|
+
setActiveIndex(newIndex);
|
|
18
|
+
const ul = menuRef.current;
|
|
19
|
+
if (ul) {
|
|
20
|
+
const el = ul.children[newIndex];
|
|
21
|
+
if (el && !isElInView(el, ul)) {
|
|
22
|
+
el.scrollIntoView(false);
|
|
23
|
+
}
|
|
24
|
+
}
|
|
10
25
|
e.preventDefault();
|
|
11
26
|
e.stopPropagation();
|
|
12
27
|
}
|
|
13
28
|
else if (e.key === "ArrowUp") {
|
|
14
|
-
|
|
29
|
+
const newIndex = (activeIndex + results.length - 1) % results.length;
|
|
30
|
+
setActiveIndex(newIndex);
|
|
31
|
+
const ul = menuRef.current;
|
|
32
|
+
if (ul) {
|
|
33
|
+
const el = ul.children[newIndex];
|
|
34
|
+
if (el && !isElInView(el, ul)) {
|
|
35
|
+
el.scrollIntoView(true);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
15
38
|
e.preventDefault();
|
|
16
39
|
e.stopPropagation();
|
|
17
40
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useArrowKeyDown.js","sourceRoot":"","sources":["../src/hooks/useArrowKeyDown.ts"],"names":[],"mappings":";;AAAA,
|
|
1
|
+
{"version":3,"file":"useArrowKeyDown.js","sourceRoot":"","sources":["../src/hooks/useArrowKeyDown.ts"],"names":[],"mappings":";;AAAA,iCAAqD;AAErD,MAAM,UAAU,GAAG,CAAC,EAAe,EAAE,EAAe,EAAE,EAAE;IACtD,MAAM,YAAY,GAAG,EAAE,CAAC,SAAS,CAAC;IAClC,MAAM,eAAe,GAAG,YAAY,GAAG,EAAE,CAAC,YAAY,CAAC;IAEvD,MAAM,OAAO,GAAG,EAAE,CAAC,SAAS,CAAC;IAC7B,MAAM,UAAU,GAAG,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC;IAE7C,OAAO,UAAU,IAAI,eAAe,IAAI,OAAO,IAAI,YAAY,CAAC;AAClE,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CAAI,EAC1B,OAAO,EACP,OAAO,EACP,OAAO,GAKR,EAGC,EAAE;IACF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,IAAA,mBAAW,EAC3B,CAAC,CAAwC,EAAE,EAAE;QAC3C,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;YACtB,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE;gBACzB,MAAM,QAAQ,GAAG,CAAC,WAAW,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC;gBACpD,cAAc,CAAC,QAAQ,CAAC,CAAC;gBACzB,MAAM,EAAE,GAAG,OAAO,CAAC,OAAO,CAAC;gBAC3B,IAAI,EAAE,EAAE;oBACN,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAgB,CAAC;oBAChD,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE;wBAC7B,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;qBAC1B;iBACF;gBACD,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;aACrB;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,EAAE;gBAC9B,MAAM,QAAQ,GAAG,CAAC,WAAW,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC;gBACrE,cAAc,CAAC,QAAQ,CAAC,CAAC;gBACzB,MAAM,EAAE,GAAG,OAAO,CAAC,OAAO,CAAC;gBAC3B,IAAI,EAAE,EAAE;oBACN,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAgB,CAAC;oBAChD,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE;wBAC7B,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;qBACzB;iBACF;gBACD,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;aACrB;SACF;QACD,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;YACrB,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC;YAC9B,cAAc,CAAC,CAAC,CAAC,CAAC;YAClB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;SACrB;IACH,CAAC,EACD,CAAC,WAAW,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,CAAC,CAChD,CAAC;IACF,OAAO;QACL,WAAW;QACX,SAAS;KACV,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,eAAe,CAAC"}
|