@onesy/ui-react 1.0.88 → 1.0.90
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/Tab/Tab.d.ts +3 -0
- package/Tab/Tab.js +36 -31
- package/esm/Tab/Tab.js +12 -3
- package/esm/index.js +1 -1
- package/package.json +1 -1
package/Tab/Tab.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ISurface } from '../Surface/Surface';
|
|
3
|
+
import { ITooltip } from '../Tooltip/Tooltip';
|
|
3
4
|
import { IElement, IPropsAny } from '../types';
|
|
4
5
|
export declare type ITab = Omit<ISurface, 'version' | 'onChange'> & {
|
|
5
6
|
version?: 'primary' | 'secondary';
|
|
@@ -12,10 +13,12 @@ export declare type ITab = Omit<ISurface, 'version' | 'onChange'> & {
|
|
|
12
13
|
label?: IElement;
|
|
13
14
|
icon?: IElement;
|
|
14
15
|
iconPosition?: 'start' | 'top' | 'bottom' | 'end';
|
|
16
|
+
tooltip?: any;
|
|
15
17
|
activateOnFocus?: boolean;
|
|
16
18
|
onBlur?: (event: React.FocusEvent<any>) => any;
|
|
17
19
|
onFocus?: (event: React.FocusEvent<any>) => any;
|
|
18
20
|
LineProps?: IPropsAny;
|
|
21
|
+
TooltipProps?: ITooltip;
|
|
19
22
|
};
|
|
20
23
|
declare const Tab: React.FC<ITab>;
|
|
21
24
|
export default Tab;
|
package/Tab/Tab.js
CHANGED
|
@@ -18,6 +18,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
18
18
|
const react_1 = __importDefault(require("react"));
|
|
19
19
|
const utils_1 = require("@onesy/utils");
|
|
20
20
|
const style_react_1 = require("@onesy/style-react");
|
|
21
|
+
const Tooltip_1 = __importDefault(require("../Tooltip"));
|
|
21
22
|
const Type_1 = __importDefault(require("../Type"));
|
|
22
23
|
const Surface_1 = __importDefault(require("../Surface"));
|
|
23
24
|
const Line_1 = __importDefault(require("../Line"));
|
|
@@ -87,7 +88,8 @@ const Tab = react_1.default.forwardRef((props_, ref) => {
|
|
|
87
88
|
const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
|
|
88
89
|
const Surface = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Surface) || Surface_1.default; }, [theme]);
|
|
89
90
|
const Interaction = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Interaction) || Interaction_1.default; }, [theme]);
|
|
90
|
-
const
|
|
91
|
+
const Tooltip = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tooltip) || Tooltip_1.default; }, [theme]);
|
|
92
|
+
const { tonal = true, color = 'primary', version = 'primary', size = 'regular', value, onChange, active, index, name, label: label_, icon, iconPosition = 'start', activateOnFocus, tooltip, disabled, onBlur: onBlur_, onFocus: onFocus_, LineProps = {}, TooltipProps, Component = 'button', className, children } = props, other = __rest(props, ["tonal", "color", "version", "size", "value", "onChange", "active", "index", "name", "label", "icon", "iconPosition", "activateOnFocus", "tooltip", "disabled", "onBlur", "onFocus", "LineProps", "TooltipProps", "Component", "className", "children"]);
|
|
91
93
|
const { classes } = useStyle();
|
|
92
94
|
const [focus, setFocus] = react_1.default.useState(false);
|
|
93
95
|
const label = name !== undefined ? name : label_;
|
|
@@ -114,36 +116,39 @@ const Tab = react_1.default.forwardRef((props_, ref) => {
|
|
|
114
116
|
typeVersion = 'l1';
|
|
115
117
|
else if (size === 'small')
|
|
116
118
|
typeVersion = 'l3';
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
],
|
|
145
|
-
|
|
146
|
-
|
|
119
|
+
const hasTooltip = ![null, undefined].includes(tooltip);
|
|
120
|
+
const Wrapper = hasTooltip ? Tooltip : react_1.default.Fragment;
|
|
121
|
+
const wrapperProps = hasTooltip ? Object.assign({ name: tooltip }, TooltipProps) : undefined;
|
|
122
|
+
return ((0, jsx_runtime_1.jsx)(Wrapper, Object.assign({}, wrapperProps, { children: (0, jsx_runtime_1.jsxs)(Surface, Object.assign({ ref: ref, tabIndex: !disabled ? 0 : -1, tonal: tonal, color: color, onBlur: onBlur, onFocus: onFocus, role: 'tab', "aria-selected": active, "data-onesy-tab-value": value, Component: Component, className: (0, style_react_1.classNames)([
|
|
123
|
+
(0, utils_2.staticClassName)('Tab', theme) && [
|
|
124
|
+
'onesy-Tab-root',
|
|
125
|
+
`onesy-Tab-version-${version}`,
|
|
126
|
+
`onesy-Tab-size-${size}`,
|
|
127
|
+
active && `onesy-Tab-active`,
|
|
128
|
+
disabled && `onesy-Tab-disabled`
|
|
129
|
+
],
|
|
130
|
+
className,
|
|
131
|
+
classes.root,
|
|
132
|
+
classes[`size_${size}`],
|
|
133
|
+
active && classes.active,
|
|
134
|
+
disabled && classes.disabled
|
|
135
|
+
]) }, other, { children: [(0, jsx_runtime_1.jsx)(Interaction, { pulse: focus }), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', justify: 'center' }, LineProps, { className: (0, style_react_1.classNames)([
|
|
136
|
+
(0, utils_2.staticClassName)('Tab', theme) && [
|
|
137
|
+
'onesy-Tab-line'
|
|
138
|
+
],
|
|
139
|
+
LineProps === null || LineProps === void 0 ? void 0 : LineProps.className,
|
|
140
|
+
classes.line
|
|
141
|
+
]) }, { children: [icon, label !== undefined && ((0, utils_1.is)('simple', label) ? ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: typeVersion, className: (0, style_react_1.classNames)([
|
|
142
|
+
(0, utils_2.staticClassName)('Tab', theme) && [
|
|
143
|
+
'onesy-Tab-type'
|
|
144
|
+
],
|
|
145
|
+
classes[`type_${size}`]
|
|
146
|
+
]) }, { children: label }))) : label), children !== undefined && ((0, utils_1.is)('simple', children) ? ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: typeVersion, className: (0, style_react_1.classNames)([
|
|
147
|
+
(0, utils_2.staticClassName)('Tab', theme) && [
|
|
148
|
+
'onesy-Tab-type'
|
|
149
|
+
],
|
|
150
|
+
classes[`type_${size}`]
|
|
151
|
+
]) }, { children: children }))) : children)] }))] })) })));
|
|
147
152
|
});
|
|
148
153
|
Tab.displayName = 'onesy-Tab';
|
|
149
154
|
exports.default = Tab;
|
package/esm/Tab/Tab.js
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
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", "version", "size", "value", "onChange", "active", "index", "name", "label", "icon", "iconPosition", "activateOnFocus", "disabled", "onBlur", "onFocus", "LineProps", "Component", "className", "children"];
|
|
4
|
+
const _excluded = ["tonal", "color", "version", "size", "value", "onChange", "active", "index", "name", "label", "icon", "iconPosition", "activateOnFocus", "tooltip", "disabled", "onBlur", "onFocus", "LineProps", "TooltipProps", "Component", "className", "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';
|
|
8
8
|
import { is } from '@onesy/utils';
|
|
9
9
|
import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
|
|
10
|
+
import TooltipElement from '../Tooltip';
|
|
10
11
|
import TypeElement from '../Type';
|
|
11
12
|
import SurfaceElement from '../Surface';
|
|
12
13
|
import LineElement from '../Line';
|
|
@@ -78,6 +79,7 @@ const Tab = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
78
79
|
const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
|
|
79
80
|
const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
|
|
80
81
|
const Interaction = React.useMemo(() => theme?.elements?.Interaction || InteractionElement, [theme]);
|
|
82
|
+
const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
|
|
81
83
|
const {
|
|
82
84
|
tonal = true,
|
|
83
85
|
color = 'primary',
|
|
@@ -92,10 +94,12 @@ const Tab = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
92
94
|
icon,
|
|
93
95
|
iconPosition = 'start',
|
|
94
96
|
activateOnFocus,
|
|
97
|
+
tooltip,
|
|
95
98
|
disabled,
|
|
96
99
|
onBlur: onBlur_,
|
|
97
100
|
onFocus: onFocus_,
|
|
98
101
|
LineProps = {},
|
|
102
|
+
TooltipProps,
|
|
99
103
|
Component = 'button',
|
|
100
104
|
className,
|
|
101
105
|
children
|
|
@@ -122,7 +126,12 @@ const Tab = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
122
126
|
}
|
|
123
127
|
let typeVersion = 'l2';
|
|
124
128
|
if (size === 'large') typeVersion = 'l1';else if (size === 'small') typeVersion = 'l3';
|
|
125
|
-
|
|
129
|
+
const hasTooltip = ![null, undefined].includes(tooltip);
|
|
130
|
+
const Wrapper = hasTooltip ? Tooltip : React.Fragment;
|
|
131
|
+
const wrapperProps = hasTooltip ? _objectSpread({
|
|
132
|
+
name: tooltip
|
|
133
|
+
}, TooltipProps) : undefined;
|
|
134
|
+
return /*#__PURE__*/React.createElement(Wrapper, wrapperProps, /*#__PURE__*/React.createElement(Surface, _extends({
|
|
126
135
|
ref: ref,
|
|
127
136
|
tabIndex: !disabled ? 0 : -1,
|
|
128
137
|
tonal: tonal,
|
|
@@ -149,7 +158,7 @@ const Tab = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
149
158
|
}, label) : label), children !== undefined && (is('simple', children) ? /*#__PURE__*/React.createElement(Type, {
|
|
150
159
|
version: typeVersion,
|
|
151
160
|
className: classNames([staticClassName('Tab', theme) && ['onesy-Tab-type'], classes[`type_${size}`]])
|
|
152
|
-
}, children) : children)));
|
|
161
|
+
}, children) : children))));
|
|
153
162
|
});
|
|
154
163
|
Tab.displayName = 'onesy-Tab';
|
|
155
164
|
export default Tab;
|
package/esm/index.js
CHANGED