@pedidopago/ui 1.3.3 → 1.3.4

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.
Files changed (60) hide show
  1. package/dist/components/Alert/index.d.ts.map +1 -1
  2. package/dist/components/Alert/index.js +2 -3
  3. package/dist/components/Alert/styles.d.ts +1 -1
  4. package/dist/components/Alert/styles.d.ts.map +1 -1
  5. package/dist/components/Alert/styles.js +1 -3
  6. package/dist/components/Alert/types.d.ts +1 -1
  7. package/dist/components/Alert/types.d.ts.map +1 -1
  8. package/dist/components/Button/Button.test.js +1 -1
  9. package/dist/components/Button/index.d.ts +3 -4
  10. package/dist/components/Button/index.d.ts.map +1 -1
  11. package/dist/components/Button/index.js +14 -18
  12. package/dist/components/Button/styles.d.ts +3 -3
  13. package/dist/components/Button/styles.d.ts.map +1 -1
  14. package/dist/components/Button/styles.js +42 -43
  15. package/dist/components/Button/types.d.ts +10 -13
  16. package/dist/components/Button/types.d.ts.map +1 -1
  17. package/dist/components/Input/styles.d.ts.map +1 -1
  18. package/dist/components/Input/styles.js +2 -2
  19. package/dist/components/Modal/ModalExample.d.ts +4 -0
  20. package/dist/components/Modal/ModalExample.d.ts.map +1 -0
  21. package/dist/components/Modal/ModalExample.js +66 -0
  22. package/dist/components/Modal/index.d.ts +1 -1
  23. package/dist/components/Modal/index.d.ts.map +1 -1
  24. package/dist/components/Modal/index.js +11 -13
  25. package/dist/components/Modal/modal.test.js +11 -9
  26. package/dist/components/Pagination/index.d.ts.map +1 -1
  27. package/dist/components/Pagination/index.js +23 -10
  28. package/dist/components/Pagination/styles.js +3 -2
  29. package/dist/components/ReactPortal/index.d.ts +8 -0
  30. package/dist/components/ReactPortal/index.d.ts.map +1 -0
  31. package/dist/components/ReactPortal/index.js +58 -0
  32. package/dist/components/ReactPortal/reactPortal.test.d.ts +2 -0
  33. package/dist/components/ReactPortal/reactPortal.test.d.ts.map +1 -0
  34. package/dist/components/ReactPortal/reactPortal.test.js +26 -0
  35. package/dist/components/ReactPortal/utils/createWrapperAndApprendToBody.d.ts +2 -0
  36. package/dist/components/ReactPortal/utils/createWrapperAndApprendToBody.d.ts.map +1 -0
  37. package/dist/components/ReactPortal/utils/createWrapperAndApprendToBody.js +13 -0
  38. package/dist/components/Select/components/OptionsSelect/index.d.ts +4 -0
  39. package/dist/components/Select/components/OptionsSelect/index.d.ts.map +1 -0
  40. package/dist/components/Select/components/OptionsSelect/index.js +91 -0
  41. package/dist/components/Select/components/OptionsSelect/styles.d.ts +265 -0
  42. package/dist/components/Select/components/OptionsSelect/styles.d.ts.map +1 -0
  43. package/dist/components/Select/components/OptionsSelect/styles.js +32 -0
  44. package/dist/components/Select/components/OptionsSelect/types.d.ts +16 -0
  45. package/dist/components/Select/components/OptionsSelect/types.d.ts.map +1 -0
  46. package/dist/components/Select/components/OptionsSelect/types.js +1 -0
  47. package/dist/components/Select/index.d.ts.map +1 -1
  48. package/dist/components/Select/index.js +66 -37
  49. package/dist/components/Select/select.test.js +14 -0
  50. package/dist/components/Select/styles.d.ts +5 -7
  51. package/dist/components/Select/styles.d.ts.map +1 -1
  52. package/dist/components/Select/styles.js +26 -16
  53. package/dist/components/Select/types.d.ts +7 -2
  54. package/dist/components/Select/types.d.ts.map +1 -1
  55. package/dist/components/Table/styles.d.ts.map +1 -1
  56. package/dist/components/Table/styles.js +8 -2
  57. package/dist/index.d.ts +1 -0
  58. package/dist/index.d.ts.map +1 -1
  59. package/dist/index.js +9 -0
  60. package/package.json +2 -1
@@ -0,0 +1,265 @@
1
+ /// <reference types="react" />
2
+ interface OptionsContainerProps {
3
+ open: boolean;
4
+ maxWidth?: string;
5
+ maxHeight?: string;
6
+ left: string;
7
+ top: string;
8
+ }
9
+ export declare const OptionsContainer: import("@emotion/styled").StyledComponent<{
10
+ slot?: string | undefined;
11
+ title?: string | undefined;
12
+ color?: string | undefined;
13
+ translate?: "no" | "yes" | undefined;
14
+ id?: string | undefined;
15
+ hidden?: boolean | undefined;
16
+ className?: string | undefined;
17
+ lang?: string | undefined;
18
+ role?: import("react").AriaRole | undefined;
19
+ tabIndex?: number | undefined;
20
+ "aria-activedescendant"?: string | undefined;
21
+ "aria-atomic"?: (boolean | "false" | "true") | undefined;
22
+ "aria-autocomplete"?: "none" | "list" | "inline" | "both" | undefined;
23
+ "aria-busy"?: (boolean | "false" | "true") | undefined;
24
+ "aria-checked"?: boolean | "mixed" | "false" | "true" | undefined;
25
+ "aria-colcount"?: number | undefined;
26
+ "aria-colindex"?: number | undefined;
27
+ "aria-colspan"?: number | undefined;
28
+ "aria-controls"?: string | undefined;
29
+ "aria-current"?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date" | undefined;
30
+ "aria-describedby"?: string | undefined;
31
+ "aria-details"?: string | undefined;
32
+ "aria-disabled"?: (boolean | "false" | "true") | undefined;
33
+ "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
34
+ "aria-errormessage"?: string | undefined;
35
+ "aria-expanded"?: (boolean | "false" | "true") | undefined;
36
+ "aria-flowto"?: string | undefined;
37
+ "aria-grabbed"?: (boolean | "false" | "true") | undefined;
38
+ "aria-haspopup"?: boolean | "dialog" | "menu" | "grid" | "listbox" | "false" | "true" | "tree" | undefined;
39
+ "aria-hidden"?: (boolean | "false" | "true") | undefined;
40
+ "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
41
+ "aria-keyshortcuts"?: string | undefined;
42
+ "aria-label"?: string | undefined;
43
+ "aria-labelledby"?: string | undefined;
44
+ "aria-level"?: number | undefined;
45
+ "aria-live"?: "off" | "assertive" | "polite" | undefined;
46
+ "aria-modal"?: (boolean | "false" | "true") | undefined;
47
+ "aria-multiline"?: (boolean | "false" | "true") | undefined;
48
+ "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
49
+ "aria-orientation"?: "horizontal" | "vertical" | undefined;
50
+ "aria-owns"?: string | undefined;
51
+ "aria-placeholder"?: string | undefined;
52
+ "aria-posinset"?: number | undefined;
53
+ "aria-pressed"?: boolean | "mixed" | "false" | "true" | undefined;
54
+ "aria-readonly"?: (boolean | "false" | "true") | undefined;
55
+ "aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
56
+ "aria-required"?: (boolean | "false" | "true") | undefined;
57
+ "aria-roledescription"?: string | undefined;
58
+ "aria-rowcount"?: number | undefined;
59
+ "aria-rowindex"?: number | undefined;
60
+ "aria-rowspan"?: number | undefined;
61
+ "aria-selected"?: (boolean | "false" | "true") | undefined;
62
+ "aria-setsize"?: number | undefined;
63
+ "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
64
+ "aria-valuemax"?: number | undefined;
65
+ "aria-valuemin"?: number | undefined;
66
+ "aria-valuenow"?: number | undefined;
67
+ "aria-valuetext"?: string | undefined;
68
+ children?: import("react").ReactNode;
69
+ dangerouslySetInnerHTML?: {
70
+ __html: string;
71
+ } | undefined;
72
+ onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
73
+ onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
74
+ onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
75
+ onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
76
+ onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
77
+ onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
78
+ onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
79
+ onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
80
+ onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
81
+ onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
82
+ onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
83
+ onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
84
+ onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
85
+ onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
86
+ onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
87
+ onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
88
+ onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
89
+ onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
90
+ onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
91
+ onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
92
+ onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
93
+ onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
94
+ onReset?: import("react").FormEventHandler<HTMLDivElement> | undefined;
95
+ onResetCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
96
+ onSubmit?: import("react").FormEventHandler<HTMLDivElement> | undefined;
97
+ onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
98
+ onInvalid?: import("react").FormEventHandler<HTMLDivElement> | undefined;
99
+ onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
100
+ onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
101
+ onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
102
+ onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
103
+ onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
104
+ onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
105
+ onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
106
+ onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
107
+ onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
108
+ onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
109
+ onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
110
+ onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
111
+ onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
112
+ onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
113
+ onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
114
+ onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
115
+ onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
116
+ onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
117
+ onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
118
+ onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
119
+ onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
120
+ onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
121
+ onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
122
+ onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
123
+ onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
124
+ onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
125
+ onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
126
+ onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
127
+ onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
128
+ onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
129
+ onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
130
+ onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
131
+ onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
132
+ onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
133
+ onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
134
+ onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
135
+ onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
136
+ onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
137
+ onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
138
+ onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
139
+ onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
140
+ onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
141
+ onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
142
+ onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
143
+ onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
144
+ onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
145
+ onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
146
+ onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
147
+ onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
148
+ onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
149
+ onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
150
+ onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
151
+ onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
152
+ onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
153
+ onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
154
+ onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
155
+ onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
156
+ onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
157
+ onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
158
+ onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
159
+ onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
160
+ onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
161
+ onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
162
+ onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
163
+ onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
164
+ onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
165
+ onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
166
+ onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
167
+ onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
168
+ onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
169
+ onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
170
+ onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
171
+ onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
172
+ onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
173
+ onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
174
+ onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
175
+ onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
176
+ onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
177
+ onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
178
+ onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
179
+ onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
180
+ onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
181
+ onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
182
+ onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
183
+ onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
184
+ onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
185
+ onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
186
+ onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
187
+ onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
188
+ onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
189
+ onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
190
+ onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
191
+ onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
192
+ onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
193
+ onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
194
+ onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
195
+ onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
196
+ onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
197
+ onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
198
+ onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
199
+ onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
200
+ onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
201
+ onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
202
+ onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
203
+ onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
204
+ onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
205
+ onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
206
+ onPointerEnterCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
207
+ onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
208
+ onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
209
+ onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
210
+ onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
211
+ onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
212
+ onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
213
+ onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
214
+ onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
215
+ onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
216
+ onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
217
+ onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
218
+ onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
219
+ onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
220
+ onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
221
+ onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
222
+ onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
223
+ onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
224
+ onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
225
+ onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
226
+ onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
227
+ onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
228
+ defaultChecked?: boolean | undefined;
229
+ defaultValue?: string | number | readonly string[] | undefined;
230
+ suppressContentEditableWarning?: boolean | undefined;
231
+ suppressHydrationWarning?: boolean | undefined;
232
+ accessKey?: string | undefined;
233
+ contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
234
+ contextMenu?: string | undefined;
235
+ dir?: string | undefined;
236
+ draggable?: (boolean | "false" | "true") | undefined;
237
+ placeholder?: string | undefined;
238
+ spellCheck?: (boolean | "false" | "true") | undefined;
239
+ radioGroup?: string | undefined;
240
+ about?: string | undefined;
241
+ datatype?: string | undefined;
242
+ inlist?: any;
243
+ prefix?: string | undefined;
244
+ property?: string | undefined;
245
+ resource?: string | undefined;
246
+ typeof?: string | undefined;
247
+ vocab?: string | undefined;
248
+ autoCapitalize?: string | undefined;
249
+ autoCorrect?: string | undefined;
250
+ autoSave?: string | undefined;
251
+ itemProp?: string | undefined;
252
+ itemScope?: boolean | undefined;
253
+ itemType?: string | undefined;
254
+ itemID?: string | undefined;
255
+ itemRef?: string | undefined;
256
+ results?: number | undefined;
257
+ security?: string | undefined;
258
+ unselectable?: "off" | "on" | undefined;
259
+ inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
260
+ is?: string | undefined;
261
+ } & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement> & {
262
+ theme?: import("@emotion/react").Theme | undefined;
263
+ } & OptionsContainerProps, {}, {}>;
264
+ export {};
265
+ //# sourceMappingURL=styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/components/OptionsSelect/styles.ts"],"names":[],"mappings":";AAIA,UAAU,qBAAqB;IAC7B,IAAI,EAAE,OAAO,CAAC;IAEd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCAoC3B,CAAC"}
@@ -0,0 +1,32 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.OptionsContainer = void 0;
7
+
8
+ var _react = require("@emotion/react");
9
+
10
+ var _styled = _interopRequireDefault(require("@emotion/styled"));
11
+
12
+ var _framerMotion = require("framer-motion");
13
+
14
+ var _templateObject;
15
+
16
+ var _excluded = ["theme"];
17
+
18
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
+
20
+ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
21
+
22
+ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
23
+
24
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
25
+
26
+ var OptionsContainer = (0, _styled.default)(_framerMotion.motion.div)(function (_ref) {
27
+ var theme = _ref.theme,
28
+ props = _objectWithoutProperties(_ref, _excluded);
29
+
30
+ return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: ", ";\n max-height: calc(", " - 20px);\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: ", ";\n opacity: ", ";\n pointer-events: ", ";\n transition: opacity ease ", ";\n overflow-y: auto;\n overflow-x: hidden;\n background: ", ";\n border: 2px solid ", ";\n border-radius: ", ";\n\n &::-webkit-scrollbar {\n width: 6px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: ", ";\n background: ", ";\n }\n li {\n list-style: none;\n }\n "])), props.maxWidth, props.maxHeight, props.left, props.top, theme.zIndex.level24, props.open ? 1 : 0, props.open ? 'auto' : 'none', theme.transition.speed, theme.colors.background.light, theme.colors.neutral.neutral1, theme.borderRadius.default, theme.borderRadius.default, theme.colors.primary.default);
31
+ });
32
+ exports.OptionsContainer = OptionsContainer;
@@ -0,0 +1,16 @@
1
+ import { HTMLAttributes } from 'react';
2
+ export interface OptionsSelectProps extends HTMLAttributes<HTMLDivElement> {
3
+ /** If the modal is open or not. */
4
+ open: boolean;
5
+ /** Optional. Sets the left position where the modal will be shown. */
6
+ left?: string;
7
+ /** Optional. Sets the top position where the modal will be shown. */
8
+ top?: string;
9
+ /** Optional. Offsets the Modal horizontally. */
10
+ offsetX?: string;
11
+ /** The max width of the Modal. */
12
+ maxWidth?: string | number;
13
+ /** Optional. Will disable the scroll body scroll. */
14
+ disableScrollOnOpen?: boolean;
15
+ }
16
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/components/OptionsSelect/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACxE,mCAAmC;IACnC,IAAI,EAAE,OAAO,CAAC;IAEd,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE3B,qDAAqD;IACrD,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,mBAAmB,EAKpB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAQtC,QAAA,MAAM,MAAM,kJAqIX,CAAC;AAGF,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,mBAAmB,EAOpB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,QAAA,MAAM,MAAM,kJA0KX,CAAC;AAGF,eAAe,MAAM,CAAC"}
@@ -7,17 +7,17 @@ exports.default = void 0;
7
7
 
8
8
  var _react = require("react");
9
9
 
10
- var _styles = require("./styles");
10
+ var _Icon = _interopRequireDefault(require("../Icon"));
11
11
 
12
12
  var _Typography = _interopRequireDefault(require("../Typography"));
13
13
 
14
- var _Icon = _interopRequireDefault(require("../Icon"));
14
+ var _OptionsSelect = require("./components/OptionsSelect");
15
15
 
16
- var _List = _interopRequireDefault(require("../List"));
16
+ var _styles = require("./styles");
17
17
 
18
18
  var _jsxRuntime = require("react/jsx-runtime");
19
19
 
20
- var _excluded = ["label", "placeholder", "options", "alert", "helperText", "width"];
20
+ var _excluded = ["label", "placeholder", "options", "alert", "helperText", "width", "sizeSelect"];
21
21
 
22
22
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
23
23
 
@@ -44,15 +44,17 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
44
44
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
45
45
 
46
46
  var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
47
- var _containerRef$current, _containerRef$current2, _containerRef$current3, _containerRef$current4;
47
+ var _containerRef$current, _optionsModalRef$curr, _containerRef$current3, _containerRef$current4, _containerRef$current5, _containerRef$current6;
48
48
 
49
- var label = _ref.label,
49
+ var _ref$label = _ref.label,
50
+ label = _ref$label === void 0 ? '' : _ref$label,
50
51
  _ref$placeholder = _ref.placeholder,
51
52
  placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
52
53
  options = _ref.options,
53
54
  alert = _ref.alert,
54
55
  helperText = _ref.helperText,
55
56
  width = _ref.width,
57
+ sizeSelect = _ref.sizeSelect,
56
58
  rest = _objectWithoutProperties(_ref, _excluded);
57
59
 
58
60
  var containerRef = (0, _react.useRef)(null);
@@ -89,9 +91,9 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
89
91
  inputRef.current.dispatchEvent(event);
90
92
  }
91
93
 
94
+ setOptionsMenuOpen(false);
92
95
  setSelectedOption(option);
93
96
  setFilled(option !== undefined);
94
- setOptionsMenuOpen(false);
95
97
  } // Sets default value
96
98
 
97
99
 
@@ -116,21 +118,56 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
116
118
  if (optionIndex >= 0) selectOption(optionIndex);
117
119
  }
118
120
  });
121
+
122
+ var _useState7 = (0, _react.useState)((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect().top),
123
+ _useState8 = _slicedToArray(_useState7, 2),
124
+ positionContainer = _useState8[0],
125
+ setPositionContainer = _useState8[1];
126
+
127
+ var optionsModalRef = (0, _react.useRef)(null);
128
+
129
+ var _useState9 = (0, _react.useState)((_optionsModalRef$curr = optionsModalRef.current) === null || _optionsModalRef$curr === void 0 ? void 0 : _optionsModalRef$curr.getBoundingClientRect().height),
130
+ _useState10 = _slicedToArray(_useState9, 2),
131
+ heightModal = _useState10[0],
132
+ setHeightModal = _useState10[1];
133
+
134
+ function handleRepositionModal() {
135
+ var _containerRef$current2, _optionsModalRef$curr2;
136
+
137
+ setPositionContainer((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.getBoundingClientRect().top);
138
+ setHeightModal((_optionsModalRef$curr2 = optionsModalRef.current) === null || _optionsModalRef$curr2 === void 0 ? void 0 : _optionsModalRef$curr2.getBoundingClientRect().height);
139
+ }
140
+
141
+ (0, _react.useEffect)(function () {
142
+ document.addEventListener('click', function () {
143
+ return setOptionsMenuOpen(false);
144
+ });
145
+ return function () {
146
+ return document.removeEventListener('click', function () {
147
+ return setOptionsMenuOpen(false);
148
+ });
149
+ };
150
+ }, []);
151
+ var toggleOptionsAreaView = (0, _react.useCallback)(function (event) {
152
+ event.stopPropagation();
153
+ handleRepositionModal();
154
+ setOptionsMenuOpen(!optionsMenuOpen);
155
+ }, [optionsMenuOpen]);
119
156
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
120
157
  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.SelectContainer, {
158
+ size: sizeSelect || 'md',
121
159
  filled: filled || !!placeholder,
122
160
  alert: alert,
123
161
  disabled: !!rest.disabled,
124
162
  width: width,
125
163
  tabIndex: rest.disabled ? -1 : 0,
126
- onFocus: function onFocus() {
127
- if (!rest.disabled) setOptionsMenuOpen(true);
128
- },
164
+ onMouseOver: handleRepositionModal,
165
+ onClick: toggleOptionsAreaView,
129
166
  className: rest.className,
130
167
  style: rest.style,
131
168
  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
132
169
  ref: containerRef,
133
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
170
+ children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
134
171
  children: label
135
172
  }), selectedOption === undefined ?
136
173
  /*#__PURE__*/
@@ -174,35 +211,27 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
174
211
  ref: inputRef,
175
212
  tabIndex: -1
176
213
  }, rest))]
177
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.OptionsModal, {
214
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_OptionsSelect.OptionsSelect, {
178
215
  open: optionsMenuOpen,
179
- left: "".concat((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect().left, "px"),
180
- top: "".concat((((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.getBoundingClientRect().top) || 0) + 10, "px"),
181
- anchorX: "left",
182
- anchorY: "top",
183
- offsetY: "".concat((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.getBoundingClientRect().height, "px"),
184
- maxWidth: "".concat((_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.getBoundingClientRect().width, "px"),
185
- hideOverlay: true,
186
- onClose: function onClose() {
187
- return setOptionsMenuOpen(false);
188
- },
189
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.OptionsModalList, {
190
- children: [!!placeholder && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.OptionPlaceholder, {
191
- item: true,
216
+ left: "".concat((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.getBoundingClientRect().left, "px"),
217
+ top: Number(positionContainer) < 470 ? "calc(".concat(((_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.getBoundingClientRect().bottom) || 0, "px + 10px)") : "calc(".concat(((_containerRef$current5 = containerRef.current) === null || _containerRef$current5 === void 0 ? void 0 : _containerRef$current5.getBoundingClientRect().top) || 0, "px - ").concat(heightModal && heightModal + 10, "px)"),
218
+ ref: optionsModalRef,
219
+ maxWidth: "".concat((_containerRef$current6 = containerRef.current) === null || _containerRef$current6 === void 0 ? void 0 : _containerRef$current6.getBoundingClientRect().width, "px"),
220
+ children: [!!placeholder && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.OptionPlaceholder, {
221
+ item: true,
222
+ onClick: function onClick() {
223
+ return selectOption(undefined);
224
+ },
225
+ children: placeholder
226
+ }), options.map(function (option, i) {
227
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Option, {
228
+ sizeSelect: sizeSelect,
192
229
  onClick: function onClick() {
193
- return selectOption(undefined);
230
+ selectOption(i);
194
231
  },
195
- children: placeholder
196
- }), options.map(function (option, i) {
197
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.default, {
198
- item: true,
199
- onClick: function onClick() {
200
- return selectOption(i);
201
- },
202
- children: option.label
203
- }, option.value);
204
- })]
205
- })
232
+ children: option.label
233
+ }, option.value);
234
+ })]
206
235
  })]
207
236
  });
208
237
  });
@@ -50,4 +50,18 @@ describe('Select', function () {
50
50
 
51
51
  expect(input === null || input === void 0 ? void 0 : input.value).toBe('option-1');
52
52
  });
53
+ it('Should render a select with sm size', function () {
54
+ var container = setup({
55
+ sizeSelect: 'sm',
56
+ label: 'Select',
57
+ options: [{
58
+ label: 'Option 1',
59
+ value: 'option-1'
60
+ }]
61
+ });
62
+ expect(container.container.childNodes[0]).toHaveStyle({
63
+ height: '36px',
64
+ width: '78px'
65
+ });
66
+ });
53
67
  });
@@ -1,17 +1,15 @@
1
1
  /// <reference types="react" />
2
- import { SelectContainerProps } from './types';
2
+ import { SelectContainerProps, sizeSelect } from './types';
3
3
  export declare const SelectContainer: import("@emotion/styled").StyledComponent<{
4
4
  theme?: import("@emotion/react").Theme | undefined;
5
5
  as?: import("react").ElementType<any> | undefined;
6
6
  } & SelectContainerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
7
- export declare const OptionsModal: import("@emotion/styled").StyledComponent<import("../Modal/types").ModalProps & {
7
+ export declare const Option: import("@emotion/styled").StyledComponent<{
8
8
  theme?: import("@emotion/react").Theme | undefined;
9
- }, {}, {}>;
10
- export declare const OptionsModalList: import("@emotion/styled").StyledComponent<import("../List/types").ListProps & {
11
- children?: import("react").ReactNode;
9
+ as?: import("react").ElementType<any> | undefined;
12
10
  } & {
13
- theme?: import("@emotion/react").Theme | undefined;
14
- }, {}, {}>;
11
+ sizeSelect?: sizeSelect | undefined;
12
+ }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
15
13
  export declare const OptionPlaceholder: import("@emotion/styled").StyledComponent<import("../List/types").ListProps & {
16
14
  children?: import("react").ReactNode;
17
15
  } & {
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Select/styles.ts"],"names":[],"mappings":";AAKA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,eAAe;;;gIAyL1B,CAAC;AAEH,eAAO,MAAM,YAAY;;UAKvB,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;UAI3B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;UAI5B,CAAC"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Select/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE3D,eAAO,MAAM,eAAe;;;gIAgK1B,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;yGAwBjB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;UAI5B,CAAC"}