@onesy/ui-react 1.0.36 → 1.0.38

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 (6) hide show
  1. package/Avatar/Avatar.js +13 -11
  2. package/Medias/Medias.js +1 -1
  3. package/esm/Avatar/Avatar.js +15 -17
  4. package/esm/Medias/Medias.js +2 -1
  5. package/esm/index.js +1 -1
  6. package/package.json +1 -1
package/Avatar/Avatar.js CHANGED
@@ -26,23 +26,22 @@ const useStyle = (0, style_react_1.style)(theme => ({
26
26
  '&.onesy-Button-root': {
27
27
  cursor: 'default',
28
28
  overflow: 'hidden',
29
- borderRadius: theme.methods.shape.radius.value(40, 'px')
29
+ borderRadius: theme.methods.shape.radius.value(40, 'px'),
30
+ '& .onesy-Button-icon-root': {
31
+ width: '100%',
32
+ height: '100%'
33
+ }
30
34
  }
31
35
  },
32
36
  square: {
33
37
  borderRadius: '0px'
34
38
  },
35
- imageWrapper: {
36
- display: 'inline-flex',
37
- height: '100%',
38
- width: '100%',
39
- alignItems: 'center',
40
- justifyContent: 'center'
41
- },
42
39
  image: {
43
- objectFit: 'cover',
44
40
  width: '100%',
45
- height: '100%'
41
+ height: '100%',
42
+ backgroundPosition: 'center',
43
+ backgroundSize: 'cover',
44
+ backgroundRepeat: 'no-repeat'
46
45
  }
47
46
  }), { name: 'onesy-Avatar' });
48
47
  const Avatar = react_1.default.forwardRef((props_, ref) => {
@@ -60,7 +59,10 @@ const Avatar = react_1.default.forwardRef((props_, ref) => {
60
59
  if (['text', 'outlined'].includes(version) && disabled) {
61
60
  imageProps.style.opacity = theme.palette.visual_contrast.default.opacity[theme.palette.light ? 'disabled' : 'active'];
62
61
  }
63
- children = ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: classes.imageWrapper }, { children: (0, jsx_runtime_1.jsx)("img", Object.assign({ className: classes.image, src: image, alt: alt }, imageProps)) })));
62
+ children = ((0, jsx_runtime_1.jsx)("span", Object.assign({}, imageProps, { className: (0, style_react_1.classNames)([
63
+ imageProps === null || imageProps === void 0 ? void 0 : imageProps.className,
64
+ classes.image
65
+ ]), style: Object.assign({ backgroundImage: `url(${image})` }, imageProps === null || imageProps === void 0 ? void 0 : imageProps.style) })));
64
66
  }
65
67
  else if (!react_1.default.isValidElement(children)) {
66
68
  const typeProps = { version: 't1' };
package/Medias/Medias.js CHANGED
@@ -373,7 +373,7 @@ const Medias = react_1.default.forwardRef((props_, ref) => {
373
373
  ],
374
374
  className,
375
375
  classes.root
376
- ]) }, other, { children: [usable.map(item => ((0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: size === 'large' ? 2 : size === 'regular' ? 1.5 : 1, direction: item === 'embed' ? 'column' : 'row', align: item === 'embed' ? 'center' : 'flex-start', justify: item === 'embed' ? 'center' : 'flex-start' }, ItemsProps, (item === 'embed' && EmbedItemsProps), (item === 'image' && ImageItemsProps), (item === 'audio' && AudioItemsProps), (item === 'video' && VideoItemsProps), (item === 'other' && OtherItemsProps), { className: (0, style_react_1.classNames)([
376
+ ]) }, other, { children: [usable.map(item => ((0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: size === 'large' ? 2 : size === 'regular' ? 1.5 : 1, direction: item === 'embed' ? 'column' : 'row', align: item === 'embed' ? 'center' : 'flex-start', justify: item === 'embed' ? 'center' : 'flex-start', fullWidth: true }, ItemsProps, (item === 'embed' && EmbedItemsProps), (item === 'image' && ImageItemsProps), (item === 'audio' && AudioItemsProps), (item === 'video' && VideoItemsProps), (item === 'other' && OtherItemsProps), { className: (0, style_react_1.classNames)([
377
377
  (0, utils_2.staticClassName)('Medias', theme) && [
378
378
  'onesy-Medias-items',
379
379
  `onesy-Medias-items-${item}`
package/esm/Avatar/Avatar.js CHANGED
@@ -15,23 +15,22 @@ const useStyle = styleMethod(theme => ({
15
15
  '&.onesy-Button-root': {
16
16
  cursor: 'default',
17
17
  overflow: 'hidden',
18
- borderRadius: theme.methods.shape.radius.value(40, 'px')
18
+ borderRadius: theme.methods.shape.radius.value(40, 'px'),
19
+ '& .onesy-Button-icon-root': {
20
+ width: '100%',
21
+ height: '100%'
22
+ }
19
23
  }
20
24
  },
21
25
  square: {
22
26
  borderRadius: '0px'
23
27
  },
24
- imageWrapper: {
25
- display: 'inline-flex',
26
- height: '100%',
27
- width: '100%',
28
- alignItems: 'center',
29
- justifyContent: 'center'
30
- },
31
28
  image: {
32
- objectFit: 'cover',
33
29
  width: '100%',
34
- height: '100%'
30
+ height: '100%',
31
+ backgroundPosition: 'center',
32
+ backgroundSize: 'cover',
33
+ backgroundRepeat: 'no-repeat'
35
34
  }
36
35
  }), {
37
36
  name: 'onesy-Avatar'
@@ -69,13 +68,12 @@ const Avatar = /*#__PURE__*/React.forwardRef((props_, ref) => {
69
68
  if (['text', 'outlined'].includes(version) && disabled) {
70
69
  imageProps.style.opacity = theme.palette.visual_contrast.default.opacity[theme.palette.light ? 'disabled' : 'active'];
71
70
  }
72
- children = /*#__PURE__*/React.createElement("span", {
73
- className: classes.imageWrapper
74
- }, /*#__PURE__*/React.createElement("img", _extends({
75
- className: classes.image,
76
- src: image,
77
- alt: alt
78
- }, imageProps)));
71
+ children = /*#__PURE__*/React.createElement("span", _extends({}, imageProps, {
72
+ className: classNames([imageProps?.className, classes.image]),
73
+ style: _objectSpread({
74
+ backgroundImage: `url(${image})`
75
+ }, imageProps?.style)
76
+ }));
79
77
  } else if (! /*#__PURE__*/React.isValidElement(children)) {
80
78
  const typeProps = {
81
79
  version: 't1'
package/esm/Medias/Medias.js CHANGED
@@ -377,7 +377,8 @@ const Medias = /*#__PURE__*/React.forwardRef((props_, ref) => {
377
377
  gap: size === 'large' ? 2 : size === 'regular' ? 1.5 : 1,
378
378
  direction: item === 'embed' ? 'column' : 'row',
379
379
  align: item === 'embed' ? 'center' : 'flex-start',
380
- justify: item === 'embed' ? 'center' : 'flex-start'
380
+ justify: item === 'embed' ? 'center' : 'flex-start',
381
+ fullWidth: true
381
382
  }, ItemsProps, item === 'embed' && EmbedItemsProps, item === 'image' && ImageItemsProps, item === 'audio' && AudioItemsProps, item === 'video' && VideoItemsProps, item === 'other' && OtherItemsProps, {
382
383
  className: classNames([staticClassName('Medias', theme) && ['onesy-Medias-items', `onesy-Medias-items-${item}`], ItemsProps?.className, item === 'embed' && EmbedItemsProps?.className, item === 'image' && ImageItemsProps?.className, item === 'audio' && AudioItemsProps?.className, item === 'video' && VideoItemsProps?.className, item === 'other' && OtherItemsProps?.className, classes.items])
383
384
  }), items[item].map((itemMedia, indexItemMedia) => getItem(item, itemMedia, indexItemMedia)))), refs.root.current && imageGallery && !!items.image?.length && /*#__PURE__*/React.createElement(Portal, {
package/esm/index.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license UiReact v1.0.36
1
+ /** @license UiReact v1.0.38
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.36",
3
+ "version": "1.0.38",
4
4
  "description": "UI for React",
5
5
  "repository": "https://github.com/onesy-me/onesy.git",
6
6
  "author": "Lazar <lazareric2@gmail.com>",