@once-ui-system/core 1.6.4 → 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/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/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/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/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/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/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/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/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 -18
- 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 +1 -1
- package/dist/modules/navigation/Kbar.js.map +1 -1
- package/dist/package.json +17 -6
- package/dist/styles/size.scss +20 -0
- 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/package.json +35 -13
- package/tsconfig.vitest.json +20 -0
- package/vitest.config.ts +19 -0
package/dist/components/Input.js
CHANGED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useState, useEffect, forwardRef, useCallback, } from "react";
|
|
4
4
|
import classNames from "classnames";
|
|
5
|
-
import { Column, Row, Text } from ".";
|
|
5
|
+
import { Column, Row, Text, Spinner } from ".";
|
|
6
6
|
import styles from "./Input.module.scss";
|
|
7
7
|
import { useDebounce } from "../hooks/useDebounce";
|
|
8
|
-
const Input = forwardRef(({ id, label, placeholder, height = "m", error = false, errorMessage, description, radius, className, style, hasPrefix, hasSuffix, characterCount, children, onFocus, onBlur, validate, cursor, ...props }, ref) => {
|
|
8
|
+
const Input = forwardRef(({ id, label, placeholder, height = "m", error = false, errorMessage, description, radius, className, style, hasPrefix, hasSuffix, variant = "default", characterCount, loading = false, children, onFocus, onBlur, validate, cursor, ...props }, ref) => {
|
|
9
9
|
const [isFocused, setIsFocused] = useState(false);
|
|
10
10
|
const [isFilled, setIsFilled] = useState(!!props.value);
|
|
11
11
|
const [validationError, setValidationError] = useState(null);
|
|
@@ -51,7 +51,14 @@ const Input = forwardRef(({ id, label, placeholder, height = "m", error = false,
|
|
|
51
51
|
validateInput();
|
|
52
52
|
}, [debouncedValue, validateInput]);
|
|
53
53
|
const displayError = validationError || errorMessage;
|
|
54
|
-
const
|
|
54
|
+
const fontSizeMap = {
|
|
55
|
+
xs: "font-xs",
|
|
56
|
+
s: "font-s",
|
|
57
|
+
m: "font-m",
|
|
58
|
+
l: "font-l",
|
|
59
|
+
xl: "font-xl",
|
|
60
|
+
};
|
|
61
|
+
const inputClassNames = classNames(styles.input, "font-body", "font-default", fontSizeMap[height], cursor === "interactive" ? "cursor-interactive" : undefined, {
|
|
55
62
|
[styles.filled]: isFilled,
|
|
56
63
|
[styles.focused]: isFocused,
|
|
57
64
|
[styles.withPrefix]: hasPrefix,
|
|
@@ -62,17 +69,23 @@ const Input = forwardRef(({ id, label, placeholder, height = "m", error = false,
|
|
|
62
69
|
});
|
|
63
70
|
return (_jsxs(Column, { gap: "8", style: style, fillWidth: true, fitHeight: true, className: classNames(className, {
|
|
64
71
|
[styles.error]: (error || (displayError && debouncedValue !== "")) && props.value !== "",
|
|
65
|
-
}), children: [_jsxs(Row, { transition: "micro-medium", border: "neutral-medium", background: "neutral-alpha-weak", overflow: "hidden", vertical: "stretch", className: classNames(styles.base, {
|
|
72
|
+
}), children: [_jsxs(Row, { transition: "micro-medium", border: variant === "ghost" ? "transparent" : "neutral-medium", background: variant === "ghost" ? "transparent" : "neutral-alpha-weak", overflow: "hidden", vertical: "stretch", className: classNames(styles.base, {
|
|
73
|
+
[styles.xs]: height === "xs",
|
|
74
|
+
}, {
|
|
66
75
|
[styles.s]: height === "s",
|
|
67
76
|
}, {
|
|
68
77
|
[styles.m]: height === "m",
|
|
78
|
+
}, {
|
|
79
|
+
[styles.l]: height === "l",
|
|
80
|
+
}, {
|
|
81
|
+
[styles.xl]: height === "xl",
|
|
69
82
|
}, radius === "none" ? "radius-none" : radius ? `radius-l-${radius}` : "radius-l"), children: [hasPrefix && (_jsx(Row, { paddingLeft: "12", className: styles.prefix, position: "static", children: hasPrefix })), _jsxs(Column, { fillWidth: true, children: [_jsx("input", { ...props, ref: ref, id: id, placeholder: placeholder, onFocus: handleFocus, onBlur: handleBlur, className: inputClassNames, "aria-describedby": displayError ? `${id}-error` : undefined, "aria-invalid": !!displayError }), label && (_jsx(Text, { as: "label", variant: "label-default-m", htmlFor: id, className: classNames(styles.label, styles.inputLabel, {
|
|
70
83
|
[styles.floating]: isFocused || isFilled || placeholder,
|
|
71
84
|
}), children: label })), children] }), characterCount && props.maxLength && (_jsx(Row, { paddingRight: "12", className: styles.suffix, position: "static", children: _jsx(Text, { variant: "label-default-s", onBackground: props.maxLength - String(props.value || '').length <= 5
|
|
72
85
|
? "danger-weak"
|
|
73
86
|
: props.maxLength - String(props.value || '').length <= 10
|
|
74
87
|
? "warning-weak"
|
|
75
|
-
: "neutral-weak", children: props.maxLength - String(props.value || '').length }) })), hasSuffix && (_jsx(Row, { paddingRight: "12", className: styles.suffix, position: "static", children: hasSuffix }))] }), displayError && errorMessage !== false && (_jsx(Row, { paddingX: "16", id: `${id}-error`, textVariant: "body-default-s", onBackground: "danger-weak", children: validationError || errorMessage })), description && (_jsx(Row, { paddingX: "16", id: `${id}-description`, textVariant: "body-default-s", onBackground: "neutral-weak", children: description }))] }));
|
|
88
|
+
: "neutral-weak", children: props.maxLength - String(props.value || '').length }) })), loading && (_jsx(Row, { paddingRight: "12", className: styles.suffix, position: "static", children: _jsx(Spinner, { size: "s" }) })), hasSuffix && !loading && (_jsx(Row, { paddingRight: "12", className: styles.suffix, position: "static", children: hasSuffix }))] }), displayError && errorMessage !== false && (_jsx(Row, { paddingX: "16", id: `${id}-error`, textVariant: "body-default-s", onBackground: "danger-weak", children: validationError || errorMessage })), description && (_jsx(Row, { paddingX: "16", id: `${id}-description`, textVariant: "body-default-s", onBackground: "neutral-weak", children: description }))] }));
|
|
76
89
|
});
|
|
77
90
|
Input.displayName = "Input";
|
|
78
91
|
export { Input };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EACZ,QAAQ,EACR,SAAS,EACT,UAAU,EAEV,WAAW,GAEZ,MAAM,OAAO,CAAC;AACf,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"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"}
|
|
@@ -51,10 +51,22 @@
|
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
.textareaLabel {
|
|
54
|
-
top: var(--static-space-
|
|
54
|
+
top: var(--static-space-12);
|
|
55
|
+
}
|
|
55
56
|
|
|
56
|
-
|
|
57
|
-
|
|
57
|
+
.xs {
|
|
58
|
+
min-height: var(--static-space-40);
|
|
59
|
+
|
|
60
|
+
.label {
|
|
61
|
+
&.floating {
|
|
62
|
+
top: calc(var(--static-space-4) - var(--static-space-1));
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.inputLabel {
|
|
67
|
+
&.floating {
|
|
68
|
+
transform: scale(0.6);
|
|
69
|
+
}
|
|
58
70
|
}
|
|
59
71
|
}
|
|
60
72
|
|
|
@@ -69,6 +81,8 @@
|
|
|
69
81
|
}
|
|
70
82
|
|
|
71
83
|
.m {
|
|
84
|
+
min-height: var(--static-space-56);
|
|
85
|
+
|
|
72
86
|
.label {
|
|
73
87
|
&.floating {
|
|
74
88
|
top: calc(var(--static-space-8) - var(--static-space-2));
|
|
@@ -76,6 +90,26 @@
|
|
|
76
90
|
}
|
|
77
91
|
}
|
|
78
92
|
|
|
93
|
+
.l {
|
|
94
|
+
min-height: var(--static-space-64);
|
|
95
|
+
|
|
96
|
+
.label {
|
|
97
|
+
&.floating {
|
|
98
|
+
top: calc(var(--static-space-8) - var(--static-space-2));
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.xl {
|
|
104
|
+
min-height: var(--static-space-72);
|
|
105
|
+
|
|
106
|
+
.label {
|
|
107
|
+
&.floating {
|
|
108
|
+
top: calc(var(--static-space-12) - var(--static-space-2));
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
79
113
|
.input {
|
|
80
114
|
width: 100%;
|
|
81
115
|
height: 100%;
|
|
@@ -84,6 +118,7 @@
|
|
|
84
118
|
color: var(--neutral-on-background-strong);
|
|
85
119
|
padding: 0 var(--static-space-16);
|
|
86
120
|
outline: none;
|
|
121
|
+
border-radius: var(--radius-8);
|
|
87
122
|
|
|
88
123
|
&.placeholder {
|
|
89
124
|
padding-top: 0;
|
|
@@ -9,11 +9,15 @@ export interface MediaProps extends React.ComponentProps<typeof Flex> {
|
|
|
9
9
|
enlarge?: boolean;
|
|
10
10
|
src: string;
|
|
11
11
|
unoptimized?: boolean;
|
|
12
|
-
sizes?: string;
|
|
12
|
+
sizes?: string | number;
|
|
13
13
|
priority?: boolean;
|
|
14
14
|
caption?: ReactNode;
|
|
15
15
|
fill?: boolean;
|
|
16
16
|
fillWidth?: boolean;
|
|
17
|
+
loop?: boolean;
|
|
18
|
+
autoplay?: boolean;
|
|
19
|
+
sound?: boolean;
|
|
20
|
+
controls?: boolean;
|
|
17
21
|
style?: CSSProperties;
|
|
18
22
|
className?: string;
|
|
19
23
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Media.d.ts","sourceRoot":"","sources":["../../src/components/Media.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,aAAa,EAA+B,SAAS,EAAE,MAAM,OAAO,CAAC;AACrF,OAAO,EAAU,IAAI,EAAiB,MAAM,GAAG,CAAC;AAIhD,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"Media.d.ts","sourceRoot":"","sources":["../../src/components/Media.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,aAAa,EAA+B,SAAS,EAAE,MAAM,OAAO,CAAC;AACrF,OAAO,EAAU,IAAI,EAAiB,MAAM,GAAG,CAAC;AAIhD,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAyO/B,CAAC;AAGF,OAAO,EAAE,KAAK,EAAE,CAAC"}
|
package/dist/components/Media.js
CHANGED
|
@@ -4,7 +4,7 @@ import { useState, useRef, useEffect } from "react";
|
|
|
4
4
|
import { Column, Flex, Row, Skeleton } from ".";
|
|
5
5
|
import Image from "next/image";
|
|
6
6
|
import classNames from "classnames";
|
|
7
|
-
const Media = ({ src, alt = "", fillWidth = true, fill = false, loading = false, enlarge = false, unoptimized = false, objectFit = "cover", sizes = "100vw", aspectRatio = "original", height, priority, caption, style, className, ...rest }) => {
|
|
7
|
+
const Media = ({ src, alt = "", fillWidth = true, fill = false, loading = false, enlarge = false, unoptimized = false, objectFit = "cover", sizes = "100vw", aspectRatio = "original", height, priority, caption, loop = true, autoplay = true, sound = false, controls = false, style, className, ...rest }) => {
|
|
8
8
|
const [isEnlarged, setIsEnlarged] = useState(false);
|
|
9
9
|
const imageRef = useRef(null);
|
|
10
10
|
const handleImageClick = () => {
|
|
@@ -74,12 +74,25 @@ const Media = ({ src, alt = "", fillWidth = true, fill = false, loading = false,
|
|
|
74
74
|
};
|
|
75
75
|
const getYouTubeEmbedUrl = (url) => {
|
|
76
76
|
const match = url.match(/(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
77
|
+
if (!match)
|
|
78
|
+
return "";
|
|
79
|
+
const id = match[1];
|
|
80
|
+
let embedUrl = `https://www.youtube.com/embed/${id}?rel=0&modestbranding=1`;
|
|
81
|
+
if (!controls)
|
|
82
|
+
embedUrl += "&controls=0";
|
|
83
|
+
if (autoplay)
|
|
84
|
+
embedUrl += "&autoplay=1";
|
|
85
|
+
if (!sound)
|
|
86
|
+
embedUrl += "&mute=1";
|
|
87
|
+
if (loop)
|
|
88
|
+
embedUrl += `&loop=1&playlist=${id}`;
|
|
89
|
+
return embedUrl;
|
|
80
90
|
};
|
|
81
91
|
const isVideo = src?.endsWith(".mp4");
|
|
82
92
|
const isYouTube = isYouTubeVideo(src);
|
|
93
|
+
const resolvedSizes = typeof sizes === "number"
|
|
94
|
+
? `(max-width: ${sizes}px) 100vw, ${sizes}px`
|
|
95
|
+
: sizes;
|
|
83
96
|
return (_jsxs(_Fragment, { children: [isEnlarged && enlarge && typeof document !== 'undefined' && (_jsx(Flex, { center: true, position: "fixed", background: "overlay", pointerEvents: "auto", onClick: handleOverlayClick, top: "0", left: "0", zIndex: 9, opacity: 100, cursor: "interactive", transition: "macro-medium", className: "cursor-interactive", style: {
|
|
84
97
|
backdropFilter: "blur(0.5rem)",
|
|
85
98
|
width: "100vw",
|
|
@@ -92,13 +105,13 @@ const Media = ({ src, alt = "", fillWidth = true, fill = false, loading = false,
|
|
|
92
105
|
borderRadius: isEnlarged ? "0" : undefined,
|
|
93
106
|
...calculateTransform(),
|
|
94
107
|
...style,
|
|
95
|
-
}, onClick: handleImageClick, className: classNames(enlarge && !isEnlarged ? "cursor-zoom-in" : enlarge && isEnlarged ? "cursor-zoom-out" : undefined, className), ...rest, children: [loading && _jsx(Skeleton, { shape: "block", radius: rest.radius }), !loading && isVideo && (_jsx("video", { src: src, autoPlay:
|
|
108
|
+
}, onClick: handleImageClick, className: classNames(enlarge && !isEnlarged ? "cursor-zoom-in" : enlarge && isEnlarged ? "cursor-zoom-out" : undefined, className), ...rest, children: [loading && _jsx(Skeleton, { shape: "block", radius: rest.radius }), !loading && isVideo && (_jsx("video", { src: src, autoPlay: autoplay, loop: loop, muted: !sound, playsInline: true, style: {
|
|
96
109
|
width: "100%",
|
|
97
110
|
height: "100%",
|
|
98
111
|
objectFit: objectFit,
|
|
99
|
-
} })), !loading && isYouTube && (_jsx("iframe", { width: "100%", height: "100%", src: getYouTubeEmbedUrl(src), frameBorder: "0", allow: "accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, style: {
|
|
112
|
+
} })), !loading && isYouTube && (_jsx("iframe", { width: "100%", height: "100%", src: getYouTubeEmbedUrl(src), frameBorder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, style: {
|
|
100
113
|
objectFit: objectFit,
|
|
101
|
-
} })), !loading && !isVideo && !isYouTube && (_jsx(Image, { src: src, alt: alt, sizes: isEnlarged ? "100vw" :
|
|
114
|
+
} })), !loading && !isVideo && !isYouTube && (_jsx(Image, { src: src, alt: alt, sizes: isEnlarged ? "100vw" : resolvedSizes, priority: priority, unoptimized: unoptimized, fill: fill || !aspectRatio, width: fill ? undefined : 0, height: fill ? undefined : 0, style: {
|
|
102
115
|
objectFit: objectFit,
|
|
103
116
|
aspectRatio: fill ? undefined : aspectRatio,
|
|
104
117
|
width: aspectRatio ? "100%" : undefined,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Media.js","sourceRoot":"","sources":["../../src/components/Media.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAiB,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AACrF,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC;AAChD,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"Media.js","sourceRoot":"","sources":["../../src/components/Media.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export interface ModalProps {
|
|
3
|
+
children: React.ReactNode;
|
|
4
|
+
backdrop?: React.ReactNode;
|
|
5
|
+
title: React.ReactNode;
|
|
6
|
+
isOpen: boolean;
|
|
7
|
+
onClose: () => void;
|
|
8
|
+
}
|
|
9
|
+
declare const Modal: React.FC<ModalProps>;
|
|
10
|
+
export { Modal };
|
|
11
|
+
//# sourceMappingURL=Modal.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA4G/B,CAAC;AAGF,OAAO,EAAE,KAAK,EAAE,CAAC"}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
+
import { useEffect, useState, useRef } from "react";
|
|
4
|
+
import ReactDOM from "react-dom";
|
|
5
|
+
import { Column, Heading, IconButton, Row, ScrollLock } from ".";
|
|
6
|
+
const Modal = ({ children, backdrop, title, isOpen, onClose }) => {
|
|
7
|
+
const [visible, setVisible] = useState(false);
|
|
8
|
+
const [mounted, setMounted] = useState(false);
|
|
9
|
+
const contentRef = useRef(null);
|
|
10
|
+
const dialogRef = useRef(null);
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
if (isOpen) {
|
|
13
|
+
setMounted(true);
|
|
14
|
+
requestAnimationFrame(() => {
|
|
15
|
+
requestAnimationFrame(() => {
|
|
16
|
+
setVisible(true);
|
|
17
|
+
});
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
else {
|
|
21
|
+
setVisible(false);
|
|
22
|
+
const timeout = setTimeout(() => setMounted(false), 300);
|
|
23
|
+
return () => clearTimeout(timeout);
|
|
24
|
+
}
|
|
25
|
+
}, [isOpen]);
|
|
26
|
+
useEffect(() => {
|
|
27
|
+
if (!isOpen)
|
|
28
|
+
return;
|
|
29
|
+
const handleKeyDown = (e) => {
|
|
30
|
+
if (e.key === "Escape") {
|
|
31
|
+
onClose();
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
document.addEventListener("keydown", handleKeyDown);
|
|
35
|
+
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
36
|
+
}, [isOpen, onClose]);
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
if (!isOpen)
|
|
39
|
+
return;
|
|
40
|
+
const handleClickOutside = (e) => {
|
|
41
|
+
if (dialogRef.current && !dialogRef.current.contains(e.target)) {
|
|
42
|
+
onClose();
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
const timeoutId = setTimeout(() => {
|
|
46
|
+
document.addEventListener("mousedown", handleClickOutside, { capture: true });
|
|
47
|
+
}, 10);
|
|
48
|
+
return () => {
|
|
49
|
+
clearTimeout(timeoutId);
|
|
50
|
+
document.removeEventListener("mousedown", handleClickOutside, { capture: true });
|
|
51
|
+
};
|
|
52
|
+
}, [isOpen, onClose]);
|
|
53
|
+
useEffect(() => {
|
|
54
|
+
if (isOpen && contentRef.current) {
|
|
55
|
+
contentRef.current.scrollTop = 0;
|
|
56
|
+
}
|
|
57
|
+
}, [isOpen, children]);
|
|
58
|
+
if (!mounted)
|
|
59
|
+
return null;
|
|
60
|
+
return ReactDOM.createPortal(_jsxs(_Fragment, { children: [_jsx(ScrollLock, { enabled: isOpen, allowScrollInElement: contentRef }), _jsxs(Row, { fill: true, horizontal: "center", paddingX: "l", paddingTop: "xl", position: "fixed", background: "overlay", zIndex: 10, style: {
|
|
61
|
+
backdropFilter: "blur(0.5rem)",
|
|
62
|
+
opacity: visible ? 1 : 0,
|
|
63
|
+
transition: "opacity 300ms ease",
|
|
64
|
+
inset: 0,
|
|
65
|
+
}, role: "dialog", "aria-modal": "true", children: [backdrop, _jsx(Column, { ref: dialogRef, maxWidth: 52, fillHeight: true, background: "page", topRadius: "xl", paddingX: "8", borderX: true, borderTop: true, style: {
|
|
66
|
+
transform: visible ? "translateY(0)" : "translateY(4rem)",
|
|
67
|
+
transition: "transform 600ms ease",
|
|
68
|
+
}, children: _jsxs(Column, { ref: contentRef, fill: true, overflowY: "auto", padding: "l", tabIndex: -1, children: [_jsx(Row, { position: "absolute", right: "0", top: "0", paddingTop: "l", paddingRight: "l", zIndex: 2, children: _jsx(IconButton, { icon: "close", onClick: onClose, tooltip: "Close", tooltipPosition: "left", variant: "secondary" }) }), _jsx(Heading, { as: "h2", variant: "display-default-xs", children: title }), children] }) })] })] }), document.body);
|
|
69
|
+
};
|
|
70
|
+
Modal.displayName = "Modal";
|
|
71
|
+
export { Modal };
|
|
72
|
+
//# sourceMappingURL=Modal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../src/components/NumberInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,KAAK,EAA4B,MAAM,GAAG,CAAC;AAIpD,UAAU,gBACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,QAAA,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../src/components/NumberInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,KAAK,EAA4B,MAAM,GAAG,CAAC;AAIpD,UAAU,gBACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,QAAA,MAAM,WAAW,wGAuGhB,CAAC;AAGF,OAAO,EAAE,WAAW,EAAE,CAAC"}
|
|
@@ -37,7 +37,7 @@ const NumberInput = forwardRef(({ value, onChange, min, max, step = 1, padStart,
|
|
|
37
37
|
updateValue(newValue);
|
|
38
38
|
}
|
|
39
39
|
};
|
|
40
|
-
return (_jsx(Input, { ...props, ref: ref, type: "number", value: localValue, onChange: handleChange, min: min, max: max, step: step, hasSuffix: _jsxs(_Fragment, { children: [_jsx(Flex, { position: "static", minWidth: 1.25 }), _jsxs(Column, { position: "absolute", right: "0", top: "0", borderLeft: "neutral-medium", fillHeight: true, background: "neutral-alpha-weak", children: [_jsx(Flex, { fillHeight: true, position: "static", borderBottom: "neutral-medium", paddingX: "4", className: classNames(styles.stepper
|
|
40
|
+
return (_jsx(Input, { ...props, ref: ref, type: "number", value: localValue, onChange: handleChange, min: min, max: max, step: step, hasSuffix: _jsxs(_Fragment, { children: [_jsx(Flex, { position: "static", minWidth: 1.25 }), _jsxs(Column, { position: "absolute", right: "0", top: "0", borderLeft: "neutral-medium", fillHeight: true, background: "neutral-alpha-weak", children: [_jsx(Flex, { fillHeight: true, position: "static", borderBottom: "neutral-medium", transition: "micro-medium", vertical: "center", paddingX: "4", className: classNames(styles.stepper), children: _jsx(IconButton, { icon: "chevronUp", variant: "ghost", size: "s", onClick: increment, "aria-label": "Increment value" }) }), _jsx(Flex, { fillHeight: true, position: "static", vertical: "center", transition: "micro-medium", paddingX: "4", className: classNames(styles.stepper), children: _jsx(IconButton, { icon: "chevronDown", variant: "ghost", size: "s", onClick: decrement, "aria-label": "Decrement value" }) })] })] }), className: styles.numberInput }));
|
|
41
41
|
});
|
|
42
42
|
NumberInput.displayName = "NumberInput";
|
|
43
43
|
export { NumberInput };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../src/components/NumberInput.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../src/components/NumberInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Row } from ".";
|
|
3
|
+
export interface ScrollContainerProps extends React.ComponentProps<typeof Row> {
|
|
4
|
+
items: React.ReactNode[];
|
|
5
|
+
controlPlacement?: "top-start" | "top-center" | "top-end" | "top-between" | "bottom-start" | "bottom-center" | "bottom-end" | "bottom-between";
|
|
6
|
+
}
|
|
7
|
+
declare const ScrollContainer: React.FC<ScrollContainerProps>;
|
|
8
|
+
export { ScrollContainer };
|
|
9
|
+
//# sourceMappingURL=ScrollContainer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScrollContainer.d.ts","sourceRoot":"","sources":["../../src/components/ScrollContainer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,EAAU,GAAG,EAAc,MAAM,GAAG,CAAC;AAE5C,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC;IAC5E,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IACzB,gBAAgB,CAAC,EAAE,WAAW,GAAG,YAAY,GAAG,SAAS,GAAG,aAAa,GAAG,cAAc,GAAG,eAAe,GAAG,YAAY,GAAG,gBAAgB,CAAC;CAChJ;AAUD,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAgGnD,CAAC;AAGF,OAAO,EAAE,eAAe,EAAE,CAAC"}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useRef, useState, useEffect, useCallback } from "react";
|
|
4
|
+
import { Column, Row, IconButton } from ".";
|
|
5
|
+
const getHorizontalAlignment = (placement) => {
|
|
6
|
+
if (placement === "top-start" || placement === "bottom-start")
|
|
7
|
+
return "start";
|
|
8
|
+
if (placement === "top-end" || placement === "bottom-end")
|
|
9
|
+
return "end";
|
|
10
|
+
if (placement === "top-center" || placement === "bottom-center")
|
|
11
|
+
return "center";
|
|
12
|
+
if (placement === "top-between" || placement === "bottom-between")
|
|
13
|
+
return "between";
|
|
14
|
+
return "start";
|
|
15
|
+
};
|
|
16
|
+
const ScrollContainer = ({ items, controlPlacement = "top-start", ...flex }) => {
|
|
17
|
+
const scrollRef = useRef(null);
|
|
18
|
+
const [canScrollLeft, setCanScrollLeft] = useState(false);
|
|
19
|
+
const [canScrollRight, setCanScrollRight] = useState(true);
|
|
20
|
+
const checkScrollPosition = useCallback(() => {
|
|
21
|
+
const element = scrollRef.current;
|
|
22
|
+
if (!element)
|
|
23
|
+
return;
|
|
24
|
+
const { scrollLeft, scrollWidth, clientWidth } = element;
|
|
25
|
+
setCanScrollLeft(scrollLeft > 0);
|
|
26
|
+
setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 1);
|
|
27
|
+
}, []);
|
|
28
|
+
useEffect(() => {
|
|
29
|
+
const element = scrollRef.current;
|
|
30
|
+
if (!element)
|
|
31
|
+
return;
|
|
32
|
+
checkScrollPosition();
|
|
33
|
+
element.addEventListener("scroll", checkScrollPosition);
|
|
34
|
+
window.addEventListener("resize", checkScrollPosition);
|
|
35
|
+
return () => {
|
|
36
|
+
element.removeEventListener("scroll", checkScrollPosition);
|
|
37
|
+
window.removeEventListener("resize", checkScrollPosition);
|
|
38
|
+
};
|
|
39
|
+
}, [checkScrollPosition]);
|
|
40
|
+
const scroll = (direction) => {
|
|
41
|
+
const element = scrollRef.current;
|
|
42
|
+
if (!element)
|
|
43
|
+
return;
|
|
44
|
+
const firstChild = element.firstElementChild;
|
|
45
|
+
if (!firstChild)
|
|
46
|
+
return;
|
|
47
|
+
const gap = parseFloat(getComputedStyle(element).gap) || 0;
|
|
48
|
+
const tileWidth = firstChild.offsetWidth + gap;
|
|
49
|
+
const targetScroll = element.scrollLeft + (direction === "right" ? tileWidth : -tileWidth);
|
|
50
|
+
element.scrollTo({
|
|
51
|
+
left: targetScroll,
|
|
52
|
+
behavior: "smooth",
|
|
53
|
+
});
|
|
54
|
+
};
|
|
55
|
+
const isTopPlacement = controlPlacement.startsWith("top");
|
|
56
|
+
const horizontalAlignment = getHorizontalAlignment(controlPlacement);
|
|
57
|
+
return (_jsxs(Column, { fillWidth: true, gap: "8", direction: isTopPlacement ? "column" : "column-reverse", children: [_jsxs(Row, { fillWidth: true, gap: "8", paddingX: "24", horizontal: horizontalAlignment, children: [_jsx(IconButton, { icon: "chevronLeft", onClick: () => scroll("left"), disabled: !canScrollLeft, style: { border: "none" } }), _jsx(IconButton, { icon: "chevronRight", onClick: () => scroll("right"), disabled: !canScrollRight, style: { border: "none" } })] }), _jsx(Row, { ref: scrollRef, gap: "8", overflowX: "auto", style: {
|
|
58
|
+
scrollSnapType: "x mandatory",
|
|
59
|
+
scrollbarWidth: "none",
|
|
60
|
+
}, children: items.map((item, index) => (_jsx(Column, { maxWidth: 48, minWidth: 28, border: true, radius: "xl", overflow: "hidden", gap: "8", aspectRatio: "3/4", style: {
|
|
61
|
+
scrollSnapAlign: "start",
|
|
62
|
+
flexShrink: 0,
|
|
63
|
+
}, ...flex, children: item }, index))) })] }));
|
|
64
|
+
};
|
|
65
|
+
ScrollContainer.displayName = "ScrollContainer";
|
|
66
|
+
export { ScrollContainer };
|
|
67
|
+
//# sourceMappingURL=ScrollContainer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScrollContainer.js","sourceRoot":"","sources":["../../src/components/ScrollContainer.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollLock.d.ts","sourceRoot":"","sources":["../../src/components/ScrollLock.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA2B,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ScrollLock.d.ts","sourceRoot":"","sources":["../../src/components/ScrollLock.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA2B,SAAS,EAAE,MAAM,OAAO,CAAC;AAM3D,UAAU,eAAe;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,oBAAoB,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CACtD;AAED,eAAO,MAAM,UAAU,GAAI,mCAAmC,eAAe,SAyB5E,CAAC"}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { useLayoutEffect, useRef } from "react";
|
|
3
|
+
import { acquireScrollLock, releaseScrollLock, } from "../internal/scrollLockState";
|
|
3
4
|
export const ScrollLock = ({ enabled, allowScrollInElement }) => {
|
|
4
5
|
const scrollPositionRef = useRef({ x: 0, y: 0 });
|
|
6
|
+
const lockIdRef = useRef(Symbol("scroll-lock"));
|
|
5
7
|
useLayoutEffect(() => {
|
|
6
8
|
if (!enabled)
|
|
7
9
|
return;
|
|
@@ -9,102 +11,13 @@ export const ScrollLock = ({ enabled, allowScrollInElement }) => {
|
|
|
9
11
|
const scrollX = window.scrollX;
|
|
10
12
|
const scrollY = window.scrollY;
|
|
11
13
|
scrollPositionRef.current = { x: scrollX, y: scrollY };
|
|
14
|
+
acquireScrollLock(lockIdRef.current, allowScrollInElement);
|
|
12
15
|
// Restore scroll position after a microtask to catch any scroll that happens during mount
|
|
13
16
|
queueMicrotask(() => {
|
|
14
17
|
window.scrollTo(scrollX, scrollY);
|
|
15
18
|
});
|
|
16
|
-
// Check if an element can scroll in a given direction
|
|
17
|
-
const canScroll = (el, deltaY) => {
|
|
18
|
-
const style = window.getComputedStyle(el);
|
|
19
|
-
const overflowY = style.overflowY;
|
|
20
|
-
// Element must have scrollable overflow
|
|
21
|
-
if (overflowY !== 'auto' && overflowY !== 'scroll') {
|
|
22
|
-
return false;
|
|
23
|
-
}
|
|
24
|
-
const { scrollTop, scrollHeight, clientHeight } = el;
|
|
25
|
-
const hasOverflow = scrollHeight > clientHeight;
|
|
26
|
-
if (!hasOverflow)
|
|
27
|
-
return false;
|
|
28
|
-
// Check if we can scroll in the direction of the wheel
|
|
29
|
-
if (deltaY > 0) {
|
|
30
|
-
// Scrolling down - can we scroll more?
|
|
31
|
-
return scrollTop + clientHeight < scrollHeight;
|
|
32
|
-
}
|
|
33
|
-
else {
|
|
34
|
-
// Scrolling up - are we not at the top?
|
|
35
|
-
return scrollTop > 0;
|
|
36
|
-
}
|
|
37
|
-
};
|
|
38
|
-
// Find the scrollable parent of a target element within the allowed container
|
|
39
|
-
const findScrollableParent = (target, container, deltaY) => {
|
|
40
|
-
let current = target;
|
|
41
|
-
while (current && container.contains(current)) {
|
|
42
|
-
if (canScroll(current, deltaY)) {
|
|
43
|
-
return current;
|
|
44
|
-
}
|
|
45
|
-
current = current.parentElement;
|
|
46
|
-
}
|
|
47
|
-
// Check the container itself
|
|
48
|
-
if (canScroll(container, deltaY)) {
|
|
49
|
-
return container;
|
|
50
|
-
}
|
|
51
|
-
return null;
|
|
52
|
-
};
|
|
53
|
-
// Prevent wheel scroll
|
|
54
|
-
const preventWheel = (e) => {
|
|
55
|
-
// Allow scroll if it's inside the allowed element AND that element can scroll
|
|
56
|
-
if (allowScrollInElement?.current) {
|
|
57
|
-
const target = e.target;
|
|
58
|
-
if (allowScrollInElement.current.contains(target)) {
|
|
59
|
-
const scrollable = findScrollableParent(target, allowScrollInElement.current, e.deltaY);
|
|
60
|
-
if (scrollable) {
|
|
61
|
-
return; // Allow scroll within the scrollable element
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
e.preventDefault();
|
|
66
|
-
};
|
|
67
|
-
// Prevent touch scroll
|
|
68
|
-
let touchStartY = 0;
|
|
69
|
-
const handleTouchStart = (e) => {
|
|
70
|
-
touchStartY = e.touches[0].clientY;
|
|
71
|
-
};
|
|
72
|
-
const preventTouch = (e) => {
|
|
73
|
-
if (allowScrollInElement?.current) {
|
|
74
|
-
const target = e.target;
|
|
75
|
-
if (allowScrollInElement.current.contains(target)) {
|
|
76
|
-
const deltaY = touchStartY - e.touches[0].clientY;
|
|
77
|
-
const scrollable = findScrollableParent(target, allowScrollInElement.current, deltaY);
|
|
78
|
-
if (scrollable) {
|
|
79
|
-
return;
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
e.preventDefault();
|
|
84
|
-
};
|
|
85
|
-
// Prevent keyboard scrolling
|
|
86
|
-
const preventKeyScroll = (e) => {
|
|
87
|
-
const scrollKeys = ["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " "];
|
|
88
|
-
if (scrollKeys.includes(e.key)) {
|
|
89
|
-
if (allowScrollInElement?.current) {
|
|
90
|
-
const target = e.target;
|
|
91
|
-
if (allowScrollInElement.current.contains(target)) {
|
|
92
|
-
return;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
e.preventDefault();
|
|
96
|
-
}
|
|
97
|
-
};
|
|
98
|
-
// Use capture phase to intercept events before they reach targets
|
|
99
|
-
window.addEventListener("wheel", preventWheel, { passive: false, capture: true });
|
|
100
|
-
window.addEventListener("touchstart", handleTouchStart, { passive: true, capture: true });
|
|
101
|
-
window.addEventListener("touchmove", preventTouch, { passive: false, capture: true });
|
|
102
|
-
window.addEventListener("keydown", preventKeyScroll, { capture: true });
|
|
103
19
|
return () => {
|
|
104
|
-
|
|
105
|
-
window.removeEventListener("touchstart", handleTouchStart, { capture: true });
|
|
106
|
-
window.removeEventListener("touchmove", preventTouch, { capture: true });
|
|
107
|
-
window.removeEventListener("keydown", preventKeyScroll, { capture: true });
|
|
20
|
+
releaseScrollLock(lockIdRef.current);
|
|
108
21
|
};
|
|
109
22
|
}, [enabled, allowScrollInElement]);
|
|
110
23
|
return null;
|