@stack-spot/portal-components 2.18.0 → 2.19.1
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/CHANGELOG.md +14 -0
- package/dist/components/Select/MultiValue.d.ts +3 -0
- package/dist/components/Select/MultiValue.d.ts.map +1 -0
- package/dist/components/Select/MultiValue.js +27 -0
- package/dist/components/Select/MultiValue.js.map +1 -0
- package/dist/components/Select/SelectSearch.d.ts.map +1 -1
- package/dist/components/Select/SelectSearch.js +29 -6
- package/dist/components/Select/SelectSearch.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Select/MultiValue.tsx +49 -0
- package/src/components/Select/SelectSearch.tsx +29 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [2.19.1](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.19.0...portal-components@v2.19.1) (2025-04-10)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Bug Fixes
|
|
7
|
+
|
|
8
|
+
* 1448 multiselect ([#917](https://github.com/stack-spot/portal-commons/issues/917)) ([42bca57](https://github.com/stack-spot/portal-commons/commit/42bca57a4b82d786ea80e12ce6c3d44264ebf5a0))
|
|
9
|
+
|
|
10
|
+
## [2.19.0](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.18.0...portal-components@v2.19.0) (2025-04-09)
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
|
|
15
|
+
* 1448 multiselect ([#913](https://github.com/stack-spot/portal-commons/issues/913)) ([d07a884](https://github.com/stack-spot/portal-commons/commit/d07a8846a6c2b37fd6b58c6febc7fcb0bb682a67))
|
|
16
|
+
|
|
3
17
|
## [2.18.0](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.17.0...portal-components@v2.18.0) (2025-04-07)
|
|
4
18
|
|
|
5
19
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MultiValue.d.ts","sourceRoot":"","sources":["../../../src/components/Select/MultiValue.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAc,MAAM,cAAc,CAAA;AAE1D,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,4CAiChD,CAAA"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { TimesMini } from '@citric/icons';
|
|
3
|
+
import { Badge, IconButton } from '@citric/ui';
|
|
4
|
+
import { interpolate, useTranslate } from '@stack-spot/portal-translate';
|
|
5
|
+
import { components } from 'react-select';
|
|
6
|
+
export const MultiValue = (props) => {
|
|
7
|
+
const t = useTranslate(dictionary);
|
|
8
|
+
return (_jsx(_Fragment, { children: _jsx(components.MultiValue, { ...props, children: _jsx(Badge, { appearance: "square", className: "badge", palette: "cyan", sx: {
|
|
9
|
+
mr: 0,
|
|
10
|
+
my: 0,
|
|
11
|
+
'.badge-citric-container:not(:has(> button:first-child))': {
|
|
12
|
+
marginRight: 0,
|
|
13
|
+
},
|
|
14
|
+
}, afterElement: _jsx(components.MultiValueRemove, { ...props, children: _jsx(IconButton, { type: "button", "aria-label": interpolate(t.ariaLabelRemoveItemButton, props.children), appearance: "square", color: "cyan", onClick: (e) => {
|
|
15
|
+
e.stopPropagation();
|
|
16
|
+
props.removeProps?.onClick?.(e);
|
|
17
|
+
}, children: _jsx(TimesMini, {}) }) }), children: props.children }) }) }));
|
|
18
|
+
};
|
|
19
|
+
const dictionary = {
|
|
20
|
+
en: {
|
|
21
|
+
ariaLabelRemoveItemButton: 'Remove item $0',
|
|
22
|
+
},
|
|
23
|
+
pt: {
|
|
24
|
+
ariaLabelRemoveItemButton: 'Remover item $0',
|
|
25
|
+
},
|
|
26
|
+
};
|
|
27
|
+
//# sourceMappingURL=MultiValue.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MultiValue.js","sourceRoot":"","sources":["../../../src/components/Select/MultiValue.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAC9C,OAAO,EAAc,WAAW,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACpF,OAAO,EAAmB,UAAU,EAAE,MAAM,cAAc,CAAA;AAE1D,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAE,EAAE;IACnD,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAClC,OAAO,CACL,4BACE,KAAC,UAAU,CAAC,UAAU,OAAK,KAAK,YAC9B,KAAC,KAAK,IAAC,UAAU,EAAC,QAAQ,EAAC,SAAS,EAAC,OAAO,EAAC,OAAO,EAAC,MAAM,EAAC,EAAE,EAC9D;oBACE,EAAE,EAAE,CAAC;oBACL,EAAE,EAAE,CAAC;oBACL,yDAAyD,EAAE;wBACzD,WAAW,EAAE,CAAC;qBACf;iBACc,EACjB,YAAY,EACV,KAAC,UAAU,CAAC,gBAAgB,OAAK,KAAK,YACpC,KAAC,UAAU,IACT,IAAI,EAAC,QAAQ,gBACD,WAAW,CAAC,CAAC,CAAC,yBAAyB,EAAE,KAAK,CAAC,QAAQ,CAAC,EACpE,UAAU,EAAC,QAAQ,EACnB,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,CAAC,CAA4C,EAAE,EAAE;4BACxD,CAAC,CAAC,eAAe,EAAE,CAAA;4BACnB,KAAK,CAAC,WAAW,EAAE,OAAO,EAAE,CAAC,CAAiD,CAAC,CAAA;wBACjF,CAAC,YACD,KAAC,SAAS,KAAG,GACF,GACe,YAE7B,KAAK,CAAC,QAAQ,GACT,GACc,GACvB,CACJ,CAAA;AACH,CAAC,CAAA;AAED,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,yBAAyB,EAAE,gBAAgB;KAC5C;IACD,EAAE,EAAE;QACF,yBAAyB,EAAE,iBAAiB;KAC7C;CACmB,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectSearch.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectSearch.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAiC,WAAW,EAAE,MAAM,OAAO,CAAA;AAClE,OAAe,EAAE,UAAU,EAAsB,KAAK,IAAI,WAAW,EAAE,MAAM,cAAc,CAAA;
|
|
1
|
+
{"version":3,"file":"SelectSearch.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectSearch.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAiC,WAAW,EAAE,MAAM,OAAO,CAAA;AAClE,OAAe,EAAE,UAAU,EAAsB,KAAK,IAAI,WAAW,EAAE,MAAM,cAAc,CAAA;AAI3F,MAAM,WAAW,iBAAkB,SAAQ,OAAO,CAAC,WAAW,CAAC;IAC7D,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC,OAAO,UAAU,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACpC,GAAG,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;CACxB;AAmBD,eAAO,MAAM,YAAY,GAAI,oGAQ1B,iBAAiB,4CAuInB,CAAA"}
|
|
@@ -4,10 +4,8 @@ import { ChevronDown } from '@citric/icons';
|
|
|
4
4
|
import { theme } from '@stack-spot/portal-theme';
|
|
5
5
|
import { useTranslate } from '@stack-spot/portal-translate';
|
|
6
6
|
import Select, { components } from 'react-select';
|
|
7
|
-
import { BadgeItem } from './BadgeItem.js';
|
|
8
7
|
import { ClearInput } from './ClearInput.js';
|
|
9
|
-
import {
|
|
10
|
-
import { LabelItem } from './LabelItem.js';
|
|
8
|
+
import { MultiValue } from './MultiValue.js';
|
|
11
9
|
const EmptyComponent = () => _jsx(_Fragment, {});
|
|
12
10
|
const DropdownIndicator = (props) => _jsx(IconBox, { "aria-hidden": "true", colorIcon: "gray.50", sx: {
|
|
13
11
|
cursor: 'pointer',
|
|
@@ -106,14 +104,39 @@ export const SelectSearch = ({ options, components: customComponents = {}, onCha
|
|
|
106
104
|
},
|
|
107
105
|
...customStyles?.menuList?.(base, state),
|
|
108
106
|
}),
|
|
107
|
+
multiValue: (base, state) => ({
|
|
108
|
+
...base,
|
|
109
|
+
background: 'transparent',
|
|
110
|
+
alignItems: 'center',
|
|
111
|
+
margin: 0,
|
|
112
|
+
...customStyles?.multiValue?.(base, state),
|
|
113
|
+
}),
|
|
114
|
+
multiValueLabel: (base, state) => ({
|
|
115
|
+
...base,
|
|
116
|
+
margin: 0,
|
|
117
|
+
...customStyles?.multiValueLabel?.(base, state),
|
|
118
|
+
}),
|
|
119
|
+
multiValueRemove: (base, state) => ({
|
|
120
|
+
...base,
|
|
121
|
+
backgroundColor: 'transparent',
|
|
122
|
+
margin: 0,
|
|
123
|
+
'&:hover': {
|
|
124
|
+
backgroundColor: 'transparent',
|
|
125
|
+
},
|
|
126
|
+
...customStyles?.multiValueRemove?.(base, state),
|
|
127
|
+
}),
|
|
128
|
+
noOptionsMessage: (base, state) => ({
|
|
129
|
+
...base,
|
|
130
|
+
backgroundColor: theme.color.light[300],
|
|
131
|
+
...customStyles?.noOptionsMessage?.(base, state),
|
|
132
|
+
}),
|
|
109
133
|
}, components: {
|
|
110
134
|
...components,
|
|
111
135
|
DropdownIndicator,
|
|
112
136
|
IndicatorSeparator: EmptyComponent,
|
|
113
|
-
MultiValueContainer: BadgeItem,
|
|
114
|
-
MultiValueLabel: LabelItem,
|
|
115
|
-
MultiValueRemove: CloseItem,
|
|
116
137
|
ClearIndicator: ClearInput,
|
|
138
|
+
MultiValue: MultiValue,
|
|
139
|
+
MultiValueRemove: () => _jsx(_Fragment, {}),
|
|
117
140
|
...customComponents,
|
|
118
141
|
} }));
|
|
119
142
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectSearch.js","sourceRoot":"","sources":["../../../src/components/Select/SelectSearch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAEvE,OAAO,MAAM,EAAE,EAAE,UAAU,EAA4C,MAAM,cAAc,CAAA;AAC3F,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"SelectSearch.js","sourceRoot":"","sources":["../../../src/components/Select/SelectSearch.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { SxProperties } from '@citric/core/dist/sx'
|
|
2
|
+
import { TimesMini } from '@citric/icons'
|
|
3
|
+
import { Badge, IconButton } from '@citric/ui'
|
|
4
|
+
import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
|
|
5
|
+
import { MultiValueProps, components } from 'react-select'
|
|
6
|
+
|
|
7
|
+
export const MultiValue = (props: MultiValueProps) => {
|
|
8
|
+
const t = useTranslate(dictionary)
|
|
9
|
+
return (
|
|
10
|
+
<>
|
|
11
|
+
<components.MultiValue {...props}>
|
|
12
|
+
<Badge appearance="square" className="badge" palette="cyan" sx={
|
|
13
|
+
{
|
|
14
|
+
mr: 0,
|
|
15
|
+
my: 0,
|
|
16
|
+
'.badge-citric-container:not(:has(> button:first-child))': {
|
|
17
|
+
marginRight: 0,
|
|
18
|
+
},
|
|
19
|
+
} as SxProperties}
|
|
20
|
+
afterElement={
|
|
21
|
+
<components.MultiValueRemove {...props}>
|
|
22
|
+
<IconButton
|
|
23
|
+
type="button"
|
|
24
|
+
aria-label={interpolate(t.ariaLabelRemoveItemButton, props.children)}
|
|
25
|
+
appearance="square"
|
|
26
|
+
color="cyan"
|
|
27
|
+
onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
|
|
28
|
+
e.stopPropagation()
|
|
29
|
+
props.removeProps?.onClick?.(e as React.MouseEvent<HTMLDivElement, MouseEvent>)
|
|
30
|
+
}}>
|
|
31
|
+
<TimesMini />
|
|
32
|
+
</IconButton>
|
|
33
|
+
</components.MultiValueRemove>
|
|
34
|
+
}>
|
|
35
|
+
{props.children}
|
|
36
|
+
</Badge>
|
|
37
|
+
</components.MultiValue>
|
|
38
|
+
</>
|
|
39
|
+
)
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
const dictionary = {
|
|
43
|
+
en: {
|
|
44
|
+
ariaLabelRemoveItemButton: 'Remove item $0',
|
|
45
|
+
},
|
|
46
|
+
pt: {
|
|
47
|
+
ariaLabelRemoveItemButton: 'Remover item $0',
|
|
48
|
+
},
|
|
49
|
+
} satisfies Dictionary
|
|
@@ -4,10 +4,8 @@ import { theme } from '@stack-spot/portal-theme'
|
|
|
4
4
|
import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
|
|
5
5
|
import { ComponentProps, ComponentType, RefCallback } from 'react'
|
|
6
6
|
import Select, { components, CSSObjectWithLabel, Props as SelectProps } from 'react-select'
|
|
7
|
-
import { BadgeItem } from './BadgeItem'
|
|
8
7
|
import { ClearInput } from './ClearInput'
|
|
9
|
-
import {
|
|
10
|
-
import { LabelItem } from './LabelItem'
|
|
8
|
+
import { MultiValue } from './MultiValue'
|
|
11
9
|
|
|
12
10
|
export interface SelectSearchProps extends Partial<SelectProps> {
|
|
13
11
|
options: any[],
|
|
@@ -139,15 +137,40 @@ export const SelectSearch = ({
|
|
|
139
137
|
},
|
|
140
138
|
...customStyles?.menuList?.(base, state),
|
|
141
139
|
}),
|
|
140
|
+
multiValue: (base, state) => ({
|
|
141
|
+
...base,
|
|
142
|
+
background: 'transparent',
|
|
143
|
+
alignItems: 'center',
|
|
144
|
+
margin: 0,
|
|
145
|
+
...customStyles?.multiValue?.(base, state),
|
|
146
|
+
}),
|
|
147
|
+
multiValueLabel: (base, state) => ({
|
|
148
|
+
...base,
|
|
149
|
+
margin: 0,
|
|
150
|
+
...customStyles?.multiValueLabel?.(base, state),
|
|
151
|
+
}),
|
|
152
|
+
multiValueRemove: (base, state) => ({
|
|
153
|
+
...base,
|
|
154
|
+
backgroundColor: 'transparent',
|
|
155
|
+
margin: 0,
|
|
156
|
+
'&:hover': {
|
|
157
|
+
backgroundColor: 'transparent',
|
|
158
|
+
},
|
|
159
|
+
...customStyles?.multiValueRemove?.(base, state),
|
|
160
|
+
}),
|
|
161
|
+
noOptionsMessage: (base, state) => ({
|
|
162
|
+
...base,
|
|
163
|
+
backgroundColor: theme.color.light[300],
|
|
164
|
+
...customStyles?.noOptionsMessage?.(base, state),
|
|
165
|
+
}),
|
|
142
166
|
}}
|
|
143
167
|
components={{
|
|
144
168
|
...components,
|
|
145
169
|
DropdownIndicator,
|
|
146
170
|
IndicatorSeparator: EmptyComponent,
|
|
147
|
-
MultiValueContainer: BadgeItem,
|
|
148
|
-
MultiValueLabel: LabelItem,
|
|
149
|
-
MultiValueRemove: CloseItem,
|
|
150
171
|
ClearIndicator: ClearInput,
|
|
172
|
+
MultiValue: MultiValue,
|
|
173
|
+
MultiValueRemove: () => <></>,
|
|
151
174
|
...customComponents,
|
|
152
175
|
}}
|
|
153
176
|
/>
|