@wireapp/react-ui-kit 8.13.1 → 8.13.4
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 +24 -0
- package/package.json +2 -2
- package/src/Form/Button.js +28 -9
- package/src/Form/Button.js.map +1 -1
- package/src/Form/Input.js +7 -4
- package/src/Form/Input.js.map +1 -1
- package/src/Form/Select.js +2 -0
- package/src/Form/Select.js.map +1 -1
- package/src/Form/SelectComponents.d.ts +1 -0
- package/src/Form/SelectComponents.js +16 -7
- package/src/Form/SelectComponents.js.map +1 -1
- package/src/Form/SelectStyles.d.ts +898 -895
- package/src/Form/SelectStyles.js +63 -40
- package/src/Form/SelectStyles.js.map +1 -1
- package/src/GlobalCssVariables.js +23 -1
- package/src/GlobalCssVariables.js.map +1 -1
- package/src/GlobalStyle.js +1 -4
- package/src/GlobalStyle.js.map +1 -1
- package/src/Identity/colors-v2.js +26 -26
- package/src/Identity/colors-v2.js.map +1 -1
- package/src/Layout/Theme.d.ts +43 -23
- package/src/Layout/Theme.js +73 -10
- package/src/Layout/Theme.js.map +1 -1
- package/src/Layout/headerMenu/MenuSubLink.js +1 -5
- package/src/Layout/headerMenu/MenuSubLink.js.map +1 -1
- package/src/Modal/Modal.js +3 -3
- package/src/Modal/Modal.js.map +1 -1
- package/src/Text/Link.d.ts +1 -0
- package/src/Text/Link.js +17 -15
- package/src/Text/Link.js.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,30 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [8.13.4](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@8.13.3...@wireapp/react-ui-kit@8.13.4) (2022-08-23)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @wireapp/react-ui-kit
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [8.13.3](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@8.13.2...@wireapp/react-ui-kit@8.13.3) (2022-08-17)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @wireapp/react-ui-kit
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## [8.13.2](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@8.13.1...@wireapp/react-ui-kit@8.13.2) (2022-08-17)
|
|
23
|
+
|
|
24
|
+
**Note:** Version bump only for package @wireapp/react-ui-kit
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
6
30
|
## [8.13.1](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@8.13.0...@wireapp/react-ui-kit@8.13.1) (2022-08-11)
|
|
7
31
|
|
|
8
32
|
**Note:** Version bump only for package @wireapp/react-ui-kit
|
package/package.json
CHANGED
|
@@ -70,6 +70,6 @@
|
|
|
70
70
|
"test:update": "yarn test --updateSnapshot",
|
|
71
71
|
"test:project": "yarn dist && yarn test"
|
|
72
72
|
},
|
|
73
|
-
"version": "8.13.
|
|
74
|
-
"gitHead": "
|
|
73
|
+
"version": "8.13.4",
|
|
74
|
+
"gitHead": "424af23038341c7ca52ac14631fc14bf9d474671"
|
|
75
75
|
}
|
package/src/Form/Button.js
CHANGED
|
@@ -102,17 +102,19 @@ var buttonStyle = function buttonStyle(theme, _ref) {
|
|
|
102
102
|
minWidth: '125px',
|
|
103
103
|
padding: '0 16px'
|
|
104
104
|
})), variant === ButtonVariant.PRIMARY && _objectSpread({
|
|
105
|
-
backgroundColor: backgroundColor || (disabled ?
|
|
106
|
-
color: disabled ?
|
|
105
|
+
backgroundColor: backgroundColor || (disabled ? theme.Button.primaryDisabledBg : theme.Button.primaryBg),
|
|
106
|
+
color: disabled ? theme.Button.primaryDisabledText : theme.general.contrastColor
|
|
107
107
|
}, !disabled && {
|
|
108
108
|
'&:hover, &:focus': {
|
|
109
|
-
backgroundColor:
|
|
109
|
+
backgroundColor: theme.Button.primaryHoverBg
|
|
110
110
|
},
|
|
111
111
|
'&:focus': {
|
|
112
|
-
border: "1px solid ".concat(
|
|
112
|
+
border: "1px solid ".concat(theme.Button.primaryFocusBorder)
|
|
113
113
|
},
|
|
114
114
|
'&:active': {
|
|
115
|
-
backgroundColor:
|
|
115
|
+
backgroundColor: theme.Button.primaryActiveBg,
|
|
116
|
+
border: "1px solid ".concat(theme.Button.primaryActiveBorder),
|
|
117
|
+
color: _Identity.COLOR.WHITE
|
|
116
118
|
}
|
|
117
119
|
})), variant === ButtonVariant.SECONDARY && _objectSpread({
|
|
118
120
|
backgroundColor: backgroundColor || (disabled ? _Identity.COLOR_V2.GRAY_20 : _Identity.COLOR_V2.WHITE),
|
|
@@ -131,14 +133,31 @@ var buttonStyle = function buttonStyle(theme, _ref) {
|
|
|
131
133
|
color: _Identity.COLOR_V2.BLUE
|
|
132
134
|
}
|
|
133
135
|
})), variant === ButtonVariant.TERTIARY && _objectSpread({
|
|
134
|
-
|
|
135
|
-
|
|
136
|
+
backgroundColor: backgroundColor || (disabled ? theme.Button.tertiarydisabledBg : theme.Button.tertiaryBg),
|
|
137
|
+
border: disabled ? "1px solid ".concat(theme.Button.tertiaryDisabledBorder) : "1px solid ".concat(theme.Button.tertiaryBorder),
|
|
138
|
+
borderRadius: '12px',
|
|
139
|
+
color: disabled ? theme.Input.placeholderColor : theme.general.color,
|
|
140
|
+
fontSize: '14px',
|
|
141
|
+
fontWeight: 700,
|
|
142
|
+
lineHeight: '24px',
|
|
143
|
+
padding: '4px 8px',
|
|
144
|
+
'& > svg > path': {
|
|
145
|
+
fill: disabled ? theme.Input.placeholderColor : theme.general.color
|
|
146
|
+
}
|
|
136
147
|
}, !disabled && {
|
|
137
148
|
'&:hover, &:focus': {
|
|
138
|
-
|
|
149
|
+
backgroundColor: theme.Button.tertiaryHoverBg,
|
|
150
|
+
border: "1px solid ".concat(theme.Button.tertiaryHoverBorder)
|
|
139
151
|
},
|
|
140
152
|
'&:focus': {
|
|
141
|
-
border: "1px solid ".concat(
|
|
153
|
+
border: "1px solid ".concat(theme.general.focusColor)
|
|
154
|
+
},
|
|
155
|
+
'&:active': {
|
|
156
|
+
backgroundColor: theme.Button.tertiaryActiveBg,
|
|
157
|
+
color: theme.IconButton.primaryActiveFillColor,
|
|
158
|
+
'& > svg > path': {
|
|
159
|
+
fill: theme.IconButton.primaryActiveFillColor
|
|
160
|
+
}
|
|
142
161
|
}
|
|
143
162
|
})), variant === ButtonVariant.QUATERNARY && _objectSpread({
|
|
144
163
|
backgroundColor: backgroundColor || (disabled ? _Identity.COLOR_V2.GRAY_50 : _Identity.COLOR_V2.GREEN),
|
package/src/Form/Button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Button.tsx"],"names":["ButtonVariant","buttonStyle","theme","variant","PRIMARY","backgroundColor","block","disabled","noCapital","bold","center","color","COLOR","WHITE","fontSize","noWrap","textTransform","truncate","props","border","cursor","display","alignItems","justifyContent","marginBottom","padding","outline","textDecoration","touchAction","transition","defaultTransition","width","TERTIARY","borderRadius","SEND","height","lineHeight","maxWidth","minWidth","COLOR_V2","GRAY_50","BLUE","GRAY_80","BLUE_LIGHT_600","BLUE_LIGHT_700","SECONDARY","GRAY_20","GRAY_40","GRAY_60","BLACK","BLUE_LIGHT_50","BLUE_LIGHT_300","QUATERNARY","GREEN","GREEN_LIGHT_600","GREEN_LIGHT_700","GRAY_70","BLUE_LIGHT_800","Button","showLoading","children","loadingColor","filterButtonProps","margin"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {COLOR, COLOR_V2} from '../Identity';\nimport {defaultTransition} from '../Identity/motions';\nimport type {Theme} from '../Layout';\nimport {Loading} from '../Misc';\nimport {TextProps, filterTextProps, textStyle} from '../Text';\nimport {filterProps} from '../util';\n\nexport enum ButtonVariant {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n TERTIARY = 'tertiary',\n QUATERNARY = 'quaternary',\n SEND = 'send',\n}\n\nexport interface ButtonProps<T = HTMLButtonElement> extends TextProps<T> {\n variant?: ButtonVariant;\n backgroundColor?: string;\n loadingColor?: string;\n noCapital?: boolean;\n showLoading?: boolean;\n}\n\nexport const buttonStyle: <T>(theme: Theme, props: ButtonProps<T>) => CSSObject = (\n theme,\n {\n variant = ButtonVariant.PRIMARY,\n backgroundColor,\n block = false,\n disabled = false,\n noCapital = false,\n bold = true,\n center = true,\n color = COLOR.WHITE,\n fontSize = '16px',\n noWrap = true,\n textTransform = 'none',\n truncate = true,\n ...props\n },\n) => ({\n ...textStyle(theme, {\n block,\n bold,\n center,\n disabled,\n fontSize,\n noWrap,\n textTransform,\n truncate,\n ...props,\n }),\n border: 0,\n cursor: disabled ? 'default' : 'pointer',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n marginBottom: '16px',\n padding: 0,\n outline: 'none',\n textDecoration: 'none',\n touchAction: 'manipulation',\n transition: defaultTransition,\n width: block ? '100%' : 'auto',\n '&:hover, &:focus': {\n textDecoration: 'none',\n },\n ...(variant !== ButtonVariant.TERTIARY && {\n borderRadius: variant === ButtonVariant.SEND ? '100%' : '16px',\n height: variant === ButtonVariant.SEND ? '40px' : '48px',\n lineHeight: variant === ButtonVariant.SEND ? '40px' : '48px',\n ...(variant !== ButtonVariant.SEND && {\n maxWidth: '100%',\n minWidth: '125px',\n padding: '0 16px',\n }),\n }),\n ...(variant === ButtonVariant.PRIMARY && {\n backgroundColor: backgroundColor || (disabled ? COLOR_V2.GRAY_50 : COLOR_V2.BLUE),\n color: disabled ? COLOR_V2.GRAY_80 : COLOR_V2.WHITE,\n ...(!disabled && {\n '&:hover, &:focus': {\n backgroundColor: COLOR_V2.BLUE_LIGHT_600,\n },\n '&:focus': {\n border: `1px solid ${COLOR_V2.BLUE_LIGHT_700}`,\n },\n '&:active': {\n backgroundColor: COLOR_V2.BLUE_LIGHT_700,\n },\n }),\n }),\n ...(variant === ButtonVariant.SECONDARY && {\n backgroundColor: backgroundColor || (disabled ? COLOR_V2.GRAY_20 : COLOR_V2.WHITE),\n border: `1px solid ${COLOR_V2.GRAY_40}`,\n color: disabled ? COLOR_V2.GRAY_60 : COLOR_V2.BLACK,\n ...(!disabled && {\n '&:hover, &:focus': {\n border: `1px solid ${COLOR_V2.BLUE}`,\n },\n '&:focus': {\n color: COLOR_V2.BLUE,\n },\n '&:active': {\n backgroundColor: COLOR_V2.BLUE_LIGHT_50,\n border: `1px solid ${COLOR_V2.BLUE}`,\n color: COLOR_V2.BLUE,\n },\n }),\n }),\n ...(variant === ButtonVariant.TERTIARY && {\n color: disabled ? COLOR_V2.GRAY_60 : COLOR_V2.BLACK,\n lineHeight: '24px',\n ...(!disabled && {\n '&:hover, &:focus': {\n color: COLOR_V2.BLUE,\n },\n '&:focus': {\n border: `1px solid ${COLOR_V2.BLUE_LIGHT_300}`,\n },\n }),\n }),\n ...(variant === ButtonVariant.QUATERNARY && {\n backgroundColor: backgroundColor || (disabled ? COLOR_V2.GRAY_50 : COLOR_V2.GREEN),\n color: disabled ? COLOR_V2.GRAY_80 : COLOR_V2.WHITE,\n lineHeight: '24px',\n ...(!disabled && {\n '&:hover, &:focus': {\n backgroundColor: COLOR_V2.GREEN_LIGHT_600,\n },\n '&:focus': {\n border: `1px solid ${COLOR_V2.GREEN_LIGHT_700}`,\n },\n '&:active': {\n backgroundColor: COLOR_V2.GREEN_LIGHT_700,\n },\n }),\n }),\n ...(variant === ButtonVariant.SEND && {\n backgroundColor: backgroundColor || (disabled ? COLOR_V2.GRAY_70 : COLOR_V2.BLUE),\n width: '40px',\n ...(!disabled && {\n '&:hover, &:focus': {\n backgroundColor: COLOR_V2.BLUE_LIGHT_600,\n },\n '&:focus': {\n border: `1px solid ${COLOR_V2.BLUE_LIGHT_800}`,\n },\n '&:active': {\n backgroundColor: COLOR_V2.BLUE_LIGHT_700,\n },\n }),\n }),\n});\n\nexport const Button = ({showLoading, children, loadingColor = COLOR.WHITE, ...props}: ButtonProps) => (\n <button css={(theme: Theme) => buttonStyle(theme, props)} {...filterButtonProps(props)}>\n {showLoading ? <Loading size={30} color={loadingColor} style={{display: 'flex', margin: 'auto'}} /> : children}\n </button>\n);\n\nexport const filterButtonProps = (props: ButtonProps) => {\n return filterProps(filterTextProps(props) as ButtonProps, ['backgroundColor', 'noCapital']);\n};\n"],"file":"Button.js"}
|
|
1
|
+
{"version":3,"sources":["Button.tsx"],"names":["ButtonVariant","buttonStyle","theme","variant","PRIMARY","backgroundColor","block","disabled","noCapital","bold","center","color","COLOR","WHITE","fontSize","noWrap","textTransform","truncate","props","border","cursor","display","alignItems","justifyContent","marginBottom","padding","outline","textDecoration","touchAction","transition","defaultTransition","width","TERTIARY","borderRadius","SEND","height","lineHeight","maxWidth","minWidth","Button","primaryDisabledBg","primaryBg","primaryDisabledText","general","contrastColor","primaryHoverBg","primaryFocusBorder","primaryActiveBg","primaryActiveBorder","SECONDARY","COLOR_V2","GRAY_20","GRAY_40","GRAY_60","BLACK","BLUE","BLUE_LIGHT_50","tertiarydisabledBg","tertiaryBg","tertiaryDisabledBorder","tertiaryBorder","Input","placeholderColor","fontWeight","fill","tertiaryHoverBg","tertiaryHoverBorder","focusColor","tertiaryActiveBg","IconButton","primaryActiveFillColor","QUATERNARY","GRAY_50","GREEN","GRAY_80","GREEN_LIGHT_600","GREEN_LIGHT_700","GRAY_70","BLUE_LIGHT_600","BLUE_LIGHT_800","BLUE_LIGHT_700","showLoading","children","loadingColor","filterButtonProps","margin"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {COLOR, COLOR_V2} from '../Identity';\nimport {defaultTransition} from '../Identity/motions';\nimport type {Theme} from '../Layout';\nimport {Loading} from '../Misc';\nimport {TextProps, filterTextProps, textStyle} from '../Text';\nimport {filterProps} from '../util';\n\nexport enum ButtonVariant {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n TERTIARY = 'tertiary',\n QUATERNARY = 'quaternary',\n SEND = 'send',\n}\n\nexport interface ButtonProps<T = HTMLButtonElement> extends TextProps<T> {\n variant?: ButtonVariant;\n backgroundColor?: string;\n loadingColor?: string;\n noCapital?: boolean;\n showLoading?: boolean;\n}\n\nexport const buttonStyle: <T>(theme: Theme, props: ButtonProps<T>) => CSSObject = (\n theme,\n {\n variant = ButtonVariant.PRIMARY,\n backgroundColor,\n block = false,\n disabled = false,\n noCapital = false,\n bold = true,\n center = true,\n color = COLOR.WHITE,\n fontSize = '16px',\n noWrap = true,\n textTransform = 'none',\n truncate = true,\n ...props\n },\n) => ({\n ...textStyle(theme, {\n block,\n bold,\n center,\n disabled,\n fontSize,\n noWrap,\n textTransform,\n truncate,\n ...props,\n }),\n border: 0,\n cursor: disabled ? 'default' : 'pointer',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n marginBottom: '16px',\n padding: 0,\n outline: 'none',\n textDecoration: 'none',\n touchAction: 'manipulation',\n transition: defaultTransition,\n width: block ? '100%' : 'auto',\n '&:hover, &:focus': {\n textDecoration: 'none',\n },\n ...(variant !== ButtonVariant.TERTIARY && {\n borderRadius: variant === ButtonVariant.SEND ? '100%' : '16px',\n height: variant === ButtonVariant.SEND ? '40px' : '48px',\n lineHeight: variant === ButtonVariant.SEND ? '40px' : '48px',\n ...(variant !== ButtonVariant.SEND && {\n maxWidth: '100%',\n minWidth: '125px',\n padding: '0 16px',\n }),\n }),\n ...(variant === ButtonVariant.PRIMARY && {\n backgroundColor: backgroundColor || (disabled ? theme.Button.primaryDisabledBg : theme.Button.primaryBg),\n color: disabled ? theme.Button.primaryDisabledText : theme.general.contrastColor,\n ...(!disabled && {\n '&:hover, &:focus': {\n backgroundColor: theme.Button.primaryHoverBg,\n },\n '&:focus': {\n border: `1px solid ${theme.Button.primaryFocusBorder}`,\n },\n '&:active': {\n backgroundColor: theme.Button.primaryActiveBg,\n border: `1px solid ${theme.Button.primaryActiveBorder}`,\n color: COLOR.WHITE,\n },\n }),\n }),\n ...(variant === ButtonVariant.SECONDARY && {\n backgroundColor: backgroundColor || (disabled ? COLOR_V2.GRAY_20 : COLOR_V2.WHITE),\n border: `1px solid ${COLOR_V2.GRAY_40}`,\n color: disabled ? COLOR_V2.GRAY_60 : COLOR_V2.BLACK,\n ...(!disabled && {\n '&:hover, &:focus': {\n border: `1px solid ${COLOR_V2.BLUE}`,\n },\n '&:focus': {\n color: COLOR_V2.BLUE,\n },\n '&:active': {\n backgroundColor: COLOR_V2.BLUE_LIGHT_50,\n border: `1px solid ${COLOR_V2.BLUE}`,\n color: COLOR_V2.BLUE,\n },\n }),\n }),\n ...(variant === ButtonVariant.TERTIARY && {\n backgroundColor: backgroundColor || (disabled ? theme.Button.tertiarydisabledBg : theme.Button.tertiaryBg),\n border: disabled ? `1px solid ${theme.Button.tertiaryDisabledBorder}` : `1px solid ${theme.Button.tertiaryBorder}`,\n borderRadius: '12px',\n color: disabled ? theme.Input.placeholderColor : theme.general.color,\n fontSize: '14px',\n fontWeight: 700,\n lineHeight: '24px',\n padding: '4px 8px',\n '& > svg > path': {\n fill: disabled ? theme.Input.placeholderColor : theme.general.color,\n },\n ...(!disabled && {\n '&:hover, &:focus': {\n backgroundColor: theme.Button.tertiaryHoverBg,\n border: `1px solid ${theme.Button.tertiaryHoverBorder}`,\n },\n '&:focus': {\n border: `1px solid ${theme.general.focusColor}`,\n },\n '&:active': {\n backgroundColor: theme.Button.tertiaryActiveBg,\n color: theme.IconButton.primaryActiveFillColor,\n '& > svg > path': {\n fill: theme.IconButton.primaryActiveFillColor,\n },\n },\n }),\n }),\n ...(variant === ButtonVariant.QUATERNARY && {\n backgroundColor: backgroundColor || (disabled ? COLOR_V2.GRAY_50 : COLOR_V2.GREEN),\n color: disabled ? COLOR_V2.GRAY_80 : COLOR_V2.WHITE,\n lineHeight: '24px',\n ...(!disabled && {\n '&:hover, &:focus': {\n backgroundColor: COLOR_V2.GREEN_LIGHT_600,\n },\n '&:focus': {\n border: `1px solid ${COLOR_V2.GREEN_LIGHT_700}`,\n },\n '&:active': {\n backgroundColor: COLOR_V2.GREEN_LIGHT_700,\n },\n }),\n }),\n ...(variant === ButtonVariant.SEND && {\n backgroundColor: backgroundColor || (disabled ? COLOR_V2.GRAY_70 : COLOR_V2.BLUE),\n width: '40px',\n ...(!disabled && {\n '&:hover, &:focus': {\n backgroundColor: COLOR_V2.BLUE_LIGHT_600,\n },\n '&:focus': {\n border: `1px solid ${COLOR_V2.BLUE_LIGHT_800}`,\n },\n '&:active': {\n backgroundColor: COLOR_V2.BLUE_LIGHT_700,\n },\n }),\n }),\n});\n\nexport const Button = ({showLoading, children, loadingColor = COLOR.WHITE, ...props}: ButtonProps) => (\n <button css={(theme: Theme) => buttonStyle(theme, props)} {...filterButtonProps(props)}>\n {showLoading ? <Loading size={30} color={loadingColor} style={{display: 'flex', margin: 'auto'}} /> : children}\n </button>\n);\n\nexport const filterButtonProps = (props: ButtonProps) => {\n return filterProps(filterTextProps(props) as ButtonProps, ['backgroundColor', 'noCapital']);\n};\n"],"file":"Button.js"}
|
package/src/Form/Input.js
CHANGED
|
@@ -55,10 +55,13 @@ var inputStyle = function inputStyle(theme, _ref) {
|
|
|
55
55
|
}),
|
|
56
56
|
'&::-ms-input-placeholder': _objectSpread({}, placeholderStyle),
|
|
57
57
|
'&::-webkit-input-placeholder': _objectSpread({}, placeholderStyle),
|
|
58
|
-
'&:
|
|
58
|
+
'&:hover': {
|
|
59
|
+
boxShadow: !disabled && "0 0 0 1px ".concat(theme.Input.borderHover)
|
|
60
|
+
},
|
|
61
|
+
'&:focus-visible, &:focus, &:active': {
|
|
59
62
|
boxShadow: "0 0 0 1px ".concat(theme.general.primaryColor)
|
|
60
63
|
},
|
|
61
|
-
'&:invalid:not(:focus)': !markInvalid ? {
|
|
64
|
+
'&:invalid:not(:focus, :hover)': !markInvalid ? {
|
|
62
65
|
boxShadow: "0 0 0 1px ".concat(theme.Select.borderColor)
|
|
63
66
|
} : {},
|
|
64
67
|
background: disabled ? theme.Input.backgroundColorDisabled : theme.Input.backgroundColor,
|
|
@@ -139,7 +142,7 @@ var Input = /*#__PURE__*/_react2["default"].forwardRef(function (_ref2, ref) {
|
|
|
139
142
|
css: /*#__PURE__*/(0, _react.css)({
|
|
140
143
|
marginBottom: hasError && '8px',
|
|
141
144
|
position: 'relative'
|
|
142
|
-
}, process.env.NODE_ENV === "production" ? "" : ";label:Input;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
145
|
+
}, process.env.NODE_ENV === "production" ? "" : ";label:Input;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIklucHV0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrSVciLCJmaWxlIjoiSW5wdXQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFdpcmVcbiAqIENvcHlyaWdodCAoQykgMjAxOCBXaXJlIFN3aXNzIEdtYkhcbiAqXG4gKiBUaGlzIHByb2dyYW0gaXMgZnJlZSBzb2Z0d2FyZTogeW91IGNhbiByZWRpc3RyaWJ1dGUgaXQgYW5kL29yIG1vZGlmeVxuICogaXQgdW5kZXIgdGhlIHRlcm1zIG9mIHRoZSBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBhcyBwdWJsaXNoZWQgYnlcbiAqIHRoZSBGcmVlIFNvZnR3YXJlIEZvdW5kYXRpb24sIGVpdGhlciB2ZXJzaW9uIDMgb2YgdGhlIExpY2Vuc2UsIG9yXG4gKiAoYXQgeW91ciBvcHRpb24pIGFueSBsYXRlciB2ZXJzaW9uLlxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBkaXN0cmlidXRlZCBpbiB0aGUgaG9wZSB0aGF0IGl0IHdpbGwgYmUgdXNlZnVsLFxuICogYnV0IFdJVEhPVVQgQU5ZIFdBUlJBTlRZOyB3aXRob3V0IGV2ZW4gdGhlIGltcGxpZWQgd2FycmFudHkgb2ZcbiAqIE1FUkNIQU5UQUJJTElUWSBvciBGSVRORVNTIEZPUiBBIFBBUlRJQ1VMQVIgUFVSUE9TRS4gU2VlIHRoZVxuICogR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2UgZm9yIG1vcmUgZGV0YWlscy5cbiAqXG4gKiBZb3Ugc2hvdWxkIGhhdmUgcmVjZWl2ZWQgYSBjb3B5IG9mIHRoZSBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZVxuICogYWxvbmcgd2l0aCB0aGlzIHByb2dyYW0uIElmIG5vdCwgc2VlIGh0dHA6Ly93d3cuZ251Lm9yZy9saWNlbnNlcy8uXG4gKlxuICovXG5cbi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHtDU1NPYmplY3QsIGpzeCwgdXNlVGhlbWV9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB0eXBlIHtQcm9wZXJ0eX0gZnJvbSAnY3NzdHlwZSc7XG5pbXBvcnQgUmVhY3QsIHtSZWFjdEVsZW1lbnQsIHVzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB0eXBlIHtUaGVtZX0gZnJvbSAnLi4vTGF5b3V0JztcbmltcG9ydCB0eXBlIHtUZXh0UHJvcHN9IGZyb20gJy4uL1RleHQnO1xuaW1wb3J0IHtmaWx0ZXJQcm9wc30gZnJvbSAnLi4vdXRpbCc7XG5pbXBvcnQge0Vycm9ySWNvbiwgSGlkZUljb24sIFNob3dJY29ufSBmcm9tICcuLi9JY29uJztcbmltcG9ydCBJbnB1dExhYmVsIGZyb20gJy4vSW5wdXRMYWJlbCc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgSW5wdXRQcm9wczxUID0gSFRNTElucHV0RWxlbWVudD4gZXh0ZW5kcyBUZXh0UHJvcHM8VD4ge1xuICBsYWJlbD86IHN0cmluZztcbiAgZXJyb3I/OiBSZWFjdEVsZW1lbnQ7XG4gIG1hcmtJbnZhbGlkPzogYm9vbGVhbjtcbiAgaGVscGVyVGV4dD86IHN0cmluZztcbiAgcGxhY2Vob2xkZXJUZXh0VHJhbnNmb3JtPzogUHJvcGVydHkuVGV4dFRyYW5zZm9ybTtcbiAgd3JhcHBlckNTUz86IENTU09iamVjdDtcbn1cblxuZXhwb3J0IGNvbnN0IGlucHV0U3R5bGU6IDxUPih0aGVtZTogVGhlbWUsIHByb3BzOiBJbnB1dFByb3BzPFQ+LCBoYXNFcnJvcj86IGJvb2xlYW4pID0+IENTU09iamVjdCA9IChcbiAgdGhlbWUsXG4gIHttYXJrSW52YWxpZCA9IGZhbHNlLCBwbGFjZWhvbGRlclRleHRUcmFuc2Zvcm0gPSAnbm9uZScsIGRpc2FibGVkID0gZmFsc2V9LFxuKSA9PiB7XG4gIGNvbnN0IHBsYWNlaG9sZGVyU3R5bGUgPSB7XG4gICAgY29sb3I6IHRoZW1lLklucHV0LnBsYWNlaG9sZGVyQ29sb3IsXG4gICAgZm9udFNpemU6ICcxNnB4JyxcbiAgICB0ZXh0VHJhbnNmb3JtOiBwbGFjZWhvbGRlclRleHRUcmFuc2Zvcm0sXG4gIH07XG5cbiAgcmV0dXJuIHtcbiAgICAnJjo6LW1vei1wbGFjZWhvbGRlcic6IHtcbiAgICAgIC4uLnBsYWNlaG9sZGVyU3R5bGUsXG4gICAgICBvcGFjaXR5OiAxLFxuICAgIH0sXG4gICAgJyY6Oi1tcy1pbnB1dC1wbGFjZWhvbGRlcic6IHtcbiAgICAgIC4uLnBsYWNlaG9sZGVyU3R5bGUsXG4gICAgfSxcbiAgICAnJjo6LXdlYmtpdC1pbnB1dC1wbGFjZWhvbGRlcic6IHtcbiAgICAgIC4uLnBsYWNlaG9sZGVyU3R5bGUsXG4gICAgfSxcbiAgICAnJjpob3Zlcic6IHtcbiAgICAgIGJveFNoYWRvdzogIWRpc2FibGVkICYmIGAwIDAgMCAxcHggJHt0aGVtZS5JbnB1dC5ib3JkZXJIb3Zlcn1gLFxuICAgIH0sXG4gICAgJyY6Zm9jdXMtdmlzaWJsZSwgJjpmb2N1cywgJjphY3RpdmUnOiB7XG4gICAgICBib3hTaGFkb3c6IGAwIDAgMCAxcHggJHt0aGVtZS5nZW5lcmFsLnByaW1hcnlDb2xvcn1gLFxuICAgIH0sXG4gICAgJyY6aW52YWxpZDpub3QoOmZvY3VzLCA6aG92ZXIpJzogIW1hcmtJbnZhbGlkXG4gICAgICA/IHtcbiAgICAgICAgICBib3hTaGFkb3c6IGAwIDAgMCAxcHggJHt0aGVtZS5TZWxlY3QuYm9yZGVyQ29sb3J9YCxcbiAgICAgICAgfVxuICAgICAgOiB7fSxcbiAgICBiYWNrZ3JvdW5kOiBkaXNhYmxlZCA/IHRoZW1lLklucHV0LmJhY2tncm91bmRDb2xvckRpc2FibGVkIDogdGhlbWUuSW5wdXQuYmFja2dyb3VuZENvbG9yLFxuICAgIGJvcmRlcjogJ25vbmUnLFxuICAgIGJvcmRlclJhZGl1czogJzEycHgnLFxuICAgIGJveFNoYWRvdzogbWFya0ludmFsaWQgPyBgMCAwIDAgMXB4ICR7dGhlbWUuZ2VuZXJhbC5kYW5nZXJDb2xvcn1gIDogYDAgMCAwIDFweCAke3RoZW1lLlNlbGVjdC5ib3JkZXJDb2xvcn1gLFxuICAgIGNhcmV0Q29sb3I6IHRoZW1lLmdlbmVyYWwucHJpbWFyeUNvbG9yLFxuICAgIGNvbG9yOiB0aGVtZS5nZW5lcmFsLmNvbG9yLFxuICAgIGZvbnRXZWlnaHQ6IDMwMCxcbiAgICBoZWlnaHQ6ICc0OHB4JyxcbiAgICBsaW5lSGVpZ2h0OiAnMjRweCcsXG4gICAgb3V0bGluZTogJ25vbmUnLFxuICAgIHBhZGRpbmc6ICcwIDE2cHgnLFxuICAgIHdpZHRoOiAnMTAwJScsXG4gIH07XG59O1xuXG5leHBvcnQgY29uc3QgSU5QVVRfQ0xBU1NOQU1FID0gJ3dpcmVpbnB1dCc7XG5leHBvcnQgY29uc3QgSU5QVVRfR1JPVVAgPSAnaW5wdXQtZ3JvdXAnO1xuXG5jb25zdCBmaWx0ZXJJbnB1dFByb3BzID0gKHByb3BzOiBJbnB1dFByb3BzKSA9PiBmaWx0ZXJQcm9wcyhwcm9wcywgWydtYXJrSW52YWxpZCcsICdwbGFjZWhvbGRlclRleHRUcmFuc2Zvcm0nXSk7XG5cbmNvbnN0IGNlbnRlcklucHV0QWN0aW9uOiBDU1NPYmplY3QgPSB7XG4gIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICByaWdodDogJzE2cHgnLFxuICB0b3A6ICc1MCUnLFxuICB0cmFuc2Zvcm06ICd0cmFuc2xhdGVZKC01MCUpJyxcbn07XG5cbmV4cG9ydCBjb25zdCBJbnB1dDogUmVhY3QuRkM8SW5wdXRQcm9wczxIVE1MSW5wdXRFbGVtZW50Pj4gPSBSZWFjdC5mb3J3YXJkUmVmPFxuICBIVE1MSW5wdXRFbGVtZW50LFxuICBJbnB1dFByb3BzPEhUTUxJbnB1dEVsZW1lbnQ+XG4+KCh7dHlwZSwgbGFiZWwsIGVycm9yLCBoZWxwZXJUZXh0LCB3cmFwcGVyQ1NTID0ge30sIGNsYXNzTmFtZSA9ICcnLCAuLi5wcm9wc30sIHJlZikgPT4ge1xuICBjb25zdCBbdG9nZ2xlUGFzc3dvcmQsIHNldFRvZ2dsZVBhc3N3b3JkXSA9IHVzZVN0YXRlPGJvb2xlYW4+KGZhbHNlKTtcblxuICBjb25zdCBoYXNFcnJvciA9ICEhZXJyb3I7XG4gIGNvbnN0IGlzUGFzc3dvcmRJbnB1dCA9IHR5cGUgPT09ICdwYXNzd29yZCc7XG4gIGNvbnN0IHRvZ2dsZWRQYXNzd29yZFR5cGUgPSB0b2dnbGVQYXNzd29yZCA/ICd0ZXh0JyA6ICdwYXNzd29yZCc7XG5cbiAgY29uc3QgdG9nZ2xlU2V0UGFzc3dvcmQgPSAoKSA9PiBzZXRUb2dnbGVQYXNzd29yZChwcmV2U3RhdGUgPT4gIXByZXZTdGF0ZSk7XG5cbiAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgY2xhc3NOYW1lPXtJTlBVVF9HUk9VUH1cbiAgICAgIGNzcz17KHRoZW1lOiBUaGVtZSkgPT4gKHtcbiAgICAgICAgbWFyZ2luQm90dG9tOiBoYXNFcnJvciA/ICcycHgnIDogJzIwcHgnLFxuICAgICAgICB3aWR0aDogJzEwMCUnLFxuICAgICAgICAnJjpmb2N1cy13aXRoaW4gbGFiZWwnOiB7XG4gICAgICAgICAgY29sb3I6IHRoZW1lLmdlbmVyYWwucHJpbWFyeUNvbG9yLFxuICAgICAgICB9LFxuICAgICAgICAuLi53cmFwcGVyQ1NTLFxuICAgICAgfSl9XG4gICAgPlxuICAgICAge2xhYmVsICYmIChcbiAgICAgICAgPElucHV0TGFiZWwgaHRtbEZvcj17cHJvcHMuaWR9IGlzUmVxdWlyZWQ9e3Byb3BzLnJlcXVpcmVkfSBtYXJrSW52YWxpZD17cHJvcHMubWFya0ludmFsaWR9PlxuICAgICAgICAgIHtsYWJlbH1cbiAgICAgICAgPC9JbnB1dExhYmVsPlxuICAgICAgKX1cblxuICAgICAgPGRpdiBjc3M9e3ttYXJnaW5Cb3R0b206IGhhc0Vycm9yICYmICc4cHgnLCBwb3NpdGlvbjogJ3JlbGF0aXZlJ319PlxuICAgICAgICA8aW5wdXRcbiAgICAgICAgICBjbGFzc05hbWU9e0lOUFVUX0NMQVNTTkFNRX1cbiAgICAgICAgICBjc3M9eyh0aGVtZTogVGhlbWUpID0+IGlucHV0U3R5bGUodGhlbWUsIHByb3BzLCBoYXNFcnJvcil9XG4gICAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgICAgdHlwZT17aXNQYXNzd29yZElucHV0ID8gdG9nZ2xlZFBhc3N3b3JkVHlwZSA6IHR5cGV9XG4gICAgICAgICAgYXJpYS1yZXF1aXJlZD17cHJvcHMucmVxdWlyZWR9XG4gICAgICAgICAgey4uLmZpbHRlcklucHV0UHJvcHMocHJvcHMpfVxuICAgICAgICAvPlxuXG4gICAgICAgIHtoYXNFcnJvciAmJiAhaXNQYXNzd29yZElucHV0ICYmIChcbiAgICAgICAgICA8RXJyb3JJY29uIGNzcz17Y2VudGVySW5wdXRBY3Rpb259IHdpZHRoPXsxNn0gaGVpZ2h0PXsxNn0gYXJpYS1oaWRkZW49XCJ0cnVlXCIgLz5cbiAgICAgICAgKX1cblxuICAgICAgICB7aXNQYXNzd29yZElucHV0ICYmIChcbiAgICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgICAgIGRhdGEtdWllLW5hbWU9eyF0b2dnbGVQYXNzd29yZCA/ICdkby1zaG93LXBhc3N3b3JkJyA6ICdkby1oaWRlLXBhc3N3b3JkJ31cbiAgICAgICAgICAgIGNzcz17ey4uLmNlbnRlcklucHV0QWN0aW9uLCBiYWNrZ3JvdW5kOiAndHJhbnNwYXJlbnQnLCBib3JkZXI6ICdub25lJywgY3Vyc29yOiAncG9pbnRlcicsIHBhZGRpbmc6IDB9fVxuICAgICAgICAgICAgb25DbGljaz17dG9nZ2xlU2V0UGFzc3dvcmR9XG4gICAgICAgICAgICB0aXRsZT1cIlRvZ2dsZSBwYXNzd29yZCB2aXNpYmlsaXR5XCJcbiAgICAgICAgICAgIGFyaWEtY29udHJvbHM9e3Byb3BzLmlkfVxuICAgICAgICAgICAgYXJpYS1leHBhbmRlZD17dG9nZ2xlUGFzc3dvcmR9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge3RvZ2dsZVBhc3N3b3JkID8gPEhpZGVJY29uIC8+IDogPFNob3dJY29uIC8+fVxuICAgICAgICAgIDwvYnV0dG9uPlxuICAgICAgICApfVxuICAgICAgPC9kaXY+XG5cbiAgICAgIHshaGFzRXJyb3IgJiYgaGVscGVyVGV4dCAmJiAoXG4gICAgICAgIDxwXG4gICAgICAgICAgY3NzPXsodGhlbWU6IFRoZW1lKSA9PiAoe1xuICAgICAgICAgICAgZm9udFNpemU6ICcxMnB4JyxcbiAgICAgICAgICAgIGZvbnRXZWlnaHQ6IDQwMCxcbiAgICAgICAgICAgIGNvbG9yOiB0aGVtZS5JbnB1dC5wbGFjZWhvbGRlckNvbG9yLFxuICAgICAgICAgICAgbWFyZ2luVG9wOiA4LFxuICAgICAgICAgIH0pfVxuICAgICAgICA+XG4gICAgICAgICAge2hlbHBlclRleHR9XG4gICAgICAgIDwvcD5cbiAgICAgICl9XG5cbiAgICAgIHtlcnJvcn1cbiAgICA8L2Rpdj5cbiAgKTtcbn0pO1xuIl19 */")
|
|
143
146
|
}, (0, _react.jsx)("input", (0, _extends2["default"])({
|
|
144
147
|
className: INPUT_CLASSNAME,
|
|
145
148
|
css: function css(theme) {
|
|
@@ -161,7 +164,7 @@ var Input = /*#__PURE__*/_react2["default"].forwardRef(function (_ref2, ref) {
|
|
|
161
164
|
border: 'none',
|
|
162
165
|
cursor: 'pointer',
|
|
163
166
|
padding: 0
|
|
164
|
-
}), process.env.NODE_ENV === "production" ? "" : ";label:Input;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
167
|
+
}), process.env.NODE_ENV === "production" ? "" : ";label:Input;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIklucHV0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvSlkiLCJmaWxlIjoiSW5wdXQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFdpcmVcbiAqIENvcHlyaWdodCAoQykgMjAxOCBXaXJlIFN3aXNzIEdtYkhcbiAqXG4gKiBUaGlzIHByb2dyYW0gaXMgZnJlZSBzb2Z0d2FyZTogeW91IGNhbiByZWRpc3RyaWJ1dGUgaXQgYW5kL29yIG1vZGlmeVxuICogaXQgdW5kZXIgdGhlIHRlcm1zIG9mIHRoZSBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBhcyBwdWJsaXNoZWQgYnlcbiAqIHRoZSBGcmVlIFNvZnR3YXJlIEZvdW5kYXRpb24sIGVpdGhlciB2ZXJzaW9uIDMgb2YgdGhlIExpY2Vuc2UsIG9yXG4gKiAoYXQgeW91ciBvcHRpb24pIGFueSBsYXRlciB2ZXJzaW9uLlxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBkaXN0cmlidXRlZCBpbiB0aGUgaG9wZSB0aGF0IGl0IHdpbGwgYmUgdXNlZnVsLFxuICogYnV0IFdJVEhPVVQgQU5ZIFdBUlJBTlRZOyB3aXRob3V0IGV2ZW4gdGhlIGltcGxpZWQgd2FycmFudHkgb2ZcbiAqIE1FUkNIQU5UQUJJTElUWSBvciBGSVRORVNTIEZPUiBBIFBBUlRJQ1VMQVIgUFVSUE9TRS4gU2VlIHRoZVxuICogR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2UgZm9yIG1vcmUgZGV0YWlscy5cbiAqXG4gKiBZb3Ugc2hvdWxkIGhhdmUgcmVjZWl2ZWQgYSBjb3B5IG9mIHRoZSBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZVxuICogYWxvbmcgd2l0aCB0aGlzIHByb2dyYW0uIElmIG5vdCwgc2VlIGh0dHA6Ly93d3cuZ251Lm9yZy9saWNlbnNlcy8uXG4gKlxuICovXG5cbi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHtDU1NPYmplY3QsIGpzeCwgdXNlVGhlbWV9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB0eXBlIHtQcm9wZXJ0eX0gZnJvbSAnY3NzdHlwZSc7XG5pbXBvcnQgUmVhY3QsIHtSZWFjdEVsZW1lbnQsIHVzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB0eXBlIHtUaGVtZX0gZnJvbSAnLi4vTGF5b3V0JztcbmltcG9ydCB0eXBlIHtUZXh0UHJvcHN9IGZyb20gJy4uL1RleHQnO1xuaW1wb3J0IHtmaWx0ZXJQcm9wc30gZnJvbSAnLi4vdXRpbCc7XG5pbXBvcnQge0Vycm9ySWNvbiwgSGlkZUljb24sIFNob3dJY29ufSBmcm9tICcuLi9JY29uJztcbmltcG9ydCBJbnB1dExhYmVsIGZyb20gJy4vSW5wdXRMYWJlbCc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgSW5wdXRQcm9wczxUID0gSFRNTElucHV0RWxlbWVudD4gZXh0ZW5kcyBUZXh0UHJvcHM8VD4ge1xuICBsYWJlbD86IHN0cmluZztcbiAgZXJyb3I/OiBSZWFjdEVsZW1lbnQ7XG4gIG1hcmtJbnZhbGlkPzogYm9vbGVhbjtcbiAgaGVscGVyVGV4dD86IHN0cmluZztcbiAgcGxhY2Vob2xkZXJUZXh0VHJhbnNmb3JtPzogUHJvcGVydHkuVGV4dFRyYW5zZm9ybTtcbiAgd3JhcHBlckNTUz86IENTU09iamVjdDtcbn1cblxuZXhwb3J0IGNvbnN0IGlucHV0U3R5bGU6IDxUPih0aGVtZTogVGhlbWUsIHByb3BzOiBJbnB1dFByb3BzPFQ+LCBoYXNFcnJvcj86IGJvb2xlYW4pID0+IENTU09iamVjdCA9IChcbiAgdGhlbWUsXG4gIHttYXJrSW52YWxpZCA9IGZhbHNlLCBwbGFjZWhvbGRlclRleHRUcmFuc2Zvcm0gPSAnbm9uZScsIGRpc2FibGVkID0gZmFsc2V9LFxuKSA9PiB7XG4gIGNvbnN0IHBsYWNlaG9sZGVyU3R5bGUgPSB7XG4gICAgY29sb3I6IHRoZW1lLklucHV0LnBsYWNlaG9sZGVyQ29sb3IsXG4gICAgZm9udFNpemU6ICcxNnB4JyxcbiAgICB0ZXh0VHJhbnNmb3JtOiBwbGFjZWhvbGRlclRleHRUcmFuc2Zvcm0sXG4gIH07XG5cbiAgcmV0dXJuIHtcbiAgICAnJjo6LW1vei1wbGFjZWhvbGRlcic6IHtcbiAgICAgIC4uLnBsYWNlaG9sZGVyU3R5bGUsXG4gICAgICBvcGFjaXR5OiAxLFxuICAgIH0sXG4gICAgJyY6Oi1tcy1pbnB1dC1wbGFjZWhvbGRlcic6IHtcbiAgICAgIC4uLnBsYWNlaG9sZGVyU3R5bGUsXG4gICAgfSxcbiAgICAnJjo6LXdlYmtpdC1pbnB1dC1wbGFjZWhvbGRlcic6IHtcbiAgICAgIC4uLnBsYWNlaG9sZGVyU3R5bGUsXG4gICAgfSxcbiAgICAnJjpob3Zlcic6IHtcbiAgICAgIGJveFNoYWRvdzogIWRpc2FibGVkICYmIGAwIDAgMCAxcHggJHt0aGVtZS5JbnB1dC5ib3JkZXJIb3Zlcn1gLFxuICAgIH0sXG4gICAgJyY6Zm9jdXMtdmlzaWJsZSwgJjpmb2N1cywgJjphY3RpdmUnOiB7XG4gICAgICBib3hTaGFkb3c6IGAwIDAgMCAxcHggJHt0aGVtZS5nZW5lcmFsLnByaW1hcnlDb2xvcn1gLFxuICAgIH0sXG4gICAgJyY6aW52YWxpZDpub3QoOmZvY3VzLCA6aG92ZXIpJzogIW1hcmtJbnZhbGlkXG4gICAgICA/IHtcbiAgICAgICAgICBib3hTaGFkb3c6IGAwIDAgMCAxcHggJHt0aGVtZS5TZWxlY3QuYm9yZGVyQ29sb3J9YCxcbiAgICAgICAgfVxuICAgICAgOiB7fSxcbiAgICBiYWNrZ3JvdW5kOiBkaXNhYmxlZCA/IHRoZW1lLklucHV0LmJhY2tncm91bmRDb2xvckRpc2FibGVkIDogdGhlbWUuSW5wdXQuYmFja2dyb3VuZENvbG9yLFxuICAgIGJvcmRlcjogJ25vbmUnLFxuICAgIGJvcmRlclJhZGl1czogJzEycHgnLFxuICAgIGJveFNoYWRvdzogbWFya0ludmFsaWQgPyBgMCAwIDAgMXB4ICR7dGhlbWUuZ2VuZXJhbC5kYW5nZXJDb2xvcn1gIDogYDAgMCAwIDFweCAke3RoZW1lLlNlbGVjdC5ib3JkZXJDb2xvcn1gLFxuICAgIGNhcmV0Q29sb3I6IHRoZW1lLmdlbmVyYWwucHJpbWFyeUNvbG9yLFxuICAgIGNvbG9yOiB0aGVtZS5nZW5lcmFsLmNvbG9yLFxuICAgIGZvbnRXZWlnaHQ6IDMwMCxcbiAgICBoZWlnaHQ6ICc0OHB4JyxcbiAgICBsaW5lSGVpZ2h0OiAnMjRweCcsXG4gICAgb3V0bGluZTogJ25vbmUnLFxuICAgIHBhZGRpbmc6ICcwIDE2cHgnLFxuICAgIHdpZHRoOiAnMTAwJScsXG4gIH07XG59O1xuXG5leHBvcnQgY29uc3QgSU5QVVRfQ0xBU1NOQU1FID0gJ3dpcmVpbnB1dCc7XG5leHBvcnQgY29uc3QgSU5QVVRfR1JPVVAgPSAnaW5wdXQtZ3JvdXAnO1xuXG5jb25zdCBmaWx0ZXJJbnB1dFByb3BzID0gKHByb3BzOiBJbnB1dFByb3BzKSA9PiBmaWx0ZXJQcm9wcyhwcm9wcywgWydtYXJrSW52YWxpZCcsICdwbGFjZWhvbGRlclRleHRUcmFuc2Zvcm0nXSk7XG5cbmNvbnN0IGNlbnRlcklucHV0QWN0aW9uOiBDU1NPYmplY3QgPSB7XG4gIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICByaWdodDogJzE2cHgnLFxuICB0b3A6ICc1MCUnLFxuICB0cmFuc2Zvcm06ICd0cmFuc2xhdGVZKC01MCUpJyxcbn07XG5cbmV4cG9ydCBjb25zdCBJbnB1dDogUmVhY3QuRkM8SW5wdXRQcm9wczxIVE1MSW5wdXRFbGVtZW50Pj4gPSBSZWFjdC5mb3J3YXJkUmVmPFxuICBIVE1MSW5wdXRFbGVtZW50LFxuICBJbnB1dFByb3BzPEhUTUxJbnB1dEVsZW1lbnQ+XG4+KCh7dHlwZSwgbGFiZWwsIGVycm9yLCBoZWxwZXJUZXh0LCB3cmFwcGVyQ1NTID0ge30sIGNsYXNzTmFtZSA9ICcnLCAuLi5wcm9wc30sIHJlZikgPT4ge1xuICBjb25zdCBbdG9nZ2xlUGFzc3dvcmQsIHNldFRvZ2dsZVBhc3N3b3JkXSA9IHVzZVN0YXRlPGJvb2xlYW4+KGZhbHNlKTtcblxuICBjb25zdCBoYXNFcnJvciA9ICEhZXJyb3I7XG4gIGNvbnN0IGlzUGFzc3dvcmRJbnB1dCA9IHR5cGUgPT09ICdwYXNzd29yZCc7XG4gIGNvbnN0IHRvZ2dsZWRQYXNzd29yZFR5cGUgPSB0b2dnbGVQYXNzd29yZCA/ICd0ZXh0JyA6ICdwYXNzd29yZCc7XG5cbiAgY29uc3QgdG9nZ2xlU2V0UGFzc3dvcmQgPSAoKSA9PiBzZXRUb2dnbGVQYXNzd29yZChwcmV2U3RhdGUgPT4gIXByZXZTdGF0ZSk7XG5cbiAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgY2xhc3NOYW1lPXtJTlBVVF9HUk9VUH1cbiAgICAgIGNzcz17KHRoZW1lOiBUaGVtZSkgPT4gKHtcbiAgICAgICAgbWFyZ2luQm90dG9tOiBoYXNFcnJvciA/ICcycHgnIDogJzIwcHgnLFxuICAgICAgICB3aWR0aDogJzEwMCUnLFxuICAgICAgICAnJjpmb2N1cy13aXRoaW4gbGFiZWwnOiB7XG4gICAgICAgICAgY29sb3I6IHRoZW1lLmdlbmVyYWwucHJpbWFyeUNvbG9yLFxuICAgICAgICB9LFxuICAgICAgICAuLi53cmFwcGVyQ1NTLFxuICAgICAgfSl9XG4gICAgPlxuICAgICAge2xhYmVsICYmIChcbiAgICAgICAgPElucHV0TGFiZWwgaHRtbEZvcj17cHJvcHMuaWR9IGlzUmVxdWlyZWQ9e3Byb3BzLnJlcXVpcmVkfSBtYXJrSW52YWxpZD17cHJvcHMubWFya0ludmFsaWR9PlxuICAgICAgICAgIHtsYWJlbH1cbiAgICAgICAgPC9JbnB1dExhYmVsPlxuICAgICAgKX1cblxuICAgICAgPGRpdiBjc3M9e3ttYXJnaW5Cb3R0b206IGhhc0Vycm9yICYmICc4cHgnLCBwb3NpdGlvbjogJ3JlbGF0aXZlJ319PlxuICAgICAgICA8aW5wdXRcbiAgICAgICAgICBjbGFzc05hbWU9e0lOUFVUX0NMQVNTTkFNRX1cbiAgICAgICAgICBjc3M9eyh0aGVtZTogVGhlbWUpID0+IGlucHV0U3R5bGUodGhlbWUsIHByb3BzLCBoYXNFcnJvcil9XG4gICAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgICAgdHlwZT17aXNQYXNzd29yZElucHV0ID8gdG9nZ2xlZFBhc3N3b3JkVHlwZSA6IHR5cGV9XG4gICAgICAgICAgYXJpYS1yZXF1aXJlZD17cHJvcHMucmVxdWlyZWR9XG4gICAgICAgICAgey4uLmZpbHRlcklucHV0UHJvcHMocHJvcHMpfVxuICAgICAgICAvPlxuXG4gICAgICAgIHtoYXNFcnJvciAmJiAhaXNQYXNzd29yZElucHV0ICYmIChcbiAgICAgICAgICA8RXJyb3JJY29uIGNzcz17Y2VudGVySW5wdXRBY3Rpb259IHdpZHRoPXsxNn0gaGVpZ2h0PXsxNn0gYXJpYS1oaWRkZW49XCJ0cnVlXCIgLz5cbiAgICAgICAgKX1cblxuICAgICAgICB7aXNQYXNzd29yZElucHV0ICYmIChcbiAgICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgICAgIGRhdGEtdWllLW5hbWU9eyF0b2dnbGVQYXNzd29yZCA/ICdkby1zaG93LXBhc3N3b3JkJyA6ICdkby1oaWRlLXBhc3N3b3JkJ31cbiAgICAgICAgICAgIGNzcz17ey4uLmNlbnRlcklucHV0QWN0aW9uLCBiYWNrZ3JvdW5kOiAndHJhbnNwYXJlbnQnLCBib3JkZXI6ICdub25lJywgY3Vyc29yOiAncG9pbnRlcicsIHBhZGRpbmc6IDB9fVxuICAgICAgICAgICAgb25DbGljaz17dG9nZ2xlU2V0UGFzc3dvcmR9XG4gICAgICAgICAgICB0aXRsZT1cIlRvZ2dsZSBwYXNzd29yZCB2aXNpYmlsaXR5XCJcbiAgICAgICAgICAgIGFyaWEtY29udHJvbHM9e3Byb3BzLmlkfVxuICAgICAgICAgICAgYXJpYS1leHBhbmRlZD17dG9nZ2xlUGFzc3dvcmR9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge3RvZ2dsZVBhc3N3b3JkID8gPEhpZGVJY29uIC8+IDogPFNob3dJY29uIC8+fVxuICAgICAgICAgIDwvYnV0dG9uPlxuICAgICAgICApfVxuICAgICAgPC9kaXY+XG5cbiAgICAgIHshaGFzRXJyb3IgJiYgaGVscGVyVGV4dCAmJiAoXG4gICAgICAgIDxwXG4gICAgICAgICAgY3NzPXsodGhlbWU6IFRoZW1lKSA9PiAoe1xuICAgICAgICAgICAgZm9udFNpemU6ICcxMnB4JyxcbiAgICAgICAgICAgIGZvbnRXZWlnaHQ6IDQwMCxcbiAgICAgICAgICAgIGNvbG9yOiB0aGVtZS5JbnB1dC5wbGFjZWhvbGRlckNvbG9yLFxuICAgICAgICAgICAgbWFyZ2luVG9wOiA4LFxuICAgICAgICAgIH0pfVxuICAgICAgICA+XG4gICAgICAgICAge2hlbHBlclRleHR9XG4gICAgICAgIDwvcD5cbiAgICAgICl9XG5cbiAgICAgIHtlcnJvcn1cbiAgICA8L2Rpdj5cbiAgKTtcbn0pO1xuIl19 */"),
|
|
165
168
|
onClick: toggleSetPassword,
|
|
166
169
|
title: "Toggle password visibility",
|
|
167
170
|
"aria-controls": props.id,
|
package/src/Form/Input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Input.tsx"],"names":["inputStyle","theme","markInvalid","placeholderTextTransform","disabled","placeholderStyle","color","Input","placeholderColor","fontSize","textTransform","opacity","boxShadow","general","primaryColor","Select","borderColor","background","backgroundColorDisabled","backgroundColor","border","borderRadius","dangerColor","caretColor","fontWeight","height","lineHeight","outline","padding","width","INPUT_CLASSNAME","INPUT_GROUP","filterInputProps","props","centerInputAction","position","right","top","transform","React","forwardRef","ref","type","label","error","helperText","wrapperCSS","className","togglePassword","setTogglePassword","hasError","isPasswordInput","toggledPasswordType","toggleSetPassword","prevState","marginBottom","id","required","cursor","marginTop"],"mappings":";;;;;;;;;;;;;AAoBA;;;;;;;;AAEA;;AAIA;;AACA;;AACA;;;;;;;;;;;;AAWO,IAAMA,UAAoF,GAAG,SAAvFA,UAAuF,CAClGC,KADkG,QAG/F;AAAA,8BADFC,WACE;AAAA,MADFA,WACE,iCADY,KACZ;AAAA,mCADmBC,wBACnB;AAAA,MADmBA,wBACnB,sCAD8C,MAC9C;AAAA,2BADsDC,QACtD;AAAA,MADsDA,QACtD,8BADiE,KACjE;AACH,MAAMC,gBAAgB,GAAG;AACvBC,IAAAA,KAAK,EAAEL,KAAK,CAACM,KAAN,CAAYC,gBADI;AAEvBC,IAAAA,QAAQ,EAAE,MAFa;AAGvBC,IAAAA,aAAa,EAAEP;AAHQ,GAAzB;AAMA,SAAO;AACL,2DACKE,gBADL;AAEEM,MAAAA,OAAO,EAAE;AAFX,MADK;AAKL,kDACKN,gBADL,CALK;AAQL,sDACKA,gBADL,CARK;AAWL,eAAW;AACTO,MAAAA,SAAS,sBAAeX,KAAK,CAACY,OAAN,CAAcC,YAA7B;AADA,KAXN;AAcL,6BAAyB,CAACZ,WAAD,GACrB;AACEU,MAAAA,SAAS,sBAAeX,KAAK,CAACc,MAAN,CAAaC,WAA5B;AADX,KADqB,GAIrB,EAlBC;AAmBLC,IAAAA,UAAU,EAAEb,QAAQ,GAAGH,KAAK,CAACM,KAAN,CAAYW,uBAAf,GAAyCjB,KAAK,CAACM,KAAN,CAAYY,eAnBpE;AAoBLC,IAAAA,MAAM,EAAE,MApBH;AAqBLC,IAAAA,YAAY,EAAE,MArBT;AAsBLT,IAAAA,SAAS,EAAEV,WAAW,uBAAgBD,KAAK,CAACY,OAAN,CAAcS,WAA9B,wBAA2DrB,KAAK,CAACc,MAAN,CAAaC,WAAxE,CAtBjB;AAuBLO,IAAAA,UAAU,EAAEtB,KAAK,CAACY,OAAN,CAAcC,YAvBrB;AAwBLR,IAAAA,KAAK,EAAEL,KAAK,CAACY,OAAN,CAAcP,KAxBhB;AAyBLkB,IAAAA,UAAU,EAAE,GAzBP;AA0BLC,IAAAA,MAAM,EAAE,MA1BH;AA2BLC,IAAAA,UAAU,EAAE,MA3BP;AA4BLC,IAAAA,OAAO,EAAE,MA5BJ;AA6BLC,IAAAA,OAAO,EAAE,QA7BJ;AA8BLC,IAAAA,KAAK,EAAE;AA9BF,GAAP;AAgCD,CA1CM;;;AA4CA,IAAMC,eAAe,GAAG,WAAxB;;AACA,IAAMC,WAAW,GAAG,aAApB;;;AAEP,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,KAAD;AAAA,SAAuB,uBAAYA,KAAZ,EAAmB,CAAC,aAAD,EAAgB,0BAAhB,CAAnB,CAAvB;AAAA,CAAzB;;AAEA,IAAMC,iBAA4B,GAAG;AACnCC,EAAAA,QAAQ,EAAE,UADyB;AAEnCC,EAAAA,KAAK,EAAE,MAF4B;AAGnCC,EAAAA,GAAG,EAAE,KAH8B;AAInCC,EAAAA,SAAS,EAAE;AAJwB,CAArC;;AAOO,IAAM/B,KAA6C,gBAAGgC,mBAAMC,UAAN,CAG3D,iBAA8EC,GAA9E,EAAsF;AAAA,MAApFC,IAAoF,SAApFA,IAAoF;AAAA,MAA9EC,KAA8E,SAA9EA,KAA8E;AAAA,MAAvEC,KAAuE,SAAvEA,KAAuE;AAAA,MAAhEC,UAAgE,SAAhEA,UAAgE;AAAA,+BAApDC,UAAoD;AAAA,MAApDA,UAAoD,iCAAvC,EAAuC;AAAA,8BAAnCC,SAAmC;AAAA,MAAnCA,SAAmC,gCAAvB,EAAuB;AAAA,MAAhBd,KAAgB;;AACtF,kBAA4C,sBAAkB,KAAlB,CAA5C;AAAA;AAAA,MAAOe,cAAP;AAAA,MAAuBC,iBAAvB;;AAEA,MAAMC,QAAQ,GAAG,CAAC,CAACN,KAAnB;AACA,MAAMO,eAAe,GAAGT,IAAI,KAAK,UAAjC;AACA,MAAMU,mBAAmB,GAAGJ,cAAc,GAAG,MAAH,GAAY,UAAtD;;AAEA,MAAMK,iBAAiB,GAAG,SAApBA,iBAAoB;AAAA,WAAMJ,iBAAiB,CAAC,UAAAK,SAAS;AAAA,aAAI,CAACA,SAAL;AAAA,KAAV,CAAvB;AAAA,GAA1B;;AAEA,MAAMrD,KAAK,GAAG,sBAAd;AAEA,SACE;AACE,IAAA,SAAS,EAAE8B,WADb;AAEE,IAAA,GAAG,EAAE,aAAC9B,KAAD;AAAA;AACHsD,QAAAA,YAAY,EAAEL,QAAQ,GAAG,KAAH,GAAW,MAD9B;AAEHrB,QAAAA,KAAK,EAAE,MAFJ;AAGH,gCAAwB;AACtBvB,UAAAA,KAAK,EAAEL,KAAK,CAACY,OAAN,CAAcC;AADC;AAHrB,SAMAgC,UANA;AAAA;AAFP,KAWGH,KAAK,IACJ,gBAAC,sBAAD;AAAY,IAAA,OAAO,EAAEV,KAAK,CAACuB,EAA3B;AAA+B,IAAA,UAAU,EAAEvB,KAAK,CAACwB,QAAjD;AAA2D,IAAA,WAAW,EAAExB,KAAK,CAAC/B;AAA9E,KACGyC,KADH,CAZJ,EAiBE;AAAK,IAAA,GAAG,+BAAE;AAACY,MAAAA,YAAY,EAAEL,QAAQ,IAAI,KAA3B;AAAkCf,MAAAA,QAAQ,EAAE;AAA5C,KAAF;AAAR,KACE;AACE,IAAA,SAAS,EAAEL,eADb;AAEE,IAAA,GAAG,EAAE,aAAC7B,KAAD;AAAA,aAAkBD,UAAU,CAACC,KAAD,EAAQgC,KAAR,EAAeiB,QAAf,CAA5B;AAAA,KAFP;AAGE,IAAA,GAAG,EAAET,GAHP;AAIE,IAAA,IAAI,EAAEU,eAAe,GAAGC,mBAAH,GAAyBV,IAJhD;AAKE,qBAAeT,KAAK,CAACwB;AALvB,KAMMzB,gBAAgB,CAACC,KAAD,CANtB,EADF,EAUGiB,QAAQ,IAAI,CAACC,eAAb,IACC,gBAAC,eAAD;AAAW,IAAA,GAAG,EAAEjB,iBAAhB;AAAmC,IAAA,KAAK,EAAE,EAA1C;AAA8C,IAAA,MAAM,EAAE,EAAtD;AAA0D,mBAAY;AAAtE,IAXJ,EAcGiB,eAAe,IACd;AACE,IAAA,IAAI,EAAC,QADP;AAEE,qBAAe,CAACH,cAAD,GAAkB,kBAAlB,GAAuC,kBAFxD;AAGE,IAAA,GAAG,+DAAMd,iBAAN;AAAyBjB,MAAAA,UAAU,EAAE,aAArC;AAAoDG,MAAAA,MAAM,EAAE,MAA5D;AAAoEsC,MAAAA,MAAM,EAAE,SAA5E;AAAuF9B,MAAAA,OAAO,EAAE;AAAhG,q9OAHL;AAIE,IAAA,OAAO,EAAEyB,iBAJX;AAKE,IAAA,KAAK,EAAC,4BALR;AAME,qBAAepB,KAAK,CAACuB,EANvB;AAOE,qBAAeR;AAPjB,KASGA,cAAc,GAAG,gBAAC,cAAD,OAAH,GAAkB,gBAAC,cAAD,OATnC,CAfJ,CAjBF,EA8CG,CAACE,QAAD,IAAaL,UAAb,IACC;AACE,IAAA,GAAG,EAAE,aAAC5C,KAAD;AAAA,aAAmB;AACtBQ,QAAAA,QAAQ,EAAE,MADY;AAEtBe,QAAAA,UAAU,EAAE,GAFU;AAGtBlB,QAAAA,KAAK,EAAEL,KAAK,CAACM,KAAN,CAAYC,gBAHG;AAItBmD,QAAAA,SAAS,EAAE;AAJW,OAAnB;AAAA;AADP,KAQGd,UARH,CA/CJ,EA2DGD,KA3DH,CADF;AA+DD,CA7E4D,CAAtD","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx, useTheme} from '@emotion/react';\nimport type {Property} from 'csstype';\nimport React, {ReactElement, useState} from 'react';\n\nimport type {Theme} from '../Layout';\nimport type {TextProps} from '../Text';\nimport {filterProps} from '../util';\nimport {ErrorIcon, HideIcon, ShowIcon} from '../Icon';\nimport InputLabel from './InputLabel';\n\nexport interface InputProps<T = HTMLInputElement> extends TextProps<T> {\n label?: string;\n error?: ReactElement;\n markInvalid?: boolean;\n helperText?: string;\n placeholderTextTransform?: Property.TextTransform;\n wrapperCSS?: CSSObject;\n}\n\nexport const inputStyle: <T>(theme: Theme, props: InputProps<T>, hasError?: boolean) => CSSObject = (\n theme,\n {markInvalid = false, placeholderTextTransform = 'none', disabled = false},\n) => {\n const placeholderStyle = {\n color: theme.Input.placeholderColor,\n fontSize: '16px',\n textTransform: placeholderTextTransform,\n };\n\n return {\n '&::-moz-placeholder': {\n ...placeholderStyle,\n opacity: 1,\n },\n '&::-ms-input-placeholder': {\n ...placeholderStyle,\n },\n '&::-webkit-input-placeholder': {\n ...placeholderStyle,\n },\n '&:focus': {\n boxShadow: `0 0 0 1px ${theme.general.primaryColor}`,\n },\n '&:invalid:not(:focus)': !markInvalid\n ? {\n boxShadow: `0 0 0 1px ${theme.Select.borderColor}`,\n }\n : {},\n background: disabled ? theme.Input.backgroundColorDisabled : theme.Input.backgroundColor,\n border: 'none',\n borderRadius: '12px',\n boxShadow: markInvalid ? `0 0 0 1px ${theme.general.dangerColor}` : `0 0 0 1px ${theme.Select.borderColor}`,\n caretColor: theme.general.primaryColor,\n color: theme.general.color,\n fontWeight: 300,\n height: '48px',\n lineHeight: '24px',\n outline: 'none',\n padding: '0 16px',\n width: '100%',\n };\n};\n\nexport const INPUT_CLASSNAME = 'wireinput';\nexport const INPUT_GROUP = 'input-group';\n\nconst filterInputProps = (props: InputProps) => filterProps(props, ['markInvalid', 'placeholderTextTransform']);\n\nconst centerInputAction: CSSObject = {\n position: 'absolute',\n right: '16px',\n top: '50%',\n transform: 'translateY(-50%)',\n};\n\nexport const Input: React.FC<InputProps<HTMLInputElement>> = React.forwardRef<\n HTMLInputElement,\n InputProps<HTMLInputElement>\n>(({type, label, error, helperText, wrapperCSS = {}, className = '', ...props}, ref) => {\n const [togglePassword, setTogglePassword] = useState<boolean>(false);\n\n const hasError = !!error;\n const isPasswordInput = type === 'password';\n const toggledPasswordType = togglePassword ? 'text' : 'password';\n\n const toggleSetPassword = () => setTogglePassword(prevState => !prevState);\n\n const theme = useTheme();\n\n return (\n <div\n className={INPUT_GROUP}\n css={(theme: Theme) => ({\n marginBottom: hasError ? '2px' : '20px',\n width: '100%',\n '&:focus-within label': {\n color: theme.general.primaryColor,\n },\n ...wrapperCSS,\n })}\n >\n {label && (\n <InputLabel htmlFor={props.id} isRequired={props.required} markInvalid={props.markInvalid}>\n {label}\n </InputLabel>\n )}\n\n <div css={{marginBottom: hasError && '8px', position: 'relative'}}>\n <input\n className={INPUT_CLASSNAME}\n css={(theme: Theme) => inputStyle(theme, props, hasError)}\n ref={ref}\n type={isPasswordInput ? toggledPasswordType : type}\n aria-required={props.required}\n {...filterInputProps(props)}\n />\n\n {hasError && !isPasswordInput && (\n <ErrorIcon css={centerInputAction} width={16} height={16} aria-hidden=\"true\" />\n )}\n\n {isPasswordInput && (\n <button\n type=\"button\"\n data-uie-name={!togglePassword ? 'do-show-password' : 'do-hide-password'}\n css={{...centerInputAction, background: 'transparent', border: 'none', cursor: 'pointer', padding: 0}}\n onClick={toggleSetPassword}\n title=\"Toggle password visibility\"\n aria-controls={props.id}\n aria-expanded={togglePassword}\n >\n {togglePassword ? <HideIcon /> : <ShowIcon />}\n </button>\n )}\n </div>\n\n {!hasError && helperText && (\n <p\n css={(theme: Theme) => ({\n fontSize: '12px',\n fontWeight: 400,\n color: theme.Input.placeholderColor,\n marginTop: 8,\n })}\n >\n {helperText}\n </p>\n )}\n\n {error}\n </div>\n );\n});\n"],"file":"Input.js"}
|
|
1
|
+
{"version":3,"sources":["Input.tsx"],"names":["inputStyle","theme","markInvalid","placeholderTextTransform","disabled","placeholderStyle","color","Input","placeholderColor","fontSize","textTransform","opacity","boxShadow","borderHover","general","primaryColor","Select","borderColor","background","backgroundColorDisabled","backgroundColor","border","borderRadius","dangerColor","caretColor","fontWeight","height","lineHeight","outline","padding","width","INPUT_CLASSNAME","INPUT_GROUP","filterInputProps","props","centerInputAction","position","right","top","transform","React","forwardRef","ref","type","label","error","helperText","wrapperCSS","className","togglePassword","setTogglePassword","hasError","isPasswordInput","toggledPasswordType","toggleSetPassword","prevState","marginBottom","id","required","cursor","marginTop"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx, useTheme} from '@emotion/react';\nimport type {Property} from 'csstype';\nimport React, {ReactElement, useState} from 'react';\n\nimport type {Theme} from '../Layout';\nimport type {TextProps} from '../Text';\nimport {filterProps} from '../util';\nimport {ErrorIcon, HideIcon, ShowIcon} from '../Icon';\nimport InputLabel from './InputLabel';\n\nexport interface InputProps<T = HTMLInputElement> extends TextProps<T> {\n label?: string;\n error?: ReactElement;\n markInvalid?: boolean;\n helperText?: string;\n placeholderTextTransform?: Property.TextTransform;\n wrapperCSS?: CSSObject;\n}\n\nexport const inputStyle: <T>(theme: Theme, props: InputProps<T>, hasError?: boolean) => CSSObject = (\n theme,\n {markInvalid = false, placeholderTextTransform = 'none', disabled = false},\n) => {\n const placeholderStyle = {\n color: theme.Input.placeholderColor,\n fontSize: '16px',\n textTransform: placeholderTextTransform,\n };\n\n return {\n '&::-moz-placeholder': {\n ...placeholderStyle,\n opacity: 1,\n },\n '&::-ms-input-placeholder': {\n ...placeholderStyle,\n },\n '&::-webkit-input-placeholder': {\n ...placeholderStyle,\n },\n '&:hover': {\n boxShadow: !disabled && `0 0 0 1px ${theme.Input.borderHover}`,\n },\n '&:focus-visible, &:focus, &:active': {\n boxShadow: `0 0 0 1px ${theme.general.primaryColor}`,\n },\n '&:invalid:not(:focus, :hover)': !markInvalid\n ? {\n boxShadow: `0 0 0 1px ${theme.Select.borderColor}`,\n }\n : {},\n background: disabled ? theme.Input.backgroundColorDisabled : theme.Input.backgroundColor,\n border: 'none',\n borderRadius: '12px',\n boxShadow: markInvalid ? `0 0 0 1px ${theme.general.dangerColor}` : `0 0 0 1px ${theme.Select.borderColor}`,\n caretColor: theme.general.primaryColor,\n color: theme.general.color,\n fontWeight: 300,\n height: '48px',\n lineHeight: '24px',\n outline: 'none',\n padding: '0 16px',\n width: '100%',\n };\n};\n\nexport const INPUT_CLASSNAME = 'wireinput';\nexport const INPUT_GROUP = 'input-group';\n\nconst filterInputProps = (props: InputProps) => filterProps(props, ['markInvalid', 'placeholderTextTransform']);\n\nconst centerInputAction: CSSObject = {\n position: 'absolute',\n right: '16px',\n top: '50%',\n transform: 'translateY(-50%)',\n};\n\nexport const Input: React.FC<InputProps<HTMLInputElement>> = React.forwardRef<\n HTMLInputElement,\n InputProps<HTMLInputElement>\n>(({type, label, error, helperText, wrapperCSS = {}, className = '', ...props}, ref) => {\n const [togglePassword, setTogglePassword] = useState<boolean>(false);\n\n const hasError = !!error;\n const isPasswordInput = type === 'password';\n const toggledPasswordType = togglePassword ? 'text' : 'password';\n\n const toggleSetPassword = () => setTogglePassword(prevState => !prevState);\n\n const theme = useTheme();\n\n return (\n <div\n className={INPUT_GROUP}\n css={(theme: Theme) => ({\n marginBottom: hasError ? '2px' : '20px',\n width: '100%',\n '&:focus-within label': {\n color: theme.general.primaryColor,\n },\n ...wrapperCSS,\n })}\n >\n {label && (\n <InputLabel htmlFor={props.id} isRequired={props.required} markInvalid={props.markInvalid}>\n {label}\n </InputLabel>\n )}\n\n <div css={{marginBottom: hasError && '8px', position: 'relative'}}>\n <input\n className={INPUT_CLASSNAME}\n css={(theme: Theme) => inputStyle(theme, props, hasError)}\n ref={ref}\n type={isPasswordInput ? toggledPasswordType : type}\n aria-required={props.required}\n {...filterInputProps(props)}\n />\n\n {hasError && !isPasswordInput && (\n <ErrorIcon css={centerInputAction} width={16} height={16} aria-hidden=\"true\" />\n )}\n\n {isPasswordInput && (\n <button\n type=\"button\"\n data-uie-name={!togglePassword ? 'do-show-password' : 'do-hide-password'}\n css={{...centerInputAction, background: 'transparent', border: 'none', cursor: 'pointer', padding: 0}}\n onClick={toggleSetPassword}\n title=\"Toggle password visibility\"\n aria-controls={props.id}\n aria-expanded={togglePassword}\n >\n {togglePassword ? <HideIcon /> : <ShowIcon />}\n </button>\n )}\n </div>\n\n {!hasError && helperText && (\n <p\n css={(theme: Theme) => ({\n fontSize: '12px',\n fontWeight: 400,\n color: theme.Input.placeholderColor,\n marginTop: 8,\n })}\n >\n {helperText}\n </p>\n )}\n\n {error}\n </div>\n );\n});\n"],"file":"Input.js"}
|
package/src/Form/Select.js
CHANGED
|
@@ -69,12 +69,14 @@ var Select = function Select(_ref) {
|
|
|
69
69
|
id: id,
|
|
70
70
|
styles: (0, _SelectStyles.customStyles)(theme, markInvalid),
|
|
71
71
|
components: {
|
|
72
|
+
SelectContainer: _SelectComponents.SelectContainer,
|
|
72
73
|
DropdownIndicator: _SelectComponents.DropdownIndicator,
|
|
73
74
|
Option: (0, _SelectComponents.CustomOption)(dataUieName),
|
|
74
75
|
Menu: (0, _SelectComponents.Menu)(dataUieName),
|
|
75
76
|
ValueContainer: _SelectComponents.ValueContainer,
|
|
76
77
|
IndicatorsContainer: _SelectComponents.IndicatorsContainer
|
|
77
78
|
},
|
|
79
|
+
tabIndex: -1,
|
|
78
80
|
isDisabled: disabled,
|
|
79
81
|
hideSelectedOptions: false,
|
|
80
82
|
isSearchable: false,
|
package/src/Form/Select.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Select.tsx"],"names":["Select","id","label","error","helperText","disabled","dataUieName","options","isMulti","wrapperCSS","markInvalid","required","props","theme","hasError","marginBottom","width","color","general","primaryColor","DropdownIndicator","Option","Menu","ValueContainer","IndicatorsContainer","fontSize","fontWeight","Input","labelColor","marginTop"],"mappings":";;;;;;;;;;;;;;;AAoBA;;AAEA;;AACA;;AAIA;;AACA;;
|
|
1
|
+
{"version":3,"sources":["Select.tsx"],"names":["Select","id","label","error","helperText","disabled","dataUieName","options","isMulti","wrapperCSS","markInvalid","required","props","theme","hasError","marginBottom","width","color","general","primaryColor","SelectContainer","DropdownIndicator","Option","Menu","ValueContainer","IndicatorsContainer","fontSize","fontWeight","Input","labelColor","marginTop"],"mappings":";;;;;;;;;;;;;;;AAoBA;;AAEA;;AACA;;AAIA;;AACA;;AASA;;;;;;;;AAuBO,IAAMA,MAAM,GAAG,SAATA,MAAS,OAaM;AAAA,MAZ1BC,EAY0B,QAZ1BA,EAY0B;AAAA,MAX1BC,KAW0B,QAX1BA,KAW0B;AAAA,MAV1BC,KAU0B,QAV1BA,KAU0B;AAAA,MAT1BC,UAS0B,QAT1BA,UAS0B;AAAA,2BAR1BC,QAQ0B;AAAA,MAR1BA,QAQ0B,8BARf,KAQe;AAAA,MAP1BC,WAO0B,QAP1BA,WAO0B;AAAA,MAN1BC,OAM0B,QAN1BA,OAM0B;AAAA,MAL1BC,OAK0B,QAL1BA,OAK0B;AAAA,6BAJ1BC,UAI0B;AAAA,MAJ1BA,UAI0B,gCAJb,EAIa;AAAA,8BAH1BC,WAG0B;AAAA,MAH1BA,WAG0B,iCAHZ,KAGY;AAAA,2BAF1BC,QAE0B;AAAA,MAF1BA,QAE0B,8BAFf,KAEe;AAAA,MADvBC,KACuB;AAC1B,MAAMC,KAAK,GAAG,sBAAd;AACA,MAAMC,QAAQ,GAAG,CAAC,CAACX,KAAnB;AAEA,SACE;AACE,IAAA,GAAG,EAAE,aAACU,KAAD;AAAA;AACHE,QAAAA,YAAY,EAAEL,WAAW,GAAG,KAAH,GAAW,MADjC;AAEHM,QAAAA,KAAK,EAAE,MAFJ;AAGH,gCAAwB;AACtBC,UAAAA,KAAK,EAAEJ,KAAK,CAACK,OAAN,CAAcC;AADC;AAHrB,SAMAV,UANA;AAAA,KADP;AASE,qBAAeH;AATjB,KAWGJ,KAAK,IACJ,gBAAC,sBAAD;AAAY,IAAA,OAAO,EAAED,EAArB;AAAyB,IAAA,WAAW,EAAES,WAAtC;AAAmD,IAAA,UAAU,EAAEC;AAA/D,KACGT,KADH,CAZJ,EAiBE,gBAAC,uBAAD;AACE,IAAA,EAAE,EAAED,EADN;AAEE,IAAA,MAAM,EAAE,gCAAaY,KAAb,EAA6BH,WAA7B,CAFV;AAGE,IAAA,UAAU,EAAE;AACVU,MAAAA,eAAe,EAAfA,iCADU;AAEVC,MAAAA,iBAAiB,EAAjBA,mCAFU;AAGVC,MAAAA,MAAM,EAAE,oCAAahB,WAAb,CAHE;AAIViB,MAAAA,IAAI,EAAE,4BAAKjB,WAAL,CAJI;AAKVkB,MAAAA,cAAc,EAAdA,gCALU;AAMVC,MAAAA,mBAAmB,EAAnBA;AANU,KAHd;AAWE,IAAA,QAAQ,EAAE,CAAC,CAXb;AAYE,IAAA,UAAU,EAAEpB,QAZd;AAaE,IAAA,mBAAmB,EAAE,KAbvB;AAcE,IAAA,YAAY,EAAE,KAdhB;AAeE,IAAA,WAAW,EAAE,KAff;AAgBE,IAAA,iBAAiB,EAAE,CAACG,OAhBtB;AAiBE,IAAA,OAAO,EAAEA,OAjBX;AAkBE,IAAA,OAAO,EAAED;AAlBX,KAmBMK,KAnBN,EAjBF,EAuCG,CAACE,QAAD,IAAaV,UAAb,IACC;AAAG,IAAA,GAAG,EAAE,aAACS,KAAD;AAAA,aAAmB;AAACa,QAAAA,QAAQ,EAAE,MAAX;AAAmBC,QAAAA,UAAU,EAAE,GAA/B;AAAoCV,QAAAA,KAAK,EAAEJ,KAAK,CAACe,KAAN,CAAYC,UAAvD;AAAmEC,QAAAA,SAAS,EAAE;AAA9E,OAAnB;AAAA;AAAR,KACG1B,UADH,CAxCJ,EA6CGD,KA7CH,CADF;AAiDD,CAlEM","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport {useTheme} from '@emotion/react';\nimport React, {ReactElement} from 'react';\nimport ReactSelect from 'react-select';\nimport {StylesConfig} from 'react-select/dist/declarations/src/styles';\nimport {StateManagerProps} from 'react-select/dist/declarations/src/useStateManager';\n\nimport {customStyles} from './SelectStyles';\nimport {\n CustomOption,\n DropdownIndicator,\n IndicatorsContainer,\n Menu,\n SelectContainer,\n ValueContainer,\n} from './SelectComponents';\nimport type {Theme} from '../Layout';\nimport InputLabel from './InputLabel';\n\nexport type Option = {\n value: string | number;\n label: string;\n description?: string;\n isDisabled?: boolean;\n};\n\ninterface SelectProps<IsMulti extends boolean> extends StateManagerProps<Option, IsMulti> {\n id: string;\n disabled?: boolean;\n dataUieName: string;\n options: Option[];\n wrapperCSS?: CSSObject;\n label?: string;\n helperText?: string;\n error?: ReactElement;\n markInvalid?: boolean;\n required?: boolean;\n isMulti?: IsMulti;\n}\n\nexport const Select = <IsMulti extends boolean = false>({\n id,\n label,\n error,\n helperText,\n disabled = false,\n dataUieName,\n options,\n isMulti,\n wrapperCSS = {},\n markInvalid = false,\n required = false,\n ...props\n}: SelectProps<IsMulti>) => {\n const theme = useTheme();\n const hasError = !!error;\n\n return (\n <div\n css={(theme: Theme) => ({\n marginBottom: markInvalid ? '2px' : '20px',\n width: '100%',\n '&:focus-within label': {\n color: theme.general.primaryColor,\n },\n ...wrapperCSS,\n })}\n data-uie-name={dataUieName}\n >\n {label && (\n <InputLabel htmlFor={id} markInvalid={markInvalid} isRequired={required}>\n {label}\n </InputLabel>\n )}\n\n <ReactSelect\n id={id}\n styles={customStyles(theme as Theme, markInvalid) as StylesConfig}\n components={{\n SelectContainer,\n DropdownIndicator,\n Option: CustomOption(dataUieName),\n Menu: Menu(dataUieName),\n ValueContainer,\n IndicatorsContainer,\n }}\n tabIndex={-1}\n isDisabled={disabled}\n hideSelectedOptions={false}\n isSearchable={false}\n isClearable={false}\n closeMenuOnSelect={!isMulti}\n isMulti={isMulti}\n options={options}\n {...props}\n />\n\n {!hasError && helperText && (\n <p css={(theme: Theme) => ({fontSize: '12px', fontWeight: 400, color: theme.Input.labelColor, marginTop: 8})}>\n {helperText}\n </p>\n )}\n\n {error}\n </div>\n );\n};\n"],"file":"Select.js"}
|
|
@@ -4,6 +4,7 @@ import { OptionProps, ValueContainerProps } from 'react-select';
|
|
|
4
4
|
import { MenuProps } from 'react-select/dist/declarations/src/components/Menu';
|
|
5
5
|
import { IndicatorsContainerProps } from 'react-select/dist/declarations/src/components/containers';
|
|
6
6
|
import { Option } from './Select';
|
|
7
|
+
export declare const SelectContainer: (props: any) => jsx.JSX.Element;
|
|
7
8
|
export declare const DropdownIndicator: (props: any) => jsx.JSX.Element;
|
|
8
9
|
export declare const CustomOption: (dataUieName: string) => (props: OptionProps<Option>) => jsx.JSX.Element;
|
|
9
10
|
export declare const Menu: (dataUieName: string) => (props: MenuProps) => jsx.JSX.Element;
|