@brillout/docpress 0.17.0 → 0.17.2
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.
|
@@ -139,6 +139,51 @@
|
|
|
139
139
|
display: none !important;
|
|
140
140
|
}
|
|
141
141
|
|
|
142
|
+
/* Keep these breakpoints in sync with:
|
|
143
|
+
* https://github.com/brillout/docpress/blob/08b63e867c4c052479e19a6943ca5535b2762d02/src/css/code/block.css#L40-L56
|
|
144
|
+
*/
|
|
145
|
+
@media not all and (hover: hover) and (pointer: fine) {
|
|
146
|
+
.choice-select__option {
|
|
147
|
+
padding: 5px;
|
|
148
|
+
}
|
|
149
|
+
@container container-viewport (max-width: 620px) {
|
|
150
|
+
.choice-select__option-label {
|
|
151
|
+
font-size: 12px !important;
|
|
152
|
+
}
|
|
153
|
+
.choice-select__option-icon {
|
|
154
|
+
width: 13px !important;
|
|
155
|
+
}
|
|
156
|
+
.choice-select__option-content img {
|
|
157
|
+
width: 11.5px !important;
|
|
158
|
+
height: 11.5px !important;
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
@container container-viewport (max-width: 550px) {
|
|
162
|
+
.choice-select__option-label {
|
|
163
|
+
font-size: 11px !important;
|
|
164
|
+
}
|
|
165
|
+
.choice-select__option-icon {
|
|
166
|
+
width: 12px !important;
|
|
167
|
+
}
|
|
168
|
+
.choice-select__option-content img {
|
|
169
|
+
width: 11px !important;
|
|
170
|
+
height: 11px !important;
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
@container container-viewport (max-width: 450px) {
|
|
174
|
+
.choice-select__option-label {
|
|
175
|
+
font-size: 10px !important;
|
|
176
|
+
}
|
|
177
|
+
.choice-select__option-icon {
|
|
178
|
+
width: 11px !important;
|
|
179
|
+
}
|
|
180
|
+
.choice-select__option-content img {
|
|
181
|
+
width: 10px !important;
|
|
182
|
+
height: 10px !important;
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
|
|
142
187
|
.choice-select__list:has(.choice-select__option:nth-of-type(1) .choice-select__radio:checked) {
|
|
143
188
|
top: 0;
|
|
144
189
|
clip-path: inset(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { ChoiceGroup, ChoiceGroupContainer }
|
|
2
2
|
|
|
3
3
|
import type { ChoiceGroup as TChoiceGroup, ChoiceGroupWithParent } from '../types.js'
|
|
4
|
-
import React, { useId, useState } from 'react'
|
|
4
|
+
import React, { useId, useRef, useState } from 'react'
|
|
5
5
|
import { usePageContext } from '../../renderer/usePageContext.js'
|
|
6
6
|
import { useCurrentSelection } from '../hooks/useCurrentSelection.js'
|
|
7
7
|
import { useRestoreScroll } from '../hooks/useRestoreScroll.js'
|
|
@@ -59,6 +59,8 @@ function CustomSelect({ choiceGroup }: { choiceGroup: ChoiceGroupWithParent }) {
|
|
|
59
59
|
const selectedChoice = getAvailableChoice(selectedChoiceStored, choices, emptyChoices, defaultChoice)
|
|
60
60
|
const [expanded, setExpanded] = useState(false)
|
|
61
61
|
const [isHovered, setIsHovered] = useState(false)
|
|
62
|
+
const lastPointerType = useRef<React.PointerEvent['pointerType']>('mouse')
|
|
63
|
+
|
|
62
64
|
let [parentSelectedChoice] = useCurrentSelection(parentChoiceGroup?.name || '', parentChoiceGroup?.default || '')
|
|
63
65
|
let isHidden = hidden
|
|
64
66
|
const setPrevPosition = useRestoreScroll([selectedChoice])
|
|
@@ -83,7 +85,10 @@ function CustomSelect({ choiceGroup }: { choiceGroup: ChoiceGroupWithParent }) {
|
|
|
83
85
|
isHovered && 'hovered',
|
|
84
86
|
])}
|
|
85
87
|
style={{ '--option-height': `${OPTION_HEIGHT}px`, '--choice-count': filteredChoices.length }}
|
|
86
|
-
|
|
88
|
+
onPointerDownCapture={(e) => (lastPointerType.current = e.pointerType)}
|
|
89
|
+
onPointerEnter={(e) => {
|
|
90
|
+
lastPointerType.current = e.pointerType
|
|
91
|
+
if (lastPointerType.current !== 'mouse') return
|
|
87
92
|
setExpanded(true)
|
|
88
93
|
setIsHovered(true)
|
|
89
94
|
}}
|
|
@@ -92,11 +97,10 @@ function CustomSelect({ choiceGroup }: { choiceGroup: ChoiceGroupWithParent }) {
|
|
|
92
97
|
if (!expanded) setIsHovered(false)
|
|
93
98
|
}}
|
|
94
99
|
onClick={() => {
|
|
95
|
-
if (!expanded) next()
|
|
100
|
+
if (lastPointerType.current === 'mouse' && !expanded) next()
|
|
96
101
|
}}
|
|
97
102
|
data-choice-group={groupName}
|
|
98
103
|
>
|
|
99
|
-
<div className="choice-select__border" />
|
|
100
104
|
{filteredChoices.map(({ name: choice, icon, iconStyle, iconStyleDropdown }) => (
|
|
101
105
|
<label
|
|
102
106
|
id={`choice-${choice}`}
|
|
@@ -118,6 +122,7 @@ function CustomSelect({ choiceGroup }: { choiceGroup: ChoiceGroupWithParent }) {
|
|
|
118
122
|
</span>
|
|
119
123
|
<span className="choice-select__option-label">{choice}</span>
|
|
120
124
|
</span>
|
|
125
|
+
<div className="choice-select__border" />
|
|
121
126
|
</label>
|
|
122
127
|
))}
|
|
123
128
|
</div>
|
|
@@ -129,6 +134,13 @@ function CustomSelect({ choiceGroup }: { choiceGroup: ChoiceGroupWithParent }) {
|
|
|
129
134
|
}
|
|
130
135
|
function handleOnClick(e: React.MouseEvent<HTMLLabelElement, MouseEvent>, choice: string) {
|
|
131
136
|
e.preventDefault()
|
|
137
|
+
|
|
138
|
+
if (!expanded) {
|
|
139
|
+
setExpanded(true)
|
|
140
|
+
setIsHovered(true)
|
|
141
|
+
return
|
|
142
|
+
}
|
|
143
|
+
|
|
132
144
|
const el = e.currentTarget
|
|
133
145
|
setPrevPosition(el)
|
|
134
146
|
const isSame = selectedChoice === choice
|