@fibery/ui-kit 1.0.2 → 1.0.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/package.json +4 -3
- package/src/Select/components.tsx +87 -0
- package/src/Select/{index.js → index.tsx} +97 -20
- package/src/Select/{styles.js → styles.ts} +11 -6
- package/src/antd/styles.ts +119 -0
- package/src/form-field-loader.tsx +0 -1
- package/src/Select/components.js +0 -64
- package/src/Select/index.d.ts +0 -11
- package/src/Select/lazy.js +0 -35
package/package.json
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fibery/ui-kit",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"main": "index.ts",
|
|
5
5
|
"private": false,
|
|
6
6
|
"files": [
|
|
7
|
+
"src/antd/styles.ts",
|
|
7
8
|
"src/Button.d.ts",
|
|
8
9
|
"src/Button.js",
|
|
9
10
|
"src/designSystem.ts",
|
|
@@ -47,9 +48,9 @@
|
|
|
47
48
|
"react-color": "2.13.8",
|
|
48
49
|
"react-day-picker": "7.4.8",
|
|
49
50
|
"react-popper": "2.2.5",
|
|
50
|
-
"react-select": "3.
|
|
51
|
+
"react-select": "5.3.2",
|
|
51
52
|
"react-select-country-list": "2.2.1",
|
|
52
|
-
"react-windowed-select": "
|
|
53
|
+
"react-windowed-select": "3.1.2",
|
|
53
54
|
"screenfull": "6.0.1"
|
|
54
55
|
},
|
|
55
56
|
"peerDependencies": {
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import {useCallback, ReactNode} from "react";
|
|
2
|
+
import {css} from "@linaria/core";
|
|
3
|
+
import {components} from "react-windowed-select";
|
|
4
|
+
import RemoveIcon from "../icons/react/Remove";
|
|
5
|
+
import {OptionProps, DropdownIndicatorProps, ClearIndicatorProps, MultiValueRemoveProps, GroupBase} from "react-select";
|
|
6
|
+
import {Button} from "../Button";
|
|
7
|
+
import {themeVars, space} from "../designSystem";
|
|
8
|
+
import ArrowBottom from "../icons/react/ArrowBottom";
|
|
9
|
+
import {dropdownIndicatorSize, expanderStyle} from "./styles";
|
|
10
|
+
|
|
11
|
+
export const Option = <
|
|
12
|
+
TOption,
|
|
13
|
+
IsMulti extends boolean = boolean,
|
|
14
|
+
Group extends GroupBase<TOption> = GroupBase<TOption>
|
|
15
|
+
>({
|
|
16
|
+
children,
|
|
17
|
+
...props
|
|
18
|
+
}: OptionProps<TOption, IsMulti, Group>) => {
|
|
19
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
20
|
+
const {onMouseMove, onMouseOver, ...rest} = props.innerProps;
|
|
21
|
+
const newProps = Object.assign(props, {innerProps: rest});
|
|
22
|
+
return <components.Option {...newProps}>{children}</components.Option>;
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
export function DropdownIndicator<
|
|
26
|
+
TOption,
|
|
27
|
+
IsMulti extends boolean = boolean,
|
|
28
|
+
Group extends GroupBase<TOption> = GroupBase<TOption>
|
|
29
|
+
>(props: DropdownIndicatorProps<TOption, IsMulti, Group>) {
|
|
30
|
+
return (
|
|
31
|
+
<div
|
|
32
|
+
className={expanderStyle}
|
|
33
|
+
style={{
|
|
34
|
+
transform: props.selectProps.menuIsOpen ? "rotate(180deg)" : "",
|
|
35
|
+
}}
|
|
36
|
+
>
|
|
37
|
+
<ArrowBottom iconSize={dropdownIndicatorSize} color={themeVars.disabledTextColor} />
|
|
38
|
+
</div>
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
export function ClearIndicator<
|
|
43
|
+
TOption,
|
|
44
|
+
IsMulti extends boolean = boolean,
|
|
45
|
+
Group extends GroupBase<TOption> = GroupBase<TOption>
|
|
46
|
+
>({
|
|
47
|
+
innerProps,
|
|
48
|
+
selectProps,
|
|
49
|
+
}: ClearIndicatorProps<TOption, IsMulti, Group> | MultiValueRemoveProps<TOption, IsMulti, Group>) {
|
|
50
|
+
const onMouseDown = innerProps.onMouseDown;
|
|
51
|
+
const wrappedOnMouseDown = useCallback(
|
|
52
|
+
(e) => {
|
|
53
|
+
onMouseDown?.(e);
|
|
54
|
+
// This prevents false positive triggering in rc-trigger
|
|
55
|
+
e.nativeEvent.stopImmediatePropagation();
|
|
56
|
+
},
|
|
57
|
+
[onMouseDown]
|
|
58
|
+
);
|
|
59
|
+
return (
|
|
60
|
+
<div {...innerProps}>
|
|
61
|
+
<Button
|
|
62
|
+
borderless
|
|
63
|
+
Icon={RemoveIcon}
|
|
64
|
+
disabled={selectProps.isDisabled}
|
|
65
|
+
size={":button-size/super-small"}
|
|
66
|
+
onMouseDown={wrappedOnMouseDown}
|
|
67
|
+
/>
|
|
68
|
+
</div>
|
|
69
|
+
);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
export const NoOptionsMessage = ({children}: {children: ReactNode}) => {
|
|
73
|
+
return (
|
|
74
|
+
<div
|
|
75
|
+
className={css`
|
|
76
|
+
${{
|
|
77
|
+
paddingLeft: space.l + 2,
|
|
78
|
+
paddingRight: space.l + 2,
|
|
79
|
+
paddingTop: space.m,
|
|
80
|
+
paddingBottom: space.m,
|
|
81
|
+
}}
|
|
82
|
+
`}
|
|
83
|
+
>
|
|
84
|
+
{children}
|
|
85
|
+
</div>
|
|
86
|
+
);
|
|
87
|
+
};
|
|
@@ -1,21 +1,39 @@
|
|
|
1
1
|
import cn from "classnames";
|
|
2
2
|
import {useCallback, forwardRef} from "react";
|
|
3
|
-
import BaseSelect
|
|
3
|
+
import BaseSelect, {
|
|
4
|
+
GroupHeadingProps,
|
|
5
|
+
MenuProps,
|
|
6
|
+
StylesConfig,
|
|
7
|
+
Props as BaseSelectProps,
|
|
8
|
+
GroupBase,
|
|
9
|
+
OptionsOrGroups,
|
|
10
|
+
OptionProps,
|
|
11
|
+
SingleValueProps,
|
|
12
|
+
MultiValueProps,
|
|
13
|
+
} from "react-select";
|
|
4
14
|
import BaseCreatableSelect from "react-select/creatable";
|
|
5
15
|
import WindowedSelect, {components, WindowedMenuList} from "react-windowed-select";
|
|
6
16
|
import {createInlineTheme} from "../designSystem";
|
|
7
17
|
import {useTheme} from "../ThemeProvider";
|
|
8
|
-
import {ClearIndicator, DropdownIndicator, NoOptionsMessage, Option} from "./components";
|
|
18
|
+
import {ClearIndicator, DropdownIndicator, NoOptionsMessage, Option as OptionComponent} from "./components";
|
|
9
19
|
import {componentsStyles, singleLineComponentsStyle} from "./styles";
|
|
10
20
|
|
|
11
|
-
|
|
21
|
+
export type {OptionsOrGroups, GroupBase, StylesConfig, OptionProps, SingleValueProps, MultiValueProps};
|
|
22
|
+
|
|
23
|
+
function GroupHeading<
|
|
24
|
+
Option = unknown,
|
|
25
|
+
IsMulti extends boolean = boolean,
|
|
26
|
+
Group extends GroupBase<Option> = GroupBase<Option>
|
|
27
|
+
>(props: GroupHeadingProps<Option, IsMulti, Group>) {
|
|
12
28
|
if (!props.children) {
|
|
13
29
|
return null;
|
|
14
30
|
}
|
|
15
31
|
return <components.GroupHeading {...props} />;
|
|
16
|
-
}
|
|
32
|
+
}
|
|
17
33
|
|
|
18
|
-
function Menu(
|
|
34
|
+
function Menu<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(
|
|
35
|
+
props: MenuProps<Option, IsMulti, Group>
|
|
36
|
+
) {
|
|
19
37
|
const theme = useTheme();
|
|
20
38
|
const {innerProps, className} = props;
|
|
21
39
|
const overridedInnerProps = {...innerProps, style: {...innerProps.style, ...createInlineTheme(theme)}};
|
|
@@ -24,27 +42,71 @@ function Menu(props) {
|
|
|
24
42
|
|
|
25
43
|
export {components};
|
|
26
44
|
|
|
27
|
-
export
|
|
28
|
-
|
|
45
|
+
export function combineStyles<
|
|
46
|
+
Option,
|
|
47
|
+
IsMulti extends boolean = boolean,
|
|
48
|
+
Group extends GroupBase<Option> = GroupBase<Option>
|
|
49
|
+
>(stylesArray: StylesConfig<Option, IsMulti, Group>[]) {
|
|
50
|
+
return stylesArray.reduce<StylesConfig<Option, IsMulti, Group>>((acc, style) => {
|
|
29
51
|
Object.keys(style).forEach((key) => {
|
|
52
|
+
/* eslint-disable @typescript-eslint/ban-ts-comment */
|
|
53
|
+
// @ts-ignore
|
|
30
54
|
if (acc[key]) {
|
|
55
|
+
// @ts-ignore
|
|
31
56
|
const temp = acc[key];
|
|
57
|
+
// @ts-ignore
|
|
32
58
|
acc[key] = (provided, state) => style[key](temp(provided, state), state);
|
|
33
59
|
} else {
|
|
60
|
+
// @ts-ignore
|
|
34
61
|
acc[key] = (provided, state) => style[key](provided, state);
|
|
35
62
|
}
|
|
63
|
+
/* eslint-enable @typescript-eslint/ban-ts-comment */
|
|
36
64
|
});
|
|
37
65
|
return acc;
|
|
38
66
|
}, {});
|
|
39
|
-
}
|
|
67
|
+
}
|
|
40
68
|
|
|
41
|
-
export
|
|
42
|
-
|
|
69
|
+
export type SelectProps<
|
|
70
|
+
Option = unknown,
|
|
71
|
+
IsMulti extends boolean = boolean,
|
|
72
|
+
Group extends GroupBase<Option> = GroupBase<Option>
|
|
73
|
+
> = Omit<Omit<Omit<BaseSelectProps<Option, IsMulti, Group>, "isMulti">, "backspaceRemovesValue">, "isDisabled"> & {
|
|
74
|
+
virtualized?: boolean;
|
|
75
|
+
isCollectionMode?: IsMulti;
|
|
76
|
+
disabled?: boolean;
|
|
77
|
+
};
|
|
78
|
+
export function SingleRowSelect<
|
|
79
|
+
Option = unknown,
|
|
80
|
+
IsMulti extends boolean = boolean,
|
|
81
|
+
Group extends GroupBase<Option> = GroupBase<Option>
|
|
82
|
+
>({styles = {}, ...rest}: SelectProps<Option, IsMulti, Group>) {
|
|
83
|
+
return (
|
|
84
|
+
<Select<Option, IsMulti, Group>
|
|
85
|
+
{...rest}
|
|
86
|
+
styles={combineStyles<Option, IsMulti, Group>([
|
|
87
|
+
singleLineComponentsStyle as unknown as StylesConfig<Option, IsMulti, Group>,
|
|
88
|
+
styles,
|
|
89
|
+
])}
|
|
90
|
+
/>
|
|
91
|
+
);
|
|
43
92
|
}
|
|
44
93
|
|
|
45
|
-
export const Select = forwardRef(function Select
|
|
46
|
-
|
|
47
|
-
|
|
94
|
+
export const Select = forwardRef(function Select<
|
|
95
|
+
Option = unknown,
|
|
96
|
+
IsMulti extends boolean = boolean,
|
|
97
|
+
Group extends GroupBase<Option> = GroupBase<Option>
|
|
98
|
+
>(
|
|
99
|
+
{
|
|
100
|
+
components,
|
|
101
|
+
isCollectionMode,
|
|
102
|
+
menuPortalTarget,
|
|
103
|
+
onKeyDown,
|
|
104
|
+
styles = {},
|
|
105
|
+
virtualized = true,
|
|
106
|
+
...rest
|
|
107
|
+
}: SelectProps<Option, IsMulti, Group>,
|
|
108
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
109
|
+
forwardedRef: any
|
|
48
110
|
) {
|
|
49
111
|
const theme = useTheme();
|
|
50
112
|
const combineThemes = useCallback((providedTheme) => ({...providedTheme, ...theme}), [theme]);
|
|
@@ -64,7 +126,7 @@ export const Select = forwardRef(function Select(
|
|
|
64
126
|
e.target.setSelectionRange(0, 0);
|
|
65
127
|
}
|
|
66
128
|
break;
|
|
67
|
-
case "End":
|
|
129
|
+
case "End": {
|
|
68
130
|
e.preventDefault();
|
|
69
131
|
const len = e.target.value.length;
|
|
70
132
|
if (e.shiftKey) {
|
|
@@ -73,6 +135,7 @@ export const Select = forwardRef(function Select(
|
|
|
73
135
|
e.target.setSelectionRange(len, len);
|
|
74
136
|
}
|
|
75
137
|
break;
|
|
138
|
+
}
|
|
76
139
|
default:
|
|
77
140
|
}
|
|
78
141
|
onKeyDown && onKeyDown(e);
|
|
@@ -88,7 +151,10 @@ export const Select = forwardRef(function Select(
|
|
|
88
151
|
menuPortalTarget={menuPortalTarget}
|
|
89
152
|
menuPlacement={"auto"}
|
|
90
153
|
style={createInlineTheme(theme)}
|
|
91
|
-
styles={combineStyles([
|
|
154
|
+
styles={combineStyles<Option, IsMulti, Group>([
|
|
155
|
+
componentsStyles as unknown as StylesConfig<Option, IsMulti, Group>,
|
|
156
|
+
styles,
|
|
157
|
+
])}
|
|
92
158
|
theme={combineThemes}
|
|
93
159
|
isMulti={isCollectionMode}
|
|
94
160
|
backspaceRemovesValue={isCollectionMode}
|
|
@@ -97,7 +163,7 @@ export const Select = forwardRef(function Select(
|
|
|
97
163
|
Menu,
|
|
98
164
|
DropdownIndicator,
|
|
99
165
|
ClearIndicator,
|
|
100
|
-
Option,
|
|
166
|
+
Option: OptionComponent,
|
|
101
167
|
MultiValueRemove: ClearIndicator,
|
|
102
168
|
NoOptionsMessage,
|
|
103
169
|
GroupHeading,
|
|
@@ -108,16 +174,27 @@ export const Select = forwardRef(function Select(
|
|
|
108
174
|
isDisabled={rest.disabled}
|
|
109
175
|
/>
|
|
110
176
|
);
|
|
111
|
-
|
|
177
|
+
// eslint-disable-next-line no-use-before-define
|
|
178
|
+
}) as <Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(
|
|
179
|
+
// eslint-disable-next-line no-use-before-define,@typescript-eslint/no-explicit-any
|
|
180
|
+
props: SelectProps<Option, IsMulti, Group> & {ref?: any}
|
|
181
|
+
) => JSX.Element;
|
|
112
182
|
|
|
113
|
-
export function CreatableSelect
|
|
183
|
+
export function CreatableSelect<
|
|
184
|
+
Option = unknown,
|
|
185
|
+
IsMulti extends boolean = boolean,
|
|
186
|
+
Group extends GroupBase<Option> = GroupBase<Option>
|
|
187
|
+
>({components, isCollectionMode, menuPortalTarget, styles = {}, ...rest}: SelectProps<Option, IsMulti, Group>) {
|
|
114
188
|
const theme = useTheme();
|
|
115
189
|
const combineThemes = useCallback((providedTheme) => ({...providedTheme, ...theme}), [theme]);
|
|
116
190
|
return (
|
|
117
191
|
<BaseCreatableSelect
|
|
118
192
|
menuPortalTarget={menuPortalTarget}
|
|
119
193
|
menuPlacement={"auto"}
|
|
120
|
-
styles={combineStyles([
|
|
194
|
+
styles={combineStyles<Option, IsMulti, Group>([
|
|
195
|
+
componentsStyles as unknown as StylesConfig<Option, IsMulti, Group>,
|
|
196
|
+
styles,
|
|
197
|
+
])}
|
|
121
198
|
theme={combineThemes}
|
|
122
199
|
isMulti={isCollectionMode}
|
|
123
200
|
backspaceRemovesValue={isCollectionMode}
|
|
@@ -127,7 +204,7 @@ export function CreatableSelect({components, isCollectionMode, menuPortalTarget,
|
|
|
127
204
|
MenuList: WindowedMenuList,
|
|
128
205
|
DropdownIndicator,
|
|
129
206
|
ClearIndicator,
|
|
130
|
-
Option,
|
|
207
|
+
Option: OptionComponent,
|
|
131
208
|
MultiValueRemove: ClearIndicator,
|
|
132
209
|
NoOptionsMessage,
|
|
133
210
|
GroupHeading,
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import {css} from "@linaria/core";
|
|
2
|
+
import type {StylesConfig, CSSObjectWithLabel, ControlProps} from "react-select";
|
|
2
3
|
import {inputOverrides} from "../antd/styles";
|
|
3
4
|
import {border, layout, space, textStyles, themeVars, transition} from "../designSystem";
|
|
4
5
|
|
|
@@ -12,8 +13,12 @@ export const expanderStyle = css`
|
|
|
12
13
|
}}
|
|
13
14
|
`;
|
|
14
15
|
|
|
15
|
-
function createControlStyle({
|
|
16
|
-
|
|
16
|
+
function createControlStyle({
|
|
17
|
+
isSingleLine,
|
|
18
|
+
}: {
|
|
19
|
+
isSingleLine: boolean;
|
|
20
|
+
}): (base: CSSObjectWithLabel, props: ControlProps) => CSSObjectWithLabel {
|
|
21
|
+
const childDivStyle: CSSObjectWithLabel = {
|
|
17
22
|
padding: 0,
|
|
18
23
|
overflow: "visible",
|
|
19
24
|
};
|
|
@@ -27,18 +32,18 @@ function createControlStyle({isSingleLine}) {
|
|
|
27
32
|
flexWrap: isSingleLine ? "nowrap" : "wrap",
|
|
28
33
|
justifyContent: "space-between",
|
|
29
34
|
width: "100%",
|
|
30
|
-
minHeight: layout.inputHeight,
|
|
31
35
|
...inputOverrides.main,
|
|
36
|
+
minHeight: layout.inputHeight,
|
|
32
37
|
...(state.isFocused && inputOverrides.focus),
|
|
33
38
|
...(state.isDisabled && inputOverrides.disabled),
|
|
34
|
-
":hover": !state.isFocused && !state.isDisabled
|
|
39
|
+
":hover": !state.isFocused && !state.isDisabled ? inputOverrides.hover : {},
|
|
35
40
|
paddingLeft: space.l,
|
|
36
41
|
paddingRight: space.l,
|
|
37
42
|
"& > div": childDivStyle,
|
|
38
43
|
});
|
|
39
44
|
}
|
|
40
45
|
|
|
41
|
-
export const componentsStyles = {
|
|
46
|
+
export const componentsStyles: StylesConfig = {
|
|
42
47
|
option: (provided, state) => {
|
|
43
48
|
const disabledStyles = {
|
|
44
49
|
cursor: "not-allowed",
|
|
@@ -128,6 +133,6 @@ export const componentsStyles = {
|
|
|
128
133
|
indicatorSeparator: () => ({}),
|
|
129
134
|
};
|
|
130
135
|
|
|
131
|
-
export const singleLineComponentsStyle = {
|
|
136
|
+
export const singleLineComponentsStyle: StylesConfig = {
|
|
132
137
|
control: createControlStyle({isSingleLine: true}),
|
|
133
138
|
};
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import {css} from "@linaria/core";
|
|
2
|
+
import {colors, layout, opacity, border, shadows, space, textStyles, themeVars, transition} from "../designSystem";
|
|
3
|
+
|
|
4
|
+
export const inputOverrides = {
|
|
5
|
+
main: {
|
|
6
|
+
font: "inherit",
|
|
7
|
+
color: themeVars.textColor,
|
|
8
|
+
outline: "none",
|
|
9
|
+
backgroundColor: themeVars.inputBgColor,
|
|
10
|
+
borderRadius: border.radius6,
|
|
11
|
+
minHeight: layout.inputHeight,
|
|
12
|
+
paddingTop: 0,
|
|
13
|
+
paddingBottom: 0,
|
|
14
|
+
paddingLeft: space.l,
|
|
15
|
+
paddingRight: space.l,
|
|
16
|
+
border: 0,
|
|
17
|
+
borderColor: colors.transparent,
|
|
18
|
+
transition: `box-shadow ${transition}`,
|
|
19
|
+
boxShadow: themeVars.inputBorderColor,
|
|
20
|
+
letterSpacing: 0,
|
|
21
|
+
"::placeholder": {
|
|
22
|
+
color: themeVars.inputPlaceholderTextColor,
|
|
23
|
+
opacity: 1,
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
hover: {
|
|
27
|
+
boxShadow: `0 0 0 1px ${themeVars.opacity.regular} !important`,
|
|
28
|
+
transition: `box-shadow ${transition}`,
|
|
29
|
+
},
|
|
30
|
+
focus: {
|
|
31
|
+
boxShadow: `0 0 0 1px ${themeVars.opacity.light}, 0 0 0 3px ${themeVars.focus} !important`,
|
|
32
|
+
transition: `box-shadow ${transition}`,
|
|
33
|
+
},
|
|
34
|
+
disabled: {
|
|
35
|
+
color: themeVars.accentTextColor,
|
|
36
|
+
backgroundColor: themeVars.inputDisabledBgColor,
|
|
37
|
+
borderColor: colors.transparent,
|
|
38
|
+
boxShadow: `${themeVars.inputBorderColor} !important`,
|
|
39
|
+
transition: `box-shadow ${transition}`,
|
|
40
|
+
WebkitTextFillColor: "currentColor",
|
|
41
|
+
cursor: "default",
|
|
42
|
+
":hover": {
|
|
43
|
+
boxShadow: `${themeVars.inputBorderColor}`,
|
|
44
|
+
},
|
|
45
|
+
},
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
export const inputStyles = css`
|
|
49
|
+
& .ant-input-prefix {
|
|
50
|
+
margin-right: -24px;
|
|
51
|
+
z-index: 1;
|
|
52
|
+
position: relative;
|
|
53
|
+
}
|
|
54
|
+
${{
|
|
55
|
+
...textStyles.regular,
|
|
56
|
+
"& .ant-input-group-addon": {
|
|
57
|
+
backgroundColor: colors.transparent,
|
|
58
|
+
border: "none",
|
|
59
|
+
padding: 0,
|
|
60
|
+
textAlign: "left",
|
|
61
|
+
boxShadow: shadows.border,
|
|
62
|
+
":hover": inputOverrides.hover,
|
|
63
|
+
":focus": inputOverrides.focus,
|
|
64
|
+
},
|
|
65
|
+
"& .ant-input-group": {borderSpacing: 1, ...textStyles.regular},
|
|
66
|
+
"& .ant-input": inputOverrides.main,
|
|
67
|
+
"& .ant-input[readonly].ant-input[readonly]": {...inputOverrides.disabled, cursor: "inherit"},
|
|
68
|
+
"& .ant-input:hover[readonly].ant-input:hover[readonly]": {...inputOverrides.disabled, cursor: "inherit"},
|
|
69
|
+
"& .ant-input-affix-wrapper:hover .ant-input[readonly]": {...inputOverrides.disabled, cursor: "inherit"},
|
|
70
|
+
"& .ant-input-affix-wrapper > input.ant-input": {
|
|
71
|
+
padding: "0 12px",
|
|
72
|
+
border: "inherit",
|
|
73
|
+
outline: "inherit",
|
|
74
|
+
},
|
|
75
|
+
"& .ant-input-affix-wrapper": {
|
|
76
|
+
font: "inherit",
|
|
77
|
+
padding: 0,
|
|
78
|
+
border: "none",
|
|
79
|
+
boxShadow: "none",
|
|
80
|
+
backgroundColor: colors.transparent,
|
|
81
|
+
},
|
|
82
|
+
"& .ant-input-affix-wrapper.ant-input-affix-wrapper-readonly": {
|
|
83
|
+
border: "none !important",
|
|
84
|
+
outline: "none !important",
|
|
85
|
+
boxShadow: "none !important",
|
|
86
|
+
},
|
|
87
|
+
"& .ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled)": {
|
|
88
|
+
borderColor: "transparent",
|
|
89
|
+
},
|
|
90
|
+
"& .ant-cascader-picker:focus .ant-cascader-input, & .ant-cascader-picker:focus:hover .ant-cascader-input":
|
|
91
|
+
inputOverrides.focus,
|
|
92
|
+
"& .ant-select-auto-complete.ant-select": {
|
|
93
|
+
...textStyles.regular,
|
|
94
|
+
"& .ant-select-selection--single": {height: layout.inputHeight},
|
|
95
|
+
"& .ant-input": inputOverrides.main,
|
|
96
|
+
"& .ant-input.ant-input:hover": inputOverrides.hover,
|
|
97
|
+
"& .ant-input.ant-input:focus": inputOverrides.focus,
|
|
98
|
+
"& .ant-input.ant-input-disabled": inputOverrides.disabled,
|
|
99
|
+
},
|
|
100
|
+
"& textarea.ant-input": {
|
|
101
|
+
paddingTop: space.m,
|
|
102
|
+
paddingBottom: space.m,
|
|
103
|
+
},
|
|
104
|
+
"& .ant-select-disabled .ant-select-selection": {
|
|
105
|
+
backgroundColor: colors.transparent,
|
|
106
|
+
},
|
|
107
|
+
"&& input:hover:not(:focus):not(:disabled), && textarea:hover:not(:focus):not(:disabled), && .ant-input:hover:not(:focus):not(:disabled)":
|
|
108
|
+
inputOverrides.hover,
|
|
109
|
+
"&& input:focus, && textarea:focus, && input:active, && textarea:active": inputOverrides.focus,
|
|
110
|
+
"&& .ant-input-disabled, && .ant-input-disabled:hover, && .ant-input-disabled:focus, && .ant-input-disabled:active":
|
|
111
|
+
inputOverrides.disabled,
|
|
112
|
+
"&& input::placeholder, && textarea::placeholder": {
|
|
113
|
+
color: themeVars.textColor,
|
|
114
|
+
opacity: opacity.regular,
|
|
115
|
+
},
|
|
116
|
+
"& .ant-input-affix-wrapper .ant-input-prefix": {left: space.s},
|
|
117
|
+
"& .ant-input-affix-wrapper .ant-input:not(:first-child)": {paddingLeft: space.s + space.xl + space.m}, // Match TitlePreview spacing
|
|
118
|
+
}}
|
|
119
|
+
`;
|
package/src/Select/components.js
DELETED
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import {useCallback} from "react";
|
|
2
|
-
import {css} from "@linaria/core";
|
|
3
|
-
import {components} from "react-windowed-select";
|
|
4
|
-
import RemoveIcon from "../icons/react/Remove";
|
|
5
|
-
import {Button} from "../Button";
|
|
6
|
-
import {themeVars, space} from "../designSystem";
|
|
7
|
-
import ArrowBottom from "../icons/react/ArrowBottom";
|
|
8
|
-
import {dropdownIndicatorSize, expanderStyle} from "./styles";
|
|
9
|
-
|
|
10
|
-
export const Option = ({children, ...props}) => {
|
|
11
|
-
const {onMouseMove, onMouseOver, ...rest} = props.innerProps;
|
|
12
|
-
const newProps = Object.assign(props, {innerProps: rest});
|
|
13
|
-
return <components.Option {...newProps}>{children}</components.Option>;
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
export const DropdownIndicator = (props) => (
|
|
17
|
-
<div
|
|
18
|
-
className={expanderStyle}
|
|
19
|
-
style={{
|
|
20
|
-
transform: props.selectProps.menuIsOpen ? "rotate(180deg)" : "",
|
|
21
|
-
}}
|
|
22
|
-
>
|
|
23
|
-
<ArrowBottom iconSize={dropdownIndicatorSize} color={themeVars.disabledTextColor} />
|
|
24
|
-
</div>
|
|
25
|
-
);
|
|
26
|
-
|
|
27
|
-
export const ClearIndicator = ({innerProps, selectProps}) => {
|
|
28
|
-
const onMouseDown = innerProps.onMouseDown;
|
|
29
|
-
const wrappedOnMouseDown = useCallback(
|
|
30
|
-
(e) => {
|
|
31
|
-
onMouseDown(e);
|
|
32
|
-
// This prevents false positive triggering in rc-trigger
|
|
33
|
-
e.nativeEvent.stopImmediatePropagation();
|
|
34
|
-
},
|
|
35
|
-
[onMouseDown]
|
|
36
|
-
);
|
|
37
|
-
return (
|
|
38
|
-
<Button
|
|
39
|
-
borderless
|
|
40
|
-
Icon={RemoveIcon}
|
|
41
|
-
disabled={selectProps.isDisabled}
|
|
42
|
-
size={":button-size/super-small"}
|
|
43
|
-
{...innerProps}
|
|
44
|
-
onMouseDown={wrappedOnMouseDown}
|
|
45
|
-
/>
|
|
46
|
-
);
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
export const NoOptionsMessage = ({children}) => {
|
|
50
|
-
return (
|
|
51
|
-
<div
|
|
52
|
-
className={css`
|
|
53
|
-
${{
|
|
54
|
-
paddingLeft: space.l + 2,
|
|
55
|
-
paddingRight: space.l + 2,
|
|
56
|
-
paddingTop: space.m,
|
|
57
|
-
paddingBottom: space.m,
|
|
58
|
-
}}
|
|
59
|
-
`}
|
|
60
|
-
>
|
|
61
|
-
{children}
|
|
62
|
-
</div>
|
|
63
|
-
);
|
|
64
|
-
};
|
package/src/Select/index.d.ts
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import {FunctionComponent, ForwardRefRenderFunction} from "react";
|
|
2
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
3
|
-
export const Select: ForwardRefRenderFunction<{focus: () => void}, any>;
|
|
4
|
-
export const CreatableSelect: FunctionComponent<any>;
|
|
5
|
-
export const components: {
|
|
6
|
-
GroupHeading: FunctionComponent<any>;
|
|
7
|
-
Option: FunctionComponent<any>;
|
|
8
|
-
SingleValue: FunctionComponent<any>;
|
|
9
|
-
MultiValue: FunctionComponent<any>;
|
|
10
|
-
};
|
|
11
|
-
export const combineStyles: (...args: any[]) => any;
|
package/src/Select/lazy.js
DELETED
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import {lazy, Suspense, forwardRef} from "react";
|
|
2
|
-
import {SelectLoader} from "./select-loader";
|
|
3
|
-
|
|
4
|
-
const LazySelect = lazy(async () => {
|
|
5
|
-
const {Select} = await import("./index");
|
|
6
|
-
return {default: Select};
|
|
7
|
-
});
|
|
8
|
-
|
|
9
|
-
export const ReactSelect = forwardRef((props, forwardedRef) => (
|
|
10
|
-
<Suspense fallback={<SelectLoader />}>
|
|
11
|
-
<LazySelect {...props} ref={forwardedRef} />
|
|
12
|
-
</Suspense>
|
|
13
|
-
));
|
|
14
|
-
|
|
15
|
-
const CreatableLazySelect = lazy(async () => {
|
|
16
|
-
const {CreatableSelect} = await import("./index");
|
|
17
|
-
return {default: CreatableSelect};
|
|
18
|
-
});
|
|
19
|
-
|
|
20
|
-
export const CreatableReactSelect = (props) => (
|
|
21
|
-
<Suspense fallback={<SelectLoader />}>
|
|
22
|
-
<CreatableLazySelect {...props} />
|
|
23
|
-
</Suspense>
|
|
24
|
-
);
|
|
25
|
-
|
|
26
|
-
const SingleRowLazySelect = lazy(async () => {
|
|
27
|
-
const {SingleRowSelect} = await import("./index");
|
|
28
|
-
return {default: SingleRowSelect};
|
|
29
|
-
});
|
|
30
|
-
|
|
31
|
-
export const SingleRowReactSelect = (props) => (
|
|
32
|
-
<Suspense fallback={<SelectLoader />}>
|
|
33
|
-
<SingleRowLazySelect {...props} />
|
|
34
|
-
</Suspense>
|
|
35
|
-
);
|