kitunga-web 0.1.98 → 0.1.100
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/features/data-display/components/Badges/CheckBadge/CheckBadge.d.ts +16 -0
- package/dist/features/data-display/components/Badges/CheckBadge/CheckBadge.d.ts.map +1 -0
- package/dist/features/data-display/components/Badges/CheckBadge/CheckBadge.js +14 -0
- package/dist/features/data-display/components/Badges/CheckBadge/CheckBadge.js.map +1 -0
- package/dist/features/data-display/components/Badges/CheckBadge/CheckBadge.module.css +29 -0
- package/dist/features/data-display/components/Tabs/SubTabs/SubTabs.d.ts +19 -0
- package/dist/features/data-display/components/Tabs/SubTabs/SubTabs.d.ts.map +1 -0
- package/dist/features/data-display/components/Tabs/SubTabs/SubTabs.js +33 -0
- package/dist/features/data-display/components/Tabs/SubTabs/SubTabs.js.map +1 -0
- package/dist/features/data-display/components/Tabs/SubTabs/SubTabs.module.css +64 -0
- package/dist/features/data-display/components/Tabs/Tabs/Tabs.d.ts +25 -0
- package/dist/features/data-display/components/Tabs/Tabs/Tabs.d.ts.map +1 -0
- package/dist/features/data-display/components/Tabs/Tabs/Tabs.js +35 -0
- package/dist/features/data-display/components/Tabs/Tabs/Tabs.js.map +1 -0
- package/dist/features/data-display/components/Tabs/Tabs/Tabs.module.css +85 -0
- package/dist/features/inputs/components/Inputs/Checkbox.d.ts +17 -0
- package/dist/features/inputs/components/Inputs/Checkbox.d.ts.map +1 -0
- package/dist/features/inputs/components/Inputs/Checkbox.js +16 -0
- package/dist/features/inputs/components/Inputs/Checkbox.js.map +1 -0
- package/dist/features/inputs/components/Inputs/Checkbox.module.css +68 -0
- package/dist/features/inputs/components/Inputs/FormLabel.d.ts +12 -0
- package/dist/features/inputs/components/Inputs/FormLabel.d.ts.map +1 -0
- package/dist/features/inputs/components/Inputs/FormLabel.js +10 -0
- package/dist/features/inputs/components/Inputs/FormLabel.js.map +1 -0
- package/dist/features/inputs/components/Inputs/FormLabel.module.css +23 -0
- package/dist/features/inputs/components/Inputs/RadioButton.d.ts +13 -0
- package/dist/features/inputs/components/Inputs/RadioButton.d.ts.map +1 -0
- package/dist/features/inputs/components/Inputs/RadioButton.js +9 -0
- package/dist/features/inputs/components/Inputs/RadioButton.js.map +1 -0
- package/dist/features/inputs/components/Inputs/RadioButton.module.css +66 -0
- package/dist/features/inputs/components/Inputs/Toggle.d.ts +12 -0
- package/dist/features/inputs/components/Inputs/Toggle.d.ts.map +1 -0
- package/dist/features/inputs/components/Inputs/Toggle.js +8 -0
- package/dist/features/inputs/components/Inputs/Toggle.js.map +1 -0
- package/dist/features/inputs/components/Inputs/Toggle.module.css +62 -0
- package/dist/features/patterns/components/Form/VerificationCodeStep/VerificationCodeStep.d.ts +9 -1
- package/dist/features/patterns/components/Form/VerificationCodeStep/VerificationCodeStep.d.ts.map +1 -1
- package/dist/features/patterns/components/Form/VerificationCodeStep/VerificationCodeStep.js +4 -4
- package/dist/features/patterns/components/Form/VerificationCodeStep/VerificationCodeStep.js.map +1 -1
- package/dist/features/selects/components/PickerSelect/PickerSelect.d.ts +94 -0
- package/dist/features/selects/components/PickerSelect/PickerSelect.d.ts.map +1 -0
- package/dist/features/selects/components/PickerSelect/PickerSelect.js +137 -0
- package/dist/features/selects/components/PickerSelect/PickerSelect.js.map +1 -0
- package/dist/features/selects/components/PickerSelect/PickerSelect.module.css +228 -0
- package/dist/features/selects/components/PickerSelect/PickerSheet.d.ts +51 -0
- package/dist/features/selects/components/PickerSelect/PickerSheet.d.ts.map +1 -0
- package/dist/features/selects/components/PickerSelect/PickerSheet.js +65 -0
- package/dist/features/selects/components/PickerSelect/PickerSheet.js.map +1 -0
- package/dist/features/selects/components/{Selects → PickerSelect}/pickerOptions.d.ts +18 -3
- package/dist/features/selects/components/PickerSelect/pickerOptions.d.ts.map +1 -0
- package/dist/features/selects/components/{Selects → PickerSelect}/pickerOptions.js +4 -4
- package/dist/features/selects/components/PickerSelect/pickerOptions.js.map +1 -0
- package/dist/features/selects/components/Selects/CustomSelect.d.ts +1 -51
- package/dist/features/selects/components/Selects/CustomSelect.d.ts.map +1 -1
- package/dist/features/selects/components/Selects/CustomSelect.js +34 -140
- package/dist/features/selects/components/Selects/CustomSelect.js.map +1 -1
- package/dist/features/selects/components/Selects/CustomSelect.module.css +0 -127
- package/dist/shared/styles/tokens.css +11 -0
- package/dist/ui.d.ts +20 -0
- package/dist/ui.d.ts.map +1 -1
- package/dist/ui.js +10 -0
- package/dist/ui.js.map +1 -1
- package/package.json +1 -1
- package/dist/features/selects/components/Selects/pickerOptions.d.ts.map +0 -1
- package/dist/features/selects/components/Selects/pickerOptions.js.map +0 -1
|
@@ -0,0 +1,228 @@
|
|
|
1
|
+
/* ===== PickerSelect — overlay-sheet with header, search and grouped
|
|
2
|
+
sections, for long lists with visual identity (countries, languages).
|
|
3
|
+
The trigger is a wrapped CustomSelect; the sheet lives entirely here.
|
|
4
|
+
ZERO breakpoints: the consumer's skin drives every responsive rule
|
|
5
|
+
through the --picker-* vars and the `classNames` slots — kitunga does
|
|
6
|
+
not know the Masolo 600px rule or any other product's (decision 75). */
|
|
7
|
+
|
|
8
|
+
.pickerSelect {
|
|
9
|
+
position: relative;
|
|
10
|
+
width: 100%;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
/* Wrapper that hijacks click/keys on the wrapped CustomSelect so its
|
|
14
|
+
own dropdown never opens. */
|
|
15
|
+
.triggerWrap {
|
|
16
|
+
width: 100%;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.overlay {
|
|
20
|
+
position: fixed;
|
|
21
|
+
inset: 0;
|
|
22
|
+
z-index: var(--picker-overlay-z, 1300);
|
|
23
|
+
display: flex;
|
|
24
|
+
align-items: center;
|
|
25
|
+
justify-content: center;
|
|
26
|
+
height: 100dvh;
|
|
27
|
+
padding: var(--picker-overlay-padding, var(--spacing-lg));
|
|
28
|
+
background: var(--picker-overlay-bg, rgba(0, 0, 0, 0.5));
|
|
29
|
+
animation: pickerFadeIn 0.15s ease-out;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.panel {
|
|
33
|
+
display: flex;
|
|
34
|
+
flex-direction: column;
|
|
35
|
+
overflow: hidden;
|
|
36
|
+
width: var(--picker-panel-width, 100%);
|
|
37
|
+
max-width: var(--picker-panel-max-width, 480px);
|
|
38
|
+
height: var(--picker-panel-height, 600px);
|
|
39
|
+
max-height: var(--picker-panel-max-height, 100%);
|
|
40
|
+
background: var(--picker-panel-bg, var(--bg-primary));
|
|
41
|
+
border-radius: var(--picker-panel-radius, var(--radius-sm));
|
|
42
|
+
box-shadow: var(--picker-panel-shadow, 0 10px 25px rgba(0, 0, 0, 0.2));
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.header {
|
|
46
|
+
display: flex;
|
|
47
|
+
align-items: center;
|
|
48
|
+
gap: var(--spacing-md);
|
|
49
|
+
padding: var(--spacing-md);
|
|
50
|
+
flex-shrink: 0;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.title {
|
|
54
|
+
flex: 1;
|
|
55
|
+
min-width: 0;
|
|
56
|
+
margin: 0;
|
|
57
|
+
font-size: 18px;
|
|
58
|
+
font-weight: 600;
|
|
59
|
+
color: var(--text-primary);
|
|
60
|
+
overflow: hidden;
|
|
61
|
+
text-overflow: ellipsis;
|
|
62
|
+
white-space: nowrap;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.back,
|
|
66
|
+
.close {
|
|
67
|
+
align-items: center;
|
|
68
|
+
justify-content: center;
|
|
69
|
+
width: 40px;
|
|
70
|
+
height: 40px;
|
|
71
|
+
padding: 0;
|
|
72
|
+
border: none;
|
|
73
|
+
border-radius: 50%;
|
|
74
|
+
background: var(--picker-button-bg, var(--bg-hover-normal));
|
|
75
|
+
color: var(--picker-button-color, var(--text-primary));
|
|
76
|
+
cursor: pointer;
|
|
77
|
+
flex-shrink: 0;
|
|
78
|
+
transition: background-color var(--transition-fast);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.back:hover,
|
|
82
|
+
.close:hover {
|
|
83
|
+
background-color: var(--picker-button-hover, var(--color-gray-200));
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* Control visibility — always the consumer's CSS. In Masolo the X
|
|
87
|
+
dies and the ← appears in the ≤600px takeover, via
|
|
88
|
+
--picker-back-display / --picker-close-display in the app's own
|
|
89
|
+
media query. Both are "close": ← is back in form, close in function
|
|
90
|
+
(decision 30). */
|
|
91
|
+
.back {
|
|
92
|
+
display: var(--picker-back-display, none);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.close {
|
|
96
|
+
display: var(--picker-close-display, flex);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
/* Espaço uniforme à volta da pesquisa — spacing-md em todos os
|
|
100
|
+
lados, como a anatomia da casa (o header acima já traz o seu
|
|
101
|
+
padding-md, pelo que o respiro X→input fica md+md). */
|
|
102
|
+
.searchRow {
|
|
103
|
+
padding: var(--picker-search-padding, var(--spacing-md));
|
|
104
|
+
border-bottom: 1px solid var(--picker-search-border, var(--border-divider));
|
|
105
|
+
flex-shrink: 0;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.list {
|
|
109
|
+
flex: 1;
|
|
110
|
+
min-height: 0;
|
|
111
|
+
overflow-y: auto;
|
|
112
|
+
/* The parent list breathes: spacing-md top/bottom, 8px on the
|
|
113
|
+
sides — items float inside the panel, never glued to the edges. */
|
|
114
|
+
padding: var(--picker-list-padding, var(--spacing-md) var(--spacing-sm));
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/* Section header — just another list item: scrolls with the list,
|
|
118
|
+
never sticky/absolute. */
|
|
119
|
+
.groupHeader {
|
|
120
|
+
padding: var(--spacing-sm) var(--picker-group-padding-x, var(--spacing-sm));
|
|
121
|
+
font-size: var(--picker-group-size, 0.8rem);
|
|
122
|
+
font-weight: 600;
|
|
123
|
+
letter-spacing: 0.04em;
|
|
124
|
+
text-transform: uppercase;
|
|
125
|
+
color: var(--picker-group-color, var(--text-tertiary));
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
/* Picker rows — the reference list style (decision 75): no dividers
|
|
129
|
+
between rows, gray hover (EntityRow colors), light-blue selected
|
|
130
|
+
(--selection-bg) + CheckBadge on the right. Each item carries its
|
|
131
|
+
own 8px padding and radius-sm. */
|
|
132
|
+
.option {
|
|
133
|
+
min-height: var(--picker-option-height, 52px);
|
|
134
|
+
padding: var(--picker-option-padding, var(--spacing-sm));
|
|
135
|
+
border-radius: var(--picker-option-radius, var(--radius-sm));
|
|
136
|
+
cursor: pointer;
|
|
137
|
+
display: flex;
|
|
138
|
+
align-items: center;
|
|
139
|
+
justify-content: space-between;
|
|
140
|
+
transition: all 0.12s ease;
|
|
141
|
+
color: var(--text-primary);
|
|
142
|
+
font-weight: 400;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.option span {
|
|
146
|
+
font-size: var(--picker-option-font-size, 1rem);
|
|
147
|
+
line-height: 1.3;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
/* O gap global entre itens (--entity-row-gap) — via `~` para que o
|
|
151
|
+
primeiro filho nunca leve espaço e as cores de hover/selecção
|
|
152
|
+
nunca se colem. */
|
|
153
|
+
.list > * ~ * {
|
|
154
|
+
margin-top: var(--picker-option-gap, var(--entity-row-gap, 2px));
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.option:hover {
|
|
158
|
+
background-color: var(--bg-hover-normal);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.option.selected {
|
|
162
|
+
background-color: var(--picker-option-selected-bg, #f2f6fe);
|
|
163
|
+
color: var(--picker-option-selected-text, var(--selection-text));
|
|
164
|
+
font-weight: var(--picker-option-selected-weight, 700);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.option.disabledOption {
|
|
168
|
+
opacity: 0.45;
|
|
169
|
+
cursor: not-allowed;
|
|
170
|
+
color: var(--text-tertiary);
|
|
171
|
+
background-color: var(--bg-primary);
|
|
172
|
+
pointer-events: none;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.optionText {
|
|
176
|
+
display: inline-flex;
|
|
177
|
+
align-items: center;
|
|
178
|
+
min-width: 0;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
/* Row icons in the picker list — the same circular 24px frame as the
|
|
182
|
+
CustomSelect trigger: img/svg children fill it and the circle crops
|
|
183
|
+
(flags always read round, trigger and list consistent). */
|
|
184
|
+
.optionIcon {
|
|
185
|
+
display: inline-flex;
|
|
186
|
+
align-items: center;
|
|
187
|
+
justify-content: center;
|
|
188
|
+
width: var(--picker-icon-size, 24px);
|
|
189
|
+
height: var(--picker-icon-size, 24px);
|
|
190
|
+
border-radius: var(--picker-icon-radius, 50%);
|
|
191
|
+
overflow: hidden;
|
|
192
|
+
flex-shrink: 0;
|
|
193
|
+
font-size: 1rem;
|
|
194
|
+
margin-right: var(--spacing-md);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.optionIcon > img,
|
|
198
|
+
.optionIcon > svg {
|
|
199
|
+
width: 100%;
|
|
200
|
+
height: 100%;
|
|
201
|
+
object-fit: cover;
|
|
202
|
+
display: block;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.option:focus-visible {
|
|
206
|
+
outline: none;
|
|
207
|
+
background-color: var(--bg-tertiary);
|
|
208
|
+
color: var(--color-primary);
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
/* Flag fallback when the asset fails — ISO text inside the same
|
|
212
|
+
rectangular frame (a consumer with partial flagBaseUrl never shows
|
|
213
|
+
a broken image). */
|
|
214
|
+
.flagFallback {
|
|
215
|
+
font-size: 0.55rem;
|
|
216
|
+
font-weight: 700;
|
|
217
|
+
letter-spacing: 0.02em;
|
|
218
|
+
color: var(--text-tertiary);
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
@keyframes pickerFadeIn {
|
|
222
|
+
from {
|
|
223
|
+
opacity: 0;
|
|
224
|
+
}
|
|
225
|
+
to {
|
|
226
|
+
opacity: 1;
|
|
227
|
+
}
|
|
228
|
+
}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { PickerOption } from './pickerOptions';
|
|
3
|
+
export interface PickerSheetClassNames {
|
|
4
|
+
header?: string;
|
|
5
|
+
backButton?: string;
|
|
6
|
+
closeButton?: string;
|
|
7
|
+
searchRow?: string;
|
|
8
|
+
list?: string;
|
|
9
|
+
groupHeader?: string;
|
|
10
|
+
option?: string;
|
|
11
|
+
}
|
|
12
|
+
export interface PickerSheetProps {
|
|
13
|
+
options: PickerOption[];
|
|
14
|
+
value: string;
|
|
15
|
+
onSelect: (option: PickerOption) => void;
|
|
16
|
+
/** Chamado pelos controlos de fecho/voltar do header e pelo ESC. */
|
|
17
|
+
onClose: () => void;
|
|
18
|
+
/** Texto do topo do sheet. */
|
|
19
|
+
title?: string;
|
|
20
|
+
/** Ícone do botão esquerdo do header (default ArrowLeft — no Masolo
|
|
21
|
+
* só aparece no takeover ≤600px, via --picker-back-display). */
|
|
22
|
+
backIcon?: React.ReactNode;
|
|
23
|
+
/** Acção do botão esquerdo (default: onClose). */
|
|
24
|
+
onBack?: () => void;
|
|
25
|
+
/** aria-label do botão esquerdo. */
|
|
26
|
+
backAriaLabel?: string;
|
|
27
|
+
/** Ícone do botão de fecho à direita (default X). */
|
|
28
|
+
closeIcon?: React.ReactNode;
|
|
29
|
+
/** aria-label do botão de fecho. */
|
|
30
|
+
closeAriaLabel?: string;
|
|
31
|
+
searchable?: boolean;
|
|
32
|
+
searchPlaceholder?: string;
|
|
33
|
+
searchSize?: 'sm' | 'md' | 'lg';
|
|
34
|
+
searchAutoFocus?: boolean;
|
|
35
|
+
searchEmptyProps?: {
|
|
36
|
+
title?: string;
|
|
37
|
+
description?: string;
|
|
38
|
+
actionLabel?: string;
|
|
39
|
+
};
|
|
40
|
+
classNames?: PickerSheetClassNames;
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* PickerSheet — o conteúdo da folha (header + pesquisa + lista
|
|
44
|
+
* agrupada), SEM overlay. É o que o PickerSelect renderiza dentro do
|
|
45
|
+
* seu próprio overlay — e o que um consumidor com popup manager
|
|
46
|
+
* próprio (ex.: o PopupManager do Masolo) monta dentro do seu `.modal`
|
|
47
|
+
* para obter a anatomia 500×600 / takeover / X→← do próprio sistema.
|
|
48
|
+
*/
|
|
49
|
+
declare const PickerSheet: React.FC<PickerSheetProps>;
|
|
50
|
+
export default PickerSheet;
|
|
51
|
+
//# sourceMappingURL=PickerSheet.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PickerSheet.d.ts","sourceRoot":"","sources":["../../../../../src/features/selects/components/PickerSelect/PickerSheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,WAAW,qBAAqB;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IACzC,oEAAoE;IACpE,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;qEACiE;IACjE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,oCAAoC;IACpC,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE;QACjB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;IAEF,UAAU,CAAC,EAAE,qBAAqB,CAAC;CACpC;AAQD;;;;;;GAMG;AACH,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAiI3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
+
import { useState } from 'react';
|
|
4
|
+
import { ArrowLeft, X } from 'lucide-react';
|
|
5
|
+
import SearchInput from '../../../inputs/components/Inputs/SearchInput';
|
|
6
|
+
import SearchEmptyState from '../../../feedback/components/EmptyStates/SearchEmptyState/SearchEmptyState';
|
|
7
|
+
import { CheckBadge } from '../../../data-display/components/Badges/CheckBadge/CheckBadge';
|
|
8
|
+
import styles from './PickerSelect.module.css';
|
|
9
|
+
const normalize = (text) => text
|
|
10
|
+
.normalize('NFD')
|
|
11
|
+
.replace(/[\u0300-\u036f]/g, '')
|
|
12
|
+
.toLowerCase();
|
|
13
|
+
/**
|
|
14
|
+
* PickerSheet — o conteúdo da folha (header + pesquisa + lista
|
|
15
|
+
* agrupada), SEM overlay. É o que o PickerSelect renderiza dentro do
|
|
16
|
+
* seu próprio overlay — e o que um consumidor com popup manager
|
|
17
|
+
* próprio (ex.: o PopupManager do Masolo) monta dentro do seu `.modal`
|
|
18
|
+
* para obter a anatomia 500×600 / takeover / X→← do próprio sistema.
|
|
19
|
+
*/
|
|
20
|
+
const PickerSheet = ({ options, value, onSelect, onClose, title = 'Select', backIcon, onBack, backAriaLabel = 'Back', closeIcon, closeAriaLabel = 'Close', searchable = true, searchPlaceholder, searchSize = 'md', searchAutoFocus = false, searchEmptyProps, classNames, }) => {
|
|
21
|
+
var _a, _b, _c, _d, _e;
|
|
22
|
+
const [search, setSearch] = useState('');
|
|
23
|
+
const query = normalize(search.trim());
|
|
24
|
+
const visibleOptions = query
|
|
25
|
+
? options.filter((option) => {
|
|
26
|
+
var _a;
|
|
27
|
+
return normalize(option.label).includes(query) ||
|
|
28
|
+
normalize((_a = option.selectedLabel) !== null && _a !== void 0 ? _a : '').includes(query) ||
|
|
29
|
+
normalize(option.value).includes(query);
|
|
30
|
+
})
|
|
31
|
+
: options;
|
|
32
|
+
const renderRows = () => {
|
|
33
|
+
const rows = [];
|
|
34
|
+
let lastGroup;
|
|
35
|
+
visibleOptions.forEach((option) => {
|
|
36
|
+
var _a, _b;
|
|
37
|
+
if (option.group !== lastGroup) {
|
|
38
|
+
lastGroup = option.group;
|
|
39
|
+
if (option.group) {
|
|
40
|
+
rows.push(_jsx("div", { className: `${styles.groupHeader} ${(_a = classNames === null || classNames === void 0 ? void 0 : classNames.groupHeader) !== null && _a !== void 0 ? _a : ''}`, children: option.group }, `group-${option.group}`));
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
const selected = value === option.value;
|
|
44
|
+
rows.push(_jsxs("div", { className: `${styles.option} ${selected ? styles.selected : ''} ${option.disabled ? styles.disabledOption : ''} ${(_b = classNames === null || classNames === void 0 ? void 0 : classNames.option) !== null && _b !== void 0 ? _b : ''}`, onClick: () => {
|
|
45
|
+
if (option.disabled)
|
|
46
|
+
return;
|
|
47
|
+
onSelect(option);
|
|
48
|
+
}, onKeyDown: (e) => {
|
|
49
|
+
if (option.disabled)
|
|
50
|
+
return;
|
|
51
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
52
|
+
e.preventDefault();
|
|
53
|
+
onSelect(option);
|
|
54
|
+
}
|
|
55
|
+
}, role: "option", "aria-selected": selected, "aria-disabled": option.disabled ? true : undefined, tabIndex: option.disabled ? -1 : 0, children: [_jsxs("span", { className: styles.optionText, children: [option.icon && (_jsx("span", { className: styles.optionIcon, children: option.icon })), _jsx("span", { children: option.label })] }), selected && _jsx(CheckBadge, { checked: true, placement: "inline" })] }, option.value));
|
|
56
|
+
});
|
|
57
|
+
return rows;
|
|
58
|
+
};
|
|
59
|
+
return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${styles.header} ${(_a = classNames === null || classNames === void 0 ? void 0 : classNames.header) !== null && _a !== void 0 ? _a : ''}`, children: [_jsx("button", { type: "button", className: `${styles.back} ${(_b = classNames === null || classNames === void 0 ? void 0 : classNames.backButton) !== null && _b !== void 0 ? _b : ''}`, onClick: onBack !== null && onBack !== void 0 ? onBack : onClose, "aria-label": backAriaLabel, children: backIcon !== null && backIcon !== void 0 ? backIcon : _jsx(ArrowLeft, { size: 24 }) }), _jsx("h2", { className: styles.title, children: title }), _jsx("button", { type: "button", className: `${styles.close} ${(_c = classNames === null || classNames === void 0 ? void 0 : classNames.closeButton) !== null && _c !== void 0 ? _c : ''}`, onClick: onClose, "aria-label": closeAriaLabel, children: closeIcon !== null && closeIcon !== void 0 ? closeIcon : _jsx(X, { size: 24 }) })] }), searchable && (_jsx("div", { className: `${styles.searchRow} ${(_d = classNames === null || classNames === void 0 ? void 0 : classNames.searchRow) !== null && _d !== void 0 ? _d : ''}`, children: _jsx(SearchInput, { value: search, onChange: setSearch, placeholder: searchPlaceholder !== null && searchPlaceholder !== void 0 ? searchPlaceholder : 'Pesquisar...', size: searchSize, autoFocus: searchAutoFocus, onKeyDown: (e) => {
|
|
60
|
+
if (e.key === 'Enter')
|
|
61
|
+
e.preventDefault();
|
|
62
|
+
} }) })), _jsxs("div", { className: `${styles.list} ${(_e = classNames === null || classNames === void 0 ? void 0 : classNames.list) !== null && _e !== void 0 ? _e : ''}`, role: "listbox", children: [renderRows(), visibleOptions.length === 0 && (_jsx(SearchEmptyState, { title: searchEmptyProps === null || searchEmptyProps === void 0 ? void 0 : searchEmptyProps.title, description: searchEmptyProps === null || searchEmptyProps === void 0 ? void 0 : searchEmptyProps.description, actionLabel: searchEmptyProps === null || searchEmptyProps === void 0 ? void 0 : searchEmptyProps.actionLabel, onAction: () => setSearch('') }))] })] }));
|
|
63
|
+
};
|
|
64
|
+
export default PickerSheet;
|
|
65
|
+
//# sourceMappingURL=PickerSheet.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PickerSheet.js","sourceRoot":"","sources":["../../../../../src/features/selects/components/PickerSelect/PickerSheet.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
2
|
+
export interface PickerOption {
|
|
3
|
+
value: string;
|
|
4
|
+
label: string;
|
|
5
|
+
/** Rótulo curto para o trigger fechado (ex.: nome do país sem o
|
|
6
|
+
* indicativo). Default: label. */
|
|
7
|
+
selectedLabel?: string;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
/** Ícone da opção (bandeira, avatar, glyph) — renderiza na linha
|
|
10
|
+
* da lista e, se a opção estiver seleccionada, também no trigger
|
|
11
|
+
* fechado. */
|
|
12
|
+
icon?: React.ReactNode;
|
|
13
|
+
/** Texto literal do cabeçalho de secção — opções com o mesmo group
|
|
14
|
+
* renderizam sob a mesma secção, na ordem dada (ex.: 'Sugeridos',
|
|
15
|
+
* 'A', 'B'). Sem group, a opção renderiza sem cabeçalho. */
|
|
16
|
+
group?: string;
|
|
17
|
+
}
|
|
3
18
|
export interface CountryPickerOptionsParams {
|
|
4
19
|
/** Locale dos nomes e da ordenação alfabética (Intl.DisplayNames +
|
|
5
20
|
* localeCompare) — a língua activa do consumidor. */
|
|
@@ -13,7 +28,7 @@ export interface CountryPickerOptionsParams {
|
|
|
13
28
|
/** Texto do cabeçalho do grupo prioritário (i18n do consumidor). */
|
|
14
29
|
suggestedLabel?: string;
|
|
15
30
|
}
|
|
16
|
-
export declare const buildCountryPickerOptions: ({ displayLocale, flagBaseUrl, priorityCodes, suggestedLabel, }: CountryPickerOptionsParams) =>
|
|
31
|
+
export declare const buildCountryPickerOptions: ({ displayLocale, flagBaseUrl, priorityCodes, suggestedLabel, }: CountryPickerOptionsParams) => PickerOption[];
|
|
17
32
|
export interface LanguagePickerOptionsParams {
|
|
18
33
|
/** Lista de locales servidos — a whitelist do consumidor. */
|
|
19
34
|
locales: readonly string[];
|
|
@@ -25,5 +40,5 @@ export interface LanguagePickerOptionsParams {
|
|
|
25
40
|
/** Ícone por linha — default o glyph Globe (língua ≠ país). */
|
|
26
41
|
languageIcon?: React.ReactNode;
|
|
27
42
|
}
|
|
28
|
-
export declare const buildLanguagePickerOptions: ({ locales, getLanguageLabel, displayLocale, languageIcon, }: LanguagePickerOptionsParams) =>
|
|
43
|
+
export declare const buildLanguagePickerOptions: ({ locales, getLanguageLabel, displayLocale, languageIcon, }: LanguagePickerOptionsParams) => PickerOption[];
|
|
29
44
|
//# sourceMappingURL=pickerOptions.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pickerOptions.d.ts","sourceRoot":"","sources":["../../../../../src/features/selects/components/PickerSelect/pickerOptions.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd;uCACmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;mBAEe;IACf,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;iEAE6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqCD,MAAM,WAAW,0BAA0B;IACzC;0DACsD;IACtD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;8CAC0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;uEACmE;IACnE,aAAa,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAClC,oEAAoE;IACpE,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAMD,eAAO,MAAM,yBAAyB,GAAI,gEAKvC,0BAA0B,KAAG,YAAY,EAmC3C,CAAC;AAEF,MAAM,WAAW,2BAA2B;IAC1C,6DAA6D;IAC7D,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3B;uCACmC;IACnC,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IAC9C,8DAA8D;IAC9D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC;AAED,eAAO,MAAM,0BAA0B,GAAI,6DAKxC,2BAA2B,KAAG,YAAY,EAS5C,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
// Opções prontas para o
|
|
3
|
-
//
|
|
4
|
-
//
|
|
2
|
+
// Opções prontas para o PickerSelect — kind='country' (todos os
|
|
3
|
+
// territórios da metadata do libphonenumber + Intl.DisplayNames +
|
|
4
|
+
// bandeiras do consumidor) e kind='language' (locales + labels do
|
|
5
5
|
// consumidor + glyph Globe — língua ≠ país, nunca bandeira).
|
|
6
6
|
// A lista de países é a metadata inteira — nunca allowlist manual
|
|
7
7
|
// (decisão 74 do Masolo); o bloco prioritário e a pele são do
|
|
@@ -9,7 +9,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
9
9
|
import { useState } from 'react';
|
|
10
10
|
import { Globe } from 'lucide-react';
|
|
11
11
|
import { getCountryConfig, getSupportedCountryCodes } from '../../../inputs/components/Inputs/PhoneInput/countries';
|
|
12
|
-
import styles from './
|
|
12
|
+
import styles from './PickerSelect.module.css';
|
|
13
13
|
const normalize = (text) => text.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
|
|
14
14
|
// Letra do grupo alfabético — NFD para "África"→A, "É…"→E, "Å…"→A.
|
|
15
15
|
const firstLetter = (text) => (normalize(text).charAt(0) || '#').toUpperCase();
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pickerOptions.js","sourceRoot":"","sources":["../../../../../src/features/selects/components/PickerSelect/pickerOptions.tsx"],"names":[],"mappings":"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"}
|
|
@@ -7,25 +7,9 @@ export interface Option {
|
|
|
7
7
|
selectedLabel?: string;
|
|
8
8
|
disabled?: boolean;
|
|
9
9
|
/** Ícone da opção (bandeira, avatar, glyph) — renderiza na linha
|
|
10
|
-
* do dropdown
|
|
10
|
+
* do dropdown e, se a opção estiver seleccionada, também no
|
|
11
11
|
* trigger fechado (ganha ao leftIcon contextual). */
|
|
12
12
|
icon?: React.ReactNode;
|
|
13
|
-
/** Texto literal do cabeçalho de secção no modo picker — opções
|
|
14
|
-
* com o mesmo group renderizam sob a mesma secção, na ordem dada
|
|
15
|
-
* (ex.: 'Sugeridos', 'A', 'B'). Sem group, a opção renderiza sem
|
|
16
|
-
* cabeçalho. */
|
|
17
|
-
group?: string;
|
|
18
|
-
}
|
|
19
|
-
export interface PickerClassNames {
|
|
20
|
-
overlay?: string;
|
|
21
|
-
panel?: string;
|
|
22
|
-
header?: string;
|
|
23
|
-
backButton?: string;
|
|
24
|
-
closeButton?: string;
|
|
25
|
-
searchRow?: string;
|
|
26
|
-
list?: string;
|
|
27
|
-
groupHeader?: string;
|
|
28
|
-
option?: string;
|
|
29
13
|
}
|
|
30
14
|
export interface CustomSelectProps {
|
|
31
15
|
id?: string;
|
|
@@ -60,40 +44,6 @@ export interface CustomSelectProps {
|
|
|
60
44
|
description?: string;
|
|
61
45
|
actionLabel?: string;
|
|
62
46
|
};
|
|
63
|
-
/** Segunda apresentação da lista: overlay-sheet com header, pesquisa
|
|
64
|
-
* e secções agrupadas — para listas longas com identidade visual
|
|
65
|
-
* (países, línguas). 'dropdown' é o comportamento de sempre.
|
|
66
|
-
* A pele responsiva é do consumidor via vars --picker-* e
|
|
67
|
-
* pickerClassNames — a kitunga não tem breakpoints. */
|
|
68
|
-
presentation?: 'dropdown' | 'picker';
|
|
69
|
-
/** Título do header do sheet no modo picker. */
|
|
70
|
-
pickerTitle?: string;
|
|
71
|
-
/** Autofocus no SearchInput ao abrir o picker (default false — no
|
|
72
|
-
* mobile abre o teclado; fica ao critério do consumidor). */
|
|
73
|
-
searchAutoFocus?: boolean;
|
|
74
|
-
/** Slots de classe para a pele do consumidor — media queries e
|
|
75
|
-
* regras de breakpoint vivem sempre fora da kitunga. */
|
|
76
|
-
pickerClassNames?: PickerClassNames;
|
|
77
|
-
/** Conveniência que constrói as opções internamente:
|
|
78
|
-
* 'country' → todos os territórios do libphonenumber +
|
|
79
|
-
* Intl.DisplayNames + bandeiras de flagBaseUrl;
|
|
80
|
-
* 'language' → locales + getLanguageLabel + glyph Globe por linha.
|
|
81
|
-
* `options` explícito sempre ganha ao `kind`. */
|
|
82
|
-
kind?: 'country' | 'language';
|
|
83
|
-
/** Locale dos Intl.DisplayNames e da ordenação — a língua activa
|
|
84
|
-
* do consumidor (default 'en'). */
|
|
85
|
-
displayLocale?: string;
|
|
86
|
-
/** Base dos SVGs de bandeira do consumidor (default '/flags/4x3'). */
|
|
87
|
-
flagBaseUrl?: string;
|
|
88
|
-
/** Bloco prioritário no topo do picker (kind='country') — a ordem
|
|
89
|
-
* é do produto; estas opções entram no grupo `suggestedLabel`. */
|
|
90
|
-
priorityCodes?: readonly string[];
|
|
91
|
-
/** Texto do cabeçalho do grupo prioritário (kind='country'). */
|
|
92
|
-
suggestedLabel?: string;
|
|
93
|
-
/** Lista de locales para kind='language' — a whitelist do consumidor. */
|
|
94
|
-
locales?: readonly string[];
|
|
95
|
-
/** Nome da língua por locale — i18n do consumidor. */
|
|
96
|
-
getLanguageLabel?: (locale: string) => string;
|
|
97
47
|
}
|
|
98
48
|
declare const CustomSelect: React.FC<CustomSelectProps>;
|
|
99
49
|
export default CustomSelect;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomSelect.d.ts","sourceRoot":"","sources":["../../../../../src/features/selects/components/Selects/CustomSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"CustomSelect.d.ts","sourceRoot":"","sources":["../../../../../src/features/selects/components/Selects/CustomSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAM3D,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd;uCACmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;0DAEsD;IACtD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC;;sDAEkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uDAAuD;IACvD,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAChC;;4BAEwB;IACxB,gBAAgB,CAAC,EAAE;QACjB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;CACH;AAQD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsM7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
|