@once-ui-system/core 1.6.3 → 1.7.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/LICENSE.md +21 -0
- package/dist/components/Avatar.d.ts +1 -0
- package/dist/components/Avatar.d.ts.map +1 -1
- package/dist/components/Avatar.js +2 -2
- package/dist/components/Avatar.js.map +1 -1
- package/dist/components/BlobFx.d.ts +8 -0
- package/dist/components/BlobFx.d.ts.map +1 -0
- package/dist/components/BlobFx.js +82 -0
- package/dist/components/BlobFx.js.map +1 -0
- package/dist/components/Button.d.ts +1 -1
- package/dist/components/Button.d.ts.map +1 -1
- package/dist/components/Button.js +2 -2
- package/dist/components/Button.js.map +1 -1
- package/dist/components/Button.module.scss +62 -32
- package/dist/components/CelebrationFx.d.ts +1 -0
- package/dist/components/CelebrationFx.d.ts.map +1 -1
- package/dist/components/CelebrationFx.js +7 -3
- package/dist/components/CelebrationFx.js.map +1 -1
- package/dist/components/ContextMenu.d.ts +1 -0
- package/dist/components/ContextMenu.d.ts.map +1 -1
- package/dist/components/ContextMenu.js +8 -4
- package/dist/components/ContextMenu.js.map +1 -1
- package/dist/components/Dialog.d.ts.map +1 -1
- package/dist/components/Dialog.js +99 -91
- package/dist/components/Dialog.js.map +1 -1
- package/dist/components/Dropdown.d.ts +1 -0
- package/dist/components/Dropdown.d.ts.map +1 -1
- package/dist/components/Dropdown.js +4 -2
- package/dist/components/Dropdown.js.map +1 -1
- package/dist/components/FadingLettersFx.d.ts +15 -0
- package/dist/components/FadingLettersFx.d.ts.map +1 -0
- package/dist/components/FadingLettersFx.js +27 -0
- package/dist/components/FadingLettersFx.js.map +1 -0
- package/dist/components/FadingLettersFx.module.scss +71 -0
- package/dist/components/HoloFx.d.ts +1 -0
- package/dist/components/HoloFx.d.ts.map +1 -1
- package/dist/components/HoloFx.js +10 -3
- package/dist/components/HoloFx.js.map +1 -1
- package/dist/components/IconButton.d.ts +5 -2
- package/dist/components/IconButton.d.ts.map +1 -1
- package/dist/components/IconButton.js +6 -4
- package/dist/components/IconButton.js.map +1 -1
- package/dist/components/IconButton.module.scss +14 -0
- package/dist/components/Input.d.ts +3 -1
- package/dist/components/Input.d.ts.map +1 -1
- package/dist/components/Input.js +18 -5
- package/dist/components/Input.js.map +1 -1
- package/dist/components/Input.module.scss +38 -3
- package/dist/components/Mask.d.ts +1 -0
- package/dist/components/Mask.d.ts.map +1 -1
- package/dist/components/Mask.js +56 -32
- package/dist/components/Mask.js.map +1 -1
- package/dist/components/MatrixFx.d.ts +1 -0
- package/dist/components/MatrixFx.d.ts.map +1 -1
- package/dist/components/MatrixFx.js +8 -1
- package/dist/components/MatrixFx.js.map +1 -1
- package/dist/components/Media.d.ts +5 -1
- package/dist/components/Media.d.ts.map +1 -1
- package/dist/components/Media.js +20 -7
- package/dist/components/Media.js.map +1 -1
- package/dist/components/Modal.d.ts +11 -0
- package/dist/components/Modal.d.ts.map +1 -0
- package/dist/components/Modal.js +72 -0
- package/dist/components/Modal.js.map +1 -0
- package/dist/components/NumberInput.d.ts.map +1 -1
- package/dist/components/NumberInput.js +1 -1
- package/dist/components/NumberInput.js.map +1 -1
- package/dist/components/Particle.d.ts +1 -0
- package/dist/components/Particle.d.ts.map +1 -1
- package/dist/components/Particle.js +86 -78
- package/dist/components/Particle.js.map +1 -1
- package/dist/components/ScrollContainer.d.ts +9 -0
- package/dist/components/ScrollContainer.d.ts.map +1 -0
- package/dist/components/ScrollContainer.js +67 -0
- package/dist/components/ScrollContainer.js.map +1 -0
- package/dist/components/ScrollLock.d.ts.map +1 -1
- package/dist/components/ScrollLock.js +4 -91
- package/dist/components/ScrollLock.js.map +1 -1
- package/dist/components/ServerFlex.d.ts.map +1 -1
- package/dist/components/ServerFlex.js +3 -3
- package/dist/components/ServerFlex.js.map +1 -1
- package/dist/components/ServerGrid.d.ts.map +1 -1
- package/dist/components/ServerGrid.js +2 -2
- package/dist/components/ServerGrid.js.map +1 -1
- package/dist/components/ShineFx.d.ts +1 -0
- package/dist/components/ShineFx.d.ts.map +1 -1
- package/dist/components/ShineFx.js +5 -2
- package/dist/components/ShineFx.js.map +1 -1
- package/dist/components/SplitView.d.ts +16 -0
- package/dist/components/SplitView.d.ts.map +1 -0
- package/dist/components/SplitView.js +80 -0
- package/dist/components/SplitView.js.map +1 -0
- package/dist/components/SplitView.module.scss +18 -0
- package/dist/components/StylePanel.d.ts.map +1 -1
- package/dist/components/StylePanel.js +10 -10
- package/dist/components/StylePanel.js.map +1 -1
- package/dist/components/Textarea.d.ts +2 -0
- package/dist/components/Textarea.d.ts.map +1 -1
- package/dist/components/Textarea.js +22 -12
- package/dist/components/Textarea.js.map +1 -1
- package/dist/components/ThemeInit.d.ts.map +1 -1
- package/dist/components/ThemeInit.js +39 -40
- package/dist/components/ThemeInit.js.map +1 -1
- package/dist/components/TiltFx.d.ts +1 -0
- package/dist/components/TiltFx.d.ts.map +1 -1
- package/dist/components/TiltFx.js +27 -10
- package/dist/components/TiltFx.js.map +1 -1
- package/dist/components/Timeline.d.ts +1 -1
- package/dist/components/Timeline.d.ts.map +1 -1
- package/dist/components/Timeline.js +50 -6
- package/dist/components/Timeline.js.map +1 -1
- package/dist/components/ToggleButton.d.ts +2 -1
- package/dist/components/ToggleButton.d.ts.map +1 -1
- package/dist/components/ToggleButton.js +3 -3
- package/dist/components/ToggleButton.js.map +1 -1
- package/dist/components/ToggleButton.module.scss +27 -8
- package/dist/components/TypeFx.d.ts.map +1 -1
- package/dist/components/TypeFx.js +66 -87
- package/dist/components/TypeFx.js.map +1 -1
- package/dist/components/WeatherFx.d.ts +1 -0
- package/dist/components/WeatherFx.d.ts.map +1 -1
- package/dist/components/WeatherFx.js +97 -2
- package/dist/components/WeatherFx.js.map +1 -1
- package/dist/components/index.d.ts +9 -1
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +9 -1
- package/dist/components/index.js.map +1 -1
- package/dist/css/styles.css +1 -1
- package/dist/css/styles.css.map +1 -1
- package/dist/css/tokens.css +1 -1
- package/dist/css/tokens.css.map +1 -1
- package/dist/data/emoji-data.json +0 -8
- package/dist/hooks/index.d.ts +2 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +2 -0
- package/dist/hooks/index.js.map +1 -1
- package/dist/hooks/useInViewport.d.ts +3 -0
- package/dist/hooks/useInViewport.d.ts.map +1 -0
- package/dist/hooks/useInViewport.js +19 -0
- package/dist/hooks/useInViewport.js.map +1 -0
- package/dist/hooks/useReducedMotion.d.ts +8 -0
- package/dist/hooks/useReducedMotion.d.ts.map +1 -0
- package/dist/hooks/useReducedMotion.js +44 -0
- package/dist/hooks/useReducedMotion.js.map +1 -0
- package/dist/interfaces.d.ts +1 -0
- package/dist/interfaces.d.ts.map +1 -1
- package/dist/internal/dialogState.d.ts +17 -0
- package/dist/internal/dialogState.d.ts.map +1 -0
- package/dist/internal/dialogState.js +101 -0
- package/dist/internal/dialogState.js.map +1 -0
- package/dist/internal/scrollLockState.d.ts +15 -0
- package/dist/internal/scrollLockState.d.ts.map +1 -0
- package/dist/internal/scrollLockState.js +172 -0
- package/dist/internal/scrollLockState.js.map +1 -0
- package/dist/modules/code/CodeBlock.d.ts +3 -31
- package/dist/modules/code/CodeBlock.d.ts.map +1 -1
- package/dist/modules/code/CodeBlock.impl.d.ts +34 -0
- package/dist/modules/code/CodeBlock.impl.d.ts.map +1 -0
- package/dist/modules/code/CodeBlock.impl.js +487 -0
- package/dist/modules/code/CodeBlock.impl.js.map +1 -0
- package/dist/modules/code/CodeBlock.js +10 -483
- package/dist/modules/code/CodeBlock.js.map +1 -1
- package/dist/modules/data/BarChart.d.ts +1 -8
- package/dist/modules/data/BarChart.d.ts.map +1 -1
- package/dist/modules/data/BarChart.impl.d.ts +12 -0
- package/dist/modules/data/BarChart.impl.d.ts.map +1 -0
- package/dist/modules/data/BarChart.impl.js +137 -0
- package/dist/modules/data/BarChart.impl.js.map +1 -0
- package/dist/modules/data/BarChart.js +9 -132
- package/dist/modules/data/BarChart.js.map +1 -1
- package/dist/modules/data/DataTooltip.d.ts +2 -2
- package/dist/modules/data/DataTooltip.d.ts.map +1 -1
- package/dist/modules/data/Legend.d.ts +1 -1
- package/dist/modules/data/Legend.d.ts.map +1 -1
- package/dist/modules/data/LineBarChart.d.ts +1 -8
- package/dist/modules/data/LineBarChart.d.ts.map +1 -1
- package/dist/modules/data/LineBarChart.impl.d.ts +12 -0
- package/dist/modules/data/LineBarChart.impl.d.ts.map +1 -0
- package/dist/modules/data/LineBarChart.impl.js +142 -0
- package/dist/modules/data/LineBarChart.impl.js.map +1 -0
- package/dist/modules/data/LineBarChart.js +9 -137
- package/dist/modules/data/LineBarChart.js.map +1 -1
- package/dist/modules/data/LineChart.d.ts +1 -13
- package/dist/modules/data/LineChart.d.ts.map +1 -1
- package/dist/modules/data/LineChart.impl.d.ts +17 -0
- package/dist/modules/data/LineChart.impl.d.ts.map +1 -0
- package/dist/modules/data/LineChart.impl.js +148 -0
- package/dist/modules/data/LineChart.impl.js.map +1 -0
- package/dist/modules/data/LineChart.js +9 -143
- package/dist/modules/data/LineChart.js.map +1 -1
- package/dist/modules/data/PieChart.d.ts +4 -16
- package/dist/modules/data/PieChart.d.ts.map +1 -1
- package/dist/modules/data/PieChart.impl.d.ts +18 -0
- package/dist/modules/data/PieChart.impl.d.ts.map +1 -0
- package/dist/modules/data/PieChart.impl.js +102 -0
- package/dist/modules/data/PieChart.impl.js.map +1 -0
- package/dist/modules/data/PieChart.js +11 -97
- package/dist/modules/data/PieChart.js.map +1 -1
- package/dist/modules/media/MediaUpload.d.ts +2 -20
- package/dist/modules/media/MediaUpload.d.ts.map +1 -1
- package/dist/modules/media/MediaUpload.impl.d.ts +24 -0
- package/dist/modules/media/MediaUpload.impl.d.ts.map +1 -0
- package/dist/modules/media/MediaUpload.impl.js +92 -0
- package/dist/modules/media/MediaUpload.impl.js.map +1 -0
- package/dist/modules/media/MediaUpload.js +10 -88
- package/dist/modules/media/MediaUpload.js.map +1 -1
- package/dist/modules/navigation/Kbar.d.ts.map +1 -1
- package/dist/modules/navigation/Kbar.js +13 -28
- package/dist/modules/navigation/Kbar.js.map +1 -1
- package/dist/package.json +17 -6
- package/dist/styles/size.scss +20 -0
- package/dist/styles/typography.scss +8 -40
- package/dist/test/dialogTestUtils.d.ts +2 -0
- package/dist/test/dialogTestUtils.d.ts.map +1 -0
- package/dist/test/dialogTestUtils.js +9 -0
- package/dist/test/dialogTestUtils.js.map +1 -0
- package/dist/test/setup.d.ts +2 -0
- package/dist/test/setup.d.ts.map +1 -0
- package/dist/test/setup.js +59 -0
- package/dist/test/setup.js.map +1 -0
- package/dist/tokens/layout.scss +5 -0
- package/dist/utils/MissingDependency.d.ts +7 -0
- package/dist/utils/MissingDependency.d.ts.map +1 -0
- package/dist/utils/MissingDependency.js +6 -0
- package/dist/utils/MissingDependency.js.map +1 -0
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/index.d.ts.map +1 -1
- package/dist/utils/index.js +1 -0
- package/dist/utils/index.js.map +1 -1
- package/next-env.d.ts +5 -0
- package/package.json +135 -115
- package/tsconfig.vitest.json +20 -0
- package/vitest.config.ts +19 -0
|
@@ -1,53 +1,95 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
-
import
|
|
3
|
+
import { useEffect, useCallback, useRef, forwardRef, useState, useContext, useId, useLayoutEffect, } from "react";
|
|
4
4
|
import ReactDOM from "react-dom";
|
|
5
5
|
import classNames from "classnames";
|
|
6
6
|
import { Column, Flex, Heading, IconButton, ScrollLock, Text } from ".";
|
|
7
|
+
import { DialogContext, getTopVisibleDialogLayer, removeVisibleDialogLayer, upsertVisibleDialogLayer, } from "../internal/dialogState";
|
|
7
8
|
import styles from "./Dialog.module.scss";
|
|
8
|
-
const DialogContext = React.createContext({
|
|
9
|
-
stackedDialogOpen: false,
|
|
10
|
-
setStackedDialogOpen: () => { },
|
|
11
|
-
});
|
|
12
9
|
export const DialogProvider = ({ children }) => {
|
|
13
|
-
const [stackedDialogOpen, setStackedDialogOpen] = useState(false);
|
|
14
10
|
return (_jsx(DialogContext.Provider, { value: {
|
|
15
|
-
|
|
16
|
-
|
|
11
|
+
upsertVisibleDialog: upsertVisibleDialogLayer,
|
|
12
|
+
removeVisibleDialog: removeVisibleDialogLayer,
|
|
17
13
|
}, children: children }));
|
|
18
14
|
};
|
|
19
15
|
const Dialog = forwardRef(({ isOpen, onClose, title, description, children, stack, base, footer, onHeightChange, minHeight, ...rest }, ref) => {
|
|
20
16
|
const dialogRef = useRef(null);
|
|
17
|
+
const animationTimerRef = useRef(null);
|
|
18
|
+
const previouslyFocusedElementRef = useRef(null);
|
|
19
|
+
const wasVisibleRef = useRef(isOpen);
|
|
20
|
+
const focusRestoredRef = useRef(false);
|
|
21
|
+
const dialogId = useId();
|
|
22
|
+
const dialogTitleId = `${dialogId}-title`;
|
|
21
23
|
const [isVisible, setIsVisible] = useState(isOpen);
|
|
22
24
|
const [isAnimating, setIsAnimating] = useState(false);
|
|
23
|
-
const
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
const [portalContainer, setPortalContainer] = useState(() => typeof document === "undefined" ? null : document.body);
|
|
26
|
+
const { upsertVisibleDialog, removeVisibleDialog } = useContext(DialogContext);
|
|
27
|
+
const isCurrentDialogTopVisibleLayer = useCallback(() => getTopVisibleDialogLayer()?.id === dialogId, [dialogId]);
|
|
28
|
+
const getPortalContainer = useCallback(() => {
|
|
29
|
+
let portalContainer = dialogRef.current;
|
|
30
|
+
while (portalContainer && portalContainer.parentElement !== document.body) {
|
|
31
|
+
portalContainer = portalContainer.parentElement;
|
|
27
32
|
}
|
|
28
|
-
|
|
33
|
+
return portalContainer;
|
|
34
|
+
}, []);
|
|
29
35
|
useEffect(() => {
|
|
30
36
|
if (dialogRef.current && isVisible) {
|
|
31
37
|
const height = dialogRef.current.offsetHeight;
|
|
32
38
|
onHeightChange?.(height);
|
|
33
39
|
}
|
|
34
40
|
}, [isVisible, onHeightChange]);
|
|
41
|
+
useLayoutEffect(() => {
|
|
42
|
+
if (!isVisible || !dialogRef.current) {
|
|
43
|
+
removeVisibleDialog(dialogId);
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
46
|
+
const portalContainer = getPortalContainer();
|
|
47
|
+
if (!portalContainer)
|
|
48
|
+
return;
|
|
49
|
+
upsertVisibleDialog({
|
|
50
|
+
id: dialogId,
|
|
51
|
+
dialogElement: dialogRef.current,
|
|
52
|
+
portalContainer,
|
|
53
|
+
priority: base ? 8 : 9,
|
|
54
|
+
});
|
|
55
|
+
}, [base, dialogId, getPortalContainer, isVisible, removeVisibleDialog, upsertVisibleDialog]);
|
|
56
|
+
useEffect(() => {
|
|
57
|
+
return () => {
|
|
58
|
+
removeVisibleDialog(dialogId);
|
|
59
|
+
};
|
|
60
|
+
}, [dialogId, removeVisibleDialog]);
|
|
61
|
+
useEffect(() => {
|
|
62
|
+
if (!portalContainer) {
|
|
63
|
+
setPortalContainer(document.body);
|
|
64
|
+
}
|
|
65
|
+
}, [portalContainer]);
|
|
35
66
|
useEffect(() => {
|
|
67
|
+
if (animationTimerRef.current) {
|
|
68
|
+
clearTimeout(animationTimerRef.current);
|
|
69
|
+
}
|
|
36
70
|
if (isOpen) {
|
|
37
71
|
setIsVisible(true);
|
|
38
|
-
setTimeout(() => {
|
|
72
|
+
animationTimerRef.current = setTimeout(() => {
|
|
39
73
|
setIsAnimating(true);
|
|
74
|
+
animationTimerRef.current = null;
|
|
40
75
|
}, 0);
|
|
41
76
|
}
|
|
42
77
|
else {
|
|
43
78
|
setIsAnimating(false);
|
|
44
|
-
setTimeout(() => {
|
|
79
|
+
animationTimerRef.current = setTimeout(() => {
|
|
45
80
|
setIsVisible(false);
|
|
81
|
+
animationTimerRef.current = null;
|
|
46
82
|
}, 300);
|
|
47
83
|
}
|
|
84
|
+
return () => {
|
|
85
|
+
if (animationTimerRef.current) {
|
|
86
|
+
clearTimeout(animationTimerRef.current);
|
|
87
|
+
animationTimerRef.current = null;
|
|
88
|
+
}
|
|
89
|
+
};
|
|
48
90
|
}, [isOpen]);
|
|
49
91
|
const handleKeyDown = useCallback((event) => {
|
|
50
|
-
if (event.key === "Escape" && !base) {
|
|
92
|
+
if (event.key === "Escape" && !base && isCurrentDialogTopVisibleLayer()) {
|
|
51
93
|
onClose();
|
|
52
94
|
}
|
|
53
95
|
if (event.key === "Tab" && dialogRef.current) {
|
|
@@ -65,7 +107,7 @@ const Dialog = forwardRef(({ isOpen, onClose, title, description, children, stac
|
|
|
65
107
|
}
|
|
66
108
|
}
|
|
67
109
|
}
|
|
68
|
-
}, [
|
|
110
|
+
}, [base, isCurrentDialogTopVisibleLayer, onClose]);
|
|
69
111
|
useEffect(() => {
|
|
70
112
|
if (isOpen) {
|
|
71
113
|
document.addEventListener("keydown", handleKeyDown);
|
|
@@ -74,80 +116,46 @@ const Dialog = forwardRef(({ isOpen, onClose, title, description, children, stac
|
|
|
74
116
|
};
|
|
75
117
|
}
|
|
76
118
|
}, [isOpen, handleKeyDown]);
|
|
77
|
-
useEffect(() => {
|
|
78
|
-
// Find the portal container (direct child of body that contains the dialog)
|
|
79
|
-
const getPortalContainer = () => {
|
|
80
|
-
let portalContainer = dialogRef.current;
|
|
81
|
-
while (portalContainer && portalContainer.parentElement !== document.body) {
|
|
82
|
-
portalContainer = portalContainer.parentElement;
|
|
83
|
-
}
|
|
84
|
-
return portalContainer;
|
|
85
|
-
};
|
|
86
|
-
// Cleanup function to restore inert state
|
|
87
|
-
const cleanup = () => {
|
|
88
|
-
// Restore inert on all body children
|
|
89
|
-
document.body.childNodes.forEach((node) => {
|
|
90
|
-
if (node instanceof HTMLElement) {
|
|
91
|
-
node.inert = false;
|
|
92
|
-
}
|
|
93
|
-
});
|
|
94
|
-
// Also restore inert on any dialogs (for stacked dialog case)
|
|
95
|
-
if (stack) {
|
|
96
|
-
const dialogs = document.querySelectorAll('[role="dialog"]');
|
|
97
|
-
dialogs.forEach((dialog) => {
|
|
98
|
-
if (dialog instanceof HTMLElement) {
|
|
99
|
-
dialog.inert = false;
|
|
100
|
-
}
|
|
101
|
-
});
|
|
102
|
-
}
|
|
103
|
-
};
|
|
104
|
-
if (isOpen) {
|
|
105
|
-
const portalContainer = getPortalContainer();
|
|
106
|
-
// Make everything outside the dialog inert, except the dialog's own portal container
|
|
107
|
-
document.body.childNodes.forEach((node) => {
|
|
108
|
-
if (node instanceof HTMLElement && node !== portalContainer) {
|
|
109
|
-
node.inert = true;
|
|
110
|
-
}
|
|
111
|
-
});
|
|
112
|
-
// If this is a stacked dialog, make the base dialog inert too
|
|
113
|
-
if (stack) {
|
|
114
|
-
const dialogs = document.querySelectorAll('[role="dialog"]');
|
|
115
|
-
dialogs.forEach((dialog) => {
|
|
116
|
-
if (dialog instanceof HTMLElement && !dialog.contains(dialogRef.current)) {
|
|
117
|
-
dialog.inert = true;
|
|
118
|
-
}
|
|
119
|
-
});
|
|
120
|
-
}
|
|
121
|
-
// Return cleanup function for when component unmounts or isOpen changes
|
|
122
|
-
return cleanup;
|
|
123
|
-
}
|
|
124
|
-
else {
|
|
125
|
-
// If this is a stacked dialog closing, restore interactivity to base dialog
|
|
126
|
-
if (stack) {
|
|
127
|
-
const dialogs = document.querySelectorAll('[role="dialog"]');
|
|
128
|
-
dialogs.forEach((dialog) => {
|
|
129
|
-
if (dialog instanceof HTMLElement) {
|
|
130
|
-
dialog.inert = false;
|
|
131
|
-
}
|
|
132
|
-
});
|
|
133
|
-
}
|
|
134
|
-
else {
|
|
135
|
-
// If base dialog is closing, restore everything
|
|
136
|
-
document.body.childNodes.forEach((node) => {
|
|
137
|
-
if (node instanceof HTMLElement) {
|
|
138
|
-
node.inert = false;
|
|
139
|
-
}
|
|
140
|
-
});
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
}, [isOpen, stack]);
|
|
144
119
|
useEffect(() => {
|
|
145
120
|
if (isOpen && dialogRef.current) {
|
|
121
|
+
focusRestoredRef.current = false;
|
|
122
|
+
previouslyFocusedElementRef.current =
|
|
123
|
+
document.activeElement instanceof HTMLElement ? document.activeElement : null;
|
|
146
124
|
const focusableElements = dialogRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
|
147
125
|
const firstElement = focusableElements[0];
|
|
148
|
-
firstElement
|
|
126
|
+
firstElement?.focus();
|
|
149
127
|
}
|
|
150
128
|
}, [isOpen]);
|
|
129
|
+
const restoreFocus = useCallback(() => {
|
|
130
|
+
if (focusRestoredRef.current)
|
|
131
|
+
return;
|
|
132
|
+
const topLayer = getTopVisibleDialogLayer();
|
|
133
|
+
const isTopLayer = topLayer?.id === dialogId;
|
|
134
|
+
const hasOtherVisibleDialog = topLayer !== null && !isTopLayer;
|
|
135
|
+
const previousElement = previouslyFocusedElementRef.current;
|
|
136
|
+
const isPreviousElementInDocument = previousElement !== null && document.contains(previousElement);
|
|
137
|
+
const isPreviousElementInTopLayer = isPreviousElementInDocument &&
|
|
138
|
+
hasOtherVisibleDialog &&
|
|
139
|
+
topLayer?.dialogElement.contains(previousElement);
|
|
140
|
+
if (hasOtherVisibleDialog && !isPreviousElementInTopLayer) {
|
|
141
|
+
return;
|
|
142
|
+
}
|
|
143
|
+
if (isPreviousElementInDocument) {
|
|
144
|
+
previousElement.focus();
|
|
145
|
+
}
|
|
146
|
+
focusRestoredRef.current = true;
|
|
147
|
+
}, [dialogId]);
|
|
148
|
+
useEffect(() => {
|
|
149
|
+
if (wasVisibleRef.current && !isVisible) {
|
|
150
|
+
restoreFocus();
|
|
151
|
+
}
|
|
152
|
+
wasVisibleRef.current = isVisible;
|
|
153
|
+
}, [isVisible, restoreFocus]);
|
|
154
|
+
useEffect(() => {
|
|
155
|
+
return () => {
|
|
156
|
+
restoreFocus();
|
|
157
|
+
};
|
|
158
|
+
}, [restoreFocus]);
|
|
151
159
|
useEffect(() => {
|
|
152
160
|
const handleClickOutside = (event) => {
|
|
153
161
|
if (event.button !== 0)
|
|
@@ -157,7 +165,7 @@ const Dialog = forwardRef(({ isOpen, onClose, title, description, children, stac
|
|
|
157
165
|
return;
|
|
158
166
|
}
|
|
159
167
|
if (!dialogRef.current?.contains(event.target)) {
|
|
160
|
-
if (stack || !base) {
|
|
168
|
+
if ((stack || !base) && isCurrentDialogTopVisibleLayer()) {
|
|
161
169
|
event.preventDefault();
|
|
162
170
|
onClose();
|
|
163
171
|
}
|
|
@@ -172,12 +180,12 @@ const Dialog = forwardRef(({ isOpen, onClose, title, description, children, stac
|
|
|
172
180
|
document.removeEventListener("mousedown", handleClickOutside, { capture: true });
|
|
173
181
|
};
|
|
174
182
|
}
|
|
175
|
-
}, [isVisible, onClose, stack
|
|
176
|
-
if (!isVisible)
|
|
183
|
+
}, [base, isCurrentDialogTopVisibleLayer, isVisible, onClose, stack]);
|
|
184
|
+
if (!isVisible || !portalContainer)
|
|
177
185
|
return null;
|
|
178
|
-
return ReactDOM.createPortal(_jsxs(_Fragment, { children: [_jsx(ScrollLock, { enabled: isOpen, allowScrollInElement: dialogRef }), _jsx(Flex, { ref: ref, transition: "macro-medium", background: "overlay", position: "fixed", zIndex: base ? 8 : 9, top: "0", left: "0", right: "0", bottom: "0", className: classNames(styles.overlay, {
|
|
186
|
+
return ReactDOM.createPortal(_jsxs(_Fragment, { children: [_jsx(ScrollLock, { enabled: isOpen && !base, allowScrollInElement: dialogRef }), _jsx(Flex, { ref: ref, transition: "macro-medium", background: "overlay", position: "fixed", zIndex: base ? 8 : 9, top: "0", left: "0", right: "0", bottom: "0", className: classNames(styles.overlay, {
|
|
179
187
|
[styles.open]: isAnimating,
|
|
180
|
-
}), center: true, padding: "l", role: "dialog", "aria-modal": "true", "aria-labelledby":
|
|
188
|
+
}), center: true, padding: "l", role: "dialog", "aria-modal": "true", "aria-labelledby": dialogTitleId, children: _jsx(Flex, { fill: true, center: true, transition: "macro-medium", style: {
|
|
181
189
|
transform: base ? "scale(0.94) translateY(-1.25rem)" : "",
|
|
182
190
|
}, children: _jsxs(Column, { position: "unset", className: classNames(styles.dialog, {
|
|
183
191
|
[styles.open]: isAnimating,
|
|
@@ -199,7 +207,7 @@ const Dialog = forwardRef(({ isOpen, onClose, title, description, children, stac
|
|
|
199
207
|
firstElement.focus();
|
|
200
208
|
}
|
|
201
209
|
}
|
|
202
|
-
}, ...rest, children: [_jsxs(Column, { as: "header", paddingX: "24", paddingTop: "24", paddingBottom: "s", gap: "4", children: [_jsxs(Flex, { fillWidth: true, horizontal: "between", gap: "8", children: [typeof title === "string" ? (_jsx(Heading, { id:
|
|
210
|
+
}, ...rest, children: [_jsxs(Column, { as: "header", paddingX: "24", paddingTop: "24", paddingBottom: "s", gap: "4", children: [_jsxs(Flex, { fillWidth: true, horizontal: "between", gap: "8", children: [typeof title === "string" ? (_jsx(Heading, { id: dialogTitleId, variant: "heading-strong-l", children: title })) : (_jsx("div", { id: dialogTitleId, children: title })), _jsx(IconButton, { icon: "close", size: "m", variant: "tertiary", tooltip: "Close", onClick: onClose })] }), description && (_jsx(Text, { variant: "body-default-s", onBackground: "neutral-weak", children: description }))] }), _jsx(Column, { as: "section", paddingX: "24", paddingBottom: "24", flex: 1, overflowY: "auto", children: children }), footer && (_jsx(Flex, { borderTop: "neutral-medium", as: "footer", horizontal: "end", padding: "12", gap: "8", children: footer }))] }) }) })] }), portalContainer);
|
|
203
211
|
});
|
|
204
212
|
Dialog.displayName = "Dialog";
|
|
205
213
|
export { Dialog };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../src/components/Dialog.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,
|
|
1
|
+
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../src/components/Dialog.tsx"],"names":[],"mappings":"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"}
|
|
@@ -5,6 +5,7 @@ interface DropdownProps extends Omit<React.ComponentProps<typeof Row>, "onSelect
|
|
|
5
5
|
children?: ReactNode;
|
|
6
6
|
onEscape?: () => void;
|
|
7
7
|
onSelect?: (event: string) => void;
|
|
8
|
+
disabled?: boolean;
|
|
8
9
|
}
|
|
9
10
|
declare const Dropdown: React.ForwardRefExoticComponent<Omit<DropdownProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
10
11
|
export { Dropdown };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../src/components/Dropdown.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA8B,MAAM,OAAO,CAAC;AACrE,OAAO,EAAU,GAAG,EAAE,MAAM,GAAG,CAAC;AAEhC,UAAU,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,UAAU,CAAC;IAChF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../src/components/Dropdown.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA8B,MAAM,OAAO,CAAC;AACrE,OAAO,EAAU,GAAG,EAAE,MAAM,GAAG,CAAC;AAEhC,UAAU,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,UAAU,CAAC;IAChF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,mGAoCb,CAAC;AAIF,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,CAAC"}
|
|
@@ -2,8 +2,10 @@
|
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import { forwardRef } from "react";
|
|
4
4
|
import { Column, Row } from ".";
|
|
5
|
-
const Dropdown = forwardRef(({ selectedOption, className, children, onEscape, onSelect, ...flex }, ref) => {
|
|
5
|
+
const Dropdown = forwardRef(({ selectedOption, className, children, onEscape, onSelect, disabled = false, ...flex }, ref) => {
|
|
6
6
|
const handleSelect = (event) => {
|
|
7
|
+
if (disabled)
|
|
8
|
+
return;
|
|
7
9
|
// Only handle clicks on elements that have a data-value attribute
|
|
8
10
|
const target = event.target;
|
|
9
11
|
const value = target.getAttribute("data-value") ||
|
|
@@ -12,7 +14,7 @@ const Dropdown = forwardRef(({ selectedOption, className, children, onEscape, on
|
|
|
12
14
|
onSelect(value);
|
|
13
15
|
}
|
|
14
16
|
};
|
|
15
|
-
return (_jsx(Row, { ref: ref, role: "listbox", onClick: handleSelect, flex: 1, border: "neutral-medium", background: "surface", overflow: "hidden", ...flex, children: _jsx(Column, { flex: 1, overflowY: "auto", gap: "2", children: children }) }));
|
|
17
|
+
return (_jsx(Row, { ref: ref, role: "listbox", onClick: handleSelect, flex: 1, border: "neutral-medium", background: "surface", overflow: "hidden", className: disabled ? "cursor-not-allowed" : undefined, style: { opacity: disabled ? 0.6 : undefined }, "aria-disabled": disabled, ...flex, children: _jsx(Column, { flex: 1, overflowY: "auto", gap: "2", children: children }) }));
|
|
16
18
|
});
|
|
17
19
|
Dropdown.displayName = "Dropdown";
|
|
18
20
|
export { Dropdown };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../src/components/Dropdown.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAa,UAAU,EAAkB,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,CAAC;
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../src/components/Dropdown.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAa,UAAU,EAAkB,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,CAAC;AAUhC,MAAM,QAAQ,GAAG,UAAU,CACzB,CAAC,EAAE,cAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;IAC9F,MAAM,YAAY,GAAG,CAAC,KAAqC,EAAE,EAAE;QAC7D,IAAI,QAAQ;YAAE,OAAO;QAErB,kEAAkE;QAClE,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAC3C,MAAM,KAAK,GACT,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC;YACjC,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC;QAE7D,IAAI,QAAQ,IAAI,KAAK,EAAE,CAAC;YACtB,QAAQ,CAAC,KAAK,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,GAAG,IACF,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,YAAY,EACrB,IAAI,EAAE,CAAC,EACP,MAAM,EAAC,gBAAgB,EACvB,UAAU,EAAC,SAAS,EACpB,QAAQ,EAAC,QAAQ,EACjB,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,SAAS,EACtD,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EAAE,mBAC/B,QAAQ,KACnB,IAAI,YAER,KAAC,MAAM,IAAC,IAAI,EAAE,CAAC,EAAE,SAAS,EAAC,MAAM,EAAC,GAAG,EAAC,GAAG,YACtC,QAAQ,GACF,GACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC;AAElC,OAAO,EAAE,QAAQ,EAAE,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { Text } from "./Text";
|
|
2
|
+
import { ComponentProps } from "react";
|
|
3
|
+
type AnimationState = "entering" | "visible" | "exiting";
|
|
4
|
+
interface FadingLettersFxProps extends ComponentProps<typeof Text> {
|
|
5
|
+
text: string;
|
|
6
|
+
animationState: AnimationState;
|
|
7
|
+
messageIdx?: number;
|
|
8
|
+
}
|
|
9
|
+
declare function FadingLettersFx({ text, animationState, messageIdx, ...textProps }: FadingLettersFxProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
declare namespace FadingLettersFx {
|
|
11
|
+
var displayName: string;
|
|
12
|
+
}
|
|
13
|
+
export { FadingLettersFx };
|
|
14
|
+
export type { FadingLettersFxProps, AnimationState };
|
|
15
|
+
//# sourceMappingURL=FadingLettersFx.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FadingLettersFx.d.ts","sourceRoot":"","sources":["../../src/components/FadingLettersFx.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,cAAc,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;AAEzD,UAAU,oBAAqB,SAAQ,cAAc,CAAC,OAAO,IAAI,CAAC;IAChE,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,EAAE,cAAc,CAAC;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,iBAAS,eAAe,CAAC,EACvB,IAAI,EACJ,cAAc,EACd,UAAc,EACd,GAAG,SAAS,EACb,EAAE,oBAAoB,2CA0CtB;kBA/CQ,eAAe;;;AAmDxB,OAAO,EAAE,eAAe,EAAE,CAAC;AAC3B,YAAY,EAAE,oBAAoB,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { Text } from "./Text";
|
|
4
|
+
import styles from "./FadingLettersFx.module.scss";
|
|
5
|
+
function FadingLettersFx({ text, animationState, messageIdx = 0, ...textProps }) {
|
|
6
|
+
const renderTextWithLetters = () => {
|
|
7
|
+
const words = text.split(" ");
|
|
8
|
+
const lineBaseDelay = messageIdx * 2500;
|
|
9
|
+
return words.map((word, wordIdx) => {
|
|
10
|
+
const letters = word.split("");
|
|
11
|
+
const wordLetters = letters.map((letter, letterIdx) => {
|
|
12
|
+
const wordBaseDelay = lineBaseDelay + wordIdx * 200;
|
|
13
|
+
const entryDelay = wordBaseDelay + letterIdx * 40;
|
|
14
|
+
const exitDelay = Math.random() * 400;
|
|
15
|
+
return (_jsx("span", { className: `${styles.letter} ${animationState === "entering" ? styles.entering : ""} ${animationState === "exiting" ? styles.exiting : ""}`, style: {
|
|
16
|
+
"--entry-delay": `${entryDelay}ms`,
|
|
17
|
+
"--exit-delay": `${exitDelay}ms`,
|
|
18
|
+
}, suppressHydrationWarning: true, children: letter }, `${wordIdx}-${letterIdx}`));
|
|
19
|
+
});
|
|
20
|
+
return (_jsx("span", { className: styles.word, children: wordLetters }, wordIdx));
|
|
21
|
+
});
|
|
22
|
+
};
|
|
23
|
+
return (_jsx(Text, { ...textProps, style: { display: "contents", ...textProps.style }, children: renderTextWithLetters() }));
|
|
24
|
+
}
|
|
25
|
+
FadingLettersFx.displayName = "FadingLettersFx";
|
|
26
|
+
export { FadingLettersFx };
|
|
27
|
+
//# sourceMappingURL=FadingLettersFx.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FadingLettersFx.js","sourceRoot":"","sources":["../../src/components/FadingLettersFx.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,OAAO,MAAM,MAAM,+BAA+B,CAAC;AAUnD,SAAS,eAAe,CAAC,EACvB,IAAI,EACJ,cAAc,EACd,UAAU,GAAG,CAAC,EACd,GAAG,SAAS,EACS;IACrB,MAAM,qBAAqB,GAAG,GAAG,EAAE;QACjC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC9B,MAAM,aAAa,GAAG,UAAU,GAAG,IAAI,CAAC;QAExC,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE;YACjC,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YAC/B,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE;gBACpD,MAAM,aAAa,GAAG,aAAa,GAAG,OAAO,GAAG,GAAG,CAAC;gBACpD,MAAM,UAAU,GAAG,aAAa,GAAG,SAAS,GAAG,EAAE,CAAC;gBAClD,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC;gBAEtC,OAAO,CACL,eAEE,SAAS,EAAE,GAAG,MAAM,CAAC,MAAM,IACzB,cAAc,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EACpD,IAAI,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,EACxD,KAAK,EAAE;wBACL,eAAe,EAAE,GAAG,UAAU,IAAI;wBAClC,cAAc,EAAE,GAAG,SAAS,IAAI;qBACV,EACxB,wBAAwB,kBAEvB,MAAM,IAVF,GAAG,OAAO,IAAI,SAAS,EAAE,CAWzB,CACR,CAAC;YACJ,CAAC,CAAC,CAAC;YAEH,OAAO,CACL,eAAoB,SAAS,EAAE,MAAM,CAAC,IAAI,YACvC,WAAW,IADH,OAAO,CAEX,CACR,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,OAAK,SAAS,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,SAAS,CAAC,KAAK,EAAE,YACpE,qBAAqB,EAAE,GACnB,CACR,CAAC;AACJ,CAAC;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC;AAEhD,OAAO,EAAE,eAAe,EAAE,CAAC"}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
@keyframes fadeInFromDistance {
|
|
2
|
+
from {
|
|
3
|
+
opacity: 0;
|
|
4
|
+
filter: blur(20px);
|
|
5
|
+
transform: scale(0) translateZ(-100px);
|
|
6
|
+
}
|
|
7
|
+
to {
|
|
8
|
+
opacity: 1;
|
|
9
|
+
filter: blur(0px);
|
|
10
|
+
transform: scale(1) translateZ(0);
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
@keyframes fadeOutPastViewer {
|
|
15
|
+
from {
|
|
16
|
+
opacity: 1;
|
|
17
|
+
filter: blur(0px);
|
|
18
|
+
transform: scale(1) translateZ(0);
|
|
19
|
+
}
|
|
20
|
+
to {
|
|
21
|
+
opacity: 0;
|
|
22
|
+
filter: blur(30px);
|
|
23
|
+
transform: scale(8) translateZ(100px);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@keyframes letterFadeIn {
|
|
28
|
+
from {
|
|
29
|
+
opacity: 0;
|
|
30
|
+
filter: blur(25px);
|
|
31
|
+
transform: scale(0.1);
|
|
32
|
+
}
|
|
33
|
+
to {
|
|
34
|
+
opacity: 1;
|
|
35
|
+
filter: blur(0px);
|
|
36
|
+
transform: scale(1);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@keyframes letterFadeOut {
|
|
41
|
+
from {
|
|
42
|
+
opacity: 1;
|
|
43
|
+
filter: blur(0px);
|
|
44
|
+
transform: scale(1);
|
|
45
|
+
}
|
|
46
|
+
to {
|
|
47
|
+
opacity: 0;
|
|
48
|
+
filter: blur(20px);
|
|
49
|
+
transform: scale(4);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.word {
|
|
54
|
+
display: inline-flex;
|
|
55
|
+
margin-right: 0.35em;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.letter {
|
|
59
|
+
display: inline-block;
|
|
60
|
+
will-change: transform;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.letter.entering {
|
|
64
|
+
animation: letterFadeIn 1200ms ease-out both;
|
|
65
|
+
animation-delay: var(--entry-delay, 0s), var(--entry-delay, 0s);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.letter.exiting {
|
|
69
|
+
animation: letterFadeOut 1600ms ease-in-out forwards;
|
|
70
|
+
animation-delay: var(--exit-delay, 0s);
|
|
71
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HoloFx.d.ts","sourceRoot":"","sources":["../../src/components/HoloFx.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AACzB,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"HoloFx.d.ts","sourceRoot":"","sources":["../../src/components/HoloFx.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AACzB,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAKtC,UAAU,WAAW;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,UAAU,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IAC7D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,KAAK,CAAC,EAAE;QACN,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,QAAQ,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;QACzC,IAAI,CAAC,EAAE,WAAW,CAAC;KACpB,CAAC;IACF,IAAI,CAAC,EAAE;QACL,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,QAAQ,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;QACzC,IAAI,CAAC,EAAE,WAAW,CAAC;KACpB,CAAC;IACF,OAAO,CAAC,EAAE;QACR,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,QAAQ,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;QACzC,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,WAAW,CAAC;KACpB,CAAC;CACH;AAaD,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmHjC,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,CAAC"}
|
|
@@ -4,6 +4,8 @@ import { useEffect, useRef } from "react";
|
|
|
4
4
|
import styles from "./HoloFx.module.scss";
|
|
5
5
|
import { Flex } from ".";
|
|
6
6
|
import classNames from "classnames";
|
|
7
|
+
import { useInViewport } from "../hooks/useInViewport";
|
|
8
|
+
import { useReducedMotion } from "../hooks/useReducedMotion";
|
|
7
9
|
const formatMask = (maskPosition = "100 200") => {
|
|
8
10
|
const [x, y] = maskPosition.split(" ");
|
|
9
11
|
const formattedX = `${x}%`;
|
|
@@ -13,9 +15,12 @@ const formatMask = (maskPosition = "100 200") => {
|
|
|
13
15
|
const getMaskStyle = (mask) => {
|
|
14
16
|
return mask?.maskPosition ? formatMask(mask.maskPosition) : formatMask();
|
|
15
17
|
};
|
|
16
|
-
const HoloFx = ({ children, shine, burn, texture, ...rest }) => {
|
|
18
|
+
const HoloFx = ({ children, reducedMotion = "auto", shine, burn, texture, ...rest }) => {
|
|
17
19
|
const ref = useRef(null);
|
|
18
20
|
const lastCallRef = useRef(0);
|
|
21
|
+
const isInViewport = useInViewport(ref);
|
|
22
|
+
const { shouldAnimate } = useReducedMotion(reducedMotion);
|
|
23
|
+
const isActive = isInViewport && shouldAnimate;
|
|
19
24
|
const shineDefaults = {
|
|
20
25
|
opacity: 30,
|
|
21
26
|
blending: "color-dodge",
|
|
@@ -37,6 +42,8 @@ const HoloFx = ({ children, shine, burn, texture, ...rest }) => {
|
|
|
37
42
|
...texture,
|
|
38
43
|
};
|
|
39
44
|
useEffect(() => {
|
|
45
|
+
if (!isActive)
|
|
46
|
+
return;
|
|
40
47
|
const handleMouseMove = (event) => {
|
|
41
48
|
const now = Date.now();
|
|
42
49
|
if (now - lastCallRef.current < 16)
|
|
@@ -55,11 +62,11 @@ const HoloFx = ({ children, shine, burn, texture, ...rest }) => {
|
|
|
55
62
|
element.style.setProperty("--gradient-pos-x", `${deltaX}%`);
|
|
56
63
|
element.style.setProperty("--gradient-pos-y", `${deltaY}%`);
|
|
57
64
|
};
|
|
58
|
-
document.addEventListener("mousemove", handleMouseMove);
|
|
65
|
+
document.addEventListener("mousemove", handleMouseMove, { passive: true });
|
|
59
66
|
return () => {
|
|
60
67
|
document.removeEventListener("mousemove", handleMouseMove);
|
|
61
68
|
};
|
|
62
|
-
}, []);
|
|
69
|
+
}, [isActive]);
|
|
63
70
|
return (_jsxs(Flex, { overflow: "hidden", className: styles.holoFx, ref: ref, ...rest, children: [_jsx(Flex, { fill: true, className: styles.base, children: children }), _jsx(Flex, { m: { hide: true }, position: "absolute", fill: true, pointerEvents: "none", className: classNames(styles.overlay, styles.burn), style: {
|
|
64
71
|
["--burn-opacity"]: burnDefaults.opacity + "%",
|
|
65
72
|
filter: burnDefaults.filter,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HoloFx.js","sourceRoot":"","sources":["../../src/components/HoloFx.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAEzB,OAAO,UAAU,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"HoloFx.js","sourceRoot":"","sources":["../../src/components/HoloFx.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,11 +3,14 @@ import { IconName } from "../icons";
|
|
|
3
3
|
interface CommonProps {
|
|
4
4
|
icon?: IconName;
|
|
5
5
|
id?: string;
|
|
6
|
-
size?: "s" | "m" | "l";
|
|
6
|
+
size?: "xs" | "s" | "m" | "l" | "xl";
|
|
7
7
|
radius?: "none" | "top" | "right" | "bottom" | "left" | "top-left" | "top-right" | "bottom-right" | "bottom-left";
|
|
8
|
-
|
|
8
|
+
rounded?: boolean;
|
|
9
|
+
tooltip?: ReactNode;
|
|
9
10
|
tooltipPosition?: "top" | "bottom" | "left" | "right";
|
|
10
11
|
variant?: "primary" | "secondary" | "tertiary" | "danger" | "ghost";
|
|
12
|
+
loading?: boolean;
|
|
13
|
+
disabled?: boolean;
|
|
11
14
|
className?: string;
|
|
12
15
|
style?: React.CSSProperties;
|
|
13
16
|
href?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/components/IconButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAMrD,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,UAAU,WAAW;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;
|
|
1
|
+
{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/components/IconButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAMrD,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,UAAU,WAAW;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IACrC,MAAM,CAAC,EACH,MAAM,GACN,KAAK,GACL,OAAO,GACP,QAAQ,GACR,MAAM,GACN,UAAU,GACV,WAAW,GACX,cAAc,GACd,aAAa,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,eAAe,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACtD,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAC1F,KAAK,WAAW,GAAG,WAAW,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE/E,QAAA,MAAM,UAAU,2GAkFf,CAAC;AAGF,OAAO,EAAE,UAAU,EAAE,CAAC"}
|