@onesy/ui-react 1.0.88 → 1.0.89
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 +35 -31
- package/esm/Tab/Tab.js +11 -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,38 @@ 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 Wrapper = tooltip !== undefined ? react_1.default.Fragment : Tooltip;
|
|
120
|
+
const wrapperProps = tooltip !== undefined ? Object.assign({ name: tooltip }, TooltipProps) : undefined;
|
|
121
|
+
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)([
|
|
122
|
+
(0, utils_2.staticClassName)('Tab', theme) && [
|
|
123
|
+
'onesy-Tab-root',
|
|
124
|
+
`onesy-Tab-version-${version}`,
|
|
125
|
+
`onesy-Tab-size-${size}`,
|
|
126
|
+
active && `onesy-Tab-active`,
|
|
127
|
+
disabled && `onesy-Tab-disabled`
|
|
128
|
+
],
|
|
129
|
+
className,
|
|
130
|
+
classes.root,
|
|
131
|
+
classes[`size_${size}`],
|
|
132
|
+
active && classes.active,
|
|
133
|
+
disabled && classes.disabled
|
|
134
|
+
]) }, 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)([
|
|
135
|
+
(0, utils_2.staticClassName)('Tab', theme) && [
|
|
136
|
+
'onesy-Tab-line'
|
|
137
|
+
],
|
|
138
|
+
LineProps === null || LineProps === void 0 ? void 0 : LineProps.className,
|
|
139
|
+
classes.line
|
|
140
|
+
]) }, { 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)([
|
|
141
|
+
(0, utils_2.staticClassName)('Tab', theme) && [
|
|
142
|
+
'onesy-Tab-type'
|
|
143
|
+
],
|
|
144
|
+
classes[`type_${size}`]
|
|
145
|
+
]) }, { 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)([
|
|
146
|
+
(0, utils_2.staticClassName)('Tab', theme) && [
|
|
147
|
+
'onesy-Tab-type'
|
|
148
|
+
],
|
|
149
|
+
classes[`type_${size}`]
|
|
150
|
+
]) }, { children: children }))) : children)] }))] })) })));
|
|
147
151
|
});
|
|
148
152
|
Tab.displayName = 'onesy-Tab';
|
|
149
153
|
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,11 @@ 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 Wrapper = tooltip !== undefined ? React.Fragment : Tooltip;
|
|
130
|
+
const wrapperProps = tooltip !== undefined ? _objectSpread({
|
|
131
|
+
name: tooltip
|
|
132
|
+
}, TooltipProps) : undefined;
|
|
133
|
+
return /*#__PURE__*/React.createElement(Wrapper, wrapperProps, /*#__PURE__*/React.createElement(Surface, _extends({
|
|
126
134
|
ref: ref,
|
|
127
135
|
tabIndex: !disabled ? 0 : -1,
|
|
128
136
|
tonal: tonal,
|
|
@@ -149,7 +157,7 @@ const Tab = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
149
157
|
}, label) : label), children !== undefined && (is('simple', children) ? /*#__PURE__*/React.createElement(Type, {
|
|
150
158
|
version: typeVersion,
|
|
151
159
|
className: classNames([staticClassName('Tab', theme) && ['onesy-Tab-type'], classes[`type_${size}`]])
|
|
152
|
-
}, children) : children)));
|
|
160
|
+
}, children) : children))));
|
|
153
161
|
});
|
|
154
162
|
Tab.displayName = 'onesy-Tab';
|
|
155
163
|
export default Tab;
|
package/esm/index.js
CHANGED