@wireapp/react-ui-kit 9.54.0 → 9.55.0
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/lib/Form/Select/ComboboxSelect/ComboboxSelect.d.ts +16 -5
- package/lib/Form/Select/ComboboxSelect/ComboboxSelect.d.ts.map +1 -1
- package/lib/Form/Select/ComboboxSelect/ComboboxSelect.js +4 -2
- package/lib/Form/Select/ComboboxSelect/ComboboxSelect.stories.d.ts +10 -5
- package/lib/Form/Select/ComboboxSelect/ComboboxSelect.stories.d.ts.map +1 -1
- package/lib/Form/Select/ComboboxSelect/ComboboxSelect.stories.js +12 -1
- package/lib/Form/Select/ComboboxSelect/ComboboxSelect.styles.d.ts +5 -1
- package/lib/Form/Select/ComboboxSelect/ComboboxSelect.styles.d.ts.map +1 -1
- package/lib/Form/Select/ComboboxSelect/ComboboxSelect.styles.js +11 -3
- package/package.json +2 -2
|
@@ -1,9 +1,15 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { CSSObject } from '@emotion/react';
|
|
2
|
+
import { MenuPosition } from 'react-select';
|
|
3
|
+
export type ComboboxSelectOption = {
|
|
4
|
+
value: string | number;
|
|
5
|
+
label: string;
|
|
6
|
+
description?: string;
|
|
7
|
+
};
|
|
2
8
|
export interface ComboboxSelectProps {
|
|
3
9
|
id: string;
|
|
4
|
-
options:
|
|
5
|
-
value?:
|
|
6
|
-
onChange?: (value:
|
|
10
|
+
options: ComboboxSelectOption[];
|
|
11
|
+
value?: ComboboxSelectOption | ComboboxSelectOption[];
|
|
12
|
+
onChange?: (value: ComboboxSelectOption | ComboboxSelectOption[]) => void;
|
|
7
13
|
isDisabled?: boolean;
|
|
8
14
|
placeholder?: string;
|
|
9
15
|
dataUieName?: string;
|
|
@@ -12,6 +18,11 @@ export interface ComboboxSelectProps {
|
|
|
12
18
|
noOptionsMessage: string;
|
|
13
19
|
label?: string;
|
|
14
20
|
required?: boolean;
|
|
21
|
+
menuPotralTarget?: HTMLElement;
|
|
22
|
+
menuPosition?: MenuPosition;
|
|
23
|
+
menuListCSS?: CSSObject;
|
|
24
|
+
isLoading?: boolean;
|
|
25
|
+
loadingMessage?: string;
|
|
15
26
|
}
|
|
16
|
-
export declare const ComboboxSelect: ({ id, options, value, onChange, isDisabled, placeholder, dataUieName, onCreateOption, createOptionLabel, noOptionsMessage, label, required, }: ComboboxSelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
27
|
+
export declare const ComboboxSelect: ({ id, options, value, onChange, isDisabled, placeholder, dataUieName, onCreateOption, createOptionLabel, noOptionsMessage, label, required, menuPotralTarget, menuPosition, menuListCSS, isLoading, loadingMessage, }: ComboboxSelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
17
28
|
//# sourceMappingURL=ComboboxSelect.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxSelect.d.ts","sourceRoot":"","sources":["../../../../src/Form/Select/ComboboxSelect/ComboboxSelect.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ComboboxSelect.d.ts","sourceRoot":"","sources":["../../../../src/Form/Select/ComboboxSelect/ComboboxSelect.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAW,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAa,YAAY,EAAqC,MAAM,cAAc,CAAC;AAU1F,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,KAAK,CAAC,EAAE,oBAAoB,GAAG,oBAAoB,EAAE,CAAC;IACtD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,GAAG,oBAAoB,EAAE,KAAK,IAAI,CAAC;IAC1E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,iBAAiB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;IAClD,gBAAgB,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,cAAc,0NAkBxB,mBAAmB,qDAqCrB,CAAC"}
|
|
@@ -30,15 +30,17 @@ const ComboboxSelect_styles_1 = require("./ComboboxSelect.styles");
|
|
|
30
30
|
const CloseIcon_1 = require("../../../Icon/CloseIcon");
|
|
31
31
|
const InputLabel_1 = require("../../InputLabel");
|
|
32
32
|
const BaseSelectDropdownIndicator_1 = require("../BaseSelect/BaseSelectDropdownIndicator");
|
|
33
|
-
const ComboboxSelect = ({ id, options, value, onChange, isDisabled = false, placeholder, dataUieName, onCreateOption, createOptionLabel, noOptionsMessage, label, required, }) => {
|
|
33
|
+
const ComboboxSelect = ({ id, options, value, onChange, isDisabled = false, placeholder, dataUieName, onCreateOption, createOptionLabel, noOptionsMessage, label, required, menuPotralTarget, menuPosition = 'absolute', menuListCSS, isLoading = false, loadingMessage, }) => {
|
|
34
34
|
const theme = (0, react_1.useTheme)();
|
|
35
|
-
return ((0, jsx_runtime_1.jsxs)("div", { css: ComboboxSelect_styles_1.wrapperStyles, "data-uie-name": dataUieName, children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.InputLabel, { htmlFor: id, isRequired: required, children: label })), (0, jsx_runtime_1.jsx)(creatable_1.default, { id: id, options: options, value: value, onChange: onChange, isMulti: true, isSearchable: true, isDisabled: isDisabled, placeholder: placeholder, styles: (0, ComboboxSelect_styles_1.selectStyles)({ theme }), classNamePrefix: "select", formatCreateLabel: createOptionLabel, onCreateOption: onCreateOption, closeMenuOnSelect: false, components: {
|
|
35
|
+
return ((0, jsx_runtime_1.jsxs)("div", { css: ComboboxSelect_styles_1.wrapperStyles, "data-uie-name": dataUieName, children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.InputLabel, { htmlFor: id, isRequired: required, children: label })), (0, jsx_runtime_1.jsx)(creatable_1.default, { id: id, options: options, value: value, onChange: onChange, isMulti: true, isSearchable: true, isDisabled: isDisabled, placeholder: placeholder, menuPortalTarget: menuPotralTarget, menuPosition: menuPosition, styles: (0, ComboboxSelect_styles_1.selectStyles)({ theme, menuListCSS }), classNamePrefix: "select", formatCreateLabel: createOptionLabel, onCreateOption: onCreateOption, closeMenuOnSelect: false, isLoading: isLoading, components: {
|
|
36
36
|
ClearIndicator: () => null,
|
|
37
37
|
DropdownIndicator: BaseSelectDropdownIndicator_1.BaseSelectDropdownIndicator,
|
|
38
38
|
MultiValueRemove: props => (0, jsx_runtime_1.jsx)(MultiValueRemove, { ...props }),
|
|
39
39
|
NoOptionsMessage: props => (0, jsx_runtime_1.jsx)(NoOptionsMessage, { ...props, message: noOptionsMessage }),
|
|
40
|
+
LoadingMessage: props => (0, jsx_runtime_1.jsx)(LoadingMessage, { ...props, message: loadingMessage }),
|
|
40
41
|
} })] }));
|
|
41
42
|
};
|
|
42
43
|
exports.ComboboxSelect = ComboboxSelect;
|
|
43
44
|
const MultiValueRemove = (props) => ((0, jsx_runtime_1.jsx)(react_select_1.components.MultiValueRemove, { ...props, children: (0, jsx_runtime_1.jsx)(CloseIcon_1.CloseIcon, { width: 10, height: 10 }) }));
|
|
44
45
|
const NoOptionsMessage = ({ message, ...props }) => ((0, jsx_runtime_1.jsx)(react_select_1.components.NoOptionsMessage, { ...props, children: (0, jsx_runtime_1.jsx)("div", { css: ComboboxSelect_styles_1.noOptionsMessageStyles, children: message }) }));
|
|
46
|
+
const LoadingMessage = ({ message, ...props }) => ((0, jsx_runtime_1.jsx)(react_select_1.components.LoadingMessage, { ...props, children: (0, jsx_runtime_1.jsx)("div", { css: ComboboxSelect_styles_1.loadingMessageStyles, children: message }) }));
|
|
@@ -1,17 +1,16 @@
|
|
|
1
1
|
import type { StoryObj } from '@storybook/react';
|
|
2
2
|
import { type ComboboxSelectProps } from './ComboboxSelect';
|
|
3
|
-
import type { Option } from '../Select';
|
|
4
3
|
declare const meta: {
|
|
5
4
|
title: string;
|
|
6
|
-
component: ({ id, options, value, onChange, isDisabled, placeholder, dataUieName, onCreateOption, createOptionLabel, noOptionsMessage, label, required, }: ComboboxSelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
5
|
+
component: ({ id, options, value, onChange, isDisabled, placeholder, dataUieName, onCreateOption, createOptionLabel, noOptionsMessage, label, required, menuPotralTarget, menuPosition, menuListCSS, isLoading, loadingMessage, }: ComboboxSelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
7
6
|
parameters: {
|
|
8
7
|
layout: string;
|
|
9
8
|
};
|
|
10
9
|
decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
|
|
11
10
|
id: string;
|
|
12
|
-
options:
|
|
13
|
-
value?:
|
|
14
|
-
onChange?: (value:
|
|
11
|
+
options: import("./ComboboxSelect").ComboboxSelectOption[];
|
|
12
|
+
value?: import("./ComboboxSelect").ComboboxSelectOption | import("./ComboboxSelect").ComboboxSelectOption[];
|
|
13
|
+
onChange?: (value: import("./ComboboxSelect").ComboboxSelectOption | import("./ComboboxSelect").ComboboxSelectOption[]) => void;
|
|
15
14
|
isDisabled?: boolean;
|
|
16
15
|
placeholder?: string;
|
|
17
16
|
dataUieName?: string;
|
|
@@ -20,6 +19,11 @@ declare const meta: {
|
|
|
20
19
|
noOptionsMessage: string;
|
|
21
20
|
label?: string;
|
|
22
21
|
required?: boolean;
|
|
22
|
+
menuPotralTarget?: HTMLElement;
|
|
23
|
+
menuPosition?: import("react-select").MenuPosition;
|
|
24
|
+
menuListCSS?: import("@emotion/serialize").CSSObject;
|
|
25
|
+
isLoading?: boolean;
|
|
26
|
+
loadingMessage?: string;
|
|
23
27
|
}>) => import("@emotion/react/jsx-runtime").JSX.Element)[];
|
|
24
28
|
tags: string[];
|
|
25
29
|
};
|
|
@@ -30,4 +34,5 @@ export declare const WithValue: Story;
|
|
|
30
34
|
export declare const Disabled: Story;
|
|
31
35
|
export declare const Creatable: Story;
|
|
32
36
|
export declare const WithLabel: Story;
|
|
37
|
+
export declare const Loading: Story;
|
|
33
38
|
//# sourceMappingURL=ComboboxSelect.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxSelect.stories.d.ts","sourceRoot":"","sources":["../../../../src/Form/Select/ComboboxSelect/ComboboxSelect.stories.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAErD,OAAO,EAAiB,KAAK,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"ComboboxSelect.stories.d.ts","sourceRoot":"","sources":["../../../../src/Form/Select/ComboboxSelect/ComboboxSelect.stories.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAErD,OAAO,EAAiB,KAAK,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;AAU1E,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;CAc6B,CAAC;AAExC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAWvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AA8BF,eAAO,MAAM,SAAS,EAAE,KAYvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KASvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.WithLabel = exports.Creatable = exports.Disabled = exports.WithValue = exports.Default = void 0;
|
|
3
|
+
exports.Loading = exports.WithLabel = exports.Creatable = exports.Disabled = exports.WithValue = exports.Default = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
|
|
5
5
|
/*
|
|
6
6
|
* Wire
|
|
@@ -113,3 +113,14 @@ exports.WithLabel = {
|
|
|
113
113
|
noOptionsMessage: 'No options available',
|
|
114
114
|
},
|
|
115
115
|
};
|
|
116
|
+
exports.Loading = {
|
|
117
|
+
args: {
|
|
118
|
+
id: 'loading-select',
|
|
119
|
+
isLoading: true,
|
|
120
|
+
options: [],
|
|
121
|
+
createOptionLabel: inputValue => `Create item "${inputValue}"`,
|
|
122
|
+
onCreateOption: () => { },
|
|
123
|
+
noOptionsMessage: 'No options available',
|
|
124
|
+
loadingMessage: 'Loading options...',
|
|
125
|
+
},
|
|
126
|
+
};
|
|
@@ -7,11 +7,15 @@ interface SelectStylesParams {
|
|
|
7
7
|
menuPosition?: 'absolute' | 'relative';
|
|
8
8
|
controlCSS?: CSSObject;
|
|
9
9
|
containerCSS?: CSSObject;
|
|
10
|
+
menuListCSS?: CSSObject;
|
|
10
11
|
}
|
|
11
12
|
export declare const wrapperStyles: CSSObject;
|
|
12
|
-
export declare const selectStyles: ({ theme, markInvalid, controlCSS, containerCSS, }: SelectStylesParams) => StylesConfig;
|
|
13
|
+
export declare const selectStyles: ({ theme, markInvalid, controlCSS, containerCSS, menuListCSS, }: SelectStylesParams) => StylesConfig;
|
|
13
14
|
export declare const noOptionsMessageStyles: {
|
|
14
15
|
padding: string;
|
|
15
16
|
};
|
|
17
|
+
export declare const loadingMessageStyles: {
|
|
18
|
+
padding: string;
|
|
19
|
+
};
|
|
16
20
|
export {};
|
|
17
21
|
//# sourceMappingURL=ComboboxSelect.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxSelect.styles.d.ts","sourceRoot":"","sources":["../../../../src/Form/Select/ComboboxSelect/ComboboxSelect.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAC,YAAY,EAAC,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAC,KAAK,EAAC,MAAM,iBAAiB,CAAC;AAYtC,UAAU,kBAAkB;IAC1B,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACvC,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"ComboboxSelect.styles.d.ts","sourceRoot":"","sources":["../../../../src/Form/Select/ComboboxSelect/ComboboxSelect.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAC,YAAY,EAAC,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAC,KAAK,EAAC,MAAM,iBAAiB,CAAC;AAYtC,UAAU,kBAAkB;IAC1B,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACvC,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,eAAO,MAAM,aAAa,EAAE,SAO3B,CAAC;AAEF,eAAO,MAAM,YAAY,mEAMtB,kBAAkB,KAAG,YAqFtB,CAAC;AAEH,eAAO,MAAM,sBAAsB;;CAElC,CAAC;AAEF,eAAO,MAAM,oBAAoB;;CAEhC,CAAC"}
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
*
|
|
19
19
|
*/
|
|
20
20
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
21
|
-
exports.noOptionsMessageStyles = exports.selectStyles = exports.wrapperStyles = void 0;
|
|
21
|
+
exports.loadingMessageStyles = exports.noOptionsMessageStyles = exports.selectStyles = exports.wrapperStyles = void 0;
|
|
22
22
|
const BaseSelect_styles_1 = require("../BaseSelect/BaseSelect.styles");
|
|
23
23
|
exports.wrapperStyles = {
|
|
24
24
|
marginBottom: '20px',
|
|
@@ -28,7 +28,7 @@ exports.wrapperStyles = {
|
|
|
28
28
|
position: 'absolute',
|
|
29
29
|
},
|
|
30
30
|
};
|
|
31
|
-
const selectStyles = ({ theme, markInvalid = false, controlCSS = {}, containerCSS = {}, }) => ({
|
|
31
|
+
const selectStyles = ({ theme, markInvalid = false, controlCSS = {}, containerCSS = {}, menuListCSS = {}, }) => ({
|
|
32
32
|
indicatorSeparator: () => (0, BaseSelect_styles_1.baseIndicatorSeparatorStyles)(),
|
|
33
33
|
indicatorsContainer: provided => provided,
|
|
34
34
|
container: provided => ({
|
|
@@ -43,6 +43,7 @@ const selectStyles = ({ theme, markInvalid = false, controlCSS = {}, containerCS
|
|
|
43
43
|
menuList: provided => ({
|
|
44
44
|
...provided,
|
|
45
45
|
...(0, BaseSelect_styles_1.baseMenuListStyles)(),
|
|
46
|
+
...menuListCSS,
|
|
46
47
|
}),
|
|
47
48
|
option: (provided, { isDisabled, isFocused, isSelected, isMulti }) => ({
|
|
48
49
|
...provided,
|
|
@@ -67,9 +68,13 @@ const selectStyles = ({ theme, markInvalid = false, controlCSS = {}, containerCS
|
|
|
67
68
|
...provided,
|
|
68
69
|
...(0, BaseSelect_styles_1.baseMenuStyles)({ theme, menuPosition: 'absolute' }),
|
|
69
70
|
width: '100%',
|
|
70
|
-
zIndex:
|
|
71
|
+
zIndex: 'var(--z-index-modal)',
|
|
71
72
|
position: 'absolute',
|
|
72
73
|
}),
|
|
74
|
+
menuPortal: provided => ({
|
|
75
|
+
...provided,
|
|
76
|
+
zIndex: 'var(--z-index-modal)',
|
|
77
|
+
}),
|
|
73
78
|
multiValue: provided => ({
|
|
74
79
|
...provided,
|
|
75
80
|
backgroundColor: theme.Select.optionHoverBg,
|
|
@@ -111,3 +116,6 @@ exports.selectStyles = selectStyles;
|
|
|
111
116
|
exports.noOptionsMessageStyles = {
|
|
112
117
|
padding: '8px 12px',
|
|
113
118
|
};
|
|
119
|
+
exports.loadingMessageStyles = {
|
|
120
|
+
padding: '8px 12px',
|
|
121
|
+
};
|
package/package.json
CHANGED