@xfers/design-system 8.1.0 → 8.1.1-dev.a926df90e6
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/cjs/index.js +5 -5
- package/cjs/index.js.map +1 -1
- package/dist/components/Select/style.js +29 -21
- package/dist/components/Select/style.js.map +1 -1
- package/es/index.js +5 -5
- package/es/index.js.map +1 -1
- package/package.json +3 -3
|
@@ -29,9 +29,6 @@ exports.SelectContainer = styled_1.default.div `
|
|
|
29
29
|
width: 100%;
|
|
30
30
|
`;
|
|
31
31
|
const selectSelectorStyles = (props) => {
|
|
32
|
-
// For multiple select, calculate padding to fit tags within min-height
|
|
33
|
-
// Small: 36px min-height - 24px tag = 12px total padding (6px top + 6px bottom)
|
|
34
|
-
// Large: 48px min-height - 32px tag = 16px total padding (8px top + 8px bottom)
|
|
35
32
|
const getVerticalPadding = () => {
|
|
36
33
|
if (props.$mode === 'multiple') {
|
|
37
34
|
return props.$size === 'sm' ? '6px' : '8px';
|
|
@@ -40,29 +37,40 @@ const selectSelectorStyles = (props) => {
|
|
|
40
37
|
};
|
|
41
38
|
const verticalPadding = getVerticalPadding();
|
|
42
39
|
return `
|
|
43
|
-
|
|
44
|
-
|
|
40
|
+
&.ant-select {
|
|
41
|
+
outline: none !important;
|
|
42
|
+
border-radius: ${props.$size === 'sm' ? '8px' : '12px'} !important;
|
|
45
43
|
position: relative !important;
|
|
46
44
|
display: flex;
|
|
47
45
|
align-items: ${props.$mode === 'multiple' ? 'flex-start' : 'center'} !important;
|
|
48
|
-
padding:
|
|
46
|
+
padding-inline: 16px !important;
|
|
47
|
+
padding-block: ${verticalPadding} !important;
|
|
49
48
|
|
|
50
49
|
min-height: ${props.$size === 'sm' ? '36px' : '48px'} !important;
|
|
51
50
|
${props.$mode !== 'multiple' ? `height: ${props.$size === 'sm' ? '36px' : '48px'} !important;` : 'height: auto !important;'}
|
|
52
51
|
|
|
53
|
-
|
|
52
|
+
&:not(.ant-select-borderless) {
|
|
53
|
+
background: ${props.disabled
|
|
54
54
|
? theme_1.straitsXTheme.color.surface.disabledSurface
|
|
55
55
|
: theme_1.straitsXTheme.color.surface.neutral} !important;
|
|
56
56
|
|
|
57
|
-
|
|
57
|
+
border: 1px solid ${props.error
|
|
58
58
|
? theme_1.straitsXTheme.color.status.critical
|
|
59
59
|
: theme_1.straitsXTheme.color.base.line} !important;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
&.ant-select-multiple:not(.ant-select-borderless) .ant-select-content {
|
|
64
|
+
&:before {
|
|
65
|
+
display: none !important;
|
|
66
|
+
}
|
|
67
|
+
gap: 8px !important;
|
|
60
68
|
}
|
|
61
69
|
`;
|
|
62
70
|
};
|
|
63
71
|
const selectHoverFocusStyles = (props) => `
|
|
64
|
-
&:
|
|
65
|
-
&.ant-select-focused
|
|
72
|
+
&:not(.ant-select-borderless):hover,
|
|
73
|
+
&.ant-select-focused:not(.ant-select-borderless) {
|
|
66
74
|
${!props.disabled &&
|
|
67
75
|
`
|
|
68
76
|
box-shadow: 0 0 0 1px ${theme_1.straitsXTheme.color.base.onNeutral}20 !important;
|
|
@@ -73,18 +81,18 @@ const selectHoverFocusStyles = (props) => `
|
|
|
73
81
|
}
|
|
74
82
|
`;
|
|
75
83
|
const selectPlaceholderStyles = `
|
|
76
|
-
.ant-select-
|
|
84
|
+
.ant-select-placeholder {
|
|
77
85
|
display: flex;
|
|
78
86
|
align-items: center;
|
|
79
|
-
|
|
87
|
+
|
|
80
88
|
span {
|
|
81
89
|
color: ${theme_1.straitsXTheme.color.component.placeholderInput} !important;
|
|
82
90
|
}
|
|
83
91
|
}
|
|
84
92
|
`;
|
|
85
93
|
const selectOverflowStyles = (props) => `
|
|
86
|
-
.ant-select-
|
|
87
|
-
gap: 8px;
|
|
94
|
+
.ant-select-content {
|
|
95
|
+
gap: 8px !important;
|
|
88
96
|
${props.$mode === 'multiple' ? 'flex-wrap: wrap !important;' : ''}
|
|
89
97
|
${props.$mode === 'multiple' ? 'align-content: center !important;' : ''}
|
|
90
98
|
}
|
|
@@ -96,18 +104,18 @@ const selectSelectedItemStyles = `
|
|
|
96
104
|
color: ${theme_1.straitsXTheme.color.base.onNeutral} !important;
|
|
97
105
|
}
|
|
98
106
|
|
|
99
|
-
&.ant-select-open .ant-select-
|
|
107
|
+
&.ant-select-open .ant-select-content {
|
|
100
108
|
color: ${theme_1.straitsXTheme.color.base.onNeutral} !important;
|
|
101
109
|
}
|
|
102
110
|
`;
|
|
103
111
|
const selectArrowStyles = `
|
|
104
|
-
.ant-select-
|
|
112
|
+
.ant-select-suffix {
|
|
105
113
|
display: flex !important;
|
|
106
114
|
align-items: center !important;
|
|
107
115
|
gap: 8px !important;
|
|
108
116
|
width: auto !important;
|
|
109
117
|
align-self: center !important;
|
|
110
|
-
|
|
118
|
+
|
|
111
119
|
span {
|
|
112
120
|
color: ${theme_1.straitsXTheme.color.base.onNeutral} !important;
|
|
113
121
|
}
|
|
@@ -144,11 +152,11 @@ const dropdownSelectedOptionStyles = `
|
|
|
144
152
|
.ant-select-item-option-selected {
|
|
145
153
|
background: #d7efe2 !important;
|
|
146
154
|
position: relative !important;
|
|
147
|
-
|
|
155
|
+
|
|
148
156
|
.anticon {
|
|
149
157
|
display: none !important;
|
|
150
158
|
}
|
|
151
|
-
|
|
159
|
+
|
|
152
160
|
&::after {
|
|
153
161
|
content: 'check' !important;
|
|
154
162
|
font-family: 'Material Symbols Rounded' !important;
|
|
@@ -165,7 +173,7 @@ const dropdownInteractiveStyles = `
|
|
|
165
173
|
.ant-select-item:hover {
|
|
166
174
|
background: ${theme_1.straitsXTheme.color.interactive.hoverSurface} !important;
|
|
167
175
|
}
|
|
168
|
-
|
|
176
|
+
|
|
169
177
|
.ant-select-item:active {
|
|
170
178
|
background: ${theme_1.straitsXTheme.color.interactive.pressedSurface} !important;
|
|
171
179
|
}
|
|
@@ -174,7 +182,7 @@ const dropdownDisabledOptionStyles = `
|
|
|
174
182
|
.ant-select-item-option-disabled,
|
|
175
183
|
.ant-select-item-option-disabled:hover {
|
|
176
184
|
background: ${theme_1.straitsXTheme.color.surface.disabledSurface} !important;
|
|
177
|
-
span {
|
|
185
|
+
span {
|
|
178
186
|
color: ${theme_1.straitsXTheme.color.surface.disabledOnSurface} !important;
|
|
179
187
|
}
|
|
180
188
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/components/Select/style.ts"],"names":[],"mappings":";;;;;;AAAA,6DAAoC;AACpC,+BAA0C;AAC1C,6CAAiD;AAEpC,QAAA,cAAc,GAAG,gBAAM,CAAC,GAAG,CAAA;;;;;;;;CAQvC,CAAA;AAEY,QAAA,eAAe,GAAG,gBAAM,CAAC,GAAG,CAAA;;;;CAIxC,CAAA;AAEY,QAAA,eAAe,GAAG,gBAAM,CAAC,GAAG,CAAA;;;;;;CAMxC,CAAA;AAED,MAAM,oBAAoB,GAAG,CAAC,KAK7B,EAAE,EAAE;IACH,
|
|
1
|
+
{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/components/Select/style.ts"],"names":[],"mappings":"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"}
|
package/es/index.js
CHANGED
|
@@ -484,17 +484,17 @@ import*as tt from"react";import et,{createContext as nt,createElement as it,Frag
|
|
|
484
484
|
gap: 4px;
|
|
485
485
|
min-width: 100px;
|
|
486
486
|
width: 100%;
|
|
487
|
-
`,su=`\n .ant-select-
|
|
487
|
+
`,su=`\n .ant-select-placeholder {\n display: flex;\n align-items: center;\n\n span {\n color: ${Oi.color.component.placeholderInput} !important;\n }\n }\n`,lu=`\n .ant-select-selection-item {\n display: flex !important;\n align-items: center !important;\n color: ${Oi.color.base.onNeutral} !important;\n }\n\n &.ant-select-open .ant-select-content {\n color: ${Oi.color.base.onNeutral} !important;\n }\n`,cu=`\n .ant-select-suffix {\n display: flex !important;\n align-items: center !important;\n gap: 8px !important;\n width: auto !important;\n align-self: center !important;\n\n span {\n color: ${Oi.color.base.onNeutral} !important;\n }\n }\n`,du=Un(wt)`
|
|
488
488
|
.ant-form-item-has-error & {
|
|
489
489
|
background-color: ${Oi.color.surface.neutral} !important;
|
|
490
490
|
}
|
|
491
|
-
${t=>(t=>{const e="multiple"===t.$mode?"sm"===t.$size?"6px":"8px":"12px";return`\n
|
|
492
|
-
${t=>(t=>`\n &:
|
|
491
|
+
${t=>(t=>{const e="multiple"===t.$mode?"sm"===t.$size?"6px":"8px":"12px";return`\n &.ant-select {\n outline: none !important;\n border-radius: ${"sm"===t.$size?"8px":"12px"} !important;\n position: relative !important;\n display: flex;\n align-items: ${"multiple"===t.$mode?"flex-start":"center"} !important;\n padding-inline: 16px !important;\n padding-block: ${e} !important;\n\n min-height: ${"sm"===t.$size?"36px":"48px"} !important;\n ${"multiple"!==t.$mode?`height: ${"sm"===t.$size?"36px":"48px"} !important;`:"height: auto !important;"}\n\n &:not(.ant-select-borderless) {\n background: ${t.disabled?Oi.color.surface.disabledSurface:Oi.color.surface.neutral} !important;\n\n border: 1px solid ${t.error?Oi.color.status.critical:Oi.color.base.line} !important;\n }\n }\n\n &.ant-select-multiple:not(.ant-select-borderless) .ant-select-content {\n &:before {\n display: none !important;\n }\n gap: 8px !important;\n }\n`})(t)}
|
|
492
|
+
${t=>(t=>`\n &:not(.ant-select-borderless):hover,\n &.ant-select-focused:not(.ant-select-borderless) {\n ${!t.disabled&&`\n box-shadow: 0 0 0 1px ${Oi.color.base.onNeutral}20 !important;\n border: 1px solid ${t.error?Oi.color.status.critical:Oi.color.base.primary2} !important;\n `}\n }\n`)(t)}
|
|
493
493
|
${su}
|
|
494
|
-
${t=>(t=>`\n .ant-select-
|
|
494
|
+
${t=>(t=>`\n .ant-select-content {\n gap: 8px !important;\n ${"multiple"===t.$mode?"flex-wrap: wrap !important;":""}\n ${"multiple"===t.$mode?"align-content: center !important;":""}\n }\n`)(t)}
|
|
495
495
|
${lu}
|
|
496
496
|
${cu}
|
|
497
|
-
`,hu=`\n .rc-virtual-list-holder-inner {\n gap: 0;\n }\n .rc-virtual-list-holder {\n overflow-y: auto !important;\n }\n .ant-select-item {\n color: ${Oi.color.base.onNeutral} !important;\n padding: 12px !important;\n margin-bottom: 4px !important;\n }\n .ant-select-item:last-child {\n margin-bottom: 0 !important;\n }\n`,uu=`\n .ant-select-item-option-selected {\n background: #d7efe2 !important;\n position: relative !important;\n
|
|
497
|
+
`,hu=`\n .rc-virtual-list-holder-inner {\n gap: 0;\n }\n .rc-virtual-list-holder {\n overflow-y: auto !important;\n }\n .ant-select-item {\n color: ${Oi.color.base.onNeutral} !important;\n padding: 12px !important;\n margin-bottom: 4px !important;\n }\n .ant-select-item:last-child {\n margin-bottom: 0 !important;\n }\n`,uu=`\n .ant-select-item-option-selected {\n background: #d7efe2 !important;\n position: relative !important;\n\n .anticon {\n display: none !important;\n }\n\n &::after {\n content: 'check' !important;\n font-family: 'Material Symbols Rounded' !important;\n color: ${Oi.color.status.positive} !important;\n position: absolute !important;\n right: 12px !important;\n top: 50% !important;\n transform: translateY(-50%) !important;\n font-size: 16px !important;\n }\n }\n`,pu=`\n .ant-select-item:hover {\n background: ${Oi.color.interactive.hoverSurface} !important;\n }\n\n .ant-select-item:active {\n background: ${Oi.color.interactive.pressedSurface} !important;\n }\n`,fu=`\n .ant-select-item-option-disabled,\n .ant-select-item-option-disabled:hover {\n background: ${Oi.color.surface.disabledSurface} !important;\n span {\n color: ${Oi.color.surface.disabledOnSurface} !important;\n }\n }\n`,mu=Un.div`
|
|
498
498
|
${hu}
|
|
499
499
|
${uu}
|
|
500
500
|
${pu}
|