@wireapp/react-ui-kit 8.11.2 → 8.12.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/CHANGELOG.md +30 -0
- package/package.json +2 -2
- package/src/Form/Checkbox.d.ts +1 -1
- package/src/Form/Checkbox.js +4 -16
- package/src/Form/Checkbox.js.map +1 -1
- package/src/Form/Input.js +26 -27
- package/src/Form/Input.js.map +1 -1
- package/src/Form/Select.d.ts +6 -5
- package/src/Form/Select.js +5 -3
- package/src/Form/Select.js.map +1 -1
- package/src/Form/SelectStyles.d.ts +2 -0
- package/src/Form/SelectStyles.js +36 -9
- package/src/Form/SelectStyles.js.map +1 -1
- package/src/Layout/MatchMedia.js +11 -7
- package/src/Layout/MatchMedia.js.map +1 -1
- package/src/Text/Link.d.ts +6 -1
- package/src/Text/Link.js +34 -21
- package/src/Text/Link.js.map +1 -1
- package/src/Text/Text.js +1 -1
- package/src/Text/Text.js.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,36 @@
|
|
|
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.12.0](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@8.11.4...@wireapp/react-ui-kit@8.12.0) (2022-08-10)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* add a link variant for use in the webapp ([#4354](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/issues/4354)) ([02e1e5f](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/commit/02e1e5f87c268d783f529ef53df2cf2903c3c974))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [8.11.4](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@8.11.3...@wireapp/react-ui-kit@8.11.4) (2022-07-28)
|
|
18
|
+
|
|
19
|
+
**Note:** Version bump only for package @wireapp/react-ui-kit
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
## [8.11.3](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@8.11.2...@wireapp/react-ui-kit@8.11.3) (2022-07-27)
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
### Bug Fixes
|
|
29
|
+
|
|
30
|
+
* **react-ui-kit:** fix missmatching media queries ([#4350](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/issues/4350)) ([2fde6af](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/commit/2fde6af815f92aa14ae434f0bb6ff0734c79fb7d))
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
6
36
|
## [8.11.2](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@8.11.1...@wireapp/react-ui-kit@8.11.2) (2022-07-26)
|
|
7
37
|
|
|
8
38
|
|
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.
|
|
74
|
-
"gitHead": "
|
|
73
|
+
"version": "8.12.0",
|
|
74
|
+
"gitHead": "3f53a6099079178095dbb34c0ac4b799db688fa8"
|
|
75
75
|
}
|
package/src/Form/Checkbox.d.ts
CHANGED
|
@@ -14,5 +14,5 @@ interface CheckboxProps<T = HTMLInputElement> extends InputProps<T> {
|
|
|
14
14
|
}
|
|
15
15
|
export declare const Checkbox: React.FC<CheckboxProps<HTMLInputElement>>;
|
|
16
16
|
export declare type CheckboxLabelProps<T = HTMLSpanElement> = TextProps<T>;
|
|
17
|
-
export declare const CheckboxLabel: ({
|
|
17
|
+
export declare const CheckboxLabel: ({ ...props }: CheckboxLabelProps) => jsx.JSX.Element;
|
|
18
18
|
export {};
|
package/src/Form/Checkbox.js
CHANGED
|
@@ -17,16 +17,13 @@ var _react = require("@emotion/react");
|
|
|
17
17
|
|
|
18
18
|
var _react2 = _interopRequireDefault(require("react"));
|
|
19
19
|
|
|
20
|
-
var _Identity = require("../Identity");
|
|
21
|
-
|
|
22
20
|
var _Text = require("../Text");
|
|
23
21
|
|
|
24
22
|
var _util = require("../util");
|
|
25
23
|
|
|
26
24
|
var _Input = require("./Input");
|
|
27
25
|
|
|
28
|
-
var _excluded = ["id", "children", "style", "disabled", "wrapperCSS"]
|
|
29
|
-
_excluded2 = ["color"];
|
|
26
|
+
var _excluded = ["id", "children", "style", "disabled", "wrapperCSS"];
|
|
30
27
|
|
|
31
28
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
32
29
|
|
|
@@ -73,7 +70,7 @@ var StyledLabel = function StyledLabel(props) {
|
|
|
73
70
|
lineHeight: 1.4,
|
|
74
71
|
margin: '0 8px 0 0px',
|
|
75
72
|
color: theme.general.color
|
|
76
|
-
})), (0, _defineProperty2["default"])(_objectSpread3, "
|
|
73
|
+
})), (0, _defineProperty2["default"])(_objectSpread3, "position", 'relative'), (0, _defineProperty2["default"])(_objectSpread3, "margin", '0 0 0 -16px'), (0, _defineProperty2["default"])(_objectSpread3, "width", aligncenter ? 'auto' : '100%'), (0, _defineProperty2["default"])(_objectSpread3, "lineHeight", 1.4), (0, _defineProperty2["default"])(_objectSpread3, "display", 'flex'), (0, _defineProperty2["default"])(_objectSpread3, "opacity", disabled ? 0.56 : 1), (0, _defineProperty2["default"])(_objectSpread3, "cursor", disabled ? 'not-allowed' : 'pointer'), _objectSpread3));
|
|
77
74
|
}
|
|
78
75
|
}, filterStyledLabelProps(props)), props.children, (0, _react.jsx)("svg", {
|
|
79
76
|
width: "15",
|
|
@@ -137,19 +134,10 @@ var Checkbox = /*#__PURE__*/_react2["default"].forwardRef(function (_ref2, ref)
|
|
|
137
134
|
exports.Checkbox = Checkbox;
|
|
138
135
|
|
|
139
136
|
var CheckboxLabel = function CheckboxLabel(_ref3) {
|
|
140
|
-
var
|
|
141
|
-
color = _ref3$color === void 0 ? _Identity.COLOR.TEXT : _ref3$color,
|
|
142
|
-
props = (0, _objectWithoutProperties2["default"])(_ref3, _excluded2);
|
|
137
|
+
var props = (0, _extends2["default"])({}, _ref3);
|
|
143
138
|
return (0, _react.jsx)(_Text.Text, (0, _extends2["default"])({
|
|
144
139
|
css: function css(theme) {
|
|
145
|
-
return _objectSpread(
|
|
146
|
-
color: color
|
|
147
|
-
}, props))), {}, {
|
|
148
|
-
a: {
|
|
149
|
-
color: _Identity.COLOR.LINK,
|
|
150
|
-
textDecoration: 'none'
|
|
151
|
-
}
|
|
152
|
-
});
|
|
140
|
+
return _objectSpread({}, (0, _Text.textStyle)(theme, _objectSpread({}, props)));
|
|
153
141
|
}
|
|
154
142
|
}, props));
|
|
155
143
|
};
|
package/src/Form/Checkbox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Checkbox.tsx"],"names":["filterStyledLabelProps","props","StyledLabel","disabled","markInvalid","aligncenter","theme","INPUT_CLASSNAME","background","Checkbox","disablecheckedBgColor","general","primaryColor","borderColor","fill","backgroundColor","position","left","top","disableBgColor","border","invalidBorderColor","disableBorderColor","borderRadius","boxSizing","content","display","width","height","lineHeight","margin","color","children","filterCheckboxProps","React","forwardRef","ref","id","Math","random","toString","style","wrapperCSS","alignItems","justifyContent","outline","outlineOffset","marginBottom","opacity","cursor","CheckboxLabel"
|
|
1
|
+
{"version":3,"sources":["Checkbox.tsx"],"names":["filterStyledLabelProps","props","StyledLabel","disabled","markInvalid","aligncenter","theme","INPUT_CLASSNAME","background","Checkbox","disablecheckedBgColor","general","primaryColor","borderColor","fill","backgroundColor","position","left","top","disableBgColor","border","invalidBorderColor","disableBorderColor","borderRadius","boxSizing","content","display","width","height","lineHeight","margin","color","children","filterCheckboxProps","React","forwardRef","ref","id","Math","random","toString","style","wrapperCSS","alignItems","justifyContent","outline","outlineOffset","marginBottom","opacity","cursor","CheckboxLabel"],"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 {jsx} from '@emotion/react';\nimport React from 'react';\n\nimport {Theme} from '../Layout';\nimport {Text, TextProps, textStyle} from '../Text';\nimport {filterProps} from '../util';\nimport {INPUT_CLASSNAME, InputProps} from './Input';\n\nexport interface StyledLabelProps<T = HTMLLabelElement> extends React.HTMLProps<T> {\n disabled?: boolean;\n markInvalid?: boolean;\n aligncenter?: boolean;\n}\n\nconst filterStyledLabelProps = (props: StyledLabelProps) => filterProps(props, ['markInvalid']);\n\nconst StyledLabel = (props: StyledLabelProps) => {\n const {disabled, markInvalid, aligncenter = false} = props;\n return (\n <label\n css={(theme: Theme) => ({\n [`.${INPUT_CLASSNAME}:checked + &::before`]: {\n background: `${disabled ? theme.Checkbox.disablecheckedBgColor : theme.general.primaryColor}`,\n borderColor: theme.general.primaryColor,\n },\n [`.${INPUT_CLASSNAME}:checked + & > svg`]: {\n fill: theme.general.backgroundColor,\n },\n [`.${INPUT_CLASSNAME} + & > svg`]: {\n fill: 'none',\n position: 'absolute',\n left: '0.25rem',\n top: '0.25rem',\n },\n ...(!disabled && {\n [`.${INPUT_CLASSNAME}:hover + &::before`]: {\n borderColor: theme.general.primaryColor,\n },\n }),\n [`.${INPUT_CLASSNAME} + &::before`]: {\n background: disabled ? theme.Checkbox.disableBgColor : theme.Checkbox.background,\n ...(!disabled\n ? {\n border: markInvalid\n ? `1.5px solid ${theme.Checkbox.invalidBorderColor}`\n : `1.5px solid ${theme.Checkbox.border}`,\n }\n : {\n border: `1.5px solid ${theme.Checkbox.disableBorderColor}`,\n }),\n borderRadius: '3px',\n boxSizing: 'border-box',\n content: '\"\"',\n display: 'inline-block',\n width: '22px',\n height: '22px',\n lineHeight: 1.4,\n margin: '0 8px 0 0px',\n color: theme.general.color,\n },\n position: 'relative',\n margin: '0 0 0 -16px',\n width: aligncenter ? 'auto' : '100%',\n lineHeight: 1.4,\n display: 'flex',\n opacity: disabled ? 0.56 : 1,\n cursor: disabled ? 'not-allowed' : 'pointer',\n })}\n {...filterStyledLabelProps(props)}\n >\n {props.children}\n <svg width=\"15\" height=\"13\" viewBox=\"0 0 16 13\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.65685 12.0711L15.9842 1.62738L14.57 0.213167L5.65685 9.24264L1.41421 5L0 6.41421L5.65685 12.0711Z\" />\n </svg>\n </label>\n );\n};\n\ninterface CheckboxProps<T = HTMLInputElement> extends InputProps<T> {\n id?: string;\n aligncenter?: boolean;\n}\n\nconst filterCheckboxProps = (props: CheckboxProps) => filterProps(props, ['markInvalid']);\n\n// We use Math.random..., because some of apps doesn't migrated to newest version of React.\nexport const Checkbox: React.FC<CheckboxProps<HTMLInputElement>> = React.forwardRef<\n HTMLInputElement,\n CheckboxProps<HTMLInputElement>\n>(({id = Math.random().toString(), children, style, disabled, wrapperCSS = {}, ...props}, ref) => (\n <div\n css={(theme: Theme) => ({\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'flex-start',\n position: 'relative',\n left: '-0.3rem',\n [`.${INPUT_CLASSNAME}:focus-visible + label`]: {\n outline: `1px solid ${theme.general.primaryColor}`,\n outlineOffset: '0.4rem',\n },\n ...wrapperCSS,\n })}\n style={style}\n >\n <input\n type=\"checkbox\"\n id={id}\n style={{\n height: '22px',\n marginBottom: '0',\n opacity: 0,\n width: '22px',\n cursor: disabled ? 'not-allowed' : 'pointer',\n }}\n disabled={disabled}\n ref={ref}\n className={INPUT_CLASSNAME}\n {...filterCheckboxProps(props)}\n />\n\n <StyledLabel htmlFor={id} disabled={disabled} markInvalid={props.markInvalid} aligncenter={props.aligncenter}>\n {children}\n </StyledLabel>\n </div>\n));\n\nexport type CheckboxLabelProps<T = HTMLSpanElement> = TextProps<T>;\n\nexport const CheckboxLabel = ({...props}: CheckboxLabelProps) => (\n <Text\n css={(theme: Theme) => ({\n ...textStyle(theme, {\n ...props,\n }),\n })}\n {...props}\n />\n);\n"],"file":"Checkbox.js"}
|
package/src/Form/Input.js
CHANGED
|
@@ -21,8 +21,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
21
21
|
|
|
22
22
|
var _react2 = _interopRequireWildcard(require("react"));
|
|
23
23
|
|
|
24
|
-
var _Identity = require("../Identity");
|
|
25
|
-
|
|
26
24
|
var _util = require("../util");
|
|
27
25
|
|
|
28
26
|
var _Icon = require("../Icon");
|
|
@@ -58,16 +56,16 @@ var inputStyle = function inputStyle(theme, _ref) {
|
|
|
58
56
|
'&::-ms-input-placeholder': _objectSpread({}, placeholderStyle),
|
|
59
57
|
'&::-webkit-input-placeholder': _objectSpread({}, placeholderStyle),
|
|
60
58
|
'&:focus': {
|
|
61
|
-
boxShadow: "0 0 0 1px ".concat(
|
|
59
|
+
boxShadow: "0 0 0 1px ".concat(theme.general.primaryColor)
|
|
62
60
|
},
|
|
63
61
|
'&:invalid:not(:focus)': !markInvalid ? {
|
|
64
|
-
boxShadow: "0 0 0 1px ".concat(
|
|
62
|
+
boxShadow: "0 0 0 1px ".concat(theme.Select.borderColor)
|
|
65
63
|
} : {},
|
|
66
64
|
background: disabled ? theme.Input.backgroundColorDisabled : theme.Input.backgroundColor,
|
|
67
65
|
border: 'none',
|
|
68
|
-
borderRadius: '
|
|
69
|
-
boxShadow: markInvalid ? "0 0 0 1px ".concat(
|
|
70
|
-
caretColor:
|
|
66
|
+
borderRadius: '12px',
|
|
67
|
+
boxShadow: markInvalid ? "0 0 0 1px ".concat(theme.general.dangerColor) : "0 0 0 1px ".concat(theme.Select.borderColor),
|
|
68
|
+
caretColor: theme.general.primaryColor,
|
|
71
69
|
color: theme.general.color,
|
|
72
70
|
fontWeight: 300,
|
|
73
71
|
height: '48px',
|
|
@@ -121,15 +119,18 @@ var Input = /*#__PURE__*/_react2["default"].forwardRef(function (_ref2, ref) {
|
|
|
121
119
|
});
|
|
122
120
|
};
|
|
123
121
|
|
|
122
|
+
var theme = (0, _react.useTheme)();
|
|
124
123
|
return (0, _react.jsx)("div", {
|
|
125
124
|
className: INPUT_GROUP,
|
|
126
|
-
css:
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
125
|
+
css: function css(theme) {
|
|
126
|
+
return _objectSpread({
|
|
127
|
+
marginBottom: hasError ? '2px' : '20px',
|
|
128
|
+
width: '100%',
|
|
129
|
+
'&:focus-within label': {
|
|
130
|
+
color: theme.general.primaryColor
|
|
131
|
+
}
|
|
132
|
+
}, wrapperCSS);
|
|
133
|
+
}
|
|
133
134
|
}, label && (0, _react.jsx)(_InputLabel["default"], {
|
|
134
135
|
htmlFor: props.id,
|
|
135
136
|
isRequired: props.required,
|
|
@@ -138,7 +139,7 @@ var Input = /*#__PURE__*/_react2["default"].forwardRef(function (_ref2, ref) {
|
|
|
138
139
|
css: /*#__PURE__*/(0, _react.css)({
|
|
139
140
|
marginBottom: hasError && '8px',
|
|
140
141
|
position: 'relative'
|
|
141
|
-
}, process.env.NODE_ENV === "production" ? "" : ";label:Input;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
142
|
+
}, process.env.NODE_ENV === "production" ? "" : ";label:Input;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIklucHV0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUErSFciLCJmaWxlIjoiSW5wdXQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFdpcmVcbiAqIENvcHlyaWdodCAoQykgMjAxOCBXaXJlIFN3aXNzIEdtYkhcbiAqXG4gKiBUaGlzIHByb2dyYW0gaXMgZnJlZSBzb2Z0d2FyZTogeW91IGNhbiByZWRpc3RyaWJ1dGUgaXQgYW5kL29yIG1vZGlmeVxuICogaXQgdW5kZXIgdGhlIHRlcm1zIG9mIHRoZSBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBhcyBwdWJsaXNoZWQgYnlcbiAqIHRoZSBGcmVlIFNvZnR3YXJlIEZvdW5kYXRpb24sIGVpdGhlciB2ZXJzaW9uIDMgb2YgdGhlIExpY2Vuc2UsIG9yXG4gKiAoYXQgeW91ciBvcHRpb24pIGFueSBsYXRlciB2ZXJzaW9uLlxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBkaXN0cmlidXRlZCBpbiB0aGUgaG9wZSB0aGF0IGl0IHdpbGwgYmUgdXNlZnVsLFxuICogYnV0IFdJVEhPVVQgQU5ZIFdBUlJBTlRZOyB3aXRob3V0IGV2ZW4gdGhlIGltcGxpZWQgd2FycmFudHkgb2ZcbiAqIE1FUkNIQU5UQUJJTElUWSBvciBGSVRORVNTIEZPUiBBIFBBUlRJQ1VMQVIgUFVSUE9TRS4gU2VlIHRoZVxuICogR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2UgZm9yIG1vcmUgZGV0YWlscy5cbiAqXG4gKiBZb3Ugc2hvdWxkIGhhdmUgcmVjZWl2ZWQgYSBjb3B5IG9mIHRoZSBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZVxuICogYWxvbmcgd2l0aCB0aGlzIHByb2dyYW0uIElmIG5vdCwgc2VlIGh0dHA6Ly93d3cuZ251Lm9yZy9saWNlbnNlcy8uXG4gKlxuICovXG5cbi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHtDU1NPYmplY3QsIGpzeCwgdXNlVGhlbWV9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB0eXBlIHtQcm9wZXJ0eX0gZnJvbSAnY3NzdHlwZSc7XG5pbXBvcnQgUmVhY3QsIHtSZWFjdEVsZW1lbnQsIHVzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB0eXBlIHtUaGVtZX0gZnJvbSAnLi4vTGF5b3V0JztcbmltcG9ydCB0eXBlIHtUZXh0UHJvcHN9IGZyb20gJy4uL1RleHQnO1xuaW1wb3J0IHtmaWx0ZXJQcm9wc30gZnJvbSAnLi4vdXRpbCc7XG5pbXBvcnQge0Vycm9ySWNvbiwgSGlkZUljb24sIFNob3dJY29ufSBmcm9tICcuLi9JY29uJztcbmltcG9ydCBJbnB1dExhYmVsIGZyb20gJy4vSW5wdXRMYWJlbCc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgSW5wdXRQcm9wczxUID0gSFRNTElucHV0RWxlbWVudD4gZXh0ZW5kcyBUZXh0UHJvcHM8VD4ge1xuICBsYWJlbD86IHN0cmluZztcbiAgZXJyb3I/OiBSZWFjdEVsZW1lbnQ7XG4gIG1hcmtJbnZhbGlkPzogYm9vbGVhbjtcbiAgaGVscGVyVGV4dD86IHN0cmluZztcbiAgcGxhY2Vob2xkZXJUZXh0VHJhbnNmb3JtPzogUHJvcGVydHkuVGV4dFRyYW5zZm9ybTtcbiAgd3JhcHBlckNTUz86IENTU09iamVjdDtcbn1cblxuZXhwb3J0IGNvbnN0IGlucHV0U3R5bGU6IDxUPih0aGVtZTogVGhlbWUsIHByb3BzOiBJbnB1dFByb3BzPFQ+LCBoYXNFcnJvcj86IGJvb2xlYW4pID0+IENTU09iamVjdCA9IChcbiAgdGhlbWUsXG4gIHttYXJrSW52YWxpZCA9IGZhbHNlLCBwbGFjZWhvbGRlclRleHRUcmFuc2Zvcm0gPSAnbm9uZScsIGRpc2FibGVkID0gZmFsc2V9LFxuKSA9PiB7XG4gIGNvbnN0IHBsYWNlaG9sZGVyU3R5bGUgPSB7XG4gICAgY29sb3I6IHRoZW1lLklucHV0LnBsYWNlaG9sZGVyQ29sb3IsXG4gICAgZm9udFNpemU6ICcxNnB4JyxcbiAgICB0ZXh0VHJhbnNmb3JtOiBwbGFjZWhvbGRlclRleHRUcmFuc2Zvcm0sXG4gIH07XG5cbiAgcmV0dXJuIHtcbiAgICAnJjo6LW1vei1wbGFjZWhvbGRlcic6IHtcbiAgICAgIC4uLnBsYWNlaG9sZGVyU3R5bGUsXG4gICAgICBvcGFjaXR5OiAxLFxuICAgIH0sXG4gICAgJyY6Oi1tcy1pbnB1dC1wbGFjZWhvbGRlcic6IHtcbiAgICAgIC4uLnBsYWNlaG9sZGVyU3R5bGUsXG4gICAgfSxcbiAgICAnJjo6LXdlYmtpdC1pbnB1dC1wbGFjZWhvbGRlcic6IHtcbiAgICAgIC4uLnBsYWNlaG9sZGVyU3R5bGUsXG4gICAgfSxcbiAgICAnJjpmb2N1cyc6IHtcbiAgICAgIGJveFNoYWRvdzogYDAgMCAwIDFweCAke3RoZW1lLmdlbmVyYWwucHJpbWFyeUNvbG9yfWAsXG4gICAgfSxcbiAgICAnJjppbnZhbGlkOm5vdCg6Zm9jdXMpJzogIW1hcmtJbnZhbGlkXG4gICAgICA/IHtcbiAgICAgICAgICBib3hTaGFkb3c6IGAwIDAgMCAxcHggJHt0aGVtZS5TZWxlY3QuYm9yZGVyQ29sb3J9YCxcbiAgICAgICAgfVxuICAgICAgOiB7fSxcbiAgICBiYWNrZ3JvdW5kOiBkaXNhYmxlZCA/IHRoZW1lLklucHV0LmJhY2tncm91bmRDb2xvckRpc2FibGVkIDogdGhlbWUuSW5wdXQuYmFja2dyb3VuZENvbG9yLFxuICAgIGJvcmRlcjogJ25vbmUnLFxuICAgIGJvcmRlclJhZGl1czogJzEycHgnLFxuICAgIGJveFNoYWRvdzogbWFya0ludmFsaWQgPyBgMCAwIDAgMXB4ICR7dGhlbWUuZ2VuZXJhbC5kYW5nZXJDb2xvcn1gIDogYDAgMCAwIDFweCAke3RoZW1lLlNlbGVjdC5ib3JkZXJDb2xvcn1gLFxuICAgIGNhcmV0Q29sb3I6IHRoZW1lLmdlbmVyYWwucHJpbWFyeUNvbG9yLFxuICAgIGNvbG9yOiB0aGVtZS5nZW5lcmFsLmNvbG9yLFxuICAgIGZvbnRXZWlnaHQ6IDMwMCxcbiAgICBoZWlnaHQ6ICc0OHB4JyxcbiAgICBsaW5lSGVpZ2h0OiAnMjRweCcsXG4gICAgb3V0bGluZTogJ25vbmUnLFxuICAgIHBhZGRpbmc6ICcwIDE2cHgnLFxuICAgIHdpZHRoOiAnMTAwJScsXG4gIH07XG59O1xuXG5leHBvcnQgY29uc3QgSU5QVVRfQ0xBU1NOQU1FID0gJ3dpcmVpbnB1dCc7XG5leHBvcnQgY29uc3QgSU5QVVRfR1JPVVAgPSAnaW5wdXQtZ3JvdXAnO1xuXG5jb25zdCBmaWx0ZXJJbnB1dFByb3BzID0gKHByb3BzOiBJbnB1dFByb3BzKSA9PiBmaWx0ZXJQcm9wcyhwcm9wcywgWydtYXJrSW52YWxpZCcsICdwbGFjZWhvbGRlclRleHRUcmFuc2Zvcm0nXSk7XG5cbmNvbnN0IGNlbnRlcklucHV0QWN0aW9uOiBDU1NPYmplY3QgPSB7XG4gIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICByaWdodDogJzE2cHgnLFxuICB0b3A6ICc1MCUnLFxuICB0cmFuc2Zvcm06ICd0cmFuc2xhdGVZKC01MCUpJyxcbn07XG5cbmV4cG9ydCBjb25zdCBJbnB1dDogUmVhY3QuRkM8SW5wdXRQcm9wczxIVE1MSW5wdXRFbGVtZW50Pj4gPSBSZWFjdC5mb3J3YXJkUmVmPFxuICBIVE1MSW5wdXRFbGVtZW50LFxuICBJbnB1dFByb3BzPEhUTUxJbnB1dEVsZW1lbnQ+XG4+KCh7dHlwZSwgbGFiZWwsIGVycm9yLCBoZWxwZXJUZXh0LCB3cmFwcGVyQ1NTID0ge30sIGNsYXNzTmFtZSA9ICcnLCAuLi5wcm9wc30sIHJlZikgPT4ge1xuICBjb25zdCBbdG9nZ2xlUGFzc3dvcmQsIHNldFRvZ2dsZVBhc3N3b3JkXSA9IHVzZVN0YXRlPGJvb2xlYW4+KGZhbHNlKTtcblxuICBjb25zdCBoYXNFcnJvciA9ICEhZXJyb3I7XG4gIGNvbnN0IGlzUGFzc3dvcmRJbnB1dCA9IHR5cGUgPT09ICdwYXNzd29yZCc7XG4gIGNvbnN0IHRvZ2dsZWRQYXNzd29yZFR5cGUgPSB0b2dnbGVQYXNzd29yZCA/ICd0ZXh0JyA6ICdwYXNzd29yZCc7XG5cbiAgY29uc3QgdG9nZ2xlU2V0UGFzc3dvcmQgPSAoKSA9PiBzZXRUb2dnbGVQYXNzd29yZChwcmV2U3RhdGUgPT4gIXByZXZTdGF0ZSk7XG5cbiAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgY2xhc3NOYW1lPXtJTlBVVF9HUk9VUH1cbiAgICAgIGNzcz17KHRoZW1lOiBUaGVtZSkgPT4gKHtcbiAgICAgICAgbWFyZ2luQm90dG9tOiBoYXNFcnJvciA/ICcycHgnIDogJzIwcHgnLFxuICAgICAgICB3aWR0aDogJzEwMCUnLFxuICAgICAgICAnJjpmb2N1cy13aXRoaW4gbGFiZWwnOiB7XG4gICAgICAgICAgY29sb3I6IHRoZW1lLmdlbmVyYWwucHJpbWFyeUNvbG9yLFxuICAgICAgICB9LFxuICAgICAgICAuLi53cmFwcGVyQ1NTLFxuICAgICAgfSl9XG4gICAgPlxuICAgICAge2xhYmVsICYmIChcbiAgICAgICAgPElucHV0TGFiZWwgaHRtbEZvcj17cHJvcHMuaWR9IGlzUmVxdWlyZWQ9e3Byb3BzLnJlcXVpcmVkfSBtYXJrSW52YWxpZD17cHJvcHMubWFya0ludmFsaWR9PlxuICAgICAgICAgIHtsYWJlbH1cbiAgICAgICAgPC9JbnB1dExhYmVsPlxuICAgICAgKX1cblxuICAgICAgPGRpdiBjc3M9e3ttYXJnaW5Cb3R0b206IGhhc0Vycm9yICYmICc4cHgnLCBwb3NpdGlvbjogJ3JlbGF0aXZlJ319PlxuICAgICAgICA8aW5wdXRcbiAgICAgICAgICBjbGFzc05hbWU9e0lOUFVUX0NMQVNTTkFNRX1cbiAgICAgICAgICBjc3M9eyh0aGVtZTogVGhlbWUpID0+IGlucHV0U3R5bGUodGhlbWUsIHByb3BzLCBoYXNFcnJvcil9XG4gICAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgICAgdHlwZT17aXNQYXNzd29yZElucHV0ID8gdG9nZ2xlZFBhc3N3b3JkVHlwZSA6IHR5cGV9XG4gICAgICAgICAgYXJpYS1yZXF1aXJlZD17cHJvcHMucmVxdWlyZWR9XG4gICAgICAgICAgey4uLmZpbHRlcklucHV0UHJvcHMocHJvcHMpfVxuICAgICAgICAvPlxuXG4gICAgICAgIHtoYXNFcnJvciAmJiAhaXNQYXNzd29yZElucHV0ICYmIChcbiAgICAgICAgICA8RXJyb3JJY29uIGNzcz17Y2VudGVySW5wdXRBY3Rpb259IHdpZHRoPXsxNn0gaGVpZ2h0PXsxNn0gYXJpYS1oaWRkZW49XCJ0cnVlXCIgLz5cbiAgICAgICAgKX1cblxuICAgICAgICB7aXNQYXNzd29yZElucHV0ICYmIChcbiAgICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgICAgIGRhdGEtdWllLW5hbWU9eyF0b2dnbGVQYXNzd29yZCA/ICdkby1zaG93LXBhc3N3b3JkJyA6ICdkby1oaWRlLXBhc3N3b3JkJ31cbiAgICAgICAgICAgIGNzcz17ey4uLmNlbnRlcklucHV0QWN0aW9uLCBiYWNrZ3JvdW5kOiAndHJhbnNwYXJlbnQnLCBib3JkZXI6ICdub25lJywgY3Vyc29yOiAncG9pbnRlcicsIHBhZGRpbmc6IDB9fVxuICAgICAgICAgICAgb25DbGljaz17dG9nZ2xlU2V0UGFzc3dvcmR9XG4gICAgICAgICAgICB0aXRsZT1cIlRvZ2dsZSBwYXNzd29yZCB2aXNpYmlsaXR5XCJcbiAgICAgICAgICAgIGFyaWEtY29udHJvbHM9e3Byb3BzLmlkfVxuICAgICAgICAgICAgYXJpYS1leHBhbmRlZD17dG9nZ2xlUGFzc3dvcmR9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge3RvZ2dsZVBhc3N3b3JkID8gPEhpZGVJY29uIC8+IDogPFNob3dJY29uIC8+fVxuICAgICAgICAgIDwvYnV0dG9uPlxuICAgICAgICApfVxuICAgICAgPC9kaXY+XG5cbiAgICAgIHshaGFzRXJyb3IgJiYgaGVscGVyVGV4dCAmJiAoXG4gICAgICAgIDxwXG4gICAgICAgICAgY3NzPXsodGhlbWU6IFRoZW1lKSA9PiAoe1xuICAgICAgICAgICAgZm9udFNpemU6ICcxMnB4JyxcbiAgICAgICAgICAgIGZvbnRXZWlnaHQ6IDQwMCxcbiAgICAgICAgICAgIGNvbG9yOiB0aGVtZS5JbnB1dC5wbGFjZWhvbGRlckNvbG9yLFxuICAgICAgICAgICAgbWFyZ2luVG9wOiA4LFxuICAgICAgICAgIH0pfVxuICAgICAgICA+XG4gICAgICAgICAge2hlbHBlclRleHR9XG4gICAgICAgIDwvcD5cbiAgICAgICl9XG5cbiAgICAgIHtlcnJvcn1cbiAgICA8L2Rpdj5cbiAgKTtcbn0pO1xuIl19 */")
|
|
142
143
|
}, (0, _react.jsx)("input", (0, _extends2["default"])({
|
|
143
144
|
className: INPUT_CLASSNAME,
|
|
144
145
|
css: function css(theme) {
|
|
@@ -160,22 +161,20 @@ var Input = /*#__PURE__*/_react2["default"].forwardRef(function (_ref2, ref) {
|
|
|
160
161
|
border: 'none',
|
|
161
162
|
cursor: 'pointer',
|
|
162
163
|
padding: 0
|
|
163
|
-
}), process.env.NODE_ENV === "production" ? "" : ";label:Input;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
164
|
+
}), process.env.NODE_ENV === "production" ? "" : ";label:Input;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIklucHV0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpSlkiLCJmaWxlIjoiSW5wdXQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFdpcmVcbiAqIENvcHlyaWdodCAoQykgMjAxOCBXaXJlIFN3aXNzIEdtYkhcbiAqXG4gKiBUaGlzIHByb2dyYW0gaXMgZnJlZSBzb2Z0d2FyZTogeW91IGNhbiByZWRpc3RyaWJ1dGUgaXQgYW5kL29yIG1vZGlmeVxuICogaXQgdW5kZXIgdGhlIHRlcm1zIG9mIHRoZSBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBhcyBwdWJsaXNoZWQgYnlcbiAqIHRoZSBGcmVlIFNvZnR3YXJlIEZvdW5kYXRpb24sIGVpdGhlciB2ZXJzaW9uIDMgb2YgdGhlIExpY2Vuc2UsIG9yXG4gKiAoYXQgeW91ciBvcHRpb24pIGFueSBsYXRlciB2ZXJzaW9uLlxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBkaXN0cmlidXRlZCBpbiB0aGUgaG9wZSB0aGF0IGl0IHdpbGwgYmUgdXNlZnVsLFxuICogYnV0IFdJVEhPVVQgQU5ZIFdBUlJBTlRZOyB3aXRob3V0IGV2ZW4gdGhlIGltcGxpZWQgd2FycmFudHkgb2ZcbiAqIE1FUkNIQU5UQUJJTElUWSBvciBGSVRORVNTIEZPUiBBIFBBUlRJQ1VMQVIgUFVSUE9TRS4gU2VlIHRoZVxuICogR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2UgZm9yIG1vcmUgZGV0YWlscy5cbiAqXG4gKiBZb3Ugc2hvdWxkIGhhdmUgcmVjZWl2ZWQgYSBjb3B5IG9mIHRoZSBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZVxuICogYWxvbmcgd2l0aCB0aGlzIHByb2dyYW0uIElmIG5vdCwgc2VlIGh0dHA6Ly93d3cuZ251Lm9yZy9saWNlbnNlcy8uXG4gKlxuICovXG5cbi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHtDU1NPYmplY3QsIGpzeCwgdXNlVGhlbWV9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB0eXBlIHtQcm9wZXJ0eX0gZnJvbSAnY3NzdHlwZSc7XG5pbXBvcnQgUmVhY3QsIHtSZWFjdEVsZW1lbnQsIHVzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB0eXBlIHtUaGVtZX0gZnJvbSAnLi4vTGF5b3V0JztcbmltcG9ydCB0eXBlIHtUZXh0UHJvcHN9IGZyb20gJy4uL1RleHQnO1xuaW1wb3J0IHtmaWx0ZXJQcm9wc30gZnJvbSAnLi4vdXRpbCc7XG5pbXBvcnQge0Vycm9ySWNvbiwgSGlkZUljb24sIFNob3dJY29ufSBmcm9tICcuLi9JY29uJztcbmltcG9ydCBJbnB1dExhYmVsIGZyb20gJy4vSW5wdXRMYWJlbCc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgSW5wdXRQcm9wczxUID0gSFRNTElucHV0RWxlbWVudD4gZXh0ZW5kcyBUZXh0UHJvcHM8VD4ge1xuICBsYWJlbD86IHN0cmluZztcbiAgZXJyb3I/OiBSZWFjdEVsZW1lbnQ7XG4gIG1hcmtJbnZhbGlkPzogYm9vbGVhbjtcbiAgaGVscGVyVGV4dD86IHN0cmluZztcbiAgcGxhY2Vob2xkZXJUZXh0VHJhbnNmb3JtPzogUHJvcGVydHkuVGV4dFRyYW5zZm9ybTtcbiAgd3JhcHBlckNTUz86IENTU09iamVjdDtcbn1cblxuZXhwb3J0IGNvbnN0IGlucHV0U3R5bGU6IDxUPih0aGVtZTogVGhlbWUsIHByb3BzOiBJbnB1dFByb3BzPFQ+LCBoYXNFcnJvcj86IGJvb2xlYW4pID0+IENTU09iamVjdCA9IChcbiAgdGhlbWUsXG4gIHttYXJrSW52YWxpZCA9IGZhbHNlLCBwbGFjZWhvbGRlclRleHRUcmFuc2Zvcm0gPSAnbm9uZScsIGRpc2FibGVkID0gZmFsc2V9LFxuKSA9PiB7XG4gIGNvbnN0IHBsYWNlaG9sZGVyU3R5bGUgPSB7XG4gICAgY29sb3I6IHRoZW1lLklucHV0LnBsYWNlaG9sZGVyQ29sb3IsXG4gICAgZm9udFNpemU6ICcxNnB4JyxcbiAgICB0ZXh0VHJhbnNmb3JtOiBwbGFjZWhvbGRlclRleHRUcmFuc2Zvcm0sXG4gIH07XG5cbiAgcmV0dXJuIHtcbiAgICAnJjo6LW1vei1wbGFjZWhvbGRlcic6IHtcbiAgICAgIC4uLnBsYWNlaG9sZGVyU3R5bGUsXG4gICAgICBvcGFjaXR5OiAxLFxuICAgIH0sXG4gICAgJyY6Oi1tcy1pbnB1dC1wbGFjZWhvbGRlcic6IHtcbiAgICAgIC4uLnBsYWNlaG9sZGVyU3R5bGUsXG4gICAgfSxcbiAgICAnJjo6LXdlYmtpdC1pbnB1dC1wbGFjZWhvbGRlcic6IHtcbiAgICAgIC4uLnBsYWNlaG9sZGVyU3R5bGUsXG4gICAgfSxcbiAgICAnJjpmb2N1cyc6IHtcbiAgICAgIGJveFNoYWRvdzogYDAgMCAwIDFweCAke3RoZW1lLmdlbmVyYWwucHJpbWFyeUNvbG9yfWAsXG4gICAgfSxcbiAgICAnJjppbnZhbGlkOm5vdCg6Zm9jdXMpJzogIW1hcmtJbnZhbGlkXG4gICAgICA/IHtcbiAgICAgICAgICBib3hTaGFkb3c6IGAwIDAgMCAxcHggJHt0aGVtZS5TZWxlY3QuYm9yZGVyQ29sb3J9YCxcbiAgICAgICAgfVxuICAgICAgOiB7fSxcbiAgICBiYWNrZ3JvdW5kOiBkaXNhYmxlZCA/IHRoZW1lLklucHV0LmJhY2tncm91bmRDb2xvckRpc2FibGVkIDogdGhlbWUuSW5wdXQuYmFja2dyb3VuZENvbG9yLFxuICAgIGJvcmRlcjogJ25vbmUnLFxuICAgIGJvcmRlclJhZGl1czogJzEycHgnLFxuICAgIGJveFNoYWRvdzogbWFya0ludmFsaWQgPyBgMCAwIDAgMXB4ICR7dGhlbWUuZ2VuZXJhbC5kYW5nZXJDb2xvcn1gIDogYDAgMCAwIDFweCAke3RoZW1lLlNlbGVjdC5ib3JkZXJDb2xvcn1gLFxuICAgIGNhcmV0Q29sb3I6IHRoZW1lLmdlbmVyYWwucHJpbWFyeUNvbG9yLFxuICAgIGNvbG9yOiB0aGVtZS5nZW5lcmFsLmNvbG9yLFxuICAgIGZvbnRXZWlnaHQ6IDMwMCxcbiAgICBoZWlnaHQ6ICc0OHB4JyxcbiAgICBsaW5lSGVpZ2h0OiAnMjRweCcsXG4gICAgb3V0bGluZTogJ25vbmUnLFxuICAgIHBhZGRpbmc6ICcwIDE2cHgnLFxuICAgIHdpZHRoOiAnMTAwJScsXG4gIH07XG59O1xuXG5leHBvcnQgY29uc3QgSU5QVVRfQ0xBU1NOQU1FID0gJ3dpcmVpbnB1dCc7XG5leHBvcnQgY29uc3QgSU5QVVRfR1JPVVAgPSAnaW5wdXQtZ3JvdXAnO1xuXG5jb25zdCBmaWx0ZXJJbnB1dFByb3BzID0gKHByb3BzOiBJbnB1dFByb3BzKSA9PiBmaWx0ZXJQcm9wcyhwcm9wcywgWydtYXJrSW52YWxpZCcsICdwbGFjZWhvbGRlclRleHRUcmFuc2Zvcm0nXSk7XG5cbmNvbnN0IGNlbnRlcklucHV0QWN0aW9uOiBDU1NPYmplY3QgPSB7XG4gIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICByaWdodDogJzE2cHgnLFxuICB0b3A6ICc1MCUnLFxuICB0cmFuc2Zvcm06ICd0cmFuc2xhdGVZKC01MCUpJyxcbn07XG5cbmV4cG9ydCBjb25zdCBJbnB1dDogUmVhY3QuRkM8SW5wdXRQcm9wczxIVE1MSW5wdXRFbGVtZW50Pj4gPSBSZWFjdC5mb3J3YXJkUmVmPFxuICBIVE1MSW5wdXRFbGVtZW50LFxuICBJbnB1dFByb3BzPEhUTUxJbnB1dEVsZW1lbnQ+XG4+KCh7dHlwZSwgbGFiZWwsIGVycm9yLCBoZWxwZXJUZXh0LCB3cmFwcGVyQ1NTID0ge30sIGNsYXNzTmFtZSA9ICcnLCAuLi5wcm9wc30sIHJlZikgPT4ge1xuICBjb25zdCBbdG9nZ2xlUGFzc3dvcmQsIHNldFRvZ2dsZVBhc3N3b3JkXSA9IHVzZVN0YXRlPGJvb2xlYW4+KGZhbHNlKTtcblxuICBjb25zdCBoYXNFcnJvciA9ICEhZXJyb3I7XG4gIGNvbnN0IGlzUGFzc3dvcmRJbnB1dCA9IHR5cGUgPT09ICdwYXNzd29yZCc7XG4gIGNvbnN0IHRvZ2dsZWRQYXNzd29yZFR5cGUgPSB0b2dnbGVQYXNzd29yZCA/ICd0ZXh0JyA6ICdwYXNzd29yZCc7XG5cbiAgY29uc3QgdG9nZ2xlU2V0UGFzc3dvcmQgPSAoKSA9PiBzZXRUb2dnbGVQYXNzd29yZChwcmV2U3RhdGUgPT4gIXByZXZTdGF0ZSk7XG5cbiAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgY2xhc3NOYW1lPXtJTlBVVF9HUk9VUH1cbiAgICAgIGNzcz17KHRoZW1lOiBUaGVtZSkgPT4gKHtcbiAgICAgICAgbWFyZ2luQm90dG9tOiBoYXNFcnJvciA/ICcycHgnIDogJzIwcHgnLFxuICAgICAgICB3aWR0aDogJzEwMCUnLFxuICAgICAgICAnJjpmb2N1cy13aXRoaW4gbGFiZWwnOiB7XG4gICAgICAgICAgY29sb3I6IHRoZW1lLmdlbmVyYWwucHJpbWFyeUNvbG9yLFxuICAgICAgICB9LFxuICAgICAgICAuLi53cmFwcGVyQ1NTLFxuICAgICAgfSl9XG4gICAgPlxuICAgICAge2xhYmVsICYmIChcbiAgICAgICAgPElucHV0TGFiZWwgaHRtbEZvcj17cHJvcHMuaWR9IGlzUmVxdWlyZWQ9e3Byb3BzLnJlcXVpcmVkfSBtYXJrSW52YWxpZD17cHJvcHMubWFya0ludmFsaWR9PlxuICAgICAgICAgIHtsYWJlbH1cbiAgICAgICAgPC9JbnB1dExhYmVsPlxuICAgICAgKX1cblxuICAgICAgPGRpdiBjc3M9e3ttYXJnaW5Cb3R0b206IGhhc0Vycm9yICYmICc4cHgnLCBwb3NpdGlvbjogJ3JlbGF0aXZlJ319PlxuICAgICAgICA8aW5wdXRcbiAgICAgICAgICBjbGFzc05hbWU9e0lOUFVUX0NMQVNTTkFNRX1cbiAgICAgICAgICBjc3M9eyh0aGVtZTogVGhlbWUpID0+IGlucHV0U3R5bGUodGhlbWUsIHByb3BzLCBoYXNFcnJvcil9XG4gICAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgICAgdHlwZT17aXNQYXNzd29yZElucHV0ID8gdG9nZ2xlZFBhc3N3b3JkVHlwZSA6IHR5cGV9XG4gICAgICAgICAgYXJpYS1yZXF1aXJlZD17cHJvcHMucmVxdWlyZWR9XG4gICAgICAgICAgey4uLmZpbHRlcklucHV0UHJvcHMocHJvcHMpfVxuICAgICAgICAvPlxuXG4gICAgICAgIHtoYXNFcnJvciAmJiAhaXNQYXNzd29yZElucHV0ICYmIChcbiAgICAgICAgICA8RXJyb3JJY29uIGNzcz17Y2VudGVySW5wdXRBY3Rpb259IHdpZHRoPXsxNn0gaGVpZ2h0PXsxNn0gYXJpYS1oaWRkZW49XCJ0cnVlXCIgLz5cbiAgICAgICAgKX1cblxuICAgICAgICB7aXNQYXNzd29yZElucHV0ICYmIChcbiAgICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgICAgIGRhdGEtdWllLW5hbWU9eyF0b2dnbGVQYXNzd29yZCA/ICdkby1zaG93LXBhc3N3b3JkJyA6ICdkby1oaWRlLXBhc3N3b3JkJ31cbiAgICAgICAgICAgIGNzcz17ey4uLmNlbnRlcklucHV0QWN0aW9uLCBiYWNrZ3JvdW5kOiAndHJhbnNwYXJlbnQnLCBib3JkZXI6ICdub25lJywgY3Vyc29yOiAncG9pbnRlcicsIHBhZGRpbmc6IDB9fVxuICAgICAgICAgICAgb25DbGljaz17dG9nZ2xlU2V0UGFzc3dvcmR9XG4gICAgICAgICAgICB0aXRsZT1cIlRvZ2dsZSBwYXNzd29yZCB2aXNpYmlsaXR5XCJcbiAgICAgICAgICAgIGFyaWEtY29udHJvbHM9e3Byb3BzLmlkfVxuICAgICAgICAgICAgYXJpYS1leHBhbmRlZD17dG9nZ2xlUGFzc3dvcmR9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge3RvZ2dsZVBhc3N3b3JkID8gPEhpZGVJY29uIC8+IDogPFNob3dJY29uIC8+fVxuICAgICAgICAgIDwvYnV0dG9uPlxuICAgICAgICApfVxuICAgICAgPC9kaXY+XG5cbiAgICAgIHshaGFzRXJyb3IgJiYgaGVscGVyVGV4dCAmJiAoXG4gICAgICAgIDxwXG4gICAgICAgICAgY3NzPXsodGhlbWU6IFRoZW1lKSA9PiAoe1xuICAgICAgICAgICAgZm9udFNpemU6ICcxMnB4JyxcbiAgICAgICAgICAgIGZvbnRXZWlnaHQ6IDQwMCxcbiAgICAgICAgICAgIGNvbG9yOiB0aGVtZS5JbnB1dC5wbGFjZWhvbGRlckNvbG9yLFxuICAgICAgICAgICAgbWFyZ2luVG9wOiA4LFxuICAgICAgICAgIH0pfVxuICAgICAgICA+XG4gICAgICAgICAge2hlbHBlclRleHR9XG4gICAgICAgIDwvcD5cbiAgICAgICl9XG5cbiAgICAgIHtlcnJvcn1cbiAgICA8L2Rpdj5cbiAgKTtcbn0pO1xuIl19 */"),
|
|
164
165
|
onClick: toggleSetPassword,
|
|
165
166
|
title: "Toggle password visibility",
|
|
166
167
|
"aria-controls": props.id,
|
|
167
168
|
"aria-expanded": togglePassword
|
|
168
|
-
}, togglePassword ? (0, _react.jsx)(_Icon.HideIcon, {
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
marginTop: 8
|
|
178
|
-
}, process.env.NODE_ENV === "production" ? "" : ";label:Input;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIklucHV0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0SlciLCJmaWxlIjoiSW5wdXQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFdpcmVcbiAqIENvcHlyaWdodCAoQykgMjAxOCBXaXJlIFN3aXNzIEdtYkhcbiAqXG4gKiBUaGlzIHByb2dyYW0gaXMgZnJlZSBzb2Z0d2FyZTogeW91IGNhbiByZWRpc3RyaWJ1dGUgaXQgYW5kL29yIG1vZGlmeVxuICogaXQgdW5kZXIgdGhlIHRlcm1zIG9mIHRoZSBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBhcyBwdWJsaXNoZWQgYnlcbiAqIHRoZSBGcmVlIFNvZnR3YXJlIEZvdW5kYXRpb24sIGVpdGhlciB2ZXJzaW9uIDMgb2YgdGhlIExpY2Vuc2UsIG9yXG4gKiAoYXQgeW91ciBvcHRpb24pIGFueSBsYXRlciB2ZXJzaW9uLlxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBkaXN0cmlidXRlZCBpbiB0aGUgaG9wZSB0aGF0IGl0IHdpbGwgYmUgdXNlZnVsLFxuICogYnV0IFdJVEhPVVQgQU5ZIFdBUlJBTlRZOyB3aXRob3V0IGV2ZW4gdGhlIGltcGxpZWQgd2FycmFudHkgb2ZcbiAqIE1FUkNIQU5UQUJJTElUWSBvciBGSVRORVNTIEZPUiBBIFBBUlRJQ1VMQVIgUFVSUE9TRS4gU2VlIHRoZVxuICogR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2UgZm9yIG1vcmUgZGV0YWlscy5cbiAqXG4gKiBZb3Ugc2hvdWxkIGhhdmUgcmVjZWl2ZWQgYSBjb3B5IG9mIHRoZSBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZVxuICogYWxvbmcgd2l0aCB0aGlzIHByb2dyYW0uIElmIG5vdCwgc2VlIGh0dHA6Ly93d3cuZ251Lm9yZy9saWNlbnNlcy8uXG4gKlxuICovXG5cbi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHtDU1NPYmplY3QsIGpzeH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHR5cGUge1Byb3BlcnR5fSBmcm9tICdjc3N0eXBlJztcbmltcG9ydCBSZWFjdCwge1JlYWN0RWxlbWVudCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHtDT0xPUl9WMn0gZnJvbSAnLi4vSWRlbnRpdHknO1xuaW1wb3J0IHR5cGUge1RoZW1lfSBmcm9tICcuLi9MYXlvdXQnO1xuaW1wb3J0IHR5cGUge1RleHRQcm9wc30gZnJvbSAnLi4vVGV4dCc7XG5pbXBvcnQge2ZpbHRlclByb3BzfSBmcm9tICcuLi91dGlsJztcbmltcG9ydCB7RXJyb3JJY29uLCBIaWRlSWNvbiwgU2hvd0ljb259IGZyb20gJy4uL0ljb24nO1xuaW1wb3J0IElucHV0TGFiZWwgZnJvbSAnLi9JbnB1dExhYmVsJztcblxuZXhwb3J0IGludGVyZmFjZSBJbnB1dFByb3BzPFQgPSBIVE1MSW5wdXRFbGVtZW50PiBleHRlbmRzIFRleHRQcm9wczxUPiB7XG4gIGxhYmVsPzogc3RyaW5nO1xuICBlcnJvcj86IFJlYWN0RWxlbWVudDtcbiAgbWFya0ludmFsaWQ/OiBib29sZWFuO1xuICBoZWxwZXJUZXh0Pzogc3RyaW5nO1xuICBwbGFjZWhvbGRlclRleHRUcmFuc2Zvcm0/OiBQcm9wZXJ0eS5UZXh0VHJhbnNmb3JtO1xuICB3cmFwcGVyQ1NTPzogQ1NTT2JqZWN0O1xufVxuXG5leHBvcnQgY29uc3QgaW5wdXRTdHlsZTogPFQ+KHRoZW1lOiBUaGVtZSwgcHJvcHM6IElucHV0UHJvcHM8VD4sIGhhc0Vycm9yPzogYm9vbGVhbikgPT4gQ1NTT2JqZWN0ID0gKFxuICB0aGVtZSxcbiAge21hcmtJbnZhbGlkID0gZmFsc2UsIHBsYWNlaG9sZGVyVGV4dFRyYW5zZm9ybSA9ICdub25lJywgZGlzYWJsZWQgPSBmYWxzZX0sXG4pID0+IHtcbiAgY29uc3QgcGxhY2Vob2xkZXJTdHlsZSA9IHtcbiAgICBjb2xvcjogdGhlbWUuSW5wdXQucGxhY2Vob2xkZXJDb2xvcixcbiAgICBmb250U2l6ZTogJzE2cHgnLFxuICAgIHRleHRUcmFuc2Zvcm06IHBsYWNlaG9sZGVyVGV4dFRyYW5zZm9ybSxcbiAgfTtcblxuICByZXR1cm4ge1xuICAgICcmOjotbW96LXBsYWNlaG9sZGVyJzoge1xuICAgICAgLi4ucGxhY2Vob2xkZXJTdHlsZSxcbiAgICAgIG9wYWNpdHk6IDEsXG4gICAgfSxcbiAgICAnJjo6LW1zLWlucHV0LXBsYWNlaG9sZGVyJzoge1xuICAgICAgLi4ucGxhY2Vob2xkZXJTdHlsZSxcbiAgICB9LFxuICAgICcmOjotd2Via2l0LWlucHV0LXBsYWNlaG9sZGVyJzoge1xuICAgICAgLi4ucGxhY2Vob2xkZXJTdHlsZSxcbiAgICB9LFxuICAgICcmOmZvY3VzJzoge1xuICAgICAgYm94U2hhZG93OiBgMCAwIDAgMXB4ICR7Q09MT1JfVjIuQkxVRX1gLFxuICAgIH0sXG4gICAgJyY6aW52YWxpZDpub3QoOmZvY3VzKSc6ICFtYXJrSW52YWxpZFxuICAgICAgPyB7XG4gICAgICAgICAgYm94U2hhZG93OiBgMCAwIDAgMXB4ICR7Q09MT1JfVjIuR1JBWX1gLFxuICAgICAgICB9XG4gICAgICA6IHt9LFxuICAgIGJhY2tncm91bmQ6IGRpc2FibGVkID8gdGhlbWUuSW5wdXQuYmFja2dyb3VuZENvbG9yRGlzYWJsZWQgOiB0aGVtZS5JbnB1dC5iYWNrZ3JvdW5kQ29sb3IsXG4gICAgYm9yZGVyOiAnbm9uZScsXG4gICAgYm9yZGVyUmFkaXVzOiAnNHB4JyxcbiAgICBib3hTaGFkb3c6IG1hcmtJbnZhbGlkID8gYDAgMCAwIDFweCAke0NPTE9SX1YyLlJFRH1gIDogYDAgMCAwIDFweCAke0NPTE9SX1YyLkdSQVlfNDB9YCxcbiAgICBjYXJldENvbG9yOiBDT0xPUl9WMi5CTFVFLFxuICAgIGNvbG9yOiB0aGVtZS5nZW5lcmFsLmNvbG9yLFxuICAgIGZvbnRXZWlnaHQ6IDMwMCxcbiAgICBoZWlnaHQ6ICc0OHB4JyxcbiAgICBsaW5lSGVpZ2h0OiAnMjRweCcsXG4gICAgb3V0bGluZTogJ25vbmUnLFxuICAgIHBhZGRpbmc6ICcwIDE2cHgnLFxuICAgIHdpZHRoOiAnMTAwJScsXG4gIH07XG59O1xuXG5leHBvcnQgY29uc3QgSU5QVVRfQ0xBU1NOQU1FID0gJ3dpcmVpbnB1dCc7XG5leHBvcnQgY29uc3QgSU5QVVRfR1JPVVAgPSAnaW5wdXQtZ3JvdXAnO1xuXG5jb25zdCBmaWx0ZXJJbnB1dFByb3BzID0gKHByb3BzOiBJbnB1dFByb3BzKSA9PiBmaWx0ZXJQcm9wcyhwcm9wcywgWydtYXJrSW52YWxpZCcsICdwbGFjZWhvbGRlclRleHRUcmFuc2Zvcm0nXSk7XG5cbmNvbnN0IGNlbnRlcklucHV0QWN0aW9uOiBDU1NPYmplY3QgPSB7XG4gIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICByaWdodDogJzE2cHgnLFxuICB0b3A6ICc1MCUnLFxuICB0cmFuc2Zvcm06ICd0cmFuc2xhdGVZKC01MCUpJyxcbn07XG5cbmV4cG9ydCBjb25zdCBJbnB1dDogUmVhY3QuRkM8SW5wdXRQcm9wczxIVE1MSW5wdXRFbGVtZW50Pj4gPSBSZWFjdC5mb3J3YXJkUmVmPFxuICBIVE1MSW5wdXRFbGVtZW50LFxuICBJbnB1dFByb3BzPEhUTUxJbnB1dEVsZW1lbnQ+XG4+KCh7dHlwZSwgbGFiZWwsIGVycm9yLCBoZWxwZXJUZXh0LCB3cmFwcGVyQ1NTID0ge30sIGNsYXNzTmFtZSA9ICcnLCAuLi5wcm9wc30sIHJlZikgPT4ge1xuICBjb25zdCBbdG9nZ2xlUGFzc3dvcmQsIHNldFRvZ2dsZVBhc3N3b3JkXSA9IHVzZVN0YXRlPGJvb2xlYW4+KGZhbHNlKTtcblxuICBjb25zdCBoYXNFcnJvciA9ICEhZXJyb3I7XG4gIGNvbnN0IGlzUGFzc3dvcmRJbnB1dCA9IHR5cGUgPT09ICdwYXNzd29yZCc7XG4gIGNvbnN0IHRvZ2dsZWRQYXNzd29yZFR5cGUgPSB0b2dnbGVQYXNzd29yZCA/ICd0ZXh0JyA6ICdwYXNzd29yZCc7XG5cbiAgY29uc3QgdG9nZ2xlU2V0UGFzc3dvcmQgPSAoKSA9PiBzZXRUb2dnbGVQYXNzd29yZChwcmV2U3RhdGUgPT4gIXByZXZTdGF0ZSk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjbGFzc05hbWU9e0lOUFVUX0dST1VQfVxuICAgICAgY3NzPXt7XG4gICAgICAgIG1hcmdpbkJvdHRvbTogaGFzRXJyb3IgPyAnMnB4JyA6ICcyMHB4JyxcbiAgICAgICAgd2lkdGg6ICcxMDAlJyxcbiAgICAgICAgJyY6Zm9jdXMtd2l0aGluIGxhYmVsJzoge1xuICAgICAgICAgIGNvbG9yOiBDT0xPUl9WMi5CTFVFLFxuICAgICAgICB9LFxuICAgICAgICAuLi53cmFwcGVyQ1NTLFxuICAgICAgfX1cbiAgICA+XG4gICAgICB7bGFiZWwgJiYgKFxuICAgICAgICA8SW5wdXRMYWJlbCBodG1sRm9yPXtwcm9wcy5pZH0gaXNSZXF1aXJlZD17cHJvcHMucmVxdWlyZWR9IG1hcmtJbnZhbGlkPXtwcm9wcy5tYXJrSW52YWxpZH0+XG4gICAgICAgICAge2xhYmVsfVxuICAgICAgICA8L0lucHV0TGFiZWw+XG4gICAgICApfVxuXG4gICAgICA8ZGl2IGNzcz17e21hcmdpbkJvdHRvbTogaGFzRXJyb3IgJiYgJzhweCcsIHBvc2l0aW9uOiAncmVsYXRpdmUnfX0+XG4gICAgICAgIDxpbnB1dFxuICAgICAgICAgIGNsYXNzTmFtZT17SU5QVVRfQ0xBU1NOQU1FfVxuICAgICAgICAgIGNzcz17KHRoZW1lOiBUaGVtZSkgPT4gaW5wdXRTdHlsZSh0aGVtZSwgcHJvcHMsIGhhc0Vycm9yKX1cbiAgICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgICB0eXBlPXtpc1Bhc3N3b3JkSW5wdXQgPyB0b2dnbGVkUGFzc3dvcmRUeXBlIDogdHlwZX1cbiAgICAgICAgICBhcmlhLXJlcXVpcmVkPXtwcm9wcy5yZXF1aXJlZH1cbiAgICAgICAgICB7Li4uZmlsdGVySW5wdXRQcm9wcyhwcm9wcyl9XG4gICAgICAgIC8+XG5cbiAgICAgICAge2hhc0Vycm9yICYmICFpc1Bhc3N3b3JkSW5wdXQgJiYgKFxuICAgICAgICAgIDxFcnJvckljb24gY3NzPXtjZW50ZXJJbnB1dEFjdGlvbn0gd2lkdGg9ezE2fSBoZWlnaHQ9ezE2fSBhcmlhLWhpZGRlbj1cInRydWVcIiAvPlxuICAgICAgICApfVxuXG4gICAgICAgIHtpc1Bhc3N3b3JkSW5wdXQgJiYgKFxuICAgICAgICAgIDxidXR0b25cbiAgICAgICAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgICAgICAgZGF0YS11aWUtbmFtZT17IXRvZ2dsZVBhc3N3b3JkID8gJ2RvLXNob3ctcGFzc3dvcmQnIDogJ2RvLWhpZGUtcGFzc3dvcmQnfVxuICAgICAgICAgICAgY3NzPXt7Li4uY2VudGVySW5wdXRBY3Rpb24sIGJhY2tncm91bmQ6ICd0cmFuc3BhcmVudCcsIGJvcmRlcjogJ25vbmUnLCBjdXJzb3I6ICdwb2ludGVyJywgcGFkZGluZzogMH19XG4gICAgICAgICAgICBvbkNsaWNrPXt0b2dnbGVTZXRQYXNzd29yZH1cbiAgICAgICAgICAgIHRpdGxlPVwiVG9nZ2xlIHBhc3N3b3JkIHZpc2liaWxpdHlcIlxuICAgICAgICAgICAgYXJpYS1jb250cm9scz17cHJvcHMuaWR9XG4gICAgICAgICAgICBhcmlhLWV4cGFuZGVkPXt0b2dnbGVQYXNzd29yZH1cbiAgICAgICAgICA+XG4gICAgICAgICAgICB7dG9nZ2xlUGFzc3dvcmQgPyA8SGlkZUljb24gY29sb3I9e0NPTE9SX1YyLkJMQUNLfSAvPiA6IDxTaG93SWNvbiBjb2xvcj17Q09MT1JfVjIuQkxBQ0t9IC8+fVxuICAgICAgICAgIDwvYnV0dG9uPlxuICAgICAgICApfVxuICAgICAgPC9kaXY+XG5cbiAgICAgIHshaGFzRXJyb3IgJiYgaGVscGVyVGV4dCAmJiAoXG4gICAgICAgIDxwIGNzcz17e2ZvbnRTaXplOiAnMTJweCcsIGZvbnRXZWlnaHQ6IDQwMCwgY29sb3I6IENPTE9SX1YyLkdSQVlfODAsIG1hcmdpblRvcDogOH19PntoZWxwZXJUZXh0fTwvcD5cbiAgICAgICl9XG5cbiAgICAgIHtlcnJvcn1cbiAgICA8L2Rpdj5cbiAgKTtcbn0pO1xuIl19 */")
|
|
169
|
+
}, togglePassword ? (0, _react.jsx)(_Icon.HideIcon, null) : (0, _react.jsx)(_Icon.ShowIcon, null))), !hasError && helperText && (0, _react.jsx)("p", {
|
|
170
|
+
css: function css(theme) {
|
|
171
|
+
return {
|
|
172
|
+
fontSize: '12px',
|
|
173
|
+
fontWeight: 400,
|
|
174
|
+
color: theme.Input.placeholderColor,
|
|
175
|
+
marginTop: 8
|
|
176
|
+
};
|
|
177
|
+
}
|
|
179
178
|
}, helperText), error);
|
|
180
179
|
});
|
|
181
180
|
|
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","COLOR_V2","BLUE","GRAY","background","backgroundColorDisabled","backgroundColor","border","borderRadius","RED","GRAY_40","caretColor","general","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","BLACK","GRAY_80","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} from '@emotion/react';\nimport type {Property} from 'csstype';\nimport React, {ReactElement, useState} from 'react';\n\nimport {COLOR_V2} from '../Identity';\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 ${COLOR_V2.BLUE}`,\n },\n '&:invalid:not(:focus)': !markInvalid\n ? {\n boxShadow: `0 0 0 1px ${COLOR_V2.GRAY}`,\n }\n : {},\n background: disabled ? theme.Input.backgroundColorDisabled : theme.Input.backgroundColor,\n border: 'none',\n borderRadius: '4px',\n boxShadow: markInvalid ? `0 0 0 1px ${COLOR_V2.RED}` : `0 0 0 1px ${COLOR_V2.GRAY_40}`,\n caretColor: COLOR_V2.BLUE,\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 return (\n <div\n className={INPUT_GROUP}\n css={{\n marginBottom: hasError ? '2px' : '20px',\n width: '100%',\n '&:focus-within label': {\n color: COLOR_V2.BLUE,\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 color={COLOR_V2.BLACK} /> : <ShowIcon color={COLOR_V2.BLACK} />}\n </button>\n )}\n </div>\n\n {!hasError && helperText && (\n <p css={{fontSize: '12px', fontWeight: 400, color: COLOR_V2.GRAY_80, marginTop: 8}}>{helperText}</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","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 '&: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"}
|
package/src/Form/Select.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
|
-
import { CSSObject } from '@emotion/react';
|
|
3
|
-
import {
|
|
2
|
+
import { CSSObject, jsx } from '@emotion/react';
|
|
3
|
+
import { ReactElement } from 'react';
|
|
4
4
|
import { StateManagerProps } from 'react-select/dist/declarations/src/useStateManager';
|
|
5
5
|
export declare type Option = {
|
|
6
6
|
value: string | number;
|
|
@@ -8,8 +8,9 @@ export declare type Option = {
|
|
|
8
8
|
description?: string;
|
|
9
9
|
isDisabled?: boolean;
|
|
10
10
|
};
|
|
11
|
-
interface SelectProps extends StateManagerProps<Option> {
|
|
11
|
+
interface SelectProps<IsMulti extends boolean> extends StateManagerProps<Option, IsMulti> {
|
|
12
12
|
id: string;
|
|
13
|
+
disabled: boolean;
|
|
13
14
|
dataUieName: string;
|
|
14
15
|
options: Option[];
|
|
15
16
|
wrapperCSS?: CSSObject;
|
|
@@ -18,7 +19,7 @@ interface SelectProps extends StateManagerProps<Option> {
|
|
|
18
19
|
error?: ReactElement;
|
|
19
20
|
markInvalid?: boolean;
|
|
20
21
|
required?: boolean;
|
|
21
|
-
isMulti?:
|
|
22
|
+
isMulti?: IsMulti;
|
|
22
23
|
}
|
|
23
|
-
export declare const Select:
|
|
24
|
+
export declare const Select: <IsMulti extends boolean = false>({ id, label, error, helperText, disabled, dataUieName, options, isMulti, wrapperCSS, markInvalid, required, ...props }: SelectProps<IsMulti>) => jsx.JSX.Element;
|
|
24
25
|
export {};
|
package/src/Form/Select.js
CHANGED
|
@@ -25,7 +25,7 @@ var _SelectComponents = require("./SelectComponents");
|
|
|
25
25
|
|
|
26
26
|
var _InputLabel = _interopRequireDefault(require("./InputLabel"));
|
|
27
27
|
|
|
28
|
-
var _excluded = ["id", "label", "error", "helperText", "dataUieName", "options", "
|
|
28
|
+
var _excluded = ["id", "label", "error", "helperText", "disabled", "dataUieName", "options", "isMulti", "wrapperCSS", "markInvalid", "required"];
|
|
29
29
|
|
|
30
30
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
31
31
|
|
|
@@ -36,16 +36,17 @@ var Select = function Select(_ref) {
|
|
|
36
36
|
label = _ref.label,
|
|
37
37
|
error = _ref.error,
|
|
38
38
|
helperText = _ref.helperText,
|
|
39
|
+
_ref$disabled = _ref.disabled,
|
|
40
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
39
41
|
dataUieName = _ref.dataUieName,
|
|
40
42
|
options = _ref.options,
|
|
43
|
+
isMulti = _ref.isMulti,
|
|
41
44
|
_ref$wrapperCSS = _ref.wrapperCSS,
|
|
42
45
|
wrapperCSS = _ref$wrapperCSS === void 0 ? {} : _ref$wrapperCSS,
|
|
43
46
|
_ref$markInvalid = _ref.markInvalid,
|
|
44
47
|
markInvalid = _ref$markInvalid === void 0 ? false : _ref$markInvalid,
|
|
45
48
|
_ref$required = _ref.required,
|
|
46
49
|
required = _ref$required === void 0 ? false : _ref$required,
|
|
47
|
-
_ref$isMulti = _ref.isMulti,
|
|
48
|
-
isMulti = _ref$isMulti === void 0 ? false : _ref$isMulti,
|
|
49
50
|
props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
|
50
51
|
var theme = (0, _react.useTheme)();
|
|
51
52
|
var hasError = !!error;
|
|
@@ -74,6 +75,7 @@ var Select = function Select(_ref) {
|
|
|
74
75
|
ValueContainer: _SelectComponents.ValueContainer,
|
|
75
76
|
IndicatorsContainer: _SelectComponents.IndicatorsContainer
|
|
76
77
|
},
|
|
78
|
+
isDisabled: disabled,
|
|
77
79
|
hideSelectedOptions: false,
|
|
78
80
|
isSearchable: false,
|
|
79
81
|
isClearable: false,
|
package/src/Form/Select.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Select.tsx"],"names":["Select","id","label","error","helperText","dataUieName","options","wrapperCSS","markInvalid","required","
|
|
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;;AAEA;;;;;;;;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,iBAAiB,EAAjBA,mCADU;AAEVC,MAAAA,MAAM,EAAE,oCAAaf,WAAb,CAFE;AAGVgB,MAAAA,IAAI,EAAE,4BAAKhB,WAAL,CAHI;AAIViB,MAAAA,cAAc,EAAdA,gCAJU;AAKVC,MAAAA,mBAAmB,EAAnBA;AALU,KAHd;AAUE,IAAA,UAAU,EAAEnB,QAVd;AAWE,IAAA,mBAAmB,EAAE,KAXvB;AAYE,IAAA,YAAY,EAAE,KAZhB;AAaE,IAAA,WAAW,EAAE,KAbf;AAcE,IAAA,iBAAiB,EAAE,CAACG,OAdtB;AAeE,IAAA,OAAO,EAAEA,OAfX;AAgBE,IAAA,OAAO,EAAED;AAhBX,KAiBMK,KAjBN,EAjBF,EAqCG,CAACE,QAAD,IAAaV,UAAb,IACC;AAAG,IAAA,GAAG,EAAE,aAACS,KAAD;AAAA,aAAmB;AAACY,QAAAA,QAAQ,EAAE,MAAX;AAAmBC,QAAAA,UAAU,EAAE,GAA/B;AAAoCT,QAAAA,KAAK,EAAEJ,KAAK,CAACc,KAAN,CAAYC,UAAvD;AAAmEC,QAAAA,SAAS,EAAE;AAA9E,OAAnB;AAAA;AAAR,KACGzB,UADH,CAtCJ,EA2CGD,KA3CH,CADF;AA+CD,CAhEM","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 {CustomOption, DropdownIndicator, IndicatorsContainer, Menu, ValueContainer} 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 DropdownIndicator,\n Option: CustomOption(dataUieName),\n Menu: Menu(dataUieName),\n ValueContainer,\n IndicatorsContainer,\n }}\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"}
|
|
@@ -914,6 +914,7 @@ export declare const customStyles: (theme: Theme, markInvalid?: boolean) => {
|
|
|
914
914
|
height: string;
|
|
915
915
|
minHeight: string;
|
|
916
916
|
};
|
|
917
|
+
dropdownIndicator: (provided: any, selectProps: any) => any;
|
|
917
918
|
menu: (provided: any) => any;
|
|
918
919
|
menuList: (provided: any) => any;
|
|
919
920
|
option: (provided: any, { isDisabled, isFocused, isSelected }: {
|
|
@@ -922,4 +923,5 @@ export declare const customStyles: (theme: Theme, markInvalid?: boolean) => {
|
|
|
922
923
|
isSelected: any;
|
|
923
924
|
}) => any;
|
|
924
925
|
valueContainer: (provided: any) => any;
|
|
926
|
+
singleValue: (provided: any, selectProps: any) => any;
|
|
925
927
|
};
|
package/src/Form/SelectStyles.js
CHANGED
|
@@ -30,6 +30,7 @@ var customStyles = function customStyles(theme) {
|
|
|
30
30
|
var isDisabled = _ref.isDisabled,
|
|
31
31
|
selectProps = _ref.selectProps;
|
|
32
32
|
var menuIsOpen = selectProps.menuIsOpen;
|
|
33
|
+
var isSelectDisabled = selectProps.isDisabled;
|
|
33
34
|
return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, (0, _Input.inputStyle)(theme, {
|
|
34
35
|
disabled: isDisabled,
|
|
35
36
|
markInvalid: markInvalid
|
|
@@ -52,13 +53,13 @@ var customStyles = function customStyles(theme) {
|
|
|
52
53
|
boxShadow: "0 0 0 1px ".concat(theme.general.primaryColor)
|
|
53
54
|
}), !menuIsOpen && {
|
|
54
55
|
'&:hover': {
|
|
55
|
-
boxShadow: "0 0 0 1px ".concat(theme.Select.borderColor)
|
|
56
|
+
boxShadow: !isSelectDisabled && "0 0 0 1px ".concat(theme.Select.borderColor)
|
|
56
57
|
},
|
|
57
58
|
'&:focus, &:active': {
|
|
58
|
-
boxShadow: "0 0 0 1px ".concat(theme.general.primaryColor)
|
|
59
|
+
boxShadow: !isSelectDisabled && "0 0 0 1px ".concat(theme.general.primaryColor)
|
|
59
60
|
}
|
|
60
61
|
}), {}, {
|
|
61
|
-
cursor: 'pointer'
|
|
62
|
+
cursor: !isSelectDisabled && 'pointer'
|
|
62
63
|
});
|
|
63
64
|
},
|
|
64
65
|
control: function control() {
|
|
@@ -71,16 +72,26 @@ var customStyles = function customStyles(theme) {
|
|
|
71
72
|
minHeight: '48px'
|
|
72
73
|
};
|
|
73
74
|
},
|
|
75
|
+
dropdownIndicator: function dropdownIndicator(provided, selectProps) {
|
|
76
|
+
var isSelectDisabled = selectProps.isDisabled;
|
|
77
|
+
return _objectSpread(_objectSpread({}, provided), {}, {
|
|
78
|
+
'& > svg': {
|
|
79
|
+
fill: isSelectDisabled && theme.Input.placeholderColor
|
|
80
|
+
}
|
|
81
|
+
});
|
|
82
|
+
},
|
|
74
83
|
menu: function menu(provided) {
|
|
75
84
|
return _objectSpread(_objectSpread({}, provided), {}, {
|
|
76
85
|
boxShadow: "0 0 0 1px ".concat(theme.general.primaryColor, ", 0 4px 11px hsl(0deg 0% 0% / 10%)"),
|
|
77
86
|
borderRadius: 12,
|
|
78
87
|
marginBottom: 0,
|
|
79
|
-
marginTop: 4
|
|
88
|
+
marginTop: 4,
|
|
89
|
+
overflowY: 'overlay'
|
|
80
90
|
});
|
|
81
91
|
},
|
|
82
92
|
menuList: function menuList(provided) {
|
|
83
93
|
return _objectSpread(_objectSpread({}, provided), {}, {
|
|
94
|
+
borderRadius: 12,
|
|
84
95
|
paddingBottom: 0,
|
|
85
96
|
paddingTop: 0
|
|
86
97
|
});
|
|
@@ -90,15 +101,14 @@ var customStyles = function customStyles(theme) {
|
|
|
90
101
|
isFocused = _ref2.isFocused,
|
|
91
102
|
isSelected = _ref2.isSelected;
|
|
92
103
|
return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, provided), {}, {
|
|
104
|
+
backgroundColor: theme.Input.backgroundColor,
|
|
105
|
+
color: theme.general.color,
|
|
93
106
|
padding: '10px 18px',
|
|
94
107
|
cursor: isDisabled ? 'not-allowed' : 'pointer',
|
|
95
108
|
fontSize: '16px',
|
|
96
109
|
fontWeight: 300,
|
|
97
110
|
lineHeight: '24px'
|
|
98
|
-
},
|
|
99
|
-
backgroundColor: 'inherit',
|
|
100
|
-
color: 'inherit'
|
|
101
|
-
}), isFocused && {
|
|
111
|
+
}, isFocused && !isDisabled && {
|
|
102
112
|
background: theme.general.primaryColor,
|
|
103
113
|
borderColor: theme.general.primaryColor,
|
|
104
114
|
color: theme.Select.contrastTextColor
|
|
@@ -107,7 +117,18 @@ var customStyles = function customStyles(theme) {
|
|
|
107
117
|
background: theme.general.primaryColor,
|
|
108
118
|
borderColor: theme.general.primaryColor,
|
|
109
119
|
color: theme.Select.contrastTextColor
|
|
110
|
-
}
|
|
120
|
+
}
|
|
121
|
+
}, isDisabled && _objectSpread({
|
|
122
|
+
backgroundColor: theme.Input.backgroundColorDisabled,
|
|
123
|
+
color: theme.Select.disabledColor,
|
|
124
|
+
'&:hover, &:active, &:focus': {
|
|
125
|
+
backgroundColor: theme.Select.borderColor,
|
|
126
|
+
color: theme.Select.disabledColor
|
|
127
|
+
}
|
|
128
|
+
}, isFocused && {
|
|
129
|
+
backgroundColor: theme.Select.borderColor,
|
|
130
|
+
color: theme.Select.disabledColor
|
|
131
|
+
})), {}, {
|
|
111
132
|
'&:not(:last-of-type)': {
|
|
112
133
|
borderBottom: "1px solid ".concat(theme.Select.borderColor)
|
|
113
134
|
},
|
|
@@ -125,6 +146,12 @@ var customStyles = function customStyles(theme) {
|
|
|
125
146
|
width: '100%',
|
|
126
147
|
display: 'grid'
|
|
127
148
|
});
|
|
149
|
+
},
|
|
150
|
+
singleValue: function singleValue(provided, selectProps) {
|
|
151
|
+
var isSelectDisabled = selectProps.isDisabled;
|
|
152
|
+
return _objectSpread(_objectSpread({}, provided), {}, {
|
|
153
|
+
color: isSelectDisabled ? theme.Input.placeholderColor : theme.general.color
|
|
154
|
+
});
|
|
128
155
|
}
|
|
129
156
|
};
|
|
130
157
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["SelectStyles.tsx"],"names":["customStyles","theme","markInvalid","indicatorSeparator","display","indicatorsContainer","provided","container","isDisabled","selectProps","menuIsOpen","disabled","padding","height","minHeight","color","textShadow","position","backgroundColor","Input","backgroundColorDisabled","Select","disabledColor","cursor","boxShadow","general","dangerColor","primaryColor","borderColor","control","alignItems","appearance","menu","borderRadius","marginBottom","marginTop","menuList","paddingBottom","paddingTop","option","isFocused","isSelected","fontSize","fontWeight","lineHeight","background","contrastTextColor","borderBottom","valueContainer","width"],"mappings":";;;;;;;;;;;AAoBA;;;;;;AAEO,IAAMA,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD;AAAA,MAAeC,WAAf,uEAA6B,KAA7B;AAAA,SAAwC;AAClEC,IAAAA,kBAAkB,EAAE;AAAA,aAAO;AACzBC,QAAAA,OAAO,EAAE;AADgB,OAAP;AAAA,KAD8C;AAIlEC,IAAAA,mBAAmB,EAAE,6BAAAC,QAAQ;AAAA,+BACxBA,QADwB;AAAA,KAJqC;AAOlEC,IAAAA,SAAS,EAAE,mBAACD,QAAD,QAAyC;AAAA,UAA7BE,UAA6B,QAA7BA,UAA6B;AAAA,UAAjBC,WAAiB,QAAjBA,WAAiB;AAClD,UAAOC,UAAP,GAAqBD,WAArB,CAAOC,UAAP;AAEA,qGACK,
|
|
1
|
+
{"version":3,"sources":["SelectStyles.tsx"],"names":["customStyles","theme","markInvalid","indicatorSeparator","display","indicatorsContainer","provided","container","isDisabled","selectProps","menuIsOpen","isSelectDisabled","disabled","padding","height","minHeight","color","textShadow","position","backgroundColor","Input","backgroundColorDisabled","Select","disabledColor","cursor","boxShadow","general","dangerColor","primaryColor","borderColor","control","alignItems","appearance","dropdownIndicator","fill","placeholderColor","menu","borderRadius","marginBottom","marginTop","overflowY","menuList","paddingBottom","paddingTop","option","isFocused","isSelected","fontSize","fontWeight","lineHeight","background","contrastTextColor","borderBottom","valueContainer","width","singleValue"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2022 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\nimport {Theme} from '../Layout';\nimport {inputStyle} from './Input';\n\nexport const customStyles = (theme: Theme, markInvalid = false) => ({\n indicatorSeparator: () => ({\n display: 'none',\n }),\n indicatorsContainer: provided => ({\n ...provided,\n }),\n container: (provided, {isDisabled, selectProps}) => {\n const {menuIsOpen} = selectProps;\n const isSelectDisabled = selectProps.isDisabled;\n\n return {\n ...inputStyle(theme, {disabled: isDisabled, markInvalid}),\n padding: 0,\n height: 'auto',\n minHeight: '48px',\n '&:-moz-focusring': {\n color: 'transparent',\n textShadow: '0 0 0 #000',\n },\n position: 'relative',\n ...(isDisabled && {\n backgroundColor: theme.Input.backgroundColorDisabled,\n color: theme.Select.disabledColor,\n cursor: 'default',\n }),\n ...(markInvalid && {\n boxShadow: `0 0 0 1px ${theme.general.dangerColor}`,\n }),\n ...(menuIsOpen && {\n boxShadow: `0 0 0 1px ${theme.general.primaryColor}`,\n }),\n ...(!menuIsOpen && {\n '&:hover': {\n boxShadow: !isSelectDisabled && `0 0 0 1px ${theme.Select.borderColor}`,\n },\n '&:focus, &:active': {\n boxShadow: !isSelectDisabled && `0 0 0 1px ${theme.general.primaryColor}`,\n },\n }),\n cursor: !isSelectDisabled && 'pointer',\n };\n },\n control: () => ({\n display: 'flex',\n alignItems: 'center',\n appearance: 'none',\n padding: '0 8px 0 16px',\n height: 'auto',\n minHeight: '48px',\n }),\n dropdownIndicator: (provided, selectProps) => {\n const isSelectDisabled = selectProps.isDisabled;\n return {\n ...provided,\n '& > svg': {\n fill: isSelectDisabled && theme.Input.placeholderColor,\n },\n };\n },\n menu: provided => ({\n ...provided,\n boxShadow: `0 0 0 1px ${theme.general.primaryColor}, 0 4px 11px hsl(0deg 0% 0% / 10%)`,\n borderRadius: 12,\n marginBottom: 0,\n marginTop: 4,\n overflowY: 'overlay',\n }),\n menuList: provided => ({\n ...provided,\n borderRadius: 12,\n paddingBottom: 0,\n paddingTop: 0,\n }),\n option: (provided, {isDisabled, isFocused, isSelected}) => ({\n ...provided,\n backgroundColor: theme.Input.backgroundColor,\n color: theme.general.color,\n padding: '10px 18px',\n cursor: isDisabled ? 'not-allowed' : 'pointer',\n fontSize: '16px',\n fontWeight: 300,\n lineHeight: '24px',\n ...(isFocused &&\n !isDisabled && {\n background: theme.general.primaryColor,\n borderColor: theme.general.primaryColor,\n color: theme.Select.contrastTextColor,\n }),\n '&:hover, &:active, &:focus': {\n background: theme.general.primaryColor,\n borderColor: theme.general.primaryColor,\n color: theme.Select.contrastTextColor,\n },\n ...(isDisabled && {\n backgroundColor: theme.Input.backgroundColorDisabled,\n color: theme.Select.disabledColor,\n '&:hover, &:active, &:focus': {\n backgroundColor: theme.Select.borderColor,\n color: theme.Select.disabledColor,\n },\n ...(isFocused && {\n backgroundColor: theme.Select.borderColor,\n color: theme.Select.disabledColor,\n }),\n }),\n '&:not(:last-of-type)': {\n borderBottom: `1px solid ${theme.Select.borderColor}`,\n },\n '&:first-of-type': {\n borderRadius: '12px 12px 0 0',\n },\n '&:last-of-type': {\n borderRadius: '0 0 12px 12px',\n },\n }),\n valueContainer: provided => ({\n ...provided,\n padding: 0,\n width: '100%',\n display: 'grid',\n }),\n singleValue: (provided, selectProps) => {\n const isSelectDisabled = selectProps.isDisabled;\n return {\n ...provided,\n color: isSelectDisabled ? theme.Input.placeholderColor : theme.general.color,\n };\n },\n});\n"],"file":"SelectStyles.js"}
|
package/src/Layout/MatchMedia.js
CHANGED
|
@@ -43,24 +43,28 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
43
43
|
*/
|
|
44
44
|
|
|
45
45
|
/** @jsx jsx */
|
|
46
|
+
|
|
47
|
+
/* @jsxFrag React.Fragment */
|
|
46
48
|
var useMatchMedia = function useMatchMedia(query) {
|
|
47
|
-
var matchMedia =
|
|
49
|
+
var matchMedia = (0, _react2.useMemo)(function () {
|
|
50
|
+
return window.matchMedia("(".concat(query, ")"));
|
|
51
|
+
}, [query]);
|
|
48
52
|
|
|
49
53
|
var _useState = (0, _react2.useState)(matchMedia.matches),
|
|
50
54
|
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
51
55
|
isMatching = _useState2[0],
|
|
52
56
|
setIsMatching = _useState2[1];
|
|
53
57
|
|
|
54
|
-
var updateMatching = function updateMatching() {
|
|
55
|
-
|
|
58
|
+
var updateMatching = function updateMatching(event) {
|
|
59
|
+
setIsMatching(event.matches);
|
|
56
60
|
};
|
|
57
61
|
|
|
58
62
|
(0, _react2.useEffect)(function () {
|
|
59
|
-
matchMedia.
|
|
63
|
+
matchMedia.addEventListener('change', updateMatching);
|
|
60
64
|
return function () {
|
|
61
|
-
return matchMedia.
|
|
65
|
+
return matchMedia.removeEventListener('change', updateMatching);
|
|
62
66
|
};
|
|
63
|
-
});
|
|
67
|
+
}, [matchMedia]);
|
|
64
68
|
return isMatching;
|
|
65
69
|
};
|
|
66
70
|
|
|
@@ -72,7 +76,7 @@ var MatchMedia = function MatchMedia(_ref) {
|
|
|
72
76
|
not = _ref.not;
|
|
73
77
|
var matchQuery = useMatchMedia(_mediaQueries.QUERY[query] || query);
|
|
74
78
|
var isMatching = not ? !matchQuery : matchQuery;
|
|
75
|
-
return (0, _react.jsx)(_react2["default"].Fragment, null,
|
|
79
|
+
return isMatching ? (0, _react.jsx)(_react2["default"].Fragment, null, children) : null;
|
|
76
80
|
};
|
|
77
81
|
|
|
78
82
|
exports.MatchMedia = MatchMedia;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["MatchMedia.tsx"],"names":["useMatchMedia","query","matchMedia","window","matches","isMatching","setIsMatching","updateMatching","
|
|
1
|
+
{"version":3,"sources":["MatchMedia.tsx"],"names":["useMatchMedia","query","matchMedia","window","matches","isMatching","setIsMatching","updateMatching","event","addEventListener","removeEventListener","MatchMedia","children","not","matchQuery","QUERY","IsDesktop","props","QueryKeys","DESKTOP","IsDesktopXL","DESKTOP_XL","IsMobile","MOBILE","IsMobileDown","MOBILE_DOWN","IsMobileUp","MOBILE_UP","IsTablet","TABLET","IsTabletDown","TABLET_DOWN","IsTabletUp","TABLET_UP"],"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 */\n/* @jsxFrag React.Fragment */\nimport {jsx} from '@emotion/react';\nimport React, {ReactFragment, useEffect, useMemo, useState} from 'react';\n\nimport {QUERY, QueryKeys} from '../mediaQueries';\n\ntype Query = string | QueryKeys;\n\nexport interface MatchMediaProps extends React.HTMLProps<ReactFragment> {\n not?: boolean;\n query: Query;\n}\n\nexport const useMatchMedia = (query: Query) => {\n const matchMedia = useMemo(() => window.matchMedia(`(${query})`), [query]);\n\n const [isMatching, setIsMatching] = useState(matchMedia.matches);\n\n const updateMatching = (event: MediaQueryListEvent) => {\n setIsMatching(event.matches);\n };\n\n useEffect(() => {\n matchMedia.addEventListener('change', updateMatching);\n return () => matchMedia.removeEventListener('change', updateMatching);\n }, [matchMedia]);\n\n return isMatching;\n};\n\nexport const MatchMedia: React.FC<MatchMediaProps> = ({query, children, not}) => {\n const matchQuery = useMatchMedia(QUERY[query] || query);\n const isMatching = not ? !matchQuery : matchQuery;\n return isMatching ? <>{children}</> : null;\n};\n\nexport type NamedMatchMediaProps = Omit<MatchMediaProps, 'query'>;\n\nexport const IsDesktop = (props: NamedMatchMediaProps) => <MatchMedia query={QueryKeys.DESKTOP} {...props} />;\nexport const IsDesktopXL = (props: NamedMatchMediaProps) => <MatchMedia query={QueryKeys.DESKTOP_XL} {...props} />;\nexport const IsMobile = (props: NamedMatchMediaProps) => <MatchMedia query={QueryKeys.MOBILE} {...props} />;\nexport const IsMobileDown = (props: NamedMatchMediaProps) => <MatchMedia query={QueryKeys.MOBILE_DOWN} {...props} />;\nexport const IsMobileUp = (props: NamedMatchMediaProps) => <MatchMedia query={QueryKeys.MOBILE_UP} {...props} />;\nexport const IsTablet = (props: NamedMatchMediaProps) => <MatchMedia query={QueryKeys.TABLET} {...props} />;\nexport const IsTabletDown = (props: NamedMatchMediaProps) => <MatchMedia query={QueryKeys.TABLET_DOWN} {...props} />;\nexport const IsTabletUp = (props: NamedMatchMediaProps) => <MatchMedia query={QueryKeys.TABLET_UP} {...props} />;\n"],"file":"MatchMedia.js"}
|
package/src/Text/Link.d.ts
CHANGED
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
2
|
import { CSSObject, jsx } from '@emotion/react';
|
|
3
|
-
import
|
|
3
|
+
import { Theme } from '../Layout';
|
|
4
4
|
import { TextProps } from './Text';
|
|
5
|
+
export declare enum LinkVariant {
|
|
6
|
+
PRIMARY = "primary",
|
|
7
|
+
SECONDARY = "secondary"
|
|
8
|
+
}
|
|
5
9
|
export interface LinkProps<T = HTMLAnchorElement> extends TextProps<T> {
|
|
10
|
+
variant?: LinkVariant;
|
|
6
11
|
}
|
|
7
12
|
export declare const linkStyle: <T>(theme: Theme, props: LinkProps<T>) => CSSObject;
|
|
8
13
|
export declare const filterLinkProps: (props: LinkProps) => Object;
|
package/src/Text/Link.js
CHANGED
|
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.Link = exports.filterLinkProps = exports.linkStyle = void 0;
|
|
8
|
+
exports.Link = exports.filterLinkProps = exports.linkStyle = exports.LinkVariant = void 0;
|
|
9
9
|
|
|
10
10
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
11
|
|
|
@@ -25,40 +25,53 @@ var _util = require("../util");
|
|
|
25
25
|
|
|
26
26
|
var _Text = require("./Text");
|
|
27
27
|
|
|
28
|
-
var _excluded = ["
|
|
28
|
+
var _excluded = ["variant", "color"];
|
|
29
29
|
|
|
30
30
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
31
31
|
|
|
32
32
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
33
33
|
|
|
34
|
+
var LinkVariant;
|
|
35
|
+
exports.LinkVariant = LinkVariant;
|
|
36
|
+
|
|
37
|
+
(function (LinkVariant) {
|
|
38
|
+
LinkVariant["PRIMARY"] = "primary";
|
|
39
|
+
LinkVariant["SECONDARY"] = "secondary";
|
|
40
|
+
})(LinkVariant || (exports.LinkVariant = LinkVariant = {}));
|
|
41
|
+
|
|
34
42
|
var linkStyle = function linkStyle(theme, _ref) {
|
|
35
|
-
var
|
|
36
|
-
|
|
43
|
+
var _Color;
|
|
44
|
+
|
|
45
|
+
var _ref$variant = _ref.variant,
|
|
46
|
+
variant = _ref$variant === void 0 ? LinkVariant.SECONDARY : _ref$variant,
|
|
37
47
|
_ref$color = _ref.color,
|
|
38
48
|
color = _ref$color === void 0 ? theme.general.color : _ref$color,
|
|
39
|
-
_ref$fontSize = _ref.fontSize,
|
|
40
|
-
fontSize = _ref$fontSize === void 0 ? '11px' : _ref$fontSize,
|
|
41
|
-
_ref$textTransform = _ref.textTransform,
|
|
42
|
-
textTransform = _ref$textTransform === void 0 ? 'uppercase' : _ref$textTransform,
|
|
43
49
|
props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
|
44
50
|
var darker = 0.16;
|
|
45
|
-
var hoverColor = (0, _color["default"])(color).mix((0, _color["default"])(_colors.COLOR.BLACK), darker).toString();
|
|
46
|
-
return _objectSpread(_objectSpread({}, (0, _Text.textStyle)(theme, _objectSpread({
|
|
47
|
-
|
|
48
|
-
color: color,
|
|
49
|
-
fontSize: fontSize,
|
|
50
|
-
textTransform: textTransform
|
|
51
|
+
var hoverColor = color === _colors.COLOR.TEXT ? (_Color = (0, _color["default"])(color)) === null || _Color === void 0 ? void 0 : _Color.mix((0, _color["default"])(_colors.COLOR.BLACK), darker).toString() : _colors.COLOR.BLACK;
|
|
52
|
+
return _objectSpread(_objectSpread(_objectSpread({}, (0, _Text.textStyle)(theme, _objectSpread({
|
|
53
|
+
color: color
|
|
51
54
|
}, props))), {}, {
|
|
52
|
-
'&:hover': {
|
|
53
|
-
color: hoverColor
|
|
54
|
-
},
|
|
55
|
-
'&:visited, &:link, &:active': {
|
|
56
|
-
color: color
|
|
57
|
-
},
|
|
58
55
|
color: color,
|
|
59
56
|
cursor: 'pointer',
|
|
60
57
|
textDecoration: 'none',
|
|
61
|
-
|
|
58
|
+
'&:visited, &:link, &:active': {
|
|
59
|
+
color: color
|
|
60
|
+
}
|
|
61
|
+
}, variant === LinkVariant.PRIMARY && {
|
|
62
|
+
'&:hover, &:visited:hover': {
|
|
63
|
+
color: theme.general.primaryColor
|
|
64
|
+
},
|
|
65
|
+
textDecoration: 'underline',
|
|
66
|
+
textUnderlineOffset: '2px'
|
|
67
|
+
}), variant === LinkVariant.SECONDARY && {
|
|
68
|
+
bold: true,
|
|
69
|
+
fontSize: '11px',
|
|
70
|
+
textTransform: 'uppercase',
|
|
71
|
+
transition: _motions.defaultTransition,
|
|
72
|
+
'&:hover': {
|
|
73
|
+
color: hoverColor
|
|
74
|
+
}
|
|
62
75
|
});
|
|
63
76
|
};
|
|
64
77
|
|
package/src/Text/Link.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Link.tsx"],"names":["
|
|
1
|
+
{"version":3,"sources":["Link.tsx"],"names":["LinkVariant","linkStyle","theme","variant","SECONDARY","color","general","props","darker","hoverColor","COLOR","TEXT","mix","BLACK","toString","cursor","textDecoration","PRIMARY","primaryColor","textUnderlineOffset","bold","fontSize","textTransform","transition","defaultTransition","filterLinkProps","Link","children"],"mappings":";;;;;;;;;;;;;;;AAoBA;;AACA;;AAEA;;AACA;;AAEA;;AACA;;;;;;;;IAEYA,W;;;WAAAA,W;AAAAA,EAAAA,W;AAAAA,EAAAA,W;GAAAA,W,2BAAAA,W;;AASL,IAAMC,SAA8D,GAAG,SAAjEA,SAAiE,CAC5EC,KAD4E,QAGzE;AAAA;;AAAA,0BADFC,OACE;AAAA,MADFA,OACE,6BADQH,WAAW,CAACI,SACpB;AAAA,wBAD+BC,KAC/B;AAAA,MAD+BA,KAC/B,2BADuCH,KAAK,CAACI,OAAN,CAAcD,KACrD;AAAA,MAD+DE,KAC/D;AACH,MAAMC,MAAM,GAAG,IAAf;AACA,MAAMC,UAAU,GAAGJ,KAAK,KAAKK,cAAMC,IAAhB,aAAuB,uBAAMN,KAAN,CAAvB,2CAAuB,OAAcO,GAAd,CAAkB,uBAAMF,cAAMG,KAAZ,CAAlB,EAAsCL,MAAtC,EAA8CM,QAA9C,EAAvB,GAAkFJ,cAAMG,KAA3G;AACA,uDACK,qBAAUX,KAAV;AAAkBG,IAAAA,KAAK,EAALA;AAAlB,KAA4BE,KAA5B,EADL;AAEEF,IAAAA,KAAK,EAAEA,KAFT;AAGEU,IAAAA,MAAM,EAAE,SAHV;AAIEC,IAAAA,cAAc,EAAE,MAJlB;AAKE,mCAA+B;AAC7BX,MAAAA,KAAK,EAAEA;AADsB;AALjC,KAQMF,OAAO,KAAKH,WAAW,CAACiB,OAAxB,IAAmC;AACrC,gCAA4B;AAC1BZ,MAAAA,KAAK,EAAEH,KAAK,CAACI,OAAN,CAAcY;AADK,KADS;AAIrCF,IAAAA,cAAc,EAAE,WAJqB;AAKrCG,IAAAA,mBAAmB,EAAE;AALgB,GARzC,GAeMhB,OAAO,KAAKH,WAAW,CAACI,SAAxB,IAAqC;AACvCgB,IAAAA,IAAI,EAAE,IADiC;AAEvCC,IAAAA,QAAQ,EAAE,MAF6B;AAGvCC,IAAAA,aAAa,EAAE,WAHwB;AAIvCC,IAAAA,UAAU,EAAEC,0BAJ2B;AAKvC,eAAW;AACTnB,MAAAA,KAAK,EAAEI;AADE;AAL4B,GAf3C;AAyBD,CA/BM;;;;AAiCA,IAAMgB,eAAe,GAAG,SAAlBA,eAAkB,CAAClB,KAAD;AAAA,SAAsB,uBAAY,2BAAgBA,KAAhB,CAAZ,EAAiD,EAAjD,CAAtB;AAAA,CAAxB;;;;AAEA,IAAMmB,IAAI,GAAG,SAAPA,IAAO,CAACnB,KAAD,EAAsB;AACxC,SACE;AAAG,IAAA,GAAG,EAAE,aAACL,KAAD;AAAA,aAAkBD,SAAS,CAACC,KAAD,EAAQK,KAAR,CAA3B;AAAA,KAAR;AAAmD,IAAA,GAAG,EAAC;AAAvD,KAAiFkB,eAAe,CAAClB,KAAD,CAAhG,GACGA,KAAK,CAACoB,QADT,CADF;AAKD,CANM","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 Color from 'color';\n\nimport {COLOR} from '../Identity/colors';\nimport {defaultTransition} from '../Identity/motions';\nimport {Theme} from '../Layout';\nimport {filterProps} from '../util';\nimport {TextProps, filterTextProps, textStyle} from './Text';\n\nexport enum LinkVariant {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n}\n\nexport interface LinkProps<T = HTMLAnchorElement> extends TextProps<T> {\n variant?: LinkVariant;\n}\n\nexport const linkStyle: <T>(theme: Theme, props: LinkProps<T>) => CSSObject = (\n theme,\n {variant = LinkVariant.SECONDARY, color = theme.general.color, ...props},\n) => {\n const darker = 0.16;\n const hoverColor = color === COLOR.TEXT ? Color(color)?.mix(Color(COLOR.BLACK), darker).toString() : COLOR.BLACK;\n return {\n ...textStyle(theme, {color, ...props}),\n color: color,\n cursor: 'pointer',\n textDecoration: 'none',\n '&:visited, &:link, &:active': {\n color: color,\n },\n ...(variant === LinkVariant.PRIMARY && {\n '&:hover, &:visited:hover': {\n color: theme.general.primaryColor,\n },\n textDecoration: 'underline',\n textUnderlineOffset: '2px',\n }),\n ...(variant === LinkVariant.SECONDARY && {\n bold: true,\n fontSize: '11px',\n textTransform: 'uppercase',\n transition: defaultTransition,\n '&:hover': {\n color: hoverColor,\n },\n }),\n };\n};\n\nexport const filterLinkProps = (props: LinkProps) => filterProps(filterTextProps(props) as LinkProps, []);\n\nexport const Link = (props: LinkProps) => {\n return (\n <a css={(theme: Theme) => linkStyle(theme, props)} rel=\"noopener noreferrer\" {...filterLinkProps(props)}>\n {props.children}\n </a>\n );\n};\n"],"file":"Link.js"}
|
package/src/Text/Text.js
CHANGED
|
@@ -65,7 +65,7 @@ var textStyle = function textStyle(theme, _ref) {
|
|
|
65
65
|
_ref$truncate = _ref.truncate,
|
|
66
66
|
truncate = _ref$truncate === void 0 ? false : _ref$truncate;
|
|
67
67
|
return {
|
|
68
|
-
color: muted ? _Identity.COLOR.GRAY :
|
|
68
|
+
color: muted ? _Identity.COLOR.GRAY : color,
|
|
69
69
|
display: block ? 'block' : 'inline',
|
|
70
70
|
fontSize: fontSize,
|
|
71
71
|
fontWeight: bold ? 600 : light ? 200 : 300,
|
package/src/Text/Text.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Text.tsx"],"names":["filterTextProps","props","textStyle","theme","block","bold","center","color","general","fontSize","light","muted","noWrap","textTransform","truncate","COLOR","GRAY","display","fontWeight","overflow","undefined","textAlign","textOverflow","whiteSpace","Text","React","forwardRef","ref","Bold","Small","Muted","Uppercase","Large"],"mappings":";;;;;;;;;;;AAoBA;;AACA;;AAIA;;AACA;;AA1BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAsBO,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAACC,KAAD,EAAsB;AACnD,SAAO,uBAAYA,KAAZ,EAAmB,CACxB,OADwB,EAExB,MAFwB,EAGxB,QAHwB,EAIxB,OAJwB,EAKxB,UALwB,EAMxB,OANwB,EAOxB,OAPwB,EAQxB,QARwB,EASxB,eATwB,EAUxB,UAVwB,CAAnB,CAAP;AAYD,CAbM;;;;AAeA,IAAMC,SAA8D,GAAG,SAAjEA,SAAiE,CAC5EC,KAD4E;AAAA,wBAG1EC,KAH0E;AAAA,MAG1EA,KAH0E,2BAGlE,KAHkE;AAAA,uBAI1EC,IAJ0E;AAAA,MAI1EA,IAJ0E,0BAInE,KAJmE;AAAA,yBAK1EC,MAL0E;AAAA,MAK1EA,MAL0E,4BAKjE,KALiE;AAAA,wBAM1EC,KAN0E;AAAA,MAM1EA,KAN0E,2BAMlEJ,KAAK,CAACK,OAAN,CAAcD,KANoD;AAAA,2BAO1EE,QAP0E;AAAA,MAO1EA,QAP0E,8BAO/D,MAP+D;AAAA,wBAQ1EC,KAR0E;AAAA,MAQ1EA,KAR0E,2BAQlE,KARkE;AAAA,wBAS1EC,KAT0E;AAAA,MAS1EA,KAT0E,2BASlE,KATkE;AAAA,yBAU1EC,MAV0E;AAAA,MAU1EA,MAV0E,4BAUjE,KAViE;AAAA,gCAW1EC,aAX0E;AAAA,MAW1EA,aAX0E,mCAW1D,MAX0D;AAAA,2BAY1EC,QAZ0E;AAAA,MAY1EA,QAZ0E,8BAY/D,KAZ+D;AAAA,SAcxE;AACJP,IAAAA,KAAK,EAAEI,KAAK,GAAGI,gBAAMC,IAAT,
|
|
1
|
+
{"version":3,"sources":["Text.tsx"],"names":["filterTextProps","props","textStyle","theme","block","bold","center","color","general","fontSize","light","muted","noWrap","textTransform","truncate","COLOR","GRAY","display","fontWeight","overflow","undefined","textAlign","textOverflow","whiteSpace","Text","React","forwardRef","ref","Bold","Small","Muted","Uppercase","Large"],"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';\nimport React from 'react';\nimport type {Property} from 'csstype';\n\nimport type {Theme} from '../Layout';\nimport {filterProps} from '../util';\nimport {COLOR} from '../Identity';\n\nexport interface TextProps<T = HTMLSpanElement> extends React.PropsWithRef<React.HTMLProps<T>> {\n block?: boolean;\n bold?: boolean;\n center?: boolean;\n color?: string;\n fontSize?: string;\n light?: boolean;\n muted?: boolean;\n noWrap?: boolean;\n textTransform?: Property.TextTransform;\n truncate?: boolean;\n}\n\nexport const filterTextProps = (props: TextProps) => {\n return filterProps(props, [\n 'block',\n 'bold',\n 'center',\n 'color',\n 'fontSize',\n 'light',\n 'muted',\n 'noWrap',\n 'textTransform',\n 'truncate',\n ]);\n};\n\nexport const textStyle: <T>(theme: Theme, props: TextProps<T>) => CSSObject = (\n theme,\n {\n block = false,\n bold = false,\n center = false,\n color = theme.general.color,\n fontSize = '16px',\n light = false,\n muted = false,\n noWrap = false,\n textTransform = 'none',\n truncate = false,\n },\n) => ({\n color: muted ? COLOR.GRAY : color,\n display: block ? 'block' : 'inline',\n fontSize: fontSize,\n fontWeight: bold ? 600 : light ? 200 : 300,\n overflow: truncate ? 'hidden' : undefined,\n textAlign: center ? 'center' : 'left',\n textOverflow: truncate ? 'ellipsis' : undefined,\n textTransform: textTransform,\n whiteSpace: noWrap ? 'nowrap' : undefined,\n});\n\nexport const Text = React.forwardRef<HTMLSpanElement, TextProps<HTMLSpanElement>>((props, ref) => (\n <span ref={ref} css={(theme: Theme) => textStyle(theme, props)} {...filterTextProps(props)} />\n));\n\nexport const Bold = React.forwardRef<HTMLSpanElement, TextProps<HTMLSpanElement>>((props, ref) => (\n <Text ref={ref} bold {...props} />\n));\nexport const Small = React.forwardRef<HTMLSpanElement, TextProps<HTMLSpanElement>>((props, ref) => (\n <Text ref={ref} fontSize={'12px'} {...props} />\n));\nexport const Muted = React.forwardRef<HTMLSpanElement, TextProps<HTMLSpanElement>>((props, ref) => (\n <Text ref={ref} muted {...props} />\n));\nexport const Uppercase = React.forwardRef<HTMLSpanElement, TextProps<HTMLSpanElement>>((props, ref) => (\n <Text ref={ref} textTransform={'uppercase'} {...props} />\n));\nexport const Large = React.forwardRef<HTMLSpanElement, TextProps<HTMLSpanElement>>((props, ref) => (\n <Text ref={ref} fontSize={'48px'} light {...props} />\n));\n"],"file":"Text.js"}
|