@onesy/ui-react 1.0.139 → 1.0.141

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 (13) hide show
  1. package/Properties/Properties.d.ts +1 -1
  2. package/Properties/Properties.js +1 -1
  3. package/Property/Property.d.ts +1 -1
  4. package/Property/Property.js +18 -2
  5. package/TableCell/TableCell.js +4 -12
  6. package/TableHead/TableHead.js +10 -4
  7. package/esm/Properties/Properties.js +1 -1
  8. package/esm/Property/Property.js +18 -2
  9. package/esm/TableCell/TableCell.js +5 -13
  10. package/esm/TableHead/TableHead.js +11 -5
  11. package/esm/index.js +1 -1
  12. package/index.js +1 -1
  13. package/package.json +1 -1
package/Properties/Properties.d.ts CHANGED
@@ -8,7 +8,7 @@ export type IPropertiesValue = {
8
8
  props?: any;
9
9
  };
10
10
  export type IProperties = ILine & {
11
- version?: 'row' | 'row-20' | 'row-50' | 'row-between' | 'column';
11
+ version?: 'row' | 'row-20' | 'row-30' | 'row-40' | 'row-50' | 'row-between' | 'column';
12
12
  values?: (boolean | IPropertiesValue)[];
13
13
  onlyWithValues?: boolean;
14
14
  maxWidth?: 'extra_small' | 'small' | 'regular' | 'large' | 'extra_large' | 'extra_extra_large';
package/Properties/Properties.js CHANGED
@@ -55,7 +55,7 @@ const Properties = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
55
55
  return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Property) || _Property.default;
56
56
  }, [theme]);
57
57
  const {
58
- version = 'row-20',
58
+ version = 'row-30',
59
59
  size = 'regular',
60
60
  values = [],
61
61
  onlyWithValues = true,
package/Property/Property.d.ts CHANGED
@@ -5,7 +5,7 @@ export type IProperty = ILine & {
5
5
  name?: any;
6
6
  value?: any;
7
7
  separator?: any;
8
- version?: 'row' | 'row-20' | 'row-50' | 'row-between' | 'column';
8
+ version?: 'row' | 'row-20' | 'row-30' | 'row-40' | 'row-50' | 'row-between' | 'column';
9
9
  size?: 'small' | 'regular' | 'large';
10
10
  responsive?: boolean;
11
11
  mediaQuery?: string;
package/Property/Property.js CHANGED
@@ -33,6 +33,22 @@ const useStyle = (0, _styleReact.style)(theme => ({
33
33
  flex: '1 1 80%'
34
34
  }
35
35
  },
36
+ 'version_row-30': {
37
+ '& > *:first-child': {
38
+ flex: '1 1 30%'
39
+ },
40
+ '& > *:last-child': {
41
+ flex: '1 1 70%'
42
+ }
43
+ },
44
+ 'version_row-40': {
45
+ '& > *:first-child': {
46
+ flex: '1 1 40%'
47
+ },
48
+ '& > *:last-child': {
49
+ flex: '1 1 60%'
50
+ }
51
+ },
36
52
  text: {
37
53
  wordBreak: 'break-word'
38
54
  }
@@ -54,7 +70,7 @@ const Property = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
54
70
  return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Type) || _Type.default;
55
71
  }, [theme]);
56
72
  const {
57
- version: version_ = 'row-20',
73
+ version: version_ = 'row-30',
58
74
  size = 'regular',
59
75
  name,
60
76
  value: value_,
@@ -96,7 +112,7 @@ const Property = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
96
112
  }
97
113
  if (version === 'row') {
98
114
  propsRoot.justify = 'flex-start';
99
- } else if (['row-20', 'row-50', 'row-between'].includes(version)) {
115
+ } else if (['row-20', 'row-30', 'row-40', 'row-50', 'row-between'].includes(version)) {
100
116
  propsRoot.justify = 'space-between';
101
117
  }
102
118
  return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
package/TableCell/TableCell.js CHANGED
@@ -217,7 +217,7 @@ const TableCell = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
217
217
  if (sticky) {
218
218
  if (root) {
219
219
  let offsetOriginal = root.offsetLeft;
220
- const parentOverflow = (0, _utils2.getOverflowParent)(root.parentElement, false);
220
+ const parentOverflow = window.document.querySelector('.onesy-Table-wrapper');
221
221
  root.style.position = 'unset';
222
222
  offsetOriginal = root.offsetLeft;
223
223
  root.style.position = 'sticky';
@@ -228,17 +228,9 @@ const TableCell = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
228
228
 
229
229
  // initial
230
230
  method();
231
- setTimeout(() => {
232
- root.style.position = 'unset';
233
- offsetOriginal = root.offsetLeft;
234
- root.style.position = 'sticky';
235
- method();
236
- }, 150);
237
- if (parentOverflow) {
238
- parentOverflow.addEventListener('scroll', method, {
239
- passive: false
240
- });
241
- }
231
+ if (parentOverflow) parentOverflow.addEventListener('scroll', method, {
232
+ passive: false
233
+ });
242
234
  return () => {
243
235
  if (parentOverflow) parentOverflow.removeEventListener('scroll', method);
244
236
  };
package/TableHead/TableHead.js CHANGED
@@ -92,17 +92,23 @@ const TableHead = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
92
92
  _react.default.useEffect(() => {
93
93
  if (sticky) {
94
94
  if (root) {
95
- const parentOverflow = (0, _utils2.getOverflowParent)(root);
96
- const offsetPrevious = root.offsetTop;
95
+ let offsetOriginal = root.offsetTop;
96
+ const parentOverflow = window.document.querySelector('.onesy-Table-wrapper');
97
+ root.style.position = 'unset';
98
+ offsetOriginal = root.offsetTop;
99
+ root.style.position = 'sticky';
97
100
  const method = () => {
98
101
  const offsetNew = root.offsetTop;
99
- setStickyActive(offsetPrevious !== offsetNew);
102
+ setStickyActive(offsetOriginal !== offsetNew);
100
103
  };
104
+
105
+ // initial
106
+ method();
101
107
  if (parentOverflow) parentOverflow.addEventListener('scroll', method, {
102
108
  passive: false
103
109
  });
104
110
  return () => {
105
- parentOverflow.removeEventListener('scroll', method);
111
+ if (parentOverflow) parentOverflow.removeEventListener('scroll', method);
106
112
  };
107
113
  }
108
114
  }
package/esm/Properties/Properties.js CHANGED
@@ -38,7 +38,7 @@ const Properties = /*#__PURE__*/React.forwardRef((props_, ref) => {
38
38
  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
39
39
  const Property = React.useMemo(() => theme?.elements?.Property || PropertyElement, [theme]);
40
40
  const {
41
- version = 'row-20',
41
+ version = 'row-30',
42
42
  size = 'regular',
43
43
  values = [],
44
44
  onlyWithValues = true,
package/esm/Property/Property.js CHANGED
@@ -26,6 +26,22 @@ const useStyle = styleMethod(theme => ({
26
26
  flex: '1 1 80%'
27
27
  }
28
28
  },
29
+ 'version_row-30': {
30
+ '& > *:first-child': {
31
+ flex: '1 1 30%'
32
+ },
33
+ '& > *:last-child': {
34
+ flex: '1 1 70%'
35
+ }
36
+ },
37
+ 'version_row-40': {
38
+ '& > *:first-child': {
39
+ flex: '1 1 40%'
40
+ },
41
+ '& > *:last-child': {
42
+ flex: '1 1 60%'
43
+ }
44
+ },
29
45
  text: {
30
46
  wordBreak: 'break-word'
31
47
  }
@@ -38,7 +54,7 @@ const Property = /*#__PURE__*/React.forwardRef((props_, ref) => {
38
54
  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
39
55
  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
40
56
  const {
41
- version: version_ = 'row-20',
57
+ version: version_ = 'row-30',
42
58
  size = 'regular',
43
59
  name,
44
60
  value: value_,
@@ -80,7 +96,7 @@ const Property = /*#__PURE__*/React.forwardRef((props_, ref) => {
80
96
  }
81
97
  if (version === 'row') {
82
98
  propsRoot.justify = 'flex-start';
83
- } else if (['row-20', 'row-50', 'row-between'].includes(version)) {
99
+ } else if (['row-20', 'row-30', 'row-40', 'row-50', 'row-between'].includes(version)) {
84
100
  propsRoot.justify = 'space-between';
85
101
  }
86
102
  return /*#__PURE__*/React.createElement(Line, _extends({
package/esm/TableCell/TableCell.js CHANGED
@@ -12,7 +12,7 @@ import LineElement from '../Line';
12
12
  import IconButtonElement from '../IconButton';
13
13
  import TypeElement from '../Type';
14
14
  import DividerElement from '../Divider';
15
- import { getOverflowParent, staticClassName } from '../utils';
15
+ import { staticClassName } from '../utils';
16
16
  import Tooltip from '../Tooltip';
17
17
  import useResize from '../useResize';
18
18
  const useStyle = styleMethod(theme => ({
@@ -194,7 +194,7 @@ const TableCell = /*#__PURE__*/React.forwardRef((props_, ref) => {
194
194
  if (sticky) {
195
195
  if (root) {
196
196
  let offsetOriginal = root.offsetLeft;
197
- const parentOverflow = getOverflowParent(root.parentElement, false);
197
+ const parentOverflow = window.document.querySelector('.onesy-Table-wrapper');
198
198
  root.style.position = 'unset';
199
199
  offsetOriginal = root.offsetLeft;
200
200
  root.style.position = 'sticky';
@@ -205,17 +205,9 @@ const TableCell = /*#__PURE__*/React.forwardRef((props_, ref) => {
205
205
 
206
206
  // initial
207
207
  method();
208
- setTimeout(() => {
209
- root.style.position = 'unset';
210
- offsetOriginal = root.offsetLeft;
211
- root.style.position = 'sticky';
212
- method();
213
- }, 150);
214
- if (parentOverflow) {
215
- parentOverflow.addEventListener('scroll', method, {
216
- passive: false
217
- });
218
- }
208
+ if (parentOverflow) parentOverflow.addEventListener('scroll', method, {
209
+ passive: false
210
+ });
219
211
  return () => {
220
212
  if (parentOverflow) parentOverflow.removeEventListener('scroll', method);
221
213
  };
package/esm/TableHead/TableHead.js CHANGED
@@ -8,7 +8,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
10
  import SurfaceElement from '../Surface';
11
- import { getOverflowParent, staticClassName } from '../utils';
11
+ import { staticClassName } from '../utils';
12
12
  import TableRowElement from '../TableRow';
13
13
  import LinearProgressElement from '../LinearProgress';
14
14
  const useStyle = styleMethod(theme => ({
@@ -73,17 +73,23 @@ const TableHead = /*#__PURE__*/React.forwardRef((props_, ref) => {
73
73
  React.useEffect(() => {
74
74
  if (sticky) {
75
75
  if (root) {
76
- const parentOverflow = getOverflowParent(root);
77
- const offsetPrevious = root.offsetTop;
76
+ let offsetOriginal = root.offsetTop;
77
+ const parentOverflow = window.document.querySelector('.onesy-Table-wrapper');
78
+ root.style.position = 'unset';
79
+ offsetOriginal = root.offsetTop;
80
+ root.style.position = 'sticky';
78
81
  const method = () => {
79
82
  const offsetNew = root.offsetTop;
80
- setStickyActive(offsetPrevious !== offsetNew);
83
+ setStickyActive(offsetOriginal !== offsetNew);
81
84
  };
85
+
86
+ // initial
87
+ method();
82
88
  if (parentOverflow) parentOverflow.addEventListener('scroll', method, {
83
89
  passive: false
84
90
  });
85
91
  return () => {
86
- parentOverflow.removeEventListener('scroll', method);
92
+ if (parentOverflow) parentOverflow.removeEventListener('scroll', method);
87
93
  };
88
94
  }
89
95
  }
package/esm/index.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license UiReact v1.0.138
1
+ /** @license UiReact v1.0.140
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/index.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license UiReact v1.0.138
1
+ /** @license UiReact v1.0.140
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.139",
3
+ "version": "1.0.141",
4
4
  "description": "UI for React",
5
5
  "repository": "https://github.com/onesy-me/onesy.git",
6
6
  "author": "Lazar Erić <lazareric1@proton.me>",