@onesy/ui-react 1.0.127 → 1.0.129

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 (8) hide show
  1. package/BottomAppBar/BottomAppBar.d.ts +0 -3
  2. package/BottomAppBar/BottomAppBar.js +17 -155
  3. package/NavigationItem/NavigationItem.d.ts +3 -2
  4. package/NavigationItem/NavigationItem.js +13 -38
  5. package/esm/BottomAppBar/BottomAppBar.js +24 -164
  6. package/esm/NavigationItem/NavigationItem.js +15 -38
  7. package/esm/index.js +1 -1
  8. package/package.json +1 -1
package/BottomAppBar/BottomAppBar.d.ts CHANGED
@@ -1,10 +1,7 @@
1
1
  import React from 'react';
2
2
  import { ISurface } from '../Surface/Surface';
3
- import { IElement } from '../types';
4
3
  export declare type IBottomAppBar = ISurface & {
5
- main?: IElement;
6
4
  fixed?: boolean;
7
- noTransition?: boolean;
8
5
  };
9
6
  declare const BottomAppBar: React.FC<IBottomAppBar>;
10
7
  export default BottomAppBar;
package/BottomAppBar/BottomAppBar.js CHANGED
@@ -19,81 +19,27 @@ const react_1 = __importDefault(require("react"));
19
19
  const style_react_1 = require("@onesy/style-react");
20
20
  const Line_1 = __importDefault(require("../Line"));
21
21
  const Surface_1 = __importDefault(require("../Surface"));
22
- const Transition_1 = __importDefault(require("../Transition"));
23
22
  const utils_1 = require("../utils");
24
23
  const useStyle = (0, style_react_1.style)(theme => ({
25
24
  root: {
25
+ background: theme.methods.palette.color.alpha(theme.palette.color.primary[theme.palette.light ? 100 : 5], 0.94),
26
+ boxShadow: '0px 8px 10px 1px rgb(0 0 0 / 1%), 0px 3px 14px 2px rgb(0 0 0 / 1%), 0px 5px 5px -3px rgb(0 0 0 / 4%)',
27
+ borderRadius: '500px',
26
28
  zIndex: theme.z_index.app_bar,
27
- width: '100%',
28
- height: '80px',
29
- paddingBlock: theme.methods.space.value(1.5, 'px'),
30
- paddingInline: `${theme.methods.space.value(0.5, 'px')} ${theme.methods.space.value(2, 'px')}`
29
+ overflow: 'auto hidden',
30
+ '&::-webkit-scrollbar': {
31
+ width: '0px',
32
+ height: '0px'
33
+ }
31
34
  },
32
- size_small: { height: '72px' },
33
- size_regular: { height: '80px' },
34
- size_large: { height: '88px' },
35
+ size_small: { padding: '6px 10px' },
36
+ size_regular: { padding: '12px 20px' },
37
+ size_large: { padding: '18px 30px' },
35
38
  fixed: {
36
39
  position: 'fixed',
37
- insetInline: '0px',
38
- bottom: '0px'
39
- },
40
- item: {
41
- opacity: '0',
42
- transform: 'translateY(100%)',
43
- transition: theme === null || theme === void 0 ? void 0 : theme.methods.transitions.make(['opacity', 'transform'], { duration: 'rg', timing_function: 'standard' }),
44
- '&.enter': {
45
- opacity: '0',
46
- transform: 'translateY(100%)'
47
- },
48
- '&.entering': {
49
- opacity: '1',
50
- transform: 'translateY(0%)'
51
- },
52
- '&.entered': {
53
- opacity: '1',
54
- transform: 'translateY(0%)'
55
- },
56
- '&.exit': {
57
- opacity: '1',
58
- transform: 'translateY(0%)'
59
- },
60
- '&.exiting': {
61
- opacity: '0',
62
- transform: 'translateY(0%)'
63
- },
64
- '&.exited': {
65
- opacity: '0',
66
- transform: 'translateY(0%)'
67
- }
68
- },
69
- mainItem: {
70
- opacity: '0',
71
- transform: 'scale(0.75)',
72
- transition: theme === null || theme === void 0 ? void 0 : theme.methods.transitions.make(['opacity', 'transform'], { duration: 'rg', timing_function: 'standard' }),
73
- '&.enter': {
74
- opacity: '0',
75
- transform: 'scale(0.75)'
76
- },
77
- '&.entering': {
78
- opacity: '1',
79
- transform: 'scale(1)'
80
- },
81
- '&.entered': {
82
- opacity: '1',
83
- transform: 'scale(1)'
84
- },
85
- '&.exit': {
86
- opacity: '1',
87
- transform: 'scale(1)'
88
- },
89
- '&.exiting': {
90
- opacity: '0',
91
- transform: 'scale(1)'
92
- },
93
- '&.exited': {
94
- opacity: '0',
95
- transform: 'scale(1)'
96
- }
40
+ bottom: '8px',
41
+ left: '50%',
42
+ transform: 'translateX(-50%)'
97
43
  }
98
44
  }), { name: 'onesy-BottomAppBar' });
99
45
  const BottomAppBar = react_1.default.forwardRef((props_, ref) => {
@@ -101,89 +47,9 @@ const BottomAppBar = react_1.default.forwardRef((props_, ref) => {
101
47
  const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyBottomAppBar) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
102
48
  const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
103
49
  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]);
104
- const Transition = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Transition) || Transition_1.default; }, [theme]);
105
- const { tonal = true, color = 'primary', size = 'regular', main: main_, fixed, noTransition, className, children: children_ } = props, other = __rest(props, ["tonal", "color", "size", "main", "fixed", "noTransition", "className", "children"]);
50
+ const { tonal = true, color = 'default', size = 'regular', fixed = true, className, style, children } = props, other = __rest(props, ["tonal", "color", "size", "fixed", "className", "style", "children"]);
106
51
  const { classes } = useStyle();
107
- const makeChildren = (values) => {
108
- return react_1.default.Children
109
- .toArray(values)
110
- .map((item, index) => ((0, jsx_runtime_1.jsx)(Transition, Object.assign({ onRemoved: () => {
111
- if (index === 0)
112
- reAddChildren();
113
- }, removeOnExited: true }, { children: (status) => (react_1.default.cloneElement(item, {
114
- className: (0, style_react_1.classNames)([
115
- classes.item,
116
- status
117
- ]),
118
- elevation: item.props.elevation !== undefined ? item.props.elevation : false,
119
- version: item.props.version !== undefined ? item.props.version : 'filled',
120
- color: item.props.color !== undefined ? item.props.color : color,
121
- tonal: item.props.tonal !== undefined ? item.props.tonal : tonal,
122
- style: Object.assign(Object.assign({}, item.props.style), (status.includes('enter') && {
123
- transitionDelay: `${index * 70}ms`
124
- }))
125
- })) }), index)));
126
- };
127
- const makeMain = (values) => {
128
- return react_1.default.Children
129
- .toArray(values)
130
- .map((item, index) => ((0, jsx_runtime_1.jsx)(Transition, Object.assign({ onRemoved: () => {
131
- if (index === 0)
132
- reAddMain();
133
- }, removeOnExited: true }, { children: (status) => {
134
- var _a;
135
- return (react_1.default.cloneElement(item, {
136
- className: (0, style_react_1.classNames)([
137
- classes.mainItem,
138
- status
139
- ]),
140
- color: item.props.color !== undefined ? item.props.color : color,
141
- tonal: item.props.tonal !== undefined ? item.props.tonal : tonal && ['onesy-Fab'].includes((_a = item.type) === null || _a === void 0 ? void 0 : _a.displayName) ? 'secondary' : tonal
142
- }));
143
- } }), index)));
144
- };
145
- const [init, setInit] = react_1.default.useState(false);
146
- const [children, setChildren] = react_1.default.useState(() => makeChildren(children_));
147
- const [main, setMain] = react_1.default.useState(() => makeMain(main_));
148
- const [inProp, setInProp] = react_1.default.useState(true);
149
- const refs = {
150
- preChildren: react_1.default.useRef(undefined),
151
- preMain: react_1.default.useRef(undefined)
152
- };
153
- react_1.default.useEffect(() => {
154
- setInit(true);
155
- }, []);
156
- const reAddChildren = () => {
157
- setChildren(makeChildren(refs.preChildren.current));
158
- setInProp(true);
159
- refs.preChildren.current = undefined;
160
- };
161
- const reAddMain = () => {
162
- setMain(makeMain(refs.preMain.current));
163
- setInProp(true);
164
- refs.preMain.current = undefined;
165
- };
166
- react_1.default.useEffect(() => {
167
- if (init) {
168
- if (!noTransition) {
169
- refs.preChildren.current = children_;
170
- setInProp(false);
171
- }
172
- else
173
- setChildren(makeChildren(children_));
174
- }
175
- }, [react_1.default.Children.toArray(children_).map((item) => item.key).join('')]);
176
- react_1.default.useEffect(() => {
177
- if (init) {
178
- if (!noTransition) {
179
- refs.preMain.current = main_;
180
- setInProp(false);
181
- }
182
- else
183
- setMain(makeMain(main_));
184
- }
185
- }, [react_1.default.Children.toArray(main_).map((item) => item.key).join('')]);
186
- return ((0, jsx_runtime_1.jsxs)(Surface, Object.assign({ ref: ref, color: color, tonal: tonal, gap: 4, direction: 'row', align: 'center', justify: 'space-between', Component: Line, className: (0, style_react_1.classNames)([
52
+ return ((0, jsx_runtime_1.jsx)(Surface, Object.assign({ ref: ref, color: color, tonal: tonal, gap: 4, direction: 'row', align: 'center', justify: 'space-between', Component: Line, className: (0, style_react_1.classNames)([
187
53
  (0, utils_1.staticClassName)('BottomAppBar', theme) && [
188
54
  'onesy-BottomAppBar-root',
189
55
  `onesy-BottomAppBar-size-${size}`
@@ -192,11 +58,7 @@ const BottomAppBar = react_1.default.forwardRef((props_, ref) => {
192
58
  classes.root,
193
59
  classes[`size_${size}`],
194
60
  fixed && classes.fixed
195
- ]) }, other, { children: [!!children.length && ((0, jsx_runtime_1.jsx)(Line, Object.assign({ direction: 'row', align: 'center', justify: 'flex-start', gap: 0 }, { children: children.map((item) => (react_1.default.cloneElement(item, {
196
- in: inProp
197
- }))) }))), !!main.length && ((0, jsx_runtime_1.jsx)(Line, Object.assign({ direction: 'row', align: 'center', justify: 'flex-end' }, { children: main.map((item) => (react_1.default.cloneElement(item, {
198
- in: inProp
199
- }))) })))] })));
61
+ ]), style: Object.assign({ maxWidth: `clamp(100px, ${((children === null || children === void 0 ? void 0 : children.length) || 3) * 110}px, calc(100vw - 24px))` }, style) }, other, { children: children })));
200
62
  });
201
63
  BottomAppBar.displayName = 'onesy-BottomAppBar';
202
64
  exports.default = BottomAppBar;
package/NavigationItem/NavigationItem.d.ts CHANGED
@@ -5,9 +5,9 @@ export declare type INavigationItemVersion = 'regular' | 'auto';
5
5
  export declare type INavigationItem = ITooltip & {
6
6
  version?: 'regular' | 'auto';
7
7
  value?: any;
8
- vertical?: boolean;
9
8
  name?: IElement;
10
- label?: IElement;
9
+ nameTooltip?: any;
10
+ vertical?: boolean;
11
11
  icon?: IElement;
12
12
  iconSelected?: IElement;
13
13
  selected?: boolean;
@@ -21,6 +21,7 @@ export declare type INavigationItem = ITooltip & {
21
21
  onMouseLeave?: (event: React.MouseEvent<any>) => any;
22
22
  onTouchStart?: (event: React.TouchEvent<any>) => any;
23
23
  TooltipProps?: IPropsAny;
24
+ LabelProps?: IPropsAny;
24
25
  IconWrapperProps?: IPropsAny;
25
26
  };
26
27
  declare const NavigationItem: React.FC<INavigationItem>;
package/NavigationItem/NavigationItem.js CHANGED
@@ -19,7 +19,6 @@ 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
21
  const Type_1 = __importDefault(require("../Type"));
22
- const Fade_1 = __importDefault(require("../Fade"));
23
22
  const Line_1 = __importDefault(require("../Line"));
24
23
  const Tooltip_1 = __importDefault(require("../Tooltip"));
25
24
  const Transition_1 = __importDefault(require("../Transition"));
@@ -29,10 +28,8 @@ const useStyle = (0, style_react_1.style)(theme => ({
29
28
  display: 'inline-flex',
30
29
  justifyContent: 'center',
31
30
  flex: '1 1 auto',
32
- userSelect: 'none',
33
31
  cursor: 'pointer',
34
- padding: `${theme.methods.space.value(1.5, 'px')} 0 ${theme.methods.space.value(2, 'px')}`,
35
- minHeight: '80px',
32
+ userSelect: 'none'
36
33
  },
37
34
  vertical: {
38
35
  flex: '0 0 auto',
@@ -41,8 +38,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
41
38
  width: '100%'
42
39
  },
43
40
  iconWrapper: {
44
- position: 'absolute',
45
- top: '0',
41
+ position: 'relative',
46
42
  height: '32px',
47
43
  width: '64px'
48
44
  },
@@ -58,14 +54,6 @@ const useStyle = (0, style_react_1.style)(theme => ({
58
54
  icon: {
59
55
  lineHeight: '0'
60
56
  },
61
- labelWrapper: {
62
- position: 'absolute',
63
- bottom: '0'
64
- },
65
- label: {
66
- position: 'absolute',
67
- bottom: '0'
68
- },
69
57
  indicator: {
70
58
  position: 'absolute',
71
59
  inset: '0',
@@ -114,15 +102,14 @@ const useStyle = (0, style_react_1.style)(theme => ({
114
102
  }
115
103
  }), { name: 'onesy-NavigationItem' });
116
104
  const NavigationItem = react_1.default.forwardRef((props_, ref) => {
117
- var _a;
105
+ var _a, _b;
118
106
  const theme = (0, style_react_1.useOnesyTheme)();
119
107
  const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyNavigationItem) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
120
108
  const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
121
109
  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]);
122
- const Fade = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Fade) || Fade_1.default; }, [theme]);
123
110
  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]);
124
111
  const Transition = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Transition) || Transition_1.default; }, [theme]);
125
- const { tonal = true, color = 'primary', version = 'regular', value, vertical, name, label, icon, iconSelected, selected, disabled, IconWrapperComponent = 'span', onFocus: onFocus_, onBlur: onBlur_, onKeyDown: onKeyDown_, onMouseDown: onMouseDown_, onMouseEnter: onMouseEnter_, onMouseLeave: onMouseLeave_, onTouchStart: onTouchStart_, TooltipProps, IconWrapperProps, className, style, children: children_ } = props, other = __rest(props, ["tonal", "color", "version", "value", "vertical", "name", "label", "icon", "iconSelected", "selected", "disabled", "IconWrapperComponent", "onFocus", "onBlur", "onKeyDown", "onMouseDown", "onMouseEnter", "onMouseLeave", "onTouchStart", "TooltipProps", "IconWrapperProps", "className", "style", "children"]);
112
+ const { tonal = true, color = 'primary', version = 'regular', value, name, nameTooltip, vertical, icon, iconSelected, selected, disabled, IconWrapperComponent = 'span', onFocus: onFocus_, onBlur: onBlur_, onKeyDown: onKeyDown_, onMouseDown: onMouseDown_, onMouseEnter: onMouseEnter_, onMouseLeave: onMouseLeave_, onTouchStart: onTouchStart_, TooltipProps, LabelProps, IconWrapperProps, className, style, children: children_ } = props, other = __rest(props, ["tonal", "color", "version", "value", "name", "nameTooltip", "vertical", "icon", "iconSelected", "selected", "disabled", "IconWrapperComponent", "onFocus", "onBlur", "onKeyDown", "onMouseDown", "onMouseEnter", "onMouseLeave", "onTouchStart", "TooltipProps", "LabelProps", "IconWrapperProps", "className", "style", "children"]);
126
113
  const { classes } = useStyle();
127
114
  const [focus, setFocus] = react_1.default.useState(false);
128
115
  const [hover, setHover] = react_1.default.useState(false);
@@ -133,7 +120,6 @@ const NavigationItem = react_1.default.forwardRef((props_, ref) => {
133
120
  hover: react_1.default.useRef(undefined)
134
121
  };
135
122
  const styles = {
136
- root: {},
137
123
  icon: {},
138
124
  label: {},
139
125
  indicator: {}
@@ -220,19 +206,8 @@ const NavigationItem = react_1.default.forwardRef((props_, ref) => {
220
206
  styles.indicator.color = (palette === null || palette === void 0 ? void 0 : palette.main) || (color === 'default' ? theme.palette.text.default.primary : theme.palette.color[color].main);
221
207
  styles.icon.color = styles.label.color = theme.methods.palette.color.value(color, 5, true, palette);
222
208
  }
223
- const LabelWrapper = version === 'auto' ? Fade : react_1.default.Fragment;
224
- const LabelWrapperProps = {};
225
- if (version === 'auto') {
226
- LabelWrapperProps.in = selected;
227
- LabelWrapperProps.className = (0, style_react_1.classNames)([
228
- (0, utils_2.staticClassName)('NavigationItem', theme) && [
229
- 'onesy-NavigationItem-label'
230
- ],
231
- classes.labelWrapper
232
- ]);
233
- }
234
209
  const Icon = (selected && iconSelected) || icon;
235
- return ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: label || value, position: 'top', alignment: 'center', longPress: true, touch: false, hover: false, focus: false }, TooltipProps, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ tabIndex: !disabled ? 0 : undefined, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onTouchStart: onTouchStart, onMouseDown: onMouseDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, className: (0, style_react_1.classNames)([
210
+ return ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: (_b = nameTooltip !== null && nameTooltip !== void 0 ? nameTooltip : name) !== null && _b !== void 0 ? _b : value, position: 'top', alignment: 'center', longPress: true, touch: false, hover: false, focus: false }, TooltipProps, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ tabIndex: !disabled ? 0 : undefined, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onTouchStart: onTouchStart, onMouseDown: onMouseDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, className: (0, style_react_1.classNames)([
236
211
  (0, utils_2.staticClassName)('NavigationItem', theme) && [
237
212
  'onesy-NavigationItem-root',
238
213
  selected && 'onesy-NavigationItem-selected',
@@ -245,7 +220,7 @@ const NavigationItem = react_1.default.forwardRef((props_, ref) => {
245
220
  classes.root,
246
221
  vertical && classes.vertical,
247
222
  disabled && classes.disabled
248
- ]), style: Object.assign(Object.assign({}, style), styles.root) }, other, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ ref: item => {
223
+ ]), style: Object.assign({}, style) }, other, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ ref: item => {
249
224
  if (ref) {
250
225
  if ((0, utils_1.is)('function', ref))
251
226
  ref(item);
@@ -253,7 +228,7 @@ const NavigationItem = react_1.default.forwardRef((props_, ref) => {
253
228
  ref.current = item;
254
229
  }
255
230
  refs.root.current = item;
256
- }, direction: 'column', align: 'center', justify: 'center', gap: 0.5, className: (0, style_react_1.classNames)([
231
+ }, direction: 'column', align: 'center', justify: 'center', gap: 0.25, className: (0, style_react_1.classNames)([
257
232
  (0, utils_2.staticClassName)('NavigationItem', theme) && [
258
233
  'onesy-NavigationItem-item'
259
234
  ],
@@ -283,12 +258,12 @@ const NavigationItem = react_1.default.forwardRef((props_, ref) => {
283
258
  classes.icon
284
259
  ]) }, { children: react_1.default.cloneElement(Icon, {
285
260
  style: Object.assign(Object.assign({}, Icon.props.style), styles.icon)
286
- }) }))] }))), ['regular', 'auto'].includes(version) && ((0, jsx_runtime_1.jsx)(LabelWrapper, Object.assign({}, LabelWrapperProps, { children: (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3', className: (0, style_react_1.classNames)([
287
- (0, utils_2.staticClassName)('NavigationItem', theme) && [
288
- 'onesy-NavigationItem-label'
289
- ],
290
- classes.label
291
- ]), style: styles.label }, { children: name !== undefined ? name : label })) })))] })) })) })));
261
+ }) }))] }))), (version === 'regular' || (version === 'auto' && selected)) && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, LabelProps, { className: (0, style_react_1.classNames)([
262
+ (0, utils_2.staticClassName)('NavigationItem', theme) && [
263
+ 'onesy-NavigationItem-label',
264
+ LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.className
265
+ ]
266
+ ]), style: Object.assign(Object.assign({}, styles.label), LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.style) }, { children: name })))] })) })) })));
292
267
  });
293
268
  NavigationItem.displayName = 'onesy-NavigationItem';
294
269
  exports.default = NavigationItem;
package/esm/BottomAppBar/BottomAppBar.js CHANGED
@@ -1,100 +1,40 @@
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", "size", "main", "fixed", "noTransition", "className", "children"];
4
+ const _excluded = ["tonal", "color", "size", "fixed", "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';
8
8
  import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
9
9
  import LineElement from '../Line';
10
10
  import SurfaceElement from '../Surface';
11
- import TransitionElement from '../Transition';
12
11
  import { staticClassName } from '../utils';
13
12
  const useStyle = styleMethod(theme => ({
14
13
  root: {
14
+ background: theme.methods.palette.color.alpha(theme.palette.color.primary[theme.palette.light ? 100 : 5], 0.94),
15
+ boxShadow: '0px 8px 10px 1px rgb(0 0 0 / 1%), 0px 3px 14px 2px rgb(0 0 0 / 1%), 0px 5px 5px -3px rgb(0 0 0 / 4%)',
16
+ borderRadius: '500px',
15
17
  zIndex: theme.z_index.app_bar,
16
- width: '100%',
17
- height: '80px',
18
- paddingBlock: theme.methods.space.value(1.5, 'px'),
19
- paddingInline: `${theme.methods.space.value(0.5, 'px')} ${theme.methods.space.value(2, 'px')}`
18
+ overflow: 'auto hidden',
19
+ '&::-webkit-scrollbar': {
20
+ width: '0px',
21
+ height: '0px'
22
+ }
20
23
  },
21
24
  size_small: {
22
- height: '72px'
25
+ padding: '6px 10px'
23
26
  },
24
27
  size_regular: {
25
- height: '80px'
28
+ padding: '12px 20px'
26
29
  },
27
30
  size_large: {
28
- height: '88px'
31
+ padding: '18px 30px'
29
32
  },
30
33
  fixed: {
31
34
  position: 'fixed',
32
- insetInline: '0px',
33
- bottom: '0px'
34
- },
35
- item: {
36
- opacity: '0',
37
- transform: 'translateY(100%)',
38
- transition: theme?.methods.transitions.make(['opacity', 'transform'], {
39
- duration: 'rg',
40
- timing_function: 'standard'
41
- }),
42
- '&.enter': {
43
- opacity: '0',
44
- transform: 'translateY(100%)'
45
- },
46
- '&.entering': {
47
- opacity: '1',
48
- transform: 'translateY(0%)'
49
- },
50
- '&.entered': {
51
- opacity: '1',
52
- transform: 'translateY(0%)'
53
- },
54
- '&.exit': {
55
- opacity: '1',
56
- transform: 'translateY(0%)'
57
- },
58
- '&.exiting': {
59
- opacity: '0',
60
- transform: 'translateY(0%)'
61
- },
62
- '&.exited': {
63
- opacity: '0',
64
- transform: 'translateY(0%)'
65
- }
66
- },
67
- mainItem: {
68
- opacity: '0',
69
- transform: 'scale(0.75)',
70
- transition: theme?.methods.transitions.make(['opacity', 'transform'], {
71
- duration: 'rg',
72
- timing_function: 'standard'
73
- }),
74
- '&.enter': {
75
- opacity: '0',
76
- transform: 'scale(0.75)'
77
- },
78
- '&.entering': {
79
- opacity: '1',
80
- transform: 'scale(1)'
81
- },
82
- '&.entered': {
83
- opacity: '1',
84
- transform: 'scale(1)'
85
- },
86
- '&.exit': {
87
- opacity: '1',
88
- transform: 'scale(1)'
89
- },
90
- '&.exiting': {
91
- opacity: '0',
92
- transform: 'scale(1)'
93
- },
94
- '&.exited': {
95
- opacity: '0',
96
- transform: 'scale(1)'
97
- }
35
+ bottom: '8px',
36
+ left: '50%',
37
+ transform: 'translateX(-50%)'
98
38
  }
99
39
  }), {
100
40
  name: 'onesy-BottomAppBar'
@@ -104,89 +44,19 @@ const BottomAppBar = /*#__PURE__*/React.forwardRef((props_, ref) => {
104
44
  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyBottomAppBar?.props?.default), props_), [props_]);
105
45
  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
106
46
  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
107
- const Transition = React.useMemo(() => theme?.elements?.Transition || TransitionElement, [theme]);
108
47
  const {
109
48
  tonal = true,
110
- color = 'primary',
49
+ color = 'default',
111
50
  size = 'regular',
112
- main: main_,
113
- fixed,
114
- noTransition,
51
+ fixed = true,
115
52
  className,
116
- children: children_
53
+ style,
54
+ children
117
55
  } = props,
118
56
  other = _objectWithoutProperties(props, _excluded);
119
57
  const {
120
58
  classes
121
59
  } = useStyle();
122
- const makeChildren = values => {
123
- return React.Children.toArray(values).map((item, index) => /*#__PURE__*/React.createElement(Transition, {
124
- key: index,
125
- onRemoved: () => {
126
- if (index === 0) reAddChildren();
127
- },
128
- removeOnExited: true
129
- }, status => (/*#__PURE__*/React.cloneElement(item, {
130
- className: classNames([classes.item, status]),
131
- elevation: item.props.elevation !== undefined ? item.props.elevation : false,
132
- version: item.props.version !== undefined ? item.props.version : 'filled',
133
- color: item.props.color !== undefined ? item.props.color : color,
134
- tonal: item.props.tonal !== undefined ? item.props.tonal : tonal,
135
- style: _objectSpread(_objectSpread({}, item.props.style), status.includes('enter') && {
136
- transitionDelay: `${index * 70}ms`
137
- })
138
- }))));
139
- };
140
- const makeMain = values => {
141
- return React.Children.toArray(values).map((item, index) => /*#__PURE__*/React.createElement(Transition, {
142
- key: index,
143
- onRemoved: () => {
144
- if (index === 0) reAddMain();
145
- },
146
- removeOnExited: true
147
- }, status => (/*#__PURE__*/React.cloneElement(item, {
148
- className: classNames([classes.mainItem, status]),
149
- color: item.props.color !== undefined ? item.props.color : color,
150
- tonal: item.props.tonal !== undefined ? item.props.tonal : tonal && ['onesy-Fab'].includes(item.type?.displayName) ? 'secondary' : tonal
151
- }))));
152
- };
153
- const [init, setInit] = React.useState(false);
154
- const [children, setChildren] = React.useState(() => makeChildren(children_));
155
- const [main, setMain] = React.useState(() => makeMain(main_));
156
- const [inProp, setInProp] = React.useState(true);
157
- const refs = {
158
- preChildren: React.useRef(undefined),
159
- preMain: React.useRef(undefined)
160
- };
161
- React.useEffect(() => {
162
- setInit(true);
163
- }, []);
164
- const reAddChildren = () => {
165
- setChildren(makeChildren(refs.preChildren.current));
166
- setInProp(true);
167
- refs.preChildren.current = undefined;
168
- };
169
- const reAddMain = () => {
170
- setMain(makeMain(refs.preMain.current));
171
- setInProp(true);
172
- refs.preMain.current = undefined;
173
- };
174
- React.useEffect(() => {
175
- if (init) {
176
- if (!noTransition) {
177
- refs.preChildren.current = children_;
178
- setInProp(false);
179
- } else setChildren(makeChildren(children_));
180
- }
181
- }, [React.Children.toArray(children_).map(item => item.key).join('')]);
182
- React.useEffect(() => {
183
- if (init) {
184
- if (!noTransition) {
185
- refs.preMain.current = main_;
186
- setInProp(false);
187
- } else setMain(makeMain(main_));
188
- }
189
- }, [React.Children.toArray(main_).map(item => item.key).join('')]);
190
60
  return /*#__PURE__*/React.createElement(Surface, _extends({
191
61
  ref: ref,
192
62
  color: color,
@@ -196,21 +66,11 @@ const BottomAppBar = /*#__PURE__*/React.forwardRef((props_, ref) => {
196
66
  align: "center",
197
67
  justify: "space-between",
198
68
  Component: Line,
199
- className: classNames([staticClassName('BottomAppBar', theme) && ['onesy-BottomAppBar-root', `onesy-BottomAppBar-size-${size}`], className, classes.root, classes[`size_${size}`], fixed && classes.fixed])
200
- }, other), !!children.length && /*#__PURE__*/React.createElement(Line, {
201
- direction: "row",
202
- align: "center",
203
- justify: "flex-start",
204
- gap: 0
205
- }, children.map(item => (/*#__PURE__*/React.cloneElement(item, {
206
- in: inProp
207
- })))), !!main.length && /*#__PURE__*/React.createElement(Line, {
208
- direction: "row",
209
- align: "center",
210
- justify: "flex-end"
211
- }, main.map(item => (/*#__PURE__*/React.cloneElement(item, {
212
- in: inProp
213
- })))));
69
+ className: classNames([staticClassName('BottomAppBar', theme) && ['onesy-BottomAppBar-root', `onesy-BottomAppBar-size-${size}`], className, classes.root, classes[`size_${size}`], fixed && classes.fixed]),
70
+ style: _objectSpread({
71
+ maxWidth: `clamp(100px, ${(children?.length || 3) * 110}px, calc(100vw - 24px))`
72
+ }, style)
73
+ }, other), children);
214
74
  });
215
75
  BottomAppBar.displayName = 'onesy-BottomAppBar';
216
76
  export default BottomAppBar;
package/esm/NavigationItem/NavigationItem.js CHANGED
@@ -1,14 +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", "value", "vertical", "name", "label", "icon", "iconSelected", "selected", "disabled", "IconWrapperComponent", "onFocus", "onBlur", "onKeyDown", "onMouseDown", "onMouseEnter", "onMouseLeave", "onTouchStart", "TooltipProps", "IconWrapperProps", "className", "style", "children"];
4
+ const _excluded = ["tonal", "color", "version", "value", "name", "nameTooltip", "vertical", "icon", "iconSelected", "selected", "disabled", "IconWrapperComponent", "onFocus", "onBlur", "onKeyDown", "onMouseDown", "onMouseEnter", "onMouseLeave", "onTouchStart", "TooltipProps", "LabelProps", "IconWrapperProps", "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';
8
8
  import { is, isEnvironment } from '@onesy/utils';
9
9
  import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
10
10
  import TypeElement from '../Type';
11
- import FadeElement from '../Fade';
12
11
  import LineElement from '../Line';
13
12
  import TooltipElement from '../Tooltip';
14
13
  import TransitionElement from '../Transition';
@@ -18,10 +17,8 @@ const useStyle = styleMethod(theme => ({
18
17
  display: 'inline-flex',
19
18
  justifyContent: 'center',
20
19
  flex: '1 1 auto',
21
- userSelect: 'none',
22
20
  cursor: 'pointer',
23
- padding: `${theme.methods.space.value(1.5, 'px')} 0 ${theme.methods.space.value(2, 'px')}`,
24
- minHeight: '80px'
21
+ userSelect: 'none'
25
22
  },
26
23
  vertical: {
27
24
  flex: '0 0 auto',
@@ -30,8 +27,7 @@ const useStyle = styleMethod(theme => ({
30
27
  width: '100%'
31
28
  },
32
29
  iconWrapper: {
33
- position: 'absolute',
34
- top: '0',
30
+ position: 'relative',
35
31
  height: '32px',
36
32
  width: '64px'
37
33
  },
@@ -47,14 +43,6 @@ const useStyle = styleMethod(theme => ({
47
43
  icon: {
48
44
  lineHeight: '0'
49
45
  },
50
- labelWrapper: {
51
- position: 'absolute',
52
- bottom: '0'
53
- },
54
- label: {
55
- position: 'absolute',
56
- bottom: '0'
57
- },
58
46
  indicator: {
59
47
  position: 'absolute',
60
48
  inset: '0',
@@ -114,17 +102,11 @@ const useStyle = styleMethod(theme => ({
114
102
  }), {
115
103
  name: 'onesy-NavigationItem'
116
104
  });
117
-
118
- // To do
119
-
120
- // Long press label in tooltip
121
-
122
105
  const NavigationItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
123
106
  const theme = useOnesyTheme();
124
107
  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyNavigationItem?.props?.default), props_), [props_]);
125
108
  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
126
109
  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
127
- const Fade = React.useMemo(() => theme?.elements?.Fade || FadeElement, [theme]);
128
110
  const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
129
111
  const Transition = React.useMemo(() => theme?.elements?.Transition || TransitionElement, [theme]);
130
112
  const {
@@ -132,9 +114,9 @@ const NavigationItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
132
114
  color = 'primary',
133
115
  version = 'regular',
134
116
  value,
135
- vertical,
136
117
  name,
137
- label,
118
+ nameTooltip,
119
+ vertical,
138
120
  icon,
139
121
  iconSelected,
140
122
  selected,
@@ -148,6 +130,7 @@ const NavigationItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
148
130
  onMouseLeave: onMouseLeave_,
149
131
  onTouchStart: onTouchStart_,
150
132
  TooltipProps,
133
+ LabelProps,
151
134
  IconWrapperProps,
152
135
  className,
153
136
  style,
@@ -166,7 +149,6 @@ const NavigationItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
166
149
  hover: React.useRef(undefined)
167
150
  };
168
151
  const styles = {
169
- root: {},
170
152
  icon: {},
171
153
  label: {},
172
154
  indicator: {}
@@ -235,15 +217,9 @@ const NavigationItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
235
217
  styles.indicator.color = palette?.main || (color === 'default' ? theme.palette.text.default.primary : theme.palette.color[color].main);
236
218
  styles.icon.color = styles.label.color = theme.methods.palette.color.value(color, 5, true, palette);
237
219
  }
238
- const LabelWrapper = version === 'auto' ? Fade : React.Fragment;
239
- const LabelWrapperProps = {};
240
- if (version === 'auto') {
241
- LabelWrapperProps.in = selected;
242
- LabelWrapperProps.className = classNames([staticClassName('NavigationItem', theme) && ['onesy-NavigationItem-label'], classes.labelWrapper]);
243
- }
244
220
  const Icon = selected && iconSelected || icon;
245
221
  return /*#__PURE__*/React.createElement(Tooltip, _extends({
246
- name: label || value,
222
+ name: nameTooltip ?? name ?? value,
247
223
  position: "top",
248
224
  alignment: "center",
249
225
  longPress: true,
@@ -260,7 +236,7 @@ const NavigationItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
260
236
  onMouseEnter: onMouseEnter,
261
237
  onMouseLeave: onMouseLeave,
262
238
  className: classNames([staticClassName('NavigationItem', theme) && ['onesy-NavigationItem-root', selected && 'onesy-NavigationItem-selected', hover && `onesy-NavigationItem-hover`, mouseDown && `onesy-NavigationItem-mouse-down`, focus && `onesy-NavigationItem-focus`, disabled && `onesy-NavigationItem-disabled`], className, classes.root, vertical && classes.vertical, disabled && classes.disabled]),
263
- style: _objectSpread(_objectSpread({}, style), styles.root)
239
+ style: _objectSpread({}, style)
264
240
  }, other), /*#__PURE__*/React.createElement(Line, {
265
241
  ref: item => {
266
242
  if (ref) {
@@ -271,7 +247,7 @@ const NavigationItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
271
247
  direction: "column",
272
248
  align: "center",
273
249
  justify: "center",
274
- gap: 0.5,
250
+ gap: 0.25,
275
251
  className: classNames([staticClassName('NavigationItem', theme) && ['onesy-NavigationItem-item'], classes.item])
276
252
  }, Icon && /*#__PURE__*/React.createElement(Line, {
277
253
  Component: "span",
@@ -287,11 +263,12 @@ const NavigationItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
287
263
  className: classNames([staticClassName('NavigationItem', theme) && ['onesy-NavigationItem-icon'], IconWrapperProps?.className, classes.icon])
288
264
  }), /*#__PURE__*/React.cloneElement(Icon, {
289
265
  style: _objectSpread(_objectSpread({}, Icon.props.style), styles.icon)
290
- }))), ['regular', 'auto'].includes(version) && /*#__PURE__*/React.createElement(LabelWrapper, LabelWrapperProps, /*#__PURE__*/React.createElement(Type, {
291
- version: "b3",
292
- className: classNames([staticClassName('NavigationItem', theme) && ['onesy-NavigationItem-label'], classes.label]),
293
- style: styles.label
294
- }, name !== undefined ? name : label)))));
266
+ }))), (version === 'regular' || version === 'auto' && selected) && /*#__PURE__*/React.createElement(Type, _extends({
267
+ version: "b3"
268
+ }, LabelProps, {
269
+ className: classNames([staticClassName('NavigationItem', theme) && ['onesy-NavigationItem-label', LabelProps?.className]]),
270
+ style: _objectSpread(_objectSpread({}, styles.label), LabelProps?.style)
271
+ }), name))));
295
272
  });
296
273
  NavigationItem.displayName = 'onesy-NavigationItem';
297
274
  export default NavigationItem;
package/esm/index.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license UiReact v1.0.126
1
+ /** @license UiReact v1.0.128
2
2
  *
3
3
  * This source code is licensed under the MIT license found in the
4
4
  * LICENSE file in the root directory of this source tree.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onesy/ui-react",
3
- "version": "1.0.127",
3
+ "version": "1.0.129",
4
4
  "description": "UI for React",
5
5
  "repository": "https://github.com/onesy-me/onesy.git",
6
6
  "author": "Lazar Erić <lazareric1@proton.me>",