@ntbjs/react-components 2.0.1-rc.31 → 2.0.2-rc.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.
- package/build/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.js.map +1 -1
- package/build/inputs/MultiSelect/MultiSelect.js +227 -115
- package/build/inputs/MultiSelect/MultiSelect.js.map +1 -1
- package/build/inputs/MultiSelect/MultiSelect.styled.js +72 -175
- package/build/inputs/MultiSelect/MultiSelect.styled.js.map +1 -1
- package/build/inputs/Radio/Radio.js +13 -4
- package/build/inputs/Radio/Radio.js.map +1 -1
- package/build/inputs/Radio/Radio.styled.js +40 -23
- package/build/inputs/Radio/Radio.styled.js.map +1 -1
- package/build/styles/.config.scss +2 -2
- package/build/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.js +2 -2
- package/build/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.js.map +1 -1
- package/build/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.styled.js +7 -7
- package/build/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.styled.js.map +1 -1
- package/build/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.styled.js +0 -4
- package/build/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.styled.js.map +1 -1
- package/package.json +11 -4
- package/styles/.config.scss +2 -2
|
@@ -1,224 +1,121 @@
|
|
|
1
1
|
import styled, { css } from 'styled-components';
|
|
2
2
|
import { applyDefaultTheme } from '../../utils/defaultTheme.js';
|
|
3
3
|
import { ReactComponent as SvgClose } from '../../icons/close.svg.js';
|
|
4
|
-
import Select
|
|
4
|
+
import Select from 'react-select';
|
|
5
5
|
import CreatableSelect from 'react-select/creatable';
|
|
6
6
|
import { withAsyncPaginate, AsyncPaginate } from 'react-select-async-paginate';
|
|
7
7
|
|
|
8
8
|
const AsyncCreatableSelectPaginate = withAsyncPaginate(CreatableSelect);
|
|
9
9
|
const showMoreHeight = 114;
|
|
10
|
-
const
|
|
11
|
-
font-family: ${props => props.theme.primaryFontFamily};
|
|
12
|
-
font-size: 12px;
|
|
13
|
-
font-weight: 400;
|
|
10
|
+
const MultiSelectWrapper = styled.div`
|
|
14
11
|
position: relative;
|
|
12
|
+
/* Targets internal container to ensure overlay is visible even if library tries to clip it */
|
|
13
|
+
& [class*='ValueContainer'] {
|
|
14
|
+
overflow: visible !important;
|
|
15
|
+
}
|
|
15
16
|
`;
|
|
16
|
-
styled.label.attrs(applyDefaultTheme)`
|
|
17
|
+
const Label = styled.label.attrs(applyDefaultTheme)`
|
|
17
18
|
${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))};
|
|
18
|
-
flex-basis: 33.33%;
|
|
19
19
|
font-size: 0.875rem;
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
height: 19px;
|
|
23
|
-
display: flex;
|
|
24
|
-
align-items: center;
|
|
25
|
-
`;
|
|
26
|
-
const MultiSelect = styled(Select).attrs(applyDefaultTheme)`
|
|
27
|
-
${sharedStyle}
|
|
28
|
-
`;
|
|
29
|
-
const CreatableMultiSelect = styled(CreatableSelect).attrs(applyDefaultTheme)`
|
|
30
|
-
${sharedStyle}
|
|
31
|
-
`;
|
|
32
|
-
const AsyncCreatableMultiSelect = styled(AsyncCreatableSelectPaginate).attrs(applyDefaultTheme)`
|
|
33
|
-
${sharedStyle}
|
|
34
|
-
`;
|
|
35
|
-
const AsyncMultiSelect = styled(AsyncPaginate).attrs(applyDefaultTheme)`
|
|
36
|
-
${sharedStyle}
|
|
37
|
-
`;
|
|
38
|
-
const MultiSelectWrapper = styled.div.attrs(applyDefaultTheme)`
|
|
39
|
-
position: relative;
|
|
20
|
+
margin-bottom: 4px;
|
|
21
|
+
display: block;
|
|
40
22
|
`;
|
|
41
|
-
styled
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
background: transparent;
|
|
45
|
-
border: none;
|
|
46
|
-
box-shadow: none;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
:hover {
|
|
50
|
-
cursor: ${props => !props.isDisabled && props.focused || props.readOnly ? 'default' : 'pointer'};
|
|
23
|
+
const Control = styled.div`
|
|
24
|
+
& > div {
|
|
25
|
+
cursor: ${props => props.$readOnly ? 'default' : 'pointer'};
|
|
51
26
|
}
|
|
52
27
|
`;
|
|
53
|
-
styled(
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
border: 1px solid;
|
|
65
|
-
border-radius: 3px;
|
|
66
|
-
padding: 4px;
|
|
67
|
-
|
|
68
|
-
border-color: ${props => props.$error ? props.theme.getColor('red-500') : props.warning ? props.theme.getColor('orange-500') : 'inherit'};
|
|
69
|
-
`}
|
|
70
|
-
}
|
|
28
|
+
const ValueContainer = styled.div.attrs(applyDefaultTheme)`
|
|
29
|
+
display: flex;
|
|
30
|
+
flex-wrap: wrap;
|
|
31
|
+
gap: 8px;
|
|
32
|
+
max-height: ${props => props.$showMore ? props.$error || props.$warning ? 'none' : `${showMoreHeight + 16}px` : 'none'};
|
|
33
|
+
${props => (props.$error || props.$warning) && css`
|
|
34
|
+
border: 1px solid;
|
|
35
|
+
border-radius: 3px;
|
|
36
|
+
padding: 4px;
|
|
37
|
+
border-color: ${props.$error ? props.theme.getColor('red-500') : props.theme.getColor('orange-500')};
|
|
38
|
+
`}
|
|
71
39
|
`;
|
|
72
|
-
const MultiValueWrapper = styled.div
|
|
73
|
-
|
|
74
|
-
border-radius: 3px;
|
|
75
|
-
margin: 0;
|
|
76
|
-
}
|
|
40
|
+
const MultiValueWrapper = styled.div`
|
|
41
|
+
margin: 0;
|
|
77
42
|
`;
|
|
78
|
-
const
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
${props => props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-800'))}
|
|
84
|
-
|
|
85
|
-
${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-100'))}
|
|
86
|
-
|
|
87
|
-
> div {
|
|
88
|
-
align-items: center;
|
|
89
|
-
display: flex;
|
|
90
|
-
font-size: 12px;
|
|
91
|
-
min-height: 26px;
|
|
92
|
-
|
|
93
|
-
:first-of-type {
|
|
94
|
-
padding: ${props => props.isDisabled || props.readOnly ? '0 8px' : '0 3px 0 8px'};
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
:last-of-type:not(:only-child) {
|
|
98
|
-
padding: 0 8px 0 5px;
|
|
99
|
-
height: 100%;
|
|
100
|
-
width: fit-content;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
:last-of-type:not(:only-child):hover {
|
|
104
|
-
background-color: ${props => props.theme.getColor('red-500')};
|
|
105
|
-
border-bottom-left-radius: 0;
|
|
106
|
-
border-top-left-radius: 0;
|
|
107
|
-
cursor: pointer;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
svg {
|
|
111
|
-
stroke: white;
|
|
112
|
-
stroke-width: 2px;
|
|
113
|
-
width: 8px;
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
:hover {
|
|
117
|
-
cursor: pointer;
|
|
118
|
-
}
|
|
119
|
-
}
|
|
43
|
+
const MultiValueRemoveIcon = styled(SvgClose)`
|
|
44
|
+
width: 8px;
|
|
45
|
+
stroke: white;
|
|
46
|
+
stroke-width: 2px;
|
|
120
47
|
`;
|
|
121
|
-
const
|
|
122
|
-
styled(components.Input).attrs(applyDefaultTheme)`
|
|
123
|
-
align-self: center;
|
|
124
|
-
font-size: ${props => props.$focused ? '14px' : '12px'};
|
|
48
|
+
const InputWrapper = styled.div.attrs(applyDefaultTheme)`
|
|
125
49
|
min-width: 150px;
|
|
126
|
-
|
|
127
|
-
${props => props
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
content: '${props => props.edittext}';
|
|
50
|
+
position: relative;
|
|
51
|
+
${props => !props.$focused && props.$editText && css`
|
|
52
|
+
&::before {
|
|
53
|
+
content: '${props.$editText}';
|
|
54
|
+
color: ${p => p.theme.getColor('gray-400')};
|
|
55
|
+
font-size: 12px;
|
|
56
|
+
position: absolute;
|
|
57
|
+
top: 50%;
|
|
58
|
+
transform: translateY(-50%);
|
|
59
|
+
pointer-events: none;
|
|
137
60
|
}
|
|
138
61
|
`}
|
|
62
|
+
input {
|
|
63
|
+
color: ${props => props.theme.themeProp(props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))} !important;
|
|
139
64
|
}
|
|
140
65
|
`;
|
|
141
|
-
const
|
|
66
|
+
const OptionContent = styled.div`
|
|
67
|
+
display: flex;
|
|
68
|
+
justify-content: space-between;
|
|
69
|
+
align-items: center;
|
|
70
|
+
padding: 8px 12px;
|
|
71
|
+
width: 100%;
|
|
142
72
|
font-size: 14px;
|
|
143
|
-
|
|
144
|
-
${props => props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('white'))}
|
|
145
|
-
|
|
146
|
-
${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))}
|
|
73
|
+
color: inherit;
|
|
147
74
|
`;
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
${props => props.isSelected && css`
|
|
154
|
-
${props.theme.themeProp('background-color', 'transparent', 'transparent')}
|
|
155
|
-
|
|
156
|
-
${props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))}
|
|
157
|
-
`}
|
|
158
|
-
|
|
159
|
-
${props => props.isFocused && props.isSelected && css`
|
|
160
|
-
${props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200'))}
|
|
161
|
-
`}
|
|
162
|
-
|
|
163
|
-
:hover {
|
|
164
|
-
cursor: pointer;
|
|
75
|
+
styled.div`
|
|
76
|
+
[class*='menu'] {
|
|
77
|
+
z-index: 9999 !important;
|
|
78
|
+
border-radius: 4px;
|
|
165
79
|
}
|
|
166
80
|
`;
|
|
167
|
-
const Option = styled(components.Option).attrs(applyDefaultTheme)`
|
|
168
|
-
${sharedOptionStyle}
|
|
169
|
-
`;
|
|
170
|
-
const SelectedOption = styled(components.Option).attrs(applyDefaultTheme)`
|
|
171
|
-
${sharedOptionStyle}
|
|
172
|
-
|
|
173
|
-
display: flex !important;
|
|
174
|
-
justify-content: space-between;
|
|
175
|
-
`;
|
|
176
81
|
const DropdownOptionDeleteIcon = styled(SvgClose).attrs(applyDefaultTheme)`
|
|
177
|
-
stroke-width: 1px;
|
|
178
82
|
width: 8px;
|
|
179
|
-
|
|
180
|
-
${props => props.theme.themeProp('stroke', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))}
|
|
83
|
+
stroke: ${props => props.theme.themeProp(props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))};
|
|
181
84
|
`;
|
|
182
85
|
const ShowMoreWrapper = styled.div.attrs(applyDefaultTheme)`
|
|
183
|
-
align-items: end;
|
|
184
|
-
display: flex;
|
|
185
|
-
flex-direction: column;
|
|
186
|
-
height: 100%;
|
|
187
|
-
left: 0;
|
|
188
86
|
position: absolute;
|
|
189
|
-
max-height: ${showMoreHeight + 16}px;
|
|
190
87
|
top: 0;
|
|
88
|
+
left: 0;
|
|
191
89
|
width: 100%;
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
:
|
|
90
|
+
height: 100%;
|
|
91
|
+
display: flex;
|
|
92
|
+
flex-direction: column;
|
|
93
|
+
justify-content: flex-end;
|
|
94
|
+
z-index: 50;
|
|
95
|
+
color: ${props => props.theme.themeProp(props.theme.getColor('gray-100'), props.theme.getColor('emerald-500'))};
|
|
96
|
+
&:hover {
|
|
196
97
|
cursor: pointer;
|
|
197
98
|
text-decoration: underline;
|
|
198
99
|
}
|
|
199
100
|
`;
|
|
200
101
|
const ShowMoreOverlay = styled.div.attrs(applyDefaultTheme)`
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
height: 100%;
|
|
204
|
-
max-height: ${showMoreHeight}px;
|
|
205
|
-
left: 0;
|
|
206
|
-
top: 0;
|
|
207
|
-
width: 100%;
|
|
208
|
-
|
|
209
|
-
${props => props.theme.themeProp('background', 'transparent linear-gradient(180deg, #12121200 0%, #12121230 40%, #12121279 70%, #121212 95%, #121212 100%) 0% 0% no-repeat padding-box', 'transparent linear-gradient(180deg, #fefefe00 0%, #fefefe30 40%, #fefefe79 70%, #fefefe 95%, #fefefe 100%) 0% 0% no-repeat padding-box')}
|
|
102
|
+
flex: 1;
|
|
103
|
+
background: ${props => props.theme.themeProp('linear-gradient(180deg, #12121200 0%, #121212 100%)', 'linear-gradient(180deg, #fefefe00 0%, #fefefe 100%)')};
|
|
210
104
|
`;
|
|
211
105
|
const ShowMoreText = styled.div.attrs(applyDefaultTheme)`
|
|
106
|
+
background-color: ${props => props.theme.themeProp('#121212', '#fefefe')};
|
|
107
|
+
text-align: right;
|
|
212
108
|
font-size: 0.875rem;
|
|
213
|
-
width: 100%;
|
|
214
|
-
${props => props.theme.themeProp('background-color', '#121212', '#fefefe')}
|
|
215
109
|
`;
|
|
216
110
|
const ErrorMessage = styled.div.attrs(applyDefaultTheme)`
|
|
217
|
-
color: ${props => props.$error ? props.theme.getColor('red-500') : props
|
|
111
|
+
color: ${props => props.$error ? props.theme.getColor('red-500') : props.theme.getColor('orange-500')};
|
|
218
112
|
font-size: 0.75rem;
|
|
219
113
|
margin-top: 8px;
|
|
220
|
-
padding: 0 12px;
|
|
221
114
|
`;
|
|
115
|
+
const MultiSelect = styled(Select).attrs(applyDefaultTheme)``;
|
|
116
|
+
const CreatableMultiSelect = styled(CreatableSelect).attrs(applyDefaultTheme)``;
|
|
117
|
+
const AsyncCreatableMultiSelect = styled(AsyncCreatableSelectPaginate).attrs(applyDefaultTheme)``;
|
|
118
|
+
const AsyncMultiSelect = styled(AsyncPaginate).attrs(applyDefaultTheme)``;
|
|
222
119
|
|
|
223
|
-
export { AsyncCreatableMultiSelect, AsyncMultiSelect,
|
|
120
|
+
export { AsyncCreatableMultiSelect, AsyncMultiSelect, Control, CreatableMultiSelect, DropdownOptionDeleteIcon, ErrorMessage, InputWrapper, Label, MultiSelect, MultiSelectWrapper, MultiValueRemoveIcon, MultiValueWrapper, OptionContent, ShowMoreOverlay, ShowMoreText, ShowMoreWrapper, ValueContainer };
|
|
224
121
|
//# sourceMappingURL=MultiSelect.styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelect.styled.js","sources":["../../../src/components/inputs/MultiSelect/MultiSelect.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nimport { ReactComponent as CloseIcon } from '../../../icons/close.svg';\n\nimport Select from 'react-select';\nimport CreatableSelect from 'react-select/creatable';\nimport { AsyncPaginate, withAsyncPaginate } from 'react-select-async-paginate';\nimport { components } from 'react-select';\n\nconst AsyncCreatableSelectPaginate = withAsyncPaginate(CreatableSelect);\n\nconst showMoreHeight = 114;\n\nconst sharedStyle = css`\n font-family: ${props => props.theme.primaryFontFamily};\n font-size: 12px;\n font-weight: 400;\n position: relative;\n`;\n\nexport const Label = styled.label.attrs(applyDefaultTheme)`\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('white'),\n props.theme.getColor('gray-700')\n )};\n flex-basis: 33.33%;\n font-size: 0.875rem;\n line-height: 1rem;\n cursor: pointer;\n height: 19px;\n display: flex;\n align-items: center;\n`;\n\nexport const MultiSelect = styled(Select).attrs(applyDefaultTheme)`\n ${sharedStyle}\n`;\n\nexport const CreatableMultiSelect = styled(CreatableSelect).attrs(applyDefaultTheme)`\n ${sharedStyle}\n`;\n\nexport const AsyncCreatableMultiSelect = styled(AsyncCreatableSelectPaginate).attrs(\n applyDefaultTheme\n)`\n ${sharedStyle}\n`;\n\nexport const AsyncMultiSelect = styled(AsyncPaginate).attrs(applyDefaultTheme)`\n ${sharedStyle}\n`;\n\nexport const MultiSelectWrapper = styled.div.attrs(applyDefaultTheme)`\n position: relative;\n`;\n\nexport const Control = styled(components.Control).attrs(applyDefaultTheme)`\n && {\n align-items: flex-start;\n background: transparent;\n border: none;\n box-shadow: none;\n }\n\n :hover {\n cursor: ${props =>\n (!props.isDisabled && props.focused) || props.readOnly ? 'default' : 'pointer'};\n }\n`;\n\nexport const ValueContainer = styled(components.ValueContainer)`\n && {\n align-items: flex-start;\n gap: 8px;\n padding: 0;\n\n max-height: ${props => {\n return props.showMore\n ? props.$error || props.$warning\n ? '100%'\n : showMoreHeight + 16 + 'px'\n : '100%';\n }} !important;\n\n ${props =>\n (props.$error || props.$warning) &&\n css`\n border: 1px solid;\n border-radius: 3px;\n padding: 4px;\n\n border-color: ${props =>\n props.$error\n ? props.theme.getColor('red-500')\n : props.warning\n ? props.theme.getColor('orange-500')\n : 'inherit'};\n `}\n }\n`;\n\nexport const MultiValueWrapper = styled.div.attrs(applyDefaultTheme)`\n && {\n border-radius: 3px;\n margin: 0;\n }\n`;\n\nexport const MultiValue = styled(components.MultiValue).attrs(applyDefaultTheme)`\n && {\n border-radius: 3px;\n margin: 0;\n\n ${props =>\n props.theme.themeProp(\n 'background-color',\n props.theme.getColor('gray-600'),\n props.theme.getColor('gray-800')\n )}\n\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-100'),\n props.theme.getColor('gray-100')\n )}\n\n > div {\n align-items: center;\n display: flex;\n font-size: 12px;\n min-height: 26px;\n\n :first-of-type {\n padding: ${props => (props.isDisabled || props.readOnly ? '0 8px' : '0 3px 0 8px')};\n }\n\n :last-of-type:not(:only-child) {\n padding: 0 8px 0 5px;\n height: 100%;\n width: fit-content;\n }\n\n :last-of-type:not(:only-child):hover {\n background-color: ${props => props.theme.getColor('red-500')};\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n cursor: pointer;\n }\n\n svg {\n stroke: white;\n stroke-width: 2px;\n width: 8px;\n }\n\n :hover {\n cursor: pointer;\n }\n }\n`;\n\nexport const MultiValueRemove = styled(components.MultiValueRemove).attrs(applyDefaultTheme)``;\n\nexport const Input = styled(components.Input).attrs(applyDefaultTheme)`\n align-self: center;\n font-size: ${props => (props.$focused ? '14px' : '12px')};\n min-width: 150px;\n\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-100'),\n props.theme.getColor('gray-900')\n )}\n\n ${props =>\n !props.$focused &&\n css`\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-400'),\n props.theme.getColor('gray-500')\n )}\n\n :before {\n height: 100%;\n white-space: nowrap;\n width: fit-content;\n content: '${props => props.edittext}';\n }\n `}\n }\n`;\n\nexport const DropdownMenu = styled(components.Menu).attrs(applyDefaultTheme)`\n font-size: 14px;\n\n ${props =>\n props.theme.themeProp(\n 'background-color',\n props.theme.getColor('gray-600'),\n props.theme.getColor('white')\n )}\n\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-100'),\n props.theme.getColor('gray-900')\n )}\n`;\n\nconst sharedOptionStyle = css`\n ${props =>\n props.isFocused &&\n css`\n ${props.theme.themeProp(\n 'background-color',\n props.theme.getColor('gray-500'),\n props.theme.getColor('gray-200')\n )}\n `}\n\n ${props =>\n props.isSelected &&\n css`\n ${props.theme.themeProp('background-color', 'transparent', 'transparent')}\n\n ${props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-100'),\n props.theme.getColor('gray-900')\n )}\n `}\n\n ${props =>\n props.isFocused &&\n props.isSelected &&\n css`\n ${props.theme.themeProp(\n 'background-color',\n props.theme.getColor('gray-500'),\n props.theme.getColor('gray-200')\n )}\n `}\n\n :hover {\n cursor: pointer;\n }\n`;\n\nexport const Option = styled(components.Option).attrs(applyDefaultTheme)`\n ${sharedOptionStyle}\n`;\n\nexport const SelectedOption = styled(components.Option).attrs(applyDefaultTheme)`\n ${sharedOptionStyle}\n\n display: flex !important;\n justify-content: space-between;\n`;\n\nexport const DropdownOptionDeleteIcon = styled(CloseIcon).attrs(applyDefaultTheme)`\n stroke-width: 1px;\n width: 8px;\n\n ${props =>\n props.theme.themeProp(\n 'stroke',\n props.theme.getColor('gray-100'),\n props.theme.getColor('gray-900')\n )}\n`;\n\nexport const ShowMoreWrapper = styled.div.attrs(applyDefaultTheme)`\n align-items: end;\n display: flex;\n flex-direction: column;\n height: 100%;\n left: 0;\n position: absolute;\n max-height: ${showMoreHeight + 16}px;\n top: 0;\n width: 100%;\n\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-100'),\n props.theme.getColor('emerald-500')\n )}\n\n :hover {\n cursor: pointer;\n text-decoration: underline;\n }\n`;\n\nexport const ShowMoreOverlay = styled.div.attrs(applyDefaultTheme)`\n align-items: end;\n display: block;\n height: 100%;\n max-height: ${showMoreHeight}px;\n left: 0;\n top: 0;\n width: 100%;\n\n ${props =>\n props.theme.themeProp(\n 'background',\n 'transparent linear-gradient(180deg, #12121200 0%, #12121230 40%, #12121279 70%, #121212 95%, #121212 100%) 0% 0% no-repeat padding-box',\n 'transparent linear-gradient(180deg, #fefefe00 0%, #fefefe30 40%, #fefefe79 70%, #fefefe 95%, #fefefe 100%) 0% 0% no-repeat padding-box'\n )}\n`;\n\nexport const ShowMoreText = styled.div.attrs(applyDefaultTheme)`\n font-size: 0.875rem;\n width: 100%;\n ${props => props.theme.themeProp('background-color', '#121212', '#fefefe')}\n`;\n\nexport const ErrorMessage = styled.div.attrs(applyDefaultTheme)`\n color: ${props =>\n props.$error\n ? props.theme.getColor('red-500')\n : props.$warning\n ? props.theme.getColor('orange-500')\n : 'inherit'};\n font-size: 0.75rem;\n margin-top: 8px;\n padding: 0 12px;\n`;\n"],"names":["AsyncCreatableSelectPaginate","withAsyncPaginate","CreatableSelect","showMoreHeight","sharedStyle","css","props","theme","primaryFontFamily","styled","label","attrs","applyDefaultTheme","themeProp","getColor","MultiSelect","Select","CreatableMultiSelect","AsyncCreatableMultiSelect","AsyncMultiSelect","AsyncPaginate","MultiSelectWrapper","div","components","Control","isDisabled","focused","readOnly","ValueContainer","showMore","$error","$warning","warning","MultiValueWrapper","MultiValue","MultiValueRemove","Input","$focused","edittext","DropdownMenu","Menu","sharedOptionStyle","isFocused","isSelected","Option","SelectedOption","DropdownOptionDeleteIcon","CloseIcon","ShowMoreWrapper","ShowMoreOverlay","ShowMoreText","ErrorMessage"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MultiSelect.styled.js","sources":["../../../src/components/inputs/MultiSelect/MultiSelect.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\nimport { ReactComponent as CloseIcon } from '../../../icons/close.svg';\nimport Select from 'react-select';\nimport CreatableSelect from 'react-select/creatable';\nimport { AsyncPaginate, withAsyncPaginate } from 'react-select-async-paginate';\n\nconst AsyncCreatableSelectPaginate = withAsyncPaginate(CreatableSelect);\nconst showMoreHeight = 114;\n\nexport const MultiSelectWrapper = styled.div`\n position: relative;\n /* Targets internal container to ensure overlay is visible even if library tries to clip it */\n & [class*='ValueContainer'] {\n overflow: visible !important;\n }\n`;\n\nexport const Label = styled.label.attrs(applyDefaultTheme)`\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('white'),\n props.theme.getColor('gray-700')\n )};\n font-size: 0.875rem;\n margin-bottom: 4px;\n display: block;\n`;\n\nexport const Control = styled.div`\n & > div {\n cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};\n }\n`;\n\nexport const ValueContainer = styled.div.attrs(applyDefaultTheme)`\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n max-height: ${props =>\n props.$showMore\n ? props.$error || props.$warning\n ? 'none'\n : `${showMoreHeight + 16}px`\n : 'none'};\n ${props =>\n (props.$error || props.$warning) &&\n css`\n border: 1px solid;\n border-radius: 3px;\n padding: 4px;\n border-color: ${props.$error\n ? props.theme.getColor('red-500')\n : props.theme.getColor('orange-500')};\n `}\n`;\n\nexport const MultiValueWrapper = styled.div`\n margin: 0;\n`;\n\nexport const MultiValueRemoveIcon = styled(CloseIcon)`\n width: 8px;\n stroke: white;\n stroke-width: 2px;\n`;\n\nexport const InputWrapper = styled.div.attrs(applyDefaultTheme)`\n min-width: 150px;\n position: relative;\n ${props =>\n !props.$focused &&\n props.$editText &&\n css`\n &::before {\n content: '${props.$editText}';\n color: ${p => p.theme.getColor('gray-400')};\n font-size: 12px;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n pointer-events: none;\n }\n `}\n input {\n color: ${props =>\n props.theme.themeProp(\n props.theme.getColor('gray-100'),\n props.theme.getColor('gray-900')\n )} !important;\n }\n`;\n\nexport const OptionContent = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 8px 12px;\n width: 100%;\n font-size: 14px;\n color: inherit;\n`;\n\nexport const DropdownMenu = styled.div`\n [class*='menu'] {\n z-index: 9999 !important;\n border-radius: 4px;\n }\n`;\n\nexport const DropdownOptionDeleteIcon = styled(CloseIcon).attrs(applyDefaultTheme)`\n width: 8px;\n stroke: ${props =>\n props.theme.themeProp(props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))};\n`;\n\nexport const ShowMoreWrapper = styled.div.attrs(applyDefaultTheme)`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n z-index: 50;\n color: ${props =>\n props.theme.themeProp(props.theme.getColor('gray-100'), props.theme.getColor('emerald-500'))};\n &:hover {\n cursor: pointer;\n text-decoration: underline;\n }\n`;\n\nexport const ShowMoreOverlay = styled.div.attrs(applyDefaultTheme)`\n flex: 1;\n background: ${props =>\n props.theme.themeProp(\n 'linear-gradient(180deg, #12121200 0%, #121212 100%)',\n 'linear-gradient(180deg, #fefefe00 0%, #fefefe 100%)'\n )};\n`;\n\nexport const ShowMoreText = styled.div.attrs(applyDefaultTheme)`\n background-color: ${props => props.theme.themeProp('#121212', '#fefefe')};\n text-align: right;\n font-size: 0.875rem;\n`;\n\nexport const ErrorMessage = styled.div.attrs(applyDefaultTheme)`\n color: ${props =>\n props.$error ? props.theme.getColor('red-500') : props.theme.getColor('orange-500')};\n font-size: 0.75rem;\n margin-top: 8px;\n`;\n\nexport const MultiSelect = styled(Select).attrs(applyDefaultTheme)``;\nexport const CreatableMultiSelect = styled(CreatableSelect).attrs(applyDefaultTheme)``;\nexport const AsyncCreatableMultiSelect = styled(AsyncCreatableSelectPaginate).attrs(\n applyDefaultTheme\n)``;\nexport const AsyncMultiSelect = styled(AsyncPaginate).attrs(applyDefaultTheme)``;\n"],"names":["AsyncCreatableSelectPaginate","withAsyncPaginate","CreatableSelect","showMoreHeight","MultiSelectWrapper","styled","div","Label","label","attrs","applyDefaultTheme","props","theme","themeProp","getColor","Control","$readOnly","ValueContainer","$showMore","$error","$warning","css","MultiValueWrapper","MultiValueRemoveIcon","CloseIcon","InputWrapper","$focused","$editText","p","OptionContent","DropdownOptionDeleteIcon","ShowMoreWrapper","ShowMoreOverlay","ShowMoreText","ErrorMessage","MultiSelect","Select","CreatableMultiSelect","AsyncCreatableMultiSelect","AsyncMultiSelect","AsyncPaginate"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
-
import React__default, {
|
|
2
|
+
import React__default, { useMemo } from 'react';
|
|
3
3
|
import { nanoid } from 'nanoid';
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
5
|
import { Radio as Radio$1, RadioLabel } from './Radio.styled.js';
|
|
@@ -18,11 +18,21 @@ const Radio = React__default.forwardRef(function Radio({
|
|
|
18
18
|
onBlur,
|
|
19
19
|
...rest
|
|
20
20
|
}, forwardedRef) {
|
|
21
|
-
const
|
|
21
|
+
const uniqueId = useMemo(() => nanoid(), []);
|
|
22
|
+
const handleChange = e => {
|
|
23
|
+
if (readOnly) {
|
|
24
|
+
e.preventDefault();
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
if (onChange) {
|
|
28
|
+
onChange(e);
|
|
29
|
+
}
|
|
30
|
+
};
|
|
22
31
|
return React__default.createElement(Radio$1, {
|
|
23
32
|
htmlFor: uniqueId,
|
|
24
33
|
disabled: disabled,
|
|
25
34
|
readOnly: readOnly,
|
|
35
|
+
$isChecked: checked,
|
|
26
36
|
className: className,
|
|
27
37
|
style: style
|
|
28
38
|
}, React__default.createElement("input", _extends({
|
|
@@ -33,9 +43,8 @@ const Radio = React__default.forwardRef(function Radio({
|
|
|
33
43
|
checked: checked,
|
|
34
44
|
defaultChecked: defaultChecked,
|
|
35
45
|
disabled: disabled,
|
|
36
|
-
readOnly: readOnly,
|
|
37
46
|
id: uniqueId,
|
|
38
|
-
onChange:
|
|
47
|
+
onChange: handleChange,
|
|
39
48
|
onBlur: onBlur
|
|
40
49
|
}, rest)), React__default.createElement(RadioLabel, null, label));
|
|
41
50
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.js","sources":["../../../src/components/inputs/Radio/Radio.js"],"sourcesContent":["import React, {
|
|
1
|
+
{"version":3,"file":"Radio.js","sources":["../../../src/components/inputs/Radio/Radio.js"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { nanoid } from 'nanoid';\nimport PropTypes from 'prop-types';\n\nimport * as S from './Radio.styled';\n\n/**\n * Radio buttons allow the user to select one option from a set.\n *\n * Use radio buttons when the user needs to see all available options. If available options can be\n * collapsed, consider using a dropdown menu because it uses less space.\n *\n * Radio buttons should have the most commonly used option selected by default.\n *\n * ### Import\n *\n * ``` js\n * import { Radio } from '@ntbjs/react-components/inputs'\n * // or\n * import Radio from '@ntbjs/react-components/inputs/Radio'\n * ```\n */\nconst Radio = React.forwardRef(function Radio(\n {\n name,\n value,\n checked,\n defaultChecked,\n disabled,\n readOnly,\n label,\n className,\n style,\n onChange,\n onBlur,\n ...rest\n },\n forwardedRef\n) {\n const uniqueId = useMemo(() => nanoid(), []);\n\n const handleChange = e => {\n // Prevent onChange when readOnly\n if (readOnly) {\n e.preventDefault();\n return;\n }\n if (onChange) {\n onChange(e);\n }\n };\n\n return (\n <S.Radio\n htmlFor={uniqueId}\n disabled={disabled}\n readOnly={readOnly}\n $isChecked={checked}\n className={className}\n style={style}\n >\n <input\n ref={forwardedRef}\n type=\"radio\"\n name={name}\n value={value}\n checked={checked}\n defaultChecked={defaultChecked}\n disabled={disabled}\n id={uniqueId}\n onChange={handleChange}\n onBlur={onBlur}\n {...rest}\n />\n <S.RadioLabel>{label}</S.RadioLabel>\n </S.Radio>\n );\n});\n\nRadio.propTypes = {\n /**\n * Text displayed by the radio button\n */\n label: PropTypes.any,\n\n /**\n * Name of the radio button (used when sending form data)\n */\n name: PropTypes.string.isRequired,\n\n /**\n * Value to be sent when the given radio button is selected\n */\n value: PropTypes.any.isRequired,\n\n /**\n * Whether the radio button is checked\n */\n checked: PropTypes.bool,\n\n /**\n * Whether the radio button is checked by default. The most commonly used option should have this set to `true`.\n */\n defaultChecked: PropTypes.bool,\n\n /**\n * Whether the radio button is disabled\n */\n disabled: PropTypes.bool,\n\n /**\n * Display the radio button as read-only\n */\n readOnly: PropTypes.bool,\n\n /**\n * Custom class names for the HTML element\n */\n className: PropTypes.string,\n\n /**\n * Custom inline CSS styling\n */\n style: PropTypes.object,\n\n /**\n * Optional callback function for the `onChange` event\n */\n onChange: PropTypes.func,\n\n /**\n * Optional callback function for the `onBlur` event\n */\n onBlur: PropTypes.func\n};\n\nRadio.defaultProps = {\n disabled: false\n};\n\nexport default Radio;\n"],"names":["Radio","React","forwardRef","name","value","checked","defaultChecked","disabled","readOnly","label","className","style","onChange","onBlur","rest","forwardedRef","uniqueId","useMemo","nanoid","handleChange","e","preventDefault","createElement","S","htmlFor","$isChecked","_extends","ref","type","id","propTypes","process","env","NODE_ENV","PropTypes","any","string","isRequired","bool","object","func","defaultProps"],"mappings":";;;;;;AAuBMA,MAAAA,KAAK,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,KAAKA,CAC3C;EACEG,IAAI;EACJC,KAAK;EACLC,OAAO;EACPC,cAAc;EACdC,QAAQ;EACRC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,KAAK;EACLC,QAAQ;EACRC,MAAM;EACN,GAAGC,IAAAA;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,QAAQ,GAAGC,OAAO,CAAC,MAAMC,MAAM,EAAE,EAAE,EAAE,CAAC,CAAA;EAE5C,MAAMC,YAAY,GAAGC,CAAC,IAAI;AAExB,IAAA,IAAIZ,QAAQ,EAAE;MACZY,CAAC,CAACC,cAAc,EAAE,CAAA;AAClB,MAAA,OAAA;AACF,KAAA;AACA,IAAA,IAAIT,QAAQ,EAAE;MACZA,QAAQ,CAACQ,CAAC,CAAC,CAAA;AACb,KAAA;GACD,CAAA;AAED,EAAA,OACEnB,cAAA,CAAAqB,aAAA,CAACC,OAAO,EAAA;AACNC,IAAAA,OAAO,EAAER,QAAS;AAClBT,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBiB,IAAAA,UAAU,EAAEpB,OAAQ;AACpBK,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,KAAK,EAAEA,KAAAA;AAAM,GAAA,EAEbV,cAAA,CAAAqB,aAAA,CAAA,OAAA,EAAAI,QAAA,CAAA;AACEC,IAAAA,GAAG,EAAEZ,YAAa;AAClBa,IAAAA,IAAI,EAAC,OAAO;AACZzB,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,cAAc,EAAEA,cAAe;AAC/BC,IAAAA,QAAQ,EAAEA,QAAS;AACnBsB,IAAAA,EAAE,EAAEb,QAAS;AACbJ,IAAAA,QAAQ,EAAEO,YAAa;AACvBN,IAAAA,MAAM,EAAEA,MAAAA;AAAO,GAAA,EACXC,IAAI,CACT,CAAC,EACFb,cAAA,CAAAqB,aAAA,CAACC,UAAY,EAAEd,IAAAA,EAAAA,KAAoB,CAC5B,CAAC,CAAA;AAEd,CAAC,EAAC;AAEFT,KAAK,CAAC8B,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;EAIhBxB,KAAK,EAAEyB,SAAS,CAACC,GAAG;AAKpBhC,EAAAA,IAAI,EAAE+B,SAAS,CAACE,MAAM,CAACC,UAAU;AAKjCjC,EAAAA,KAAK,EAAE8B,SAAS,CAACC,GAAG,CAACE,UAAU;EAK/BhC,OAAO,EAAE6B,SAAS,CAACI,IAAI;EAKvBhC,cAAc,EAAE4B,SAAS,CAACI,IAAI;EAK9B/B,QAAQ,EAAE2B,SAAS,CAACI,IAAI;EAKxB9B,QAAQ,EAAE0B,SAAS,CAACI,IAAI;EAKxB5B,SAAS,EAAEwB,SAAS,CAACE,MAAM;EAK3BzB,KAAK,EAAEuB,SAAS,CAACK,MAAM;EAKvB3B,QAAQ,EAAEsB,SAAS,CAACM,IAAI;EAKxB3B,MAAM,EAAEqB,SAAS,CAACM,IAAAA;AACpB,CAAC,GAAA,EAAA,CAAA;AAEDxC,KAAK,CAACyC,YAAY,GAAG;AACnBlC,EAAAA,QAAQ,EAAE,KAAA;AACZ,CAAC;;;;"}
|
|
@@ -3,27 +3,31 @@ import styled, { css } from 'styled-components';
|
|
|
3
3
|
import { applyDefaultTheme } from '../../utils/defaultTheme.js';
|
|
4
4
|
|
|
5
5
|
const radioSize = '18px';
|
|
6
|
-
const
|
|
7
|
-
return prop !== 'theme' && !prop.startsWith('$');
|
|
8
|
-
};
|
|
9
|
-
const RadioLabel = styled.div.withConfig({
|
|
10
|
-
shouldForwardProp
|
|
11
|
-
}).attrs(applyDefaultTheme)`
|
|
6
|
+
const RadioLabel = styled.div.attrs(applyDefaultTheme)`
|
|
12
7
|
padding-left: ${math(`${radioSize} + 10px`)};
|
|
13
8
|
font-weight: 400;
|
|
14
9
|
font-size: 0.875rem;
|
|
10
|
+
pointer-events: none;
|
|
15
11
|
|
|
16
12
|
${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'))};
|
|
17
13
|
`;
|
|
18
|
-
const Radio = styled.label.
|
|
19
|
-
shouldForwardProp
|
|
20
|
-
}).attrs(applyDefaultTheme)`
|
|
14
|
+
const Radio = styled.label.attrs(applyDefaultTheme)`
|
|
21
15
|
display: block;
|
|
22
16
|
position: relative;
|
|
23
|
-
cursor: pointer;
|
|
17
|
+
cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
|
|
24
18
|
line-height: ${radioSize};
|
|
25
19
|
user-select: none;
|
|
26
20
|
|
|
21
|
+
input[type='radio'] {
|
|
22
|
+
position: absolute;
|
|
23
|
+
opacity: 0;
|
|
24
|
+
width: ${radioSize};
|
|
25
|
+
height: ${radioSize};
|
|
26
|
+
margin: 0;
|
|
27
|
+
cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
|
|
28
|
+
z-index: 1;
|
|
29
|
+
}
|
|
30
|
+
|
|
27
31
|
&::before {
|
|
28
32
|
content: '';
|
|
29
33
|
position: absolute;
|
|
@@ -31,9 +35,16 @@ const Radio = styled.label.withConfig({
|
|
|
31
35
|
width: ${radioSize};
|
|
32
36
|
height: ${radioSize};
|
|
33
37
|
top: 0;
|
|
38
|
+
left: 0;
|
|
34
39
|
border-radius: 50%;
|
|
35
40
|
transition: all 200ms;
|
|
36
41
|
box-sizing: border-box;
|
|
42
|
+
pointer-events: none;
|
|
43
|
+
|
|
44
|
+
/* Apply checked styling based on $isChecked prop */
|
|
45
|
+
${props => props.$isChecked && css`
|
|
46
|
+
border-color: ${props.theme.getColor('emerald-500')};
|
|
47
|
+
`}
|
|
37
48
|
}
|
|
38
49
|
|
|
39
50
|
&::after {
|
|
@@ -44,30 +55,32 @@ const Radio = styled.label.withConfig({
|
|
|
44
55
|
top: 5px;
|
|
45
56
|
left: 5px;
|
|
46
57
|
border-radius: 50%;
|
|
58
|
+
background: transparent;
|
|
47
59
|
transform: scale(0);
|
|
48
60
|
transition: all 200ms;
|
|
61
|
+
pointer-events: none;
|
|
62
|
+
|
|
63
|
+
/* Apply checked styling based on $isChecked prop */
|
|
64
|
+
${props => props.$isChecked && css`
|
|
65
|
+
background: ${props.theme.getColor('emerald-500')};
|
|
66
|
+
transform: scale(1);
|
|
67
|
+
`}
|
|
49
68
|
}
|
|
50
69
|
|
|
51
|
-
|
|
52
|
-
|
|
70
|
+
/* Fallback: :has() selector for browsers that support it */
|
|
71
|
+
&:has(input[type='radio']:checked) {
|
|
72
|
+
&::before {
|
|
53
73
|
border-color: ${props => props.theme.getColor('emerald-500')};
|
|
54
74
|
}
|
|
55
75
|
|
|
56
|
-
|
|
76
|
+
&::after {
|
|
57
77
|
background: ${props => props.theme.getColor('emerald-500')};
|
|
58
78
|
transform: scale(1);
|
|
59
79
|
}
|
|
60
|
-
|
|
61
|
-
${RadioLabel} {
|
|
62
|
-
opacity: 1;
|
|
63
|
-
}
|
|
64
80
|
}
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
opacity: 0;
|
|
69
|
-
pointer-events: none;
|
|
70
|
-
}
|
|
81
|
+
|
|
82
|
+
input[type='radio']:checked + ${RadioLabel} {
|
|
83
|
+
opacity: 1;
|
|
71
84
|
}
|
|
72
85
|
|
|
73
86
|
${props => props.readOnly && css`
|
|
@@ -80,6 +93,10 @@ const Radio = styled.label.withConfig({
|
|
|
80
93
|
opacity: 0.5;
|
|
81
94
|
cursor: not-allowed;
|
|
82
95
|
user-select: text;
|
|
96
|
+
|
|
97
|
+
input[type='radio'] {
|
|
98
|
+
cursor: not-allowed;
|
|
99
|
+
}
|
|
83
100
|
`}
|
|
84
101
|
`;
|
|
85
102
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.styled.js","sources":["../../../src/components/inputs/Radio/Radio.styled.js"],"sourcesContent":["import { math } from 'polished';\nimport styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nconst radioSize = '18px';\n\
|
|
1
|
+
{"version":3,"file":"Radio.styled.js","sources":["../../../src/components/inputs/Radio/Radio.styled.js"],"sourcesContent":["import { math } from 'polished';\nimport styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nconst radioSize = '18px';\n\nexport const RadioLabel = styled.div.attrs(applyDefaultTheme)`\n padding-left: ${math(`${radioSize} + 10px`)};\n font-weight: 400;\n font-size: 0.875rem;\n pointer-events: none;\n\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-300'),\n props.theme.getColor('gray-600')\n )};\n`;\n\nexport const Radio = styled.label.attrs(applyDefaultTheme)`\n display: block;\n position: relative;\n cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};\n line-height: ${radioSize};\n user-select: none;\n\n input[type='radio'] {\n position: absolute;\n opacity: 0;\n width: ${radioSize};\n height: ${radioSize};\n margin: 0;\n cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};\n z-index: 1;\n }\n\n &::before {\n content: '';\n position: absolute;\n border: 2px solid ${props => props.theme.getColor('gray-300')};\n width: ${radioSize};\n height: ${radioSize};\n top: 0;\n left: 0;\n border-radius: 50%;\n transition: all 200ms;\n box-sizing: border-box;\n pointer-events: none;\n\n /* Apply checked styling based on $isChecked prop */\n ${props =>\n props.$isChecked &&\n css`\n border-color: ${props.theme.getColor('emerald-500')};\n `}\n }\n\n &::after {\n content: '';\n position: absolute;\n width: 8px;\n height: 8px;\n top: 5px;\n left: 5px;\n border-radius: 50%;\n background: transparent;\n transform: scale(0);\n transition: all 200ms;\n pointer-events: none;\n\n /* Apply checked styling based on $isChecked prop */\n ${props =>\n props.$isChecked &&\n css`\n background: ${props.theme.getColor('emerald-500')};\n transform: scale(1);\n `}\n }\n\n /* Fallback: :has() selector for browsers that support it */\n &:has(input[type='radio']:checked) {\n &::before {\n border-color: ${props => props.theme.getColor('emerald-500')};\n }\n\n &::after {\n background: ${props => props.theme.getColor('emerald-500')};\n transform: scale(1);\n }\n }\n\n input[type='radio']:checked + ${RadioLabel} {\n opacity: 1;\n }\n\n ${props =>\n props.readOnly &&\n css`\n opacity: 0.5;\n pointer-events: none;\n user-select: text;\n `}\n\n ${props =>\n props.disabled &&\n css`\n opacity: 0.5;\n cursor: not-allowed;\n user-select: text;\n\n input[type='radio'] {\n cursor: not-allowed;\n }\n `}\n`;\n"],"names":["radioSize","RadioLabel","styled","div","attrs","applyDefaultTheme","math","props","theme","themeProp","getColor","Radio","label","disabled","$isChecked","css","readOnly"],"mappings":";;;;AAIA,MAAMA,SAAS,GAAG,MAAM,CAAA;AAEjB,MAAMC,UAAU,GAAGC,MAAM,CAACC,GAAG,CAACC,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC7D,gBAAA,EAAkBC,IAAI,CAAC,CAAGN,EAAAA,SAAS,SAAS,CAAC,CAAA;AAC7C;AACA;AACA;AACA;AACA,EAAIO,EAAAA,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,OAAO,EACPF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACL,EAAC;AAEM,MAAMC,KAAK,GAAGT,MAAM,CAACU,KAAK,CAACR,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC1D;AACA;AACA,UAAYE,EAAAA,KAAK,IAAKA,KAAK,CAACM,QAAQ,GAAG,aAAa,GAAG,SAAU,CAAA;AACjE,eAAA,EAAiBb,SAAS,CAAA;AAC1B;AACA;AACA;AACA;AACA;AACA,WAAA,EAAaA,SAAS,CAAA;AACtB,YAAA,EAAcA,SAAS,CAAA;AACvB;AACA,YAAcO,EAAAA,KAAK,IAAKA,KAAK,CAACM,QAAQ,GAAG,aAAa,GAAG,SAAU,CAAA;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,sBAAwBN,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,CAAA;AACjE,WAAA,EAAaV,SAAS,CAAA;AACtB,YAAA,EAAcA,SAAS,CAAA;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAA,EAAMO,KAAK,IACLA,KAAK,CAACO,UAAU,IAChBC,GAAG,CAAA;AACT,sBAAA,EAAwBR,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,aAAa,CAAC,CAAA;AAC3D,MAAO,CAAA,CAAA;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAA,EAAMH,KAAK,IACLA,KAAK,CAACO,UAAU,IAChBC,GAAG,CAAA;AACT,oBAAA,EAAsBR,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,aAAa,CAAC,CAAA;AACzD;AACA,MAAO,CAAA,CAAA;AACP;AACA;AACA;AACA;AACA;AACA,oBAAsBH,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,aAAa,CAAC,CAAA;AAClE;AACA;AACA;AACA,kBAAoBH,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,aAAa,CAAC,CAAA;AAChE;AACA;AACA;AACA;AACA,gCAAA,EAAkCT,UAAU,CAAA;AAC5C;AACA;AACA;AACA,EAAA,EAAIM,KAAK,IACLA,KAAK,CAACS,QAAQ,IACdD,GAAG,CAAA;AACP;AACA;AACA;AACA,IAAK,CAAA,CAAA;AACL;AACA,EAAA,EAAIR,KAAK,IACLA,KAAK,CAACM,QAAQ,IACdE,GAAG,CAAA;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAK,CAAA,CAAA;AACL;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Colors
|
|
3
3
|
*/
|
|
4
|
-
|
|
4
|
+
$colors: (
|
|
5
5
|
'orange-600': #634e01,
|
|
6
6
|
'orange-500': #ff9900,
|
|
7
7
|
'orange-400': #ffcb7e,
|
|
@@ -35,4 +35,4 @@ export const colors = {
|
|
|
35
35
|
'signal-green-400': #a3ffe0,
|
|
36
36
|
'black': #202435,
|
|
37
37
|
'white': #ffffff
|
|
38
|
-
|
|
38
|
+
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
2
|
import React__default from 'react';
|
|
3
3
|
import PropTypes from 'prop-types';
|
|
4
|
-
import { ContextMenuItem as ContextMenuItem$1, IconContainer, SublevelIconContainer } from './ContextMenuItem.styled.js';
|
|
4
|
+
import { ContextMenuItem as ContextMenuItem$1, IconContainer, Label, SublevelIconContainer } from './ContextMenuItem.styled.js';
|
|
5
5
|
import { ReactComponent as SvgTriangleRight } from '../../../icons/triangle-right.svg.js';
|
|
6
6
|
|
|
7
7
|
const ContextMenuItem = React__default.forwardRef(function ContextMenuItem({
|
|
@@ -23,7 +23,7 @@ const ContextMenuItem = React__default.forwardRef(function ContextMenuItem({
|
|
|
23
23
|
className: opensSublevel ? 'context-menu-item opens-sublevel' : 'context-menu-item'
|
|
24
24
|
}, props, {
|
|
25
25
|
role: "menuitem"
|
|
26
|
-
}), icon && React__default.createElement(IconContainer, null, icon), React__default.createElement(
|
|
26
|
+
}), icon && React__default.createElement(IconContainer, null, icon), React__default.createElement(Label, null, title), opensSublevel && React__default.createElement(SublevelIconContainer, null, React__default.createElement(SvgTriangleRight, null)));
|
|
27
27
|
});
|
|
28
28
|
ContextMenuItem.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
29
29
|
title: PropTypes.string.isRequired,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuItem.js","sources":["../../../../src/components/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './ContextMenuItem.styled';\n\nimport { ReactComponent as TriangleRightIcon } from '../../../../icons/triangle-right.svg';\n\n/**\n * Single context menu item.\n *\n * See the documentation for `ContextMenu` for usage examples.\n *\n * ### Import\n *\n * ``` js\n * import { ContextMenuItem } from '@ntbjs/react-components/widgets/ContextMenu'\n * // or\n * import ContextMenuItem from '@ntbjs/react-components/widgets/ContextMenu/ContextMenuItem'\n * ```\n */\nconst ContextMenuItem = React.forwardRef(function ContextMenuItem(\n { title, icon, onClickEffect, opensSublevel, hoverColors, hoverBackgroundColors, ...props },\n forwardedRef\n) {\n return (\n <S.ContextMenuItem\n ref={forwardedRef}\n $icon={icon}\n onClick={onClickEffect}\n $hoverColors={hoverColors}\n $hoverBackgroundColors={hoverBackgroundColors}\n $openssublevel={opensSublevel}\n className={opensSublevel ? 'context-menu-item opens-sublevel' : 'context-menu-item'}\n {...props}\n role=\"menuitem\"\n >\n {icon && <S.IconContainer>{icon}</S.IconContainer>}\n <
|
|
1
|
+
{"version":3,"file":"ContextMenuItem.js","sources":["../../../../src/components/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './ContextMenuItem.styled';\n\nimport { ReactComponent as TriangleRightIcon } from '../../../../icons/triangle-right.svg';\n\n/**\n * Single context menu item.\n *\n * See the documentation for `ContextMenu` for usage examples.\n *\n * ### Import\n *\n * ``` js\n * import { ContextMenuItem } from '@ntbjs/react-components/widgets/ContextMenu'\n * // or\n * import ContextMenuItem from '@ntbjs/react-components/widgets/ContextMenu/ContextMenuItem'\n * ```\n */\nconst ContextMenuItem = React.forwardRef(function ContextMenuItem(\n { title, icon, onClickEffect, opensSublevel, hoverColors, hoverBackgroundColors, ...props },\n forwardedRef\n) {\n return (\n <S.ContextMenuItem\n ref={forwardedRef}\n $icon={icon}\n onClick={onClickEffect}\n $hoverColors={hoverColors}\n $hoverBackgroundColors={hoverBackgroundColors}\n $openssublevel={opensSublevel}\n className={opensSublevel ? 'context-menu-item opens-sublevel' : 'context-menu-item'}\n {...props}\n role=\"menuitem\"\n >\n {icon && <S.IconContainer>{icon}</S.IconContainer>}\n <S.Label>{title}</S.Label>\n {opensSublevel && (\n <S.SublevelIconContainer>\n <TriangleRightIcon />\n </S.SublevelIconContainer>\n )}\n </S.ContextMenuItem>\n );\n});\n\nContextMenuItem.propTypes = {\n /**\n * Menu item text\n */\n title: PropTypes.string.isRequired,\n\n /**\n * Optional icon (left side)\n */\n icon: PropTypes.element,\n\n /**\n * Function to trigger when the item is clicked\n */\n onClickEffect: PropTypes.func,\n\n /**\n * Whether the `ContextMenuItem` opens another `ContextMenu`\n */\n opensSublevel: PropTypes.bool,\n\n /**\n * Array of custom hover text/icon color in the form of hex-strings (e.g. `'#FFFFFF'`).\n * Must contain two colors, where the first is for dark-mode and the second is for light-mode.\n */\n hoverColors: PropTypes.arrayOf(PropTypes.string),\n\n /**\n * Array of custom hover background colors in the form of hex-strings (e.g. `'#FFFFFF'`).\n * Must contain two colors, where the first is for dark-mode and the second is for light-mode.\n */\n hoverBackgroundColors: PropTypes.arrayOf(PropTypes.string)\n};\n\nContextMenuItem.defaultProps = {\n icon: undefined,\n hoverColors: undefined,\n hoverBackgroundColors: undefined,\n opensSublevel: false\n};\n\nexport default ContextMenuItem;\n"],"names":["ContextMenuItem","React","forwardRef","title","icon","onClickEffect","opensSublevel","hoverColors","hoverBackgroundColors","props","forwardedRef","createElement","S","_extends","ref","$icon","onClick","$hoverColors","$hoverBackgroundColors","$openssublevel","className","role","TriangleRightIcon","propTypes","process","env","NODE_ENV","PropTypes","string","isRequired","element","func","bool","arrayOf","defaultProps","undefined"],"mappings":";;;;;;AAmBMA,MAAAA,eAAe,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,eAAeA,CAC/D;EAAEG,KAAK;EAAEC,IAAI;EAAEC,aAAa;EAAEC,aAAa;EAAEC,WAAW;EAAEC,qBAAqB;EAAE,GAAGC,KAAAA;AAAM,CAAC,EAC3FC,YAAY,EACZ;EACA,OACET,cAAA,CAAAU,aAAA,CAACC,iBAAiB,EAAAC,QAAA,CAAA;AAChBC,IAAAA,GAAG,EAAEJ,YAAa;AAClBK,IAAAA,KAAK,EAAEX,IAAK;AACZY,IAAAA,OAAO,EAAEX,aAAc;AACvBY,IAAAA,YAAY,EAAEV,WAAY;AAC1BW,IAAAA,sBAAsB,EAAEV,qBAAsB;AAC9CW,IAAAA,cAAc,EAAEb,aAAc;AAC9Bc,IAAAA,SAAS,EAAEd,aAAa,GAAG,kCAAkC,GAAG,mBAAA;AAAoB,GAAA,EAChFG,KAAK,EAAA;AACTY,IAAAA,IAAI,EAAC,UAAA;AAAU,GAAA,CAAA,EAEdjB,IAAI,IAAIH,cAAA,CAAAU,aAAA,CAACC,aAAe,QAAER,IAAsB,CAAC,EAClDH,cAAA,CAAAU,aAAA,CAACC,KAAO,EAAA,IAAA,EAAET,KAAe,CAAC,EACzBG,aAAa,IACZL,cAAA,CAAAU,aAAA,CAACC,qBAAuB,EACtBX,IAAAA,EAAAA,cAAA,CAAAU,aAAA,CAACW,gBAAiB,EAAE,IAAA,CACG,CAEV,CAAC,CAAA;AAExB,CAAC,EAAC;AAEFtB,eAAe,CAACuB,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;AAI1BvB,EAAAA,KAAK,EAAEwB,SAAS,CAACC,MAAM,CAACC,UAAU;EAKlCzB,IAAI,EAAEuB,SAAS,CAACG,OAAO;EAKvBzB,aAAa,EAAEsB,SAAS,CAACI,IAAI;EAK7BzB,aAAa,EAAEqB,SAAS,CAACK,IAAI;EAM7BzB,WAAW,EAAEoB,SAAS,CAACM,OAAO,CAACN,SAAS,CAACC,MAAM,CAAC;AAMhDpB,EAAAA,qBAAqB,EAAEmB,SAAS,CAACM,OAAO,CAACN,SAAS,CAACC,MAAM,CAAA;AAC3D,CAAC,GAAA,EAAA,CAAA;AAED5B,eAAe,CAACkC,YAAY,GAAG;AAC7B9B,EAAAA,IAAI,EAAE+B,SAAS;AACf5B,EAAAA,WAAW,EAAE4B,SAAS;AACtB3B,EAAAA,qBAAqB,EAAE2B,SAAS;AAChC7B,EAAAA,aAAa,EAAE,KAAA;AACjB,CAAC;;;;"}
|