@onesy/ui-react 1.0.160 → 1.0.162
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/Switch/Switch.js +3 -3
- package/Tooltip/Tooltip.js +17 -5
- package/esm/Switch/Switch.js +3 -3
- package/esm/Tooltip/Tooltip.js +17 -5
- package/esm/index.js +1 -1
- package/index.js +1 -1
- package/package.json +1 -1
package/Switch/Switch.js
CHANGED
|
@@ -14,7 +14,7 @@ var _styleReact = require("@onesy/style-react");
|
|
|
14
14
|
var _Keyframes = _interopRequireDefault(require("../Keyframes"));
|
|
15
15
|
var _IconButton = _interopRequireDefault(require("../IconButton"));
|
|
16
16
|
var _utils2 = require("../utils");
|
|
17
|
-
const _excluded = ["
|
|
17
|
+
const _excluded = ["style", "children"],
|
|
18
18
|
_excluded2 = ["tonal", "color", "size", "inputRef", "valueDefault", "checkedDefault", "value", "checked", "onChange", "OnIcon", "OffIcon", "disabled", "Component", "className", "style", "children", "version", "colorUnchecked"];
|
|
19
19
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
20
20
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
@@ -194,13 +194,13 @@ const useStyle = (0, _styleReact.style)(theme => ({
|
|
|
194
194
|
});
|
|
195
195
|
const Icon = props => {
|
|
196
196
|
const {
|
|
197
|
-
size,
|
|
198
197
|
style,
|
|
199
198
|
children
|
|
200
199
|
} = props,
|
|
201
200
|
other = (0, _objectWithoutProperties2.default)(props, _excluded);
|
|
201
|
+
const size = ['very small', 'small', 'regular', 'medium', 'large', 'very large'].includes(props.size) ? props.size : 'small';
|
|
202
202
|
let fontSize = 24;
|
|
203
|
-
if (size === 'very small') fontSize = 12;else if (size === 'small') fontSize = 18;else if (size === 'regular') fontSize = 24;else if (size === 'medium') fontSize = 30;else if (size === 'large') fontSize = 38;else if (size === 'very large') fontSize = 42;
|
|
203
|
+
if (size === 'very small') fontSize = 12;else if (size === 'small') fontSize = 18;else if (size === 'regular') fontSize = 24;else if (size === 'medium') fontSize = 30;else if (size === 'large') fontSize = 38;else if (size === 'very large') fontSize = 42;
|
|
204
204
|
return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
|
|
205
205
|
style: _objectSpread(_objectSpread({}, style), {}, {
|
|
206
206
|
fontSize
|
package/Tooltip/Tooltip.js
CHANGED
|
@@ -16,7 +16,7 @@ var _Modal = _interopRequireDefault(require("../Modal"));
|
|
|
16
16
|
var _Append = _interopRequireDefault(require("../Append"));
|
|
17
17
|
var _Surface = _interopRequireDefault(require("../Surface"));
|
|
18
18
|
var _utils2 = require("../utils");
|
|
19
|
-
const _excluded = ["tonal", "color", "open", "openDefault", "name", "label", "parent", "position", "switch", "alignment", "portal", "fullWidth", "maxWidth", "arrow", "anchor", "anchorElement", "noMargin", "classNameSwitch", "transformOrigin", "transformOriginSwitch", "transformOriginRtl", "transformOriginRtlSwitch", "click", "touch", "longPress", "hover", "focus", "inset", "nowrap", "follow", "interactive", "onOpen", "onClose", "onExited", "TransitionComponent", "TransitionComponentProps", "AppendProps", "ModalProps", "LabelProps", "LabelTextProps", "elevation", "className", "style", "children"];
|
|
19
|
+
const _excluded = ["tonal", "color", "open", "openDefault", "name", "label", "size", "parent", "position", "switch", "alignment", "portal", "fullWidth", "maxWidth", "arrow", "anchor", "anchorElement", "noMargin", "classNameSwitch", "transformOrigin", "transformOriginSwitch", "transformOriginRtl", "transformOriginRtlSwitch", "click", "touch", "longPress", "hover", "focus", "inset", "nowrap", "follow", "interactive", "onOpen", "onClose", "onExited", "TransitionComponent", "TransitionComponentProps", "AppendProps", "ModalProps", "LabelProps", "LabelTextProps", "elevation", "className", "style", "children"];
|
|
20
20
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
21
21
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
22
22
|
const useStyle = (0, _styleReact.style)(theme => ({
|
|
@@ -42,10 +42,21 @@ const useStyle = (0, _styleReact.style)(theme => ({
|
|
|
42
42
|
nameRoot_noMargin: {
|
|
43
43
|
padding: '0'
|
|
44
44
|
},
|
|
45
|
-
name:
|
|
46
|
-
|
|
45
|
+
name: {},
|
|
46
|
+
name_size_small: _objectSpread(_objectSpread({}, theme.typography.values.b3), {}, {
|
|
47
47
|
padding: `${theme.methods.space.value(0.5, 'px')} ${theme.methods.space.value(1, 'px')}`,
|
|
48
|
-
|
|
48
|
+
borderRadius: `${(0, _utils.clamp)(theme.shape.radius.unit / 2, 0, 6)}px`,
|
|
49
|
+
lineHeight: '1.3'
|
|
50
|
+
}),
|
|
51
|
+
name_size_regular: _objectSpread(_objectSpread({}, theme.typography.values.b2), {}, {
|
|
52
|
+
padding: `${theme.methods.space.value(0.75, 'px')} ${theme.methods.space.value(1.25, 'px')}`,
|
|
53
|
+
borderRadius: `${(0, _utils.clamp)(theme.shape.radius.unit / 2, 0, 8)}px`,
|
|
54
|
+
lineHeight: '1.3'
|
|
55
|
+
}),
|
|
56
|
+
name_size_large: _objectSpread(_objectSpread({}, theme.typography.values.b1), {}, {
|
|
57
|
+
padding: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(1.5, 'px')}`,
|
|
58
|
+
borderRadius: `${(0, _utils.clamp)(theme.shape.radius.unit / 2, 0, 12)}px`,
|
|
59
|
+
lineHeight: '1.3'
|
|
49
60
|
}),
|
|
50
61
|
arrow: {
|
|
51
62
|
'&::before': {
|
|
@@ -204,6 +215,7 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
|
|
|
204
215
|
openDefault,
|
|
205
216
|
name,
|
|
206
217
|
label: label_,
|
|
218
|
+
size = 'regular',
|
|
207
219
|
parent,
|
|
208
220
|
position = 'bottom',
|
|
209
221
|
switch: switch_ = true,
|
|
@@ -457,7 +469,7 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
|
|
|
457
469
|
tonal: tonal,
|
|
458
470
|
color: color
|
|
459
471
|
}, LabelProps, {
|
|
460
|
-
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tooltip', theme) && ['onesy-Tooltip-name'], LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.className, classes.name, arrow && [classes.arrow, classes[`arrow_position_${position}_alignment_${alignment}`]]]),
|
|
472
|
+
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tooltip', theme) && ['onesy-Tooltip-name'], LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.className, classes.name, classes[`name_size_${size}`], arrow && [classes.arrow, classes[`arrow_position_${position}_alignment_${alignment}`]]]),
|
|
461
473
|
style: _objectSpread(_objectSpread({}, styles.name), LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.style)
|
|
462
474
|
}), /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, LabelTextProps, {
|
|
463
475
|
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tooltip', theme) && ['onesy-Tooltip-name-text'], LabelTextProps === null || LabelTextProps === void 0 ? void 0 : LabelTextProps.className])
|
package/esm/Switch/Switch.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
|
-
const _excluded = ["
|
|
4
|
+
const _excluded = ["style", "children"],
|
|
5
5
|
_excluded2 = ["tonal", "color", "size", "inputRef", "valueDefault", "checkedDefault", "value", "checked", "onChange", "OnIcon", "OffIcon", "disabled", "Component", "className", "style", "children", "version", "colorUnchecked"];
|
|
6
6
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
7
7
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
@@ -187,13 +187,13 @@ const useStyle = styleMethod(theme => ({
|
|
|
187
187
|
});
|
|
188
188
|
const Icon = props => {
|
|
189
189
|
const {
|
|
190
|
-
size,
|
|
191
190
|
style,
|
|
192
191
|
children
|
|
193
192
|
} = props,
|
|
194
193
|
other = _objectWithoutProperties(props, _excluded);
|
|
194
|
+
const size = ['very small', 'small', 'regular', 'medium', 'large', 'very large'].includes(props.size) ? props.size : 'small';
|
|
195
195
|
let fontSize = 24;
|
|
196
|
-
if (size === 'very small') fontSize = 12;else if (size === 'small') fontSize = 18;else if (size === 'regular') fontSize = 24;else if (size === 'medium') fontSize = 30;else if (size === 'large') fontSize = 38;else if (size === 'very large') fontSize = 42;
|
|
196
|
+
if (size === 'very small') fontSize = 12;else if (size === 'small') fontSize = 18;else if (size === 'regular') fontSize = 24;else if (size === 'medium') fontSize = 30;else if (size === 'large') fontSize = 38;else if (size === 'very large') fontSize = 42;
|
|
197
197
|
return /*#__PURE__*/React.createElement("span", _extends({
|
|
198
198
|
style: _objectSpread(_objectSpread({}, style), {}, {
|
|
199
199
|
fontSize
|
package/esm/Tooltip/Tooltip.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
3
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
4
|
-
const _excluded = ["tonal", "color", "open", "openDefault", "name", "label", "parent", "position", "switch", "alignment", "portal", "fullWidth", "maxWidth", "arrow", "anchor", "anchorElement", "noMargin", "classNameSwitch", "transformOrigin", "transformOriginSwitch", "transformOriginRtl", "transformOriginRtlSwitch", "click", "touch", "longPress", "hover", "focus", "inset", "nowrap", "follow", "interactive", "onOpen", "onClose", "onExited", "TransitionComponent", "TransitionComponentProps", "AppendProps", "ModalProps", "LabelProps", "LabelTextProps", "elevation", "className", "style", "children"];
|
|
4
|
+
const _excluded = ["tonal", "color", "open", "openDefault", "name", "label", "size", "parent", "position", "switch", "alignment", "portal", "fullWidth", "maxWidth", "arrow", "anchor", "anchorElement", "noMargin", "classNameSwitch", "transformOrigin", "transformOriginSwitch", "transformOriginRtl", "transformOriginRtlSwitch", "click", "touch", "longPress", "hover", "focus", "inset", "nowrap", "follow", "interactive", "onOpen", "onClose", "onExited", "TransitionComponent", "TransitionComponentProps", "AppendProps", "ModalProps", "LabelProps", "LabelTextProps", "elevation", "className", "style", "children"];
|
|
5
5
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
6
6
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
7
7
|
import React from 'react';
|
|
@@ -35,10 +35,21 @@ const useStyle = styleMethod(theme => ({
|
|
|
35
35
|
nameRoot_noMargin: {
|
|
36
36
|
padding: '0'
|
|
37
37
|
},
|
|
38
|
-
name:
|
|
39
|
-
|
|
38
|
+
name: {},
|
|
39
|
+
name_size_small: _objectSpread(_objectSpread({}, theme.typography.values.b3), {}, {
|
|
40
40
|
padding: `${theme.methods.space.value(0.5, 'px')} ${theme.methods.space.value(1, 'px')}`,
|
|
41
|
-
|
|
41
|
+
borderRadius: `${clamp(theme.shape.radius.unit / 2, 0, 6)}px`,
|
|
42
|
+
lineHeight: '1.3'
|
|
43
|
+
}),
|
|
44
|
+
name_size_regular: _objectSpread(_objectSpread({}, theme.typography.values.b2), {}, {
|
|
45
|
+
padding: `${theme.methods.space.value(0.75, 'px')} ${theme.methods.space.value(1.25, 'px')}`,
|
|
46
|
+
borderRadius: `${clamp(theme.shape.radius.unit / 2, 0, 8)}px`,
|
|
47
|
+
lineHeight: '1.3'
|
|
48
|
+
}),
|
|
49
|
+
name_size_large: _objectSpread(_objectSpread({}, theme.typography.values.b1), {}, {
|
|
50
|
+
padding: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(1.5, 'px')}`,
|
|
51
|
+
borderRadius: `${clamp(theme.shape.radius.unit / 2, 0, 12)}px`,
|
|
52
|
+
lineHeight: '1.3'
|
|
42
53
|
}),
|
|
43
54
|
arrow: {
|
|
44
55
|
'&::before': {
|
|
@@ -182,6 +193,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
182
193
|
openDefault,
|
|
183
194
|
name,
|
|
184
195
|
label: label_,
|
|
196
|
+
size = 'regular',
|
|
185
197
|
parent,
|
|
186
198
|
position = 'bottom',
|
|
187
199
|
switch: switch_ = true,
|
|
@@ -433,7 +445,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
433
445
|
tonal: tonal,
|
|
434
446
|
color: color
|
|
435
447
|
}, LabelProps, {
|
|
436
|
-
className: classNames([staticClassName('Tooltip', theme) && ['onesy-Tooltip-name'], LabelProps?.className, classes.name, arrow && [classes.arrow, classes[`arrow_position_${position}_alignment_${alignment}`]]]),
|
|
448
|
+
className: classNames([staticClassName('Tooltip', theme) && ['onesy-Tooltip-name'], LabelProps?.className, classes.name, classes[`name_size_${size}`], arrow && [classes.arrow, classes[`arrow_position_${position}_alignment_${alignment}`]]]),
|
|
437
449
|
style: _objectSpread(_objectSpread({}, styles.name), LabelProps?.style)
|
|
438
450
|
}), /*#__PURE__*/React.createElement("span", _extends({}, LabelTextProps, {
|
|
439
451
|
className: classNames([staticClassName('Tooltip', theme) && ['onesy-Tooltip-name-text'], LabelTextProps?.className])
|
package/esm/index.js
CHANGED
package/index.js
CHANGED