@skbkontur/react-ui 6.3.4 → 6.4.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.
- package/CHANGELOG.md +29 -0
- package/components/Input/InputLayout/InputLayout.styles.d.ts +1 -0
- package/components/Input/InputLayout/InputLayout.styles.js +11 -8
- package/components/Input/InputLayout/InputLayout.styles.js.map +1 -1
- package/components/Input/InputLayout/InputLayoutAsideText.js +3 -1
- package/components/Input/InputLayout/InputLayoutAsideText.js.map +1 -1
- package/components/Radio/Radio.js +18 -22
- package/components/Radio/Radio.js.map +1 -1
- package/components/Radio/Radio.styles.js +1 -1
- package/components/Radio/Radio.styles.js.map +1 -1
- package/components/SidePage/SidePage.styles.d.ts +1 -0
- package/components/SidePage/SidePage.styles.js +19 -16
- package/components/SidePage/SidePage.styles.js.map +1 -1
- package/components/SidePage/SidePageHeader.js +3 -0
- package/components/SidePage/SidePageHeader.js.map +1 -1
- package/components/TokenInput/TokenInput.d.ts +17 -16
- package/components/TokenInput/TokenInput.js +202 -59
- package/components/TokenInput/TokenInput.js.map +1 -1
- package/components/TokenInput/TokenInputFailedMenu.d.ts +17 -0
- package/components/TokenInput/TokenInputFailedMenu.js +30 -0
- package/components/TokenInput/TokenInputFailedMenu.js.map +1 -0
- package/components/TokenInput/TokenInputMenu.d.ts +13 -2
- package/components/TokenInput/TokenInputMenu.js +134 -19
- package/components/TokenInput/TokenInputMenu.js.map +1 -1
- package/components/TokenInput/TokenInputMobileMenu.js +3 -2
- package/components/TokenInput/TokenInputMobileMenu.js.map +1 -1
- package/components/TokenInput/TokenInputReducer.d.ts +6 -1
- package/components/TokenInput/TokenInputReducer.js +14 -3
- package/components/TokenInput/TokenInputReducer.js.map +1 -1
- package/components/TokenInput/locale/locales/en.js +1 -0
- package/components/TokenInput/locale/locales/en.js.map +1 -1
- package/components/TokenInput/locale/locales/ru.js +1 -0
- package/components/TokenInput/locale/locales/ru.js.map +1 -1
- package/components/TokenInput/locale/types.d.ts +1 -0
- package/components/TokenInput/locale/types.js.map +1 -1
- package/internal/Popup/Popup.js.map +1 -1
- package/internal/themes/BasicTheme.d.ts +15 -0
- package/internal/themes/BasicTheme.js +21 -0
- package/internal/themes/BasicTheme.js.map +1 -1
- package/internal/themes/DarkTheme6_0.js +1 -0
- package/internal/themes/DarkTheme6_0.js.map +1 -1
- package/internal/themes/DarkTheme6_4.d.ts +1 -0
- package/internal/themes/DarkTheme6_4.js +44 -0
- package/internal/themes/DarkTheme6_4.js.map +1 -0
- package/internal/themes/LightTheme6_4.d.ts +1 -0
- package/internal/themes/LightTheme6_4.js +44 -0
- package/internal/themes/LightTheme6_4.js.map +1 -0
- package/lib/theming/ThemeVersions.d.ts +1 -1
- package/lib/theming/ThemeVersions.js.map +1 -1
- package/lib/theming/themes/DarkTheme.d.ts +1 -0
- package/lib/theming/themes/DarkTheme.js +3 -1
- package/lib/theming/themes/DarkTheme.js.map +1 -1
- package/lib/theming/themes/LightTheme.d.ts +1 -0
- package/lib/theming/themes/LightTheme.js +3 -1
- package/lib/theming/themes/LightTheme.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,35 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [6.4.0](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@6.3.4...@skbkontur/react-ui@6.4.0) (2026-09-09)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **Button:** give icon-only buttons square shape ([7d08f70](https://github.com/skbkontur/retail-ui/commit/7d08f706dcf485bdfa1f37bd6cb93cbfdaeff002))
|
|
12
|
+
* **Input:** change prefix and suffix color to text neutral soft ([831cab3](https://github.com/skbkontur/retail-ui/commit/831cab37060dda443e3ae92eb152d9c405ca9909))
|
|
13
|
+
* **Radio:** match visuals to Figma ([e174015](https://github.com/skbkontur/retail-ui/commit/e174015e1d4c67a5bcf193df373577ec6e77a8ff))
|
|
14
|
+
* **SidePageHeader:** fix close button click area ([701f0c0](https://github.com/skbkontur/retail-ui/commit/701f0c03b0d0925e2de73d3b84c8c49e4ab4a277))
|
|
15
|
+
* **TokenInput:** cancel in-flight getItems when empty input hides the menu ([401b1be](https://github.com/skbkontur/retail-ui/commit/401b1be8bbe72f99d71fe0d4cae52ecc681b104c))
|
|
16
|
+
* **TokenInput:** update gap between field and menu ([31c41dc](https://github.com/skbkontur/retail-ui/commit/31c41dc1ab08023fdaf5db277d844253bbd8fdff))
|
|
17
|
+
* **TokenInput:** validate unexpected input result ([95c984c](https://github.com/skbkontur/retail-ui/commit/95c984c351a8ea319e43da632b6c5539f04f494c))
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Features
|
|
21
|
+
|
|
22
|
+
* **TokenInput:** add exception handling to getItems ([201c1f6](https://github.com/skbkontur/retail-ui/commit/201c1f620362e53e87d4e922e135c596cd935f05))
|
|
23
|
+
* **TokenInput:** prevent free-text input that fails format check from becoming tokens ([57f5e5b](https://github.com/skbkontur/retail-ui/commit/57f5e5b5fd7d814fa1807d2df809d591a866e60f))
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
### Reverts
|
|
27
|
+
|
|
28
|
+
* Revert "fix(Button): give icon-only buttons square shape" ([1634a6c](https://github.com/skbkontur/retail-ui/commit/1634a6c108cab256d7a97522440ac0971931f2c9))
|
|
29
|
+
* Revert "refactor(Button): use calc instead of new vars for button-icon" ([b3734b8](https://github.com/skbkontur/retail-ui/commit/b3734b80ca12d8c7e633984f3cb7ae0e0cbb5af9))
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
6
35
|
## [6.3.4](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@6.3.3...@skbkontur/react-ui@6.3.4) (2026-09-01)
|
|
7
36
|
|
|
8
37
|
|
|
@@ -7,6 +7,7 @@ export declare const getStylesLayout: import("../../../lib/theming/Emotion.js").
|
|
|
7
7
|
iconFocus(t: Theme): string;
|
|
8
8
|
iconDisabled(t: Theme): string;
|
|
9
9
|
text(t: Theme): string;
|
|
10
|
+
text6_4(t: Theme): string;
|
|
10
11
|
textDisabled(t: Theme): string;
|
|
11
12
|
counter(t: Theme): string;
|
|
12
13
|
counterSmall(t: Theme): string;
|
|
@@ -29,28 +29,31 @@ export var getStylesLayout = memoizeGetStyles(function (emotion) {
|
|
|
29
29
|
text: function (t) {
|
|
30
30
|
return emotion.css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), t.inputPlaceholderColor);
|
|
31
31
|
},
|
|
32
|
+
text6_4: function (t) {
|
|
33
|
+
return emotion.css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), t.inputAffixColor);
|
|
34
|
+
},
|
|
32
35
|
textDisabled: function (t) {
|
|
33
|
-
return emotion.css(
|
|
36
|
+
return emotion.css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), t.inputPlaceholderColorDisabled);
|
|
34
37
|
},
|
|
35
38
|
counter: function (t) {
|
|
36
|
-
return emotion.css(
|
|
39
|
+
return emotion.css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n font-variant-numeric: tabular-nums;\n color: ", ";\n "], ["\n font-variant-numeric: tabular-nums;\n color: ", ";\n "])), t.inputCounterColor);
|
|
37
40
|
},
|
|
38
41
|
counterSmall: function (t) {
|
|
39
|
-
return emotion.css(
|
|
42
|
+
return emotion.css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n margin-left: ", ";\n "], ["\n margin-left: ", ";\n "])), t.inputCounterMarginLeftSmall);
|
|
40
43
|
},
|
|
41
44
|
counterMedium: function (t) {
|
|
42
|
-
return emotion.css(
|
|
45
|
+
return emotion.css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n margin-left: ", ";\n "], ["\n margin-left: ", ";\n "])), t.inputCounterMarginLeftMedium);
|
|
43
46
|
},
|
|
44
47
|
counterLarge: function (t) {
|
|
45
|
-
return emotion.css(
|
|
48
|
+
return emotion.css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n margin-left: ", ";\n "], ["\n margin-left: ", ";\n "])), t.inputCounterMarginLeftLarge);
|
|
46
49
|
},
|
|
47
50
|
counterError: function (t) {
|
|
48
|
-
return emotion.css(
|
|
51
|
+
return emotion.css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), t.inputCounterColorError);
|
|
49
52
|
},
|
|
50
53
|
counterHelp: function (t) {
|
|
51
|
-
return emotion.css(
|
|
54
|
+
return emotion.css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n margin-left: ", ";\n "], ["\n margin-left: ", ";\n "])), t.inputCounterHelpMarginLeft);
|
|
52
55
|
},
|
|
53
56
|
};
|
|
54
57
|
});
|
|
55
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
|
|
58
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
|
|
56
59
|
//# sourceMappingURL=InputLayout.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputLayout.styles.js","sourceRoot":"","sources":["InputLayout.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAEnE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,CAAC,IAAM,eAAe,GAAG,gBAAgB,CAAC,UAAC,OAAgB;IAC/D,IAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;IAElC,OAAO;QACL,IAAI,YAAC,CAAQ;YACX,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QACxB,CAAC;QACD,KAAK;YACH,OAAO,OAAO,CAAC,GAAG,0MAAA,uIAMjB,KAAC;QACJ,CAAC;QACD,KAAK;YACH,OAAO,OAAO,CAAC,GAAG,iOAAA,qIAMF,EAAoB,uBAEnC,KAFe,oBAAoB,EAElC;QACJ,CAAC;QACD,IAAI,YAAC,CAAQ;YACX,OAAO,OAAO,CAAC,GAAG,mGAAA,mBACP,EAAgB,WAC1B,KADU,CAAC,CAAC,cAAc,EACzB;QACJ,CAAC;QACD,SAAS,YAAC,CAAQ;YAChB,OAAO,OAAO,CAAC,GAAG,mGAAA,mBACP,EAAuB,WACjC,KADU,CAAC,CAAC,qBAAqB,EAChC;QACJ,CAAC;QACD,YAAY,YAAC,CAAQ;YACnB,OAAO,OAAO,CAAC,GAAG,6HAAA,6CAEP,EAAwB,WAClC,KADU,CAAC,CAAC,sBAAsB,EACjC;QACJ,CAAC;QACD,IAAI,YAAC,CAAQ;YACX,OAAO,OAAO,CAAC,GAAG,mGAAA,mBACP,EAAuB,WACjC,KADU,CAAC,CAAC,qBAAqB,EAChC;QACJ,CAAC;
|
|
1
|
+
{"version":3,"file":"InputLayout.styles.js","sourceRoot":"","sources":["InputLayout.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAEnE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,CAAC,IAAM,eAAe,GAAG,gBAAgB,CAAC,UAAC,OAAgB;IAC/D,IAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;IAElC,OAAO;QACL,IAAI,YAAC,CAAQ;YACX,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QACxB,CAAC;QACD,KAAK;YACH,OAAO,OAAO,CAAC,GAAG,0MAAA,uIAMjB,KAAC;QACJ,CAAC;QACD,KAAK;YACH,OAAO,OAAO,CAAC,GAAG,iOAAA,qIAMF,EAAoB,uBAEnC,KAFe,oBAAoB,EAElC;QACJ,CAAC;QACD,IAAI,YAAC,CAAQ;YACX,OAAO,OAAO,CAAC,GAAG,mGAAA,mBACP,EAAgB,WAC1B,KADU,CAAC,CAAC,cAAc,EACzB;QACJ,CAAC;QACD,SAAS,YAAC,CAAQ;YAChB,OAAO,OAAO,CAAC,GAAG,mGAAA,mBACP,EAAuB,WACjC,KADU,CAAC,CAAC,qBAAqB,EAChC;QACJ,CAAC;QACD,YAAY,YAAC,CAAQ;YACnB,OAAO,OAAO,CAAC,GAAG,6HAAA,6CAEP,EAAwB,WAClC,KADU,CAAC,CAAC,sBAAsB,EACjC;QACJ,CAAC;QACD,IAAI,YAAC,CAAQ;YACX,OAAO,OAAO,CAAC,GAAG,mGAAA,mBACP,EAAuB,WACjC,KADU,CAAC,CAAC,qBAAqB,EAChC;QACJ,CAAC;QAED,OAAO,YAAC,CAAQ;YACd,OAAO,OAAO,CAAC,GAAG,mGAAA,mBACP,EAAiB,WAC3B,KADU,CAAC,CAAC,eAAe,EAC1B;QACJ,CAAC;QAED,YAAY,YAAC,CAAQ;YACnB,OAAO,OAAO,CAAC,GAAG,mGAAA,mBACP,EAA+B,WACzC,KADU,CAAC,CAAC,6BAA6B,EACxC;QACJ,CAAC;QACD,OAAO,YAAC,CAAQ;YACd,OAAO,OAAO,CAAC,GAAG,gJAAA,gEAEP,EAAmB,WAC7B,KADU,CAAC,CAAC,iBAAiB,EAC5B;QACJ,CAAC;QACD,YAAY,YAAC,CAAQ;YACnB,OAAO,OAAO,CAAC,GAAG,2GAAA,yBACD,EAA6B,WAC7C,KADgB,CAAC,CAAC,2BAA2B,EAC5C;QACJ,CAAC;QACD,aAAa,YAAC,CAAQ;YACpB,OAAO,OAAO,CAAC,GAAG,2GAAA,yBACD,EAA8B,WAC9C,KADgB,CAAC,CAAC,4BAA4B,EAC7C;QACJ,CAAC;QACD,YAAY,YAAC,CAAQ;YACnB,OAAO,OAAO,CAAC,GAAG,2GAAA,yBACD,EAA6B,WAC7C,KADgB,CAAC,CAAC,2BAA2B,EAC5C;QACJ,CAAC;QACD,YAAY,YAAC,CAAQ;YACnB,OAAO,OAAO,CAAC,GAAG,qGAAA,mBACP,EAAwB,WAClC,KADU,CAAC,CAAC,sBAAsB,EACjC;QACJ,CAAC;QACD,WAAW,YAAC,CAAQ;YAClB,OAAO,OAAO,CAAC,GAAG,2GAAA,yBACD,EAA4B,WAC5C,KADgB,CAAC,CAAC,0BAA0B,EAC3C;QACJ,CAAC;KACF,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { ZERO_WIDTH_SPACE_CSS } from '../../../lib/chars.js';\nimport { memoizeGetStyles } from '../../../lib/theming/Emotion.js';\nimport type { Theme } from '../../../lib/theming/Theme.js';\nimport { getStyles } from '../Input.styles.js';\n\nexport const getStylesLayout = memoizeGetStyles((emotion: Emotion) => {\n const styles = getStyles(emotion);\n\n return {\n root(t: Theme) {\n return styles.root(t);\n },\n input() {\n return emotion.css`\n min-width: 0;\n overflow: hidden;\n position: relative;\n width: 100%;\n display: flex;\n `;\n },\n aside() {\n return emotion.css`\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n\n &::before {\n content: '${ZERO_WIDTH_SPACE_CSS}';\n }\n `;\n },\n icon(t: Theme) {\n return emotion.css`\n color: ${t.inputIconColor};\n `;\n },\n iconFocus(t: Theme) {\n return emotion.css`\n color: ${t.inputFocusedIconColor};\n `;\n },\n iconDisabled(t: Theme) {\n return emotion.css`\n cursor: default;\n color: ${t.inputIconColorDisabled};\n `;\n },\n text(t: Theme) {\n return emotion.css`\n color: ${t.inputPlaceholderColor};\n `;\n },\n\n text6_4(t: Theme) {\n return emotion.css`\n color: ${t.inputAffixColor};\n `;\n },\n\n textDisabled(t: Theme) {\n return emotion.css`\n color: ${t.inputPlaceholderColorDisabled};\n `;\n },\n counter(t: Theme) {\n return emotion.css`\n font-variant-numeric: tabular-nums;\n color: ${t.inputCounterColor};\n `;\n },\n counterSmall(t: Theme) {\n return emotion.css`\n margin-left: ${t.inputCounterMarginLeftSmall};\n `;\n },\n counterMedium(t: Theme) {\n return emotion.css`\n margin-left: ${t.inputCounterMarginLeftMedium};\n `;\n },\n counterLarge(t: Theme) {\n return emotion.css`\n margin-left: ${t.inputCounterMarginLeftLarge};\n `;\n },\n counterError(t: Theme) {\n return emotion.css`\n color: ${t.inputCounterColorError};\n `;\n },\n counterHelp(t: Theme) {\n return emotion.css`\n margin-left: ${t.inputCounterHelpMarginLeft};\n `;\n },\n };\n});\n"]}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { useEmotion, useStyles } from '../../../lib/renderEnvironment/index.js';
|
|
3
3
|
import { ThemeContext } from '../../../lib/theming/ThemeContext.js';
|
|
4
|
+
import { isThemeGTE } from '../../../lib/theming/ThemeHelpers.js';
|
|
4
5
|
import { getStylesLayout } from './InputLayout.styles.js';
|
|
5
6
|
import { InputLayoutContext } from './InputLayoutContext.js';
|
|
6
7
|
export var InputLayoutAsideText = function (_a) {
|
|
@@ -9,7 +10,8 @@ export var InputLayoutAsideText = function (_a) {
|
|
|
9
10
|
var cx = useEmotion().cx;
|
|
10
11
|
var stylesLayout = useStyles(getStylesLayout);
|
|
11
12
|
var disabled = React.useContext(InputLayoutContext).disabled;
|
|
13
|
+
var themeGTE6_4 = isThemeGTE(theme, '6.4');
|
|
12
14
|
var asideClassName = stylesLayout.aside();
|
|
13
|
-
return text ? (React.createElement("span", { className: cx(asideClassName, stylesLayout.text(theme), disabled && stylesLayout.textDisabled(theme)) }, text)) : null;
|
|
15
|
+
return text ? (React.createElement("span", { className: cx(asideClassName, stylesLayout.text(theme), themeGTE6_4 && stylesLayout.text6_4(theme), disabled && stylesLayout.textDisabled(theme)) }, text)) : null;
|
|
14
16
|
};
|
|
15
17
|
//# sourceMappingURL=InputLayoutAsideText.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputLayoutAsideText.js","sourceRoot":"","sources":["InputLayoutAsideText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;
|
|
1
|
+
{"version":3,"file":"InputLayoutAsideText.js","sourceRoot":"","sources":["InputLayoutAsideText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAElE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAM7D,MAAM,CAAC,IAAM,oBAAoB,GAAuD,UAAC,EAAe;QAAb,YAAW,EAAX,IAAI,mBAAG,IAAI,KAAA;IACpG,IAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IACrC,IAAA,EAAE,GAAK,UAAU,EAAE,GAAjB,CAAkB;IAC5B,IAAM,YAAY,GAAG,SAAS,CAAC,eAAe,CAAC,CAAC;IACxC,IAAA,QAAQ,GAAK,KAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC,SAAzC,CAA0C;IAC1D,IAAM,WAAW,GAAG,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAC7C,IAAM,cAAc,GAAG,YAAY,CAAC,KAAK,EAAE,CAAC;IAE5C,OAAO,IAAI,CAAC,CAAC,CAAC,CACZ,8BACE,SAAS,EAAE,EAAE,CACX,cAAc,EACd,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,EACxB,WAAW,IAAI,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,EAC1C,QAAQ,IAAI,YAAY,CAAC,YAAY,CAAC,KAAK,CAAC,CAC7C,IAEA,IAAI,CACA,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { useEmotion, useStyles } from '../../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext.js';\nimport { isThemeGTE } from '../../../lib/theming/ThemeHelpers.js';\nimport type { InputProps } from '../Input.js';\nimport { getStylesLayout } from './InputLayout.styles.js';\nimport { InputLayoutContext } from './InputLayoutContext.js';\n\nexport interface InputLayoutAsideTextProps {\n text: InputProps['prefix'] | InputProps['suffix'];\n}\n\nexport const InputLayoutAsideText: React.FunctionComponent<InputLayoutAsideTextProps> = ({ text = null }) => {\n const theme = React.useContext(ThemeContext);\n const { cx } = useEmotion();\n const stylesLayout = useStyles(getStylesLayout);\n const { disabled } = React.useContext(InputLayoutContext);\n const themeGTE6_4 = isThemeGTE(theme, '6.4');\n const asideClassName = stylesLayout.aside();\n\n return text ? (\n <span\n className={cx(\n asideClassName,\n stylesLayout.text(theme),\n themeGTE6_4 && stylesLayout.text6_4(theme),\n disabled && stylesLayout.textDisabled(theme),\n )}\n >\n {text}\n </span>\n ) : null;\n};\n"]}
|
|
@@ -71,19 +71,23 @@ var Radio = /** @class */ (function (_super) {
|
|
|
71
71
|
_this.context = _this.context;
|
|
72
72
|
_this.inputEl = React.createRef();
|
|
73
73
|
_this.renderMain = function (props) {
|
|
74
|
-
var _a, _b
|
|
75
|
-
var
|
|
74
|
+
var _a, _b;
|
|
75
|
+
var _c = props.disabled, disabled = _c === void 0 ? _this.context.disabled : _c, _d = props.warning, warning = _d === void 0 ? _this.context.warning : _d, _e = props.error, error = _e === void 0 ? _this.context.error : _e, size = props.size, focused = props.focused, onMouseOver = props.onMouseOver, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, onValueChange = props.onValueChange, rest = __rest(props, ["disabled", "warning", "error", "size", "focused", "onMouseOver", "onMouseEnter", "onMouseLeave", "onValueChange"]);
|
|
76
|
+
var isFocused = _this.getProps().focused || _this.state.focusedByKeyboard;
|
|
77
|
+
var isInRadioGroup = _this._isInRadioGroup();
|
|
78
|
+
var isCheckedByGroup = isInRadioGroup && _this.props.value === _this.context.activeItem;
|
|
79
|
+
var isChecked = isCheckedByGroup || !!_this.props.checked;
|
|
76
80
|
var radioProps = {
|
|
77
81
|
className: _this.cx((_a = {},
|
|
78
82
|
_a[_this.styles.circle(_this.theme)] = true,
|
|
79
83
|
_a[_this.getCircleSizeClassName()] = true,
|
|
80
|
-
_a[_this.styles.checked(_this.theme)] =
|
|
81
|
-
_a[_this.getCheckedSizeClassName()] =
|
|
82
|
-
_a[_this.styles.focus(_this.theme)] =
|
|
84
|
+
_a[_this.styles.checked(_this.theme)] = isChecked,
|
|
85
|
+
_a[_this.getCheckedSizeClassName()] = isChecked,
|
|
86
|
+
_a[_this.styles.focus(_this.theme)] = isFocused,
|
|
83
87
|
_a[_this.styles.error(_this.theme)] = error,
|
|
84
88
|
_a[_this.styles.warning(_this.theme)] = warning,
|
|
85
89
|
_a[_this.styles.disabled(_this.theme)] = disabled,
|
|
86
|
-
_a[_this.styles.checkedDisabled(_this.theme)] =
|
|
90
|
+
_a[_this.styles.checkedDisabled(_this.theme)] = isChecked && disabled,
|
|
87
91
|
_a[globalClasses.circle] = true,
|
|
88
92
|
_a)),
|
|
89
93
|
};
|
|
@@ -91,30 +95,22 @@ var Radio = /** @class */ (function (_super) {
|
|
|
91
95
|
if (typeof _this.props.value === 'string' || typeof _this.props.value === 'number') {
|
|
92
96
|
value = _this.props.value;
|
|
93
97
|
}
|
|
94
|
-
var inputProps = __assign(__assign({}, rest), { type: 'radio', className: _this.styles.input(), disabled: disabled, tabIndex: _this.props.tabIndex, value: value, ref: _this.inputEl, onChange: _this.handleChange, onFocus: _this.handleFocus, onBlur: _this.handleBlur })
|
|
98
|
+
var inputProps = __assign(__assign(__assign({}, rest), { type: 'radio', className: _this.styles.input(), disabled: disabled, tabIndex: _this.props.tabIndex, value: value, ref: _this.inputEl, onChange: _this.handleChange, onFocus: _this.handleFocus, onBlur: _this.handleBlur }), (isInRadioGroup
|
|
99
|
+
? {
|
|
100
|
+
checked: isCheckedByGroup,
|
|
101
|
+
name: _this.context.name,
|
|
102
|
+
suppressHydrationWarning: true,
|
|
103
|
+
}
|
|
104
|
+
: {}));
|
|
95
105
|
var labelProps = {
|
|
96
106
|
className: _this.cx(_this.styles.root(_this.theme), _this.getRootSizeClassName(), (_b = {},
|
|
97
|
-
_b[_this.styles.rootChecked(_this.theme)] =
|
|
107
|
+
_b[_this.styles.rootChecked(_this.theme)] = isChecked,
|
|
98
108
|
_b)),
|
|
99
109
|
onMouseOver: _this.handleMouseOver,
|
|
100
110
|
onMouseEnter: _this.handleMouseEnter,
|
|
101
111
|
onMouseLeave: _this.handleMouseLeave,
|
|
102
112
|
onClick: fixFirefoxModifiedClickOnLabel(_this.inputEl),
|
|
103
113
|
};
|
|
104
|
-
if (_this._isInRadioGroup()) {
|
|
105
|
-
var checked = _this.props.value === _this.context.activeItem;
|
|
106
|
-
inputProps.checked = checked;
|
|
107
|
-
inputProps.name = _this.context.name;
|
|
108
|
-
inputProps.suppressHydrationWarning = true;
|
|
109
|
-
labelProps.className = _this.cx(_this.styles.root(_this.theme), _this.getRootSizeClassName(), (_c = {},
|
|
110
|
-
_c[_this.styles.rootChecked(_this.theme)] = checked,
|
|
111
|
-
_c));
|
|
112
|
-
radioProps.className = _this.cx(radioProps.className, (_d = {},
|
|
113
|
-
_d[_this.styles.checked(_this.theme)] = checked,
|
|
114
|
-
_d[_this.getCheckedSizeClassName()] = checked,
|
|
115
|
-
_d[_this.styles.checkedDisabled(_this.theme)] = checked && disabled,
|
|
116
|
-
_d));
|
|
117
|
-
}
|
|
118
114
|
return (React.createElement("label", __assign({ "data-tid": RadioDataTids.root }, labelProps),
|
|
119
115
|
React.createElement(FocusControlWrapper, { onBlurWhenDisabled: _this.resetFocus },
|
|
120
116
|
React.createElement("input", __assign({}, inputProps))),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.js","sourceRoot":"","sources":["Radio.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AAClF,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,8BAA8B,EAAE,MAAM,oDAAoD,CAAC;AACpG,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAE9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAE7E,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAGjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAEvE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAgD7D,MAAM,CAAC,IAAM,aAAa,GAAG;IAC3B,IAAI,EAAE,aAAa;CACX,CAAC;AAIX;;;GAGG;AAIH;IAA8B,yBAA0C;IAAxE;;QAIS,WAAK,GAAG;YACb,iBAAiB,EAAE,KAAK;SACzB,CAAC;QAMM,cAAQ,GAAG,iBAAiB,CAAC,OAAK,CAAC,YAAY,CAAC,CAAC;QAGlD,aAAO,GAA6B,KAAI,CAAC,OAAO,CAAC;QAGhD,aAAO,GAAG,KAAK,CAAC,SAAS,EAAoB,CAAC;QAkF/C,gBAAU,GAAG,UAAC,KAA4C;;YAE7D,IAAA,KAUE,KAAK,SAVyB,EAAhC,QAAQ,mBAAG,KAAI,CAAC,OAAO,CAAC,QAAQ,KAAA,EAChC,KASE,KAAK,QATuB,EAA9B,OAAO,mBAAG,KAAI,CAAC,OAAO,CAAC,OAAO,KAAA,EAC9B,KAQE,KAAK,MARmB,EAA1B,KAAK,mBAAG,KAAI,CAAC,OAAO,CAAC,KAAK,KAAA,EAC1B,IAAI,GAOF,KAAK,KAPH,EACJ,OAAO,GAML,KAAK,QANA,EACP,WAAW,GAKT,KAAK,YALI,EACX,YAAY,GAIV,KAAK,aAJK,EACZ,YAAY,GAGV,KAAK,aAHK,EACZ,aAAa,GAEX,KAAK,cAFM,EACV,IAAI,UACL,KAAK,EAXH,mHAWL,CADQ,CACC;YAEV,IAAM,UAAU,GAAG;gBACjB,SAAS,EAAE,KAAI,CAAC,EAAE;oBAChB,GAAC,KAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,IAAI;oBACtC,GAAC,KAAI,CAAC,sBAAsB,EAAE,IAAG,IAAI;oBACrC,GAAC,KAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,KAAI,CAAC,KAAK,CAAC,OAAO;oBACrD,GAAC,KAAI,CAAC,uBAAuB,EAAE,IAAG,KAAI,CAAC,KAAK,CAAC,OAAO;oBACpD,GAAC,KAAI,CAAC,MAAM,CAAC,KAAK,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,KAAI,CAAC,QAAQ,EAAE,CAAC,OAAO,IAAI,KAAI,CAAC,KAAK,CAAC,iBAAiB;oBACxF,GAAC,KAAI,CAAC,MAAM,CAAC,KAAK,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,KAAK;oBACtC,GAAC,KAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,OAAO;oBAC1C,GAAC,KAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,QAAQ;oBAC5C,GAAC,KAAI,CAAC,MAAM,CAAC,eAAe,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,KAAI,CAAC,KAAK,CAAC,OAAO,IAAI,QAAQ;oBACzE,GAAC,aAAa,CAAC,MAAM,IAAG,IAAI;wBAC5B;aACH,CAAC;YAEF,IAAI,KAAkC,CAAC;YACvC,IAAI,OAAO,KAAI,CAAC,KAAK,CAAC,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAI,CAAC,KAAK,CAAC,KAAK,KAAK,QAAQ,EAAE,CAAC;gBACjF,KAAK,GAAG,KAAI,CAAC,KAAK,CAAC,KAAK,CAAC;YAC3B,CAAC;YAED,IAAM,UAAU,yBACX,IAAI,KACP,IAAI,EAAE,OAAO,EACb,SAAS,EAAE,KAAI,CAAC,MAAM,CAAC,KAAK,EAAE,EAC9B,QAAQ,UAAA,EACR,QAAQ,EAAE,KAAI,CAAC,KAAK,CAAC,QAAQ,EAC7B,KAAK,OAAA,EACL,GAAG,EAAE,KAAI,CAAC,OAAO,EACjB,QAAQ,EAAE,KAAI,CAAC,YAAY,EAC3B,OAAO,EAAE,KAAI,CAAC,WAAW,EACzB,MAAM,EAAE,KAAI,CAAC,UAAU,GACxB,CAAC;YAEF,IAAM,UAAU,GAAG;gBACjB,SAAS,EAAE,KAAI,CAAC,EAAE,CAAC,KAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAI,CAAC,KAAK,CAAC,EAAE,KAAI,CAAC,oBAAoB,EAAE;oBAC1E,GAAC,KAAI,CAAC,MAAM,CAAC,WAAW,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,KAAI,CAAC,KAAK,CAAC,OAAO;wBACzD;gBACF,WAAW,EAAE,KAAI,CAAC,eAAe;gBACjC,YAAY,EAAE,KAAI,CAAC,gBAAgB;gBACnC,YAAY,EAAE,KAAI,CAAC,gBAAgB;gBACnC,OAAO,EAAE,8BAA8B,CAAC,KAAI,CAAC,OAAO,CAAC;aACtD,CAAC;YAEF,IAAI,KAAI,CAAC,eAAe,EAAE,EAAE,CAAC;gBAC3B,IAAM,OAAO,GAAG,KAAI,CAAC,KAAK,CAAC,KAAK,KAAK,KAAI,CAAC,OAAO,CAAC,UAAU,CAAC;gBAC7D,UAAU,CAAC,OAAO,GAAG,OAAO,CAAC;gBAC7B,UAAU,CAAC,IAAI,GAAG,KAAI,CAAC,OAAO,CAAC,IAAI,CAAC;gBACpC,UAAU,CAAC,wBAAwB,GAAG,IAAI,CAAC;gBAC3C,UAAU,CAAC,SAAS,GAAG,KAAI,CAAC,EAAE,CAAC,KAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAI,CAAC,KAAK,CAAC,EAAE,KAAI,CAAC,oBAAoB,EAAE;oBACtF,GAAC,KAAI,CAAC,MAAM,CAAC,WAAW,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,OAAO;wBAC9C,CAAC;gBACH,UAAU,CAAC,SAAS,GAAG,KAAI,CAAC,EAAE,CAAC,UAAU,CAAC,SAAS;oBACjD,GAAC,KAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,OAAO;oBAC1C,GAAC,KAAI,CAAC,uBAAuB,EAAE,IAAG,OAAO;oBACzC,GAAC,KAAI,CAAC,MAAM,CAAC,eAAe,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,OAAO,IAAI,QAAQ;wBAC9D,CAAC;YACL,CAAC;YAED,OAAO,CACL,oDAAiB,aAAa,CAAC,IAAI,IAAM,UAAU;gBACjD,oBAAC,mBAAmB,IAAC,kBAAkB,EAAE,KAAI,CAAC,UAAU;oBACtD,0CAAW,UAAU,EAAI,CACL;gBACtB,yCAAU,UAAU;oBAClB,8BAAM,SAAS,EAAE,KAAI,CAAC,MAAM,CAAC,WAAW,EAAE,GAAI,CACzC;gBACN,KAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,CACtB,6BAAK,SAAS,EAAE,KAAI,CAAC,MAAM,CAAC,cAAc,CAAC,KAAI,CAAC,KAAK,CAAC;oBACnD,KAAI,CAAC,aAAa,EAAE;oBACpB,KAAI,CAAC,KAAK,CAAC,OAAO,IAAI,KAAI,CAAC,aAAa,EAAE,CACvC,CACP,CACK,CACT,CAAC;QACJ,CAAC,CAAC;QAEM,qBAAe,GAAG,cAAM,OAAA,OAAO,CAAC,KAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAA1B,CAA0B,CAAC;QAmCnD,kBAAY,GAA+C,UAAC,CAAC;;YACnE,MAAA,MAAA,KAAI,CAAC,KAAK,EAAC,aAAa,mDAAG,KAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAE7C,IAAI,KAAI,CAAC,eAAe,EAAE,EAAE,CAAC;gBAC3B,KAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAC1C,CAAC;YAED,MAAA,MAAA,KAAI,CAAC,KAAK,EAAC,QAAQ,mDAAG,CAAC,CAAC,CAAC;QAC3B,CAAC,CAAC;QAEM,qBAAe,GAA8C,UAAC,CAAC;;YACrE,MAAA,MAAA,KAAI,CAAC,KAAK,EAAC,WAAW,mDAAG,CAAC,CAAC,CAAC;QAC9B,CAAC,CAAC;QAEM,sBAAgB,GAA8C,UAAC,CAAC;;YACtE,MAAA,MAAA,KAAI,CAAC,KAAK,EAAC,YAAY,mDAAG,CAAC,CAAC,CAAC;QAC/B,CAAC,CAAC;QAEM,sBAAgB,GAA8C,UAAC,CAAC;;YACtE,MAAA,MAAA,KAAI,CAAC,KAAK,EAAC,YAAY,mDAAG,CAAC,CAAC,CAAC;QAC/B,CAAC,CAAC;QAEM,iBAAW,GAAG,UAAC,CAAwB;;YAC7C,IAAI,CAAC,KAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;gBAC3B,iDAAiD;gBACjD,6CAA6C;gBAC7C,MAAA,MAAA,KAAI,CAAC,YAAY,EAAC,qBAAqB,mDAAG;oBACxC,IAAI,KAAI,CAAC,WAAW,CAAC,cAAc,IAAI,KAAI,CAAC,WAAW,CAAC,YAAY,EAAE,CAAC;wBACrE,KAAI,CAAC,QAAQ,CAAC,EAAE,iBAAiB,EAAE,IAAI,EAAE,CAAC,CAAC;oBAC7C,CAAC;gBACH,CAAC,CAAC,CAAC;gBAEH,IAAI,KAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;oBACvB,KAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;gBACxB,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAEM,gBAAU,GAAG,cAAM,OAAA,KAAI,CAAC,QAAQ,CAAC,EAAE,iBAAiB,EAAE,KAAK,EAAE,CAAC,EAA3C,CAA2C,CAAC;QAE/D,gBAAU,GAAG,UAAC,CAAqC;;YACzD,KAAI,CAAC,UAAU,EAAE,CAAC;YAClB,MAAA,MAAA,KAAI,CAAC,KAAK,EAAC,MAAM,mDAAG,CAAC,CAAC,CAAC;QACzB,CAAC,CAAC;;IACJ,CAAC;cA7QY,KAAK;IA4BR,oCAAoB,GAA5B;QACE,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,OAAO;gBACV,OAAO,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC3C,KAAK,QAAQ;gBACX,OAAO,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC5C,KAAK,OAAO,CAAC;YACb;gBACE,OAAO,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC7C,CAAC;IACH,CAAC;IAEO,sCAAsB,GAA9B;QACE,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,OAAO;gBACV,OAAO,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC7C,KAAK,QAAQ;gBACX,OAAO,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC9C,KAAK,OAAO,CAAC;YACb;gBACE,OAAO,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/C,CAAC;IACH,CAAC;IAEO,uCAAuB,GAA/B;QACE,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,OAAO;gBACV,OAAO,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC9C,KAAK,QAAQ;gBACX,OAAO,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC/C,KAAK,OAAO,CAAC;YACb;gBACE,OAAO,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAChD,CAAC;IACH,CAAC;IAEM,iCAAiB,GAAxB;QACE,IAAI,CAAC,WAAW,GAAG,IAAI,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACxD,CAAC;IAEM,sBAAM,GAAb;QAAA,iBAeC;QAdC,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAEtC,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,QACnB,UAAC,KAAK;YACL,KAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,OAAO,CACL,oBAAC,aAAa,aAAC,WAAW,EAAE,KAAI,CAAC,WAAW,IAAM,KAAI,CAAC,QAAQ,EAAE,GAC9D,KAAI,CAAC,UAAU,CACF,CACjB,CAAC;QACJ,CAAC,CACqB,CACzB,CAAC;IACJ,CAAC;IAED;;OAEG;IACI,qBAAK,GAAZ;;QACE,IAAI,CAAC,WAAW,CAAC,YAAY,GAAG,IAAI,CAAC;QACrC,MAAA,IAAI,CAAC,OAAO,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;IAChC,CAAC;IAED;;OAEG;IACI,oBAAI,GAAX;;QACE,MAAA,IAAI,CAAC,OAAO,CAAC,OAAO,0CAAE,IAAI,EAAE,CAAC;IAC/B,CAAC;IA8FO,6BAAa,GAArB;;QACE,IAAM,iBAAiB,GAAG,IAAI,CAAC,EAAE;YAC/B,GAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,IAAI;YACvC,GAAC,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC;gBAC3F,CAAC;QAEH,OAAO,6BAAK,SAAS,EAAE,iBAAiB,IAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAO,CAAC;IACxE,CAAC;IAEO,0CAA0B,GAAlC;QACE,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,OAAO;gBACV,OAAO,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACjD,KAAK,QAAQ;gBACX,OAAO,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAClD,KAAK,OAAO,CAAC;YACb;gBACE,OAAO,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnD,CAAC;IACH,CAAC;IAEO,6BAAa,GAArB;;QACE,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,0BAA0B,EAAE;gBACtF,GAAC,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC;oBAC9F,IAED,IAAI,CAAC,KAAK,CAAC,OAAO,CACf,CACP,CAAC;IACJ,CAAC;;IA9Na,yBAAmB,GAAG,OAAO,AAAV,CAAW;IAC9B,iBAAW,GAAG,OAAO,AAAV,CAAW;IAMtB,kBAAY,GAAiB;QACzC,OAAO,EAAE,KAAK;KACf,AAFyB,CAExB;IAIY,iBAAW,GAAG,iBAAiB,AAApB,CAAqB;IAdnC,KAAK;QAHjB,qBAAqB;QACrB,QAAQ;QACR,QAAQ;OACI,KAAK,CA6QjB;IAAD,YAAC;CAAA,AA7QD,CAA8B,KAAK,CAAC,SAAS,GA6Q5C;SA7QY,KAAK","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport type { AriaAttributes } from 'react';\nimport React from 'react';\n\nimport type { CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { FocusControlWrapper } from '../../internal/FocusControlWrapper/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { fixFirefoxModifiedClickOnLabel } from '../../lib/events/fixFirefoxModifiedClickOnLabel.js';\nimport { KeyListener } from '../../lib/events/keyListener.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { withSize } from '../../lib/size/SizeDecorator.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport type { Override } from '../../typings/utility-types.js';\nimport { RadioGroupContext } from '../RadioGroup/RadioGroupContext.js';\nimport type { RadioGroupContextType } from '../RadioGroup/RadioGroupContext.js';\nimport { getStyles, globalClasses } from './Radio.styles.js';\n\nexport interface RadioProps<T>\n extends\n Pick<AriaAttributes, 'aria-label'>,\n CommonProps,\n Override<\n React.InputHTMLAttributes<HTMLInputElement>,\n {\n /** Переводит контрол в состояние ошибки. */\n error?: boolean;\n\n /** Переводит контрол в состояние предупреждения. */\n warning?: boolean;\n\n /** Размер радиокнопки. */\n size?: SizeProp;\n\n /** Задаёт состояние фокуса. */\n focused?: boolean;\n\n /** Событие изменения `value`. */\n onValueChange?: (value: T) => void;\n\n /** HTML-событие `onmouseenter`.\n * @ignore */\n onMouseEnter?: React.MouseEventHandler<HTMLLabelElement>;\n\n /** HTML-событие `onmouseleave`.\n * @ignore */\n onMouseLeave?: React.MouseEventHandler<HTMLLabelElement>;\n\n /** HTML-событие `onmouseover`.\n * @ignore */\n onMouseOver?: React.MouseEventHandler<HTMLLabelElement>;\n\n /** Значение. */\n value: T;\n\n /** Задаёт второстепенный пояснительный текст под основным текстом радиокнопки. */\n comment?: React.ReactNode;\n }\n > {}\n\nexport interface RadioState {\n focusedByKeyboard: boolean;\n}\n\nexport const RadioDataTids = {\n root: 'Radio__root',\n} as const;\n\ntype DefaultProps = Required<Pick<RadioProps<any>, 'focused'>>;\n\n/** Радиокнопка позволяет выбрать одно значение из нескольких. Подходит при небольшом количестве вариантов — 2–5.\n *\n * Для создания группы радиокнопок используйте специальный контейнер — компонент [RadioGroup](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_input-data-radiogroup--docs).\n */\n@withRenderEnvironment\n@rootNode\n@withSize\nexport class Radio<T> extends React.Component<RadioProps<T>, RadioState> {\n public static __KONTUR_REACT_UI__ = 'Radio';\n public static displayName = 'Radio';\n\n public state = {\n focusedByKeyboard: false,\n };\n\n public static defaultProps: DefaultProps = {\n focused: false,\n };\n\n private getProps = createPropsGetter(Radio.defaultProps);\n\n public static contextType = RadioGroupContext;\n public context: RadioGroupContextType<T> = this.context;\n private size!: SizeProp;\n\n private inputEl = React.createRef<HTMLInputElement>();\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n private globalObject!: GlobalObject;\n private emotion!: Emotion;\n private cx!: Emotion['cx'];\n private styles!: ReturnType<typeof getStyles>;\n private theme!: Theme;\n private keyListener!: KeyListener;\n\n private getRootSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.rootLarge(this.theme);\n case 'medium':\n return this.styles.rootMedium(this.theme);\n case 'small':\n default:\n return this.styles.rootSmall(this.theme);\n }\n }\n\n private getCircleSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.circleLarge(this.theme);\n case 'medium':\n return this.styles.circleMedium(this.theme);\n case 'small':\n default:\n return this.styles.circleSmall(this.theme);\n }\n }\n\n private getCheckedSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.checkedLarge(this.theme);\n case 'medium':\n return this.styles.checkedMedium(this.theme);\n case 'small':\n default:\n return this.styles.checkedSmall(this.theme);\n }\n }\n\n public componentDidMount() {\n this.keyListener = new KeyListener(this.globalObject);\n }\n\n public render(): React.JSX.Element {\n this.styles = getStyles(this.emotion);\n\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.getProps()}>\n {this.renderMain}\n </CommonWrapper>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n /** Программно устанавливает фокус на радиокнопку. Появляется фокусная обводка, элемент получает клавиатурные события и воспринимается как текущий элемент для чтения скринридерами.\n * @public\n */\n public focus(): void {\n this.keyListener.isTabPressed = true;\n this.inputEl.current?.focus();\n }\n\n /** Программно снимает фокус с радиокнопки.\n * @public\n */\n public blur(): void {\n this.inputEl.current?.blur();\n }\n\n public renderMain = (props: CommonWrapperRestProps<RadioProps<T>>): React.JSX.Element => {\n const {\n disabled = this.context.disabled,\n warning = this.context.warning,\n error = this.context.error,\n size,\n focused,\n onMouseOver,\n onMouseEnter,\n onMouseLeave,\n onValueChange,\n ...rest\n } = props;\n\n const radioProps = {\n className: this.cx({\n [this.styles.circle(this.theme)]: true,\n [this.getCircleSizeClassName()]: true,\n [this.styles.checked(this.theme)]: this.props.checked,\n [this.getCheckedSizeClassName()]: this.props.checked,\n [this.styles.focus(this.theme)]: this.getProps().focused || this.state.focusedByKeyboard,\n [this.styles.error(this.theme)]: error,\n [this.styles.warning(this.theme)]: warning,\n [this.styles.disabled(this.theme)]: disabled,\n [this.styles.checkedDisabled(this.theme)]: this.props.checked && disabled,\n [globalClasses.circle]: true,\n }),\n };\n\n let value: string | number | undefined;\n if (typeof this.props.value === 'string' || typeof this.props.value === 'number') {\n value = this.props.value;\n }\n\n const inputProps = {\n ...rest,\n type: 'radio',\n className: this.styles.input(),\n disabled,\n tabIndex: this.props.tabIndex,\n value,\n ref: this.inputEl,\n onChange: this.handleChange,\n onFocus: this.handleFocus,\n onBlur: this.handleBlur,\n };\n\n const labelProps = {\n className: this.cx(this.styles.root(this.theme), this.getRootSizeClassName(), {\n [this.styles.rootChecked(this.theme)]: this.props.checked,\n }),\n onMouseOver: this.handleMouseOver,\n onMouseEnter: this.handleMouseEnter,\n onMouseLeave: this.handleMouseLeave,\n onClick: fixFirefoxModifiedClickOnLabel(this.inputEl),\n };\n\n if (this._isInRadioGroup()) {\n const checked = this.props.value === this.context.activeItem;\n inputProps.checked = checked;\n inputProps.name = this.context.name;\n inputProps.suppressHydrationWarning = true;\n labelProps.className = this.cx(this.styles.root(this.theme), this.getRootSizeClassName(), {\n [this.styles.rootChecked(this.theme)]: checked,\n });\n radioProps.className = this.cx(radioProps.className, {\n [this.styles.checked(this.theme)]: checked,\n [this.getCheckedSizeClassName()]: checked,\n [this.styles.checkedDisabled(this.theme)]: checked && disabled,\n });\n }\n\n return (\n <label data-tid={RadioDataTids.root} {...labelProps}>\n <FocusControlWrapper onBlurWhenDisabled={this.resetFocus}>\n <input {...inputProps} />\n </FocusControlWrapper>\n <span {...radioProps}>\n <span className={this.styles.placeholder()} />\n </span>\n {this.props.children && (\n <div className={this.styles.captionWrapper(this.theme)}>\n {this.renderCaption()}\n {this.props.comment && this.renderComment()}\n </div>\n )}\n </label>\n );\n };\n\n private _isInRadioGroup = () => Boolean(this.context.name);\n\n private renderCaption() {\n const captionClassNames = this.cx({\n [this.styles.caption(this.theme)]: true,\n [this.styles.captionDisabled(this.theme)]: !!(this.props.disabled || this.context.disabled),\n });\n\n return <div className={captionClassNames}>{this.props.children}</div>;\n }\n\n private getSubcaptionSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.subcaptionLarge(this.theme);\n case 'medium':\n return this.styles.subcaptionMedium(this.theme);\n case 'small':\n default:\n return this.styles.subcaptionSmall(this.theme);\n }\n }\n\n private renderComment() {\n return (\n <div\n className={this.cx(this.styles.subcaption(this.theme), this.getSubcaptionSizeClassName(), {\n [this.styles.subcaptionDisabled(this.theme)]: !!(this.props.disabled || this.context.disabled),\n })}\n >\n {this.props.comment}\n </div>\n );\n }\n\n private handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n this.props.onValueChange?.(this.props.value);\n\n if (this._isInRadioGroup()) {\n this.context.onSelect(this.props.value);\n }\n\n this.props.onChange?.(e);\n };\n\n private handleMouseOver: React.MouseEventHandler<HTMLLabelElement> = (e) => {\n this.props.onMouseOver?.(e);\n };\n\n private handleMouseEnter: React.MouseEventHandler<HTMLLabelElement> = (e) => {\n this.props.onMouseEnter?.(e);\n };\n\n private handleMouseLeave: React.MouseEventHandler<HTMLLabelElement> = (e) => {\n this.props.onMouseLeave?.(e);\n };\n\n private handleFocus = (e: React.FocusEvent<any>) => {\n if (!this.context.disabled) {\n // focus event fires before keyDown eventlistener\n // so we should check tabPressed in async way\n this.globalObject.requestAnimationFrame?.(() => {\n if (this.keyListener.isArrowPressed || this.keyListener.isTabPressed) {\n this.setState({ focusedByKeyboard: true });\n }\n });\n\n if (this.props.onFocus) {\n this.props.onFocus(e);\n }\n }\n };\n\n private resetFocus = () => this.setState({ focusedByKeyboard: false });\n\n private handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n this.resetFocus();\n this.props.onBlur?.(e);\n };\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Radio.js","sourceRoot":"","sources":["Radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport type { AriaAttributes } from 'react';\nimport React from 'react';\n\nimport type { CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { FocusControlWrapper } from '../../internal/FocusControlWrapper/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { fixFirefoxModifiedClickOnLabel } from '../../lib/events/fixFirefoxModifiedClickOnLabel.js';\nimport { KeyListener } from '../../lib/events/keyListener.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { withSize } from '../../lib/size/SizeDecorator.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport type { Override } from '../../typings/utility-types.js';\nimport { RadioGroupContext } from '../RadioGroup/RadioGroupContext.js';\nimport type { RadioGroupContextType } from '../RadioGroup/RadioGroupContext.js';\nimport { getStyles, globalClasses } from './Radio.styles.js';\n\nexport interface RadioProps<T>\n extends\n Pick<AriaAttributes, 'aria-label'>,\n CommonProps,\n Override<\n React.InputHTMLAttributes<HTMLInputElement>,\n {\n /** Переводит контрол в состояние ошибки. */\n error?: boolean;\n\n /** Переводит контрол в состояние предупреждения. */\n warning?: boolean;\n\n /** Размер радиокнопки. */\n size?: SizeProp;\n\n /** Задаёт состояние фокуса. */\n focused?: boolean;\n\n /** Событие изменения `value`. */\n onValueChange?: (value: T) => void;\n\n /** HTML-событие `onmouseenter`.\n * @ignore */\n onMouseEnter?: React.MouseEventHandler<HTMLLabelElement>;\n\n /** HTML-событие `onmouseleave`.\n * @ignore */\n onMouseLeave?: React.MouseEventHandler<HTMLLabelElement>;\n\n /** HTML-событие `onmouseover`.\n * @ignore */\n onMouseOver?: React.MouseEventHandler<HTMLLabelElement>;\n\n /** Значение. */\n value: T;\n\n /** Задаёт второстепенный пояснительный текст под основным текстом радиокнопки. */\n comment?: React.ReactNode;\n }\n > {}\n\nexport interface RadioState {\n focusedByKeyboard: boolean;\n}\n\nexport const RadioDataTids = {\n root: 'Radio__root',\n} as const;\n\ntype DefaultProps = Required<Pick<RadioProps<any>, 'focused'>>;\n\n/** Радиокнопка позволяет выбрать одно значение из нескольких. Подходит при небольшом количестве вариантов — 2–5.\n *\n * Для создания группы радиокнопок используйте специальный контейнер — компонент [RadioGroup](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_input-data-radiogroup--docs).\n */\n@withRenderEnvironment\n@rootNode\n@withSize\nexport class Radio<T> extends React.Component<RadioProps<T>, RadioState> {\n public static __KONTUR_REACT_UI__ = 'Radio';\n public static displayName = 'Radio';\n\n public state = {\n focusedByKeyboard: false,\n };\n\n public static defaultProps: DefaultProps = {\n focused: false,\n };\n\n private getProps = createPropsGetter(Radio.defaultProps);\n\n public static contextType = RadioGroupContext;\n public context: RadioGroupContextType<T> = this.context;\n private size!: SizeProp;\n\n private inputEl = React.createRef<HTMLInputElement>();\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n private globalObject!: GlobalObject;\n private emotion!: Emotion;\n private cx!: Emotion['cx'];\n private styles!: ReturnType<typeof getStyles>;\n private theme!: Theme;\n private keyListener!: KeyListener;\n\n private getRootSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.rootLarge(this.theme);\n case 'medium':\n return this.styles.rootMedium(this.theme);\n case 'small':\n default:\n return this.styles.rootSmall(this.theme);\n }\n }\n\n private getCircleSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.circleLarge(this.theme);\n case 'medium':\n return this.styles.circleMedium(this.theme);\n case 'small':\n default:\n return this.styles.circleSmall(this.theme);\n }\n }\n\n private getCheckedSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.checkedLarge(this.theme);\n case 'medium':\n return this.styles.checkedMedium(this.theme);\n case 'small':\n default:\n return this.styles.checkedSmall(this.theme);\n }\n }\n\n public componentDidMount() {\n this.keyListener = new KeyListener(this.globalObject);\n }\n\n public render(): React.JSX.Element {\n this.styles = getStyles(this.emotion);\n\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.getProps()}>\n {this.renderMain}\n </CommonWrapper>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n /** Программно устанавливает фокус на радиокнопку. Появляется фокусная обводка, элемент получает клавиатурные события и воспринимается как текущий элемент для чтения скринридерами.\n * @public\n */\n public focus(): void {\n this.keyListener.isTabPressed = true;\n this.inputEl.current?.focus();\n }\n\n /** Программно снимает фокус с радиокнопки.\n * @public\n */\n public blur(): void {\n this.inputEl.current?.blur();\n }\n\n public renderMain = (props: CommonWrapperRestProps<RadioProps<T>>): React.JSX.Element => {\n const {\n disabled = this.context.disabled,\n warning = this.context.warning,\n error = this.context.error,\n size,\n focused,\n onMouseOver,\n onMouseEnter,\n onMouseLeave,\n onValueChange,\n ...rest\n } = props;\n\n const isFocused = this.getProps().focused || this.state.focusedByKeyboard;\n const isInRadioGroup = this._isInRadioGroup();\n const isCheckedByGroup = isInRadioGroup && this.props.value === this.context.activeItem;\n const isChecked = isCheckedByGroup || !!this.props.checked;\n\n const radioProps = {\n className: this.cx({\n [this.styles.circle(this.theme)]: true,\n [this.getCircleSizeClassName()]: true,\n [this.styles.checked(this.theme)]: isChecked,\n [this.getCheckedSizeClassName()]: isChecked,\n [this.styles.focus(this.theme)]: isFocused,\n [this.styles.error(this.theme)]: error,\n [this.styles.warning(this.theme)]: warning,\n [this.styles.disabled(this.theme)]: disabled,\n [this.styles.checkedDisabled(this.theme)]: isChecked && disabled,\n [globalClasses.circle]: true,\n }),\n };\n\n let value: string | number | undefined;\n if (typeof this.props.value === 'string' || typeof this.props.value === 'number') {\n value = this.props.value;\n }\n\n const inputProps = {\n ...rest,\n type: 'radio',\n className: this.styles.input(),\n disabled,\n tabIndex: this.props.tabIndex,\n value,\n ref: this.inputEl,\n onChange: this.handleChange,\n onFocus: this.handleFocus,\n onBlur: this.handleBlur,\n ...(isInRadioGroup\n ? {\n checked: isCheckedByGroup,\n name: this.context.name,\n suppressHydrationWarning: true,\n }\n : {}),\n };\n\n const labelProps = {\n className: this.cx(this.styles.root(this.theme), this.getRootSizeClassName(), {\n [this.styles.rootChecked(this.theme)]: isChecked,\n }),\n onMouseOver: this.handleMouseOver,\n onMouseEnter: this.handleMouseEnter,\n onMouseLeave: this.handleMouseLeave,\n onClick: fixFirefoxModifiedClickOnLabel(this.inputEl),\n };\n\n return (\n <label data-tid={RadioDataTids.root} {...labelProps}>\n <FocusControlWrapper onBlurWhenDisabled={this.resetFocus}>\n <input {...inputProps} />\n </FocusControlWrapper>\n <span {...radioProps}>\n <span className={this.styles.placeholder()} />\n </span>\n {this.props.children && (\n <div className={this.styles.captionWrapper(this.theme)}>\n {this.renderCaption()}\n {this.props.comment && this.renderComment()}\n </div>\n )}\n </label>\n );\n };\n\n private _isInRadioGroup = () => Boolean(this.context.name);\n\n private renderCaption() {\n const captionClassNames = this.cx({\n [this.styles.caption(this.theme)]: true,\n [this.styles.captionDisabled(this.theme)]: !!(this.props.disabled || this.context.disabled),\n });\n\n return <div className={captionClassNames}>{this.props.children}</div>;\n }\n\n private getSubcaptionSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.subcaptionLarge(this.theme);\n case 'medium':\n return this.styles.subcaptionMedium(this.theme);\n case 'small':\n default:\n return this.styles.subcaptionSmall(this.theme);\n }\n }\n\n private renderComment() {\n return (\n <div\n className={this.cx(this.styles.subcaption(this.theme), this.getSubcaptionSizeClassName(), {\n [this.styles.subcaptionDisabled(this.theme)]: !!(this.props.disabled || this.context.disabled),\n })}\n >\n {this.props.comment}\n </div>\n );\n }\n\n private handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n this.props.onValueChange?.(this.props.value);\n\n if (this._isInRadioGroup()) {\n this.context.onSelect(this.props.value);\n }\n\n this.props.onChange?.(e);\n };\n\n private handleMouseOver: React.MouseEventHandler<HTMLLabelElement> = (e) => {\n this.props.onMouseOver?.(e);\n };\n\n private handleMouseEnter: React.MouseEventHandler<HTMLLabelElement> = (e) => {\n this.props.onMouseEnter?.(e);\n };\n\n private handleMouseLeave: React.MouseEventHandler<HTMLLabelElement> = (e) => {\n this.props.onMouseLeave?.(e);\n };\n\n private handleFocus = (e: React.FocusEvent<any>) => {\n if (!this.context.disabled) {\n // focus event fires before keyDown eventlistener\n // so we should check tabPressed in async way\n this.globalObject.requestAnimationFrame?.(() => {\n if (this.keyListener.isArrowPressed || this.keyListener.isTabPressed) {\n this.setState({ focusedByKeyboard: true });\n }\n });\n\n if (this.props.onFocus) {\n this.props.onFocus(e);\n }\n }\n };\n\n private resetFocus = () => this.setState({ focusedByKeyboard: false });\n\n private handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n this.resetFocus();\n this.props.onBlur?.(e);\n };\n}\n"]}
|
|
@@ -65,7 +65,7 @@ export var getStyles = memoizeGetStyles(function (_a) {
|
|
|
65
65
|
return css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n display: inline-block;\n height: 0;\n opacity: 0;\n position: absolute;\n width: 0;\n z-index: -1;\n "], ["\n display: inline-block;\n height: 0;\n opacity: 0;\n position: absolute;\n width: 0;\n z-index: -1;\n "])));
|
|
66
66
|
},
|
|
67
67
|
disabled: function (t) {
|
|
68
|
-
return css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n background: ", " !important; // override root hover/active styles\n border-color:
|
|
68
|
+
return css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n background: ", " !important; // override root hover/active styles\n border-color: ", " !important; // override root hover/active styles\n box-shadow: ", " !important; // override root hover/active styles\n "], ["\n background: ", " !important; // override root hover/active styles\n border-color: ", " !important; // override root hover/active styles\n box-shadow: ", " !important; // override root hover/active styles\n "])), t.radioDisabledBg, t.radioDisabledBorderColor, t.radioDisabledShadow);
|
|
69
69
|
},
|
|
70
70
|
caption: function (t) {
|
|
71
71
|
return css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n display: ", ";\n white-space: normal;\n color: ", ";\n "], ["\n display: ", ";\n white-space: normal;\n color: ", ";\n "])), t.radioCaptionDisplay, t.radioTextColor);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.styles.js","sourceRoot":"","sources":["Radio.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles, prefix } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport {\n afterOutlineMixin,\n circleSizeMixin,\n disabledTextColorMixin,\n outlineColorMixin,\n radioCheckedMixin,\n radioSizeMixin,\n subcaptionMixin,\n} from './Radio.mixins.js';\n\nexport const globalClasses = prefix('radio')({\n circle: 'circle',\n});\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n root(t: Theme) {\n return css`\n cursor: pointer;\n position: relative;\n white-space: nowrap;\n display: inline-flex;\n align-items: baseline;\n\n .${globalClasses.circle} {\n transition: background ${t.transitionDuration} ${t.transitionTimingFunction};\n }\n\n &:hover .${globalClasses.circle} {\n background: ${t.radioHoverBg};\n box-shadow: ${t.radioHoverShadow};\n }\n &:active .${globalClasses.circle} {\n background: ${t.radioActiveBg};\n box-shadow: ${t.radioActiveShadow};\n }\n\n &::before {\n // non-breaking space.\n // makes a correct space for absolutely positioned circle,\n // and also height and baseline for radio without caption.\n content: '\\\\00A0';\n display: inline-block;\n flex: 0 0 auto;\n }\n `;\n },\n rootSmall(t: Theme) {\n return css`\n ${radioSizeMixin(t.radioFontSizeSmall, t.radioLineHeightSmall, t.radioPaddingYSmall, t.radioSizeSmall)};\n `;\n },\n rootMedium(t: Theme) {\n return css`\n ${radioSizeMixin(t.radioFontSizeMedium, t.radioLineHeightMedium, t.radioPaddingYMedium, t.radioSizeMedium)};\n `;\n },\n rootLarge(t: Theme) {\n return css`\n ${radioSizeMixin(t.radioFontSizeLarge, t.radioLineHeightLarge, t.radioPaddingYLarge, t.radioSizeLarge)};\n `;\n },\n\n rootChecked(t: Theme) {\n return css`\n &:hover .${globalClasses.circle} {\n background: ${t.radioCheckedHoverBgColor};\n }\n `;\n },\n\n circle(t: Theme) {\n return css`\n background-image: ${t.radioBgImage};\n border-radius: 50%;\n border: ${t.radioBorder};\n box-shadow: ${t.radioBoxShadow};\n box-sizing: border-box;\n display: inline-block;\n position: absolute;\n left: 0;\n background-color: ${t.radioBgColor};\n `;\n },\n circleSmall(t: Theme) {\n return css`\n ${circleSizeMixin(\n t.labGrotesqueBaselineCompensation,\n t.radioFontSizeSmall,\n t.radioSizeSmall,\n t.radioBorderWidthCompensation,\n t.radioCircleOffsetY,\n )};\n `;\n },\n circleMedium(t: Theme) {\n return css`\n ${circleSizeMixin(\n t.labGrotesqueBaselineCompensation,\n t.radioFontSizeMedium,\n t.radioSizeMedium,\n t.radioBorderWidthCompensation,\n t.radioCircleOffsetY,\n )};\n `;\n },\n circleLarge(t: Theme) {\n return css`\n ${circleSizeMixin(\n t.labGrotesqueBaselineCompensation,\n t.radioFontSizeLarge,\n t.radioSizeLarge,\n t.radioBorderWidthCompensation,\n t.radioCircleOffsetY,\n )};\n `;\n },\n\n focus(t: Theme) {\n return css`\n &::after {\n ${afterOutlineMixin(t.radioOutlineWidth)};\n ${outlineColorMixin(t.radioFocusShadow, t.radioBorderColorFocus)};\n }\n `;\n },\n\n warning(t: Theme) {\n return css`\n &::after {\n ${afterOutlineMixin(t.radioOutlineWidth)};\n ${outlineColorMixin(t.radioFocusShadow, t.radioBorderColorWarning)};\n }\n `;\n },\n\n error(t: Theme) {\n return css`\n &::after {\n ${afterOutlineMixin(t.radioOutlineWidth)};\n ${outlineColorMixin(t.radioFocusShadow, t.radioBorderColorError)};\n }\n `;\n },\n\n checked(t: Theme) {\n return css`\n background-color: ${t.radioCheckedBgColor};\n border-color: ${t.radioCheckedBorderColor};\n\n &::before {\n content: ' ';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n margin: auto;\n border-radius: 50%;\n background: ${t.radioCheckedBulletColor};\n }\n `;\n },\n checkedSmall(t: Theme) {\n return css`\n ${radioCheckedMixin(t.radioBulletSizeSmall)};\n `;\n },\n checkedMedium(t: Theme) {\n return css`\n ${radioCheckedMixin(t.radioBulletSizeMedium)};\n `;\n },\n checkedLarge(t: Theme) {\n return css`\n ${radioCheckedMixin(t.radioBulletSizeLarge)};\n `;\n },\n\n checkedDisabled(t: Theme) {\n return css`\n &::before {\n background: ${t.radioCheckedDisabledBulletBg};\n }\n `;\n },\n\n input() {\n return css`\n display: inline-block;\n height: 0;\n opacity: 0;\n position: absolute;\n width: 0;\n z-index: -1;\n `;\n },\n\n disabled(t: Theme) {\n return css`\n background: ${t.radioDisabledBg} !important; // override root hover/active styles\n border-color: transparent !important; // override root hover/active styles\n box-shadow: ${t.radioDisabledShadow} !important; // override root hover/active styles\n `;\n },\n\n caption(t: Theme) {\n return css`\n display: ${t.radioCaptionDisplay};\n white-space: normal;\n color: ${t.radioTextColor};\n `;\n },\n\n captionDisabled(t: Theme) {\n return css`\n ${disabledTextColorMixin(t.textColorDisabled)};\n `;\n },\n\n placeholder() {\n return css`\n display: inline-block;\n `;\n },\n\n captionWrapper(t: Theme) {\n return css`\n display: inline-block;\n padding-left: ${t.radioCaptionGap};\n `;\n },\n\n subcaption(t: Theme) {\n return css`\n margin-top: 2px;\n color: ${t.radioCommentTextColor};\n `;\n },\n\n subcaptionDisabled(t: Theme) {\n return css`\n ${disabledTextColorMixin(t.textColorDisabled)};\n `;\n },\n\n subcaptionSmall(t: Theme) {\n return css`\n ${subcaptionMixin(t.radioCommentFontSizeSmall, t.radioCommentLineHeightSmall)};\n `;\n },\n subcaptionMedium(t: Theme) {\n return css`\n ${subcaptionMixin(t.radioCommentFontSizeMedium, t.radioCommentLineHeightMedium)};\n `;\n },\n subcaptionLarge(t: Theme) {\n return css`\n ${subcaptionMixin(t.radioCommentFontSizeLarge, t.radioCommentLineHeightLarge)};\n `;\n },\n}));\n"]}
|
|
1
|
+
{"version":3,"file":"Radio.styles.js","sourceRoot":"","sources":["Radio.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles, prefix } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport {\n afterOutlineMixin,\n circleSizeMixin,\n disabledTextColorMixin,\n outlineColorMixin,\n radioCheckedMixin,\n radioSizeMixin,\n subcaptionMixin,\n} from './Radio.mixins.js';\n\nexport const globalClasses = prefix('radio')({\n circle: 'circle',\n});\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n root(t: Theme) {\n return css`\n cursor: pointer;\n position: relative;\n white-space: nowrap;\n display: inline-flex;\n align-items: baseline;\n\n .${globalClasses.circle} {\n transition: background ${t.transitionDuration} ${t.transitionTimingFunction};\n }\n\n &:hover .${globalClasses.circle} {\n background: ${t.radioHoverBg};\n box-shadow: ${t.radioHoverShadow};\n }\n &:active .${globalClasses.circle} {\n background: ${t.radioActiveBg};\n box-shadow: ${t.radioActiveShadow};\n }\n\n &::before {\n // non-breaking space.\n // makes a correct space for absolutely positioned circle,\n // and also height and baseline for radio without caption.\n content: '\\\\00A0';\n display: inline-block;\n flex: 0 0 auto;\n }\n `;\n },\n rootSmall(t: Theme) {\n return css`\n ${radioSizeMixin(t.radioFontSizeSmall, t.radioLineHeightSmall, t.radioPaddingYSmall, t.radioSizeSmall)};\n `;\n },\n rootMedium(t: Theme) {\n return css`\n ${radioSizeMixin(t.radioFontSizeMedium, t.radioLineHeightMedium, t.radioPaddingYMedium, t.radioSizeMedium)};\n `;\n },\n rootLarge(t: Theme) {\n return css`\n ${radioSizeMixin(t.radioFontSizeLarge, t.radioLineHeightLarge, t.radioPaddingYLarge, t.radioSizeLarge)};\n `;\n },\n\n rootChecked(t: Theme) {\n return css`\n &:hover .${globalClasses.circle} {\n background: ${t.radioCheckedHoverBgColor};\n }\n `;\n },\n\n circle(t: Theme) {\n return css`\n background-image: ${t.radioBgImage};\n border-radius: 50%;\n border: ${t.radioBorder};\n box-shadow: ${t.radioBoxShadow};\n box-sizing: border-box;\n display: inline-block;\n position: absolute;\n left: 0;\n background-color: ${t.radioBgColor};\n `;\n },\n circleSmall(t: Theme) {\n return css`\n ${circleSizeMixin(\n t.labGrotesqueBaselineCompensation,\n t.radioFontSizeSmall,\n t.radioSizeSmall,\n t.radioBorderWidthCompensation,\n t.radioCircleOffsetY,\n )};\n `;\n },\n circleMedium(t: Theme) {\n return css`\n ${circleSizeMixin(\n t.labGrotesqueBaselineCompensation,\n t.radioFontSizeMedium,\n t.radioSizeMedium,\n t.radioBorderWidthCompensation,\n t.radioCircleOffsetY,\n )};\n `;\n },\n circleLarge(t: Theme) {\n return css`\n ${circleSizeMixin(\n t.labGrotesqueBaselineCompensation,\n t.radioFontSizeLarge,\n t.radioSizeLarge,\n t.radioBorderWidthCompensation,\n t.radioCircleOffsetY,\n )};\n `;\n },\n\n focus(t: Theme) {\n return css`\n &::after {\n ${afterOutlineMixin(t.radioOutlineWidth)};\n ${outlineColorMixin(t.radioFocusShadow, t.radioBorderColorFocus)};\n }\n `;\n },\n\n warning(t: Theme) {\n return css`\n &::after {\n ${afterOutlineMixin(t.radioOutlineWidth)};\n ${outlineColorMixin(t.radioFocusShadow, t.radioBorderColorWarning)};\n }\n `;\n },\n\n error(t: Theme) {\n return css`\n &::after {\n ${afterOutlineMixin(t.radioOutlineWidth)};\n ${outlineColorMixin(t.radioFocusShadow, t.radioBorderColorError)};\n }\n `;\n },\n\n checked(t: Theme) {\n return css`\n background-color: ${t.radioCheckedBgColor};\n border-color: ${t.radioCheckedBorderColor};\n\n &::before {\n content: ' ';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n margin: auto;\n border-radius: 50%;\n background: ${t.radioCheckedBulletColor};\n }\n `;\n },\n checkedSmall(t: Theme) {\n return css`\n ${radioCheckedMixin(t.radioBulletSizeSmall)};\n `;\n },\n checkedMedium(t: Theme) {\n return css`\n ${radioCheckedMixin(t.radioBulletSizeMedium)};\n `;\n },\n checkedLarge(t: Theme) {\n return css`\n ${radioCheckedMixin(t.radioBulletSizeLarge)};\n `;\n },\n\n checkedDisabled(t: Theme) {\n return css`\n &::before {\n background: ${t.radioCheckedDisabledBulletBg};\n }\n `;\n },\n\n input() {\n return css`\n display: inline-block;\n height: 0;\n opacity: 0;\n position: absolute;\n width: 0;\n z-index: -1;\n `;\n },\n\n disabled(t: Theme) {\n return css`\n background: ${t.radioDisabledBg} !important; // override root hover/active styles\n border-color: ${t.radioDisabledBorderColor} !important; // override root hover/active styles\n box-shadow: ${t.radioDisabledShadow} !important; // override root hover/active styles\n `;\n },\n\n caption(t: Theme) {\n return css`\n display: ${t.radioCaptionDisplay};\n white-space: normal;\n color: ${t.radioTextColor};\n `;\n },\n\n captionDisabled(t: Theme) {\n return css`\n ${disabledTextColorMixin(t.textColorDisabled)};\n `;\n },\n\n placeholder() {\n return css`\n display: inline-block;\n `;\n },\n\n captionWrapper(t: Theme) {\n return css`\n display: inline-block;\n padding-left: ${t.radioCaptionGap};\n `;\n },\n\n subcaption(t: Theme) {\n return css`\n margin-top: 2px;\n color: ${t.radioCommentTextColor};\n `;\n },\n\n subcaptionDisabled(t: Theme) {\n return css`\n ${disabledTextColorMixin(t.textColorDisabled)};\n `;\n },\n\n subcaptionSmall(t: Theme) {\n return css`\n ${subcaptionMixin(t.radioCommentFontSizeSmall, t.radioCommentLineHeightSmall)};\n `;\n },\n subcaptionMedium(t: Theme) {\n return css`\n ${subcaptionMixin(t.radioCommentFontSizeMedium, t.radioCommentLineHeightMedium)};\n `;\n },\n subcaptionLarge(t: Theme) {\n return css`\n ${subcaptionMixin(t.radioCommentFontSizeLarge, t.radioCommentLineHeightLarge)};\n `;\n },\n}));\n"]}
|
|
@@ -31,6 +31,7 @@ export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGet
|
|
|
31
31
|
closeMobile(t: Theme): string;
|
|
32
32
|
closeFocus(t: Theme): string;
|
|
33
33
|
wrapperClose(t: Theme): string;
|
|
34
|
+
wrapperClose6_4(): string;
|
|
34
35
|
mobileWrapperClose(t: Theme): string;
|
|
35
36
|
panel(t: Theme): string;
|
|
36
37
|
wrapperCloseFixed(t: Theme): string;
|
|
@@ -104,52 +104,55 @@ export var getStyles = memoizeGetStyles(function (_a) {
|
|
|
104
104
|
wrapperClose: function (t) {
|
|
105
105
|
return css(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n box-sizing: border-box;\n height: 100%;\n line-height: ", ";\n padding: ", " 0 ", ";\n position: absolute;\n right: ", ";\n top: ", ";\n "], ["\n box-sizing: border-box;\n height: 100%;\n line-height: ", ";\n padding: ", " 0 ", ";\n position: absolute;\n right: ", ";\n top: ", ";\n "])), t.sidePageHeaderLineHeight, t.sidePageHeaderPaddingTop, t.sidePageHeaderPaddingBottom, t.sidePageCloseButtonClickAreaRight, t.sidePageCloseButtonWrapperOffsetTop);
|
|
106
106
|
},
|
|
107
|
+
wrapperClose6_4: function () {
|
|
108
|
+
return css(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n height: auto;\n padding-bottom: 0;\n "], ["\n height: auto;\n padding-bottom: 0;\n "])));
|
|
109
|
+
},
|
|
107
110
|
mobileWrapperClose: function (t) {
|
|
108
|
-
return css(
|
|
111
|
+
return css(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n line-height: ", ";\n padding: ", " 0 ", ";\n right: ", ";\n "], ["\n line-height: ", ";\n padding: ", " 0 ", ";\n right: ", ";\n "])), t.mobileSidePageHeaderLineHeight, t.mobileSidePageHeaderPaddingTop, t.mobileSidePageHeaderPaddingBottom, t.mobileSidePageCloseButtonPadding);
|
|
109
112
|
},
|
|
110
113
|
panel: function (t) {
|
|
111
|
-
return css(
|
|
114
|
+
return css(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n background: ", ";\n padding: ", " ", " ", "\n ", ";\n "], ["\n background: ", ";\n padding: ", " ", " ", "\n ", ";\n "])), t.sidePageFooterPanelBg, t.sidePageFooterPanelPaddingTop, t.sidePagePaddingRight, t.sidePageFooterPanelPaddingBottom, t.sidePagePaddingLeft);
|
|
112
115
|
},
|
|
113
116
|
wrapperCloseFixed: function (t) {
|
|
114
|
-
return css(
|
|
117
|
+
return css(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n top: ", ";\n "], ["\n top: ", ";\n "])), t.sidePageCloseButtonWrapperFixedOffsetTop);
|
|
115
118
|
},
|
|
116
119
|
footerWrapper: function () {
|
|
117
|
-
return css(
|
|
120
|
+
return css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n flex: 0 0 auto;\n "], ["\n flex: 0 0 auto;\n "])));
|
|
118
121
|
},
|
|
119
122
|
footer: function (t) {
|
|
120
|
-
return css(
|
|
123
|
+
return css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n bottom: 0;\n position: fixed;\n z-index: 10;\n color: ", ";\n "], ["\n bottom: 0;\n position: fixed;\n z-index: 10;\n color: ", ";\n "])), t.sidePageFooterTextColor);
|
|
121
124
|
},
|
|
122
125
|
positionStatic: function () {
|
|
123
|
-
return css(
|
|
126
|
+
return css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n position: static;\n "], ["\n position: static;\n "])));
|
|
124
127
|
},
|
|
125
128
|
footerContent: function (t) {
|
|
126
|
-
return css(
|
|
129
|
+
return css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n padding: ", " ", " ", "\n ", ";\n "], ["\n padding: ", " ", " ", "\n ", ";\n "])), t.sidePageFooterPaddingTop, t.sidePagePaddingRight, t.sidePageFooterPaddingBottom, t.sidePagePaddingLeft);
|
|
127
130
|
},
|
|
128
131
|
mobileFooterContent: function (t) {
|
|
129
|
-
return css(
|
|
132
|
+
return css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n display: flex;\n flex-flow: column nowrap;\n padding: ", ";\n "], ["\n display: flex;\n flex-flow: column nowrap;\n padding: ", ";\n "])), t.mobileSidePageFooterPadding);
|
|
130
133
|
},
|
|
131
134
|
footerFixed: function (t) {
|
|
132
|
-
return css(
|
|
135
|
+
return css(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n background: ", ";\n\n &:before {\n top: 0px;\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n left: 0;\n z-index: -1;\n box-shadow: ", ";\n }\n "], ["\n background: ", ";\n\n &:before {\n top: 0px;\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n left: 0;\n z-index: -1;\n box-shadow: ", ";\n }\n "])), t.sidePageBgDefault, t.sidePageFixedFooterShadow);
|
|
133
136
|
},
|
|
134
137
|
panelFixed: function (t) {
|
|
135
|
-
return css(
|
|
138
|
+
return css(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n &:before {\n box-shadow: ", ";\n }\n "], ["\n &:before {\n box-shadow: ", ";\n }\n "])), t.sidePageFixedPanelShadow);
|
|
136
139
|
},
|
|
137
140
|
transitionLeft: function () {
|
|
138
|
-
return css(
|
|
141
|
+
return css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n transform: translateX(100px);\n "], ["\n transform: translateX(100px);\n "])));
|
|
139
142
|
},
|
|
140
143
|
transitionRight: function () {
|
|
141
|
-
return css(
|
|
144
|
+
return css(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n transform: translateX(-100px);\n "], ["\n transform: translateX(-100px);\n "])));
|
|
142
145
|
},
|
|
143
146
|
transitionActive: function () {
|
|
144
|
-
return css(
|
|
147
|
+
return css(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n transition:\n transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),\n opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\n opacity: 1 !important;\n transform: translate(0, 0) !important;\n "], ["\n transition:\n transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),\n opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\n opacity: 1 !important;\n transform: translate(0, 0) !important;\n "])));
|
|
145
148
|
},
|
|
146
149
|
transitionLeave: function () {
|
|
147
|
-
return css(
|
|
150
|
+
return css(templateObject_46 || (templateObject_46 = __makeTemplateObject(["\n opacity: 1;\n "], ["\n opacity: 1;\n "])));
|
|
148
151
|
},
|
|
149
152
|
transitionLeaveActive: function () {
|
|
150
|
-
return css(
|
|
153
|
+
return css(templateObject_47 || (templateObject_47 = __makeTemplateObject(["\n opacity: 0.01 !important;\n transition: opacity 0.15s ease-out;\n "], ["\n opacity: 0.01 !important;\n transition: opacity 0.15s ease-out;\n "])));
|
|
151
154
|
},
|
|
152
155
|
});
|
|
153
156
|
});
|
|
154
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46;
|
|
157
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47;
|
|
155
158
|
//# sourceMappingURL=SidePage.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidePage.styles.js","sourceRoot":"","sources":["SidePage.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { resetButton } from '../../lib/styles/Mixins.js';\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n root() {\n return css`\n height: 100%;\n position: fixed;\n top: 0;\n `;\n },\n\n overlay() {\n return css`\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n `;\n },\n\n body(t: Theme) {\n return css`\n flex: 1 0 auto;\n z-index: 0;\n color: ${t.modalBodyTextColor};\n `;\n },\n\n mobileBody() {\n return css`\n font-size: 16px;\n line-height: 22px;\n `;\n },\n\n container(t: Theme) {\n return css`\n padding-left: ${t.sidePagePaddingLeft};\n padding-right: ${t.sidePagePaddingRight};\n `;\n },\n\n mobileContainer(t: Theme) {\n return css`\n padding-left: ${t.mobileSidePagePaddingLeft};\n padding-right: ${t.mobileSidePagePaddingRight};\n padding-bottom: ${t.mobileSidePagePaddingBottom};\n `;\n },\n\n containerWithoutHeader(t: Theme) {\n return css`\n padding-top: ${t.sidePagePaddingTop};\n `;\n },\n\n mobileContainerWithoutHeader(t: Theme) {\n return css`\n padding-top: ${t.mobileSidePagePaddingTop};\n `;\n },\n\n containerWithoutFooter(t: Theme) {\n return css`\n padding-bottom: ${t.sidePagePaddingBottom};\n `;\n },\n\n containerWithPanel(t: Theme) {\n return css`\n padding-bottom: ${t.sidePagePaddingBottom};\n `;\n },\n\n focusLock() {\n return css`\n height: 100%;\n `;\n },\n\n wrapper(t: Theme) {\n return css`\n background: ${t.sidePageBgDefault};\n float: right;\n height: 100%;\n width: 100%;\n overflow-y: auto;\n position: relative;\n white-space: normal;\n align-items: stretch;\n display: flex;\n flex-direction: column;\n `;\n },\n\n wrapperLeft() {\n return css`\n float: left;\n `;\n },\n\n wrapperMarginLeft() {\n return css`\n margin-left: 20px;\n `;\n },\n\n wrapperMarginRight() {\n return css`\n margin-right: 20px;\n `;\n },\n\n headerWrapper() {\n return css`\n flex: 0 0 auto;\n `;\n },\n\n header(t: Theme) {\n return css`\n font-size: ${t.sidePageHeaderFontSize};\n line-height: ${t.sidePageHeaderLineHeight};\n padding: ${t.sidePageHeaderPaddingTop} 0 ${t.sidePageHeaderPaddingBottom};\n width: 100%;\n position: relative;\n color: ${t.sidePageHeaderTextColor};\n font-weight: ${t.sidePageHeaderFontWeight};\n `;\n },\n\n mobileHeader(t: Theme) {\n return css`\n font-size: ${t.mobileSidePageHeaderFontSize};\n line-height: ${t.mobileSidePageHeaderLineHeight};\n padding: ${t.mobileSidePageHeaderPaddingTop} 0 ${t.mobileSidePageHeaderPaddingBottom};\n `;\n },\n\n headerFixed(t: Theme) {\n return css`\n background: ${t.sidePageBgDefault};\n\n &:after {\n bottom: 0px;\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n left: 0;\n z-index: -1;\n box-shadow: ${t.sidePageFixedHeaderShadow};\n }\n `;\n },\n\n headerNativeStuck(t: Theme) {\n return css`\n position: sticky;\n top: 0;\n z-index: 16000;\n background: linear-gradient(to top, transparent ${t.sidePageHeaderPaddingBottom}, ${t.sidePageBgDefault} 0px);\n `;\n },\n\n title(t: Theme) {\n const paddingRight =\n parseInt(t.sidePageCloseButtonClickAreaLeft) +\n parseInt(t.sidePageCloseIconSize) +\n parseInt(t.sidePageCloseButtonClickAreaRight);\n return css`\n padding-left: ${t.sidePagePaddingLeft};\n padding-right: ${paddingRight}px;\n `;\n },\n\n mobileTitle(t: Theme) {\n const paddingRight = parseInt(t.mobileSidePageCloseButtonPadding) * 2 + parseInt(t.sidePageCloseIconSize);\n return css`\n padding-left: ${t.mobileSidePagePaddingLeft};\n padding-right: ${paddingRight}px;\n `;\n },\n\n titleCut() {\n return css`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n `;\n },\n\n background() {\n return css`\n height: 100%;\n position: absolute;\n width: 100%;\n `;\n },\n\n backgroundGray(t: Theme) {\n return css`\n background: ${t.sidePageBackingBg};\n opacity: ${t.sidePageBackingBgOpacity};\n `;\n },\n\n shadow(t: Theme) {\n return css`\n box-shadow: ${t.sidePageContainerShadow};\n `;\n },\n\n close(t: Theme) {\n return css`\n ${resetButton()};\n cursor: pointer;\n color: ${t.sidePageCloseButtonColor};\n padding-top: ${t.sidePageCloseButtonClickAreaTop};\n margin-top: -${t.sidePageCloseButtonClickAreaTop};\n padding-right: ${t.sidePageCloseButtonClickAreaRight};\n margin-right: -${t.sidePageCloseButtonClickAreaRight};\n padding-bottom: ${t.sidePageCloseButtonClickAreaBottom};\n margin-bottom: -${t.sidePageCloseButtonClickAreaBottom};\n padding-left: ${t.sidePageCloseButtonClickAreaLeft};\n margin-left: -${t.sidePageCloseButtonClickAreaLeft};\n font-size: 0;\n\n &:focus,\n &:hover {\n color: ${t.sidePageCloseButtonHoverColor};\n }\n\n & > svg {\n width: ${t.sidePageCloseIconSize};\n height: ${t.sidePageCloseIconSize};\n box-sizing: content-box;\n }\n `;\n },\n\n closeSticky(t: Theme) {\n return css`\n padding-top: ${t.sidePageCloseButtonFixedClickAreaTop};\n margin-top: -${t.sidePageCloseButtonFixedClickAreaTop};\n padding-bottom: ${t.sidePageCloseButtonFixedClickAreaBottom};\n margin-bottom: -${t.sidePageCloseButtonFixedClickAreaBottom};\n `;\n },\n\n closeMobile(t: Theme) {\n return css`\n padding: ${t.mobileSidePageCloseButtonClickArea};\n margin: -${t.mobileSidePageCloseButtonClickArea};\n font-size: 0;\n `;\n },\n\n closeFocus(t: Theme) {\n return css`\n box-shadow: inset 0 0 0 2px ${t.borderColorFocus};\n border-radius: 4px;\n `;\n },\n\n wrapperClose(t: Theme) {\n return css`\n box-sizing: border-box;\n height: 100%;\n line-height: ${t.sidePageHeaderLineHeight};\n padding: ${t.sidePageHeaderPaddingTop} 0 ${t.sidePageHeaderPaddingBottom};\n position: absolute;\n right: ${t.sidePageCloseButtonClickAreaRight};\n top: ${t.sidePageCloseButtonWrapperOffsetTop};\n `;\n },\n\n mobileWrapperClose(t: Theme) {\n return css`\n line-height: ${t.mobileSidePageHeaderLineHeight};\n padding: ${t.mobileSidePageHeaderPaddingTop} 0 ${t.mobileSidePageHeaderPaddingBottom};\n right: ${t.mobileSidePageCloseButtonPadding};\n `;\n },\n\n panel(t: Theme) {\n return css`\n background: ${t.sidePageFooterPanelBg};\n padding: ${t.sidePageFooterPanelPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPanelPaddingBottom}\n ${t.sidePagePaddingLeft};\n `;\n },\n\n wrapperCloseFixed(t: Theme) {\n return css`\n top: ${t.sidePageCloseButtonWrapperFixedOffsetTop};\n `;\n },\n\n footerWrapper() {\n return css`\n flex: 0 0 auto;\n `;\n },\n\n footer(t: Theme) {\n return css`\n bottom: 0;\n position: fixed;\n z-index: 10;\n color: ${t.sidePageFooterTextColor};\n `;\n },\n\n positionStatic() {\n return css`\n position: static;\n `;\n },\n\n footerContent(t: Theme) {\n return css`\n padding: ${t.sidePageFooterPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPaddingBottom}\n ${t.sidePagePaddingLeft};\n `;\n },\n\n mobileFooterContent(t: Theme) {\n return css`\n display: flex;\n flex-flow: column nowrap;\n padding: ${t.mobileSidePageFooterPadding};\n `;\n },\n\n footerFixed(t: Theme) {\n return css`\n background: ${t.sidePageBgDefault};\n\n &:before {\n top: 0px;\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n left: 0;\n z-index: -1;\n box-shadow: ${t.sidePageFixedFooterShadow};\n }\n `;\n },\n\n panelFixed(t: Theme) {\n return css`\n &:before {\n box-shadow: ${t.sidePageFixedPanelShadow};\n }\n `;\n },\n\n transitionLeft() {\n return css`\n transform: translateX(100px);\n `;\n },\n\n transitionRight() {\n return css`\n transform: translateX(-100px);\n `;\n },\n\n transitionActive() {\n return css`\n transition:\n transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),\n opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\n opacity: 1 !important;\n transform: translate(0, 0) !important;\n `;\n },\n\n transitionLeave() {\n return css`\n opacity: 1;\n `;\n },\n\n transitionLeaveActive() {\n return css`\n opacity: 0.01 !important;\n transition: opacity 0.15s ease-out;\n `;\n },\n}));\n"]}
|
|
1
|
+
{"version":3,"file":"SidePage.styles.js","sourceRoot":"","sources":["SidePage.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { resetButton } from '../../lib/styles/Mixins.js';\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n root() {\n return css`\n height: 100%;\n position: fixed;\n top: 0;\n `;\n },\n\n overlay() {\n return css`\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n `;\n },\n\n body(t: Theme) {\n return css`\n flex: 1 0 auto;\n z-index: 0;\n color: ${t.modalBodyTextColor};\n `;\n },\n\n mobileBody() {\n return css`\n font-size: 16px;\n line-height: 22px;\n `;\n },\n\n container(t: Theme) {\n return css`\n padding-left: ${t.sidePagePaddingLeft};\n padding-right: ${t.sidePagePaddingRight};\n `;\n },\n\n mobileContainer(t: Theme) {\n return css`\n padding-left: ${t.mobileSidePagePaddingLeft};\n padding-right: ${t.mobileSidePagePaddingRight};\n padding-bottom: ${t.mobileSidePagePaddingBottom};\n `;\n },\n\n containerWithoutHeader(t: Theme) {\n return css`\n padding-top: ${t.sidePagePaddingTop};\n `;\n },\n\n mobileContainerWithoutHeader(t: Theme) {\n return css`\n padding-top: ${t.mobileSidePagePaddingTop};\n `;\n },\n\n containerWithoutFooter(t: Theme) {\n return css`\n padding-bottom: ${t.sidePagePaddingBottom};\n `;\n },\n\n containerWithPanel(t: Theme) {\n return css`\n padding-bottom: ${t.sidePagePaddingBottom};\n `;\n },\n\n focusLock() {\n return css`\n height: 100%;\n `;\n },\n\n wrapper(t: Theme) {\n return css`\n background: ${t.sidePageBgDefault};\n float: right;\n height: 100%;\n width: 100%;\n overflow-y: auto;\n position: relative;\n white-space: normal;\n align-items: stretch;\n display: flex;\n flex-direction: column;\n `;\n },\n\n wrapperLeft() {\n return css`\n float: left;\n `;\n },\n\n wrapperMarginLeft() {\n return css`\n margin-left: 20px;\n `;\n },\n\n wrapperMarginRight() {\n return css`\n margin-right: 20px;\n `;\n },\n\n headerWrapper() {\n return css`\n flex: 0 0 auto;\n `;\n },\n\n header(t: Theme) {\n return css`\n font-size: ${t.sidePageHeaderFontSize};\n line-height: ${t.sidePageHeaderLineHeight};\n padding: ${t.sidePageHeaderPaddingTop} 0 ${t.sidePageHeaderPaddingBottom};\n width: 100%;\n position: relative;\n color: ${t.sidePageHeaderTextColor};\n font-weight: ${t.sidePageHeaderFontWeight};\n `;\n },\n\n mobileHeader(t: Theme) {\n return css`\n font-size: ${t.mobileSidePageHeaderFontSize};\n line-height: ${t.mobileSidePageHeaderLineHeight};\n padding: ${t.mobileSidePageHeaderPaddingTop} 0 ${t.mobileSidePageHeaderPaddingBottom};\n `;\n },\n\n headerFixed(t: Theme) {\n return css`\n background: ${t.sidePageBgDefault};\n\n &:after {\n bottom: 0px;\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n left: 0;\n z-index: -1;\n box-shadow: ${t.sidePageFixedHeaderShadow};\n }\n `;\n },\n\n headerNativeStuck(t: Theme) {\n return css`\n position: sticky;\n top: 0;\n z-index: 16000;\n background: linear-gradient(to top, transparent ${t.sidePageHeaderPaddingBottom}, ${t.sidePageBgDefault} 0px);\n `;\n },\n\n title(t: Theme) {\n const paddingRight =\n parseInt(t.sidePageCloseButtonClickAreaLeft) +\n parseInt(t.sidePageCloseIconSize) +\n parseInt(t.sidePageCloseButtonClickAreaRight);\n return css`\n padding-left: ${t.sidePagePaddingLeft};\n padding-right: ${paddingRight}px;\n `;\n },\n\n mobileTitle(t: Theme) {\n const paddingRight = parseInt(t.mobileSidePageCloseButtonPadding) * 2 + parseInt(t.sidePageCloseIconSize);\n return css`\n padding-left: ${t.mobileSidePagePaddingLeft};\n padding-right: ${paddingRight}px;\n `;\n },\n\n titleCut() {\n return css`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n `;\n },\n\n background() {\n return css`\n height: 100%;\n position: absolute;\n width: 100%;\n `;\n },\n\n backgroundGray(t: Theme) {\n return css`\n background: ${t.sidePageBackingBg};\n opacity: ${t.sidePageBackingBgOpacity};\n `;\n },\n\n shadow(t: Theme) {\n return css`\n box-shadow: ${t.sidePageContainerShadow};\n `;\n },\n\n close(t: Theme) {\n return css`\n ${resetButton()};\n cursor: pointer;\n color: ${t.sidePageCloseButtonColor};\n padding-top: ${t.sidePageCloseButtonClickAreaTop};\n margin-top: -${t.sidePageCloseButtonClickAreaTop};\n padding-right: ${t.sidePageCloseButtonClickAreaRight};\n margin-right: -${t.sidePageCloseButtonClickAreaRight};\n padding-bottom: ${t.sidePageCloseButtonClickAreaBottom};\n margin-bottom: -${t.sidePageCloseButtonClickAreaBottom};\n padding-left: ${t.sidePageCloseButtonClickAreaLeft};\n margin-left: -${t.sidePageCloseButtonClickAreaLeft};\n font-size: 0;\n\n &:focus,\n &:hover {\n color: ${t.sidePageCloseButtonHoverColor};\n }\n\n & > svg {\n width: ${t.sidePageCloseIconSize};\n height: ${t.sidePageCloseIconSize};\n box-sizing: content-box;\n }\n `;\n },\n\n closeSticky(t: Theme) {\n return css`\n padding-top: ${t.sidePageCloseButtonFixedClickAreaTop};\n margin-top: -${t.sidePageCloseButtonFixedClickAreaTop};\n padding-bottom: ${t.sidePageCloseButtonFixedClickAreaBottom};\n margin-bottom: -${t.sidePageCloseButtonFixedClickAreaBottom};\n `;\n },\n\n closeMobile(t: Theme) {\n return css`\n padding: ${t.mobileSidePageCloseButtonClickArea};\n margin: -${t.mobileSidePageCloseButtonClickArea};\n font-size: 0;\n `;\n },\n\n closeFocus(t: Theme) {\n return css`\n box-shadow: inset 0 0 0 2px ${t.borderColorFocus};\n border-radius: 4px;\n `;\n },\n\n wrapperClose(t: Theme) {\n return css`\n box-sizing: border-box;\n height: 100%;\n line-height: ${t.sidePageHeaderLineHeight};\n padding: ${t.sidePageHeaderPaddingTop} 0 ${t.sidePageHeaderPaddingBottom};\n position: absolute;\n right: ${t.sidePageCloseButtonClickAreaRight};\n top: ${t.sidePageCloseButtonWrapperOffsetTop};\n `;\n },\n\n wrapperClose6_4() {\n return css`\n height: auto;\n padding-bottom: 0;\n `;\n },\n\n mobileWrapperClose(t: Theme) {\n return css`\n line-height: ${t.mobileSidePageHeaderLineHeight};\n padding: ${t.mobileSidePageHeaderPaddingTop} 0 ${t.mobileSidePageHeaderPaddingBottom};\n right: ${t.mobileSidePageCloseButtonPadding};\n `;\n },\n\n panel(t: Theme) {\n return css`\n background: ${t.sidePageFooterPanelBg};\n padding: ${t.sidePageFooterPanelPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPanelPaddingBottom}\n ${t.sidePagePaddingLeft};\n `;\n },\n\n wrapperCloseFixed(t: Theme) {\n return css`\n top: ${t.sidePageCloseButtonWrapperFixedOffsetTop};\n `;\n },\n\n footerWrapper() {\n return css`\n flex: 0 0 auto;\n `;\n },\n\n footer(t: Theme) {\n return css`\n bottom: 0;\n position: fixed;\n z-index: 10;\n color: ${t.sidePageFooterTextColor};\n `;\n },\n\n positionStatic() {\n return css`\n position: static;\n `;\n },\n\n footerContent(t: Theme) {\n return css`\n padding: ${t.sidePageFooterPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPaddingBottom}\n ${t.sidePagePaddingLeft};\n `;\n },\n\n mobileFooterContent(t: Theme) {\n return css`\n display: flex;\n flex-flow: column nowrap;\n padding: ${t.mobileSidePageFooterPadding};\n `;\n },\n\n footerFixed(t: Theme) {\n return css`\n background: ${t.sidePageBgDefault};\n\n &:before {\n top: 0px;\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n left: 0;\n z-index: -1;\n box-shadow: ${t.sidePageFixedFooterShadow};\n }\n `;\n },\n\n panelFixed(t: Theme) {\n return css`\n &:before {\n box-shadow: ${t.sidePageFixedPanelShadow};\n }\n `;\n },\n\n transitionLeft() {\n return css`\n transform: translateX(100px);\n `;\n },\n\n transitionRight() {\n return css`\n transform: translateX(-100px);\n `;\n },\n\n transitionActive() {\n return css`\n transition:\n transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),\n opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\n opacity: 1 !important;\n transform: translate(0, 0) !important;\n `;\n },\n\n transitionLeave() {\n return css`\n opacity: 1;\n `;\n },\n\n transitionLeaveActive() {\n return css`\n opacity: 0.01 !important;\n transition: opacity 0.15s ease-out;\n `;\n },\n}));\n"]}
|
|
@@ -36,6 +36,7 @@ import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
|
|
|
36
36
|
import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
|
|
37
37
|
import { getRootNode, rootNode } from '../../lib/rootNode/index.js';
|
|
38
38
|
import { ThemeContext } from '../../lib/theming/ThemeContext.js';
|
|
39
|
+
import { isThemeGTE } from '../../lib/theming/ThemeHelpers.js';
|
|
39
40
|
import { isFunction } from '../../lib/utils.js';
|
|
40
41
|
import { ModalSeparator } from '../Modal/ModalSeparator.js';
|
|
41
42
|
import { responsiveLayout } from '../ResponsiveLayout/decorator.js';
|
|
@@ -103,8 +104,10 @@ var SidePageHeader = /** @class */ (function (_super) {
|
|
|
103
104
|
};
|
|
104
105
|
_this.renderClose = function (fixed) {
|
|
105
106
|
var _a;
|
|
107
|
+
var themeGTE6_4 = isThemeGTE(_this.theme, '6.4');
|
|
106
108
|
var stickyOffset = parseInt(_this.theme.sidePageHeaderStickyOffset);
|
|
107
109
|
return (React.createElement("div", { className: _this.cx(_this.styles.wrapperClose(_this.theme), (_a = {},
|
|
110
|
+
_a[_this.styles.wrapperClose6_4()] = themeGTE6_4,
|
|
108
111
|
_a[_this.styles.wrapperCloseFixed(_this.theme)] = fixed,
|
|
109
112
|
_a[_this.styles.mobileWrapperClose(_this.theme)] = _this.isMobileLayout,
|
|
110
113
|
_a)) }, !_this.isMobileLayout ? (React.createElement(Sticky, { side: "top", offset: stickyOffset },
|