notra-editor 0.8.2 → 0.8.3
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/slash-dropdown-menu/filter-slash-items.cjs +46 -0
- package/dist/components/slash-dropdown-menu/filter-slash-items.cjs.map +1 -0
- package/dist/components/slash-dropdown-menu/filter-slash-items.d.cts +15 -0
- package/dist/components/slash-dropdown-menu/filter-slash-items.d.ts +15 -0
- package/dist/components/slash-dropdown-menu/filter-slash-items.mjs +21 -0
- package/dist/components/slash-dropdown-menu/filter-slash-items.mjs.map +1 -0
- package/dist/components/slash-dropdown-menu/slash-dropdown-menu.cjs +228 -85
- package/dist/components/slash-dropdown-menu/slash-dropdown-menu.cjs.map +1 -1
- package/dist/components/slash-dropdown-menu/slash-dropdown-menu.mjs +249 -84
- package/dist/components/slash-dropdown-menu/slash-dropdown-menu.mjs.map +1 -1
- package/dist/components/{suggestion-menu/suggestion-menu-types.cjs → slash-dropdown-menu/types.cjs} +4 -4
- package/dist/components/slash-dropdown-menu/types.cjs.map +1 -0
- package/dist/components/{suggestion-menu/suggestion-menu-types.d.cts → slash-dropdown-menu/types.d.cts} +2 -2
- package/dist/components/{suggestion-menu/suggestion-menu-types.d.ts → slash-dropdown-menu/types.d.ts} +2 -2
- package/dist/components/slash-dropdown-menu/types.mjs +1 -0
- package/dist/components/slash-dropdown-menu/use-slash-items.cjs.map +1 -1
- package/dist/components/slash-dropdown-menu/use-slash-items.d.cts +2 -2
- package/dist/components/slash-dropdown-menu/use-slash-items.d.ts +2 -2
- package/dist/components/slash-dropdown-menu/use-slash-items.mjs.map +1 -1
- package/dist/components/ui/command.cjs +1 -1
- package/dist/components/ui/command.cjs.map +1 -1
- package/dist/components/ui/command.mjs +1 -1
- package/dist/components/ui/command.mjs.map +1 -1
- package/dist/components/ui/input-group.d.cts +1 -1
- package/dist/components/ui/input-group.d.ts +1 -1
- package/dist/styles/globals.css +1 -2
- package/dist/themes/default/editor.css +18 -6
- package/package.json +2 -1
- package/dist/components/suggestion-menu/filter-suggestion-items.cjs +0 -57
- package/dist/components/suggestion-menu/filter-suggestion-items.cjs.map +0 -1
- package/dist/components/suggestion-menu/filter-suggestion-items.d.cts +0 -6
- package/dist/components/suggestion-menu/filter-suggestion-items.d.ts +0 -6
- package/dist/components/suggestion-menu/filter-suggestion-items.mjs +0 -32
- package/dist/components/suggestion-menu/filter-suggestion-items.mjs.map +0 -1
- package/dist/components/suggestion-menu/suggestion-menu-types.cjs.map +0 -1
- package/dist/components/suggestion-menu/suggestion-menu-types.mjs +0 -1
- package/dist/components/suggestion-menu/suggestion-menu.cjs +0 -205
- package/dist/components/suggestion-menu/suggestion-menu.cjs.map +0 -1
- package/dist/components/suggestion-menu/suggestion-menu.d.cts +0 -27
- package/dist/components/suggestion-menu/suggestion-menu.d.ts +0 -27
- package/dist/components/suggestion-menu/suggestion-menu.mjs +0 -181
- package/dist/components/suggestion-menu/suggestion-menu.mjs.map +0 -1
- package/dist/hooks/use-floating-element.cjs +0 -55
- package/dist/hooks/use-floating-element.cjs.map +0 -1
- package/dist/hooks/use-floating-element.d.cts +0 -21
- package/dist/hooks/use-floating-element.d.ts +0 -21
- package/dist/hooks/use-floating-element.mjs +0 -35
- package/dist/hooks/use-floating-element.mjs.map +0 -1
- /package/dist/components/{suggestion-menu/suggestion-menu-types.mjs.map → slash-dropdown-menu/types.mjs.map} +0 -0
|
@@ -1,181 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
// src/components/suggestion-menu/suggestion-menu.tsx
|
|
4
|
-
import { flip, offset, shift, size } from "@floating-ui/react";
|
|
5
|
-
import { PluginKey } from "@tiptap/pm/state";
|
|
6
|
-
import { Suggestion } from "@tiptap/suggestion";
|
|
7
|
-
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
8
|
-
import { useFloatingElement } from "../../hooks/use-floating-element.mjs";
|
|
9
|
-
import { jsx } from "react/jsx-runtime";
|
|
10
|
-
var FLOATING_Z_INDEX = 1e3;
|
|
11
|
-
function SuggestionMenu({
|
|
12
|
-
editor,
|
|
13
|
-
char,
|
|
14
|
-
pluginKey,
|
|
15
|
-
items: itemsFn,
|
|
16
|
-
decorationClass,
|
|
17
|
-
decorationContent,
|
|
18
|
-
selector = "notra-suggestion-menu",
|
|
19
|
-
maxHeight = 384,
|
|
20
|
-
children
|
|
21
|
-
}) {
|
|
22
|
-
const [open, setOpen] = useState(false);
|
|
23
|
-
const [decorationNode, setDecorationNode] = useState(
|
|
24
|
-
null
|
|
25
|
-
);
|
|
26
|
-
const [items, setItems] = useState([]);
|
|
27
|
-
const [query, setQuery] = useState("");
|
|
28
|
-
const [selectedIndex, setSelectedIndex] = useState(0);
|
|
29
|
-
const commandRef = useRef(null);
|
|
30
|
-
useEffect(() => {
|
|
31
|
-
setSelectedIndex(0);
|
|
32
|
-
}, [query, items.length]);
|
|
33
|
-
const close = useCallback(() => {
|
|
34
|
-
setOpen(false);
|
|
35
|
-
}, []);
|
|
36
|
-
const middleware = useMemo(
|
|
37
|
-
() => [
|
|
38
|
-
offset(8),
|
|
39
|
-
flip({ mainAxis: true, crossAxis: false }),
|
|
40
|
-
shift({ padding: 8 }),
|
|
41
|
-
size({
|
|
42
|
-
apply({ availableHeight, elements }) {
|
|
43
|
-
const next = Math.min(availableHeight, maxHeight);
|
|
44
|
-
elements.floating.style.setProperty(
|
|
45
|
-
"--suggestion-menu-max-height",
|
|
46
|
-
`${next}px`
|
|
47
|
-
);
|
|
48
|
-
}
|
|
49
|
-
})
|
|
50
|
-
],
|
|
51
|
-
[maxHeight]
|
|
52
|
-
);
|
|
53
|
-
const { setFloatingRef, style, getFloatingProps, isMounted } = useFloatingElement(open, decorationNode, FLOATING_Z_INDEX, {
|
|
54
|
-
placement: "bottom-start",
|
|
55
|
-
middleware,
|
|
56
|
-
onOpenChange: (next) => {
|
|
57
|
-
if (!next) close();
|
|
58
|
-
}
|
|
59
|
-
});
|
|
60
|
-
const itemsFnRef = useRef(itemsFn);
|
|
61
|
-
const decorationClassRef = useRef(decorationClass);
|
|
62
|
-
const decorationContentRef = useRef(decorationContent);
|
|
63
|
-
useEffect(() => {
|
|
64
|
-
itemsFnRef.current = itemsFn;
|
|
65
|
-
decorationClassRef.current = decorationClass;
|
|
66
|
-
decorationContentRef.current = decorationContent;
|
|
67
|
-
}, [itemsFn, decorationClass, decorationContent]);
|
|
68
|
-
const itemsRef = useRef([]);
|
|
69
|
-
const selectedIndexRef = useRef(0);
|
|
70
|
-
useEffect(() => {
|
|
71
|
-
itemsRef.current = items;
|
|
72
|
-
}, [items]);
|
|
73
|
-
useEffect(() => {
|
|
74
|
-
selectedIndexRef.current = selectedIndex;
|
|
75
|
-
}, [selectedIndex]);
|
|
76
|
-
useEffect(() => {
|
|
77
|
-
if (!editor || editor.isDestroyed) return;
|
|
78
|
-
const key = new PluginKey(pluginKey);
|
|
79
|
-
const plugin = Suggestion({
|
|
80
|
-
editor,
|
|
81
|
-
char,
|
|
82
|
-
pluginKey: key,
|
|
83
|
-
decorationClass: decorationClassRef.current,
|
|
84
|
-
decorationContent: decorationContentRef.current,
|
|
85
|
-
items: ({ query: query2, editor: editor2 }) => itemsFnRef.current({ query: query2, editor: editor2 }),
|
|
86
|
-
allow: ({ state, range }) => {
|
|
87
|
-
const $from = state.doc.resolve(range.from);
|
|
88
|
-
for (let depth = $from.depth; depth > 0; depth--) {
|
|
89
|
-
const name = $from.node(depth).type.name;
|
|
90
|
-
if (name === "image" || name === "codeBlock") return false;
|
|
91
|
-
}
|
|
92
|
-
return true;
|
|
93
|
-
},
|
|
94
|
-
command: ({ editor: editor2, range, props }) => {
|
|
95
|
-
editor2.chain().focus().deleteRange(range).run();
|
|
96
|
-
props.onSelect({ editor: editor2, range });
|
|
97
|
-
},
|
|
98
|
-
render: () => ({
|
|
99
|
-
onStart: (props) => {
|
|
100
|
-
setDecorationNode(props.decorationNode ?? null);
|
|
101
|
-
setItems(props.items);
|
|
102
|
-
setQuery(props.query);
|
|
103
|
-
commandRef.current = (item) => props.command(item);
|
|
104
|
-
setOpen(true);
|
|
105
|
-
},
|
|
106
|
-
onUpdate: (props) => {
|
|
107
|
-
setDecorationNode(props.decorationNode ?? null);
|
|
108
|
-
setItems(props.items);
|
|
109
|
-
setQuery(props.query);
|
|
110
|
-
commandRef.current = (item) => props.command(item);
|
|
111
|
-
},
|
|
112
|
-
onKeyDown: ({ event }) => {
|
|
113
|
-
const list = itemsRef.current;
|
|
114
|
-
if (event.key === "ArrowDown") {
|
|
115
|
-
if (list.length > 0) {
|
|
116
|
-
setSelectedIndex((selectedIndexRef.current + 1) % list.length);
|
|
117
|
-
}
|
|
118
|
-
return true;
|
|
119
|
-
}
|
|
120
|
-
if (event.key === "ArrowUp") {
|
|
121
|
-
if (list.length > 0) {
|
|
122
|
-
setSelectedIndex(
|
|
123
|
-
(selectedIndexRef.current - 1 + list.length) % list.length
|
|
124
|
-
);
|
|
125
|
-
}
|
|
126
|
-
return true;
|
|
127
|
-
}
|
|
128
|
-
if (event.key === "Enter") {
|
|
129
|
-
const item = list[selectedIndexRef.current];
|
|
130
|
-
if (item && commandRef.current) {
|
|
131
|
-
commandRef.current(item);
|
|
132
|
-
}
|
|
133
|
-
return true;
|
|
134
|
-
}
|
|
135
|
-
if (event.key === "Escape") {
|
|
136
|
-
close();
|
|
137
|
-
return true;
|
|
138
|
-
}
|
|
139
|
-
return false;
|
|
140
|
-
},
|
|
141
|
-
onExit: () => {
|
|
142
|
-
setDecorationNode(null);
|
|
143
|
-
setItems([]);
|
|
144
|
-
setQuery("");
|
|
145
|
-
commandRef.current = null;
|
|
146
|
-
setOpen(false);
|
|
147
|
-
}
|
|
148
|
-
})
|
|
149
|
-
});
|
|
150
|
-
editor.registerPlugin(plugin);
|
|
151
|
-
return () => {
|
|
152
|
-
if (!editor.isDestroyed) {
|
|
153
|
-
editor.unregisterPlugin(key);
|
|
154
|
-
}
|
|
155
|
-
};
|
|
156
|
-
}, [editor, char, pluginKey, close]);
|
|
157
|
-
const handleSelect = useCallback((item) => {
|
|
158
|
-
if (commandRef.current) {
|
|
159
|
-
commandRef.current(item);
|
|
160
|
-
}
|
|
161
|
-
}, []);
|
|
162
|
-
if (!isMounted || !open) return null;
|
|
163
|
-
return /* @__PURE__ */ jsx(
|
|
164
|
-
"div",
|
|
165
|
-
{
|
|
166
|
-
ref: setFloatingRef,
|
|
167
|
-
"aria-label": "Suggestions",
|
|
168
|
-
className: "notra-suggestion-menu",
|
|
169
|
-
"data-selector": selector,
|
|
170
|
-
role: "listbox",
|
|
171
|
-
style,
|
|
172
|
-
...getFloatingProps(),
|
|
173
|
-
onPointerDown: (e) => e.preventDefault(),
|
|
174
|
-
children: children({ items, selectedIndex, onSelect: handleSelect })
|
|
175
|
-
}
|
|
176
|
-
);
|
|
177
|
-
}
|
|
178
|
-
export {
|
|
179
|
-
SuggestionMenu
|
|
180
|
-
};
|
|
181
|
-
//# sourceMappingURL=suggestion-menu.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/suggestion-menu/suggestion-menu.tsx"],"sourcesContent":["'use client';\n\nimport { flip, offset, shift, size } from '@floating-ui/react';\nimport { PluginKey } from '@tiptap/pm/state';\nimport { Suggestion } from '@tiptap/suggestion';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useFloatingElement } from '../../hooks/use-floating-element.js';\n\nimport type { SuggestionItem } from './suggestion-menu-types.js';\nimport type { Editor } from '@tiptap/react';\nimport type {\n\tSuggestionKeyDownProps,\n\tSuggestionProps\n} from '@tiptap/suggestion';\nimport type { ReactNode } from 'react';\n\nexport interface SuggestionMenuRenderProps {\n\titems: SuggestionItem[];\n\tselectedIndex: number;\n\tonSelect: (item: SuggestionItem) => void;\n}\n\nexport interface SuggestionMenuProps {\n\teditor: Editor | null;\n\tchar: string;\n\tpluginKey: string;\n\titems: (ctx: { query: string; editor: Editor }) => SuggestionItem[];\n\tdecorationClass?: string;\n\tdecorationContent?: string;\n\tselector?: string;\n\tmaxHeight?: number;\n\tchildren: (renderProps: SuggestionMenuRenderProps) => ReactNode;\n}\n\nconst FLOATING_Z_INDEX = 1000;\n\nexport function SuggestionMenu({\n\teditor,\n\tchar,\n\tpluginKey,\n\titems: itemsFn,\n\tdecorationClass,\n\tdecorationContent,\n\tselector = 'notra-suggestion-menu',\n\tmaxHeight = 384,\n\tchildren\n}: SuggestionMenuProps) {\n\tconst [open, setOpen] = useState(false);\n\tconst [decorationNode, setDecorationNode] = useState<HTMLElement | null>(\n\t\tnull\n\t);\n\tconst [items, setItems] = useState<SuggestionItem[]>([]);\n\tconst [query, setQuery] = useState('');\n\tconst [selectedIndex, setSelectedIndex] = useState(0);\n\tconst commandRef = useRef<((item: SuggestionItem) => void) | null>(null);\n\n\t// Reset selection when the visible item list changes.\n\tuseEffect(() => {\n\t\tsetSelectedIndex(0);\n\t}, [query, items.length]);\n\n\tconst close = useCallback(() => {\n\t\tsetOpen(false);\n\t}, []);\n\n\tconst middleware = useMemo(\n\t\t() => [\n\t\t\toffset(8),\n\t\t\tflip({ mainAxis: true, crossAxis: false }),\n\t\t\tshift({ padding: 8 }),\n\t\t\tsize({\n\t\t\t\tapply({ availableHeight, elements }) {\n\t\t\t\t\tconst next = Math.min(availableHeight, maxHeight);\n\n\t\t\t\t\telements.floating.style.setProperty(\n\t\t\t\t\t\t'--suggestion-menu-max-height',\n\t\t\t\t\t\t`${next}px`\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t})\n\t\t],\n\t\t[maxHeight]\n\t);\n\n\tconst { setFloatingRef, style, getFloatingProps, isMounted } =\n\t\tuseFloatingElement(open, decorationNode, FLOATING_Z_INDEX, {\n\t\t\tplacement: 'bottom-start',\n\t\t\tmiddleware,\n\t\t\tonOpenChange: (next) => {\n\t\t\t\tif (!next) close();\n\t\t\t}\n\t\t});\n\n\t// Stable refs for the latest render-callback inputs (the suggestion plugin\n\t// is registered once per editor; we don't want to re-register every render).\n\tconst itemsFnRef = useRef(itemsFn);\n\tconst decorationClassRef = useRef(decorationClass);\n\tconst decorationContentRef = useRef(decorationContent);\n\n\tuseEffect(() => {\n\t\titemsFnRef.current = itemsFn;\n\t\tdecorationClassRef.current = decorationClass;\n\t\tdecorationContentRef.current = decorationContent;\n\t}, [itemsFn, decorationClass, decorationContent]);\n\n\tconst itemsRef = useRef<SuggestionItem[]>([]);\n\tconst selectedIndexRef = useRef(0);\n\n\tuseEffect(() => {\n\t\titemsRef.current = items;\n\t}, [items]);\n\n\tuseEffect(() => {\n\t\tselectedIndexRef.current = selectedIndex;\n\t}, [selectedIndex]);\n\n\tuseEffect(() => {\n\t\tif (!editor || editor.isDestroyed) return;\n\n\t\tconst key = new PluginKey(pluginKey);\n\n\t\tconst plugin = Suggestion<SuggestionItem>({\n\t\t\teditor,\n\t\t\tchar,\n\t\t\tpluginKey: key,\n\t\t\tdecorationClass: decorationClassRef.current,\n\t\t\tdecorationContent: decorationContentRef.current,\n\n\t\t\titems: ({ query, editor }) => itemsFnRef.current({ query, editor }),\n\n\t\t\tallow: ({ state, range }) => {\n\t\t\t\tconst $from = state.doc.resolve(range.from);\n\n\t\t\t\tfor (let depth = $from.depth; depth > 0; depth--) {\n\t\t\t\t\tconst name = $from.node(depth).type.name;\n\n\t\t\t\t\tif (name === 'image' || name === 'codeBlock') return false;\n\t\t\t\t}\n\n\t\t\t\treturn true;\n\t\t\t},\n\n\t\t\tcommand: ({ editor, range, props }) => {\n\t\t\t\teditor.chain().focus().deleteRange(range).run();\n\t\t\t\tprops.onSelect({ editor, range });\n\t\t\t},\n\n\t\t\trender: () => ({\n\t\t\t\tonStart: (props: SuggestionProps<SuggestionItem>) => {\n\t\t\t\t\tsetDecorationNode((props.decorationNode as HTMLElement) ?? null);\n\t\t\t\t\tsetItems(props.items);\n\t\t\t\t\tsetQuery(props.query);\n\t\t\t\t\tcommandRef.current = (item) => props.command(item);\n\t\t\t\t\tsetOpen(true);\n\t\t\t\t},\n\t\t\t\tonUpdate: (props: SuggestionProps<SuggestionItem>) => {\n\t\t\t\t\tsetDecorationNode((props.decorationNode as HTMLElement) ?? null);\n\t\t\t\t\tsetItems(props.items);\n\t\t\t\t\tsetQuery(props.query);\n\t\t\t\t\tcommandRef.current = (item) => props.command(item);\n\t\t\t\t},\n\t\t\t\tonKeyDown: ({ event }: SuggestionKeyDownProps) => {\n\t\t\t\t\tconst list = itemsRef.current;\n\n\t\t\t\t\tif (event.key === 'ArrowDown') {\n\t\t\t\t\t\tif (list.length > 0) {\n\t\t\t\t\t\t\tsetSelectedIndex((selectedIndexRef.current + 1) % list.length);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\n\t\t\t\t\tif (event.key === 'ArrowUp') {\n\t\t\t\t\t\tif (list.length > 0) {\n\t\t\t\t\t\t\tsetSelectedIndex(\n\t\t\t\t\t\t\t\t(selectedIndexRef.current - 1 + list.length) % list.length\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\n\t\t\t\t\tif (event.key === 'Enter') {\n\t\t\t\t\t\tconst item = list[selectedIndexRef.current];\n\n\t\t\t\t\t\tif (item && commandRef.current) {\n\t\t\t\t\t\t\tcommandRef.current(item);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\n\t\t\t\t\tif (event.key === 'Escape') {\n\t\t\t\t\t\tclose();\n\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn false;\n\t\t\t\t},\n\t\t\t\tonExit: () => {\n\t\t\t\t\tsetDecorationNode(null);\n\t\t\t\t\tsetItems([]);\n\t\t\t\t\tsetQuery('');\n\t\t\t\t\tcommandRef.current = null;\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t}\n\t\t\t})\n\t\t});\n\n\t\teditor.registerPlugin(plugin);\n\n\t\treturn () => {\n\t\t\tif (!editor.isDestroyed) {\n\t\t\t\teditor.unregisterPlugin(key);\n\t\t\t}\n\t\t};\n\t}, [editor, char, pluginKey, close]);\n\n\tconst handleSelect = useCallback((item: SuggestionItem) => {\n\t\tif (commandRef.current) {\n\t\t\tcommandRef.current(item);\n\t\t}\n\t}, []);\n\n\tif (!isMounted || !open) return null;\n\n\treturn (\n\t\t<div\n\t\t\tref={setFloatingRef}\n\t\t\taria-label=\"Suggestions\"\n\t\t\tclassName=\"notra-suggestion-menu\"\n\t\t\tdata-selector={selector}\n\t\t\trole=\"listbox\"\n\t\t\tstyle={style}\n\t\t\t{...getFloatingProps()}\n\t\t\tonPointerDown={(e) => e.preventDefault()}\n\t\t>\n\t\t\t{children({ items, selectedIndex, onSelect: handleSelect })}\n\t\t</div>\n\t);\n}\n"],"mappings":"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","names":["query","editor"]}
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
|
|
20
|
-
// src/hooks/use-floating-element.ts
|
|
21
|
-
var use_floating_element_exports = {};
|
|
22
|
-
__export(use_floating_element_exports, {
|
|
23
|
-
useFloatingElement: () => useFloatingElement
|
|
24
|
-
});
|
|
25
|
-
module.exports = __toCommonJS(use_floating_element_exports);
|
|
26
|
-
var import_react = require("@floating-ui/react");
|
|
27
|
-
var import_react2 = require("react");
|
|
28
|
-
function useFloatingElement(open, reference, zIndex, options = {}) {
|
|
29
|
-
const { refs, floatingStyles, context } = (0, import_react.useFloating)({
|
|
30
|
-
open,
|
|
31
|
-
strategy: "absolute",
|
|
32
|
-
whileElementsMounted: import_react.autoUpdate,
|
|
33
|
-
...options
|
|
34
|
-
});
|
|
35
|
-
(0, import_react2.useEffect)(() => {
|
|
36
|
-
refs.setReference(reference);
|
|
37
|
-
}, [refs, reference]);
|
|
38
|
-
const dismiss = (0, import_react.useDismiss)(context);
|
|
39
|
-
const { getFloatingProps } = (0, import_react.useInteractions)([dismiss]);
|
|
40
|
-
const style = (0, import_react2.useMemo)(
|
|
41
|
-
() => ({ ...floatingStyles, zIndex }),
|
|
42
|
-
[floatingStyles, zIndex]
|
|
43
|
-
);
|
|
44
|
-
return {
|
|
45
|
-
setFloatingRef: refs.setFloating,
|
|
46
|
-
style,
|
|
47
|
-
getFloatingProps,
|
|
48
|
-
isMounted: open && reference !== null
|
|
49
|
-
};
|
|
50
|
-
}
|
|
51
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
52
|
-
0 && (module.exports = {
|
|
53
|
-
useFloatingElement
|
|
54
|
-
});
|
|
55
|
-
//# sourceMappingURL=use-floating-element.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/use-floating-element.ts"],"sourcesContent":["import {\n\tuseFloating,\n\tuseInteractions,\n\tuseDismiss,\n\tautoUpdate\n} from '@floating-ui/react';\nimport { useEffect, useMemo } from 'react';\n\nimport type { UseFloatingOptions, ReferenceType } from '@floating-ui/react';\nimport type { CSSProperties } from 'react';\n\ninterface UseFloatingElementResult {\n\t/** Ref callback to attach to the floating element. */\n\tsetFloatingRef: (node: HTMLElement | null) => void;\n\t/** Inline style with computed position. */\n\tstyle: CSSProperties;\n\t/** Spread onto the floating element to wire dismiss handlers. */\n\tgetFloatingProps: () => Record<string, unknown>;\n\t/** True once the element has rendered at least once with a position. */\n\tisMounted: boolean;\n}\n\n/**\n * Position a floating element next to a reference DOM node using\n * @floating-ui/react. Re-positions on scroll/resize via autoUpdate while\n * the element is open.\n */\nexport function useFloatingElement(\n\topen: boolean,\n\treference: ReferenceType | null,\n\tzIndex: number,\n\toptions: Partial<UseFloatingOptions> = {}\n): UseFloatingElementResult {\n\tconst { refs, floatingStyles, context } = useFloating({\n\t\topen,\n\t\tstrategy: 'absolute',\n\t\twhileElementsMounted: autoUpdate,\n\t\t...options\n\t});\n\n\tuseEffect(() => {\n\t\trefs.setReference(reference);\n\t}, [refs, reference]);\n\n\tconst dismiss = useDismiss(context);\n\tconst { getFloatingProps } = useInteractions([dismiss]);\n\n\tconst style = useMemo<CSSProperties>(\n\t\t() => ({ ...floatingStyles, zIndex }),\n\t\t[floatingStyles, zIndex]\n\t);\n\n\treturn {\n\t\tsetFloatingRef: refs.setFloating,\n\t\tstyle,\n\t\tgetFloatingProps,\n\t\tisMounted: open && reference !== null\n\t};\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKO;AACP,IAAAA,gBAAmC;AAqB5B,SAAS,mBACf,MACA,WACA,QACA,UAAuC,CAAC,GACb;AAC3B,QAAM,EAAE,MAAM,gBAAgB,QAAQ,QAAI,0BAAY;AAAA,IACrD;AAAA,IACA,UAAU;AAAA,IACV,sBAAsB;AAAA,IACtB,GAAG;AAAA,EACJ,CAAC;AAED,+BAAU,MAAM;AACf,SAAK,aAAa,SAAS;AAAA,EAC5B,GAAG,CAAC,MAAM,SAAS,CAAC;AAEpB,QAAM,cAAU,yBAAW,OAAO;AAClC,QAAM,EAAE,iBAAiB,QAAI,8BAAgB,CAAC,OAAO,CAAC;AAEtD,QAAM,YAAQ;AAAA,IACb,OAAO,EAAE,GAAG,gBAAgB,OAAO;AAAA,IACnC,CAAC,gBAAgB,MAAM;AAAA,EACxB;AAEA,SAAO;AAAA,IACN,gBAAgB,KAAK;AAAA,IACrB;AAAA,IACA;AAAA,IACA,WAAW,QAAQ,cAAc;AAAA,EAClC;AACD;","names":["import_react"]}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { ReferenceType, UseFloatingOptions } from '@floating-ui/react';
|
|
2
|
-
import { CSSProperties } from 'react';
|
|
3
|
-
|
|
4
|
-
interface UseFloatingElementResult {
|
|
5
|
-
/** Ref callback to attach to the floating element. */
|
|
6
|
-
setFloatingRef: (node: HTMLElement | null) => void;
|
|
7
|
-
/** Inline style with computed position. */
|
|
8
|
-
style: CSSProperties;
|
|
9
|
-
/** Spread onto the floating element to wire dismiss handlers. */
|
|
10
|
-
getFloatingProps: () => Record<string, unknown>;
|
|
11
|
-
/** True once the element has rendered at least once with a position. */
|
|
12
|
-
isMounted: boolean;
|
|
13
|
-
}
|
|
14
|
-
/**
|
|
15
|
-
* Position a floating element next to a reference DOM node using
|
|
16
|
-
* @floating-ui/react. Re-positions on scroll/resize via autoUpdate while
|
|
17
|
-
* the element is open.
|
|
18
|
-
*/
|
|
19
|
-
declare function useFloatingElement(open: boolean, reference: ReferenceType | null, zIndex: number, options?: Partial<UseFloatingOptions>): UseFloatingElementResult;
|
|
20
|
-
|
|
21
|
-
export { useFloatingElement };
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { ReferenceType, UseFloatingOptions } from '@floating-ui/react';
|
|
2
|
-
import { CSSProperties } from 'react';
|
|
3
|
-
|
|
4
|
-
interface UseFloatingElementResult {
|
|
5
|
-
/** Ref callback to attach to the floating element. */
|
|
6
|
-
setFloatingRef: (node: HTMLElement | null) => void;
|
|
7
|
-
/** Inline style with computed position. */
|
|
8
|
-
style: CSSProperties;
|
|
9
|
-
/** Spread onto the floating element to wire dismiss handlers. */
|
|
10
|
-
getFloatingProps: () => Record<string, unknown>;
|
|
11
|
-
/** True once the element has rendered at least once with a position. */
|
|
12
|
-
isMounted: boolean;
|
|
13
|
-
}
|
|
14
|
-
/**
|
|
15
|
-
* Position a floating element next to a reference DOM node using
|
|
16
|
-
* @floating-ui/react. Re-positions on scroll/resize via autoUpdate while
|
|
17
|
-
* the element is open.
|
|
18
|
-
*/
|
|
19
|
-
declare function useFloatingElement(open: boolean, reference: ReferenceType | null, zIndex: number, options?: Partial<UseFloatingOptions>): UseFloatingElementResult;
|
|
20
|
-
|
|
21
|
-
export { useFloatingElement };
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
// src/hooks/use-floating-element.ts
|
|
2
|
-
import {
|
|
3
|
-
useFloating,
|
|
4
|
-
useInteractions,
|
|
5
|
-
useDismiss,
|
|
6
|
-
autoUpdate
|
|
7
|
-
} from "@floating-ui/react";
|
|
8
|
-
import { useEffect, useMemo } from "react";
|
|
9
|
-
function useFloatingElement(open, reference, zIndex, options = {}) {
|
|
10
|
-
const { refs, floatingStyles, context } = useFloating({
|
|
11
|
-
open,
|
|
12
|
-
strategy: "absolute",
|
|
13
|
-
whileElementsMounted: autoUpdate,
|
|
14
|
-
...options
|
|
15
|
-
});
|
|
16
|
-
useEffect(() => {
|
|
17
|
-
refs.setReference(reference);
|
|
18
|
-
}, [refs, reference]);
|
|
19
|
-
const dismiss = useDismiss(context);
|
|
20
|
-
const { getFloatingProps } = useInteractions([dismiss]);
|
|
21
|
-
const style = useMemo(
|
|
22
|
-
() => ({ ...floatingStyles, zIndex }),
|
|
23
|
-
[floatingStyles, zIndex]
|
|
24
|
-
);
|
|
25
|
-
return {
|
|
26
|
-
setFloatingRef: refs.setFloating,
|
|
27
|
-
style,
|
|
28
|
-
getFloatingProps,
|
|
29
|
-
isMounted: open && reference !== null
|
|
30
|
-
};
|
|
31
|
-
}
|
|
32
|
-
export {
|
|
33
|
-
useFloatingElement
|
|
34
|
-
};
|
|
35
|
-
//# sourceMappingURL=use-floating-element.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/use-floating-element.ts"],"sourcesContent":["import {\n\tuseFloating,\n\tuseInteractions,\n\tuseDismiss,\n\tautoUpdate\n} from '@floating-ui/react';\nimport { useEffect, useMemo } from 'react';\n\nimport type { UseFloatingOptions, ReferenceType } from '@floating-ui/react';\nimport type { CSSProperties } from 'react';\n\ninterface UseFloatingElementResult {\n\t/** Ref callback to attach to the floating element. */\n\tsetFloatingRef: (node: HTMLElement | null) => void;\n\t/** Inline style with computed position. */\n\tstyle: CSSProperties;\n\t/** Spread onto the floating element to wire dismiss handlers. */\n\tgetFloatingProps: () => Record<string, unknown>;\n\t/** True once the element has rendered at least once with a position. */\n\tisMounted: boolean;\n}\n\n/**\n * Position a floating element next to a reference DOM node using\n * @floating-ui/react. Re-positions on scroll/resize via autoUpdate while\n * the element is open.\n */\nexport function useFloatingElement(\n\topen: boolean,\n\treference: ReferenceType | null,\n\tzIndex: number,\n\toptions: Partial<UseFloatingOptions> = {}\n): UseFloatingElementResult {\n\tconst { refs, floatingStyles, context } = useFloating({\n\t\topen,\n\t\tstrategy: 'absolute',\n\t\twhileElementsMounted: autoUpdate,\n\t\t...options\n\t});\n\n\tuseEffect(() => {\n\t\trefs.setReference(reference);\n\t}, [refs, reference]);\n\n\tconst dismiss = useDismiss(context);\n\tconst { getFloatingProps } = useInteractions([dismiss]);\n\n\tconst style = useMemo<CSSProperties>(\n\t\t() => ({ ...floatingStyles, zIndex }),\n\t\t[floatingStyles, zIndex]\n\t);\n\n\treturn {\n\t\tsetFloatingRef: refs.setFloating,\n\t\tstyle,\n\t\tgetFloatingProps,\n\t\tisMounted: open && reference !== null\n\t};\n}\n"],"mappings":";AAAA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,WAAW,eAAe;AAqB5B,SAAS,mBACf,MACA,WACA,QACA,UAAuC,CAAC,GACb;AAC3B,QAAM,EAAE,MAAM,gBAAgB,QAAQ,IAAI,YAAY;AAAA,IACrD;AAAA,IACA,UAAU;AAAA,IACV,sBAAsB;AAAA,IACtB,GAAG;AAAA,EACJ,CAAC;AAED,YAAU,MAAM;AACf,SAAK,aAAa,SAAS;AAAA,EAC5B,GAAG,CAAC,MAAM,SAAS,CAAC;AAEpB,QAAM,UAAU,WAAW,OAAO;AAClC,QAAM,EAAE,iBAAiB,IAAI,gBAAgB,CAAC,OAAO,CAAC;AAEtD,QAAM,QAAQ;AAAA,IACb,OAAO,EAAE,GAAG,gBAAgB,OAAO;AAAA,IACnC,CAAC,gBAAgB,MAAM;AAAA,EACxB;AAEA,SAAO;AAAA,IACN,gBAAgB,KAAK;AAAA,IACrB;AAAA,IACA;AAAA,IACA,WAAW,QAAQ,cAAc;AAAA,EAClC;AACD;","names":[]}
|
|
File without changes
|