@stack-spot/portal-components 2.19.1 → 2.19.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/CHANGELOG.md +7 -0
- package/dist/components/Select/BadgeItem.d.ts +3 -2
- package/dist/components/Select/BadgeItem.d.ts.map +1 -1
- package/dist/components/Select/BadgeItem.js +25 -2
- package/dist/components/Select/BadgeItem.js.map +1 -1
- package/dist/components/Select/CreatableSelect.d.ts +0 -1
- package/dist/components/Select/CreatableSelect.d.ts.map +1 -1
- package/dist/components/Select/CreatableSelect.js +7 -5
- package/dist/components/Select/CreatableSelect.js.map +1 -1
- package/dist/components/Select/MultiValue.js +1 -1
- package/dist/components/Select/MultiValue.js.map +1 -1
- package/package.json +4 -4
- package/src/components/Select/BadgeItem.tsx +58 -8
- package/src/components/Select/CreatableSelect.tsx +7 -7
- package/src/components/Select/MultiValue.tsx +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [2.19.2](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.19.1...portal-components@v2.19.2) (2025-04-17)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Bug Fixes
|
|
7
|
+
|
|
8
|
+
* Fix creatable badge ([#938](https://github.com/stack-spot/portal-commons/issues/938)) ([c8a8ac7](https://github.com/stack-spot/portal-commons/commit/c8a8ac79c2cb30dc5cb9311b5429a80058f4308c))
|
|
9
|
+
|
|
3
10
|
## [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
11
|
|
|
5
12
|
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
1
|
+
import { GroupBase, MultiValueProps } from 'react-select';
|
|
2
|
+
import { CreatableSelectOptionType } from './types.js';
|
|
3
|
+
export declare const BadgeItem: (props: MultiValueProps<CreatableSelectOptionType, boolean, GroupBase<any>>) => import("react/jsx-runtime").JSX.Element;
|
|
3
4
|
//# sourceMappingURL=BadgeItem.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeItem.d.ts","sourceRoot":"","sources":["../../../src/components/Select/BadgeItem.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BadgeItem.d.ts","sourceRoot":"","sources":["../../../src/components/Select/BadgeItem.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAc,SAAS,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AACrE,OAAO,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAEnD,eAAO,MAAM,SAAS,GAAI,OAAO,eAAe,CAAC,yBAAyB,EAAE,OAAO,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC,4CAuCnG,CAAA"}
|
|
@@ -1,5 +1,28 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { TimesMini } from '@citric/icons';
|
|
3
|
+
import { Badge, IconButton } from '@citric/ui';
|
|
4
|
+
import { interpolate, useTranslate } from '@stack-spot/portal-translate';
|
|
3
5
|
import { components } from 'react-select';
|
|
4
|
-
export const BadgeItem = (props) =>
|
|
6
|
+
export const BadgeItem = (props) => {
|
|
7
|
+
const t = useTranslate(dictionary);
|
|
8
|
+
const handleClick = (event) => {
|
|
9
|
+
props.removeProps.onClick?.(event);
|
|
10
|
+
};
|
|
11
|
+
return (_jsx(components.MultiValue, { ...props, children: _jsx(Badge, { appearance: "square", className: "badge", palette: "cyan", sx: { mb: 2,
|
|
12
|
+
'.badge-citric-container:not(:has(> button:first-child))': {
|
|
13
|
+
marginRight: 0,
|
|
14
|
+
},
|
|
15
|
+
}, afterElement: _jsx(components.MultiValueRemove, { ...props, children: _jsx(IconButton, { type: "button", "aria-label": interpolate(t.ariaLabelRemoveItemButton, props.children), colorIcon: "cyan.800", appearance: "square", onClick: (e) => {
|
|
16
|
+
e.stopPropagation();
|
|
17
|
+
handleClick(e);
|
|
18
|
+
}, children: _jsx(TimesMini, {}) }) }), children: props.children }) }));
|
|
19
|
+
};
|
|
20
|
+
const dictionary = {
|
|
21
|
+
en: {
|
|
22
|
+
ariaLabelRemoveItemButton: 'Remove item $0',
|
|
23
|
+
},
|
|
24
|
+
pt: {
|
|
25
|
+
ariaLabelRemoveItemButton: 'Remover item $0',
|
|
26
|
+
},
|
|
27
|
+
};
|
|
5
28
|
//# sourceMappingURL=BadgeItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeItem.js","sourceRoot":"","sources":["../../../src/components/Select/BadgeItem.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"BadgeItem.js","sourceRoot":"","sources":["../../../src/components/Select/BadgeItem.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;AAEpF,OAAO,EAAE,UAAU,EAA8B,MAAM,cAAc,CAAA;AAGrE,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAA0E,EAAE,EAAE;IACtG,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAElC,MAAM,WAAW,GAAG,CAAwB,KAAoB,EAAE,EAAE;QAClE,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC,KAA8C,CAAC,CAAA;IAC7E,CAAC,CAAA;IAED,OAAO,CACL,KAAC,UAAU,CAAC,UAAU,OAAK,KAAK,YAC9B,KAAC,KAAK,IACJ,UAAU,EAAC,QAAQ,EACnB,SAAS,EAAC,OAAO,EACjB,OAAO,EAAC,MAAM,EACd,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;gBACT,yDAAyD,EAAE;oBACzD,WAAW,EAAE,CAAC;iBACf;aACc,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,SAAS,EAAC,UAAU,EACpB,UAAU,EAAC,QAAQ,EACnB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;wBACb,CAAC,CAAC,eAAe,EAAE,CAAA;wBACnB,WAAW,CAAC,CAAC,CAAC,CAAA;oBAChB,CAAC,YAED,KAAC,SAAS,KAAG,GACF,GACe,YAG/B,KAAK,CAAC,QAAQ,GACT,GACc,CACzB,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"}
|
|
@@ -11,7 +11,6 @@ export interface CreatableSelectProps {
|
|
|
11
11
|
value?: string | string[];
|
|
12
12
|
inputValue?: CreatableValueType;
|
|
13
13
|
onChange: (newValue: CreatableValueType) => void;
|
|
14
|
-
onCreateOption?: (newValue: string) => void;
|
|
15
14
|
}
|
|
16
15
|
export declare const CreatableSelect: FC<CreatableSelectProps>;
|
|
17
16
|
//# sourceMappingURL=CreatableSelect.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CreatableSelect.d.ts","sourceRoot":"","sources":["../../../src/components/Select/CreatableSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"CreatableSelect.d.ts","sourceRoot":"","sources":["../../../src/components/Select/CreatableSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAI1B,OAAO,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAGvE,MAAM,WAAW,oBAAoB;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,yBAAyB,EAAE,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,QAAQ,EAAE,CAAC,QAAQ,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAClD;AAED,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA2HpD,CAAA"}
|
|
@@ -1,14 +1,16 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { theme } from '@stack-spot/portal-theme';
|
|
3
3
|
import { useTranslate } from '@stack-spot/portal-translate';
|
|
4
4
|
import Creatable from 'react-select/creatable';
|
|
5
5
|
import { BadgeItem } from './BadgeItem.js';
|
|
6
6
|
import { ClearInput } from './ClearInput.js';
|
|
7
|
-
|
|
8
|
-
import { LabelItem } from './LabelItem.js';
|
|
9
|
-
export const CreatableSelect = ({ disabled, options, inputValue, isMulti, onChange, onCreateOption, id, ...props }) => {
|
|
7
|
+
export const CreatableSelect = ({ disabled, options, inputValue, isMulti, onChange, id, ...props }) => {
|
|
10
8
|
const t = useTranslate(dictionary);
|
|
11
|
-
return (_jsx(Creatable, { placeholder: t.typeYourOption, ...props, inputId: id, isClearable: true, isDisabled: disabled, value: inputValue, options: options, isMulti: isMulti, onChange: onChange,
|
|
9
|
+
return (_jsx(Creatable, { placeholder: t.typeYourOption, ...props, inputId: id, isClearable: true, isDisabled: disabled, value: inputValue, options: options, isMulti: isMulti, onChange: onChange, components: {
|
|
10
|
+
MultiValue: BadgeItem,
|
|
11
|
+
MultiValueRemove: () => _jsx(_Fragment, {}),
|
|
12
|
+
ClearIndicator: ClearInput,
|
|
13
|
+
}, noOptionsMessage: () => (t.typeYourOption), formatCreateLabel: (value) => (value), tabSelectsValue: false, styles: {
|
|
12
14
|
control: (base, state) => ({
|
|
13
15
|
...base,
|
|
14
16
|
minHeight: '2.5rem',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CreatableSelect.js","sourceRoot":"","sources":["../../../src/components/Select/CreatableSelect.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAGvE,OAAO,SAAS,MAAM,wBAAwB,CAAA;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;
|
|
1
|
+
{"version":3,"file":"CreatableSelect.js","sourceRoot":"","sources":["../../../src/components/Select/CreatableSelect.tsx"],"names":[],"mappings":"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"}
|
|
@@ -11,7 +11,7 @@ export const MultiValue = (props) => {
|
|
|
11
11
|
'.badge-citric-container:not(:has(> button:first-child))': {
|
|
12
12
|
marginRight: 0,
|
|
13
13
|
},
|
|
14
|
-
}, afterElement: _jsx(components.MultiValueRemove, { ...props, children: _jsx(IconButton, { type: "button", "aria-label": interpolate(t.ariaLabelRemoveItemButton, props.children), appearance: "square",
|
|
14
|
+
}, afterElement: _jsx(components.MultiValueRemove, { ...props, children: _jsx(IconButton, { type: "button", "aria-label": interpolate(t.ariaLabelRemoveItemButton, props.children), appearance: "square", colorIcon: "cyan.800", onClick: (e) => {
|
|
15
15
|
e.stopPropagation();
|
|
16
16
|
props.removeProps?.onClick?.(e);
|
|
17
17
|
}, children: _jsx(TimesMini, {}) }) }), children: props.children }) }) }));
|
|
@@ -1 +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,
|
|
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,SAAS,EAAC,UAAU,EACpB,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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stack-spot/portal-components",
|
|
3
|
-
"version": "2.19.
|
|
3
|
+
"version": "2.19.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -34,9 +34,9 @@
|
|
|
34
34
|
"check-tree-shaking": "agadoo"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
37
|
-
"@citric/core": "^6.
|
|
38
|
-
"@citric/icons": "^5.
|
|
39
|
-
"@citric/ui": "^5.4.0 || ^6.
|
|
37
|
+
"@citric/core": "^6.4.0",
|
|
38
|
+
"@citric/icons": "^5.10.0",
|
|
39
|
+
"@citric/ui": "^5.4.0 || ^6.10.0",
|
|
40
40
|
"@stack-spot/portal-theme": "^1.0.0",
|
|
41
41
|
"@stack-spot/portal-translate": "^1.1.0",
|
|
42
42
|
"react": "^18.2.0",
|
|
@@ -1,8 +1,58 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
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 { MouseEvent } from 'react'
|
|
6
|
+
import { components, GroupBase, MultiValueProps } from 'react-select'
|
|
7
|
+
import { CreatableSelectOptionType } from './types'
|
|
8
|
+
|
|
9
|
+
export const BadgeItem = (props: MultiValueProps<CreatableSelectOptionType, boolean, GroupBase<any>>) => {
|
|
10
|
+
const t = useTranslate(dictionary)
|
|
11
|
+
|
|
12
|
+
const handleClick = <T extends HTMLElement>(event: MouseEvent<T>) => {
|
|
13
|
+
props.removeProps.onClick?.(event as unknown as MouseEvent<HTMLDivElement>)
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
return (
|
|
17
|
+
<components.MultiValue {...props}>
|
|
18
|
+
<Badge
|
|
19
|
+
appearance="square"
|
|
20
|
+
className="badge"
|
|
21
|
+
palette="cyan"
|
|
22
|
+
sx={{ mb: 2,
|
|
23
|
+
'.badge-citric-container:not(:has(> button:first-child))': {
|
|
24
|
+
marginRight: 0,
|
|
25
|
+
},
|
|
26
|
+
} as SxProperties}
|
|
27
|
+
afterElement={
|
|
28
|
+
<components.MultiValueRemove {...props}>
|
|
29
|
+
<IconButton
|
|
30
|
+
type="button"
|
|
31
|
+
aria-label={interpolate(t.ariaLabelRemoveItemButton, props.children)}
|
|
32
|
+
colorIcon="cyan.800"
|
|
33
|
+
appearance="square"
|
|
34
|
+
onClick={(e) => {
|
|
35
|
+
e.stopPropagation()
|
|
36
|
+
handleClick(e)
|
|
37
|
+
}}
|
|
38
|
+
>
|
|
39
|
+
<TimesMini />
|
|
40
|
+
</IconButton>
|
|
41
|
+
</components.MultiValueRemove>
|
|
42
|
+
}
|
|
43
|
+
>
|
|
44
|
+
{props.children}
|
|
45
|
+
</Badge>
|
|
46
|
+
</components.MultiValue>
|
|
47
|
+
)
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
const dictionary = {
|
|
51
|
+
en: {
|
|
52
|
+
ariaLabelRemoveItemButton: 'Remove item $0',
|
|
53
|
+
},
|
|
54
|
+
pt: {
|
|
55
|
+
ariaLabelRemoveItemButton: 'Remover item $0',
|
|
56
|
+
},
|
|
57
|
+
} satisfies Dictionary
|
|
58
|
+
|
|
@@ -4,10 +4,8 @@ import { FC } from 'react'
|
|
|
4
4
|
import { CSSObjectWithLabel } from 'react-select'
|
|
5
5
|
import Creatable from 'react-select/creatable'
|
|
6
6
|
import { BadgeItem } from './BadgeItem'
|
|
7
|
-
import { ClearInput } from './ClearInput'
|
|
8
|
-
import { CloseItem } from './CloseItem'
|
|
9
|
-
import { LabelItem } from './LabelItem'
|
|
10
7
|
import { CreatableSelectOptionType, CreatableValueType } from './types'
|
|
8
|
+
import { ClearInput } from './ClearInput'
|
|
11
9
|
|
|
12
10
|
export interface CreatableSelectProps {
|
|
13
11
|
id?: string,
|
|
@@ -20,11 +18,10 @@ export interface CreatableSelectProps {
|
|
|
20
18
|
value?: string | string[],
|
|
21
19
|
inputValue?: CreatableValueType,
|
|
22
20
|
onChange: (newValue: CreatableValueType) => void,
|
|
23
|
-
onCreateOption?: (newValue: string) => void,
|
|
24
21
|
}
|
|
25
22
|
|
|
26
23
|
export const CreatableSelect: FC<CreatableSelectProps> =
|
|
27
|
-
({ disabled, options, inputValue, isMulti, onChange,
|
|
24
|
+
({ disabled, options, inputValue, isMulti, onChange, id, ...props }) => {
|
|
28
25
|
const t = useTranslate(dictionary)
|
|
29
26
|
|
|
30
27
|
return (
|
|
@@ -38,8 +35,11 @@ export const CreatableSelect: FC<CreatableSelectProps> =
|
|
|
38
35
|
options={options}
|
|
39
36
|
isMulti={isMulti}
|
|
40
37
|
onChange={onChange}
|
|
41
|
-
|
|
42
|
-
|
|
38
|
+
components={{
|
|
39
|
+
MultiValue: BadgeItem,
|
|
40
|
+
MultiValueRemove: () => <></>,
|
|
41
|
+
ClearIndicator: ClearInput,
|
|
42
|
+
}}
|
|
43
43
|
noOptionsMessage={() => (t.typeYourOption)}
|
|
44
44
|
formatCreateLabel={(value) => (value)}
|
|
45
45
|
tabSelectsValue={false}
|
|
@@ -23,7 +23,7 @@ export const MultiValue = (props: MultiValueProps) => {
|
|
|
23
23
|
type="button"
|
|
24
24
|
aria-label={interpolate(t.ariaLabelRemoveItemButton, props.children)}
|
|
25
25
|
appearance="square"
|
|
26
|
-
|
|
26
|
+
colorIcon="cyan.800"
|
|
27
27
|
onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
|
|
28
28
|
e.stopPropagation()
|
|
29
29
|
props.removeProps?.onClick?.(e as React.MouseEvent<HTMLDivElement, MouseEvent>)
|