@broxus/react-uikit 0.19.6 → 0.20.0

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 (11) hide show
  1. package/dist/cjs/components/Modal/index.js +17 -8
  2. package/dist/cjs/components/Text/index.d.ts +1 -0
  3. package/dist/cjs/components/Text/index.js +2 -1
  4. package/dist/esm/components/Modal/index.js +18 -9
  5. package/dist/esm/components/Text/index.d.ts +1 -0
  6. package/dist/esm/components/Text/index.js +2 -1
  7. package/package.json +15 -10
  8. package/styles/mixins.scss +1 -1
  9. package/styles/modal.scss +10 -21
  10. package/styles/text.scss +40 -0
  11. package/styles/variables.scss +3 -4
package/dist/cjs/components/Modal/index.js CHANGED
@@ -63,17 +63,26 @@ function Modal(props) {
63
63
  const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'modal'), [config, prefixCls]);
64
64
  const defaultMaskTransitionName = React.useMemo(() => (0, utils_1.getMotionName)(prefixCls || config.prefixCls, 'fade'), [config.prefixCls, prefixCls]);
65
65
  const defaultTransitionName = React.useMemo(() => (0, utils_1.getMotionName)(prefixCls || config.prefixCls, 'zoom'), [config.prefixCls, prefixCls]);
66
+ const afterClose = React.useCallback(() => {
67
+ (0, utils_1.removeModalMode)(`${prefixCls || config.prefixCls}-modal-page`);
68
+ onClosed?.();
69
+ }, [config.prefixCls, onClosed, prefixCls]);
70
+ React.useEffect(() => {
71
+ if (visible) {
72
+ (0, utils_1.addModalMode)(`${prefixCls || config.prefixCls}-modal-page`);
73
+ }
74
+ }, [config.prefixCls, prefixCls, visible]);
66
75
  return (React.createElement(dialog_1.default, { className: (0, classnames_1.default)(className, {
67
76
  [`${rootCls}-centered`]: centered && !full,
68
- [`${rootCls}-full`]: full && !centered,
69
- }), focusTriggerAfterClose: focusTriggerAfterClose, maskTransitionName: defaultMaskTransitionName, mousePosition: mousePosition, prefixCls: rootCls, transitionName: defaultTransitionName, visible: visible, ...restProps, onClose: onClose, afterClose: onClosed, classNames: {
77
+ }), focusTriggerAfterClose: focusTriggerAfterClose, maskTransitionName: defaultMaskTransitionName, mousePosition: mousePosition, prefixCls: rootCls, transitionName: defaultTransitionName, visible: visible, ...restProps, onClose: onClose, afterClose: afterClose, classNames: {
70
78
  ...restProps.classNames,
71
- section: (0, classnames_1.default)(`${rootCls}-content`, restProps.classNames?.section),
79
+ wrapper: (0, classnames_1.default)({
80
+ [`${rootCls}-full`]: full && !centered,
81
+ }),
72
82
  }, closable: false, closeIcon: null },
73
- closable
74
- && (closeIcon || (React.createElement(Close_1.Close, { className: (0, classnames_1.default)({
75
- [`${rootCls}-close-default`]: !full,
76
- [`${rootCls}-close-full`]: full,
77
- }), component: "button", onClick: onClose }))),
83
+ closable && (closeIcon || (React.createElement(Close_1.Close, { className: (0, classnames_1.default)({
84
+ [`${rootCls}-close-default`]: !full,
85
+ [`${rootCls}-close-full`]: full,
86
+ }), component: "button", onClick: onClose }))),
78
87
  children));
79
88
  }
package/dist/cjs/components/Text/index.d.ts CHANGED
@@ -11,6 +11,7 @@ export type TextOwnProps = {
11
11
  dropcap?: boolean;
12
12
  italic?: boolean;
13
13
  kind?: 'meta' | 'lead' | 'base';
14
+ loading?: boolean;
14
15
  prefixCls?: string;
15
16
  size?: 'xsmall' | 'small' | 'large';
16
17
  transform?: 'capitalize' | 'uppercase' | 'lowercase';
package/dist/cjs/components/Text/index.js CHANGED
@@ -45,7 +45,7 @@ const utils_1 = require("../../utils");
45
45
  const defaultElement = 'span';
46
46
  function Text(props) {
47
47
  const config = (0, ConfigProvider_1.useConfig)();
48
- const { align, className, color, column, decoration, dropcap, italic, kind, prefixCls = config.prefixCls, size, transform, verticalAlign, weight, wrap, ...restProps } = props;
48
+ const { align, className, color, column, decoration, dropcap, italic, kind, loading, prefixCls = config.prefixCls, size, transform, verticalAlign, weight, wrap, ...restProps } = props;
49
49
  const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'text'), [config, prefixCls]);
50
50
  const alignClassName = React.useMemo(() => (typeof align === 'string'
51
51
  ? `${rootCls}-${align}`
@@ -64,5 +64,6 @@ function Text(props) {
64
64
  [`${rootCls}-${wrap}`]: wrap && ['truncate', 'break', 'nowrap'].includes(wrap),
65
65
  [`${rootCls}-decoration-none`]: decoration === 'none',
66
66
  [`${rootCls}-italic`]: italic,
67
+ [`${rootCls}-loading`]: loading,
67
68
  }, className), component: defaultElement, ...restProps }));
68
69
  }
package/dist/esm/components/Modal/index.js CHANGED
@@ -4,7 +4,7 @@ import classNames from 'classnames';
4
4
  import * as React from 'react';
5
5
  import { Close } from '../../components/Close';
6
6
  import { useConfig } from '../../components/ConfigProvider';
7
- import { getMotionName } from '../../utils';
7
+ import { addModalMode, getMotionName, removeModalMode } from '../../utils';
8
8
  let mousePosition;
9
9
  const getClickPosition = (event) => {
10
10
  mousePosition = {
@@ -24,17 +24,26 @@ export function Modal(props) {
24
24
  const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'modal'), [config, prefixCls]);
25
25
  const defaultMaskTransitionName = React.useMemo(() => getMotionName(prefixCls || config.prefixCls, 'fade'), [config.prefixCls, prefixCls]);
26
26
  const defaultTransitionName = React.useMemo(() => getMotionName(prefixCls || config.prefixCls, 'zoom'), [config.prefixCls, prefixCls]);
27
+ const afterClose = React.useCallback(() => {
28
+ removeModalMode(`${prefixCls || config.prefixCls}-modal-page`);
29
+ onClosed?.();
30
+ }, [config.prefixCls, onClosed, prefixCls]);
31
+ React.useEffect(() => {
32
+ if (visible) {
33
+ addModalMode(`${prefixCls || config.prefixCls}-modal-page`);
34
+ }
35
+ }, [config.prefixCls, prefixCls, visible]);
27
36
  return (React.createElement(Dialog, { className: classNames(className, {
28
37
  [`${rootCls}-centered`]: centered && !full,
29
- [`${rootCls}-full`]: full && !centered,
30
- }), focusTriggerAfterClose: focusTriggerAfterClose, maskTransitionName: defaultMaskTransitionName, mousePosition: mousePosition, prefixCls: rootCls, transitionName: defaultTransitionName, visible: visible, ...restProps, onClose: onClose, afterClose: onClosed, classNames: {
38
+ }), focusTriggerAfterClose: focusTriggerAfterClose, maskTransitionName: defaultMaskTransitionName, mousePosition: mousePosition, prefixCls: rootCls, transitionName: defaultTransitionName, visible: visible, ...restProps, onClose: onClose, afterClose: afterClose, classNames: {
31
39
  ...restProps.classNames,
32
- section: classNames(`${rootCls}-content`, restProps.classNames?.section),
40
+ wrapper: classNames({
41
+ [`${rootCls}-full`]: full && !centered,
42
+ }),
33
43
  }, closable: false, closeIcon: null },
34
- closable
35
- && (closeIcon || (React.createElement(Close, { className: classNames({
36
- [`${rootCls}-close-default`]: !full,
37
- [`${rootCls}-close-full`]: full,
38
- }), component: "button", onClick: onClose }))),
44
+ closable && (closeIcon || (React.createElement(Close, { className: classNames({
45
+ [`${rootCls}-close-default`]: !full,
46
+ [`${rootCls}-close-full`]: full,
47
+ }), component: "button", onClick: onClose }))),
39
48
  children));
40
49
  }
package/dist/esm/components/Text/index.d.ts CHANGED
@@ -11,6 +11,7 @@ export type TextOwnProps = {
11
11
  dropcap?: boolean;
12
12
  italic?: boolean;
13
13
  kind?: 'meta' | 'lead' | 'base';
14
+ loading?: boolean;
14
15
  prefixCls?: string;
15
16
  size?: 'xsmall' | 'small' | 'large';
16
17
  transform?: 'capitalize' | 'uppercase' | 'lowercase';
package/dist/esm/components/Text/index.js CHANGED
@@ -6,7 +6,7 @@ import { getBreakpointsConfigClasses } from '../../utils';
6
6
  const defaultElement = 'span';
7
7
  export function Text(props) {
8
8
  const config = useConfig();
9
- const { align, className, color, column, decoration, dropcap, italic, kind, prefixCls = config.prefixCls, size, transform, verticalAlign, weight, wrap, ...restProps } = props;
9
+ const { align, className, color, column, decoration, dropcap, italic, kind, loading, prefixCls = config.prefixCls, size, transform, verticalAlign, weight, wrap, ...restProps } = props;
10
10
  const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'text'), [config, prefixCls]);
11
11
  const alignClassName = React.useMemo(() => (typeof align === 'string'
12
12
  ? `${rootCls}-${align}`
@@ -25,5 +25,6 @@ export function Text(props) {
25
25
  [`${rootCls}-${wrap}`]: wrap && ['truncate', 'break', 'nowrap'].includes(wrap),
26
26
  [`${rootCls}-decoration-none`]: decoration === 'none',
27
27
  [`${rootCls}-italic`]: italic,
28
+ [`${rootCls}-loading`]: loading,
28
29
  }, className), component: defaultElement, ...restProps }));
29
30
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@broxus/react-uikit",
3
- "version": "0.19.6",
3
+ "version": "0.20.0",
4
4
  "description": "React-based UIkit library",
5
5
  "license": "AGPL-3.0",
6
6
  "keywords": [
@@ -58,11 +58,12 @@
58
58
  "prepare": "npx yarn cleanup && npx yarn build"
59
59
  },
60
60
  "dependencies": {
61
- "@broxus/js-utils": "^1.4.1",
61
+ "@broxus/js-utils": "^1.4.2",
62
62
  "@rc-component/collapse": "^1.1.0",
63
- "@rc-component/dialog": "^1.3.0",
63
+ "@rc-component/dialog": "^1.4.0",
64
64
  "@rc-component/drawer": "^1.1.0",
65
65
  "@rc-component/dropdown": "^1.0.0",
66
+ "@rc-component/input": "^1.1.0",
66
67
  "@rc-component/input-number": "^1.2.0",
67
68
  "@rc-component/motion": "^1.1.4",
68
69
  "@rc-component/picker": "^1.3.0",
@@ -70,22 +71,26 @@
70
71
  "@rc-component/segmented": "^1.2.1",
71
72
  "@rc-component/select": "^1.1.3",
72
73
  "@rc-component/switch": "^1.0.0",
73
- "@rc-component/tabs": "^1.5.0",
74
+ "@rc-component/tabs": "^1.5.1",
74
75
  "@rc-component/textarea": "^1.1.0",
75
- "@rc-component/trigger": "^3.5.0",
76
- "@rc-component/util": "^1.2.1",
76
+ "@rc-component/trigger": "^3.5.2",
77
+ "@rc-component/util": "^1.2.2",
77
78
  "classnames": "^2.5.1",
78
79
  "rc-motion": "npm:@rc-component/motion@^1.1.4",
79
80
  "rc-overflow": "^1.4.1",
80
81
  "rc-resize-observer": "npm:@rc-component/resize-observer@^1.0.0",
81
82
  "rc-slider": "^11.1.8",
82
- "rc-util": "npm:@rc-component/util@^1.2.1",
83
+ "rc-util": "npm:@rc-component/util@^1.2.2",
83
84
  "shallowequal": "^1.1.0",
84
85
  "uikit": "^3.23.11"
85
86
  },
87
+ "optionalDependencies": {
88
+ "luxon": "^3.7.0"
89
+ },
86
90
  "peerDependencies": {
87
- "react": "^16.8.0 || ^17.x || ^18.x || ^19.x",
88
- "react-dom": "^16.8.0 || ^17.x || ^18.x || ^19.x"
91
+ "luxon": "^3.7.0",
92
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
93
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
89
94
  },
90
- "gitHead": "dd05d7a8d9b1f915dbc3bd9ab08212fe8d95afdd"
95
+ "gitHead": "dd4f4796db2f624810e4a6c38bb5f0f082b0014d"
91
96
  }
package/styles/mixins.scss CHANGED
@@ -1497,7 +1497,7 @@
1497
1497
  //@mixin hook-padding-misc() {}
1498
1498
 
1499
1499
  //@mixin hook-modal() {}
1500
- //@mixin hook-modal-content() {}
1500
+ //@mixin hook-modal-container() {}
1501
1501
  //@mixin hook-modal-mask() {}
1502
1502
  //@mixin hook-modal-full() {}
1503
1503
  //@mixin hook-modal-header() {}
package/styles/modal.scss CHANGED
@@ -41,6 +41,7 @@
41
41
  outline: 0 none;
42
42
  -webkit-overflow-scrolling: touch;
43
43
  overflow-y: auto;
44
+ padding: var(--modal-padding-vertical) var(--modal-padding-horizontal);
44
45
  position: fixed;
45
46
  z-index: var(--modal-z-index);
46
47
  }
@@ -49,8 +50,7 @@
49
50
  box-sizing: border-box;
50
51
  height: 100%;
51
52
  margin: 0 auto;
52
- max-width: calc(100vw - 32px);
53
- padding: var(--modal-padding-vertical) var(--modal-padding-horizontal);
53
+ max-width: 100%;
54
54
  pointer-events: none;
55
55
  width: var(--modal-width);
56
56
  z-index: var(--modal-z-index);
@@ -61,14 +61,14 @@
61
61
 
62
62
  /* Phone landscape and bigger */
63
63
  @media (min-width: $breakpoint-small) {
64
- .uk-modal {
64
+ .uk-modal-wrap {
65
65
  padding: var(--modal-padding-vertical-s) var(--modal-padding-horizontal-s);
66
66
  }
67
67
  }
68
68
 
69
69
  /* Tablet landscape and bigger */
70
70
  @media (min-width: $breakpoint-medium) {
71
- .uk-modal {
71
+ .uk-modal-wrap {
72
72
  padding-left: var(--modal-padding-horizontal-m);
73
73
  padding-right: var(--modal-padding-horizontal-m);
74
74
  }
@@ -99,18 +99,17 @@
99
99
  * 5. Slide-in transition
100
100
  */
101
101
 
102
- .uk-modal-content {
102
+ .uk-modal-container {
103
103
  /* 4 */
104
- background: var(--modal-content-background);
104
+ background: var(--modal-background);
105
105
 
106
106
  /* 2 */
107
107
  box-sizing: border-box;
108
108
  max-width: calc(100% - 0.01px);
109
109
  pointer-events: auto;
110
110
  position: relative;
111
- width: 100%;
112
- @if meta.mixin-exists('hook-modal-content') {
113
- @include hook-modal-content;
111
+ @if meta.mixin-exists('hook-modal-container') {
112
+ @include hook-modal-container;
114
113
  }
115
114
  }
116
115
 
@@ -148,15 +147,6 @@
148
147
  /* Size modifier
149
148
  ========================================================================== */
150
149
 
151
- /*
152
- * Container size
153
- * Take the same size as the Container component
154
- */
155
-
156
- .uk-modal-container .uk-modal-content {
157
- width: var(--modal-container-width);
158
- }
159
-
160
150
  /*
161
151
  * Full size
162
152
  * 1. Remove padding and background from modal
@@ -171,7 +161,7 @@
171
161
  }
172
162
 
173
163
  /* 2 */
174
- .uk-modal-full .uk-modal-content {
164
+ .uk-modal-full .uk-modal {
175
165
  height: 100%;
176
166
  margin: 0;
177
167
  max-width: 100%;
@@ -353,14 +343,13 @@
353
343
  :root {
354
344
  --modal-z-index: calc(var(--global-z-index) + 10);
355
345
  --modal-mask-background: #{$modal-mask-background};
346
+ --modal-background: var(--global-background);
356
347
  --modal-padding-horizontal: #{$modal-padding-horizontal};
357
348
  --modal-padding-horizontal-s: var(--global-gutter);
358
349
  --modal-padding-horizontal-m: var(--global-medium-gutter);
359
350
  --modal-padding-vertical: var(--modal-padding-horizontal);
360
351
  --modal-padding-vertical-s: #{$modal-padding-vertical-s};
361
352
  --modal-width: #{$modal-width};
362
- --modal-content-background: var(--global-background);
363
- --modal-container-width: #{$modal-container-width};
364
353
  --modal-body-padding-horizontal: var(--global-gutter);
365
354
  --modal-body-padding-vertical: var(--global-gutter);
366
355
  --modal-header-background: var(--global-muted-background);
package/styles/text.scss CHANGED
@@ -161,6 +161,44 @@
161
161
  }
162
162
  }
163
163
 
164
+ /* Loading modifier
165
+ ========================================================================== */
166
+
167
+ .uk-text-loading {
168
+ animation: uk-text-loading 1.65s infinite both linear;
169
+ -webkit-background-clip: text;
170
+ background-size: 200% 100%;
171
+ display: inline-block;
172
+ position: relative;
173
+ -webkit-text-fill-color: transparent;
174
+ }
175
+
176
+ @supports (-webkit-background-clip: text) {
177
+ .uk-text-loading {
178
+ background-image: linear-gradient(
179
+ 90deg,
180
+ var(--text-loading-color) 25%,
181
+ var(--text-loading-emphasis-color) 50%,
182
+ var(--text-loading-color) 75%
183
+ );
184
+ color: transparent !important;
185
+
186
+ @if meta.mixin-exists('hook-text-loading') {
187
+ @include hook-text-loading;
188
+ }
189
+ }
190
+ }
191
+
192
+ @keyframes uk-text-loading {
193
+ 0% {
194
+ background-position: 200% 0;
195
+ }
196
+
197
+ 100% {
198
+ background-position: -200% 0;
199
+ }
200
+ }
201
+
164
202
 
165
203
  /* Alignment modifiers
166
204
  ========================================================================== */
@@ -307,6 +345,8 @@ td.uk-text-break { word-break: break-all; }
307
345
  --text-warning-color: var(--global-warning-color);
308
346
  --text-danger-color: var(--global-danger-color);
309
347
  --text-background-color: var(--global-primary-background);
348
+ --text-loading-color: var(--global-color);
349
+ --text-loading-emphasis-color: var(--global-muted-color);
310
350
 
311
351
  // Inverse
312
352
  --inverse-text-lead-color: var(--inverse-global-color);
package/styles/variables.scss CHANGED
@@ -1204,22 +1204,21 @@ $inverse-marker-hover-color: $global-color !d
1204
1204
 
1205
1205
  $modal-z-index: $global-z-index + 10 !default;
1206
1206
  $modal-mask-background: rgb(0 0 0 / 30%) !default;
1207
+ $modal-background: $global-background !default;
1207
1208
  $modal-padding-horizontal: 15px !default;
1208
1209
  $modal-padding-horizontal-s: $global-gutter !default;
1209
1210
  $modal-padding-horizontal-m: $global-medium-gutter !default;
1210
1211
  $modal-padding-vertical: $modal-padding-horizontal !default;
1211
1212
  $modal-padding-vertical-s: 50px !default;
1212
1213
  $modal-width: 600px !default;
1213
- $modal-content-background: $global-background !default;
1214
- $modal-container-width: 1200px !default;
1215
1214
  $modal-body-padding-horizontal: $global-gutter !default;
1216
1215
  $modal-body-padding-vertical: $global-gutter !default;
1216
+ $modal-header-background: $global-muted-background !default;
1217
1217
  $modal-header-padding-horizontal: $global-gutter !default;
1218
1218
  $modal-header-padding-vertical: ($modal-header-padding-horizontal * 0.5) !default;
1219
- $modal-header-background: $global-muted-background !default;
1219
+ $modal-footer-background: $global-muted-background !default;
1220
1220
  $modal-footer-padding-horizontal: $global-gutter !default;
1221
1221
  $modal-footer-padding-vertical: ($modal-footer-padding-horizontal * 0.5) !default;
1222
- $modal-footer-background: $global-muted-background !default;
1223
1222
  $modal-title-font-size: $global-xlarge-font-size !default;
1224
1223
  $modal-title-line-height: 1.3 !default;
1225
1224
  $modal-close-position: $global-small-margin !default;