@stack-spot/citric-react 0.37.1-beta.2 → 0.37.1-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/citric.css
CHANGED
|
@@ -1632,6 +1632,8 @@ input[type="range"][data-citric="slider"] {
|
|
|
1632
1632
|
}
|
|
1633
1633
|
[data-citric="checkbox-row"] {
|
|
1634
1634
|
gap: 8px;
|
|
1635
|
+
display: flex !important;
|
|
1636
|
+
flex-direction: row !important;
|
|
1635
1637
|
}
|
|
1636
1638
|
label {
|
|
1637
1639
|
cursor: pointer;
|
|
@@ -1645,6 +1647,18 @@ input[type="range"][data-citric="slider"] {
|
|
|
1645
1647
|
.select-all {
|
|
1646
1648
|
padding: var(--padding, var(--default-padding));
|
|
1647
1649
|
}
|
|
1650
|
+
.remove-button {
|
|
1651
|
+
width: 15px;
|
|
1652
|
+
height: 15px;
|
|
1653
|
+
border-radius: 150px;
|
|
1654
|
+
display: flex;
|
|
1655
|
+
align-items: center;
|
|
1656
|
+
justify-content: center;
|
|
1657
|
+
cursor: pointer;
|
|
1658
|
+
}
|
|
1659
|
+
.remove-button[aria-disabled="true"] {
|
|
1660
|
+
cursor: not-allowed;
|
|
1661
|
+
}
|
|
1648
1662
|
}
|
|
1649
1663
|
|
|
1650
1664
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/Select/MultiSelect.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAEzC,MAAM,WAAW,oBAAoB,CAAC,CAAC,CAAE,SACvC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,GAAG,cAAc,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;IACpI,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/B;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9C;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAC/C;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,CAAC;IACpC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,CAAC,CAAC;CAC1C;AAED,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC,GACnH,oBAAoB,CAAC,CAAC,CAAC,CAAA;AAEzB;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,WAAW,GACD,CAAC,qPAsBnB,gBAAgB,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/Select/MultiSelect.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAEzC,MAAM,WAAW,oBAAoB,CAAC,CAAC,CAAE,SACvC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,GAAG,cAAc,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;IACpI,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/B;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9C;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAC/C;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,CAAC;IACpC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,CAAC,CAAC;CAC1C;AAED,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC,GACnH,oBAAoB,CAAC,CAAC,CAAC,CAAA;AAEzB;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,WAAW,GACD,CAAC,qPAsBnB,gBAAgB,CAAC,CAAC,CAAC,4CAoNvB,CAAA"}
|
|
@@ -10,7 +10,7 @@ import { Badge } from '../Badge.js';
|
|
|
10
10
|
import { Checkbox } from '../Checkbox.js';
|
|
11
11
|
import { CheckboxGroup } from '../CheckboxGroup.js';
|
|
12
12
|
import { CitricComponent } from '../CitricComponent.js';
|
|
13
|
-
import {
|
|
13
|
+
import { Icon } from '../Icon.js';
|
|
14
14
|
import { Input } from '../Input.js';
|
|
15
15
|
import { Row } from '../layout.js';
|
|
16
16
|
import { ProgressCircular } from '../ProgressCircular.js';
|
|
@@ -64,7 +64,7 @@ export const MultiSelect = withRef(function MultiSelect({ ref, options, value =
|
|
|
64
64
|
useEffect(() => {
|
|
65
65
|
if (value !== controls.value)
|
|
66
66
|
controls.setValue(value);
|
|
67
|
-
}, [value
|
|
67
|
+
}, [value, controls]);
|
|
68
68
|
const handleRemoveChip = useCallback((option) => {
|
|
69
69
|
const newValue = value.filter(v => renderKey(v) !== renderKey(option));
|
|
70
70
|
controls.setValue(newValue);
|
|
@@ -89,7 +89,7 @@ export const MultiSelect = withRef(function MultiSelect({ ref, options, value =
|
|
|
89
89
|
}
|
|
90
90
|
controls.setFilter('');
|
|
91
91
|
}
|
|
92
|
-
}, [allowCustomOptions, controls
|
|
92
|
+
}, [allowCustomOptions, createOption, controls, value, renderKey]);
|
|
93
93
|
// Check if the current filter does not match any existing option
|
|
94
94
|
const hasTemporaryOption = useMemo(() => {
|
|
95
95
|
if (!allowCustomOptions || !controls.filter)
|
|
@@ -110,14 +110,19 @@ export const MultiSelect = withRef(function MultiSelect({ ref, options, value =
|
|
|
110
110
|
return _jsx("span", { className: "placeholder header-text", children: placeholder });
|
|
111
111
|
const reversed = [...value].reverse();
|
|
112
112
|
if (showAsChips) {
|
|
113
|
-
return (_jsx(Row, { className: "header-chips", gap: "4px", flex: "1", style: { maxWidth: '100%', flexWrap: 'wrap' }, children: reversed.map(option => (_jsxs(Badge, { className: "chip", tag: "div", onClick: (e) =>
|
|
113
|
+
return (_jsx(Row, { className: "header-chips", gap: "4px", flex: "1", style: { maxWidth: '100%', flexWrap: 'wrap' }, children: reversed.map(option => (_jsxs(Badge, { className: "chip", tag: "div", onClick: (e) => e.stopPropagation(), children: [_jsx("span", { children: renderLabel(option) }), !disabled && (_jsx("span", { className: "remove-button", onClick: (e) => {
|
|
114
114
|
e.stopPropagation();
|
|
115
115
|
handleRemoveChip(option);
|
|
116
|
-
},
|
|
116
|
+
}, onKeyDown: (e) => {
|
|
117
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
118
|
+
e.stopPropagation();
|
|
119
|
+
handleRemoveChip(option);
|
|
120
|
+
}
|
|
121
|
+
}, tabIndex: 0, "aria-label": `${t.remove} ${renderLabel(option)}`, children: _jsx(Icon, { icon: "Times" }) }))] }, renderKey(option)))) }));
|
|
117
122
|
}
|
|
118
123
|
return ((renderHeader?.(reversed)
|
|
119
124
|
?? (renderOption
|
|
120
|
-
? _jsx(Row, { className: "header-text", children: reversed.map(
|
|
125
|
+
? _jsx(Row, { className: "header-text", children: reversed.map(renderOption) })
|
|
121
126
|
: _jsx("span", { className: "header-text", children: reversed.map(renderLabel).join(', ') }))) || _jsx("span", {}));
|
|
122
127
|
}, [value, placeholder, showAsChips, disabled, renderKey, renderLabel, handleRemoveChip, t, renderHeader, renderOption]);
|
|
123
128
|
return (_jsxs(CitricComponent, { tag: "div", component: "multi-select", style: maxHeight ? applyCSSVariable(style, 'max-height', `${maxHeight}px`) : style, className: listToClass([
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelect.js","sourceRoot":"","sources":["../../../src/components/Select/MultiSelect.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACzE,OAAO,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAA;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAC1E,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"MultiSelect.js","sourceRoot":"","sources":["../../../src/components/Select/MultiSelect.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -9,7 +9,7 @@ import { Badge } from '../Badge'
|
|
|
9
9
|
import { Checkbox } from '../Checkbox'
|
|
10
10
|
import { CheckboxGroup } from '../CheckboxGroup'
|
|
11
11
|
import { CitricComponent } from '../CitricComponent'
|
|
12
|
-
import {
|
|
12
|
+
import { Icon } from '../Icon'
|
|
13
13
|
import { Input } from '../Input'
|
|
14
14
|
import { Row } from '../layout'
|
|
15
15
|
import { ProgressCircular } from '../ProgressCircular'
|
|
@@ -154,7 +154,7 @@ export const MultiSelect = withRef(
|
|
|
154
154
|
|
|
155
155
|
useEffect(() => {
|
|
156
156
|
if (value !== controls.value) controls.setValue(value)
|
|
157
|
-
}, [value
|
|
157
|
+
}, [value, controls])
|
|
158
158
|
|
|
159
159
|
const handleRemoveChip = useCallback((option: T) => {
|
|
160
160
|
const newValue = value.filter(v => renderKey(v) !== renderKey(option))
|
|
@@ -180,7 +180,7 @@ export const MultiSelect = withRef(
|
|
|
180
180
|
}
|
|
181
181
|
controls.setFilter('' as any)
|
|
182
182
|
}
|
|
183
|
-
}, [allowCustomOptions, controls
|
|
183
|
+
}, [allowCustomOptions, createOption, controls, value, renderKey])
|
|
184
184
|
|
|
185
185
|
// Check if the current filter does not match any existing option
|
|
186
186
|
const hasTemporaryOption = useMemo(() => {
|
|
@@ -203,28 +203,38 @@ export const MultiSelect = withRef(
|
|
|
203
203
|
|
|
204
204
|
if (showAsChips) {
|
|
205
205
|
return (
|
|
206
|
-
<Row
|
|
206
|
+
<Row
|
|
207
|
+
className="header-chips"
|
|
208
|
+
gap="4px"
|
|
209
|
+
flex="1"
|
|
210
|
+
style={{ maxWidth: '100%', flexWrap: 'wrap' }}
|
|
211
|
+
>
|
|
207
212
|
{reversed.map(option => (
|
|
208
213
|
<Badge
|
|
209
214
|
key={renderKey(option)}
|
|
210
215
|
className="chip"
|
|
211
216
|
tag="div"
|
|
212
|
-
onClick={(e) =>
|
|
217
|
+
onClick={(e) => e.stopPropagation()}
|
|
213
218
|
>
|
|
214
219
|
<span>{renderLabel(option)}</span>
|
|
215
220
|
{!disabled && (
|
|
216
|
-
<
|
|
217
|
-
icon="Times"
|
|
218
|
-
type="button"
|
|
221
|
+
<span
|
|
219
222
|
className="remove-button"
|
|
220
|
-
size="xs"
|
|
221
|
-
disabled={disabled}
|
|
222
223
|
onClick={(e) => {
|
|
223
224
|
e.stopPropagation()
|
|
224
225
|
handleRemoveChip(option)
|
|
225
226
|
}}
|
|
227
|
+
onKeyDown={(e) => {
|
|
228
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
229
|
+
e.stopPropagation()
|
|
230
|
+
handleRemoveChip(option)
|
|
231
|
+
}
|
|
232
|
+
}}
|
|
233
|
+
tabIndex={0}
|
|
226
234
|
aria-label={`${t.remove} ${renderLabel(option)}`}
|
|
227
|
-
|
|
235
|
+
>
|
|
236
|
+
<Icon icon="Times" />
|
|
237
|
+
</span>
|
|
228
238
|
)}
|
|
229
239
|
</Badge>
|
|
230
240
|
))}
|
|
@@ -235,11 +245,7 @@ export const MultiSelect = withRef(
|
|
|
235
245
|
return (
|
|
236
246
|
(renderHeader?.(reversed)
|
|
237
247
|
?? (renderOption
|
|
238
|
-
? <Row className="header-text">
|
|
239
|
-
{reversed.map((option, index) => (
|
|
240
|
-
<span key={renderKey(option) ?? index}>{renderOption(option)}</span>
|
|
241
|
-
))}
|
|
242
|
-
</Row>
|
|
248
|
+
? <Row className="header-text">{reversed.map(renderOption)}</Row>
|
|
243
249
|
: <span className="header-text">{reversed.map(renderLabel).join(', ')}</span>
|
|
244
250
|
)
|
|
245
251
|
) || <span></span>
|