@zohodesk/components 1.0.0-temp-192 → 1.0.0-temp-194
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/.cli/propValidation_report.html +1 -1
- package/es/AppContainer/AppContainer.js +10 -9
- package/es/Avatar/Avatar.js +4 -5
- package/es/AvatarTeam/AvatarTeam.js +7 -7
- package/es/Button/Button.js +5 -6
- package/es/CheckBox/CheckBox.js +8 -8
- package/es/DropBox/DropBox.js +10 -11
- package/es/DropDown/DropDown.js +2 -1
- package/es/ListItem/ListContainer.js +6 -5
- package/es/ListItem/ListItem.js +6 -7
- package/es/ListItem/ListItem.module.css +18 -85
- package/es/ListItem/ListItemWithAvatar.js +7 -8
- package/es/ListItem/ListItemWithCheckBox.js +4 -5
- package/es/ListItem/ListItemWithIcon.js +6 -7
- package/es/ListItem/ListItemWithRadio.js +4 -5
- package/es/Modal/Modal.js +4 -5
- package/es/MultiSelect/AdvancedGroupMultiSelect.js +3 -9
- package/es/MultiSelect/AdvancedMultiSelect.js +8 -9
- package/es/MultiSelect/MultiSelect.js +3 -9
- package/es/MultiSelect/MultiSelectWithAvatar.js +3 -6
- package/es/MultiSelect/SelectedOptions.js +6 -8
- package/es/MultiSelect/Suggestions.js +10 -16
- package/es/MultiSelect/props/defaultProps.js +5 -9
- package/es/MultiSelect/props/propTypes.js +3 -7
- package/es/Popup/Popup.js +3 -4
- package/es/Radio/Radio.js +8 -8
- package/es/ResponsiveDropBox/ResponsiveDropBox.js +2 -4
- package/es/Select/GroupSelect.js +3 -9
- package/es/Select/Select.js +4 -5
- package/es/Select/SelectWithAvatar.js +3 -9
- package/es/Select/SelectWithIcon.js +3 -9
- package/es/Select/props/defaultProps.js +3 -6
- package/es/Select/props/propTypes.js +3 -6
- package/es/Switch/Switch.js +8 -8
- package/es/Tab/Tab.js +4 -5
- package/es/Tab/TabContentWrapper.js +4 -5
- package/es/Tab/TabWrapper.js +5 -6
- package/es/Tab/Tabs.js +16 -16
- package/es/Tab/props/propTypes.js +1 -0
- package/es/TextBox/TextBox.js +5 -5
- package/es/TextBoxIcon/TextBoxIcon.js +2 -4
- package/es/Textarea/Textarea.js +4 -6
- package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +4 -5
- package/es/deprecated/PortalLayer/PortalLayer.js +8 -6
- package/es/v1/AppContainer/AppContainer.js +10 -9
- package/es/v1/Avatar/Avatar.js +4 -5
- package/es/v1/AvatarTeam/AvatarTeam.js +7 -7
- package/es/v1/Button/Button.js +5 -6
- package/es/v1/CheckBox/CheckBox.js +8 -8
- package/es/v1/DropBox/DropBox.js +10 -11
- package/es/v1/DropDown/DropDown.js +2 -1
- package/es/v1/ListItem/ListContainer.js +6 -5
- package/es/v1/ListItem/ListItem.js +4 -5
- package/es/v1/ListItem/ListItemWithAvatar.js +4 -5
- package/es/v1/ListItem/ListItemWithCheckBox.js +4 -5
- package/es/v1/ListItem/ListItemWithIcon.js +4 -5
- package/es/v1/ListItem/ListItemWithRadio.js +4 -5
- package/es/v1/Modal/Modal.js +4 -5
- package/es/v1/MultiSelect/AdvancedMultiSelect.js +8 -9
- package/es/v1/MultiSelect/MultiSelectWithAvatar.js +4 -5
- package/es/v1/MultiSelect/SelectedOptions.js +6 -8
- package/es/v1/MultiSelect/Suggestions.js +6 -8
- package/es/v1/Popup/Popup.js +3 -4
- package/es/v1/Radio/Radio.js +8 -8
- package/es/v1/ResponsiveDropBox/ResponsiveDropBox.js +2 -4
- package/es/v1/Select/Select.js +4 -5
- package/es/v1/Switch/Switch.js +8 -8
- package/es/v1/Tab/Tab.js +4 -5
- package/es/v1/Tab/TabContentWrapper.js +4 -5
- package/es/v1/Tab/TabWrapper.js +2 -4
- package/es/v1/Tab/Tabs.js +16 -16
- package/es/v1/TextBox/TextBox.js +5 -5
- package/es/v1/TextBoxIcon/TextBoxIcon.js +2 -4
- package/es/v1/Textarea/Textarea.js +4 -6
- package/es/v1/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +4 -5
- package/lib/ListItem/ListItem.js +2 -2
- package/lib/ListItem/ListItem.module.css +18 -85
- package/lib/ListItem/ListItemWithAvatar.js +3 -3
- package/lib/ListItem/ListItemWithIcon.js +2 -2
- package/lib/MultiSelect/AdvancedGroupMultiSelect.js +3 -7
- package/lib/MultiSelect/MultiSelect.js +3 -8
- package/lib/MultiSelect/MultiSelectWithAvatar.js +1 -3
- package/lib/MultiSelect/Suggestions.js +4 -8
- package/lib/MultiSelect/props/defaultProps.js +5 -9
- package/lib/MultiSelect/props/propTypes.js +6 -9
- package/lib/Select/GroupSelect.js +3 -8
- package/lib/Select/SelectWithAvatar.js +3 -8
- package/lib/Select/SelectWithIcon.js +3 -8
- package/lib/Select/props/defaultProps.js +3 -5
- package/lib/Select/props/propTypes.js +3 -6
- package/lib/Tab/TabWrapper.js +3 -2
- package/lib/Tab/props/propTypes.js +1 -0
- package/package.json +3 -3
- package/result.json +1 -1
package/es/v1/Tab/TabWrapper.js
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
1
|
import React, { useState, useCallback } from 'react';
|
|
4
2
|
import { TabWrapper_defaultProps } from './props/defaultProps';
|
|
5
3
|
import { TabWrapper_propTypes } from './props/propTypes';
|
|
@@ -37,7 +35,7 @@ function TabWrapper(_ref) {
|
|
|
37
35
|
let TabsChild = child.type;
|
|
38
36
|
let selectedTab = hookToDisableInternalState ? defaultTab : selectedTabInternal;
|
|
39
37
|
return /*#__PURE__*/React.createElement(TabsChild // eslint-disable-next-line react/no-array-index-key
|
|
40
|
-
,
|
|
38
|
+
, { ...child.props,
|
|
41
39
|
selectedTab: selectedTab,
|
|
42
40
|
onSelect: setSelectedTab,
|
|
43
41
|
type: type,
|
|
@@ -48,7 +46,7 @@ function TabWrapper(_ref) {
|
|
|
48
46
|
needAppearance: needAppearance,
|
|
49
47
|
hookToDisableInternalState: hookToDisableInternalState,
|
|
50
48
|
align: align
|
|
51
|
-
})
|
|
49
|
+
});
|
|
52
50
|
}));
|
|
53
51
|
}
|
|
54
52
|
|
package/es/v1/Tab/Tabs.js
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
1
|
import React, { useState, useRef, useEffect, useCallback } from 'react';
|
|
4
2
|
import useEffectCallOnlyAfterState from '@zohodesk/hooks/es/utils/useEffectCallOnlyAfterState';
|
|
5
3
|
import Tab from './Tab';
|
|
@@ -394,7 +392,7 @@ const Tabs = props => {
|
|
|
394
392
|
classProps.className = itemClass;
|
|
395
393
|
}
|
|
396
394
|
|
|
397
|
-
return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(MainTab,
|
|
395
|
+
return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(MainTab, { ...child.props,
|
|
398
396
|
key: child.props.id,
|
|
399
397
|
getTabRef: getTabRef,
|
|
400
398
|
onSelect: onSelect // recalculateDimension={tabElement.current[recalculateDimension]}
|
|
@@ -405,22 +403,23 @@ const Tabs = props => {
|
|
|
405
403
|
needBorder: needTabBorder,
|
|
406
404
|
needAppearance: needAppearance,
|
|
407
405
|
align: align,
|
|
408
|
-
isVirtual: isVirtual
|
|
409
|
-
|
|
406
|
+
isVirtual: isVirtual,
|
|
407
|
+
...classProps
|
|
408
|
+
});
|
|
410
409
|
}), React.Children.count(moreTabs) ? /*#__PURE__*/React.createElement(Box, {
|
|
411
410
|
className: `${tabsStyle.menu} `,
|
|
412
411
|
dataSelectorId: `${dataSelectorId}_moreIcon`
|
|
413
|
-
}, /*#__PURE__*/React.createElement(Container,
|
|
412
|
+
}, /*#__PURE__*/React.createElement(Container, {
|
|
414
413
|
className: `${btnstyle.buttonReset} ${moreButtonClass} ${isPopupOpen ? moreButtonActiveClass : ''}`,
|
|
415
414
|
align: "both",
|
|
416
415
|
onClick: togglePopupLocal,
|
|
417
416
|
dataId: "moreTabs",
|
|
418
|
-
eleRef: getTargetRef
|
|
419
|
-
|
|
417
|
+
eleRef: getTargetRef,
|
|
418
|
+
...MoreButtonProps,
|
|
420
419
|
"aria-label": "MoreTabs",
|
|
421
420
|
role: "link",
|
|
422
421
|
tagName: "button"
|
|
423
|
-
}
|
|
422
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
424
423
|
name: iconName,
|
|
425
424
|
size: iconSize
|
|
426
425
|
})), isPopupOpen && /*#__PURE__*/React.createElement(ResponsiveReceiver, {
|
|
@@ -430,7 +429,7 @@ const Tabs = props => {
|
|
|
430
429
|
let {
|
|
431
430
|
tabletMode
|
|
432
431
|
} = _ref2;
|
|
433
|
-
return /*#__PURE__*/React.createElement(ResponsiveDropBox,
|
|
432
|
+
return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
|
|
434
433
|
isActive: isPopupReady,
|
|
435
434
|
isAnimate: true,
|
|
436
435
|
size: "medium",
|
|
@@ -440,12 +439,12 @@ const Tabs = props => {
|
|
|
440
439
|
boxPosition: position,
|
|
441
440
|
getRef: getContainerRef,
|
|
442
441
|
isBoxPaddingNeed: true,
|
|
443
|
-
isArrow: false
|
|
444
|
-
|
|
442
|
+
isArrow: false,
|
|
443
|
+
...DropBoxProps,
|
|
445
444
|
isResponsivePadding: true,
|
|
446
445
|
needFocusScope: true,
|
|
447
446
|
onClose: togglePopupLocal
|
|
448
|
-
}
|
|
447
|
+
}, getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(props), /*#__PURE__*/React.createElement(Box, {
|
|
449
448
|
flexible: true,
|
|
450
449
|
shrink: true,
|
|
451
450
|
scroll: "vertical",
|
|
@@ -466,7 +465,7 @@ const Tabs = props => {
|
|
|
466
465
|
dataId
|
|
467
466
|
} = child.props;
|
|
468
467
|
const value = text ? text : showTitleInMoreOptions ? title : null;
|
|
469
|
-
return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(ListItem,
|
|
468
|
+
return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(ListItem, {
|
|
470
469
|
key: id,
|
|
471
470
|
value: value,
|
|
472
471
|
onClick: moreTabSelect,
|
|
@@ -479,8 +478,9 @@ const Tabs = props => {
|
|
|
479
478
|
customListItem: menuItemClass
|
|
480
479
|
},
|
|
481
480
|
target: "self",
|
|
482
|
-
dataId: `${dataId}_Tab
|
|
483
|
-
|
|
481
|
+
dataId: `${dataId}_Tab`,
|
|
482
|
+
...ListItemProps
|
|
483
|
+
}, !showTitleInMoreOptions ? children : null);
|
|
484
484
|
})));
|
|
485
485
|
})) : null);
|
|
486
486
|
}
|
package/es/v1/TextBox/TextBox.js
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
1
|
import React, { memo, useRef, useCallback } from 'react';
|
|
4
2
|
import { defaultProps } from './props/defaultProps';
|
|
5
3
|
import { propTypes } from './props/propTypes';
|
|
@@ -113,7 +111,7 @@ function TextBox(props) {
|
|
|
113
111
|
|
|
114
112
|
let classList = needAppearance ? `${style.container} ${style[size]} ${style[variant]} ${needBorder ? style.border : ''} ${isDisabled && !needEffect || isReadOnly && !needEffect ? '' : style.effect} ${isFocus ? style.focus : ''}` : `${style.basic}`;
|
|
115
113
|
value = value === null || value === undefined ? '' : value;
|
|
116
|
-
return /*#__PURE__*/React.createElement("input",
|
|
114
|
+
return /*#__PURE__*/React.createElement("input", {
|
|
117
115
|
"aria-label": ariaLabel,
|
|
118
116
|
"aria-invalid": ariaInvalid,
|
|
119
117
|
"aria-autocomplete": ariaAutocomplete,
|
|
@@ -147,8 +145,10 @@ function TextBox(props) {
|
|
|
147
145
|
value: value,
|
|
148
146
|
onScroll: isScrollPrevent ? handlePreventTextBoxScroll : '',
|
|
149
147
|
onKeyPress: onKeyPress,
|
|
150
|
-
onMouseDown: onMouseDown
|
|
151
|
-
|
|
148
|
+
onMouseDown: onMouseDown,
|
|
149
|
+
...options.current,
|
|
150
|
+
...customProps
|
|
151
|
+
});
|
|
152
152
|
}
|
|
153
153
|
|
|
154
154
|
TextBox.defaultProps = defaultProps;
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
1
|
import React, { useState, useRef, useCallback } from 'react';
|
|
4
2
|
import { defaultProps } from './props/defaultProps';
|
|
5
3
|
import { propTypes } from './props/propTypes';
|
|
@@ -98,7 +96,7 @@ export default function TextBoxIcon(props) {
|
|
|
98
96
|
"data-title": isDisabled ? title : null
|
|
99
97
|
}, /*#__PURE__*/React.createElement(Box, {
|
|
100
98
|
flexible: true
|
|
101
|
-
}, /*#__PURE__*/React.createElement(TextBox,
|
|
99
|
+
}, /*#__PURE__*/React.createElement(TextBox, { ...props,
|
|
102
100
|
dataId: dataId,
|
|
103
101
|
size: size,
|
|
104
102
|
variant: variant,
|
|
@@ -126,7 +124,7 @@ export default function TextBoxIcon(props) {
|
|
|
126
124
|
isScrollPrevent: isScrollPrevent,
|
|
127
125
|
customClass: customTextBox,
|
|
128
126
|
customProps: TextBoxProps
|
|
129
|
-
}))
|
|
127
|
+
})), /*#__PURE__*/React.createElement(Box, {
|
|
130
128
|
className: `${style.iconContainer} ${customTBoxIcon}`
|
|
131
129
|
}, /*#__PURE__*/React.createElement(Container, {
|
|
132
130
|
alignBox: "row"
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
1
|
import React, { useRef } from 'react';
|
|
4
2
|
import { defaultProps } from './props/defaultProps';
|
|
5
3
|
import { propTypes } from './props/propTypes';
|
|
@@ -72,12 +70,12 @@ export default function Textarea(props) {
|
|
|
72
70
|
}
|
|
73
71
|
|
|
74
72
|
let classList = needAppearance ? `${style.container} ${style[size]} ${style[variant]} ${needBorder ? style.needBorder : style.noBorder} ${resize ? style[resizes.current[resize]] : style[resizes.current.none]} ${animated ? `${style[`${size}animated`]}` : ''} ${isDisabled && !needEffect || isReadOnly && !needEffect ? '' : style.effect}` : `${style.basic}`;
|
|
75
|
-
return /*#__PURE__*/React.createElement("textarea",
|
|
73
|
+
return /*#__PURE__*/React.createElement("textarea", {
|
|
76
74
|
"aria-label": ariaLabel,
|
|
77
75
|
"aria-labelledby": ariaLabelledby,
|
|
78
76
|
className: `${customClass} ${isReadOnly && needReadOnlyStyle ? style.readonly : ''} ${classList} ${style[`borderColor_${borderColor}`]}`,
|
|
79
|
-
placeholder: placeHolder
|
|
80
|
-
|
|
77
|
+
placeholder: placeHolder,
|
|
78
|
+
...options.current,
|
|
81
79
|
"data-id": dataId,
|
|
82
80
|
"data-test-id": dataId,
|
|
83
81
|
maxLength: maxLength,
|
|
@@ -89,7 +87,7 @@ export default function Textarea(props) {
|
|
|
89
87
|
value: text,
|
|
90
88
|
id: htmlId,
|
|
91
89
|
"data-selector-id": dataSelectorId
|
|
92
|
-
})
|
|
90
|
+
});
|
|
93
91
|
}
|
|
94
92
|
Textarea.defaultProps = defaultProps;
|
|
95
93
|
Textarea.propTypes = propTypes; // if (__DOCS__) {
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
1
|
import React, { useContext } from 'react';
|
|
4
2
|
import { defaultProps } from './props/defaultProps';
|
|
5
3
|
import { propTypes } from './props/propTypes';
|
|
@@ -81,14 +79,15 @@ export default function VelocityAnimationGroup(props) {
|
|
|
81
79
|
delay: exitDelay ? exitDelay : 0,
|
|
82
80
|
display: 'none'
|
|
83
81
|
};
|
|
84
|
-
return /*#__PURE__*/React.createElement(VelocityTransitionGroup,
|
|
82
|
+
return /*#__PURE__*/React.createElement(VelocityTransitionGroup, {
|
|
85
83
|
enter: enterAnimation,
|
|
86
84
|
leave: exitAnimation,
|
|
87
85
|
component: component && component,
|
|
88
86
|
runOnMount: runOnMount,
|
|
89
87
|
enterHideStyle: enterHideStyle,
|
|
90
|
-
enterShowStyle: enterShowStyle
|
|
91
|
-
|
|
88
|
+
enterShowStyle: enterShowStyle,
|
|
89
|
+
...childProps
|
|
90
|
+
}, isActive ? children : null);
|
|
92
91
|
}
|
|
93
92
|
VelocityAnimationGroup.defaultProps = { ...defaultProps,
|
|
94
93
|
component: React.Fragment
|
package/lib/ListItem/ListItem.js
CHANGED
|
@@ -150,7 +150,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
|
|
|
150
150
|
autoHover: autoHover,
|
|
151
151
|
needTick: needTick,
|
|
152
152
|
needBorder: needBorder,
|
|
153
|
-
customClass:
|
|
153
|
+
customClass: customListItem,
|
|
154
154
|
dataId: dataIdString,
|
|
155
155
|
dataSelectorId: "".concat(dataSelectorId),
|
|
156
156
|
isLink: isLink,
|
|
@@ -171,7 +171,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
|
|
|
171
171
|
adjust: true,
|
|
172
172
|
className: _ListItemModule["default"].children
|
|
173
173
|
}, children) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
|
|
174
|
-
className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(tickIconPalette, " ").concat(customTickIcon
|
|
174
|
+
className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(tickIconPalette, " ").concat(customTickIcon),
|
|
175
175
|
"aria-hidden": ariaHidden,
|
|
176
176
|
dataId: "".concat(dataIdString, "_tickIcon"),
|
|
177
177
|
dataSelectorId: "".concat(dataSelectorId, "_tickIcon")
|
|
@@ -17,9 +17,8 @@
|
|
|
17
17
|
}[dir=ltr] .varClass {
|
|
18
18
|
--listitem_avatar_margin: 0 var(--zd_size15) 0 0;
|
|
19
19
|
}[dir=rtl] .varClass {
|
|
20
|
-
--listitem_avatar_margin: 0 var(--zd_size15)
|
|
20
|
+
--listitem_avatar_margin: 0 0 0 var(--zd_size15);
|
|
21
21
|
}
|
|
22
|
-
|
|
23
22
|
.list {
|
|
24
23
|
composes: varClass;
|
|
25
24
|
position: relative;
|
|
@@ -35,84 +34,62 @@
|
|
|
35
34
|
border-color: var(--listitem_border_color);
|
|
36
35
|
cursor: pointer;
|
|
37
36
|
}
|
|
38
|
-
|
|
39
37
|
.list, .default, .secondary {
|
|
40
38
|
background-color: var(--listitem_bg_color);
|
|
41
39
|
}
|
|
42
|
-
|
|
43
40
|
[dir=ltr] .withBorder {
|
|
44
|
-
--listitem_border_width: 0 0 0 1px
|
|
45
|
-
/*rtl: 0 1px 0 0*/
|
|
46
|
-
;
|
|
41
|
+
--listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
|
|
47
42
|
}
|
|
48
|
-
|
|
49
43
|
[dir=rtl] .withBorder {
|
|
50
|
-
--listitem_border_width: 0 0 0
|
|
44
|
+
--listitem_border_width: 0 1px 0 0;
|
|
51
45
|
}
|
|
52
|
-
|
|
53
46
|
.active {
|
|
54
47
|
--listitem_border_color: var(--zdt_listitem_active_border);
|
|
55
48
|
}
|
|
56
|
-
|
|
57
49
|
[dir=ltr] .small {
|
|
58
50
|
--listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5);
|
|
59
51
|
}
|
|
60
|
-
|
|
61
52
|
[dir=rtl] .small {
|
|
62
|
-
--listitem_padding: var(--zd_size7) var(--
|
|
53
|
+
--listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3);
|
|
63
54
|
}
|
|
64
|
-
|
|
65
55
|
.medium {
|
|
66
56
|
--listitem_padding: var(--zd_size7) var(--zd_size20);
|
|
67
57
|
--listitem_min_height: var(--zd_size35);
|
|
68
58
|
}
|
|
69
|
-
|
|
70
59
|
.large {
|
|
71
60
|
--listitem_height: var(--zd_size48);
|
|
72
61
|
}
|
|
73
|
-
|
|
74
62
|
[dir=ltr] .large {
|
|
75
63
|
--listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
|
|
76
64
|
}
|
|
77
|
-
|
|
78
65
|
[dir=rtl] .large {
|
|
79
|
-
--listitem_padding: var(--zd_size10) var(--
|
|
66
|
+
--listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
|
|
80
67
|
}
|
|
81
|
-
|
|
82
68
|
.value,
|
|
83
69
|
.children {
|
|
84
70
|
composes: dotted from '../common/common.module.css';
|
|
85
71
|
}
|
|
86
|
-
|
|
87
|
-
.value {
|
|
72
|
+
.value, .multiLineValue {
|
|
88
73
|
line-height: 1.5385;
|
|
89
74
|
}
|
|
90
|
-
|
|
91
|
-
.multiLineValue {
|
|
92
|
-
line-height: 1.3076;
|
|
75
|
+
.multiLineValue{
|
|
93
76
|
word-break: break-word;
|
|
94
|
-
|
|
95
|
-
composes: clamp from '../common/common.module.css';
|
|
77
|
+
composes: clamp from '../common/common.module.css'
|
|
96
78
|
}
|
|
97
|
-
|
|
98
79
|
.iconBox {
|
|
99
80
|
width: var(--zd_size20) ;
|
|
100
81
|
text-align: center;
|
|
101
82
|
}
|
|
102
|
-
|
|
103
83
|
[dir=ltr] .iconBox {
|
|
104
84
|
margin-right: var(--zd_size10) ;
|
|
105
85
|
}
|
|
106
|
-
|
|
107
86
|
[dir=rtl] .iconBox {
|
|
108
87
|
margin-left: var(--zd_size10) ;
|
|
109
88
|
}
|
|
110
|
-
|
|
111
89
|
.iconBox,
|
|
112
90
|
.leftAvatar {
|
|
113
91
|
font-size: 0 ;
|
|
114
92
|
}
|
|
115
|
-
|
|
116
93
|
.leftAvatar {
|
|
117
94
|
margin: var(--listitem_avatar_margin);
|
|
118
95
|
}
|
|
@@ -120,78 +97,61 @@
|
|
|
120
97
|
.defaultHover, .primaryHover, .secondaryHover, .darkHover {
|
|
121
98
|
background-color: var(--listitem_highlight_bg_color);
|
|
122
99
|
}
|
|
123
|
-
|
|
124
100
|
.activewithBorder {
|
|
125
101
|
--listitem_border_color: var(--zdt_listitem_active_border);
|
|
126
102
|
}
|
|
127
|
-
|
|
128
103
|
[dir=ltr] .activewithBorder {
|
|
129
|
-
--listitem_border_width: 0 0 0 1px
|
|
130
|
-
/*rtl: 0 1px 0 0*/
|
|
131
|
-
;
|
|
104
|
+
--listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
|
|
132
105
|
}
|
|
133
|
-
|
|
134
106
|
[dir=rtl] .activewithBorder {
|
|
135
|
-
--listitem_border_width: 0 0 0
|
|
107
|
+
--listitem_border_width: 0 1px 0 0;
|
|
136
108
|
}
|
|
137
109
|
|
|
138
110
|
.defaultHover,
|
|
139
111
|
.defaultEffect:hover
|
|
140
|
-
|
|
141
112
|
/* .defaultEffect:focus */
|
|
142
|
-
|
|
113
|
+
{
|
|
143
114
|
--listitem_bg_color: var(--zdt_listitem_highlight_bg);
|
|
144
115
|
}
|
|
145
|
-
|
|
146
116
|
.primaryHover,
|
|
147
117
|
.primaryEffect:hover
|
|
148
|
-
|
|
149
118
|
/* .primaryEffect:focus */
|
|
150
|
-
|
|
119
|
+
{
|
|
151
120
|
--listitem_bg_color: var(--zdt_listitem_primary_bg);
|
|
152
121
|
--listitem_highlight_bg_color: var(--zdt_listitem_primary_bg);
|
|
153
122
|
}
|
|
154
|
-
|
|
155
123
|
.secondaryHover,
|
|
156
124
|
.secondaryEffect:hover
|
|
157
|
-
|
|
158
125
|
/* .secondaryEffect:focus */
|
|
159
|
-
|
|
126
|
+
{
|
|
160
127
|
--listitem_bg_color: var(--zdt_listitem_secondary_bg);
|
|
161
128
|
--listitem_highlight_bg_color: var(--zdt_listitem_secondary_bg);
|
|
162
129
|
--listitem_text_color: var(--zdt_listitem_secondary_text);
|
|
163
130
|
}
|
|
164
|
-
|
|
165
131
|
.darkHover,
|
|
166
132
|
.darkEffect:hover
|
|
167
|
-
|
|
168
133
|
/* .darkEffect:focus */
|
|
169
|
-
|
|
134
|
+
{
|
|
170
135
|
--listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
|
|
171
136
|
--listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
|
|
172
137
|
}
|
|
173
|
-
|
|
174
138
|
.activedefault, .activeprimary, .activesecondary, .activedark {
|
|
175
139
|
background-color: var(--listitem_active_bg_color);
|
|
176
140
|
}
|
|
177
|
-
|
|
178
141
|
.activedefault,
|
|
179
142
|
.activedefault:hover,
|
|
180
143
|
.activeprimary,
|
|
181
144
|
.activeprimary:hover {
|
|
182
145
|
--listitem_active_bg_color: var(--zdt_listitem_primary_bg);
|
|
183
146
|
}
|
|
184
|
-
|
|
185
147
|
.activesecondary {
|
|
186
148
|
--listitem_active_bg_color: var(--zdt_listitem_secondary_bg);
|
|
187
149
|
--listitem_text_color: var(--zdt_listitem_secondary_text);
|
|
188
150
|
}
|
|
189
|
-
|
|
190
151
|
.dark {
|
|
191
152
|
--listitem_bg_color: var(--zdt_listitem_dark_bg);
|
|
192
153
|
--listitem_text_color: var(--zdt_listitem_dark_text);
|
|
193
154
|
}
|
|
194
|
-
|
|
195
155
|
.activedark {
|
|
196
156
|
--listitem_active_bg_color: var(--zdt_listitem_dark_active_bg);
|
|
197
157
|
}
|
|
@@ -210,63 +170,36 @@
|
|
|
210
170
|
[dir=rtl] .tickIcon, [dir=rtl] .defaultTick, [dir=rtl] .darkTick {
|
|
211
171
|
left: var(--zd_size20) ;
|
|
212
172
|
}
|
|
213
|
-
|
|
214
173
|
.defaultTick {
|
|
215
174
|
--listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
|
|
216
175
|
}
|
|
217
|
-
|
|
218
176
|
.darkTick {
|
|
219
177
|
--listitem_tickicon_color: var(--zdt_listitem_dark_tickicon);
|
|
220
178
|
}
|
|
221
|
-
|
|
222
|
-
.defaultTick>i {
|
|
179
|
+
.defaultTick > i {
|
|
223
180
|
display: block;
|
|
224
181
|
}
|
|
225
|
-
|
|
226
182
|
[dir=ltr] .smallwithTick {
|
|
227
183
|
--listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size5);
|
|
228
184
|
}
|
|
229
|
-
|
|
230
185
|
[dir=rtl] .smallwithTick {
|
|
231
|
-
--listitem_padding: var(--zd_size7) var(--
|
|
186
|
+
--listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39);
|
|
232
187
|
}
|
|
233
|
-
|
|
234
188
|
[dir=ltr] .mediumwithTick {
|
|
235
189
|
--listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size20);
|
|
236
190
|
}
|
|
237
|
-
|
|
238
191
|
[dir=rtl] .mediumwithTick {
|
|
239
|
-
--listitem_padding: var(--zd_size7) var(--
|
|
192
|
+
--listitem_padding: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39);
|
|
240
193
|
}
|
|
241
|
-
|
|
242
194
|
[dir=ltr] .largewithTick {
|
|
243
195
|
--listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10) var(--zd_size25);
|
|
244
196
|
}
|
|
245
|
-
|
|
246
197
|
[dir=rtl] .largewithTick {
|
|
247
|
-
--listitem_padding: var(--zd_size10) var(--
|
|
198
|
+
--listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
|
|
248
199
|
}
|
|
249
|
-
|
|
250
200
|
.responsiveHeight {
|
|
251
201
|
--listitem_min_height: var(--zd_size45);
|
|
252
202
|
font-size: var(--zd_font_size15) ;
|
|
253
203
|
padding-top: var(--zd_size10) ;
|
|
254
204
|
padding-bottom: var(--zd_size10) ;
|
|
255
205
|
}
|
|
256
|
-
|
|
257
|
-
.autoHeight {
|
|
258
|
-
height: auto ;
|
|
259
|
-
}
|
|
260
|
-
|
|
261
|
-
.tickIconCenter {
|
|
262
|
-
top: 50% ;
|
|
263
|
-
transform: translateY(-50%);
|
|
264
|
-
}
|
|
265
|
-
|
|
266
|
-
.txtAlignBaseLine {
|
|
267
|
-
align-items: baseline;
|
|
268
|
-
}
|
|
269
|
-
|
|
270
|
-
.alignSelfTop {
|
|
271
|
-
align-self: start;
|
|
272
|
-
}
|
|
@@ -158,7 +158,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
158
158
|
autoHover: autoHover,
|
|
159
159
|
needTick: needTick,
|
|
160
160
|
needBorder: needBorder,
|
|
161
|
-
customClass:
|
|
161
|
+
customClass: customListItem,
|
|
162
162
|
dataId: "".concat(dataIdString, "_ListItemWithAvatar"),
|
|
163
163
|
dataSelectorId: "".concat(dataSelectorId),
|
|
164
164
|
onClick: this.handleClick,
|
|
@@ -168,7 +168,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
168
168
|
title: null,
|
|
169
169
|
customProps: ListItemProps
|
|
170
170
|
}, ContainerProps), name || imgSrc ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
|
|
171
|
-
className:
|
|
171
|
+
className: _ListItemModule["default"].leftAvatar
|
|
172
172
|
}, isTeam ? /*#__PURE__*/_react["default"].createElement(_AvatarTeam["default"], {
|
|
173
173
|
name: name,
|
|
174
174
|
size: "small",
|
|
@@ -195,7 +195,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
195
195
|
"data-title": isDisabled ? null : title,
|
|
196
196
|
className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
|
|
197
197
|
}, value) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
|
|
198
|
-
className:
|
|
198
|
+
className: _ListItemModule["default"].tickIcon,
|
|
199
199
|
"aria-hidden": ariaHidden,
|
|
200
200
|
dataId: "".concat(dataIdString, "_tickIcon"),
|
|
201
201
|
dataSelectorId: "".concat(dataSelectorId, "_tickIcon")
|
|
@@ -147,7 +147,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
|
|
|
147
147
|
autoHover: autoHover,
|
|
148
148
|
needTick: needTick,
|
|
149
149
|
needBorder: needBorder,
|
|
150
|
-
customClass:
|
|
150
|
+
customClass: customClass,
|
|
151
151
|
dataId: dataIdString,
|
|
152
152
|
dataSelectorId: dataSelectorId,
|
|
153
153
|
isLink: isLink,
|
|
@@ -176,7 +176,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
|
|
|
176
176
|
"data-title": isDisabled ? null : title,
|
|
177
177
|
dataId: "".concat(dataIdString, "_Text")
|
|
178
178
|
}, value), needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
|
|
179
|
-
className:
|
|
179
|
+
className: _ListItemModule["default"].tickIcon,
|
|
180
180
|
"aria-hidden": ariaHidden,
|
|
181
181
|
dataId: "".concat(dataIdString, "_tickIcon"),
|
|
182
182
|
dataSelectorId: "".concat(dataSelectorId, "_tickIcon")
|
|
@@ -53,8 +53,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
53
53
|
|
|
54
54
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
55
55
|
|
|
56
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
57
|
-
|
|
58
56
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
59
57
|
|
|
60
58
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
@@ -962,9 +960,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
|
|
|
962
960
|
a11y = _this$props8.a11y,
|
|
963
961
|
palette = _this$props8.palette,
|
|
964
962
|
needEffect = _this$props8.needEffect,
|
|
965
|
-
autoComplete = _this$props8.autoComplete
|
|
966
|
-
customProps = _this$props8.customProps;
|
|
967
|
-
var suggestionsProps = customProps.suggestionsProps;
|
|
963
|
+
autoComplete = _this$props8.autoComplete;
|
|
968
964
|
var _i18nKeys = i18nKeys,
|
|
969
965
|
_i18nKeys$clearText = _i18nKeys.clearText,
|
|
970
966
|
clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText;
|
|
@@ -1120,7 +1116,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
|
|
|
1120
1116
|
a11y: {
|
|
1121
1117
|
role: 'heading'
|
|
1122
1118
|
}
|
|
1123
|
-
})), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"],
|
|
1119
|
+
})), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
|
|
1124
1120
|
suggestions: suggestions,
|
|
1125
1121
|
selectedOptions: selectedOptionIds,
|
|
1126
1122
|
getRef: _this5.suggestionItemRef,
|
|
@@ -1132,7 +1128,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
|
|
|
1132
1128
|
a11y: {
|
|
1133
1129
|
role: 'option'
|
|
1134
1130
|
}
|
|
1135
|
-
}
|
|
1131
|
+
}));
|
|
1136
1132
|
}) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
|
|
1137
1133
|
options: revampedGroups,
|
|
1138
1134
|
searchString: searchStr,
|
|
@@ -57,8 +57,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
57
57
|
|
|
58
58
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
59
59
|
|
|
60
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
61
|
-
|
|
62
60
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
63
61
|
|
|
64
62
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
@@ -1070,10 +1068,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
1070
1068
|
boxSize = _this$props15.boxSize,
|
|
1071
1069
|
isLoading = _this$props15.isLoading,
|
|
1072
1070
|
selectAllText = _this$props15.selectAllText,
|
|
1073
|
-
needSelectAll = _this$props15.needSelectAll
|
|
1074
|
-
customProps = _this$props15.customProps;
|
|
1075
|
-
var _customProps$suggesti = customProps.suggestionsProps,
|
|
1076
|
-
suggestionsProps = _customProps$suggesti === void 0 ? {} : _customProps$suggesti;
|
|
1071
|
+
needSelectAll = _this$props15.needSelectAll;
|
|
1077
1072
|
var _this$state9 = this.state,
|
|
1078
1073
|
selectedOptions = _this$state9.selectedOptions,
|
|
1079
1074
|
searchStr = _this$state9.searchStr,
|
|
@@ -1145,7 +1140,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
1145
1140
|
eleRef: this.suggestionContainerRef
|
|
1146
1141
|
}, isSearching ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
1147
1142
|
className: _MultiSelectModule["default"][palette]
|
|
1148
|
-
}, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"],
|
|
1143
|
+
}, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
|
|
1149
1144
|
suggestions: suggestions,
|
|
1150
1145
|
getRef: this.suggestionItemRef,
|
|
1151
1146
|
hoverOption: hoverOption,
|
|
@@ -1158,7 +1153,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
1158
1153
|
a11y: {
|
|
1159
1154
|
role: 'option'
|
|
1160
1155
|
}
|
|
1161
|
-
}
|
|
1156
|
+
}) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
|
|
1162
1157
|
isLoading: isFetchingOptions,
|
|
1163
1158
|
options: options,
|
|
1164
1159
|
searchString: searchStr,
|
|
@@ -141,7 +141,6 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
|
|
|
141
141
|
needEffect = _this$props.needEffect,
|
|
142
142
|
isLoading = _this$props.isLoading,
|
|
143
143
|
keepSelectedOptions = _this$props.keepSelectedOptions,
|
|
144
|
-
needMultiLineText = _this$props.needMultiLineText,
|
|
145
144
|
customProps = _this$props.customProps;
|
|
146
145
|
var _customProps$Suggesti = customProps.SuggestionsProps,
|
|
147
146
|
SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
|
|
@@ -224,8 +223,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
|
|
|
224
223
|
selectedOptions: selectedOptionIds,
|
|
225
224
|
a11y: {
|
|
226
225
|
role: 'option'
|
|
227
|
-
}
|
|
228
|
-
needMultiLineText: needMultiLineText
|
|
226
|
+
}
|
|
229
227
|
}, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
|
|
230
228
|
isLoading: isFetchingOptions,
|
|
231
229
|
options: options,
|