@onesy/ui-react 1.0.159 → 1.0.161
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/Button/Button.js +13 -12
- package/Tooltip/Tooltip.js +17 -5
- package/esm/Button/Button.js +13 -12
- package/esm/Tooltip/Tooltip.js +17 -5
- package/esm/index.js +1 -1
- package/index.js +1 -1
- package/package.json +1 -1
package/Button/Button.js
CHANGED
|
@@ -377,12 +377,13 @@ const Button = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
|
|
|
377
377
|
} else {
|
|
378
378
|
children_ = (0, _utils.is)('array', children_) ? children_.filter(Boolean).map((item, index) => (0, _utils.is)('string', item.type) ? /*#__PURE__*/_react.default.cloneElement(item, {
|
|
379
379
|
key: index
|
|
380
|
-
}) : /*#__PURE__*/_react.default.cloneElement(item, _objectSpread({
|
|
381
|
-
key: index
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
380
|
+
}) : /*#__PURE__*/_react.default.cloneElement(item, _objectSpread(_objectSpread({
|
|
381
|
+
key: index
|
|
382
|
+
}, IconProps), {}, {
|
|
383
|
+
size: item.props.size !== undefined ? item.props.size : !noFontSize ? iconFontSize !== undefined ? iconFontSize : (IconProps === null || IconProps === void 0 ? void 0 : IconProps.size) || (size === 'large' ? 'medium' : size) : undefined
|
|
384
|
+
}))) : /*#__PURE__*/_react.default.cloneElement(children_, _objectSpread(_objectSpread({}, IconProps), {}, {
|
|
385
|
+
size: children_.props.size !== undefined ? children_.props.size : !noFontSize ? iconFontSize !== undefined ? iconFontSize : (IconProps === null || IconProps === void 0 ? void 0 : IconProps.size) || (size === 'large' ? 'medium' : size) : undefined
|
|
386
|
+
}));
|
|
386
387
|
if (!noFontSize) {
|
|
387
388
|
styles.root.fontSize = (0, _utils2.iconSizeToFontSize)(size === 'large' ? 'medium' : size);
|
|
388
389
|
if (!noIconRootFontSize) styles.iconRoot.fontSize = size === 'small' ? 30 : size === 'regular' ? 40 : 50;
|
|
@@ -467,9 +468,9 @@ const Button = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
|
|
|
467
468
|
disabled: disabled
|
|
468
469
|
}, InteractionProps)), firstLevelChildren, start && /*#__PURE__*/_react.default.createElement("span", {
|
|
469
470
|
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Button', theme) && ['onesy-Button-icon', 'onesy-Button-start'], classes.Icon, classes.start, classes[`start_size_${size}`], chip && classes[`chip_start_size_${size}`]])
|
|
470
|
-
}, /*#__PURE__*/_react.default.cloneElement(start, _objectSpread({
|
|
471
|
-
size: ((_start = start) === null || _start === void 0 || (_start = _start.props) === null || _start === void 0 ? void 0 : _start.size) || size || 'regular'
|
|
472
|
-
}
|
|
471
|
+
}, /*#__PURE__*/_react.default.cloneElement(start, _objectSpread(_objectSpread({}, IconProps), {}, {
|
|
472
|
+
size: ((_start = start) === null || _start === void 0 || (_start = _start.props) === null || _start === void 0 ? void 0 : _start.size) || (IconProps === null || IconProps === void 0 ? void 0 : IconProps.size) || size || 'regular'
|
|
473
|
+
}))), icon ? /*#__PURE__*/_react.default.createElement(IconWrapperComponent, (0, _extends2.default)({}, IconWrapperProps, {
|
|
473
474
|
id: refs.ids.label,
|
|
474
475
|
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Button', theme) && ['onesy-Button-icon-root'], IconWrapperProps === null || IconWrapperProps === void 0 ? void 0 : IconWrapperProps.className, classes.iconRoot]),
|
|
475
476
|
style: _objectSpread(_objectSpread({}, styles.iconRoot), IconWrapperProps === null || IconWrapperProps === void 0 ? void 0 : IconWrapperProps.style)
|
|
@@ -490,9 +491,9 @@ const Button = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
|
|
|
490
491
|
});
|
|
491
492
|
})), end && /*#__PURE__*/_react.default.createElement("span", {
|
|
492
493
|
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Button', theme) && ['onesy-Button-icon', 'onesy-Button-end'], classes.Icon, classes.end, classes[`end_size_${size}`], chip && classes[`chip_end_size_${size}`]])
|
|
493
|
-
}, /*#__PURE__*/_react.default.cloneElement(end, _objectSpread({
|
|
494
|
-
size: ((_end = end) === null || _end === void 0 || (_end = _end.props) === null || _end === void 0 ? void 0 : _end.size) || size || 'regular'
|
|
495
|
-
}
|
|
494
|
+
}, /*#__PURE__*/_react.default.cloneElement(end, _objectSpread(_objectSpread({}, IconProps), {}, {
|
|
495
|
+
size: ((_end = end) === null || _end === void 0 || (_end = _end.props) === null || _end === void 0 ? void 0 : _end.size) || (IconProps === null || IconProps === void 0 ? void 0 : IconProps.size) || size || 'regular'
|
|
496
|
+
}))));
|
|
496
497
|
});
|
|
497
498
|
Button.displayName = 'onesy-Button';
|
|
498
499
|
var _default = exports.default = Button;
|
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.4'
|
|
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.5'
|
|
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.6'
|
|
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/Button/Button.js
CHANGED
|
@@ -354,12 +354,13 @@ const Button = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
354
354
|
} else {
|
|
355
355
|
children_ = is('array', children_) ? children_.filter(Boolean).map((item, index) => is('string', item.type) ? /*#__PURE__*/React.cloneElement(item, {
|
|
356
356
|
key: index
|
|
357
|
-
}) : /*#__PURE__*/React.cloneElement(item, _objectSpread({
|
|
358
|
-
key: index
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
357
|
+
}) : /*#__PURE__*/React.cloneElement(item, _objectSpread(_objectSpread({
|
|
358
|
+
key: index
|
|
359
|
+
}, IconProps), {}, {
|
|
360
|
+
size: item.props.size !== undefined ? item.props.size : !noFontSize ? iconFontSize !== undefined ? iconFontSize : IconProps?.size || (size === 'large' ? 'medium' : size) : undefined
|
|
361
|
+
}))) : /*#__PURE__*/React.cloneElement(children_, _objectSpread(_objectSpread({}, IconProps), {}, {
|
|
362
|
+
size: children_.props.size !== undefined ? children_.props.size : !noFontSize ? iconFontSize !== undefined ? iconFontSize : IconProps?.size || (size === 'large' ? 'medium' : size) : undefined
|
|
363
|
+
}));
|
|
363
364
|
if (!noFontSize) {
|
|
364
365
|
styles.root.fontSize = iconSizeToFontSize(size === 'large' ? 'medium' : size);
|
|
365
366
|
if (!noIconRootFontSize) styles.iconRoot.fontSize = size === 'small' ? 30 : size === 'regular' ? 40 : 50;
|
|
@@ -444,9 +445,9 @@ const Button = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
444
445
|
disabled: disabled
|
|
445
446
|
}, InteractionProps)), firstLevelChildren, start && /*#__PURE__*/React.createElement("span", {
|
|
446
447
|
className: classNames([staticClassName('Button', theme) && ['onesy-Button-icon', 'onesy-Button-start'], classes.Icon, classes.start, classes[`start_size_${size}`], chip && classes[`chip_start_size_${size}`]])
|
|
447
|
-
}, /*#__PURE__*/React.cloneElement(start, _objectSpread({
|
|
448
|
-
size: start?.props?.size || size || 'regular'
|
|
449
|
-
}
|
|
448
|
+
}, /*#__PURE__*/React.cloneElement(start, _objectSpread(_objectSpread({}, IconProps), {}, {
|
|
449
|
+
size: start?.props?.size || IconProps?.size || size || 'regular'
|
|
450
|
+
}))), icon ? /*#__PURE__*/React.createElement(IconWrapperComponent, _extends({}, IconWrapperProps, {
|
|
450
451
|
id: refs.ids.label,
|
|
451
452
|
className: classNames([staticClassName('Button', theme) && ['onesy-Button-icon-root'], IconWrapperProps?.className, classes.iconRoot]),
|
|
452
453
|
style: _objectSpread(_objectSpread({}, styles.iconRoot), IconWrapperProps?.style)
|
|
@@ -466,9 +467,9 @@ const Button = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
466
467
|
});
|
|
467
468
|
})), end && /*#__PURE__*/React.createElement("span", {
|
|
468
469
|
className: classNames([staticClassName('Button', theme) && ['onesy-Button-icon', 'onesy-Button-end'], classes.Icon, classes.end, classes[`end_size_${size}`], chip && classes[`chip_end_size_${size}`]])
|
|
469
|
-
}, /*#__PURE__*/React.cloneElement(end, _objectSpread({
|
|
470
|
-
size: end?.props?.size || size || 'regular'
|
|
471
|
-
}
|
|
470
|
+
}, /*#__PURE__*/React.cloneElement(end, _objectSpread(_objectSpread({}, IconProps), {}, {
|
|
471
|
+
size: end?.props?.size || IconProps?.size || size || 'regular'
|
|
472
|
+
}))));
|
|
472
473
|
});
|
|
473
474
|
Button.displayName = 'onesy-Button';
|
|
474
475
|
export default Button;
|
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.4'
|
|
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.5'
|
|
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.6'
|
|
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