@particle-academy/react-fancy 5.50.0 → 5.51.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/CHANGELOG.md +53 -0
- package/dist/chart.cjs +2 -2
- package/dist/chart.d.cts +9 -1
- package/dist/chart.d.ts +9 -1
- package/dist/chart.js +1 -1
- package/dist/{chunk-T5OCRKPD.cjs → chunk-23PAOCQQ.cjs} +4 -4
- package/dist/{chunk-T5OCRKPD.cjs.map → chunk-23PAOCQQ.cjs.map} +1 -1
- package/dist/{chunk-GBGJWAXZ.cjs → chunk-25UPDBI6.cjs} +4 -4
- package/dist/{chunk-GBGJWAXZ.cjs.map → chunk-25UPDBI6.cjs.map} +1 -1
- package/dist/chunk-3K2CEAI7.js +78 -0
- package/dist/chunk-3K2CEAI7.js.map +1 -0
- package/dist/{chunk-L637KPEA.js → chunk-4NBM3LXN.js} +3 -3
- package/dist/{chunk-L637KPEA.js.map → chunk-4NBM3LXN.js.map} +1 -1
- package/dist/{chunk-2QIGXSSZ.cjs → chunk-7ZDJPHLJ.cjs} +6 -6
- package/dist/{chunk-2QIGXSSZ.cjs.map → chunk-7ZDJPHLJ.cjs.map} +1 -1
- package/dist/{chunk-VWBKFQQN.cjs → chunk-ATANWEXA.cjs} +8 -8
- package/dist/{chunk-VWBKFQQN.cjs.map → chunk-ATANWEXA.cjs.map} +1 -1
- package/dist/{chunk-7B3HK6TY.cjs → chunk-B6CQ4KK7.cjs} +6 -4
- package/dist/chunk-B6CQ4KK7.cjs.map +1 -0
- package/dist/{chunk-YQJWD53X.js → chunk-ENYHLZ2X.js} +3 -3
- package/dist/{chunk-YQJWD53X.js.map → chunk-ENYHLZ2X.js.map} +1 -1
- package/dist/chunk-FQZE5N2N.cjs +80 -0
- package/dist/chunk-FQZE5N2N.cjs.map +1 -0
- package/dist/{chunk-PV5WDIGM.cjs → chunk-FVG3YXXM.cjs} +4 -4
- package/dist/{chunk-PV5WDIGM.cjs.map → chunk-FVG3YXXM.cjs.map} +1 -1
- package/dist/{chunk-KYZNCVRD.js → chunk-FYKOLKQZ.js} +43 -26
- package/dist/chunk-FYKOLKQZ.js.map +1 -0
- package/dist/{chunk-FU6R6BZ4.js → chunk-GAB2QXHH.js} +102 -40
- package/dist/chunk-GAB2QXHH.js.map +1 -0
- package/dist/{chunk-Z43BI7CQ.cjs → chunk-GU5BYZTR.cjs} +4 -4
- package/dist/{chunk-Z43BI7CQ.cjs.map → chunk-GU5BYZTR.cjs.map} +1 -1
- package/dist/{chunk-TXCAIL5X.cjs → chunk-HKRB2Z6R.cjs} +4 -4
- package/dist/{chunk-TXCAIL5X.cjs.map → chunk-HKRB2Z6R.cjs.map} +1 -1
- package/dist/{chunk-7MJ7VEKE.js → chunk-IAUJKZAQ.js} +3 -3
- package/dist/{chunk-7MJ7VEKE.js.map → chunk-IAUJKZAQ.js.map} +1 -1
- package/dist/{chunk-CK6LRROH.js → chunk-M5ACSJJ4.js} +6 -4
- package/dist/chunk-M5ACSJJ4.js.map +1 -0
- package/dist/{chunk-XBC3M4BL.js → chunk-MGE5KOVA.js} +3 -3
- package/dist/{chunk-XBC3M4BL.js.map → chunk-MGE5KOVA.js.map} +1 -1
- package/dist/{chunk-IPBEVSSC.cjs → chunk-MH4QS7OE.cjs} +6 -6
- package/dist/{chunk-IPBEVSSC.cjs.map → chunk-MH4QS7OE.cjs.map} +1 -1
- package/dist/{chunk-P7F32HIH.js → chunk-N6OZZAOT.js} +3 -3
- package/dist/{chunk-P7F32HIH.js.map → chunk-N6OZZAOT.js.map} +1 -1
- package/dist/{chunk-VFIVF5YO.js → chunk-PHDIQ4VC.js} +3 -3
- package/dist/{chunk-VFIVF5YO.js.map → chunk-PHDIQ4VC.js.map} +1 -1
- package/dist/{chunk-MSRYJETY.cjs → chunk-R3UG6PVX.cjs} +42 -25
- package/dist/chunk-R3UG6PVX.cjs.map +1 -0
- package/dist/{chunk-NAQJF3G6.cjs → chunk-SAPOYAGN.cjs} +101 -39
- package/dist/chunk-SAPOYAGN.cjs.map +1 -0
- package/dist/{chunk-BR27AXFE.cjs → chunk-SYVOGYJG.cjs} +9 -9
- package/dist/{chunk-BR27AXFE.cjs.map → chunk-SYVOGYJG.cjs.map} +1 -1
- package/dist/{chunk-NYDR2VSA.js → chunk-TNYWQ6EQ.js} +3 -3
- package/dist/{chunk-NYDR2VSA.js.map → chunk-TNYWQ6EQ.js.map} +1 -1
- package/dist/{chunk-SWBF2BXA.js → chunk-TT3K5D6J.js} +3 -3
- package/dist/{chunk-SWBF2BXA.js.map → chunk-TT3K5D6J.js.map} +1 -1
- package/dist/{chunk-W7IP6RT3.cjs → chunk-WBVWV2V7.cjs} +4 -4
- package/dist/{chunk-W7IP6RT3.cjs.map → chunk-WBVWV2V7.cjs.map} +1 -1
- package/dist/{chunk-EEWRLFTI.js → chunk-XB6YHUKW.js} +3 -3
- package/dist/{chunk-EEWRLFTI.js.map → chunk-XB6YHUKW.js.map} +1 -1
- package/dist/{chunk-D354R6T6.js → chunk-ZY4CVNNZ.js} +3 -3
- package/dist/{chunk-D354R6T6.js.map → chunk-ZY4CVNNZ.js.map} +1 -1
- package/dist/command.cjs +4 -4
- package/dist/command.js +2 -2
- package/dist/composer.cjs +7 -5
- package/dist/composer.js +5 -3
- package/dist/context-menu.cjs +4 -4
- package/dist/context-menu.js +2 -2
- package/dist/drawer.cjs +4 -4
- package/dist/drawer.js +2 -2
- package/dist/dropdown.cjs +4 -4
- package/dist/dropdown.js +2 -2
- package/dist/editor.cjs +1 -1
- package/dist/editor.js +1 -1
- package/dist/index.cjs +64 -64
- package/dist/index.d.cts +11 -1
- package/dist/index.d.ts +11 -1
- package/dist/index.js +16 -16
- package/dist/input.cjs +6 -4
- package/dist/input.js +5 -3
- package/dist/inputs.cjs +4 -4
- package/dist/inputs.js +3 -3
- package/dist/json-editor.cjs +15 -15
- package/dist/json-editor.js +4 -4
- package/dist/magic-wand.cjs +3 -2
- package/dist/magic-wand.d.cts +51 -6
- package/dist/magic-wand.d.ts +51 -6
- package/dist/magic-wand.js +2 -1
- package/dist/mobile-menu.cjs +4 -4
- package/dist/mobile-menu.js +2 -2
- package/dist/modal.cjs +4 -4
- package/dist/modal.js +2 -2
- package/dist/paste-pills.cjs +17 -15
- package/dist/paste-pills.d.cts +3 -1
- package/dist/paste-pills.d.ts +3 -1
- package/dist/paste-pills.js +4 -2
- package/dist/prompt-input.cjs +7 -4
- package/dist/prompt-input.js +6 -3
- package/dist/sidebar.cjs +1 -1
- package/dist/sidebar.js +1 -1
- package/dist/styles.css.map +1 -1
- package/docs/Chart.md +6 -0
- package/docs/MagicWand.md +29 -2
- package/package.json +1 -1
- package/dist/chunk-3WGRVDQR.cjs +0 -39
- package/dist/chunk-3WGRVDQR.cjs.map +0 -1
- package/dist/chunk-7B3HK6TY.cjs.map +0 -1
- package/dist/chunk-CHADHN6M.js +0 -37
- package/dist/chunk-CHADHN6M.js.map +0 -1
- package/dist/chunk-CK6LRROH.js.map +0 -1
- package/dist/chunk-FU6R6BZ4.js.map +0 -1
- package/dist/chunk-KYZNCVRD.js.map +0 -1
- package/dist/chunk-MSRYJETY.cjs.map +0 -1
- package/dist/chunk-NAQJF3G6.cjs.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -11,6 +11,59 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
11
11
|
|
|
12
12
|
## [Unreleased]
|
|
13
13
|
|
|
14
|
+
## [5.51.0] - 2026-10-20
|
|
15
|
+
|
|
16
|
+
### Added
|
|
17
|
+
|
|
18
|
+
- **`Chart.Sparkline` takes `min`**: the value the bottom edge stands for.
|
|
19
|
+
`min={0}` scales from zero, the way `Chart.Line` and `Chart.Bar` always do, so
|
|
20
|
+
a window where every point had activity no longer draws its quietest point on
|
|
21
|
+
the floor (and a flat busy series draws along the top, not the bottom). A value
|
|
22
|
+
below `min` extends the scale instead of being drawn outside the box.
|
|
23
|
+
**Nothing to do:** without `min` the scale still starts at the data's minimum.
|
|
24
|
+
- **`MagicWand` takes `target`**, so it can act on a textarea, input or editor
|
|
25
|
+
the HOST renders. Pass a ref to a textarea / input as is, or for anything else
|
|
26
|
+
(a code editor, a contenteditable) an adapter:
|
|
27
|
+
`{ element, getSelection: () => ({ start, end }) | null, getSelectionRect? }`.
|
|
28
|
+
With `target`, MagicWand renders no textarea of its own, only the wand
|
|
29
|
+
(portalled, viewport-positioned). The write still goes through
|
|
30
|
+
`onValueChange`, and `value` must be the target's current value.
|
|
31
|
+
**Nothing to do** without `target`: the built-in textarea is unchanged.
|
|
32
|
+
- `MagicWandTarget`, `MagicWandTargetAdapter`, `MagicWandRect` type exports.
|
|
33
|
+
- Stable handles on the wand: `data-react-fancy-magic-wand` on the toolbar and
|
|
34
|
+
`data-react-fancy-magic-wand-action="<id>"` on each action.
|
|
35
|
+
|
|
36
|
+
### Changed
|
|
37
|
+
|
|
38
|
+
- **Paste pills preview in a `Popover`, not a `Tooltip`** (`Composer`,
|
|
39
|
+
`PromptInput` and `Input` with inline paste). It opens on hover AND on focus,
|
|
40
|
+
so a keyboard user gets the same preview; the image pill is now focusable
|
|
41
|
+
(`tabIndex=0`) for that. An image pill shows its thumbnail; if the image cannot
|
|
42
|
+
load (typically a CSP without `blob:` in `img-src`) it shows its label instead
|
|
43
|
+
of an empty box, and the `<img>` now carries the label as `alt`.
|
|
44
|
+
**If you relied on the tooltip:** the preview now sits in
|
|
45
|
+
`[data-react-fancy-popover]`, not `[data-react-fancy-tooltip]`, and has no
|
|
46
|
+
`role="tooltip"`; update any selector or test that looked for those. It looks
|
|
47
|
+
like a Popover (light panel, border) rather than the dark tooltip bubble;
|
|
48
|
+
`classNames.preview` still merges onto it, so restyle there. It stays open
|
|
49
|
+
while the pointer is over it and closes ~300ms after leaving, and Escape closes
|
|
50
|
+
it. `data-react-fancy-composer-paste-pill-preview` and `renderPastePreview` are
|
|
51
|
+
unchanged: that is already the slot for supplying your own preview content.
|
|
52
|
+
|
|
53
|
+
### Fixed
|
|
54
|
+
|
|
55
|
+
- **A closed `Drawer` unmounts even when no exit animation runs.** `useAnimation`
|
|
56
|
+
unmounted ONLY on `animationend`, so in an app that does not load Fancy's
|
|
57
|
+
stylesheet (and in jsdom) a closed panel stayed in the DOM forever. It now
|
|
58
|
+
measures the exit (`getAnimations()`, else the computed animation / transition
|
|
59
|
+
duration): nothing running unmounts at once, something running unmounts on its
|
|
60
|
+
own `animationend` or after its measured duration, whichever comes first. A
|
|
61
|
+
child's `animationend` bubbling up no longer ends the exit early. The same hook
|
|
62
|
+
drives **`Modal`, `Command`, `ContextMenu`, `Dropdown` and `MobileMenu`'s
|
|
63
|
+
flyout**, which had the same defect and get the same fix. **Nothing to do**; if
|
|
64
|
+
you worked around it (forcing a remount, a `key`, your own timeout), you can
|
|
65
|
+
remove the workaround.
|
|
66
|
+
|
|
14
67
|
## [5.50.0] - 2026-10-19
|
|
15
68
|
|
|
16
69
|
### Added
|
package/dist/chart.cjs
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkB6CQ4KK7_cjs = require('./chunk-B6CQ4KK7.cjs');
|
|
4
4
|
require('./chunk-ZU5Q77OT.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
Object.defineProperty(exports, "Chart", {
|
|
9
9
|
enumerable: true,
|
|
10
|
-
get: function () { return
|
|
10
|
+
get: function () { return chunkB6CQ4KK7_cjs.Chart; }
|
|
11
11
|
});
|
|
12
12
|
//# sourceMappingURL=chart.cjs.map
|
|
13
13
|
//# sourceMappingURL=chart.cjs.map
|
package/dist/chart.d.cts
CHANGED
|
@@ -73,6 +73,14 @@ interface ChartSparklineProps {
|
|
|
73
73
|
width?: number;
|
|
74
74
|
height?: number;
|
|
75
75
|
color?: string;
|
|
76
|
+
/**
|
|
77
|
+
* The value the bottom edge stands for. Default: the data's own minimum, so
|
|
78
|
+
* the line uses the full height. `min={0}` scales from zero, as `Chart.Line`
|
|
79
|
+
* and `Chart.Bar` always do, so a run of busy-but-quiet values does not sit on
|
|
80
|
+
* the floor. A value below `min` extends the scale rather than being drawn
|
|
81
|
+
* outside the box.
|
|
82
|
+
*/
|
|
83
|
+
min?: number;
|
|
76
84
|
className?: string;
|
|
77
85
|
}
|
|
78
86
|
interface ChartHorizontalBarProps {
|
|
@@ -111,7 +119,7 @@ declare namespace ChartPie {
|
|
|
111
119
|
var displayName: string;
|
|
112
120
|
}
|
|
113
121
|
|
|
114
|
-
declare function ChartSparkline({ data, width, height, color, className, }: ChartSparklineProps): react.JSX.Element;
|
|
122
|
+
declare function ChartSparkline({ data, width, height, color, min: floor, className, }: ChartSparklineProps): react.JSX.Element;
|
|
115
123
|
declare namespace ChartSparkline {
|
|
116
124
|
var displayName: string;
|
|
117
125
|
}
|
package/dist/chart.d.ts
CHANGED
|
@@ -73,6 +73,14 @@ interface ChartSparklineProps {
|
|
|
73
73
|
width?: number;
|
|
74
74
|
height?: number;
|
|
75
75
|
color?: string;
|
|
76
|
+
/**
|
|
77
|
+
* The value the bottom edge stands for. Default: the data's own minimum, so
|
|
78
|
+
* the line uses the full height. `min={0}` scales from zero, as `Chart.Line`
|
|
79
|
+
* and `Chart.Bar` always do, so a run of busy-but-quiet values does not sit on
|
|
80
|
+
* the floor. A value below `min` extends the scale rather than being drawn
|
|
81
|
+
* outside the box.
|
|
82
|
+
*/
|
|
83
|
+
min?: number;
|
|
76
84
|
className?: string;
|
|
77
85
|
}
|
|
78
86
|
interface ChartHorizontalBarProps {
|
|
@@ -111,7 +119,7 @@ declare namespace ChartPie {
|
|
|
111
119
|
var displayName: string;
|
|
112
120
|
}
|
|
113
121
|
|
|
114
|
-
declare function ChartSparkline({ data, width, height, color, className, }: ChartSparklineProps): react.JSX.Element;
|
|
122
|
+
declare function ChartSparkline({ data, width, height, color, min: floor, className, }: ChartSparklineProps): react.JSX.Element;
|
|
115
123
|
declare namespace ChartSparkline {
|
|
116
124
|
var displayName: string;
|
|
117
125
|
}
|
package/dist/chart.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkFQZE5N2N_cjs = require('./chunk-FQZE5N2N.cjs');
|
|
4
4
|
var chunkJ2DI6RMR_cjs = require('./chunk-J2DI6RMR.cjs');
|
|
5
5
|
var chunkNBZC6LOB_cjs = require('./chunk-NBZC6LOB.cjs');
|
|
6
6
|
var chunk57FQGQJK_cjs = require('./chunk-57FQGQJK.cjs');
|
|
@@ -50,7 +50,7 @@ function DropdownItems({ children, className }) {
|
|
|
50
50
|
}, [setOpen, setActiveIndex]);
|
|
51
51
|
chunk57FQGQJK_cjs.useOutsideClick(outsideRef, close, open, anchorRef);
|
|
52
52
|
chunkRXDRYWVD_cjs.useEscapeKey(close, open);
|
|
53
|
-
const { mounted, className: animClass, ref: animRef } =
|
|
53
|
+
const { mounted, className: animClass, ref: animRef } = chunkFQZE5N2N_cjs.useAnimation({
|
|
54
54
|
open,
|
|
55
55
|
enterClass: "fancy-scale-in",
|
|
56
56
|
exitClass: "fancy-fade-out"
|
|
@@ -168,5 +168,5 @@ var Dropdown = Object.assign(DropdownRoot, {
|
|
|
168
168
|
|
|
169
169
|
exports.Dropdown = Dropdown;
|
|
170
170
|
exports.useDropdown = useDropdown;
|
|
171
|
-
//# sourceMappingURL=chunk-
|
|
172
|
-
//# sourceMappingURL=chunk-
|
|
171
|
+
//# sourceMappingURL=chunk-23PAOCQQ.cjs.map
|
|
172
|
+
//# sourceMappingURL=chunk-23PAOCQQ.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Dropdown/Dropdown.context.ts","../src/components/Dropdown/DropdownTrigger.tsx","../src/components/Dropdown/DropdownItems.tsx","../src/components/Dropdown/DropdownItem.tsx","../src/components/Dropdown/DropdownSeparator.tsx","../src/components/Dropdown/Dropdown.tsx"],"names":["createContext","useContext","jsx","useRef","useFloatingPosition","useCallback","useOutsideClick","useEscapeKey","useAnimation","useEffect","Portal","cn","useState","useMemo"],"mappings":"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","file":"chunk-T5OCRKPD.cjs","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { DropdownContextValue } from \"./Dropdown.types\";\n\nexport const DropdownContext = createContext<DropdownContextValue | null>(null);\n\nexport function useDropdown(): DropdownContextValue {\n const ctx = useContext(DropdownContext);\n if (!ctx) {\n throw new Error(\n \"Dropdown compound components must be used within <Dropdown>\",\n );\n }\n return ctx;\n}\n","import { useDropdown } from \"./Dropdown.context\";\nimport type { DropdownTriggerProps } from \"./Dropdown.types\";\n\nexport function DropdownTrigger({ children }: DropdownTriggerProps) {\n const { setOpen, open, anchorRef } = useDropdown();\n\n return (\n <span\n ref={anchorRef as React.RefObject<HTMLSpanElement>}\n data-react-fancy-dropdown-trigger=\"\"\n className=\"inline-flex\"\n onClick={() => setOpen(!open)}\n aria-expanded={open}\n aria-haspopup=\"menu\"\n >\n {children}\n </span>\n );\n}\n\nDropdownTrigger.displayName = \"DropdownTrigger\";\n","import { useCallback, useEffect, useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Portal } from \"../Portal\";\nimport { useDropdown } from \"./Dropdown.context\";\nimport { useFloatingPosition } from \"../../hooks/use-floating-position\";\nimport { useOutsideClick } from \"../../hooks/use-outside-click\";\nimport { useEscapeKey } from \"../../hooks/use-escape-key\";\nimport { useAnimation } from \"../../hooks/use-animation\";\nimport type { DropdownItemsProps } from \"./Dropdown.types\";\n\nexport function DropdownItems({ children, className }: DropdownItemsProps) {\n const { open, setOpen, anchorRef, activeIndex, setActiveIndex, placement, offset } =\n useDropdown();\n const floatingRef = useRef<HTMLDivElement>(null);\n const outsideRef = useRef<HTMLDivElement>(null);\n\n const position = useFloatingPosition(anchorRef, floatingRef, {\n placement,\n offset,\n enabled: open,\n });\n\n const close = useCallback(() => {\n setOpen(false);\n setActiveIndex(-1);\n }, [setOpen, setActiveIndex]);\n\n useOutsideClick(outsideRef, close, open, anchorRef);\n useEscapeKey(close, open);\n\n const { mounted, className: animClass, ref: animRef } = useAnimation({\n open,\n enterClass: \"fancy-scale-in\",\n exitClass: \"fancy-fade-out\",\n });\n\n useEffect(() => {\n if (!open || !floatingRef.current) return;\n\n const handleKeyDown = (e: KeyboardEvent) => {\n const items = floatingRef.current?.querySelectorAll<HTMLElement>(\n '[role=\"menuitem\"]:not([aria-disabled=\"true\"])',\n );\n if (!items?.length) return;\n\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n const next = activeIndex < items.length - 1 ? activeIndex + 1 : 0;\n setActiveIndex(next);\n items[next]?.focus();\n } else if (e.key === \"ArrowUp\") {\n e.preventDefault();\n const prev = activeIndex > 0 ? activeIndex - 1 : items.length - 1;\n setActiveIndex(prev);\n items[prev]?.focus();\n }\n };\n\n document.addEventListener(\"keydown\", handleKeyDown);\n return () => document.removeEventListener(\"keydown\", handleKeyDown);\n }, [open, activeIndex, setActiveIndex]);\n\n if (!mounted) return null;\n\n return (\n <Portal>\n <div\n ref={(node) => {\n outsideRef.current = node;\n floatingRef.current = node;\n (animRef as React.MutableRefObject<HTMLElement | null>).current = node;\n }}\n data-react-fancy-dropdown=\"\"\n role=\"menu\"\n className={cn(\n \"fixed z-50 min-w-[8rem] rounded-xl border border-zinc-200 bg-white p-1 shadow-lg dark:border-zinc-700 dark:bg-zinc-900\",\n animClass,\n className,\n )}\n style={{ left: position.x, top: position.y }}\n >\n {children}\n </div>\n </Portal>\n );\n}\n\nDropdownItems.displayName = \"DropdownItems\";\n","import { cn } from \"../../utils/cn\";\nimport { useDropdown } from \"./Dropdown.context\";\nimport type { DropdownItemProps } from \"./Dropdown.types\";\n\nexport function DropdownItem({\n children,\n onClick,\n disabled = false,\n danger = false,\n className,\n}: DropdownItemProps) {\n const { setOpen } = useDropdown();\n\n return (\n <button\n data-react-fancy-dropdown-item=\"\"\n type=\"button\"\n role=\"menuitem\"\n disabled={disabled}\n aria-disabled={disabled}\n className={cn(\n \"flex w-full items-center rounded-lg px-3 py-2 text-left text-sm transition-colors\",\n danger\n ? \"text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950\"\n : \"text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800\",\n disabled && \"cursor-not-allowed opacity-50\",\n className,\n )}\n onClick={() => {\n if (disabled) return;\n onClick?.();\n setOpen(false);\n }}\n >\n {children}\n </button>\n );\n}\n\nDropdownItem.displayName = \"DropdownItem\";\n","import { cn } from \"../../utils/cn\";\nimport type { DropdownSeparatorProps } from \"./Dropdown.types\";\n\nexport function DropdownSeparator({ className }: DropdownSeparatorProps) {\n return (\n <div\n data-react-fancy-dropdown-separator=\"\"\n role=\"separator\"\n className={cn(\n \"my-1 h-px bg-zinc-200 dark:bg-zinc-700\",\n className,\n )}\n />\n );\n}\n\nDropdownSeparator.displayName = \"DropdownSeparator\";\n","import { useMemo, useRef, useState } from \"react\";\nimport { DropdownContext } from \"./Dropdown.context\";\nimport { DropdownTrigger } from \"./DropdownTrigger\";\nimport { DropdownItems } from \"./DropdownItems\";\nimport { DropdownItem } from \"./DropdownItem\";\nimport { DropdownSeparator } from \"./DropdownSeparator\";\nimport type { DropdownProps } from \"./Dropdown.types\";\n\nfunction DropdownRoot({\n children,\n placement = \"bottom-start\",\n offset = 4,\n}: DropdownProps) {\n const [open, setOpen] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n const anchorRef = useRef<HTMLElement>(null);\n\n const ctx = useMemo(\n () => ({ open, setOpen, anchorRef, activeIndex, setActiveIndex, placement, offset }),\n [open, anchorRef, activeIndex, placement, offset],\n );\n\n return (\n <DropdownContext.Provider value={ctx}>{children}</DropdownContext.Provider>\n );\n}\n\nexport const Dropdown = Object.assign(DropdownRoot, {\n Trigger: DropdownTrigger,\n Items: DropdownItems,\n Item: DropdownItem,\n Separator: DropdownSeparator,\n});\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/Dropdown/Dropdown.context.ts","../src/components/Dropdown/DropdownTrigger.tsx","../src/components/Dropdown/DropdownItems.tsx","../src/components/Dropdown/DropdownItem.tsx","../src/components/Dropdown/DropdownSeparator.tsx","../src/components/Dropdown/Dropdown.tsx"],"names":["createContext","useContext","jsx","useRef","useFloatingPosition","useCallback","useOutsideClick","useEscapeKey","useAnimation","useEffect","Portal","cn","useState","useMemo"],"mappings":"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","file":"chunk-23PAOCQQ.cjs","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { DropdownContextValue } from \"./Dropdown.types\";\n\nexport const DropdownContext = createContext<DropdownContextValue | null>(null);\n\nexport function useDropdown(): DropdownContextValue {\n const ctx = useContext(DropdownContext);\n if (!ctx) {\n throw new Error(\n \"Dropdown compound components must be used within <Dropdown>\",\n );\n }\n return ctx;\n}\n","import { useDropdown } from \"./Dropdown.context\";\nimport type { DropdownTriggerProps } from \"./Dropdown.types\";\n\nexport function DropdownTrigger({ children }: DropdownTriggerProps) {\n const { setOpen, open, anchorRef } = useDropdown();\n\n return (\n <span\n ref={anchorRef as React.RefObject<HTMLSpanElement>}\n data-react-fancy-dropdown-trigger=\"\"\n className=\"inline-flex\"\n onClick={() => setOpen(!open)}\n aria-expanded={open}\n aria-haspopup=\"menu\"\n >\n {children}\n </span>\n );\n}\n\nDropdownTrigger.displayName = \"DropdownTrigger\";\n","import { useCallback, useEffect, useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Portal } from \"../Portal\";\nimport { useDropdown } from \"./Dropdown.context\";\nimport { useFloatingPosition } from \"../../hooks/use-floating-position\";\nimport { useOutsideClick } from \"../../hooks/use-outside-click\";\nimport { useEscapeKey } from \"../../hooks/use-escape-key\";\nimport { useAnimation } from \"../../hooks/use-animation\";\nimport type { DropdownItemsProps } from \"./Dropdown.types\";\n\nexport function DropdownItems({ children, className }: DropdownItemsProps) {\n const { open, setOpen, anchorRef, activeIndex, setActiveIndex, placement, offset } =\n useDropdown();\n const floatingRef = useRef<HTMLDivElement>(null);\n const outsideRef = useRef<HTMLDivElement>(null);\n\n const position = useFloatingPosition(anchorRef, floatingRef, {\n placement,\n offset,\n enabled: open,\n });\n\n const close = useCallback(() => {\n setOpen(false);\n setActiveIndex(-1);\n }, [setOpen, setActiveIndex]);\n\n useOutsideClick(outsideRef, close, open, anchorRef);\n useEscapeKey(close, open);\n\n const { mounted, className: animClass, ref: animRef } = useAnimation({\n open,\n enterClass: \"fancy-scale-in\",\n exitClass: \"fancy-fade-out\",\n });\n\n useEffect(() => {\n if (!open || !floatingRef.current) return;\n\n const handleKeyDown = (e: KeyboardEvent) => {\n const items = floatingRef.current?.querySelectorAll<HTMLElement>(\n '[role=\"menuitem\"]:not([aria-disabled=\"true\"])',\n );\n if (!items?.length) return;\n\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n const next = activeIndex < items.length - 1 ? activeIndex + 1 : 0;\n setActiveIndex(next);\n items[next]?.focus();\n } else if (e.key === \"ArrowUp\") {\n e.preventDefault();\n const prev = activeIndex > 0 ? activeIndex - 1 : items.length - 1;\n setActiveIndex(prev);\n items[prev]?.focus();\n }\n };\n\n document.addEventListener(\"keydown\", handleKeyDown);\n return () => document.removeEventListener(\"keydown\", handleKeyDown);\n }, [open, activeIndex, setActiveIndex]);\n\n if (!mounted) return null;\n\n return (\n <Portal>\n <div\n ref={(node) => {\n outsideRef.current = node;\n floatingRef.current = node;\n (animRef as React.MutableRefObject<HTMLElement | null>).current = node;\n }}\n data-react-fancy-dropdown=\"\"\n role=\"menu\"\n className={cn(\n \"fixed z-50 min-w-[8rem] rounded-xl border border-zinc-200 bg-white p-1 shadow-lg dark:border-zinc-700 dark:bg-zinc-900\",\n animClass,\n className,\n )}\n style={{ left: position.x, top: position.y }}\n >\n {children}\n </div>\n </Portal>\n );\n}\n\nDropdownItems.displayName = \"DropdownItems\";\n","import { cn } from \"../../utils/cn\";\nimport { useDropdown } from \"./Dropdown.context\";\nimport type { DropdownItemProps } from \"./Dropdown.types\";\n\nexport function DropdownItem({\n children,\n onClick,\n disabled = false,\n danger = false,\n className,\n}: DropdownItemProps) {\n const { setOpen } = useDropdown();\n\n return (\n <button\n data-react-fancy-dropdown-item=\"\"\n type=\"button\"\n role=\"menuitem\"\n disabled={disabled}\n aria-disabled={disabled}\n className={cn(\n \"flex w-full items-center rounded-lg px-3 py-2 text-left text-sm transition-colors\",\n danger\n ? \"text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950\"\n : \"text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800\",\n disabled && \"cursor-not-allowed opacity-50\",\n className,\n )}\n onClick={() => {\n if (disabled) return;\n onClick?.();\n setOpen(false);\n }}\n >\n {children}\n </button>\n );\n}\n\nDropdownItem.displayName = \"DropdownItem\";\n","import { cn } from \"../../utils/cn\";\nimport type { DropdownSeparatorProps } from \"./Dropdown.types\";\n\nexport function DropdownSeparator({ className }: DropdownSeparatorProps) {\n return (\n <div\n data-react-fancy-dropdown-separator=\"\"\n role=\"separator\"\n className={cn(\n \"my-1 h-px bg-zinc-200 dark:bg-zinc-700\",\n className,\n )}\n />\n );\n}\n\nDropdownSeparator.displayName = \"DropdownSeparator\";\n","import { useMemo, useRef, useState } from \"react\";\nimport { DropdownContext } from \"./Dropdown.context\";\nimport { DropdownTrigger } from \"./DropdownTrigger\";\nimport { DropdownItems } from \"./DropdownItems\";\nimport { DropdownItem } from \"./DropdownItem\";\nimport { DropdownSeparator } from \"./DropdownSeparator\";\nimport type { DropdownProps } from \"./Dropdown.types\";\n\nfunction DropdownRoot({\n children,\n placement = \"bottom-start\",\n offset = 4,\n}: DropdownProps) {\n const [open, setOpen] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n const anchorRef = useRef<HTMLElement>(null);\n\n const ctx = useMemo(\n () => ({ open, setOpen, anchorRef, activeIndex, setActiveIndex, placement, offset }),\n [open, anchorRef, activeIndex, placement, offset],\n );\n\n return (\n <DropdownContext.Provider value={ctx}>{children}</DropdownContext.Provider>\n );\n}\n\nexport const Dropdown = Object.assign(DropdownRoot, {\n Trigger: DropdownTrigger,\n Items: DropdownItems,\n Item: DropdownItem,\n Separator: DropdownSeparator,\n});\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkFQZE5N2N_cjs = require('./chunk-FQZE5N2N.cjs');
|
|
4
4
|
var chunkNBZC6LOB_cjs = require('./chunk-NBZC6LOB.cjs');
|
|
5
5
|
var chunkRXDRYWVD_cjs = require('./chunk-RXDRYWVD.cjs');
|
|
6
6
|
var chunkZU5Q77OT_cjs = require('./chunk-ZU5Q77OT.cjs');
|
|
@@ -25,7 +25,7 @@ function MobileMenuFlyout({
|
|
|
25
25
|
className
|
|
26
26
|
}) {
|
|
27
27
|
const isLeft = side === "left";
|
|
28
|
-
const { mounted, className: animClass, ref } =
|
|
28
|
+
const { mounted, className: animClass, ref } = chunkFQZE5N2N_cjs.useAnimation({
|
|
29
29
|
open,
|
|
30
30
|
enterClass: isLeft ? "fancy-slide-in-left" : "fancy-slide-in-right",
|
|
31
31
|
exitClass: isLeft ? "fancy-slide-out-left" : "fancy-slide-out-right"
|
|
@@ -175,5 +175,5 @@ var MobileMenu = {
|
|
|
175
175
|
|
|
176
176
|
exports.MobileMenu = MobileMenu;
|
|
177
177
|
exports.useMobileMenu = useMobileMenu;
|
|
178
|
-
//# sourceMappingURL=chunk-
|
|
179
|
-
//# sourceMappingURL=chunk-
|
|
178
|
+
//# sourceMappingURL=chunk-25UPDBI6.cjs.map
|
|
179
|
+
//# sourceMappingURL=chunk-25UPDBI6.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MobileMenu/MobileMenu.context.ts","../src/components/MobileMenu/MobileMenuFlyout.tsx","../src/components/MobileMenu/MobileMenuBottomBar.tsx","../src/components/MobileMenu/MobileMenuItem.tsx","../src/components/MobileMenu/MobileMenu.tsx"],"names":["createContext","useContext","useAnimation","useEscapeKey","useEffect","Portal","jsx","jsxs","cn","X"],"mappings":"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","file":"chunk-GBGJWAXZ.cjs","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { MobileMenuContextValue } from \"./MobileMenu.types\";\n\nexport const MobileMenuContext = createContext<MobileMenuContextValue | null>(null);\n\nexport function useMobileMenu(): MobileMenuContextValue {\n const ctx = useContext(MobileMenuContext);\n if (!ctx) {\n throw new Error(\"useMobileMenu must be used within a <MobileMenu> component\");\n }\n return ctx;\n}\n","import { useEffect } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useEscapeKey } from \"../../hooks\";\nimport { useAnimation } from \"../../hooks\";\nimport { Portal } from \"../Portal\";\nimport { MobileMenuContext } from \"./MobileMenu.context\";\nimport type { MobileMenuFlyoutProps } from \"./MobileMenu.types\";\n\nexport function MobileMenuFlyout({\n children,\n open,\n onClose,\n side = \"left\",\n title,\n className,\n}: MobileMenuFlyoutProps) {\n const isLeft = side === \"left\";\n\n const { mounted, className: animClass, ref } = useAnimation({\n open,\n enterClass: isLeft ? \"fancy-slide-in-left\" : \"fancy-slide-in-right\",\n exitClass: isLeft ? \"fancy-slide-out-left\" : \"fancy-slide-out-right\",\n });\n\n useEscapeKey(onClose, open);\n\n // Lock body scroll\n useEffect(() => {\n if (open) {\n const prev = document.body.style.overflow;\n document.body.style.overflow = \"hidden\";\n return () => {\n document.body.style.overflow = prev;\n };\n }\n }, [open]);\n\n if (!mounted) return null;\n\n return (\n <Portal>\n <MobileMenuContext.Provider value={{ variant: \"flyout\" }}>\n <div data-react-fancy-mobile-menu-flyout=\"\" className=\"fixed inset-0 z-50\">\n {/* Backdrop */}\n <div\n className={cn(\n \"absolute inset-0 bg-black/40 transition-opacity\",\n open ? \"opacity-100\" : \"opacity-0\",\n )}\n onClick={onClose}\n />\n\n {/* Panel */}\n <div\n ref={ref as React.RefObject<HTMLDivElement>}\n className={cn(\n \"absolute top-0 flex h-full w-72 max-w-[80vw] flex-col bg-white shadow-xl dark:bg-zinc-900\",\n isLeft ? \"left-0\" : \"right-0\",\n animClass,\n className,\n )}\n >\n {/* Header */}\n <div className=\"flex items-center justify-between border-b border-zinc-200 px-4 py-3 dark:border-zinc-700\">\n {title && (\n <span className=\"text-sm font-semibold text-zinc-900 dark:text-zinc-100\">\n {title}\n </span>\n )}\n {!title && <span />}\n <button\n type=\"button\"\n onClick={onClose}\n className=\"flex h-8 w-8 items-center justify-center rounded-md text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-300\"\n >\n <X className=\"h-4 w-4\" />\n </button>\n </div>\n\n {/* Content */}\n <div className=\"flex-1 overflow-y-auto p-2\">\n {children}\n </div>\n </div>\n </div>\n </MobileMenuContext.Provider>\n </Portal>\n );\n}\n\nMobileMenuFlyout.displayName = \"MobileMenuFlyout\";\n","import { cn } from \"../../utils/cn\";\nimport { MobileMenuContext } from \"./MobileMenu.context\";\nimport type { MobileMenuBottomBarProps } from \"./MobileMenu.types\";\n\nexport function MobileMenuBottomBar({ children, className }: MobileMenuBottomBarProps) {\n return (\n <MobileMenuContext.Provider value={{ variant: \"bottom-bar\" }}>\n <nav\n data-react-fancy-mobile-menu-bottom-bar=\"\"\n className={cn(\n \"fixed inset-x-0 bottom-0 z-40 flex items-stretch border-t border-zinc-200 bg-white/95 backdrop-blur-sm dark:border-zinc-700 dark:bg-zinc-900/95\",\n \"pb-[env(safe-area-inset-bottom)]\",\n className,\n )}\n >\n {children}\n </nav>\n </MobileMenuContext.Provider>\n );\n}\n\nMobileMenuBottomBar.displayName = \"MobileMenuBottomBar\";\n","import type { ElementType } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useMobileMenu } from \"./MobileMenu.context\";\nimport type { MobileMenuItemProps } from \"./MobileMenu.types\";\n\nexport function MobileMenuItem({\n children,\n href,\n as: As,\n icon,\n active = false,\n disabled = false,\n badge,\n onClick,\n className,\n ...rest\n}: MobileMenuItemProps) {\n const { variant } = useMobileMenu();\n const isBottomBar = variant === \"bottom-bar\";\n\n // See NavigableProps: link mode engages on `href` OR `as`. Keeping `onClick`\n // in link mode matters most here — a mobile item usually has to close the menu\n // as well as navigate, and it was silently dropped.\n const isLink = Boolean(href || As);\n const Tag = isLink ? ((As ?? \"a\") as ElementType) : \"button\";\n const tagProps = isLink\n ? { ...(href ? { href } : {}), onClick }\n : { type: \"button\" as const, onClick };\n\n if (isBottomBar) {\n return (\n <Tag\n {...tagProps}\n {...rest}\n data-react-fancy-mobile-menu-item=\"\"\n data-active={active || undefined}\n aria-current={active ? \"page\" : undefined}\n aria-disabled={disabled || undefined}\n className={cn(\n \"flex flex-1 flex-col items-center justify-center gap-0.5 py-1.5 text-xs font-medium transition-colors\",\n \"outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-inset\",\n active\n ? \"text-blue-600 dark:text-blue-400\"\n : \"text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100\",\n disabled && \"pointer-events-none opacity-50\",\n className,\n )}\n >\n {icon && <span className=\"flex h-5 w-5 items-center justify-center\">{icon}</span>}\n <span className=\"truncate\">{children}</span>\n {badge && <span className=\"absolute right-1 top-0.5\">{badge}</span>}\n </Tag>\n );\n }\n\n // Flyout variant — same as a vertical menu item\n return (\n <Tag\n {...tagProps}\n {...rest}\n data-react-fancy-mobile-menu-item=\"\"\n data-active={active || undefined}\n aria-current={active ? \"page\" : undefined}\n aria-disabled={disabled || undefined}\n className={cn(\n \"flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-sm font-medium transition-colors\",\n \"outline-none focus-visible:ring-2 focus-visible:ring-blue-500\",\n active\n ? \"bg-zinc-100 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100\"\n : \"text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-100\",\n disabled && \"pointer-events-none opacity-50\",\n className,\n )}\n >\n {icon && <span className=\"flex h-5 w-5 shrink-0 items-center justify-center\">{icon}</span>}\n <span className=\"flex-1 truncate text-left\">{children}</span>\n {badge && <span className=\"shrink-0\">{badge}</span>}\n </Tag>\n );\n}\n\nMobileMenuItem.displayName = \"MobileMenuItem\";\n","import { MobileMenuFlyout } from \"./MobileMenuFlyout\";\nimport { MobileMenuBottomBar } from \"./MobileMenuBottomBar\";\nimport { MobileMenuItem } from \"./MobileMenuItem\";\n\nexport const MobileMenu = {\n Flyout: MobileMenuFlyout,\n BottomBar: MobileMenuBottomBar,\n Item: MobileMenuItem,\n};\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/MobileMenu/MobileMenu.context.ts","../src/components/MobileMenu/MobileMenuFlyout.tsx","../src/components/MobileMenu/MobileMenuBottomBar.tsx","../src/components/MobileMenu/MobileMenuItem.tsx","../src/components/MobileMenu/MobileMenu.tsx"],"names":["createContext","useContext","useAnimation","useEscapeKey","useEffect","Portal","jsx","jsxs","cn","X"],"mappings":"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","file":"chunk-25UPDBI6.cjs","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { MobileMenuContextValue } from \"./MobileMenu.types\";\n\nexport const MobileMenuContext = createContext<MobileMenuContextValue | null>(null);\n\nexport function useMobileMenu(): MobileMenuContextValue {\n const ctx = useContext(MobileMenuContext);\n if (!ctx) {\n throw new Error(\"useMobileMenu must be used within a <MobileMenu> component\");\n }\n return ctx;\n}\n","import { useEffect } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useEscapeKey } from \"../../hooks\";\nimport { useAnimation } from \"../../hooks\";\nimport { Portal } from \"../Portal\";\nimport { MobileMenuContext } from \"./MobileMenu.context\";\nimport type { MobileMenuFlyoutProps } from \"./MobileMenu.types\";\n\nexport function MobileMenuFlyout({\n children,\n open,\n onClose,\n side = \"left\",\n title,\n className,\n}: MobileMenuFlyoutProps) {\n const isLeft = side === \"left\";\n\n const { mounted, className: animClass, ref } = useAnimation({\n open,\n enterClass: isLeft ? \"fancy-slide-in-left\" : \"fancy-slide-in-right\",\n exitClass: isLeft ? \"fancy-slide-out-left\" : \"fancy-slide-out-right\",\n });\n\n useEscapeKey(onClose, open);\n\n // Lock body scroll\n useEffect(() => {\n if (open) {\n const prev = document.body.style.overflow;\n document.body.style.overflow = \"hidden\";\n return () => {\n document.body.style.overflow = prev;\n };\n }\n }, [open]);\n\n if (!mounted) return null;\n\n return (\n <Portal>\n <MobileMenuContext.Provider value={{ variant: \"flyout\" }}>\n <div data-react-fancy-mobile-menu-flyout=\"\" className=\"fixed inset-0 z-50\">\n {/* Backdrop */}\n <div\n className={cn(\n \"absolute inset-0 bg-black/40 transition-opacity\",\n open ? \"opacity-100\" : \"opacity-0\",\n )}\n onClick={onClose}\n />\n\n {/* Panel */}\n <div\n ref={ref as React.RefObject<HTMLDivElement>}\n className={cn(\n \"absolute top-0 flex h-full w-72 max-w-[80vw] flex-col bg-white shadow-xl dark:bg-zinc-900\",\n isLeft ? \"left-0\" : \"right-0\",\n animClass,\n className,\n )}\n >\n {/* Header */}\n <div className=\"flex items-center justify-between border-b border-zinc-200 px-4 py-3 dark:border-zinc-700\">\n {title && (\n <span className=\"text-sm font-semibold text-zinc-900 dark:text-zinc-100\">\n {title}\n </span>\n )}\n {!title && <span />}\n <button\n type=\"button\"\n onClick={onClose}\n className=\"flex h-8 w-8 items-center justify-center rounded-md text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-300\"\n >\n <X className=\"h-4 w-4\" />\n </button>\n </div>\n\n {/* Content */}\n <div className=\"flex-1 overflow-y-auto p-2\">\n {children}\n </div>\n </div>\n </div>\n </MobileMenuContext.Provider>\n </Portal>\n );\n}\n\nMobileMenuFlyout.displayName = \"MobileMenuFlyout\";\n","import { cn } from \"../../utils/cn\";\nimport { MobileMenuContext } from \"./MobileMenu.context\";\nimport type { MobileMenuBottomBarProps } from \"./MobileMenu.types\";\n\nexport function MobileMenuBottomBar({ children, className }: MobileMenuBottomBarProps) {\n return (\n <MobileMenuContext.Provider value={{ variant: \"bottom-bar\" }}>\n <nav\n data-react-fancy-mobile-menu-bottom-bar=\"\"\n className={cn(\n \"fixed inset-x-0 bottom-0 z-40 flex items-stretch border-t border-zinc-200 bg-white/95 backdrop-blur-sm dark:border-zinc-700 dark:bg-zinc-900/95\",\n \"pb-[env(safe-area-inset-bottom)]\",\n className,\n )}\n >\n {children}\n </nav>\n </MobileMenuContext.Provider>\n );\n}\n\nMobileMenuBottomBar.displayName = \"MobileMenuBottomBar\";\n","import type { ElementType } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useMobileMenu } from \"./MobileMenu.context\";\nimport type { MobileMenuItemProps } from \"./MobileMenu.types\";\n\nexport function MobileMenuItem({\n children,\n href,\n as: As,\n icon,\n active = false,\n disabled = false,\n badge,\n onClick,\n className,\n ...rest\n}: MobileMenuItemProps) {\n const { variant } = useMobileMenu();\n const isBottomBar = variant === \"bottom-bar\";\n\n // See NavigableProps: link mode engages on `href` OR `as`. Keeping `onClick`\n // in link mode matters most here — a mobile item usually has to close the menu\n // as well as navigate, and it was silently dropped.\n const isLink = Boolean(href || As);\n const Tag = isLink ? ((As ?? \"a\") as ElementType) : \"button\";\n const tagProps = isLink\n ? { ...(href ? { href } : {}), onClick }\n : { type: \"button\" as const, onClick };\n\n if (isBottomBar) {\n return (\n <Tag\n {...tagProps}\n {...rest}\n data-react-fancy-mobile-menu-item=\"\"\n data-active={active || undefined}\n aria-current={active ? \"page\" : undefined}\n aria-disabled={disabled || undefined}\n className={cn(\n \"flex flex-1 flex-col items-center justify-center gap-0.5 py-1.5 text-xs font-medium transition-colors\",\n \"outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-inset\",\n active\n ? \"text-blue-600 dark:text-blue-400\"\n : \"text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100\",\n disabled && \"pointer-events-none opacity-50\",\n className,\n )}\n >\n {icon && <span className=\"flex h-5 w-5 items-center justify-center\">{icon}</span>}\n <span className=\"truncate\">{children}</span>\n {badge && <span className=\"absolute right-1 top-0.5\">{badge}</span>}\n </Tag>\n );\n }\n\n // Flyout variant — same as a vertical menu item\n return (\n <Tag\n {...tagProps}\n {...rest}\n data-react-fancy-mobile-menu-item=\"\"\n data-active={active || undefined}\n aria-current={active ? \"page\" : undefined}\n aria-disabled={disabled || undefined}\n className={cn(\n \"flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-sm font-medium transition-colors\",\n \"outline-none focus-visible:ring-2 focus-visible:ring-blue-500\",\n active\n ? \"bg-zinc-100 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100\"\n : \"text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-100\",\n disabled && \"pointer-events-none opacity-50\",\n className,\n )}\n >\n {icon && <span className=\"flex h-5 w-5 shrink-0 items-center justify-center\">{icon}</span>}\n <span className=\"flex-1 truncate text-left\">{children}</span>\n {badge && <span className=\"shrink-0\">{badge}</span>}\n </Tag>\n );\n}\n\nMobileMenuItem.displayName = \"MobileMenuItem\";\n","import { MobileMenuFlyout } from \"./MobileMenuFlyout\";\nimport { MobileMenuBottomBar } from \"./MobileMenuBottomBar\";\nimport { MobileMenuItem } from \"./MobileMenuItem\";\n\nexport const MobileMenu = {\n Flyout: MobileMenuFlyout,\n BottomBar: MobileMenuBottomBar,\n Item: MobileMenuItem,\n};\n"]}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { useState, useRef, useEffect } from 'react';
|
|
2
|
+
|
|
3
|
+
// src/hooks/use-animation.ts
|
|
4
|
+
var FALLBACK_GRACE_MS = 50;
|
|
5
|
+
function toMs(list) {
|
|
6
|
+
if (!list) return [0];
|
|
7
|
+
return list.split(",").map((part) => {
|
|
8
|
+
const v = part.trim();
|
|
9
|
+
const n = parseFloat(v);
|
|
10
|
+
if (Number.isNaN(n)) return 0;
|
|
11
|
+
return v.endsWith("ms") ? n : n * 1e3;
|
|
12
|
+
});
|
|
13
|
+
}
|
|
14
|
+
function longest(durations, delays) {
|
|
15
|
+
const d = toMs(durations);
|
|
16
|
+
const l = toMs(delays);
|
|
17
|
+
let max = 0;
|
|
18
|
+
for (let i = 0; i < Math.max(d.length, l.length); i++) {
|
|
19
|
+
max = Math.max(max, d[i % d.length] + l[i % l.length]);
|
|
20
|
+
}
|
|
21
|
+
return max;
|
|
22
|
+
}
|
|
23
|
+
function exitDuration(el) {
|
|
24
|
+
if (typeof el.getAnimations === "function" && el.getAnimations().length === 0) return 0;
|
|
25
|
+
if (typeof window === "undefined" || typeof window.getComputedStyle !== "function") return 0;
|
|
26
|
+
const style = window.getComputedStyle(el);
|
|
27
|
+
const name = style.animationName;
|
|
28
|
+
const animation = name && name !== "none" ? longest(style.animationDuration, style.animationDelay) : 0;
|
|
29
|
+
const transition = longest(style.transitionDuration, style.transitionDelay);
|
|
30
|
+
return Math.max(animation, transition);
|
|
31
|
+
}
|
|
32
|
+
function useAnimation({
|
|
33
|
+
open,
|
|
34
|
+
enterClass,
|
|
35
|
+
exitClass
|
|
36
|
+
}) {
|
|
37
|
+
const [mounted, setMounted] = useState(open);
|
|
38
|
+
const [animClass, setAnimClass] = useState(open ? enterClass : "");
|
|
39
|
+
const ref = useRef(null);
|
|
40
|
+
useEffect(() => {
|
|
41
|
+
if (open) {
|
|
42
|
+
setMounted(true);
|
|
43
|
+
setAnimClass(enterClass);
|
|
44
|
+
} else if (mounted) {
|
|
45
|
+
setAnimClass(exitClass);
|
|
46
|
+
}
|
|
47
|
+
}, [open, enterClass, exitClass, mounted]);
|
|
48
|
+
const exiting = !open && mounted && animClass === exitClass;
|
|
49
|
+
useEffect(() => {
|
|
50
|
+
if (!exiting) return;
|
|
51
|
+
const finish = () => {
|
|
52
|
+
setMounted(false);
|
|
53
|
+
setAnimClass("");
|
|
54
|
+
};
|
|
55
|
+
const el = ref.current;
|
|
56
|
+
const wait = el ? exitDuration(el) : 0;
|
|
57
|
+
if (!el || wait <= 0) {
|
|
58
|
+
finish();
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
61
|
+
const onEnd = (e) => {
|
|
62
|
+
if (e.target === el) finish();
|
|
63
|
+
};
|
|
64
|
+
el.addEventListener("animationend", onEnd);
|
|
65
|
+
el.addEventListener("transitionend", onEnd);
|
|
66
|
+
const timer = setTimeout(finish, wait + FALLBACK_GRACE_MS);
|
|
67
|
+
return () => {
|
|
68
|
+
el.removeEventListener("animationend", onEnd);
|
|
69
|
+
el.removeEventListener("transitionend", onEnd);
|
|
70
|
+
clearTimeout(timer);
|
|
71
|
+
};
|
|
72
|
+
}, [exiting]);
|
|
73
|
+
return { mounted, className: animClass, ref };
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
export { useAnimation };
|
|
77
|
+
//# sourceMappingURL=chunk-3K2CEAI7.js.map
|
|
78
|
+
//# sourceMappingURL=chunk-3K2CEAI7.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/hooks/use-animation.ts"],"names":[],"mappings":"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","file":"chunk-3K2CEAI7.js","sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\ninterface UseAnimationOptions {\n open: boolean;\n enterClass: string;\n exitClass: string;\n}\n\ninterface UseAnimationReturn {\n mounted: boolean;\n className: string;\n ref: React.RefObject<HTMLElement | null>;\n}\n\n/** Slack on top of the measured exit, so the fallback never cuts a real animation short. */\nconst FALLBACK_GRACE_MS = 50;\n\n/** `\"0.2s, 150ms\"` -> `[200, 150]`. Unparseable entries count as 0. */\nfunction toMs(list: string | undefined): number[] {\n if (!list) return [0];\n return list.split(\",\").map((part) => {\n const v = part.trim();\n const n = parseFloat(v);\n if (Number.isNaN(n)) return 0;\n return v.endsWith(\"ms\") ? n : n * 1000;\n });\n}\n\n/** The longest duration + delay pair, CSS-style (the shorter list repeats). */\nfunction longest(durations: string | undefined, delays: string | undefined): number {\n const d = toMs(durations);\n const l = toMs(delays);\n let max = 0;\n for (let i = 0; i < Math.max(d.length, l.length); i++) {\n max = Math.max(max, d[i % d.length]! + l[i % l.length]!);\n }\n return max;\n}\n\n/**\n * How long the element's exit will take, in ms. 0 means nothing is running, so\n * there is no `animationend` to wait for.\n *\n * `getAnimations()` is asked first where it exists: it is the engine's own answer\n * and covers transitions too. Where it does not (jsdom, older engines) the\n * computed style is read instead — an `animation-name` of `none` (or none at all,\n * which is what an app without Fancy's stylesheet gets) means no animation.\n */\nfunction exitDuration(el: HTMLElement): number {\n if (typeof el.getAnimations === \"function\" && el.getAnimations().length === 0) return 0;\n if (typeof window === \"undefined\" || typeof window.getComputedStyle !== \"function\") return 0;\n\n const style = window.getComputedStyle(el);\n const name = style.animationName;\n const animation =\n name && name !== \"none\" ? longest(style.animationDuration, style.animationDelay) : 0;\n const transition = longest(style.transitionDuration, style.transitionDelay);\n\n return Math.max(animation, transition);\n}\n\n/**\n * Mount on open, play `exitClass` on close, then unmount.\n *\n * The unmount used to happen ONLY on `animationend`. With no animation running —\n * an app that does not load Fancy's stylesheet, jsdom, an `exitClass` that\n * resolves to nothing — the event never fires and the closed panel stayed in the\n * DOM forever. So the exit is measured: nothing running unmounts at once,\n * something running unmounts on its own `animationend` or after its measured\n * duration, whichever comes first.\n */\nexport function useAnimation({\n open,\n enterClass,\n exitClass,\n}: UseAnimationOptions): UseAnimationReturn {\n const [mounted, setMounted] = useState(open);\n const [animClass, setAnimClass] = useState(open ? enterClass : \"\");\n const ref = useRef<HTMLElement | null>(null);\n\n useEffect(() => {\n if (open) {\n setMounted(true);\n setAnimClass(enterClass);\n } else if (mounted) {\n setAnimClass(exitClass);\n }\n }, [open, enterClass, exitClass, mounted]);\n\n // Runs once the exit class is on the element, so the measurement sees it.\n const exiting = !open && mounted && animClass === exitClass;\n\n useEffect(() => {\n if (!exiting) return;\n\n const finish = () => {\n setMounted(false);\n setAnimClass(\"\");\n };\n\n const el = ref.current;\n const wait = el ? exitDuration(el) : 0;\n if (!el || wait <= 0) {\n finish();\n return;\n }\n\n // Only the element's OWN animation: a child's `animationend` bubbles here\n // too, and must not cut the exit short.\n const onEnd = (e: Event) => {\n if (e.target === el) finish();\n };\n el.addEventListener(\"animationend\", onEnd);\n el.addEventListener(\"transitionend\", onEnd);\n const timer = setTimeout(finish, wait + FALLBACK_GRACE_MS);\n\n return () => {\n el.removeEventListener(\"animationend\", onEnd);\n el.removeEventListener(\"transitionend\", onEnd);\n clearTimeout(timer);\n };\n }, [exiting]);\n\n return { mounted, className: animClass, ref };\n}\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useInlinePaste, withSeparators, endsOf, InlinePasteEditor, PastedFilesInput } from './chunk-
|
|
1
|
+
import { useInlinePaste, withSeparators, endsOf, InlinePasteEditor, PastedFilesInput } from './chunk-FYKOLKQZ.js';
|
|
2
2
|
import { useControllableState } from './chunk-EDYAXGUM.js';
|
|
3
3
|
import { cn } from './chunk-MMW2JGKZ.js';
|
|
4
4
|
import { forwardRef, useRef, useMemo, useCallback } from 'react';
|
|
@@ -231,5 +231,5 @@ ${text}` : text);
|
|
|
231
231
|
Composer.displayName = "Composer";
|
|
232
232
|
|
|
233
233
|
export { Composer };
|
|
234
|
-
//# sourceMappingURL=chunk-
|
|
235
|
-
//# sourceMappingURL=chunk-
|
|
234
|
+
//# sourceMappingURL=chunk-4NBM3LXN.js.map
|
|
235
|
+
//# sourceMappingURL=chunk-4NBM3LXN.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Composer/Composer.tsx"],"names":["Composer","paste"],"mappings":"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","file":"chunk-L637KPEA.js","sourcesContent":["import { forwardRef, useCallback, useMemo, useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport {\n endsOf,\n InlinePasteEditor,\n PastedFilesInput,\n useInlinePaste,\n withSeparators,\n type HeldPaste,\n type InlinePasteEditorHandle,\n} from \"../PastePills\";\nimport type { ComposerProps } from \"./Composer.types\";\n\n/** Characters of a held paste shown at each end of the hover preview, unless `previewChars` says otherwise. */\nconst PREVIEW_CHARS = 20;\n\nexport const Composer = forwardRef<HTMLDivElement, ComposerProps>(\n function Composer(\n {\n value: controlledValue,\n defaultValue = \"\",\n onChange,\n onSubmit,\n placeholder = \"Type a message...\",\n actions,\n disabled = false,\n className,\n pasteThreshold,\n pastePlacement = \"above\",\n pasteImages = false,\n previewChars = PREVIEW_CHARS,\n renderPastePreview,\n classNames,\n heldPastes: controlledHeldPastes,\n onHeldPastesChange,\n heldImages: controlledHeldImages,\n onHeldImagesChange,\n pasteFilesName,\n },\n ref,\n ) {\n const inline = pastePlacement === \"inline\";\n const [value, setValue] = useControllableState(\n controlledValue,\n defaultValue,\n onChange,\n );\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n const editorRef = useRef<InlinePasteEditorHandle>(null);\n /*\n * The holding logic lives in `usePastePills`, wrapped by `useInlinePaste` for\n * the inline placement — which `PromptInput` shares, so the two components\n * cannot disagree about what a pill means. The rule that must not drift is\n * the one below: a send with pills still closed carries the text.\n */\n const paste = useInlinePaste({\n pasteThreshold,\n pasteImages,\n previewChars,\n renderPastePreview,\n classNames,\n disabled,\n heldPastes: controlledHeldPastes,\n onHeldPastesChange,\n heldImages: controlledHeldImages,\n onHeldImagesChange,\n editorRef,\n });\n const pills = paste.pills;\n const heldPastes = paste.heldPastes;\n const pastedFiles = useMemo(\n () => (inline && pasteImages ? paste.imagesIn(value).map((i) => i.file) : []),\n [inline, pasteImages, paste, value],\n );\n\n const handlePaste = useCallback(\n (e: React.ClipboardEvent<HTMLTextAreaElement>) => {\n // Composable by design, so this reads as a question rather than a handover.\n // Nothing else here wants the paste, so the answer is simply ignored.\n pills.handlePaste(e);\n },\n [pills],\n );\n\n const handleInlineChange = useCallback(\n (next: string) => {\n setValue(next);\n paste.prune(next);\n },\n [setValue, paste],\n );\n\n /** Everything the person believes they are sending, in the order they built it. */\n const composeOutgoing = useCallback(() => {\n if (inline) return paste.expand(value);\n\n return [value, ...heldPastes.map((p) => p.text)].filter(Boolean).join(\"\\n\\n\");\n }, [inline, value, heldPastes, paste]);\n\n const hasContent = value.trim().length > 0 || (!inline && heldPastes.length > 0);\n\n const focusInput = useCallback(() => {\n if (inline) editorRef.current?.focus();\n else textareaRef.current?.focus();\n }, [inline]);\n\n const handleSubmit = useCallback(() => {\n if (!hasContent || disabled) return;\n\n /*\n * THE DANGEROUS STATE, and the reason this feature needed a spec rather than\n * a guess. A pill reads as \"your paste is attached\" — so a send that drops it\n * means asking a question about a document without the document, and nobody\n * can tell: the sender believes it went, the receiver sees a question about\n * nothing.\n *\n * Above the input, held pastes go out in arrival order after what was typed,\n * because people type the question BEFORE pasting the thing it is about.\n * Inline, every pill goes out exactly where it sits.\n */\n const images = inline ? paste.imagesIn(value) : [];\n\n onSubmit?.(composeOutgoing(), { images });\n setValue(\"\");\n paste.clear();\n focusInput();\n }, [hasContent, disabled, value, inline, paste, onSubmit, composeOutgoing, setValue, focusInput]);\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n handleSubmit();\n }\n };\n\n /** Above the input: click a pill to dump it in, APPENDED to what is already typed. */\n const insertPaste = useCallback(\n (held: HeldPaste) => {\n // `expand` removes it and hands back the text; inserting is this\n // component's job because the hook owns no DOM.\n const text = pills.expand(held.id);\n\n if (text === undefined) return;\n\n setValue((current) => (current ? `${current}\\n\\n${text}` : text));\n textareaRef.current?.focus();\n },\n [pills, setValue],\n );\n\n return (\n <div\n data-react-fancy-composer=\"\"\n ref={ref}\n className={cn(\n \"rounded-xl border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900\",\n disabled && \"opacity-50\",\n className,\n )}\n >\n {!inline && heldPastes.length > 0 && (\n <div\n data-react-fancy-composer-paste-pills=\"\"\n className=\"flex flex-wrap gap-1.5 px-3 pt-3\"\n >\n {heldPastes.map((paste) => (\n // `group` + `group-hover` rather than hover state: the preview is\n // presentation, and a useState for it would be one more thing an\n // agent could desynchronise.\n <span key={paste.id} className=\"group relative inline-flex\">\n <button\n type=\"button\"\n data-react-fancy-composer-paste-pill={paste.id}\n onClick={() => insertPaste(paste)}\n disabled={disabled}\n // No `title`. A native tooltip plus the hover preview below\n // renders TWO tooltips on the same hover, at different delays.\n // The label says what clicking does; the preview says what the\n // text is, and it is linked rather than merely adjacent so a\n // screen reader reaches it too.\n aria-label={`Insert this pasted text, ${withSeparators(paste.text.length)} characters`}\n aria-describedby={`${paste.id}-preview`}\n // `pr-7` leaves room for the absolutely-positioned × that sits\n // over this button's right edge. With a smaller right padding the\n // × lands on top of the label.\n className={cn(\n \"inline-flex items-center gap-1.5 rounded-full border border-zinc-200 bg-zinc-50 py-1 pl-2.5 pr-7 text-xs text-zinc-700 transition-colors hover:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700\",\n classNames?.pill,\n classNames?.textPill,\n )}\n >\n <span>\n Pasted text · {withSeparators(paste.text.length)} characters\n </span>\n </button>\n\n <button\n type=\"button\"\n data-react-fancy-composer-paste-pill-remove={paste.id}\n onClick={() => pills.remove(paste.id)}\n disabled={disabled}\n aria-label=\"Discard this pasted text\"\n className={cn(\n \"absolute right-1 top-1/2 -translate-y-1/2 rounded-full px-1 text-xs text-zinc-400 transition-colors hover:text-zinc-700 dark:hover:text-zinc-100\",\n classNames?.remove,\n )}\n >\n ×\n </button>\n\n <span\n id={`${paste.id}-preview`}\n data-react-fancy-composer-paste-pill-preview={paste.id}\n role=\"tooltip\"\n className={cn(\n \"pointer-events-none absolute bottom-full left-0 z-10 mb-1 hidden max-w-xs whitespace-pre-wrap break-all rounded-md bg-zinc-900 px-2 py-1 text-xs text-white group-hover:block dark:bg-zinc-100 dark:text-zinc-900\",\n classNames?.preview,\n )}\n >\n {renderPastePreview?.({ kind: \"text\", paste }) ??\n endsOf(paste.text, previewChars)}\n </span>\n </span>\n ))}\n </div>\n )}\n\n {inline ? (\n <>\n <InlinePasteEditor\n ref={editorRef}\n value={value}\n known={paste.known}\n onChange={handleInlineChange}\n onSubmit={handleSubmit}\n onPaste={paste.decidePaste}\n onHostsChange={paste.onHostsChange}\n placeholder={placeholder}\n disabled={disabled}\n className={classNames?.input}\n />\n {paste.portals}\n {pasteImages && pasteFilesName && (\n <PastedFilesInput name={pasteFilesName} files={pastedFiles} />\n )}\n </>\n ) : (\n <textarea\n ref={textareaRef}\n value={value}\n onChange={(e) => setValue(e.target.value)}\n onKeyDown={handleKeyDown}\n onPaste={handlePaste}\n placeholder={placeholder}\n disabled={disabled}\n rows={3}\n className={cn(\n \"w-full resize-none bg-transparent px-4 pt-3 text-sm outline-none placeholder:text-zinc-400\",\n classNames?.input,\n )}\n />\n )}\n <div className=\"flex items-center justify-between border-t border-zinc-100 px-3 py-2 dark:border-zinc-800\">\n <div className=\"flex items-center gap-1\">{actions}</div>\n <button\n type=\"button\"\n onClick={handleSubmit}\n disabled={disabled || !hasContent}\n className=\"rounded-lg bg-zinc-900 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-zinc-800 disabled:opacity-50 dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-100\"\n >\n Send\n </button>\n </div>\n </div>\n );\n },\n);\n\nComposer.displayName = \"Composer\";\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/Composer/Composer.tsx"],"names":["Composer","paste"],"mappings":"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","file":"chunk-4NBM3LXN.js","sourcesContent":["import { forwardRef, useCallback, useMemo, useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport {\n endsOf,\n InlinePasteEditor,\n PastedFilesInput,\n useInlinePaste,\n withSeparators,\n type HeldPaste,\n type InlinePasteEditorHandle,\n} from \"../PastePills\";\nimport type { ComposerProps } from \"./Composer.types\";\n\n/** Characters of a held paste shown at each end of the hover preview, unless `previewChars` says otherwise. */\nconst PREVIEW_CHARS = 20;\n\nexport const Composer = forwardRef<HTMLDivElement, ComposerProps>(\n function Composer(\n {\n value: controlledValue,\n defaultValue = \"\",\n onChange,\n onSubmit,\n placeholder = \"Type a message...\",\n actions,\n disabled = false,\n className,\n pasteThreshold,\n pastePlacement = \"above\",\n pasteImages = false,\n previewChars = PREVIEW_CHARS,\n renderPastePreview,\n classNames,\n heldPastes: controlledHeldPastes,\n onHeldPastesChange,\n heldImages: controlledHeldImages,\n onHeldImagesChange,\n pasteFilesName,\n },\n ref,\n ) {\n const inline = pastePlacement === \"inline\";\n const [value, setValue] = useControllableState(\n controlledValue,\n defaultValue,\n onChange,\n );\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n const editorRef = useRef<InlinePasteEditorHandle>(null);\n /*\n * The holding logic lives in `usePastePills`, wrapped by `useInlinePaste` for\n * the inline placement — which `PromptInput` shares, so the two components\n * cannot disagree about what a pill means. The rule that must not drift is\n * the one below: a send with pills still closed carries the text.\n */\n const paste = useInlinePaste({\n pasteThreshold,\n pasteImages,\n previewChars,\n renderPastePreview,\n classNames,\n disabled,\n heldPastes: controlledHeldPastes,\n onHeldPastesChange,\n heldImages: controlledHeldImages,\n onHeldImagesChange,\n editorRef,\n });\n const pills = paste.pills;\n const heldPastes = paste.heldPastes;\n const pastedFiles = useMemo(\n () => (inline && pasteImages ? paste.imagesIn(value).map((i) => i.file) : []),\n [inline, pasteImages, paste, value],\n );\n\n const handlePaste = useCallback(\n (e: React.ClipboardEvent<HTMLTextAreaElement>) => {\n // Composable by design, so this reads as a question rather than a handover.\n // Nothing else here wants the paste, so the answer is simply ignored.\n pills.handlePaste(e);\n },\n [pills],\n );\n\n const handleInlineChange = useCallback(\n (next: string) => {\n setValue(next);\n paste.prune(next);\n },\n [setValue, paste],\n );\n\n /** Everything the person believes they are sending, in the order they built it. */\n const composeOutgoing = useCallback(() => {\n if (inline) return paste.expand(value);\n\n return [value, ...heldPastes.map((p) => p.text)].filter(Boolean).join(\"\\n\\n\");\n }, [inline, value, heldPastes, paste]);\n\n const hasContent = value.trim().length > 0 || (!inline && heldPastes.length > 0);\n\n const focusInput = useCallback(() => {\n if (inline) editorRef.current?.focus();\n else textareaRef.current?.focus();\n }, [inline]);\n\n const handleSubmit = useCallback(() => {\n if (!hasContent || disabled) return;\n\n /*\n * THE DANGEROUS STATE, and the reason this feature needed a spec rather than\n * a guess. A pill reads as \"your paste is attached\" — so a send that drops it\n * means asking a question about a document without the document, and nobody\n * can tell: the sender believes it went, the receiver sees a question about\n * nothing.\n *\n * Above the input, held pastes go out in arrival order after what was typed,\n * because people type the question BEFORE pasting the thing it is about.\n * Inline, every pill goes out exactly where it sits.\n */\n const images = inline ? paste.imagesIn(value) : [];\n\n onSubmit?.(composeOutgoing(), { images });\n setValue(\"\");\n paste.clear();\n focusInput();\n }, [hasContent, disabled, value, inline, paste, onSubmit, composeOutgoing, setValue, focusInput]);\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n handleSubmit();\n }\n };\n\n /** Above the input: click a pill to dump it in, APPENDED to what is already typed. */\n const insertPaste = useCallback(\n (held: HeldPaste) => {\n // `expand` removes it and hands back the text; inserting is this\n // component's job because the hook owns no DOM.\n const text = pills.expand(held.id);\n\n if (text === undefined) return;\n\n setValue((current) => (current ? `${current}\\n\\n${text}` : text));\n textareaRef.current?.focus();\n },\n [pills, setValue],\n );\n\n return (\n <div\n data-react-fancy-composer=\"\"\n ref={ref}\n className={cn(\n \"rounded-xl border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900\",\n disabled && \"opacity-50\",\n className,\n )}\n >\n {!inline && heldPastes.length > 0 && (\n <div\n data-react-fancy-composer-paste-pills=\"\"\n className=\"flex flex-wrap gap-1.5 px-3 pt-3\"\n >\n {heldPastes.map((paste) => (\n // `group` + `group-hover` rather than hover state: the preview is\n // presentation, and a useState for it would be one more thing an\n // agent could desynchronise.\n <span key={paste.id} className=\"group relative inline-flex\">\n <button\n type=\"button\"\n data-react-fancy-composer-paste-pill={paste.id}\n onClick={() => insertPaste(paste)}\n disabled={disabled}\n // No `title`. A native tooltip plus the hover preview below\n // renders TWO tooltips on the same hover, at different delays.\n // The label says what clicking does; the preview says what the\n // text is, and it is linked rather than merely adjacent so a\n // screen reader reaches it too.\n aria-label={`Insert this pasted text, ${withSeparators(paste.text.length)} characters`}\n aria-describedby={`${paste.id}-preview`}\n // `pr-7` leaves room for the absolutely-positioned × that sits\n // over this button's right edge. With a smaller right padding the\n // × lands on top of the label.\n className={cn(\n \"inline-flex items-center gap-1.5 rounded-full border border-zinc-200 bg-zinc-50 py-1 pl-2.5 pr-7 text-xs text-zinc-700 transition-colors hover:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700\",\n classNames?.pill,\n classNames?.textPill,\n )}\n >\n <span>\n Pasted text · {withSeparators(paste.text.length)} characters\n </span>\n </button>\n\n <button\n type=\"button\"\n data-react-fancy-composer-paste-pill-remove={paste.id}\n onClick={() => pills.remove(paste.id)}\n disabled={disabled}\n aria-label=\"Discard this pasted text\"\n className={cn(\n \"absolute right-1 top-1/2 -translate-y-1/2 rounded-full px-1 text-xs text-zinc-400 transition-colors hover:text-zinc-700 dark:hover:text-zinc-100\",\n classNames?.remove,\n )}\n >\n ×\n </button>\n\n <span\n id={`${paste.id}-preview`}\n data-react-fancy-composer-paste-pill-preview={paste.id}\n role=\"tooltip\"\n className={cn(\n \"pointer-events-none absolute bottom-full left-0 z-10 mb-1 hidden max-w-xs whitespace-pre-wrap break-all rounded-md bg-zinc-900 px-2 py-1 text-xs text-white group-hover:block dark:bg-zinc-100 dark:text-zinc-900\",\n classNames?.preview,\n )}\n >\n {renderPastePreview?.({ kind: \"text\", paste }) ??\n endsOf(paste.text, previewChars)}\n </span>\n </span>\n ))}\n </div>\n )}\n\n {inline ? (\n <>\n <InlinePasteEditor\n ref={editorRef}\n value={value}\n known={paste.known}\n onChange={handleInlineChange}\n onSubmit={handleSubmit}\n onPaste={paste.decidePaste}\n onHostsChange={paste.onHostsChange}\n placeholder={placeholder}\n disabled={disabled}\n className={classNames?.input}\n />\n {paste.portals}\n {pasteImages && pasteFilesName && (\n <PastedFilesInput name={pasteFilesName} files={pastedFiles} />\n )}\n </>\n ) : (\n <textarea\n ref={textareaRef}\n value={value}\n onChange={(e) => setValue(e.target.value)}\n onKeyDown={handleKeyDown}\n onPaste={handlePaste}\n placeholder={placeholder}\n disabled={disabled}\n rows={3}\n className={cn(\n \"w-full resize-none bg-transparent px-4 pt-3 text-sm outline-none placeholder:text-zinc-400\",\n classNames?.input,\n )}\n />\n )}\n <div className=\"flex items-center justify-between border-t border-zinc-100 px-3 py-2 dark:border-zinc-800\">\n <div className=\"flex items-center gap-1\">{actions}</div>\n <button\n type=\"button\"\n onClick={handleSubmit}\n disabled={disabled || !hasContent}\n className=\"rounded-lg bg-zinc-900 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-zinc-800 disabled:opacity-50 dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-100\"\n >\n Send\n </button>\n </div>\n </div>\n );\n },\n);\n\nComposer.displayName = \"Composer\";\n"]}
|
|
@@ -4,7 +4,7 @@ var chunk7EZBMGEE_cjs = require('./chunk-7EZBMGEE.cjs');
|
|
|
4
4
|
var chunkXKDW6B7X_cjs = require('./chunk-XKDW6B7X.cjs');
|
|
5
5
|
var chunkBBOIFV27_cjs = require('./chunk-BBOIFV27.cjs');
|
|
6
6
|
var chunkYLGTDBB2_cjs = require('./chunk-YLGTDBB2.cjs');
|
|
7
|
-
var
|
|
7
|
+
var chunkR3UG6PVX_cjs = require('./chunk-R3UG6PVX.cjs');
|
|
8
8
|
var chunkKJ22KE56_cjs = require('./chunk-KJ22KE56.cjs');
|
|
9
9
|
var chunkL3V3BYVS_cjs = require('./chunk-L3V3BYVS.cjs');
|
|
10
10
|
var chunkSNHU2AI4_cjs = require('./chunk-SNHU2AI4.cjs');
|
|
@@ -82,7 +82,7 @@ var Input = react.forwardRef(
|
|
|
82
82
|
const pasting = pasteThreshold !== void 0 || pasteImages;
|
|
83
83
|
const editorRef = react.useRef(null);
|
|
84
84
|
const hiddenRef = react.useRef(null);
|
|
85
|
-
const paste =
|
|
85
|
+
const paste = chunkR3UG6PVX_cjs.useInlinePaste({
|
|
86
86
|
pasteThreshold,
|
|
87
87
|
pasteImages,
|
|
88
88
|
previewChars,
|
|
@@ -136,7 +136,7 @@ var Input = react.forwardRef(
|
|
|
136
136
|
),
|
|
137
137
|
pasting ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
138
138
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
139
|
-
|
|
139
|
+
chunkR3UG6PVX_cjs.InlinePasteEditor,
|
|
140
140
|
{
|
|
141
141
|
ref: editorRef,
|
|
142
142
|
id: inputId,
|
|
@@ -188,7 +188,7 @@ var Input = react.forwardRef(
|
|
|
188
188
|
value: paste.expand(pasteValue)
|
|
189
189
|
}
|
|
190
190
|
),
|
|
191
|
-
pasteImages && filesName && /* @__PURE__ */ jsxRuntime.jsx(
|
|
191
|
+
pasteImages && filesName && /* @__PURE__ */ jsxRuntime.jsx(chunkR3UG6PVX_cjs.PastedFilesInput, { name: filesName, files: pastedFiles, form: props.form })
|
|
192
192
|
] }) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
193
193
|
"input",
|
|
194
194
|
{
|
|
@@ -300,5 +300,5 @@ function EyeOffIcon() {
|
|
|
300
300
|
}
|
|
301
301
|
|
|
302
302
|
exports.Input = Input;
|
|
303
|
-
//# sourceMappingURL=chunk-
|
|
304
|
-
//# sourceMappingURL=chunk-
|
|
303
|
+
//# sourceMappingURL=chunk-7ZDJPHLJ.cjs.map
|
|
304
|
+
//# sourceMappingURL=chunk-7ZDJPHLJ.cjs.map
|