kelt-ui-kit-react 2.0.2 → 2.0.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 (39) hide show
  1. package/dist/card/Card.d.ts +4 -1
  2. package/dist/expands/Expands.d.ts +1 -0
  3. package/dist/expands/expand/expand.d.ts +2 -1
  4. package/dist/form/Form.d.ts +6 -0
  5. package/dist/form/form.interface.d.ts +5 -3
  6. package/dist/grid/Grid.d.ts +5 -2
  7. package/dist/grid/col/colStyled/ColStyled.d.ts +2 -1
  8. package/dist/grid/grid.interface.d.ts +12 -1
  9. package/dist/grid/row/Row.d.ts +7 -0
  10. package/dist/index.js +3043 -2884
  11. package/dist/overlayPanel/OverlayPanel.d.ts +4 -2
  12. package/dist/overlayPanel/overlayPanelStyled/OverlayPanelStyled.d.ts +2 -0
  13. package/dist/select/Select.d.ts +6 -1
  14. package/dist/select/selectOption.interface.d.ts +1 -0
  15. package/dist/style.css +1 -1
  16. package/package.json +1 -1
  17. package/src/card/Card.tsx +37 -11
  18. package/src/card/card.css +2 -3
  19. package/src/expands/Expands.tsx +2 -0
  20. package/src/expands/expand/expand.tsx +7 -1
  21. package/src/form/Form.tsx +42 -12
  22. package/src/form/form.css +15 -2
  23. package/src/form/form.interface.tsx +5 -3
  24. package/src/form/input/input.css +6 -2
  25. package/src/grid/Grid.tsx +34 -21
  26. package/src/grid/col/Col.tsx +24 -13
  27. package/src/grid/col/col.css +3 -0
  28. package/src/grid/col/colStyled/ColStyled.tsx +59 -55
  29. package/src/grid/container/container.css +2 -2
  30. package/src/grid/grid.interface.tsx +15 -1
  31. package/src/grid/row/Row.tsx +49 -12
  32. package/src/grid/row/row.css +9 -1
  33. package/src/overlayPanel/OverlayPanel.tsx +71 -18
  34. package/src/overlayPanel/overlay.context.tsx +6 -4
  35. package/src/overlayPanel/overlayPanel.css +10 -1
  36. package/src/overlayPanel/overlayPanelStyled/OverlayPanelStyled.tsx +7 -2
  37. package/src/select/Select.tsx +178 -39
  38. package/src/select/select.css +94 -13
  39. package/src/select/selectOption.interface.ts +1 -0
package/src/select/select.css CHANGED
@@ -1,5 +1,6 @@
1
1
  .select-container {
2
2
  position: relative;
3
+
3
4
  &::after,
4
5
  &::before {
5
6
  --size: 0.3rem;
@@ -8,23 +9,19 @@
8
9
  right: 1rem;
9
10
  pointer-events: none;
10
11
  }
11
- select:has(option[value=""]:checked) {
12
- color: gray;
13
- }
14
- option {
15
- color: #000;
16
- }
12
+
17
13
  .clear-btn {
18
14
  position: absolute;
19
- top: 2px;
15
+ top: 50%;
16
+ transform: translateY(-50%);
20
17
  display: flex;
21
18
  align-items: center;
22
19
  z-index: 2;
23
20
  justify-content: center;
24
- bottom: 0;
25
- right: 30px;
21
+ right: 10px;
26
22
  cursor: pointer;
27
23
  }
24
+
28
25
  &::before {
29
26
  border-left: var(--size) solid transparent;
30
27
  border-right: var(--size) solid transparent;
@@ -38,15 +35,18 @@
38
35
  border-top: var(--size) solid black;
39
36
  top: 55%;
40
37
  }
38
+
41
39
  .select-container-label {
42
40
  font-weight: bold;
43
41
  color: #333;
44
42
  margin-bottom: 2px;
43
+ display: block;
45
44
  }
46
- .select-container-select {
45
+
46
+ .select-container-button {
47
47
  appearance: none;
48
48
  width: 100%;
49
- font-size: 1rem;
49
+ font-size: 0.8rem;
50
50
  padding: 0.5rem 1rem;
51
51
  margin: 0.25rem 0;
52
52
  background-color: #fff;
@@ -54,16 +54,97 @@
54
54
  border-radius: 0.25rem;
55
55
  color: #000;
56
56
  cursor: pointer;
57
- font-size: 0.8rem;
57
+ text-align: left;
58
+ display: flex;
59
+ align-items: center;
60
+ justify-content: space-between;
61
+ padding-right: 2rem;
62
+
63
+ .select-container-value {
64
+ flex: 1;
65
+ min-width: 0;
66
+ overflow: hidden;
67
+ white-space: nowrap;
68
+ text-overflow: ellipsis;
69
+
70
+ .placeholder {
71
+ color: gray;
72
+ }
73
+ }
74
+
58
75
  &:disabled {
59
76
  background-color: #e9ecef;
60
77
  color: #6c757d;
61
78
  cursor: not-allowed;
62
79
  }
80
+
63
81
  &:focus {
64
- border-color: #007bff;
65
82
  outline: none;
66
83
  background-color: #fff;
67
84
  }
85
+
86
+
68
87
  }
69
88
  }
89
+
90
+ .select-overlay-options {
91
+ display: flex;
92
+ flex-direction: column;
93
+ max-height: 300px;
94
+ overflow-y: auto;
95
+ padding: 0.5rem 0;
96
+ background-color: #fff;
97
+ border: 1px solid #b2a1a1;
98
+ border-radius: 0.25rem;
99
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
100
+
101
+ .select-overlay-option {
102
+ padding: 0.5rem 1rem;
103
+ cursor: pointer;
104
+ display: flex;
105
+ align-items: center;
106
+ gap: 0.5rem;
107
+ user-select: none;
108
+
109
+ .select-overlay-checkbox {
110
+ min-width: 20px;
111
+ width: 20px;
112
+ cursor: pointer;
113
+ }
114
+
115
+ &:hover {
116
+ background-color: #f0f0f0;
117
+ }
118
+
119
+ &.selected {
120
+ background-color: #e7f3ff;
121
+ color: #007bff;
122
+ }
123
+ }
124
+ }
125
+
126
+ .select-overlay-search {
127
+ padding-bottom: 0.5rem;
128
+ /* laisse la place à la croix de fermeture de l'overlay (.toggle-btn) */
129
+ padding-right: 1.5rem;
130
+
131
+ input {
132
+ width: 100%;
133
+ box-sizing: border-box;
134
+ font-size: 0.8rem;
135
+ padding: 0.4rem 0.75rem;
136
+ border: 1px solid #b2a1a1;
137
+ border-radius: 0.25rem;
138
+
139
+ &:focus {
140
+ outline: none;
141
+ border-color: #888;
142
+ }
143
+ }
144
+ }
145
+
146
+ .select-overlay-empty {
147
+ padding: 0.5rem 1rem;
148
+ color: gray;
149
+ font-size: 0.8rem;
150
+ }
package/src/select/selectOption.interface.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export interface SelectOptionInterface {
2
2
  value: string;
3
3
  label: string;
4
+ disabled?: boolean;
4
5
  }