@itcase/ui 1.0.2 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Accordion.js +4 -4
- package/dist/components/Avatar.js +1 -1
- package/dist/components/Background.js +1 -1
- package/dist/components/Breadcrumbs.js +5 -5
- package/dist/components/Button.js +1 -1
- package/dist/components/Caption.js +1 -1
- package/dist/components/Card.js +1 -1
- package/dist/components/Cell.js +1 -1
- package/dist/components/Checkbox.js +4 -4
- package/dist/components/Chips.js +2 -2
- package/dist/components/ContextMenu.js +4 -2
- package/dist/components/CookiesWarning.js +1 -1
- package/dist/components/Counter.js +1 -1
- package/dist/components/Divider.js +1 -1
- package/dist/components/Dropdown.js +87 -27
- package/dist/components/Emoji.js +1 -1
- package/dist/components/Fader.js +1 -1
- package/dist/components/Flex.js +1 -1
- package/dist/components/FormField.js +8 -8
- package/dist/components/Grid.js +3 -3
- package/dist/components/Group.js +1 -1
- package/dist/components/Icon.js +1 -1
- package/dist/components/Image.js +1 -1
- package/dist/components/Label.js +3 -2
- package/dist/components/LanguageSelector.js +1 -1
- package/dist/components/Link.js +1 -1
- package/dist/components/List.js +1 -1
- package/dist/components/Loader.js +1 -1
- package/dist/components/Logo.js +13 -11
- package/dist/components/Menu.js +1 -1
- package/dist/components/MenuItem.js +1 -1
- package/dist/components/Notification.js +4 -4
- package/dist/components/Pagination.js +1 -1
- package/dist/components/Popup.js +3 -2
- package/dist/components/Profile.js +1 -1
- package/dist/components/RangeSlider.js +24 -14
- package/dist/components/Search.js +2 -18301
- package/dist/components/Select.js +7820 -21
- package/dist/components/SiteMenu.js +1 -1
- package/dist/components/Swiper.js +6 -2
- package/dist/components/Switch.js +20 -5
- package/dist/components/Text.js +1 -1
- package/dist/components/Tile.js +1 -1
- package/dist/components/Title.js +1 -1
- package/dist/components/Tooltip.js +1 -1
- package/dist/components/Video.js +1 -1
- package/dist/components/Wrapper.js +1 -1
- package/dist/css/components/RangeSlider/RangeSlider.css +18 -1
- package/dist/css/components/Swiper/Swiper.css +10 -2
- package/dist/hooks/useStyles.js +1 -1
- package/dist/{useStyles-77c3b520.js → useStyles-e4accb53.js} +1 -1
- package/package.json +24 -24
- package/dist/SelectContainer-e2544642.js +0 -7717
- package/dist/_commonjsHelpers-facfc6d6.js +0 -7
|
@@ -10,7 +10,7 @@ var shape = require('../constants/componentProps/shape.js');
|
|
|
10
10
|
var index = require('./Icon.js');
|
|
11
11
|
var index$1 = require('../index-f1505c84.js');
|
|
12
12
|
var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
|
|
13
|
-
var useStyles = require('../useStyles-
|
|
13
|
+
var useStyles = require('../useStyles-e4accb53.js');
|
|
14
14
|
require('react-inlinesvg');
|
|
15
15
|
require('../constants/componentProps/iconSize.js');
|
|
16
16
|
require('../constants/componentProps/strokeColor.js');
|
|
@@ -23,12 +23,12 @@ require('../constants/componentProps/textWeight.js');
|
|
|
23
23
|
require('../constants/componentProps/type.js');
|
|
24
24
|
require('../constants/componentProps/underline.js');
|
|
25
25
|
require('lodash/camelCase');
|
|
26
|
-
require('../context/UIContext.js');
|
|
27
|
-
require('../hooks/useMediaQueries.js');
|
|
28
|
-
require('react-responsive');
|
|
29
26
|
require('lodash/maxBy');
|
|
30
27
|
require('lodash/upperFirst');
|
|
31
28
|
require('../hooks/styleAttributes.js');
|
|
29
|
+
require('../context/UIContext.js');
|
|
30
|
+
require('../hooks/useMediaQueries.js');
|
|
31
|
+
require('react-responsive');
|
|
32
32
|
|
|
33
33
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
34
34
|
|
|
@@ -12,7 +12,7 @@ require('../constants/componentProps/resizeMode.js');
|
|
|
12
12
|
require('../constants/componentProps/shape.js');
|
|
13
13
|
require('../constants/componentProps/verticalContentAlign.js');
|
|
14
14
|
require('../constants/componentProps/width.js');
|
|
15
|
-
require('../useStyles-
|
|
15
|
+
require('../useStyles-e4accb53.js');
|
|
16
16
|
require('lodash/camelCase');
|
|
17
17
|
require('lodash/maxBy');
|
|
18
18
|
require('lodash/upperFirst');
|
|
@@ -7,7 +7,7 @@ var fill = require('../constants/componentProps/fill.js');
|
|
|
7
7
|
var shape = require('../constants/componentProps/shape.js');
|
|
8
8
|
var width = require('../constants/componentProps/width.js');
|
|
9
9
|
var position = require('../constants/componentProps/position.js');
|
|
10
|
-
var useStyles = require('../useStyles-
|
|
10
|
+
var useStyles = require('../useStyles-e4accb53.js');
|
|
11
11
|
var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
|
|
12
12
|
require('lodash/camelCase');
|
|
13
13
|
require('lodash/maxBy');
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var useStyles = require('../useStyles-
|
|
3
|
+
var useStyles = require('../useStyles-e4accb53.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var PropTypes = require('prop-types');
|
|
6
6
|
var clsx = require('clsx');
|
|
@@ -23,16 +23,16 @@ require('react-responsive');
|
|
|
23
23
|
require('react-inlinesvg');
|
|
24
24
|
require('../constants/componentProps/iconSize.js');
|
|
25
25
|
require('../constants/componentProps/strokeColor.js');
|
|
26
|
-
require('../constants/componentProps/textColor.js');
|
|
27
|
-
require('../constants/componentProps/textColorActive.js');
|
|
28
|
-
require('../constants/componentProps/textColorHover.js');
|
|
29
26
|
require('../constants/componentProps/size.js');
|
|
27
|
+
require('../constants/componentProps/textColor.js');
|
|
28
|
+
require('../constants/componentProps/textGradient.js');
|
|
30
29
|
require('../constants/componentProps/textStyle.js');
|
|
31
30
|
require('../constants/componentProps/textWeight.js');
|
|
32
|
-
require('../constants/componentProps/textGradient.js');
|
|
33
31
|
require('../constants/componentProps/type.js');
|
|
34
32
|
require('../constants/componentProps/underline.js');
|
|
35
33
|
require('lodash/castArray');
|
|
34
|
+
require('../constants/componentProps/textColorActive.js');
|
|
35
|
+
require('../constants/componentProps/textColorHover.js');
|
|
36
36
|
|
|
37
37
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
38
38
|
|
|
@@ -14,7 +14,7 @@ var index$1 = require('./Icon.js');
|
|
|
14
14
|
var index$2 = require('./Text.js');
|
|
15
15
|
var index = require('./Link.js');
|
|
16
16
|
var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
|
|
17
|
-
var useStyles = require('../useStyles-
|
|
17
|
+
var useStyles = require('../useStyles-e4accb53.js');
|
|
18
18
|
require('react-inlinesvg');
|
|
19
19
|
require('../constants/componentProps/iconSize.js');
|
|
20
20
|
require('../constants/componentProps/strokeColor.js');
|
|
@@ -7,7 +7,7 @@ var fill = require('../constants/componentProps/fill.js');
|
|
|
7
7
|
var fillGradient = require('../constants/componentProps/fillGradient.js');
|
|
8
8
|
var captionPosition = require('../constants/componentProps/captionPosition.js');
|
|
9
9
|
var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
|
|
10
|
-
var useStyles = require('../useStyles-
|
|
10
|
+
var useStyles = require('../useStyles-e4accb53.js');
|
|
11
11
|
require('lodash/castArray');
|
|
12
12
|
require('lodash/camelCase');
|
|
13
13
|
require('../context/UIContext.js');
|
package/dist/components/Card.js
CHANGED
|
@@ -14,7 +14,7 @@ require('../constants/componentProps/textColorActive.js');
|
|
|
14
14
|
require('../constants/componentProps/textColorHover.js');
|
|
15
15
|
require('../constants/componentProps/textStyle.js');
|
|
16
16
|
require('../constants/componentProps/textWeight.js');
|
|
17
|
-
require('../useStyles-
|
|
17
|
+
require('../useStyles-e4accb53.js');
|
|
18
18
|
require('lodash/camelCase');
|
|
19
19
|
require('lodash/maxBy');
|
|
20
20
|
require('lodash/upperFirst');
|
package/dist/components/Cell.js
CHANGED
|
@@ -13,7 +13,7 @@ require('../constants/componentProps/iconSize.js');
|
|
|
13
13
|
require('../constants/componentProps/shape.js');
|
|
14
14
|
require('../constants/componentProps/strokeColor.js');
|
|
15
15
|
require('./Link.js');
|
|
16
|
-
require('../useStyles-
|
|
16
|
+
require('../useStyles-e4accb53.js');
|
|
17
17
|
require('lodash/camelCase');
|
|
18
18
|
require('lodash/maxBy');
|
|
19
19
|
require('lodash/upperFirst');
|
|
@@ -49,12 +49,12 @@ function Checkbox(props) {
|
|
|
49
49
|
return /*#__PURE__*/React__default.default.createElement("div", {
|
|
50
50
|
className: clsx__default.default(className, 'checkbox', fillCheckmarkClass, fillCheckedClass, fillClass, fillDisableClass, shapeClass, borderColorClass)
|
|
51
51
|
}, /*#__PURE__*/React__default.default.createElement("input", {
|
|
52
|
-
type: "checkbox",
|
|
53
|
-
id: id,
|
|
54
52
|
checked: checked,
|
|
53
|
+
className: "checkbox__checkbox",
|
|
55
54
|
disabled: disabled,
|
|
56
|
-
|
|
57
|
-
|
|
55
|
+
id: id,
|
|
56
|
+
type: "checkbox",
|
|
57
|
+
onChange: onChange
|
|
58
58
|
}), /*#__PURE__*/React__default.default.createElement("div", {
|
|
59
59
|
className: "checkbox__bg"
|
|
60
60
|
}, "\xA0"), /*#__PURE__*/React__default.default.createElement("div", {
|
package/dist/components/Chips.js
CHANGED
|
@@ -11,7 +11,7 @@ var fill = require('../constants/componentProps/fill.js');
|
|
|
11
11
|
var shape = require('../constants/componentProps/shape.js');
|
|
12
12
|
var emojiSize = require('../constants/componentProps/emojiSize.js');
|
|
13
13
|
var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
|
|
14
|
-
var useStyles = require('../useStyles-
|
|
14
|
+
var useStyles = require('../useStyles-e4accb53.js');
|
|
15
15
|
require('../constants/componentProps/direction.js');
|
|
16
16
|
require('../constants/componentProps/horizontalResizeMode.js');
|
|
17
17
|
require('../constants/componentProps/textColor.js');
|
|
@@ -129,7 +129,7 @@ Chips.propTypes = {
|
|
|
129
129
|
type: PropTypes__default.default.string
|
|
130
130
|
};
|
|
131
131
|
Chips.defaultProps = {
|
|
132
|
-
label: '
|
|
132
|
+
label: ''
|
|
133
133
|
};
|
|
134
134
|
|
|
135
135
|
exports.Chips = Chips;
|
|
@@ -19,7 +19,7 @@ require('../constants/componentProps/textColorHover.js');
|
|
|
19
19
|
require('../constants/componentProps/size.js');
|
|
20
20
|
require('../constants/componentProps/textStyle.js');
|
|
21
21
|
require('../constants/componentProps/textWeight.js');
|
|
22
|
-
require('../useStyles-
|
|
22
|
+
require('../useStyles-e4accb53.js');
|
|
23
23
|
require('lodash/maxBy');
|
|
24
24
|
require('lodash/upperFirst');
|
|
25
25
|
require('../hooks/styleAttributes.js');
|
|
@@ -94,6 +94,7 @@ function ContextMenuItem(props) {
|
|
|
94
94
|
iconAfterFill = props.iconAfterFill,
|
|
95
95
|
iconAfterStroke = props.iconAfterStroke;
|
|
96
96
|
props.isActive;
|
|
97
|
+
var onClick = props.onClick;
|
|
97
98
|
var labelTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
|
|
98
99
|
propsKey: 'labelTextSize'
|
|
99
100
|
});
|
|
@@ -113,7 +114,8 @@ function ContextMenuItem(props) {
|
|
|
113
114
|
});
|
|
114
115
|
return /*#__PURE__*/React__default.default.createElement("div", {
|
|
115
116
|
className: clsx__default.default(className, 'context-menu__item', fillClass, fillHoverClass),
|
|
116
|
-
id: id
|
|
117
|
+
id: id,
|
|
118
|
+
onClick: onClick
|
|
117
119
|
}, /*#__PURE__*/React__default.default.createElement("div", {
|
|
118
120
|
className: "context-menu__item-wrapper"
|
|
119
121
|
}, iconBefore && /*#__PURE__*/React__default.default.createElement(index.Icon, {
|
|
@@ -18,7 +18,7 @@ require('../constants/componentProps/textColorHover.js');
|
|
|
18
18
|
require('../constants/componentProps/size.js');
|
|
19
19
|
require('../constants/componentProps/textStyle.js');
|
|
20
20
|
require('../constants/componentProps/textWeight.js');
|
|
21
|
-
require('../useStyles-
|
|
21
|
+
require('../useStyles-e4accb53.js');
|
|
22
22
|
require('../hooks/styleAttributes.js');
|
|
23
23
|
require('../constants/componentProps/borderType.js');
|
|
24
24
|
require('../constants/componentProps/fill.js');
|
|
@@ -14,7 +14,7 @@ require('../constants/componentProps/textColorActive.js');
|
|
|
14
14
|
require('../constants/componentProps/textColorHover.js');
|
|
15
15
|
require('../constants/componentProps/textStyle.js');
|
|
16
16
|
require('../constants/componentProps/textWeight.js');
|
|
17
|
-
require('../useStyles-
|
|
17
|
+
require('../useStyles-e4accb53.js');
|
|
18
18
|
require('lodash/camelCase');
|
|
19
19
|
require('lodash/maxBy');
|
|
20
20
|
require('lodash/upperFirst');
|
|
@@ -7,7 +7,7 @@ var fill = require('../constants/componentProps/fill.js');
|
|
|
7
7
|
var size = require('../constants/componentProps/size.js');
|
|
8
8
|
var direction = require('../constants/componentProps/direction.js');
|
|
9
9
|
var width = require('../constants/componentProps/width.js');
|
|
10
|
-
var useStyles = require('../useStyles-
|
|
10
|
+
var useStyles = require('../useStyles-e4accb53.js');
|
|
11
11
|
var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
|
|
12
12
|
require('lodash/camelCase');
|
|
13
13
|
require('lodash/maxBy');
|
|
@@ -6,20 +6,13 @@ var clsx = require('clsx');
|
|
|
6
6
|
var index = require('./Text.js');
|
|
7
7
|
var index$1 = require('./Button.js');
|
|
8
8
|
var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
|
|
9
|
+
var useStyles = require('../useStyles-e4accb53.js');
|
|
9
10
|
require('../constants/componentProps/textColor.js');
|
|
10
11
|
require('../constants/componentProps/textColorActive.js');
|
|
11
12
|
require('../constants/componentProps/textColorHover.js');
|
|
12
13
|
require('../constants/componentProps/size.js');
|
|
13
14
|
require('../constants/componentProps/textStyle.js');
|
|
14
15
|
require('../constants/componentProps/textWeight.js');
|
|
15
|
-
require('../useStyles-77c3b520.js');
|
|
16
|
-
require('lodash/camelCase');
|
|
17
|
-
require('lodash/maxBy');
|
|
18
|
-
require('lodash/upperFirst');
|
|
19
|
-
require('../hooks/styleAttributes.js');
|
|
20
|
-
require('../context/UIContext.js');
|
|
21
|
-
require('../hooks/useMediaQueries.js');
|
|
22
|
-
require('react-responsive');
|
|
23
16
|
require('../constants/componentProps/borderType.js');
|
|
24
17
|
require('../constants/componentProps/fill.js');
|
|
25
18
|
require('../constants/componentProps/horizontalResizeMode.js');
|
|
@@ -34,6 +27,13 @@ require('./Link.js');
|
|
|
34
27
|
require('../constants/componentProps/textGradient.js');
|
|
35
28
|
require('../constants/componentProps/underline.js');
|
|
36
29
|
require('lodash/castArray');
|
|
30
|
+
require('lodash/camelCase');
|
|
31
|
+
require('../context/UIContext.js');
|
|
32
|
+
require('../hooks/useMediaQueries.js');
|
|
33
|
+
require('react-responsive');
|
|
34
|
+
require('lodash/maxBy');
|
|
35
|
+
require('lodash/upperFirst');
|
|
36
|
+
require('../hooks/styleAttributes.js');
|
|
37
37
|
|
|
38
38
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
39
39
|
|
|
@@ -42,17 +42,18 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
|
|
|
42
42
|
var clsx__default = /*#__PURE__*/_interopDefault(clsx);
|
|
43
43
|
|
|
44
44
|
function Dropdown(props) {
|
|
45
|
-
props.
|
|
46
|
-
|
|
45
|
+
var animationClose = props.animationClose,
|
|
46
|
+
animationOpen = props.animationOpen,
|
|
47
47
|
children = props.children,
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
label = props.label,
|
|
51
|
-
labelIcon = props.labelIcon
|
|
48
|
+
className = props.className;
|
|
49
|
+
props.id;
|
|
50
|
+
var label = props.label,
|
|
51
|
+
labelIcon = props.labelIcon,
|
|
52
|
+
labelIconFill = props.labelIconFill;
|
|
52
53
|
props.labelIconOpen;
|
|
53
|
-
var
|
|
54
|
-
|
|
55
|
-
|
|
54
|
+
var set = props.set,
|
|
55
|
+
title = props.title;
|
|
56
|
+
var dropdownRef = React.useRef(null);
|
|
56
57
|
var _useState = React.useState(false),
|
|
57
58
|
isOpen = _useState[0],
|
|
58
59
|
setIsOpen = _useState[1];
|
|
@@ -61,7 +62,7 @@ function Dropdown(props) {
|
|
|
61
62
|
}),
|
|
62
63
|
animationState = _useState2[0],
|
|
63
64
|
setAnimationState = _useState2[1];
|
|
64
|
-
var onClick = React.useCallback(function (
|
|
65
|
+
var onClick = React.useCallback(function () {
|
|
65
66
|
setIsOpen(function (prevState) {
|
|
66
67
|
return !prevState;
|
|
67
68
|
});
|
|
@@ -71,6 +72,52 @@ function Dropdown(props) {
|
|
|
71
72
|
};
|
|
72
73
|
});
|
|
73
74
|
}, []);
|
|
75
|
+
var onAnimationEnd = React.useCallback(function (event) {
|
|
76
|
+
// When component is change his visibility(display) in DOM,
|
|
77
|
+
// animation of close can run unnecessary on showing element.
|
|
78
|
+
console.info('------ onAnimationEnd -------------');
|
|
79
|
+
console.log('event: ', event);
|
|
80
|
+
console.log('event.target: ', event.target);
|
|
81
|
+
console.log('isOpen: ', isOpen);
|
|
82
|
+
console.log('animationOpen: ', animationOpen);
|
|
83
|
+
console.log('animationClose: ', animationClose);
|
|
84
|
+
// const dropdownElement = dropdownRef.current
|
|
85
|
+
// console.log('dropdownElement', dropdownElement)
|
|
86
|
+
// console.log('dropdownElement hasClass', dropdownElement.hasClass(animationClose))
|
|
87
|
+
setAnimationState(function (prevState) {
|
|
88
|
+
return {
|
|
89
|
+
className: isOpen ? prevState.className : ''
|
|
90
|
+
};
|
|
91
|
+
});
|
|
92
|
+
}, [isOpen]);
|
|
93
|
+
|
|
94
|
+
// Close dropdown by click outside
|
|
95
|
+
React.useEffect(function () {
|
|
96
|
+
console.info('--------- useEffect Dropdown -------');
|
|
97
|
+
// Add a handler to keep track of the click target.
|
|
98
|
+
function onClickWindow(event) {
|
|
99
|
+
var dropdownElement = dropdownRef.current;
|
|
100
|
+
if (dropdownElement) {
|
|
101
|
+
// Is event target inside of dropdown element
|
|
102
|
+
var isContainsTarget = dropdownElement.contains(event.target);
|
|
103
|
+
// Is dropdown element has "open" class
|
|
104
|
+
var hasOpenClass = dropdownElement.classList.contains(animationOpen);
|
|
105
|
+
if (!isContainsTarget && hasOpenClass) {
|
|
106
|
+
// Trigger close event with animation
|
|
107
|
+
// dropdownElement.click() - trigger "onClickWindow" again
|
|
108
|
+
onClick();
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
// Add event listener for current dropdown on first render
|
|
113
|
+
window.addEventListener('click', onClickWindow);
|
|
114
|
+
return function () {
|
|
115
|
+
console.info('--------- UNMOUNT useEffect Dropdown -------');
|
|
116
|
+
// Remove event listener for current dropdown on unmount
|
|
117
|
+
window.removeEventListener('click', onClickWindow);
|
|
118
|
+
};
|
|
119
|
+
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
|
120
|
+
|
|
74
121
|
var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
|
|
75
122
|
prefix: 'fill_',
|
|
76
123
|
propsKey: 'fill'
|
|
@@ -107,29 +154,42 @@ function Dropdown(props) {
|
|
|
107
154
|
var labelTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
|
|
108
155
|
propsKey: 'labelTextSize'
|
|
109
156
|
});
|
|
157
|
+
var _useStyles = useStyles.useStyles(props),
|
|
158
|
+
styles = _useStyles.styles;
|
|
159
|
+
console.warn('====== Dropdown ========');
|
|
160
|
+
console.log('props: ', props);
|
|
161
|
+
console.log('isOpen: ', isOpen);
|
|
162
|
+
console.log('animationState: ', animationState);
|
|
110
163
|
return /*#__PURE__*/React__default.default.createElement("div", {
|
|
111
164
|
className: clsx__default.default(className, 'dropdown', set && "dropdown_set_" + set, shapeClass, fillClass, fillHoverClass, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className),
|
|
165
|
+
ref: dropdownRef,
|
|
166
|
+
style: styles,
|
|
112
167
|
onClick: onClick
|
|
113
168
|
}, title && /*#__PURE__*/React__default.default.createElement(index.Text, {
|
|
114
|
-
textColor: titleTextColorClass,
|
|
115
169
|
size: titleSizeClass,
|
|
170
|
+
textColor: titleTextColorClass,
|
|
116
171
|
textWeight: titleTextWeightClass
|
|
117
172
|
}, title), /*#__PURE__*/React__default.default.createElement(index$1.Button, {
|
|
118
173
|
className: clsx__default.default('dropdown__button', isOpen ? 'dropdown__button_state_open' : 'dropdown__button_state_close'),
|
|
119
174
|
fill: labelFillClass,
|
|
120
175
|
fillHover: labelFillHoverClass,
|
|
121
|
-
size: labelSizeClass,
|
|
122
|
-
labelTextColor: labelTextColorClass,
|
|
123
|
-
labelSize: labelTextSizeClass,
|
|
124
|
-
label: label,
|
|
125
176
|
iconAfter: labelIcon,
|
|
126
|
-
iconAfterFill: labelIconFill
|
|
127
|
-
|
|
128
|
-
|
|
177
|
+
iconAfterFill: labelIconFill,
|
|
178
|
+
label: label,
|
|
179
|
+
labelSize: labelTextSizeClass,
|
|
180
|
+
labelTextColor: labelTextColorClass,
|
|
181
|
+
size: labelSizeClass
|
|
182
|
+
}), children &&
|
|
183
|
+
/*#__PURE__*/
|
|
184
|
+
// Add "onAnimationEnd" only for wrapper for ignore dropdown button
|
|
185
|
+
React__default.default.createElement("div", {
|
|
186
|
+
className: "dropdown__wrapper",
|
|
187
|
+
onAnimationEnd: onAnimationEnd
|
|
129
188
|
}, children));
|
|
130
189
|
}
|
|
131
190
|
Dropdown.propTypes = {
|
|
132
|
-
className: PropTypes__default.default.string
|
|
191
|
+
className: PropTypes__default.default.string,
|
|
192
|
+
isCloseByClickOutside: PropTypes__default.default.bool
|
|
133
193
|
};
|
|
134
194
|
Dropdown.defaultProps = {
|
|
135
195
|
animationOpen: 'dropdown_animation_open',
|
package/dist/components/Emoji.js
CHANGED
|
@@ -8,7 +8,7 @@ var direction = require('../constants/componentProps/direction.js');
|
|
|
8
8
|
var horizontalResizeMode = require('../constants/componentProps/horizontalResizeMode.js');
|
|
9
9
|
var shape = require('../constants/componentProps/shape.js');
|
|
10
10
|
var emojiSize = require('../constants/componentProps/emojiSize.js');
|
|
11
|
-
var useStyles = require('../useStyles-
|
|
11
|
+
var useStyles = require('../useStyles-e4accb53.js');
|
|
12
12
|
var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
|
|
13
13
|
require('lodash/camelCase');
|
|
14
14
|
require('lodash/maxBy');
|
package/dist/components/Fader.js
CHANGED
|
@@ -6,7 +6,7 @@ var clsx = require('clsx');
|
|
|
6
6
|
var fill = require('../constants/componentProps/fill.js');
|
|
7
7
|
var fillGradient = require('../constants/componentProps/fillGradient.js');
|
|
8
8
|
var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
|
|
9
|
-
var useStyles = require('../useStyles-
|
|
9
|
+
var useStyles = require('../useStyles-e4accb53.js');
|
|
10
10
|
require('lodash/castArray');
|
|
11
11
|
require('lodash/camelCase');
|
|
12
12
|
require('../context/UIContext.js');
|
package/dist/components/Flex.js
CHANGED
|
@@ -11,7 +11,7 @@ var flexWrap = require('../constants/componentProps/flexWrap.js');
|
|
|
11
11
|
var shape = require('../constants/componentProps/shape.js');
|
|
12
12
|
var width = require('../constants/componentProps/width.js');
|
|
13
13
|
var position = require('../constants/componentProps/position.js');
|
|
14
|
-
var useStyles = require('../useStyles-
|
|
14
|
+
var useStyles = require('../useStyles-e4accb53.js');
|
|
15
15
|
var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
|
|
16
16
|
var horizontalResizeMode = require('../constants/componentProps/horizontalResizeMode.js');
|
|
17
17
|
require('lodash/camelCase');
|
|
@@ -8,16 +8,21 @@ var size = require('../constants/componentProps/size.js');
|
|
|
8
8
|
var index$2 = require('./Divider.js');
|
|
9
9
|
var index = require('./Text.js');
|
|
10
10
|
var index$1 = require('./Icon.js');
|
|
11
|
-
var useStyles = require('../useStyles-
|
|
11
|
+
var useStyles = require('../useStyles-e4accb53.js');
|
|
12
12
|
var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
|
|
13
13
|
var index$3 = require('./RadioButton.js');
|
|
14
14
|
require('lodash/castArray');
|
|
15
15
|
require('lodash/camelCase');
|
|
16
16
|
require('../context/UIContext.js');
|
|
17
17
|
var index$4 = require('./Switch.js');
|
|
18
|
-
var
|
|
18
|
+
var index$5 = require('./Select.js');
|
|
19
19
|
require('../constants/componentProps/fill.js');
|
|
20
20
|
require('../constants/componentProps/width.js');
|
|
21
|
+
require('lodash/maxBy');
|
|
22
|
+
require('lodash/upperFirst');
|
|
23
|
+
require('../hooks/styleAttributes.js');
|
|
24
|
+
require('../hooks/useMediaQueries.js');
|
|
25
|
+
require('react-responsive');
|
|
21
26
|
require('../constants/componentProps/textColor.js');
|
|
22
27
|
require('../constants/componentProps/textColorActive.js');
|
|
23
28
|
require('../constants/componentProps/textColorHover.js');
|
|
@@ -31,11 +36,6 @@ require('./Link.js');
|
|
|
31
36
|
require('../constants/componentProps/textGradient.js');
|
|
32
37
|
require('../constants/componentProps/type.js');
|
|
33
38
|
require('../constants/componentProps/underline.js');
|
|
34
|
-
require('lodash/maxBy');
|
|
35
|
-
require('lodash/upperFirst');
|
|
36
|
-
require('../hooks/styleAttributes.js');
|
|
37
|
-
require('../hooks/useMediaQueries.js');
|
|
38
|
-
require('react-responsive');
|
|
39
39
|
require('react-select');
|
|
40
40
|
require('../objectWithoutProperties-ea190611.js');
|
|
41
41
|
require('react-dom');
|
|
@@ -253,7 +253,7 @@ function SelectField(props) {
|
|
|
253
253
|
selectInputFill = props.selectInputFill,
|
|
254
254
|
selectInputTextSize = props.selectInputTextSize,
|
|
255
255
|
selectInputTextColor = props.selectInputTextColor;
|
|
256
|
-
return /*#__PURE__*/React__default.default.createElement(FormField, props, /*#__PURE__*/React__default.default.createElement(
|
|
256
|
+
return /*#__PURE__*/React__default.default.createElement(FormField, props, /*#__PURE__*/React__default.default.createElement(index$5.SelectInput, {
|
|
257
257
|
className: clsx__default.default(selectInputClass, className),
|
|
258
258
|
fill: selectFill,
|
|
259
259
|
shape: selectShape,
|
package/dist/components/Grid.js
CHANGED
|
@@ -10,17 +10,17 @@ var shape = require('../constants/componentProps/shape.js');
|
|
|
10
10
|
var horizontalResizeMode = require('../constants/componentProps/horizontalResizeMode.js');
|
|
11
11
|
var verticalResizeMode = require('../constants/componentProps/verticalResizeMode.js');
|
|
12
12
|
var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
|
|
13
|
-
var useStyles = require('../useStyles-
|
|
13
|
+
var useStyles = require('../useStyles-e4accb53.js');
|
|
14
14
|
var UIContext = require('../context/UIContext.js');
|
|
15
15
|
var gridAlignSelf = require('../constants/componentProps/gridAlignSelf.js');
|
|
16
16
|
var gridJustifySelf = require('../constants/componentProps/gridJustifySelf.js');
|
|
17
17
|
require('lodash/castArray');
|
|
18
18
|
require('lodash/camelCase');
|
|
19
|
+
require('../hooks/useMediaQueries.js');
|
|
20
|
+
require('react-responsive');
|
|
19
21
|
require('lodash/maxBy');
|
|
20
22
|
require('lodash/upperFirst');
|
|
21
23
|
require('../hooks/styleAttributes.js');
|
|
22
|
-
require('../hooks/useMediaQueries.js');
|
|
23
|
-
require('react-responsive');
|
|
24
24
|
|
|
25
25
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
26
26
|
|
package/dist/components/Group.js
CHANGED
|
@@ -9,7 +9,7 @@ var shape = require('../constants/componentProps/shape.js');
|
|
|
9
9
|
var stacking = require('../constants/componentProps/stacking.js');
|
|
10
10
|
var wrap = require('../constants/componentProps/wrap.js');
|
|
11
11
|
var width = require('../constants/componentProps/width.js');
|
|
12
|
-
var useStyles = require('../useStyles-
|
|
12
|
+
var useStyles = require('../useStyles-e4accb53.js');
|
|
13
13
|
var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
|
|
14
14
|
require('lodash/camelCase');
|
|
15
15
|
require('lodash/maxBy');
|
package/dist/components/Icon.js
CHANGED
|
@@ -10,7 +10,7 @@ var shape = require('../constants/componentProps/shape.js');
|
|
|
10
10
|
var strokeColor = require('../constants/componentProps/strokeColor.js');
|
|
11
11
|
var index = require('./Link.js');
|
|
12
12
|
var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
|
|
13
|
-
var useStyles = require('../useStyles-
|
|
13
|
+
var useStyles = require('../useStyles-e4accb53.js');
|
|
14
14
|
require('../constants/componentProps/size.js');
|
|
15
15
|
require('../constants/componentProps/textColor.js');
|
|
16
16
|
require('../constants/componentProps/textGradient.js');
|
package/dist/components/Image.js
CHANGED
|
@@ -9,7 +9,7 @@ var resizeMode = require('../constants/componentProps/resizeMode.js');
|
|
|
9
9
|
var shape = require('../constants/componentProps/shape.js');
|
|
10
10
|
var verticalContentAlign = require('../constants/componentProps/verticalContentAlign.js');
|
|
11
11
|
var width = require('../constants/componentProps/width.js');
|
|
12
|
-
var useStyles = require('../useStyles-
|
|
12
|
+
var useStyles = require('../useStyles-e4accb53.js');
|
|
13
13
|
var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
|
|
14
14
|
require('lodash/camelCase');
|
|
15
15
|
require('lodash/maxBy');
|
package/dist/components/Label.js
CHANGED
|
@@ -10,7 +10,7 @@ var fill = require('../constants/componentProps/fill.js');
|
|
|
10
10
|
var shape = require('../constants/componentProps/shape.js');
|
|
11
11
|
var emojiSize = require('../constants/componentProps/emojiSize.js');
|
|
12
12
|
var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
|
|
13
|
-
var useStyles = require('../useStyles-
|
|
13
|
+
var useStyles = require('../useStyles-e4accb53.js');
|
|
14
14
|
require('../constants/componentProps/textColor.js');
|
|
15
15
|
require('../constants/componentProps/textColorActive.js');
|
|
16
16
|
require('../constants/componentProps/textColorHover.js');
|
|
@@ -38,6 +38,7 @@ function Label(props) {
|
|
|
38
38
|
labelTextSize = props.labelTextSize,
|
|
39
39
|
labelTextWrap = props.labelTextWrap,
|
|
40
40
|
labelTextColor = props.labelTextColor,
|
|
41
|
+
set = props.set,
|
|
41
42
|
type = props.type;
|
|
42
43
|
var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
|
|
43
44
|
prefix: 'align_',
|
|
@@ -70,7 +71,7 @@ function Label(props) {
|
|
|
70
71
|
var _useStyles = useStyles.useStyles(props),
|
|
71
72
|
labelStyles = _useStyles.styles;
|
|
72
73
|
return /*#__PURE__*/React__default.default.createElement("div", {
|
|
73
|
-
className: clsx__default.default(className, 'label', fillClass, shapeClass, borderClass, borderTypeClass, sizeClass, alignDirectionClass, alignClass, type && "label_type_" + type),
|
|
74
|
+
className: clsx__default.default(className, 'label', fillClass, shapeClass, borderClass, borderTypeClass, sizeClass, alignDirectionClass, alignClass, type && "label_type_" + type, set && "label_set_" + set),
|
|
74
75
|
style: labelStyles
|
|
75
76
|
}, /*#__PURE__*/React__default.default.createElement("div", {
|
|
76
77
|
className: "label__inner"
|
|
@@ -10,7 +10,7 @@ require('../constants/componentProps/iconSize.js');
|
|
|
10
10
|
require('../constants/componentProps/shape.js');
|
|
11
11
|
require('../constants/componentProps/strokeColor.js');
|
|
12
12
|
require('./Link.js');
|
|
13
|
-
require('../useStyles-
|
|
13
|
+
require('../useStyles-e4accb53.js');
|
|
14
14
|
require('lodash/camelCase');
|
|
15
15
|
require('lodash/maxBy');
|
|
16
16
|
require('lodash/upperFirst');
|
package/dist/components/Link.js
CHANGED
package/dist/components/List.js
CHANGED
|
@@ -7,7 +7,7 @@ var direction = require('../constants/componentProps/direction.js');
|
|
|
7
7
|
var fill = require('../constants/componentProps/fill.js');
|
|
8
8
|
var textColor = require('../constants/componentProps/textColor.js');
|
|
9
9
|
var size = require('../constants/componentProps/size.js');
|
|
10
|
-
var useStyles = require('../useStyles-
|
|
10
|
+
var useStyles = require('../useStyles-e4accb53.js');
|
|
11
11
|
var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
|
|
12
12
|
var textStyle = require('../constants/componentProps/textStyle.js');
|
|
13
13
|
var textWeight = require('../constants/componentProps/textWeight.js');
|
|
@@ -11,7 +11,7 @@ require('../constants/componentProps/textColorHover.js');
|
|
|
11
11
|
require('../constants/componentProps/size.js');
|
|
12
12
|
require('../constants/componentProps/textStyle.js');
|
|
13
13
|
require('../constants/componentProps/textWeight.js');
|
|
14
|
-
require('../useStyles-
|
|
14
|
+
require('../useStyles-e4accb53.js');
|
|
15
15
|
require('lodash/camelCase');
|
|
16
16
|
require('lodash/maxBy');
|
|
17
17
|
require('lodash/upperFirst');
|
package/dist/components/Logo.js
CHANGED
|
@@ -4,7 +4,7 @@ var React = require('react');
|
|
|
4
4
|
var PropTypes = require('prop-types');
|
|
5
5
|
var clsx = require('clsx');
|
|
6
6
|
var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
|
|
7
|
-
var useStyles = require('../useStyles-
|
|
7
|
+
var useStyles = require('../useStyles-e4accb53.js');
|
|
8
8
|
require('lodash/castArray');
|
|
9
9
|
require('lodash/camelCase');
|
|
10
10
|
require('../context/UIContext.js');
|
|
@@ -23,33 +23,35 @@ var clsx__default = /*#__PURE__*/_interopDefault(clsx);
|
|
|
23
23
|
function Logo(props) {
|
|
24
24
|
var children = props.children,
|
|
25
25
|
className = props.className;
|
|
26
|
-
|
|
27
|
-
props.
|
|
28
|
-
props.link;
|
|
29
|
-
props.target;
|
|
30
|
-
props.rel;
|
|
26
|
+
props.isLink;
|
|
27
|
+
var logoSrc = props.logoSrc;
|
|
31
28
|
var alignItemsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
|
|
32
29
|
prefix: 'logo_align-items_',
|
|
33
30
|
propsKey: 'alignItems'
|
|
34
31
|
});
|
|
35
32
|
var _useStyles = useStyles.useStyles(props),
|
|
36
|
-
logo = _useStyles.styles
|
|
33
|
+
logo = _useStyles.styles,
|
|
34
|
+
logoStyles = _useStyles.logo;
|
|
37
35
|
return /*#__PURE__*/React__default.default.createElement("div", {
|
|
38
36
|
className: clsx__default.default(className, 'logo', alignItemsClass),
|
|
39
37
|
style: logo
|
|
40
|
-
}, children
|
|
38
|
+
}, children, /*#__PURE__*/React__default.default.createElement("img", {
|
|
39
|
+
className: "logo__link-second",
|
|
40
|
+
src: logoSrc,
|
|
41
|
+
style: logoStyles
|
|
42
|
+
}));
|
|
41
43
|
}
|
|
42
44
|
Logo.propTypes = {
|
|
43
45
|
children: PropTypes__default.default.any,
|
|
44
46
|
className: PropTypes__default.default.string,
|
|
47
|
+
isLink: PropTypes__default.default.bool,
|
|
48
|
+
logoSrc: PropTypes__default.default.string,
|
|
45
49
|
LinkComponent: PropTypes__default.default.any,
|
|
46
50
|
href: PropTypes__default.default.string,
|
|
47
51
|
link: PropTypes__default.default.string,
|
|
48
52
|
target: PropTypes__default.default.string,
|
|
49
53
|
rel: PropTypes__default.default.string
|
|
50
54
|
};
|
|
51
|
-
Logo.defaultProps = {
|
|
52
|
-
LinkComponent: 'a'
|
|
53
|
-
};
|
|
55
|
+
Logo.defaultProps = {};
|
|
54
56
|
|
|
55
57
|
exports.Logo = Logo;
|