@heliosgraphics/ui 2.0.0-alpha.72 → 2.0.0-alpha.74
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Dialog/Dialog.module.css +1 -8
- package/components/Dropdown/Dropdown.meta.ts +0 -5
- package/components/Dropdown/Dropdown.tsx +15 -7
- package/components/Dropdown/Dropdown.types.ts +0 -1
- package/components/Input/Input.tsx +1 -1
- package/components/Shimmer/Shimmer.tsx +1 -1
- package/components/Toggle/Toggle.module.css +4 -0
- package/css/core.colors.css +2 -2
- package/css/feat.atomics.css +21 -13
- package/css/feat.responsive.css +30 -6
- package/package.json +12 -12
- package/types/scale.ts +1 -0
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
width: 580px;
|
|
10
10
|
|
|
11
11
|
border: 0;
|
|
12
|
-
border-radius: var(--radius-lg);
|
|
12
|
+
border-radius: var(--radius-lg) 0 0 var(--radius-lg);
|
|
13
13
|
touch-action: pan-y;
|
|
14
14
|
transform: translateX(-50%);
|
|
15
15
|
}
|
|
@@ -29,11 +29,6 @@
|
|
|
29
29
|
transform: translateX(-50%) translateY(-50%);
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
.dialog::-webkit-scrollbar {
|
|
33
|
-
height: 8px;
|
|
34
|
-
width: 8px;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
32
|
.dialog__content {
|
|
38
33
|
position: relative;
|
|
39
34
|
z-index: var(--z-index-1);
|
|
@@ -60,8 +55,6 @@
|
|
|
60
55
|
|
|
61
56
|
@media (max-width: 576px) {
|
|
62
57
|
.dialog:not(.dialogCentered) {
|
|
63
|
-
margin-left: 8px;
|
|
64
|
-
margin-right: 8px;
|
|
65
58
|
width: calc(100% - 16px);
|
|
66
59
|
}
|
|
67
60
|
|
|
@@ -17,11 +17,6 @@ export const meta: HeliosAttributeMeta<DropdownProps> = {
|
|
|
17
17
|
items: {
|
|
18
18
|
type: "Array<ResultItem>",
|
|
19
19
|
},
|
|
20
|
-
isHidden: {
|
|
21
|
-
type: "boolean",
|
|
22
|
-
description: "Change this boolean value to conditionally hide a visible Dropdown.",
|
|
23
|
-
isOptional: true,
|
|
24
|
-
},
|
|
25
20
|
isDisabled: {
|
|
26
21
|
type: "boolean",
|
|
27
22
|
description: "Dropdown won't be triggered on click.",
|
|
@@ -10,18 +10,14 @@ import type { DropdownProps } from "./Dropdown.types"
|
|
|
10
10
|
import type { HeliosIconType } from "../../types/icons"
|
|
11
11
|
|
|
12
12
|
// NOTE @03b8 instead of passing ref, should use https://www.w3.org/TR/css-anchor-position-1/ when ready
|
|
13
|
-
export const Dropdown: FC<DropdownProps> = ({
|
|
13
|
+
export const Dropdown: FC<DropdownProps> = ({ children, items, isDisabled, position = "bottom-left" }) => {
|
|
14
14
|
const hoverStateRef = useRef<boolean>(false)
|
|
15
15
|
const resultListRef = useRef<HTMLOListElement | null>(null)
|
|
16
16
|
|
|
17
|
-
const [isVisible, setVisible] = useState<boolean>(
|
|
17
|
+
const [isVisible, setVisible] = useState<boolean>(false)
|
|
18
18
|
const [isHovering, setHovering] = useState<boolean>(false)
|
|
19
19
|
const [navHeight, setNavHeight] = useState<number>(0)
|
|
20
20
|
|
|
21
|
-
useEffect(() => {
|
|
22
|
-
setVisible(false)
|
|
23
|
-
}, [isHidden])
|
|
24
|
-
|
|
25
21
|
useEffect(() => {
|
|
26
22
|
if (resultListRef?.current) {
|
|
27
23
|
setNavHeight(resultListRef?.current?.offsetHeight ?? 0)
|
|
@@ -66,6 +62,18 @@ export const Dropdown: FC<DropdownProps> = ({ isHidden, children, items, isDisab
|
|
|
66
62
|
[styles.dropdown__navActive]: isVisible,
|
|
67
63
|
})
|
|
68
64
|
|
|
65
|
+
const itemsWithClose = items?.map((item) => {
|
|
66
|
+
if (item.isDisabled) return item
|
|
67
|
+
|
|
68
|
+
return {
|
|
69
|
+
...item,
|
|
70
|
+
onClick: (event: MouseEvent<HTMLElement>): void => {
|
|
71
|
+
item.onClick?.(event)
|
|
72
|
+
setVisible(false)
|
|
73
|
+
},
|
|
74
|
+
}
|
|
75
|
+
})
|
|
76
|
+
|
|
69
77
|
return (
|
|
70
78
|
<div className={dropdownClasses} onMouseEnter={mouseEnter} onMouseLeave={mouseLeave}>
|
|
71
79
|
<div onClick={onSetVisible}>{renderChildren}</div>
|
|
@@ -75,7 +83,7 @@ export const Dropdown: FC<DropdownProps> = ({ isHidden, children, items, isDisab
|
|
|
75
83
|
height: `${navHeight}px`,
|
|
76
84
|
}}
|
|
77
85
|
>
|
|
78
|
-
<ResultList ref={resultListRef} items={
|
|
86
|
+
<ResultList ref={resultListRef} items={itemsWithClose} />
|
|
79
87
|
</nav>
|
|
80
88
|
</div>
|
|
81
89
|
)
|
|
@@ -42,7 +42,7 @@ export const Input: FC<InputProps> = ({
|
|
|
42
42
|
|
|
43
43
|
const showingResults: boolean = Boolean(!!filteredItems?.length && showResults)
|
|
44
44
|
|
|
45
|
-
const inputClasses: string = getClasses(styles.input, "relative flex flex-column
|
|
45
|
+
const inputClasses: string = getClasses(styles.input, "relative flex flex-column", {
|
|
46
46
|
[styles.inputDisabled]: isDisabled,
|
|
47
47
|
[styles.inputShowingResults]: showingResults,
|
|
48
48
|
})
|
|
@@ -6,7 +6,7 @@ import type { FC } from "react"
|
|
|
6
6
|
export const Shimmer: FC<ShimmerProps> = ({ isRounded, paddingTop, paddingBottom, height, width }) => {
|
|
7
7
|
const shimmerDivClasses: string = getClasses({
|
|
8
8
|
["radius-max"]: isRounded,
|
|
9
|
-
["radius-
|
|
9
|
+
["radius-sm"]: !isRounded,
|
|
10
10
|
})
|
|
11
11
|
|
|
12
12
|
return (
|
package/css/core.colors.css
CHANGED
|
@@ -43,8 +43,8 @@
|
|
|
43
43
|
--ui-border-gray: oklch(var(--ui-border-l) var(--ui-chroma-tone) var(--ui-gray));
|
|
44
44
|
--ui-border-hover-gray: oklch(var(--ui-border-hover-l) var(--ui-chroma-tone) var(--ui-gray));
|
|
45
45
|
--ui-border-active-gray: oklch(var(--ui-border-active-l) var(--ui-chroma-tone) var(--ui-gray));
|
|
46
|
-
--ui-border-focus-gray: oklch(var(--ui-border-
|
|
47
|
-
--ui-border-selected-gray: oklch(var(--ui-border-
|
|
46
|
+
--ui-border-focus-gray: oklch(var(--ui-border-focus-l) var(--ui-chroma-tone) var(--ui-gray));
|
|
47
|
+
--ui-border-selected-gray: oklch(var(--ui-border-selected-l) var(--ui-chroma-tone) var(--ui-gray));
|
|
48
48
|
|
|
49
49
|
--ui-border-soft-gray: oklch(var(--ui-border-soft-l) var(--ui-chroma-tone) var(--ui-gray));
|
|
50
50
|
--ui-border-soft-hover-gray: oklch(var(--ui-border-soft-hover-l) var(--ui-chroma-tone) var(--ui-gray));
|
package/css/feat.atomics.css
CHANGED
|
@@ -24,35 +24,47 @@
|
|
|
24
24
|
border-radius: 0;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
.radius-
|
|
27
|
+
.radius-xs {
|
|
28
|
+
border-radius: var(--radius-xs);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.radius-sm {
|
|
28
32
|
border-radius: var(--radius-sm);
|
|
29
33
|
}
|
|
30
34
|
|
|
31
|
-
.radius-
|
|
35
|
+
.radius-md {
|
|
32
36
|
border-radius: var(--radius-md);
|
|
33
37
|
}
|
|
34
38
|
|
|
35
|
-
.radius-
|
|
39
|
+
.radius-lg {
|
|
36
40
|
border-radius: var(--radius-lg);
|
|
37
41
|
}
|
|
38
42
|
|
|
43
|
+
.radius-xl {
|
|
44
|
+
border-radius: var(--radius-xl);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.radius-100 {
|
|
48
|
+
border-radius: 100%;
|
|
49
|
+
}
|
|
50
|
+
|
|
39
51
|
.radius-max {
|
|
40
52
|
border-radius: 9999px;
|
|
41
53
|
}
|
|
42
54
|
|
|
43
55
|
/* scrollbar */
|
|
44
56
|
.ui-scrollbar::-webkit-scrollbar {
|
|
45
|
-
height:
|
|
46
|
-
width:
|
|
57
|
+
height: 8px;
|
|
58
|
+
width: 8px;
|
|
47
59
|
}
|
|
48
60
|
|
|
49
61
|
.ui-scrollbar--narrow::-webkit-scrollbar {
|
|
50
|
-
height:
|
|
51
|
-
width:
|
|
62
|
+
height: 4px;
|
|
63
|
+
width: 4px;
|
|
52
64
|
}
|
|
53
65
|
|
|
54
|
-
.ui-scrollbar::-webkit-scrollbar-
|
|
55
|
-
background-color: var(--ui-bg-
|
|
66
|
+
.ui-scrollbar::-webkit-scrollbar-track {
|
|
67
|
+
background-color: var(--ui-bg-tertiary);
|
|
56
68
|
}
|
|
57
69
|
|
|
58
70
|
.ui-scrollbar::-webkit-scrollbar-thumb {
|
|
@@ -63,10 +75,6 @@
|
|
|
63
75
|
transition: all var(--speed-sm) var(--ease-in-out-sine);
|
|
64
76
|
}
|
|
65
77
|
|
|
66
|
-
.ui-scrollbar::-webkit-scrollbar-track {
|
|
67
|
-
background-color: var(--ui-bg-soft-gray);
|
|
68
|
-
}
|
|
69
|
-
|
|
70
78
|
.ui-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
71
79
|
background-color: var(--ui-bg-secondary);
|
|
72
80
|
}
|
package/css/feat.responsive.css
CHANGED
|
@@ -69,15 +69,27 @@
|
|
|
69
69
|
.tablet\:radius-none {
|
|
70
70
|
border-radius: 0 !important;
|
|
71
71
|
}
|
|
72
|
-
.tablet\:radius-
|
|
72
|
+
.tablet\:radius-xs {
|
|
73
|
+
border-radius: var(--radius-xs) !important;
|
|
74
|
+
}
|
|
75
|
+
.tablet\:radius-sm {
|
|
73
76
|
border-radius: var(--radius-sm) !important;
|
|
74
77
|
}
|
|
75
|
-
.tablet\:radius-
|
|
78
|
+
.tablet\:radius-md {
|
|
76
79
|
border-radius: var(--radius-md) !important;
|
|
77
80
|
}
|
|
78
|
-
.tablet\:radius-
|
|
81
|
+
.tablet\:radius-lg {
|
|
79
82
|
border-radius: var(--radius-lg) !important;
|
|
80
83
|
}
|
|
84
|
+
.tablet\:radius-xl {
|
|
85
|
+
border-radius: var(--radius-xl) !important;
|
|
86
|
+
}
|
|
87
|
+
.tablet\:radius-100 {
|
|
88
|
+
border-radius: 100% !important;
|
|
89
|
+
}
|
|
90
|
+
.tablet\:radius-max {
|
|
91
|
+
border-radius: 9999px !important;
|
|
92
|
+
}
|
|
81
93
|
}
|
|
82
94
|
|
|
83
95
|
@media (min-width: 0) and (max-width: 640px) {
|
|
@@ -150,13 +162,25 @@
|
|
|
150
162
|
.mobile\:radius-none {
|
|
151
163
|
border-radius: 0 !important;
|
|
152
164
|
}
|
|
153
|
-
.mobile\:radius-
|
|
165
|
+
.mobile\:radius-xs {
|
|
166
|
+
border-radius: var(--radius-xs) !important;
|
|
167
|
+
}
|
|
168
|
+
.mobile\:radius-sm {
|
|
154
169
|
border-radius: var(--radius-sm) !important;
|
|
155
170
|
}
|
|
156
|
-
.mobile\:radius-
|
|
171
|
+
.mobile\:radius-md {
|
|
157
172
|
border-radius: var(--radius-md) !important;
|
|
158
173
|
}
|
|
159
|
-
.mobile\:radius-
|
|
174
|
+
.mobile\:radius-lg {
|
|
160
175
|
border-radius: var(--radius-lg) !important;
|
|
161
176
|
}
|
|
177
|
+
.mobile\:radius-xl {
|
|
178
|
+
border-radius: var(--radius-xl) !important;
|
|
179
|
+
}
|
|
180
|
+
.mobile\:radius-100 {
|
|
181
|
+
border-radius: 100% !important;
|
|
182
|
+
}
|
|
183
|
+
.mobile\:radius-max {
|
|
184
|
+
border-radius: 9999px !important;
|
|
185
|
+
}
|
|
162
186
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@heliosgraphics/ui",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.74",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"author": "Chris Puska <chris@puska.org>",
|
|
6
6
|
"private": false,
|
|
@@ -36,23 +36,23 @@
|
|
|
36
36
|
"react-plock": "^3.6.1"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
|
-
"@testing-library/react": "^16.3.
|
|
40
|
-
"@types/node": "^
|
|
41
|
-
"@typescript-eslint/eslint-plugin": "^8.
|
|
42
|
-
"@vitejs/plugin-react": "^5.1.
|
|
43
|
-
"@vitest/coverage-v8": "^4.0.
|
|
39
|
+
"@testing-library/react": "^16.3.1",
|
|
40
|
+
"@types/node": "^25",
|
|
41
|
+
"@typescript-eslint/eslint-plugin": "^8.50.1",
|
|
42
|
+
"@vitejs/plugin-react": "^5.1.2",
|
|
43
|
+
"@vitest/coverage-v8": "^4.0.16",
|
|
44
44
|
"esbuild": "latest",
|
|
45
45
|
"esbuild-css-modules-plugin": "latest",
|
|
46
|
-
"eslint": "^9.39.
|
|
46
|
+
"eslint": "^9.39.2",
|
|
47
47
|
"eslint-config-prettier": "^10.1.8",
|
|
48
48
|
"eslint-plugin-prettier": "^5.5.4",
|
|
49
49
|
"glob": "latest",
|
|
50
|
-
"jsdom": "^27.
|
|
51
|
-
"next": "^16.
|
|
52
|
-
"prettier": "^3.7.
|
|
50
|
+
"jsdom": "^27.3.0",
|
|
51
|
+
"next": "^16.1.1",
|
|
52
|
+
"prettier": "^3.7.4",
|
|
53
53
|
"typescript": "^5.9.3",
|
|
54
|
-
"vite": "^7.
|
|
55
|
-
"vitest": "^4.0.
|
|
54
|
+
"vite": "^7.3.0",
|
|
55
|
+
"vitest": "^4.0.16"
|
|
56
56
|
},
|
|
57
57
|
"peerDependencies": {
|
|
58
58
|
"@types/react": "^19",
|