@epam/uui 6.3.1 → 6.3.2

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 (18) hide show
  1. package/assets/styles/clickable.scss +26 -26
  2. package/assets/styles/dnd.scss +9 -9
  3. package/assets/styles/effects.scss +6 -6
  4. package/assets/styles/helpers.scss +3 -3
  5. package/assets/styles/index.scss +6 -6
  6. package/assets/styles/inputs.scss +70 -70
  7. package/assets/styles/typography.scss +184 -184
  8. package/components/layout/ScrollBars.d.ts +1 -1
  9. package/components/layout/ScrollBars.d.ts.map +1 -1
  10. package/index.esm.js +102 -103
  11. package/index.esm.js.map +1 -1
  12. package/index.js +102 -103
  13. package/index.js.map +1 -1
  14. package/package.json +5 -5
  15. package/readme.md +9 -9
  16. package/stats.html +2 -2
  17. package/styles.css +1028 -1027
  18. package/styles.css.map +1 -1
package/assets/styles/clickable.scss CHANGED
@@ -1,27 +1,27 @@
1
- @mixin clickable-styles() {
2
- text-decoration: none;
3
- outline: none;
4
- border: 0;
5
- background: none;
6
- box-sizing: border-box;
7
- appearance: none;
8
- align-items: unset;
9
- padding: unset;
10
- margin: unset;
11
- justify-content: unset;
12
- overflow: hidden;
13
- display: flex;
14
- position: relative;
15
-
16
- &:hover {
17
- text-decoration: none;
18
- }
19
-
20
- &:global(.-clickable) {
21
- cursor: pointer;
22
- }
23
-
24
- &:global(.uui-disabled) {
25
- cursor: default;
26
- }
1
+ @mixin clickable-styles() {
2
+ text-decoration: none;
3
+ outline: none;
4
+ border: 0;
5
+ background: none;
6
+ box-sizing: border-box;
7
+ appearance: none;
8
+ align-items: unset;
9
+ padding: unset;
10
+ margin: unset;
11
+ justify-content: unset;
12
+ overflow: hidden;
13
+ display: flex;
14
+ position: relative;
15
+
16
+ &:hover {
17
+ text-decoration: none;
18
+ }
19
+
20
+ &:global(.-clickable) {
21
+ cursor: pointer;
22
+ }
23
+
24
+ &:global(.uui-disabled) {
25
+ cursor: default;
26
+ }
27
27
  }
package/assets/styles/dnd.scss CHANGED
@@ -1,9 +1,9 @@
1
- @mixin dnd-cursor-style {
2
- &:hover {
3
- cursor: grab;
4
- }
5
-
6
- &:active {
7
- cursor: grabbing;
8
- }
9
- }
1
+ @mixin dnd-cursor-style {
2
+ &:hover {
3
+ cursor: grab;
4
+ }
5
+
6
+ &:active {
7
+ cursor: grabbing;
8
+ }
9
+ }
package/assets/styles/effects.scss CHANGED
@@ -1,6 +1,6 @@
1
- @mixin dnd-ghost-shadow() { box-shadow: var(--uui-shadow-level-3); }
2
-
3
- @mixin focus-visible-effect($offset: var(--uui-focus-outline-offset)) {
4
- outline: var(--uui-focus-outline-width) solid var(--uui-outline-focus);
5
- outline-offset: $offset;
6
- }
1
+ @mixin dnd-ghost-shadow() { box-shadow: var(--uui-shadow-level-3); }
2
+
3
+ @mixin focus-visible-effect($offset: var(--uui-focus-outline-offset)) {
4
+ outline: var(--uui-focus-outline-width) solid var(--uui-outline-focus);
5
+ outline-offset: $offset;
6
+ }
package/assets/styles/helpers.scss CHANGED
@@ -1,4 +1,4 @@
1
- @mixin overflow-ellipsis() {
2
- overflow: hidden;
3
- text-overflow: ellipsis;
1
+ @mixin overflow-ellipsis() {
2
+ overflow: hidden;
3
+ text-overflow: ellipsis;
4
4
  }
package/assets/styles/index.scss CHANGED
@@ -1,6 +1,6 @@
1
- @forward 'clickable';
2
- @forward 'effects';
3
- @forward 'inputs';
4
- @forward 'helpers';
5
- //@forward 'typography'; don't include typography into index, since it will insert typography styles for each index import
6
- @forward 'dnd';
1
+ @forward 'clickable';
2
+ @forward 'effects';
3
+ @forward 'inputs';
4
+ @forward 'helpers';
5
+ //@forward 'typography'; don't include typography into index, since it will insert typography styles for each index import
6
+ @forward 'dnd';
package/assets/styles/inputs.scss CHANGED
@@ -1,70 +1,70 @@
1
- @mixin disabled-input() {
2
- &:global(.uui-control-mode-form) {
3
- cursor: default;
4
- @include input-colors(var(--uui-control-bg-disabled), var(--uui-control-text-disabled), var(--uui-control-border-disabled), var(--uui-control-placeholder-disabled));
5
-
6
- &:hover, &:active, &:focus {
7
- box-shadow: none;
8
- @include input-colors(var(--uui-control-bg-disabled), var(--uui-control-text-disabled), var(--uui-control-border-disabled), var(--uui-control-placeholder-disabled));
9
- }
10
- }
11
-
12
- &:global(.uui-control-mode-cell) {
13
- cursor: default;
14
- @include input-colors(transparent, var(--uui-control-text-disabled), transparent, var(--uui-control-placeholder-disabled));
15
-
16
- &:hover, &:active, &:focus {
17
- box-shadow: none;
18
- @include input-colors(transparent, var(--uui-control-text-disabled), transparent, var(--uui-control-placeholder-disabled));
19
- }
20
- }
21
- }
22
-
23
- @mixin readonly-input() {
24
- &:global(.uui-control-mode-form) {
25
- background-color: var(--uui-control-bg-disabled);
26
- border-color: var(--uui-control-border-disabled);
27
-
28
- &:hover {
29
- border-color: var(--uui-control-border-disabled);
30
- }
31
-
32
- :global(.uui-input) {
33
- &::placeholder {
34
- color: var(--uui-control-placeholder-disabled);
35
- }
36
- }
37
- }
38
-
39
- &:global(.uui-control-mode-cell) {
40
- background-color: transparent;
41
- border-color: transparent;
42
-
43
- &:hover {
44
- background-color: transparent;
45
- border-color: transparent;
46
- }
47
-
48
- :global(.uui-input) {
49
- &::placeholder {
50
- color: var(--uui-control-placeholder-disabled);
51
- }
52
- }
53
- }
54
- }
55
-
56
- @mixin input-colors($bg, $color, $border, $placeholder) {
57
- background-color: $bg;
58
- color: $color;
59
- fill: $color;
60
- border-color: $border;
61
-
62
- // override more selective selector on input tag in browsers stylesheets
63
- :global(.uui-input) {
64
- color: $color;
65
-
66
- &::placeholder {
67
- color: $placeholder;
68
- }
69
- }
70
- }
1
+ @mixin disabled-input() {
2
+ &:global(.uui-control-mode-form) {
3
+ cursor: default;
4
+ @include input-colors(var(--uui-control-bg-disabled), var(--uui-control-text-disabled), var(--uui-control-border-disabled), var(--uui-control-placeholder-disabled));
5
+
6
+ &:hover, &:active, &:focus {
7
+ box-shadow: none;
8
+ @include input-colors(var(--uui-control-bg-disabled), var(--uui-control-text-disabled), var(--uui-control-border-disabled), var(--uui-control-placeholder-disabled));
9
+ }
10
+ }
11
+
12
+ &:global(.uui-control-mode-cell) {
13
+ cursor: default;
14
+ @include input-colors(transparent, var(--uui-control-text-disabled), transparent, var(--uui-control-placeholder-disabled));
15
+
16
+ &:hover, &:active, &:focus {
17
+ box-shadow: none;
18
+ @include input-colors(transparent, var(--uui-control-text-disabled), transparent, var(--uui-control-placeholder-disabled));
19
+ }
20
+ }
21
+ }
22
+
23
+ @mixin readonly-input() {
24
+ &:global(.uui-control-mode-form) {
25
+ background-color: var(--uui-control-bg-disabled);
26
+ border-color: var(--uui-control-border-disabled);
27
+
28
+ &:hover {
29
+ border-color: var(--uui-control-border-disabled);
30
+ }
31
+
32
+ :global(.uui-input) {
33
+ &::placeholder {
34
+ color: var(--uui-control-placeholder-disabled);
35
+ }
36
+ }
37
+ }
38
+
39
+ &:global(.uui-control-mode-cell) {
40
+ background-color: transparent;
41
+ border-color: transparent;
42
+
43
+ &:hover {
44
+ background-color: transparent;
45
+ border-color: transparent;
46
+ }
47
+
48
+ :global(.uui-input) {
49
+ &::placeholder {
50
+ color: var(--uui-control-placeholder-disabled);
51
+ }
52
+ }
53
+ }
54
+ }
55
+
56
+ @mixin input-colors($bg, $color, $border, $placeholder) {
57
+ background-color: $bg;
58
+ color: $color;
59
+ fill: $color;
60
+ border-color: $border;
61
+
62
+ // override more selective selector on input tag in browsers stylesheets
63
+ :global(.uui-input) {
64
+ color: $color;
65
+
66
+ &::placeholder {
67
+ color: $placeholder;
68
+ }
69
+ }
70
+ }
package/assets/styles/typography.scss CHANGED
@@ -1,184 +1,184 @@
1
- @use '../../assets/styles/effects' as *;
2
-
3
- @mixin typography-elements {
4
- .hero-header, h1, h2, h3, h4, h5, h6 {
5
- margin: 0;
6
- }
7
-
8
- .hero-header {
9
- font-family: var(--uui-font);
10
- font-weight: 500;
11
- margin: 30px 0;
12
- font-size: 66px;
13
- line-height: 72px;
14
- }
15
-
16
- .promo-header, h1, h2, h3 {
17
- font-family: var(--uui-font);
18
- font-weight: 700;
19
- }
20
-
21
- h4, h5, h6 {
22
- font-family: var(--uui-font);
23
- font-weight: 600;
24
- }
25
-
26
- h1, h2, h3, h4, h5, h6 {
27
- margin-bottom: 0.5em;
28
- margin-top: 1.2em;
29
- line-height: 1.35em;
30
- }
31
-
32
- h1 {
33
- font-size: 42px;
34
- }
35
-
36
- h2 {
37
- font-size: 30px;
38
- letter-spacing: 0.1px;
39
-
40
- .promo-header {
41
- letter-spacing: 2px;
42
- }
43
- }
44
-
45
- h3 {
46
- font-size: 24px;
47
- }
48
-
49
- h4 {
50
- font-size: 18px;
51
- letter-spacing: 0.1px;
52
- }
53
-
54
- h5 {
55
- font-size: 16px;
56
- }
57
-
58
- h6 {
59
- font-size: 14px;
60
- }
61
-
62
- b, strong {
63
- font-family: var(--uui-font);
64
- font-weight: 600;
65
- }
66
-
67
- i, em {
68
- font-family: var(--uui-font);
69
- font-weight: 400;
70
- font-style: italic;
71
- }
72
-
73
- a {
74
- display: inline-flex;
75
- align-items: center;
76
- color: var(--uui-link);
77
- text-decoration: underline;
78
-
79
- &:focus-visible {
80
- @include focus-visible-effect(2px);
81
- border-radius: var(--uui-focus-radius);
82
- }
83
-
84
- &:visited {
85
- color: var(--uui-link-visited);
86
-
87
- &:hover {
88
- color: var(--uui-link-visited-hover);
89
- }
90
- }
91
-
92
- &:hover {
93
- color: var(--uui-link-hover);
94
- }
95
- }
96
-
97
- code {
98
- padding: 0.125em 0.25em;
99
- color: var(--uui-text-primary);
100
- background-color: var(--uui-neutral-30);
101
- font-family: var(--uui-font-mono, monospace);
102
- font-weight: 400;
103
- white-space: pre-wrap;
104
- word-wrap: normal;
105
- }
106
-
107
- ol, ul {
108
- padding: 0;
109
- }
110
-
111
- li {
112
- margin-left: 1.25em;
113
- line-height: 1.5;
114
- }
115
-
116
- pre {
117
- padding: 1.25em;
118
- font-family: monospace;
119
- white-space: pre-wrap;
120
- word-wrap: normal;
121
- }
122
-
123
- img {
124
- max-width: 100%;
125
- }
126
-
127
- figure {
128
- margin: 0;
129
-
130
- figcaption {
131
- font-size: 0.9em;
132
- opacity: 0.9;
133
- text-align: center;
134
- }
135
- }
136
-
137
- p {
138
- margin: 0.5em 0;
139
- line-height: 1.5;
140
- }
141
-
142
- .uui-critical {
143
- color: var(--uui-text-critical);
144
- }
145
-
146
- .uui-info {
147
- color: var(--uui-text-info);
148
- }
149
-
150
- .uui-success {
151
- color: var(--uui-text-success);
152
- }
153
-
154
- .uui-warning {
155
- color: var(--uui-text-warning);
156
- }
157
-
158
- .uui-highlight {
159
- background-color: var(--uui-warning-10);
160
- }
161
- }
162
-
163
- .uui-typography {
164
- font-family: var(--uui-font);
165
- color: var(--uui-text-primary);
166
-
167
- @include typography-elements;
168
- }
169
-
170
- .uui-typography-inline {
171
- @include typography-elements;
172
- }
173
-
174
- .uui-typography-size-12 {
175
- font-size: 12px;
176
- }
177
-
178
- .uui-typography-size-14 {
179
- font-size: 14px;
180
- }
181
-
182
- .uui-typography-size-16 {
183
- font-size: 16px;
184
- }
1
+ @use '../../assets/styles/effects' as *;
2
+
3
+ @mixin typography-elements {
4
+ .hero-header, h1, h2, h3, h4, h5, h6 {
5
+ margin: 0;
6
+ }
7
+
8
+ .hero-header {
9
+ font-family: var(--uui-font);
10
+ font-weight: 500;
11
+ margin: 30px 0;
12
+ font-size: 66px;
13
+ line-height: 72px;
14
+ }
15
+
16
+ .promo-header, h1, h2, h3 {
17
+ font-family: var(--uui-font);
18
+ font-weight: 700;
19
+ }
20
+
21
+ h4, h5, h6 {
22
+ font-family: var(--uui-font);
23
+ font-weight: 600;
24
+ }
25
+
26
+ h1, h2, h3, h4, h5, h6 {
27
+ margin-bottom: 0.5em;
28
+ margin-top: 1.2em;
29
+ line-height: 1.35em;
30
+ }
31
+
32
+ h1 {
33
+ font-size: 42px;
34
+ }
35
+
36
+ h2 {
37
+ font-size: 30px;
38
+ letter-spacing: 0.1px;
39
+
40
+ .promo-header {
41
+ letter-spacing: 2px;
42
+ }
43
+ }
44
+
45
+ h3 {
46
+ font-size: 24px;
47
+ }
48
+
49
+ h4 {
50
+ font-size: 18px;
51
+ letter-spacing: 0.1px;
52
+ }
53
+
54
+ h5 {
55
+ font-size: 16px;
56
+ }
57
+
58
+ h6 {
59
+ font-size: 14px;
60
+ }
61
+
62
+ b, strong {
63
+ font-family: var(--uui-font);
64
+ font-weight: 600;
65
+ }
66
+
67
+ i, em {
68
+ font-family: var(--uui-font);
69
+ font-weight: 400;
70
+ font-style: italic;
71
+ }
72
+
73
+ a {
74
+ display: inline-flex;
75
+ align-items: center;
76
+ color: var(--uui-link);
77
+ text-decoration: underline;
78
+
79
+ &:focus-visible {
80
+ @include focus-visible-effect(2px);
81
+ border-radius: var(--uui-focus-radius);
82
+ }
83
+
84
+ &:visited {
85
+ color: var(--uui-link-visited);
86
+
87
+ &:hover {
88
+ color: var(--uui-link-visited-hover);
89
+ }
90
+ }
91
+
92
+ &:hover {
93
+ color: var(--uui-link-hover);
94
+ }
95
+ }
96
+
97
+ code {
98
+ padding: 0.125em 0.25em;
99
+ color: var(--uui-text-primary);
100
+ background-color: var(--uui-neutral-30);
101
+ font-family: var(--uui-font-mono, monospace);
102
+ font-weight: 400;
103
+ white-space: pre-wrap;
104
+ word-wrap: normal;
105
+ }
106
+
107
+ ol, ul {
108
+ padding: 0;
109
+ }
110
+
111
+ li {
112
+ margin-left: 1.25em;
113
+ line-height: 1.5;
114
+ }
115
+
116
+ pre {
117
+ padding: 1.25em;
118
+ font-family: monospace;
119
+ white-space: pre-wrap;
120
+ word-wrap: normal;
121
+ }
122
+
123
+ img {
124
+ max-width: 100%;
125
+ }
126
+
127
+ figure {
128
+ margin: 0;
129
+
130
+ figcaption {
131
+ font-size: 0.9em;
132
+ opacity: 0.9;
133
+ text-align: center;
134
+ }
135
+ }
136
+
137
+ p {
138
+ margin: 0.5em 0;
139
+ line-height: 1.5;
140
+ }
141
+
142
+ .uui-critical {
143
+ color: var(--uui-text-critical);
144
+ }
145
+
146
+ .uui-info {
147
+ color: var(--uui-text-info);
148
+ }
149
+
150
+ .uui-success {
151
+ color: var(--uui-text-success);
152
+ }
153
+
154
+ .uui-warning {
155
+ color: var(--uui-text-warning);
156
+ }
157
+
158
+ .uui-highlight {
159
+ background-color: var(--uui-warning-10);
160
+ }
161
+ }
162
+
163
+ .uui-typography {
164
+ font-family: var(--uui-font);
165
+ color: var(--uui-text-primary);
166
+
167
+ @include typography-elements;
168
+ }
169
+
170
+ .uui-typography-inline {
171
+ @include typography-elements;
172
+ }
173
+
174
+ .uui-typography-size-12 {
175
+ font-size: 12px;
176
+ }
177
+
178
+ .uui-typography-size-14 {
179
+ font-size: 14px;
180
+ }
181
+
182
+ .uui-typography-size-16 {
183
+ font-size: 16px;
184
+ }
package/components/layout/ScrollBars.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React, { ReactNode } from 'react';
2
2
  import type { ScrollbarsAutoHideBehavior } from 'overlayscrollbars';
3
3
  import { IHasCX, IHasRawProps } from '@epam/uui-core';
4
- import 'overlayscrollbars/styles/overlayscrollbars.css';
4
+ import './ScrollBars.scss';
5
5
  export type ScrollbarsApi = {
6
6
  /** Reference to the scrollbar container element */
7
7
  container: HTMLElement | null;
package/components/layout/ScrollBars.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ScrollBars.d.ts","sourceRoot":"","sources":["../../../components/layout/ScrollBars.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEV,SAAS,EAKZ,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAoB,MAAM,gBAAgB,CAAC;AACxE,OAAO,gDAAgD,CAAC;AAGxD,MAAM,MAAM,aAAa,GAAG;IACxB,mDAAmD;IACnD,SAAS,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,+CAA+C;IAC/C,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,YAAY,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,GAAG;IACvF,kDAAkD;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;IACrC;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,0BAA0B,CAAC;IACtC;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC/C;;;;;;OAMG;IACH,oBAAoB,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IAClD,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACpC,CAAC;AASF,eAAO,MAAM,UAAU;IA1CnB,kDAAkD;eACvC,MAAM,cAAc,CAAC,GAAG,CAAC;IACpC;;;;;;;OAOG;eACQ,0BAA0B;IACrC;;;OAGG;oBACa,MAAM;IACtB;;;;;;OAMG;wBACiB,MAAM,GAAG,QAAQ,GAAG,MAAM;IAC9C;;;;;;OAMG;2BACoB,MAAM,GAAG,QAAQ,GAAG,MAAM;eACtC,SAAS,GAAG,SAAS;uCA+GlC,CAAC"}
1
+ {"version":3,"file":"ScrollBars.d.ts","sourceRoot":"","sources":["../../../components/layout/ScrollBars.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEV,SAAS,EAKZ,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAoB,MAAM,gBAAgB,CAAC;AAExE,OAAO,mBAAmB,CAAC;AAE3B,MAAM,MAAM,aAAa,GAAG;IACxB,mDAAmD;IACnD,SAAS,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,+CAA+C;IAC/C,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,YAAY,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,GAAG;IACvF,kDAAkD;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;IACrC;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,0BAA0B,CAAC;IACtC;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC/C;;;;;;OAMG;IACH,oBAAoB,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IAClD,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACpC,CAAC;AASF,eAAO,MAAM,UAAU;IA1CnB,kDAAkD;eACvC,MAAM,cAAc,CAAC,GAAG,CAAC;IACpC;;;;;;;OAOG;eACQ,0BAA0B;IACrC;;;OAGG;oBACa,MAAM;IACtB;;;;;;OAMG;wBACiB,MAAM,GAAG,QAAQ,GAAG,MAAM;IAC9C;;;;;;OAMG;2BACoB,MAAM,GAAG,QAAQ,GAAG,MAAM;eACtC,SAAS,GAAG,SAAS;uCA+GlC,CAAC"}