@zohodesk/components 1.2.27 → 1.2.29

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.
Files changed (94) hide show
  1. package/.cli/PropLessFiles.html +1 -1
  2. package/.cli/propValidation_report.html +1 -1
  3. package/README.md +12 -5
  4. package/es/CheckBox/CheckBox.js +10 -0
  5. package/es/CheckBox/props/propTypes.js +1 -0
  6. package/es/Radio/Radio.js +26 -7
  7. package/es/Radio/Radio.module.css +3 -0
  8. package/es/Radio/__tests__/__snapshots__/Radio.spec.js.snap +3 -3
  9. package/es/Radio/props/defaultProps.js +1 -0
  10. package/es/Radio/props/propTypes.js +7 -0
  11. package/es/v1/Animation/Animation.js +1 -1
  12. package/es/v1/Card/Card.js +1 -1
  13. package/es/v1/CheckBox/CheckBox.js +7 -1
  14. package/es/v1/CheckBox/props/propTypes.js +1 -0
  15. package/es/v1/DropBox/utils/isMobilePopover.js +1 -1
  16. package/es/v1/ListItem/ListContainer.js +1 -1
  17. package/es/v1/MultiSelect/AdvancedGroupMultiSelect.js +1 -1
  18. package/es/v1/MultiSelect/AdvancedMultiSelect.js +1 -1
  19. package/es/v1/MultiSelect/MultiSelectWithAvatar.js +1 -1
  20. package/es/v1/MultiSelect/props/defaultProps.js +1 -1
  21. package/es/v1/Radio/Radio.js +22 -7
  22. package/es/v1/Radio/props/defaultProps.js +1 -0
  23. package/es/v1/Radio/props/propTypes.js +7 -0
  24. package/es/v1/ResponsiveDropBox/ResponsiveDropBox.js +1 -1
  25. package/es/v1/Select/GroupSelect.js +1 -1
  26. package/es/v1/Select/Select.js +1 -1
  27. package/es/v1/Select/SelectWithAvatar.js +1 -1
  28. package/es/v1/Select/SelectWithIcon.js +1 -1
  29. package/es/v1/Select/props/defaultProps.js +1 -1
  30. package/es/v1/Tab/Tabs.js +2 -2
  31. package/es/v1/Tooltip/Tooltip.js +1 -1
  32. package/lib/CheckBox/CheckBox.js +34 -24
  33. package/lib/CheckBox/props/propTypes.js +1 -0
  34. package/lib/Radio/Radio.js +45 -26
  35. package/lib/Radio/Radio.module.css +3 -0
  36. package/lib/Radio/__tests__/__snapshots__/Radio.spec.js.snap +3 -3
  37. package/lib/Radio/props/defaultProps.js +1 -0
  38. package/lib/Radio/props/propTypes.js +7 -0
  39. package/lib/v1/Animation/Animation.js +1 -1
  40. package/lib/v1/Card/Card.js +1 -1
  41. package/lib/v1/CheckBox/CheckBox.js +7 -1
  42. package/lib/v1/CheckBox/props/propTypes.js +1 -0
  43. package/lib/v1/DropBox/utils/isMobilePopover.js +1 -1
  44. package/lib/v1/ListItem/ListContainer.js +1 -1
  45. package/lib/v1/MultiSelect/AdvancedGroupMultiSelect.js +1 -1
  46. package/lib/v1/MultiSelect/AdvancedMultiSelect.js +1 -1
  47. package/lib/v1/MultiSelect/props/defaultProps.js +1 -1
  48. package/lib/v1/Radio/Radio.js +22 -7
  49. package/lib/v1/Radio/props/defaultProps.js +1 -0
  50. package/lib/v1/Radio/props/propTypes.js +7 -0
  51. package/lib/v1/ResponsiveDropBox/ResponsiveDropBox.js +1 -1
  52. package/lib/v1/Select/GroupSelect.js +1 -1
  53. package/lib/v1/Select/Select.js +1 -1
  54. package/lib/v1/Select/SelectWithAvatar.js +1 -1
  55. package/lib/v1/Select/SelectWithIcon.js +1 -1
  56. package/lib/v1/Select/props/defaultProps.js +1 -1
  57. package/lib/v1/Tab/Tabs.js +2 -2
  58. package/lib/v1/Tooltip/Tooltip.js +1 -1
  59. package/package.json +4 -4
  60. package/result.json +1 -1
  61. package/es/v1/Provider/AvatarSize.js +0 -13
  62. package/es/v1/Provider/Config.js +0 -18
  63. package/es/v1/Provider/CssProvider.js +0 -16
  64. package/es/v1/Provider/IdProvider.js +0 -66
  65. package/es/v1/Provider/LibraryContext.js +0 -37
  66. package/es/v1/Provider/LibraryContextInit.js +0 -3
  67. package/es/v1/Provider/NumberGenerator/NumberGenerator.js +0 -136
  68. package/es/v1/Provider/ZindexProvider.js +0 -57
  69. package/es/v1/Provider/index.js +0 -4
  70. package/es/v1/Responsive/CustomResponsive.js +0 -195
  71. package/es/v1/Responsive/RefWrapper.js +0 -39
  72. package/es/v1/Responsive/ResizeComponent.js +0 -197
  73. package/es/v1/Responsive/ResizeObserver.js +0 -140
  74. package/es/v1/Responsive/Responsive.js +0 -194
  75. package/es/v1/Responsive/index.js +0 -9
  76. package/es/v1/Responsive/props/defaultProps.js +0 -13
  77. package/es/v1/Responsive/props/propTypes.js +0 -25
  78. package/lib/v1/Provider/AvatarSize.js +0 -24
  79. package/lib/v1/Provider/Config.js +0 -27
  80. package/lib/v1/Provider/CssProvider.js +0 -27
  81. package/lib/v1/Provider/IdProvider.js +0 -79
  82. package/lib/v1/Provider/LibraryContext.js +0 -76
  83. package/lib/v1/Provider/LibraryContextInit.js +0 -15
  84. package/lib/v1/Provider/NumberGenerator/NumberGenerator.js +0 -174
  85. package/lib/v1/Provider/ZindexProvider.js +0 -69
  86. package/lib/v1/Provider/index.js +0 -81
  87. package/lib/v1/Responsive/CustomResponsive.js +0 -242
  88. package/lib/v1/Responsive/RefWrapper.js +0 -57
  89. package/lib/v1/Responsive/ResizeComponent.js +0 -268
  90. package/lib/v1/Responsive/ResizeObserver.js +0 -168
  91. package/lib/v1/Responsive/Responsive.js +0 -274
  92. package/lib/v1/Responsive/index.js +0 -55
  93. package/lib/v1/Responsive/props/defaultProps.js +0 -23
  94. package/lib/v1/Responsive/props/propTypes.js +0 -39
@@ -18,6 +18,7 @@ var propTypes = {
18
18
  disabled: _propTypes["default"].bool,
19
19
  disabledTitle: _propTypes["default"].string,
20
20
  getRef: _propTypes["default"].func,
21
+ getContainerRef: _propTypes["default"].func,
21
22
  id: _propTypes["default"].string,
22
23
  isFilled: _propTypes["default"].bool,
23
24
  isClipped: _propTypes["default"].bool,
@@ -21,6 +21,8 @@ var _RadioModule = _interopRequireDefault(require("./Radio.module.css"));
21
21
 
22
22
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
23
23
 
24
+ 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); }
25
+
24
26
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
25
27
 
26
28
  function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -53,6 +55,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
53
55
 
54
56
  _this = _super.call(this, props);
55
57
  _this.onChange = _this.onChange.bind(_assertThisInitialized(_this));
58
+ _this.handleGetRef = _this.handleGetRef.bind(_assertThisInitialized(_this));
56
59
  return _this;
57
60
  }
58
61
 
@@ -64,28 +67,38 @@ var Radio = /*#__PURE__*/function (_React$Component) {
64
67
  value = _this$props.value;
65
68
  onChange && onChange(value, e);
66
69
  }
70
+ }, {
71
+ key: "handleGetRef",
72
+ value: function handleGetRef(ele) {
73
+ var _this$props2 = this.props,
74
+ getRef = _this$props2.getRef,
75
+ value = _this$props2.value;
76
+ getRef && getRef(ele, value);
77
+ }
67
78
  }, {
68
79
  key: "render",
69
80
  value: function render() {
70
- var _this$props2 = this.props,
71
- id = _this$props2.id,
72
- name = _this$props2.name,
73
- value = _this$props2.value,
74
- checked = _this$props2.checked,
75
- disabled = _this$props2.disabled,
76
- isReadOnly = _this$props2.isReadOnly,
77
- palette = _this$props2.palette,
78
- disabledTitle = _this$props2.disabledTitle,
79
- title = _this$props2.title,
80
- text = _this$props2.text,
81
- labelPalette = _this$props2.labelPalette,
82
- size = _this$props2.size,
83
- labelSize = _this$props2.labelSize,
84
- variant = _this$props2.variant,
85
- active = _this$props2.active,
86
- isFilled = _this$props2.isFilled,
87
- customClass = _this$props2.customClass,
88
- a11y = _this$props2.a11y;
81
+ var _this$props3 = this.props,
82
+ id = _this$props3.id,
83
+ name = _this$props3.name,
84
+ value = _this$props3.value,
85
+ checked = _this$props3.checked,
86
+ disabled = _this$props3.disabled,
87
+ isReadOnly = _this$props3.isReadOnly,
88
+ palette = _this$props3.palette,
89
+ disabledTitle = _this$props3.disabledTitle,
90
+ title = _this$props3.title,
91
+ text = _this$props3.text,
92
+ labelPalette = _this$props3.labelPalette,
93
+ size = _this$props3.size,
94
+ labelSize = _this$props3.labelSize,
95
+ variant = _this$props3.variant,
96
+ active = _this$props3.active,
97
+ isFilled = _this$props3.isFilled,
98
+ customClass = _this$props3.customClass,
99
+ customProps = _this$props3.customProps,
100
+ children = _this$props3.children,
101
+ a11y = _this$props3.a11y;
89
102
  var _customClass$customRa = customClass.customRadioWrap,
90
103
  customRadioWrap = _customClass$customRa === void 0 ? '' : _customClass$customRa,
91
104
  _customClass$customRa2 = customClass.customRadio,
@@ -97,13 +110,18 @@ var Radio = /*#__PURE__*/function (_React$Component) {
97
110
  var ariaHidden = a11y.ariaHidden,
98
111
  _a11y$role = a11y.role,
99
112
  role = _a11y$role === void 0 ? 'radio' : _a11y$role,
113
+ tabIndex = a11y.tabIndex,
100
114
  _a11y$ariaChecked = a11y.ariaChecked,
101
115
  ariaChecked = _a11y$ariaChecked === void 0 ? checked : _a11y$ariaChecked,
102
116
  ariaLabel = a11y.ariaLabel,
103
117
  ariaLabelledby = a11y.ariaLabelledby,
104
118
  _a11y$ariaReadonly = a11y.ariaReadonly,
105
119
  ariaReadonly = _a11y$ariaReadonly === void 0 ? isReadOnly || disabled ? true : false : _a11y$ariaReadonly;
106
- return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
120
+ var _customProps$Containe = customProps.ContainerProps,
121
+ ContainerProps = _customProps$Containe === void 0 ? {} : _customProps$Containe,
122
+ _customProps$LabelPro = customProps.LabelProps,
123
+ LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro;
124
+ return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
107
125
  dataId: value ? value.toLowerCase() : 'RadioComp',
108
126
  isCover: false,
109
127
  isInline: text ? false : true,
@@ -113,13 +131,14 @@ var Radio = /*#__PURE__*/function (_React$Component) {
113
131
  "data-title": toolTip,
114
132
  onClick: !isReadOnly && !disabled ? this.onChange : '',
115
133
  "aria-checked": ariaChecked,
116
- tabindex: isReadOnly || disabled || ariaHidden ? '-1' : '0',
134
+ tabindex: isReadOnly || disabled || ariaHidden ? '-1' : tabIndex || '0',
135
+ eleRef: this.handleGetRef,
117
136
  role: role,
118
137
  "aria-Hidden": ariaHidden,
119
138
  "aria-label": ariaLabel,
120
139
  "aria-labelledby": ariaLabelledby,
121
140
  "aria-readonly": ariaReadonly
122
- }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
141
+ }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
123
142
  className: "".concat(_RadioModule["default"].radio, " ").concat(checked ? "".concat(_RadioModule["default"]["rdBox".concat(palette)]) : '', " \n ").concat(isReadOnly || disabled ? '' : "".concat(_RadioModule["default"]["hover".concat(palette)]), " ").concat(_RadioModule["default"][size], " ").concat(isFilled ? _RadioModule["default"].filled : '', " ").concat(_RadioModule["default"]["centerPath".concat(palette)], " ").concat(customRadio)
124
143
  }, /*#__PURE__*/_react["default"].createElement("input", {
125
144
  type: "hidden",
@@ -144,17 +163,17 @@ var Radio = /*#__PURE__*/function (_React$Component) {
144
163
  }) : null))), text && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
145
164
  flexible: true,
146
165
  className: _RadioModule["default"].text
147
- }, /*#__PURE__*/_react["default"].createElement(_Label["default"], {
166
+ }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
148
167
  text: text,
149
- palette: disabled ? 'disable' : labelPalette,
168
+ palette: labelPalette,
150
169
  size: labelSize,
151
170
  type: "title",
152
171
  clipped: true,
153
172
  dataId: "".concat(text, "_label"),
154
173
  variant: variant,
155
174
  title: toolTip ? toolTip : text,
156
- customClass: "".concat(checked && active && !disabled ? "".concat(_RadioModule["default"]["".concat(palette, "checkedActive")]) : '', " \n ").concat(_RadioModule["default"]["".concat(palette, "Label")], " ").concat(accessMode, " ").concat(customLabel)
157
- })));
175
+ customClass: "".concat(checked && active ? "".concat(_RadioModule["default"]["".concat(palette, "checkedActive")]) : '', " \n ").concat(_RadioModule["default"]["".concat(palette, "Label")], " ").concat(accessMode, " ").concat(customLabel)
176
+ }, LabelProps))), children);
158
177
  }
159
178
  }]);
160
179
 
@@ -21,6 +21,9 @@
21
21
  .readonly, .disabled {
22
22
  cursor: not-allowed;
23
23
  }
24
+ .disabled {
25
+ opacity: 0.7
26
+ }
24
27
  .radio {
25
28
  composes: offSelection from '../common/common.module.css';
26
29
  width: var(--radio_width);
@@ -1145,7 +1145,7 @@ exports[`Radio rendering the accessMode when disabled 1`] = `
1145
1145
  data-test-id="boxComponent"
1146
1146
  >
1147
1147
  <label
1148
- class="label title medium disable font_default
1148
+ class="label title medium default font_default
1149
1149
  dotted cursor
1150
1150
  primaryLabel disabled "
1151
1151
  data-id="RadioText_label"
@@ -1505,7 +1505,7 @@ exports[`Radio rendering the disabled is true 1`] = `
1505
1505
  data-test-id="boxComponent"
1506
1506
  >
1507
1507
  <label
1508
- class="label title medium disable font_default
1508
+ class="label title medium default font_default
1509
1509
  dotted cursor
1510
1510
  undefined disabled "
1511
1511
  data-id="RadioText_label"
@@ -1567,7 +1567,7 @@ exports[`Radio rendering the disabledTitle 1`] = `
1567
1567
  data-test-id="boxComponent"
1568
1568
  >
1569
1569
  <label
1570
- class="label title medium disable font_default
1570
+ class="label title medium default font_default
1571
1571
  dotted cursor
1572
1572
  primaryLabel disabled "
1573
1573
  data-id="RadioText_label"
@@ -16,6 +16,7 @@ var defaultProps = {
16
16
  variant: 'default',
17
17
  isFilled: true,
18
18
  customClass: {},
19
+ customProps: {},
19
20
  a11y: {}
20
21
  };
21
22
  exports.defaultProps = defaultProps;
@@ -14,6 +14,7 @@ var propTypes = {
14
14
  checked: _propTypes["default"].bool,
15
15
  disabled: _propTypes["default"].bool,
16
16
  disabledTitle: _propTypes["default"].string,
17
+ getRef: _propTypes["default"].func,
17
18
  id: _propTypes["default"].string,
18
19
  isFilled: _propTypes["default"].bool,
19
20
  isReadOnly: _propTypes["default"].bool,
@@ -30,14 +31,20 @@ var propTypes = {
30
31
  customRadio: _propTypes["default"].string,
31
32
  customLabel: _propTypes["default"].string
32
33
  }),
34
+ customProps: _propTypes["default"].exact({
35
+ ContainerProps: _propTypes["default"].object,
36
+ LabelProps: _propTypes["default"].object
37
+ }),
33
38
  a11y: _propTypes["default"].shape({
34
39
  ariaChecked: _propTypes["default"].bool,
35
40
  ariaHidden: _propTypes["default"].bool,
36
41
  role: _propTypes["default"].string,
42
+ tabIndex: _propTypes["default"].oneOfType(_propTypes["default"].string, _propTypes["default"].number),
37
43
  ariaLabelledby: _propTypes["default"].string,
38
44
  ariaLabel: _propTypes["default"].string,
39
45
  ariaReadonly: _propTypes["default"].bool
40
46
  }),
47
+ children: _propTypes["default"].node,
41
48
  onChange: _propTypes["default"].func,
42
49
  text: _propTypes["default"].string
43
50
  };
@@ -32,7 +32,7 @@ function Animation(props) {
32
32
  delayClassName = _props$delayClassName === void 0 ? null : _props$delayClassName;
33
33
  var newClassNames = delayClassName ? Object.assign({}, _utils.animationStyle[name], {
34
34
  exit: "".concat(delayClassName, " ").concat(_utils.animationStyle[name].exit)
35
- }) : animaanimationStyletion[name];
35
+ }) : _utils.animationStyle[name];
36
36
  return /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.CSSTransition, {
37
37
  classNames: newClassNames && newClassNames,
38
38
  "in": isActive,
@@ -20,7 +20,7 @@ var _defaultProps = require("./props/defaultProps");
20
20
 
21
21
  var _Layout = require("../Layout");
22
22
 
23
- var _Config = require("../Provider/Config");
23
+ var _Config = require("../../Provider/Config");
24
24
 
25
25
  var _CardModule = _interopRequireDefault(require("../../Card/Card.module.css"));
26
26
 
@@ -15,7 +15,7 @@ var _Label = _interopRequireDefault(require("../Label/Label"));
15
15
 
16
16
  var _Layout = require("../Layout");
17
17
 
18
- var _CssProvider = _interopRequireDefault(require("../Provider/CssProvider"));
18
+ var _CssProvider = _interopRequireDefault(require("../../Provider/CssProvider"));
19
19
 
20
20
  var _CheckBoxModule = _interopRequireDefault(require("../../CheckBox/CheckBox.module.css"));
21
21
 
@@ -38,6 +38,7 @@ var CheckBox = function CheckBox(props) {
38
38
  isFilled = props.isFilled,
39
39
  isClipped = props.isClipped,
40
40
  getRef = props.getRef,
41
+ getContainerRef = props.getContainerRef,
41
42
  variant = props.variant,
42
43
  active = props.active,
43
44
  dataId = props.dataId,
@@ -53,6 +54,10 @@ var CheckBox = function CheckBox(props) {
53
54
  onChange && onChange(!checked, e);
54
55
  }
55
56
 
57
+ function handleGetContainerRef(ele) {
58
+ getContainerRef && getContainerRef(ele, id);
59
+ }
60
+
56
61
  var _customProps$CheckBox = customProps.CheckBoxProps,
57
62
  CheckBoxProps = _customProps$CheckBox === void 0 ? {} : _customProps$CheckBox,
58
63
  _customProps$LabelPro = customProps.LabelProps,
@@ -85,6 +90,7 @@ var CheckBox = function CheckBox(props) {
85
90
  onClick: isReadOnly || disabled ? null : onChange,
86
91
  tabIndex: isReadOnly || disabled || ariaHidden ? '-1' : '0',
87
92
  "aria-checked": ariaChecked,
93
+ eleRef: handleGetContainerRef,
88
94
  role: role,
89
95
  "aria-label": ariaLabel,
90
96
  "aria-labelledby": ariaLabelledby,
@@ -18,6 +18,7 @@ var propTypes = {
18
18
  disabled: _propTypes["default"].bool,
19
19
  disabledTitle: _propTypes["default"].string,
20
20
  getRef: _propTypes["default"].func,
21
+ getContainerRef: _propTypes["default"].func,
21
22
  id: _propTypes["default"].string,
22
23
  isFilled: _propTypes["default"].bool,
23
24
  isClipped: _propTypes["default"].bool,
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports["default"] = isMobilePopover;
7
7
 
8
- var _Config = require("../../Provider/Config");
8
+ var _Config = require("../../../Provider/Config");
9
9
 
10
10
  function isMobilePopover(needResponsive) {
11
11
  // let { needResponsive } = props;
@@ -19,7 +19,7 @@ var _defaultProps = require("./props/defaultProps");
19
19
 
20
20
  var _propTypes = require("./props/propTypes");
21
21
 
22
- var _CustomResponsive = require("../Responsive/CustomResponsive");
22
+ var _CustomResponsive = require("../../Responsive/CustomResponsive");
23
23
 
24
24
  var _excluded = ["role", "ariaSelected", "ariaLabel", "insetFocus"];
25
25
 
@@ -37,7 +37,7 @@ var _IdProvider = require("../../Provider/IdProvider");
37
37
 
38
38
  var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/ResponsiveDropBox"));
39
39
 
40
- var _CustomResponsive = require("../Responsive/CustomResponsive");
40
+ var _CustomResponsive = require("../../Responsive/CustomResponsive");
41
41
 
42
42
  var _icons = require("@zohodesk/icons");
43
43
 
@@ -37,7 +37,7 @@ var _IdProvider = require("../../Provider/IdProvider");
37
37
 
38
38
  var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/ResponsiveDropBox"));
39
39
 
40
- var _CustomResponsive = require("../Responsive/CustomResponsive");
40
+ var _CustomResponsive = require("../../Responsive/CustomResponsive");
41
41
 
42
42
  var _Loader = _interopRequireDefault(require("@zohodesk/svg/lib/Loader/Loader"));
43
43
 
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.Suggestions_defaultProps = exports.SelectedOptions_defaultProps = exports.MultiSelect_defaultProps = exports.MultiSelectWithAvatar_defaultProps = exports.MultiSelectHeader_defaultProps = exports.EmptyState_defaultProps = exports.AdvancedMultiSelect_defaultProps = exports.AdvancedGroupMultiSelect_defaultProps = void 0;
7
7
 
8
- var _Config = require("../../Provider/Config");
8
+ var _Config = require("../../../Provider/Config");
9
9
 
10
10
  var AdvancedGroupMultiSelect_defaultProps = {
11
11
  animationStyle: 'bounce',
@@ -19,6 +19,8 @@ var _RadioModule = _interopRequireDefault(require("../../Radio/Radio.module.css"
19
19
 
20
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
21
21
 
22
+ 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); }
23
+
22
24
  var Radio = function Radio(props) {
23
25
  var id = props.id,
24
26
  name = props.name,
@@ -37,6 +39,9 @@ var Radio = function Radio(props) {
37
39
  active = props.active,
38
40
  isFilled = props.isFilled,
39
41
  customClass = props.customClass,
42
+ customProps = props.customProps,
43
+ getRef = props.getRef,
44
+ children = props.children,
40
45
  a11y = props.a11y;
41
46
  var _customClass$customRa = customClass.customRadioWrap,
42
47
  customRadioWrap = _customClass$customRa === void 0 ? '' : _customClass$customRa,
@@ -49,19 +54,28 @@ var Radio = function Radio(props) {
49
54
  var ariaHidden = a11y.ariaHidden,
50
55
  _a11y$role = a11y.role,
51
56
  role = _a11y$role === void 0 ? 'radio' : _a11y$role,
57
+ tabIndex = a11y.tabIndex,
52
58
  _a11y$ariaChecked = a11y.ariaChecked,
53
59
  ariaChecked = _a11y$ariaChecked === void 0 ? checked : _a11y$ariaChecked,
54
60
  ariaLabel = a11y.ariaLabel,
55
61
  ariaLabelledby = a11y.ariaLabelledby,
56
62
  _a11y$ariaReadonly = a11y.ariaReadonly,
57
63
  ariaReadonly = _a11y$ariaReadonly === void 0 ? isReadOnly || disabled ? true : false : _a11y$ariaReadonly;
64
+ var _customProps$Containe = customProps.ContainerProps,
65
+ ContainerProps = _customProps$Containe === void 0 ? {} : _customProps$Containe,
66
+ _customProps$LabelPro = customProps.LabelProps,
67
+ LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro;
58
68
 
59
69
  function onChange(e) {
60
70
  var onChange = props.onChange;
61
71
  onChange && onChange(value, e);
62
72
  }
63
73
 
64
- return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
74
+ function handleGetRef(ele) {
75
+ getRef && getRef(ele, value);
76
+ }
77
+
78
+ return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
65
79
  dataId: value ? value.toLowerCase() : 'RadioComp',
66
80
  isCover: false,
67
81
  isInline: text ? false : true,
@@ -71,13 +85,14 @@ var Radio = function Radio(props) {
71
85
  "data-title": toolTip,
72
86
  onClick: !isReadOnly && !disabled ? onChange : '',
73
87
  "aria-checked": ariaChecked,
74
- tabindex: isReadOnly || disabled || ariaHidden ? '-1' : '0',
88
+ tabindex: isReadOnly || disabled || ariaHidden ? '-1' : tabIndex || '0',
89
+ eleRef: handleGetRef,
75
90
  role: role,
76
91
  "aria-Hidden": ariaHidden,
77
92
  "aria-label": ariaLabel,
78
93
  "aria-labelledby": ariaLabelledby,
79
94
  "aria-readonly": ariaReadonly
80
- }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
95
+ }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
81
96
  className: "".concat(_RadioModule["default"].radio, " ").concat(checked ? "".concat(_RadioModule["default"]["rdBox".concat(palette)]) : '', "\n ").concat(isReadOnly || disabled ? '' : "".concat(_RadioModule["default"]["hover".concat(palette)]), " ").concat(_RadioModule["default"][size], " ").concat(isFilled ? _RadioModule["default"].filled : '', " ").concat(_RadioModule["default"]["centerPath".concat(palette)], " ").concat(customRadio)
82
97
  }, /*#__PURE__*/_react["default"].createElement("input", {
83
98
  type: "hidden",
@@ -102,17 +117,17 @@ var Radio = function Radio(props) {
102
117
  }) : null))), text && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
103
118
  flexible: true,
104
119
  className: _RadioModule["default"].text
105
- }, /*#__PURE__*/_react["default"].createElement(_Label["default"], {
120
+ }, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
106
121
  text: text,
107
- palette: disabled ? 'disable' : labelPalette,
122
+ palette: labelPalette,
108
123
  size: labelSize,
109
124
  type: "title",
110
125
  clipped: true,
111
126
  dataId: "".concat(text, "_label"),
112
127
  variant: variant,
113
128
  title: toolTip ? toolTip : text,
114
- customClass: "".concat(checked && active && !disabled ? "".concat(_RadioModule["default"]["".concat(palette, "checkedActive")]) : '', "\n ").concat(_RadioModule["default"]["".concat(palette, "Label")], " ").concat(accessMode, " ").concat(customLabel)
115
- })));
129
+ customClass: "".concat(checked && active ? "".concat(_RadioModule["default"]["".concat(palette, "checkedActive")]) : '', "\n ").concat(_RadioModule["default"]["".concat(palette, "Label")], " ").concat(accessMode, " ").concat(customLabel)
130
+ }, LabelProps))), children);
116
131
  };
117
132
 
118
133
  var _default = Radio;
@@ -16,6 +16,7 @@ var defaultProps = {
16
16
  variant: 'default',
17
17
  isFilled: true,
18
18
  customClass: {},
19
+ customProps: {},
19
20
  a11y: {}
20
21
  };
21
22
  exports.defaultProps = defaultProps;
@@ -14,6 +14,7 @@ var propTypes = {
14
14
  checked: _propTypes["default"].bool,
15
15
  disabled: _propTypes["default"].bool,
16
16
  disabledTitle: _propTypes["default"].string,
17
+ getRef: _propTypes["default"].func,
17
18
  id: _propTypes["default"].string,
18
19
  isFilled: _propTypes["default"].bool,
19
20
  isReadOnly: _propTypes["default"].bool,
@@ -30,14 +31,20 @@ var propTypes = {
30
31
  customRadio: _propTypes["default"].string,
31
32
  customLabel: _propTypes["default"].string
32
33
  }),
34
+ customProps: _propTypes["default"].exact({
35
+ ContainerProps: _propTypes["default"].object,
36
+ LabelProps: _propTypes["default"].object
37
+ }),
33
38
  a11y: _propTypes["default"].shape({
34
39
  ariaChecked: _propTypes["default"].bool,
35
40
  ariaHidden: _propTypes["default"].bool,
36
41
  role: _propTypes["default"].string,
42
+ tabIndex: _propTypes["default"].oneOfType(_propTypes["default"].string, _propTypes["default"].number),
37
43
  ariaLabelledby: _propTypes["default"].string,
38
44
  ariaLabel: _propTypes["default"].string,
39
45
  ariaReadonly: _propTypes["default"].bool
40
46
  }),
47
+ children: _propTypes["default"].node,
41
48
  onChange: _propTypes["default"].func,
42
49
  text: _propTypes["default"].string
43
50
  };
@@ -17,7 +17,7 @@ var _DropBox = _interopRequireDefault(require("../DropBox/DropBox"));
17
17
 
18
18
  var _Layout = require("../Layout");
19
19
 
20
- var _CustomResponsive = require("../Responsive/CustomResponsive");
20
+ var _CustomResponsive = require("../../Responsive/CustomResponsive");
21
21
 
22
22
  var _ResponsiveDropBoxModule = _interopRequireDefault(require("../../ResponsiveDropBox/ResponsiveDropBox.module.css"));
23
23
 
@@ -37,7 +37,7 @@ var _IdProvider = require("../../Provider/IdProvider");
37
37
 
38
38
  var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/ResponsiveDropBox"));
39
39
 
40
- var _CustomResponsive = require("../Responsive/CustomResponsive");
40
+ var _CustomResponsive = require("../../Responsive/CustomResponsive");
41
41
 
42
42
  var _SelectModule = _interopRequireDefault(require("../../Select/Select.module.css"));
43
43
 
@@ -33,7 +33,7 @@ var _icons = require("@zohodesk/icons");
33
33
 
34
34
  var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/ResponsiveDropBox"));
35
35
 
36
- var _CustomResponsive = require("../Responsive/CustomResponsive");
36
+ var _CustomResponsive = require("../../Responsive/CustomResponsive");
37
37
 
38
38
  var _Loader = _interopRequireDefault(require("@zohodesk/svg/lib/Loader/Loader"));
39
39
 
@@ -37,7 +37,7 @@ var _IdProvider = require("../../Provider/IdProvider");
37
37
 
38
38
  var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/ResponsiveDropBox"));
39
39
 
40
- var _CustomResponsive = require("../Responsive/CustomResponsive");
40
+ var _CustomResponsive = require("../../Responsive/CustomResponsive");
41
41
 
42
42
  var _Loader = _interopRequireDefault(require("@zohodesk/svg/lib/Loader/Loader"));
43
43
 
@@ -31,7 +31,7 @@ var _IdProvider = require("../../Provider/IdProvider");
31
31
 
32
32
  var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/ResponsiveDropBox"));
33
33
 
34
- var _CustomResponsive = require("../Responsive/CustomResponsive");
34
+ var _CustomResponsive = require("../../Responsive/CustomResponsive");
35
35
 
36
36
  var _Loader = _interopRequireDefault(require("@zohodesk/svg/lib/Loader/Loader"));
37
37
 
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.Select_defaultProps = exports.SelectWithIcon_defaultProps = exports.SelectWithAvatar_defaultProps = exports.GroupSelect_defaultProps = void 0;
7
7
 
8
- var _Config = require("../../Provider/Config");
8
+ var _Config = require("../../../Provider/Config");
9
9
 
10
10
  var _SelectWithIcon_defau;
11
11
 
@@ -21,7 +21,7 @@ var _Common = require("../../utils/Common");
21
21
 
22
22
  var _Layout = require("../Layout");
23
23
 
24
- var _ResizeObserver = _interopRequireDefault(require("../Responsive/ResizeObserver"));
24
+ var _ResizeObserver = _interopRequireDefault(require("../../Responsive/ResizeObserver"));
25
25
 
26
26
  var _ListItem = _interopRequireDefault(require("../ListItem/ListItem"));
27
27
 
@@ -33,7 +33,7 @@ var _Popup = _interopRequireDefault(require("../Popup/Popup"));
33
33
 
34
34
  var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/ResponsiveDropBox"));
35
35
 
36
- var _CustomResponsive = require("../Responsive/CustomResponsive");
36
+ var _CustomResponsive = require("../../Responsive/CustomResponsive");
37
37
 
38
38
  var _semanticButtonModule = _interopRequireDefault(require("../../semantic/Button/semanticButton.module.css"));
39
39
 
@@ -17,7 +17,7 @@ var _Config = require("../../Provider/Config");
17
17
 
18
18
  var _TooltipModule = _interopRequireDefault(require("../../Tooltip/Tooltip.module.css"));
19
19
 
20
- var _ResizeObserver = _interopRequireDefault(require("../Responsive/ResizeObserver"));
20
+ var _ResizeObserver = _interopRequireDefault(require("../../Responsive/ResizeObserver"));
21
21
 
22
22
  var _selectn = _interopRequireDefault(require("selectn"));
23
23
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohodesk/components",
3
- "version": "1.2.27",
3
+ "version": "1.2.29",
4
4
  "main": "es/index.js",
5
5
  "module": "es/index.js",
6
6
  "private": false,
@@ -65,12 +65,12 @@
65
65
  "@testing-library/user-event": "^13.0.10",
66
66
  "@zohodesk-private/color-variable-preprocessor": "1.2.0",
67
67
  "@zohodesk-private/css-variable-migrator": "^1.0.7",
68
- "@zohodesk-private/node-plugins": "1.1.6",
68
+ "@zohodesk-private/node-plugins": "1.1.7",
69
69
  "@zohodesk-private/react-prop-validator": "1.2.3",
70
70
  "@zohodesk/a11y": "2.2.0",
71
71
  "@zohodesk/docstool": "1.0.0-alpha-2",
72
72
  "@zohodesk/hooks": "2.0.3",
73
- "@zohodesk/icons": "1.0.33",
73
+ "@zohodesk/icons": "1.0.35",
74
74
  "@zohodesk/svg": "1.1.11",
75
75
  "@zohodesk/utils": "1.3.13",
76
76
  "@zohodesk/variables": "1.0.0",
@@ -85,7 +85,7 @@
85
85
  "selectn": "1.1.2"
86
86
  },
87
87
  "peerDependencies": {
88
- "@zohodesk/icons": "1.0.33",
88
+ "@zohodesk/icons": "1.0.35",
89
89
  "@zohodesk/variables": "1.0.0",
90
90
  "@zohodesk/svg": "1.1.11",
91
91
  "@zohodesk/virtualizer": "1.0.3",