@skbkontur/react-ui 6.1.6 → 6.1.7-f9746.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/components/Checkbox/Checkbox.d.ts +5 -0
- package/components/Checkbox/Checkbox.js +42 -21
- package/components/Checkbox/Checkbox.js.map +1 -1
- package/components/Checkbox/Checkbox.mixins.d.ts +2 -0
- package/components/Checkbox/Checkbox.mixins.js +6 -0
- package/components/Checkbox/Checkbox.mixins.js.map +1 -1
- package/components/Checkbox/Checkbox.styles.d.ts +7 -0
- package/components/Checkbox/Checkbox.styles.js +23 -2
- package/components/Checkbox/Checkbox.styles.js.map +1 -1
- package/components/Radio/Radio.d.ts +4 -0
- package/components/Radio/Radio.js +20 -1
- package/components/Radio/Radio.js.map +1 -1
- package/components/Radio/Radio.mixins.d.ts +2 -0
- package/components/Radio/Radio.mixins.js +6 -0
- package/components/Radio/Radio.mixins.js.map +1 -1
- package/components/Radio/Radio.styles.d.ts +6 -0
- package/components/Radio/Radio.styles.js +22 -4
- package/components/Radio/Radio.styles.js.map +1 -1
- package/components/Toggle/Toggle.d.ts +5 -0
- package/components/Toggle/Toggle.js +46 -22
- package/components/Toggle/Toggle.js.map +1 -1
- package/components/Toggle/Toggle.mixins.d.ts +2 -0
- package/components/Toggle/Toggle.mixins.js +6 -0
- package/components/Toggle/Toggle.mixins.js.map +1 -1
- package/components/Toggle/Toggle.styles.d.ts +9 -0
- package/components/Toggle/Toggle.styles.js +29 -2
- package/components/Toggle/Toggle.styles.js.map +1 -1
- package/internal/themes/BasicTheme.d.ts +31 -0
- package/internal/themes/BasicTheme.js +157 -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/package.json +1 -1
|
@@ -29,6 +29,8 @@ export interface CheckboxProps extends CommonProps, Pick<AriaAttributes, 'aria-d
|
|
|
29
29
|
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
30
30
|
/** Устанавливает начальное [неопределенное состояние чекбокса](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-indeterminate). */
|
|
31
31
|
initialIndeterminate?: boolean;
|
|
32
|
+
/** Задаёт второстепенный пояснительный текст под основным текстом чекбокса. */
|
|
33
|
+
comment?: React.ReactNode;
|
|
32
34
|
}> {
|
|
33
35
|
}
|
|
34
36
|
export interface CheckboxState {
|
|
@@ -91,6 +93,9 @@ export declare class Checkbox extends React.PureComponent<CheckboxProps, Checkbo
|
|
|
91
93
|
*/
|
|
92
94
|
resetIndeterminate: () => void;
|
|
93
95
|
private renderMain;
|
|
96
|
+
private getSubcaptionSizeClassName;
|
|
97
|
+
private renderCaption;
|
|
98
|
+
private renderComment;
|
|
94
99
|
private handleFocus;
|
|
95
100
|
private resetFocus;
|
|
96
101
|
private handleBlur;
|
|
@@ -124,8 +124,8 @@ var Checkbox = /** @class */ (function (_super) {
|
|
|
124
124
|
}
|
|
125
125
|
};
|
|
126
126
|
_this.renderMain = function (props) {
|
|
127
|
-
var _a, _b, _c
|
|
128
|
-
var error = props.error, warning = props.warning, size = props.size, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, onMouseOver = props.onMouseOver, onValueChange = props.onValueChange, onClick = props.onClick, type = props.type, initialIndeterminate = props.initialIndeterminate, ariaDescribedby = props["aria-describedby"], ariaLabel = props["aria-label"], rest = __rest(props, ["error", "warning", "size", "onMouseEnter", "onMouseLeave", "onMouseOver", "onValueChange", "onClick", "type", "initialIndeterminate", 'aria-describedby', 'aria-label']);
|
|
127
|
+
var _a, _b, _c;
|
|
128
|
+
var error = props.error, warning = props.warning, size = props.size, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, onMouseOver = props.onMouseOver, onValueChange = props.onValueChange, onClick = props.onClick, type = props.type, initialIndeterminate = props.initialIndeterminate, comment = props.comment, ariaDescribedby = props["aria-describedby"], ariaLabel = props["aria-label"], rest = __rest(props, ["error", "warning", "size", "onMouseEnter", "onMouseLeave", "onMouseOver", "onValueChange", "onClick", "type", "initialIndeterminate", "comment", 'aria-describedby', 'aria-label']);
|
|
129
129
|
var isIndeterminate = _this.state.indeterminate;
|
|
130
130
|
var iconClass = _this.cx(_this.styles.icon(), !_this.props.checked && !isIndeterminate && _this.styles.iconUnchecked());
|
|
131
131
|
var iconSize = parseInt(_this.getCheckboxBoxSize());
|
|
@@ -140,29 +140,24 @@ var Checkbox = /** @class */ (function (_super) {
|
|
|
140
140
|
_a[_this.styles.disabled(_this.theme)] = Boolean(_this.props.disabled),
|
|
141
141
|
_a));
|
|
142
142
|
var inputProps = __assign(__assign({}, rest), { type: 'checkbox', className: _this.styles.input(), onChange: _this.handleChange, onFocus: _this.handleFocus, onBlur: _this.handleBlur, onClick: _this.handleInputClick, ref: _this.input });
|
|
143
|
-
var
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
_c)) },
|
|
154
|
-
React.createElement("div", { className: _this.cx(_this.styles.box(_this.theme), globalClasses.box, (_d = {},
|
|
155
|
-
_d[_this.styles.boxChecked(_this.theme)] = _this.props.checked || isIndeterminate,
|
|
156
|
-
_d[_this.styles.boxFocus(_this.theme)] = _this.state.focusedByTab,
|
|
157
|
-
_d[_this.styles.boxError(_this.theme)] = _this.props.error,
|
|
158
|
-
_d[_this.styles.boxWarning(_this.theme)] = _this.props.warning,
|
|
159
|
-
_d[_this.styles.boxDisabled(_this.theme)] = _this.props.disabled,
|
|
160
|
-
_d)) }, (isIndeterminate && IconSquare) || IconCheck)));
|
|
143
|
+
var box = (React.createElement("div", { className: _this.cx(_this.getBoxWrapperSizeClassName(), (_b = {},
|
|
144
|
+
_b[_this.styles.boxWrapper(_this.theme)] = true,
|
|
145
|
+
_b)) },
|
|
146
|
+
React.createElement("div", { className: _this.cx(_this.styles.box(_this.theme), globalClasses.box, (_c = {},
|
|
147
|
+
_c[_this.styles.boxChecked(_this.theme)] = _this.props.checked || isIndeterminate,
|
|
148
|
+
_c[_this.styles.boxFocus(_this.theme)] = _this.state.focusedByTab,
|
|
149
|
+
_c[_this.styles.boxError(_this.theme)] = _this.props.error,
|
|
150
|
+
_c[_this.styles.boxWarning(_this.theme)] = _this.props.warning,
|
|
151
|
+
_c[_this.styles.boxDisabled(_this.theme)] = _this.props.disabled,
|
|
152
|
+
_c)) }, (isIndeterminate && IconSquare) || IconCheck)));
|
|
161
153
|
return (React.createElement("label", { "data-tid": CheckboxDataTids.root, className: rootClass, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseOver: onMouseOver, onClick: _this.handleLabelClick },
|
|
162
154
|
React.createElement(FocusControlWrapper, { onBlurWhenDisabled: _this.resetFocus },
|
|
163
155
|
React.createElement("input", __assign({}, inputProps, { "aria-label": ariaLabel, "aria-describedby": ariaDescribedby }))),
|
|
164
156
|
box,
|
|
165
|
-
|
|
157
|
+
_this.props.children &&
|
|
158
|
+
(comment ? (React.createElement("div", { className: _this.styles.captionWrapper(_this.theme) },
|
|
159
|
+
_this.renderCaption(Boolean(props.disabled), true),
|
|
160
|
+
_this.renderComment(Boolean(props.disabled)))) : (_this.renderCaption(Boolean(props.disabled), false)))));
|
|
166
161
|
};
|
|
167
162
|
_this.handleFocus = function (e) {
|
|
168
163
|
var _a, _b;
|
|
@@ -268,6 +263,32 @@ var Checkbox = /** @class */ (function (_super) {
|
|
|
268
263
|
var _a;
|
|
269
264
|
(_a = this.input.current) === null || _a === void 0 ? void 0 : _a.blur();
|
|
270
265
|
};
|
|
266
|
+
Checkbox.prototype.getSubcaptionSizeClassName = function () {
|
|
267
|
+
switch (this.size) {
|
|
268
|
+
case 'large':
|
|
269
|
+
return this.styles.subcaptionLarge(this.theme);
|
|
270
|
+
case 'medium':
|
|
271
|
+
return this.styles.subcaptionMedium(this.theme);
|
|
272
|
+
case 'small':
|
|
273
|
+
default:
|
|
274
|
+
return this.styles.subcaptionSmall(this.theme);
|
|
275
|
+
}
|
|
276
|
+
};
|
|
277
|
+
Checkbox.prototype.renderCaption = function (disabled, noGap) {
|
|
278
|
+
var _a;
|
|
279
|
+
var captionClass = this.cx((_a = {},
|
|
280
|
+
_a[this.styles.caption(this.theme)] = true,
|
|
281
|
+
_a[this.styles.disabled(this.theme)] = disabled,
|
|
282
|
+
_a[this.styles.captionNoGap()] = noGap,
|
|
283
|
+
_a));
|
|
284
|
+
return React.createElement("div", { className: captionClass }, this.props.children);
|
|
285
|
+
};
|
|
286
|
+
Checkbox.prototype.renderComment = function (disabled) {
|
|
287
|
+
var _a;
|
|
288
|
+
return (React.createElement("div", { className: this.cx(this.styles.subcaption(this.theme), this.getSubcaptionSizeClassName(), (_a = {},
|
|
289
|
+
_a[this.styles.subcaptionDisabled(this.theme)] = disabled,
|
|
290
|
+
_a)) }, this.props.comment));
|
|
291
|
+
};
|
|
271
292
|
Checkbox.__KONTUR_REACT_UI__ = 'Checkbox';
|
|
272
293
|
Checkbox.displayName = 'Checkbox';
|
|
273
294
|
Checkbox = __decorate([
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["Checkbox.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 { getStyles, globalClasses } from './Checkbox.styles.js';\nimport { CheckedIcon } from './CheckedIcon.js';\nimport { IndeterminateIcon } from './IndeterminateIcon.js';\n\nexport interface CheckboxProps\n extends\n CommonProps,\n Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>,\n Override<\n React.InputHTMLAttributes<HTMLInputElement>,\n {\n /** @ignore */\n children?: React.ReactNode;\n\n /** Переводит контрол в состояние ошибки. */\n error?: boolean;\n\n /** Переводит контрол в состояние предупреждения. */\n warning?: boolean;\n\n /** Размер чекбокса. */\n size?: SizeProp;\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 /** Событие изменения value. */\n onValueChange?: (value: boolean) => void;\n\n /** HTML-событие `onblur`.\n * @ignore */\n onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;\n\n /** Устанавливает начальное [неопределенное состояние чекбокса](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-indeterminate). */\n initialIndeterminate?: boolean;\n }\n > {}\n\nexport interface CheckboxState {\n focusedByTab: boolean;\n indeterminate: boolean;\n isShiftPressed: boolean;\n}\n\nexport const CheckboxDataTids = {\n root: 'Checkbox__root',\n} as const;\n\n/**\n * Чекбокс используется для управления параметром с двумя состояниями.\n */\n@withRenderEnvironment\n@rootNode\n@withSize\nexport class Checkbox extends React.PureComponent<CheckboxProps, CheckboxState> {\n public static __KONTUR_REACT_UI__ = 'Checkbox';\n public static displayName = 'Checkbox';\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 getBoxWrapperSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.boxWrapperLarge(this.theme);\n case 'medium':\n return this.styles.boxWrapperMedium(this.theme);\n case 'small':\n default:\n return this.styles.boxWrapperSmall(this.theme);\n }\n }\n\n private getCheckboxBoxSize() {\n switch (this.size) {\n case 'large':\n return this.theme.checkboxBoxSizeLarge;\n case 'medium':\n return this.theme.checkboxBoxSizeMedium;\n case 'small':\n default:\n return this.theme.checkboxBoxSizeSmall;\n }\n }\n\n public state = {\n focusedByTab: false,\n indeterminate: this.props.initialIndeterminate || false,\n isShiftPressed: false,\n };\n private size!: SizeProp;\n\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 input = React.createRef<HTMLInputElement>();\n private getProps = createPropsGetter({});\n private keyListener!: KeyListener;\n\n private handleShiftPress = (e: KeyboardEvent) => {\n if (e.key === 'Shift') {\n this.setState(() => ({\n isShiftPressed: true,\n }));\n }\n };\n\n private handleShiftRelease = (e: KeyboardEvent) => {\n if (e.key === 'Shift') {\n this.setState({\n isShiftPressed: false,\n });\n }\n };\n\n public componentDidMount = () => {\n this.keyListener = new KeyListener(this.globalObject);\n if (this.state.indeterminate && this.input.current) {\n this.input.current.indeterminate = true;\n }\n\n this.globalObject.document?.addEventListener('keydown', this.handleShiftPress);\n this.globalObject.document?.addEventListener('keyup', this.handleShiftRelease);\n };\n\n public componentWillUnmount = () => {\n this.globalObject.document?.removeEventListener('keydown', this.handleShiftPress);\n this.globalObject.document?.removeEventListener('keyup', this.handleShiftRelease);\n };\n\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n\n public componentDidUpdate(prevProps: CheckboxProps) {\n if (prevProps.checked !== this.props.checked) {\n this.resetIndeterminate();\n }\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 * Программно устанавливает фокус на чекбокс.\n * @public\n */\n public focus(): void {\n this.keyListener.isTabPressed = true;\n this.input.current?.focus();\n }\n\n /**\n * Программно снимает фокус с чекбокса.\n * @public\n */\n public blur(): void {\n this.input.current?.blur();\n }\n\n /**\n * Устанавливает чекбокс в HTML-состояние `indeterminate`.\n * @public\n */\n public setIndeterminate = (): void => {\n this.setState({\n indeterminate: true,\n });\n if (this.input.current) {\n this.input.current.indeterminate = true;\n }\n };\n\n /**\n * Снимает с чекбокса HTML-состояние `indeterminate`.\n * @public\n */\n public resetIndeterminate = (): void => {\n this.setState({\n indeterminate: false,\n });\n if (this.input.current) {\n this.input.current.indeterminate = false;\n }\n };\n\n private renderMain = (props: CommonWrapperRestProps<CheckboxProps>) => {\n const {\n error,\n warning,\n size,\n onMouseEnter,\n onMouseLeave,\n onMouseOver,\n onValueChange,\n onClick,\n type,\n initialIndeterminate,\n 'aria-describedby': ariaDescribedby,\n 'aria-label': ariaLabel,\n ...rest\n } = props;\n const isIndeterminate = this.state.indeterminate;\n\n const iconClass = this.cx(\n this.styles.icon(),\n !this.props.checked && !isIndeterminate && this.styles.iconUnchecked(),\n );\n\n const iconSize = parseInt(this.getCheckboxBoxSize());\n const IconCheck = (\n <span className={iconClass}>\n <CheckedIcon size={iconSize} />\n </span>\n );\n const IconSquare = (\n <span className={iconClass}>\n <IndeterminateIcon size={iconSize} />\n </span>\n );\n\n const rootClass = this.cx(this.getRootSizeClassName(), {\n [this.styles.root(this.theme)]: true,\n [this.styles.rootChecked(this.theme)]: props.checked || isIndeterminate,\n [this.styles.rootDisableTextSelect()]: this.state.isShiftPressed,\n [this.styles.disabled(this.theme)]: Boolean(this.props.disabled),\n });\n\n const inputProps = {\n ...rest,\n type: 'checkbox',\n className: this.styles.input(),\n onChange: this.handleChange,\n onFocus: this.handleFocus,\n onBlur: this.handleBlur,\n onClick: this.handleInputClick,\n ref: this.input,\n };\n\n let caption = null;\n if (this.props.children) {\n const captionClass = this.cx({\n [this.styles.caption(this.theme)]: true,\n [this.styles.disabled(this.theme)]: Boolean(props.disabled),\n });\n caption = <span className={captionClass}>{this.props.children}</span>;\n }\n\n const box = (\n <div\n className={this.cx(this.getBoxWrapperSizeClassName(), {\n [this.styles.boxWrapper(this.theme)]: true,\n })}\n >\n <div\n className={this.cx(this.styles.box(this.theme), globalClasses.box, {\n [this.styles.boxChecked(this.theme)]: this.props.checked || isIndeterminate,\n [this.styles.boxFocus(this.theme)]: this.state.focusedByTab,\n [this.styles.boxError(this.theme)]: this.props.error,\n [this.styles.boxWarning(this.theme)]: this.props.warning,\n [this.styles.boxDisabled(this.theme)]: this.props.disabled,\n })}\n >\n {(isIndeterminate && IconSquare) || IconCheck}\n </div>\n </div>\n );\n\n return (\n <label\n data-tid={CheckboxDataTids.root}\n className={rootClass}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onMouseOver={onMouseOver}\n onClick={this.handleLabelClick}\n >\n <FocusControlWrapper onBlurWhenDisabled={this.resetFocus}>\n <input {...inputProps} aria-label={ariaLabel} aria-describedby={ariaDescribedby} />\n </FocusControlWrapper>\n {box}\n {caption}\n </label>\n );\n };\n\n private handleFocus = (e: React.FocusEvent<any>) => {\n if (!this.props.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.isTabPressed) {\n this.setState({ focusedByTab: true });\n }\n });\n\n if (this.props.onFocus) {\n this.props.onFocus(e);\n }\n }\n };\n\n private resetFocus = () => this.setState({ focusedByTab: false });\n\n private handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n this.resetFocus();\n this.props.onBlur?.(e);\n };\n\n private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n const checked = event.currentTarget.checked;\n this.props.onValueChange?.(checked);\n\n this.resetIndeterminate();\n\n this.props.onChange?.(event);\n };\n\n private handleLabelClick = (e: React.MouseEvent<HTMLLabelElement>) => {\n const handleModifierClickInFirefox = fixFirefoxModifiedClickOnLabel(this.input);\n handleModifierClickInFirefox(e);\n if (this.props.onClick && e.target !== this.input.current) {\n e.stopPropagation();\n }\n };\n\n private handleInputClick = (e: React.MouseEvent<HTMLInputElement>) => {\n this.props.onClick?.(e);\n };\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["Checkbox.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 { getStyles, globalClasses } from './Checkbox.styles.js';\nimport { CheckedIcon } from './CheckedIcon.js';\nimport { IndeterminateIcon } from './IndeterminateIcon.js';\n\nexport interface CheckboxProps\n extends\n CommonProps,\n Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>,\n Override<\n React.InputHTMLAttributes<HTMLInputElement>,\n {\n /** @ignore */\n children?: React.ReactNode;\n\n /** Переводит контрол в состояние ошибки. */\n error?: boolean;\n\n /** Переводит контрол в состояние предупреждения. */\n warning?: boolean;\n\n /** Размер чекбокса. */\n size?: SizeProp;\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 /** Событие изменения value. */\n onValueChange?: (value: boolean) => void;\n\n /** HTML-событие `onblur`.\n * @ignore */\n onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;\n\n /** Устанавливает начальное [неопределенное состояние чекбокса](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-indeterminate). */\n initialIndeterminate?: boolean;\n\n /** Задаёт второстепенный пояснительный текст под основным текстом чекбокса. */\n comment?: React.ReactNode;\n }\n > {}\n\nexport interface CheckboxState {\n focusedByTab: boolean;\n indeterminate: boolean;\n isShiftPressed: boolean;\n}\n\nexport const CheckboxDataTids = {\n root: 'Checkbox__root',\n} as const;\n\n/**\n * Чекбокс используется для управления параметром с двумя состояниями.\n */\n@withRenderEnvironment\n@rootNode\n@withSize\nexport class Checkbox extends React.PureComponent<CheckboxProps, CheckboxState> {\n public static __KONTUR_REACT_UI__ = 'Checkbox';\n public static displayName = 'Checkbox';\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 getBoxWrapperSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.boxWrapperLarge(this.theme);\n case 'medium':\n return this.styles.boxWrapperMedium(this.theme);\n case 'small':\n default:\n return this.styles.boxWrapperSmall(this.theme);\n }\n }\n\n private getCheckboxBoxSize() {\n switch (this.size) {\n case 'large':\n return this.theme.checkboxBoxSizeLarge;\n case 'medium':\n return this.theme.checkboxBoxSizeMedium;\n case 'small':\n default:\n return this.theme.checkboxBoxSizeSmall;\n }\n }\n\n public state = {\n focusedByTab: false,\n indeterminate: this.props.initialIndeterminate || false,\n isShiftPressed: false,\n };\n private size!: SizeProp;\n\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 input = React.createRef<HTMLInputElement>();\n private getProps = createPropsGetter({});\n private keyListener!: KeyListener;\n\n private handleShiftPress = (e: KeyboardEvent) => {\n if (e.key === 'Shift') {\n this.setState(() => ({\n isShiftPressed: true,\n }));\n }\n };\n\n private handleShiftRelease = (e: KeyboardEvent) => {\n if (e.key === 'Shift') {\n this.setState({\n isShiftPressed: false,\n });\n }\n };\n\n public componentDidMount = () => {\n this.keyListener = new KeyListener(this.globalObject);\n if (this.state.indeterminate && this.input.current) {\n this.input.current.indeterminate = true;\n }\n\n this.globalObject.document?.addEventListener('keydown', this.handleShiftPress);\n this.globalObject.document?.addEventListener('keyup', this.handleShiftRelease);\n };\n\n public componentWillUnmount = () => {\n this.globalObject.document?.removeEventListener('keydown', this.handleShiftPress);\n this.globalObject.document?.removeEventListener('keyup', this.handleShiftRelease);\n };\n\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n\n public componentDidUpdate(prevProps: CheckboxProps) {\n if (prevProps.checked !== this.props.checked) {\n this.resetIndeterminate();\n }\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 * Программно устанавливает фокус на чекбокс.\n * @public\n */\n public focus(): void {\n this.keyListener.isTabPressed = true;\n this.input.current?.focus();\n }\n\n /**\n * Программно снимает фокус с чекбокса.\n * @public\n */\n public blur(): void {\n this.input.current?.blur();\n }\n\n /**\n * Устанавливает чекбокс в HTML-состояние `indeterminate`.\n * @public\n */\n public setIndeterminate = (): void => {\n this.setState({\n indeterminate: true,\n });\n if (this.input.current) {\n this.input.current.indeterminate = true;\n }\n };\n\n /**\n * Снимает с чекбокса HTML-состояние `indeterminate`.\n * @public\n */\n public resetIndeterminate = (): void => {\n this.setState({\n indeterminate: false,\n });\n if (this.input.current) {\n this.input.current.indeterminate = false;\n }\n };\n\n private renderMain = (props: CommonWrapperRestProps<CheckboxProps>) => {\n const {\n error,\n warning,\n size,\n onMouseEnter,\n onMouseLeave,\n onMouseOver,\n onValueChange,\n onClick,\n type,\n initialIndeterminate,\n comment,\n 'aria-describedby': ariaDescribedby,\n 'aria-label': ariaLabel,\n ...rest\n } = props;\n const isIndeterminate = this.state.indeterminate;\n\n const iconClass = this.cx(\n this.styles.icon(),\n !this.props.checked && !isIndeterminate && this.styles.iconUnchecked(),\n );\n\n const iconSize = parseInt(this.getCheckboxBoxSize());\n const IconCheck = (\n <span className={iconClass}>\n <CheckedIcon size={iconSize} />\n </span>\n );\n const IconSquare = (\n <span className={iconClass}>\n <IndeterminateIcon size={iconSize} />\n </span>\n );\n\n const rootClass = this.cx(this.getRootSizeClassName(), {\n [this.styles.root(this.theme)]: true,\n [this.styles.rootChecked(this.theme)]: props.checked || isIndeterminate,\n [this.styles.rootDisableTextSelect()]: this.state.isShiftPressed,\n [this.styles.disabled(this.theme)]: Boolean(this.props.disabled),\n });\n\n const inputProps = {\n ...rest,\n type: 'checkbox',\n className: this.styles.input(),\n onChange: this.handleChange,\n onFocus: this.handleFocus,\n onBlur: this.handleBlur,\n onClick: this.handleInputClick,\n ref: this.input,\n };\n\n const box = (\n <div\n className={this.cx(this.getBoxWrapperSizeClassName(), {\n [this.styles.boxWrapper(this.theme)]: true,\n })}\n >\n <div\n className={this.cx(this.styles.box(this.theme), globalClasses.box, {\n [this.styles.boxChecked(this.theme)]: this.props.checked || isIndeterminate,\n [this.styles.boxFocus(this.theme)]: this.state.focusedByTab,\n [this.styles.boxError(this.theme)]: this.props.error,\n [this.styles.boxWarning(this.theme)]: this.props.warning,\n [this.styles.boxDisabled(this.theme)]: this.props.disabled,\n })}\n >\n {(isIndeterminate && IconSquare) || IconCheck}\n </div>\n </div>\n );\n\n return (\n <label\n data-tid={CheckboxDataTids.root}\n className={rootClass}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onMouseOver={onMouseOver}\n onClick={this.handleLabelClick}\n >\n <FocusControlWrapper onBlurWhenDisabled={this.resetFocus}>\n <input {...inputProps} aria-label={ariaLabel} aria-describedby={ariaDescribedby} />\n </FocusControlWrapper>\n {box}\n {this.props.children &&\n (comment ? (\n <div className={this.styles.captionWrapper(this.theme)}>\n {this.renderCaption(Boolean(props.disabled), true)}\n {this.renderComment(Boolean(props.disabled))}\n </div>\n ) : (\n this.renderCaption(Boolean(props.disabled), false)\n ))}\n </label>\n );\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 renderCaption(disabled: boolean, noGap: boolean) {\n const captionClass = this.cx({\n [this.styles.caption(this.theme)]: true,\n [this.styles.disabled(this.theme)]: disabled,\n [this.styles.captionNoGap()]: noGap,\n });\n\n return <div className={captionClass}>{this.props.children}</div>;\n }\n\n private renderComment(disabled: boolean) {\n return (\n <div\n className={this.cx(this.styles.subcaption(this.theme), this.getSubcaptionSizeClassName(), {\n [this.styles.subcaptionDisabled(this.theme)]: disabled,\n })}\n >\n {this.props.comment}\n </div>\n );\n }\n\n private handleFocus = (e: React.FocusEvent<any>) => {\n if (!this.props.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.isTabPressed) {\n this.setState({ focusedByTab: true });\n }\n });\n\n if (this.props.onFocus) {\n this.props.onFocus(e);\n }\n }\n };\n\n private resetFocus = () => this.setState({ focusedByTab: false });\n\n private handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n this.resetFocus();\n this.props.onBlur?.(e);\n };\n\n private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n const checked = event.currentTarget.checked;\n this.props.onValueChange?.(checked);\n\n this.resetIndeterminate();\n\n this.props.onChange?.(event);\n };\n\n private handleLabelClick = (e: React.MouseEvent<HTMLLabelElement>) => {\n const handleModifierClickInFirefox = fixFirefoxModifiedClickOnLabel(this.input);\n handleModifierClickInFirefox(e);\n if (this.props.onClick && e.target !== this.input.current) {\n e.stopPropagation();\n }\n };\n\n private handleInputClick = (e: React.MouseEvent<HTMLInputElement>) => {\n this.props.onClick?.(e);\n };\n}\n"]}
|
|
@@ -1,2 +1,4 @@
|
|
|
1
1
|
export declare const checkboxSizeMixin: (fontSize: string, lineHeight: string, paddingY: string, checkboxBoxSize: string, paddingX: string) => string;
|
|
2
2
|
export declare const boxWrapperSizeMixin: (labGrotesqueBaselineCompensation: string, fontSize: string, checkboxBoxSize: string, checkboxBoxOffsetY: string, checkboxPaddingX: string) => string;
|
|
3
|
+
export declare const subcaptionMixin: (fontSize: string, lineHeight: string) => string;
|
|
4
|
+
export declare const disabledTextColorMixin: (textColor: string) => string;
|
|
@@ -9,4 +9,10 @@ export var boxWrapperSizeMixin = function (labGrotesqueBaselineCompensation, fon
|
|
|
9
9
|
var baselineCompensation = getLabGrotesqueBaselineCompensation(boxFontSize, labGrotesqueCompenstation, isChrome, isFirefox);
|
|
10
10
|
return "\n width: ".concat(checkboxBoxSize, ";\n height: ").concat(checkboxBoxSize, ";\n margin-top: calc(").concat(checkboxBoxOffsetY, " + ").concat(baselineCompensation, "px);\n left: ").concat(checkboxPaddingX, ";\n ");
|
|
11
11
|
};
|
|
12
|
+
export var subcaptionMixin = function (fontSize, lineHeight) {
|
|
13
|
+
return "\n font-size: ".concat(fontSize, ";\n line-height: ").concat(lineHeight, ";\n ");
|
|
14
|
+
};
|
|
15
|
+
export var disabledTextColorMixin = function (textColor) {
|
|
16
|
+
return "\n color: ".concat(textColor, ";\n ");
|
|
17
|
+
};
|
|
12
18
|
//# sourceMappingURL=Checkbox.mixins.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.mixins.js","sourceRoot":"","sources":["Checkbox.mixins.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,mCAAmC,EAAE,MAAM,yDAAyD,CAAC;AAE9G,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAC/B,QAAgB,EAChB,UAAkB,EAClB,QAAgB,EAChB,eAAuB,EACvB,QAAgB;IAEhB,OAAO,6BACU,UAAU,+BACZ,QAAQ,6BACV,QAAQ,cAAI,QAAQ,gDAGpB,eAAe,iBAE3B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,mBAAmB,GAAG,UACjC,gCAAwC,EACxC,QAAgB,EAChB,eAAuB,EACvB,kBAA0B,EAC1B,gBAAwB;IAExB,IAAM,yBAAyB,GAAG,QAAQ,CAAC,gCAAgC,CAAC,CAAC;IAC7E,IAAM,WAAW,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACvC,IAAM,oBAAoB,GAAG,mCAAmC,CAC9D,WAAW,EACX,yBAAyB,EACzB,QAAQ,EACR,SAAS,CACV,CAAC;IAEF,OAAO,uBACI,eAAe,4BACd,eAAe,qCACN,kBAAkB,gBAAM,oBAAoB,6BACvD,gBAAgB,UACzB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { isChrome, isFirefox } from '../../lib/client.js';\nimport { getLabGrotesqueBaselineCompensation } from '../../lib/styles/getLabGrotesqueBaselineCompensation.js';\n\nexport const checkboxSizeMixin = (\n fontSize: string,\n lineHeight: string,\n paddingY: string,\n checkboxBoxSize: string,\n paddingX: string,\n): string => {\n return `\n line-height: ${lineHeight};\n font-size: ${fontSize};\n padding: ${paddingY} ${paddingX};\n\n &::before {\n width: ${checkboxBoxSize};\n }\n `;\n};\n\nexport const boxWrapperSizeMixin = (\n labGrotesqueBaselineCompensation: string,\n fontSize: string,\n checkboxBoxSize: string,\n checkboxBoxOffsetY: string,\n checkboxPaddingX: string,\n): string => {\n const labGrotesqueCompenstation = parseInt(labGrotesqueBaselineCompensation);\n const boxFontSize = parseInt(fontSize);\n const baselineCompensation = getLabGrotesqueBaselineCompensation(\n boxFontSize,\n labGrotesqueCompenstation,\n isChrome,\n isFirefox,\n );\n\n return `\n width: ${checkboxBoxSize};\n height: ${checkboxBoxSize};\n margin-top: calc(${checkboxBoxOffsetY} + ${baselineCompensation}px);\n left: ${checkboxPaddingX};\n `;\n};\n"]}
|
|
1
|
+
{"version":3,"file":"Checkbox.mixins.js","sourceRoot":"","sources":["Checkbox.mixins.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,mCAAmC,EAAE,MAAM,yDAAyD,CAAC;AAE9G,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAC/B,QAAgB,EAChB,UAAkB,EAClB,QAAgB,EAChB,eAAuB,EACvB,QAAgB;IAEhB,OAAO,6BACU,UAAU,+BACZ,QAAQ,6BACV,QAAQ,cAAI,QAAQ,gDAGpB,eAAe,iBAE3B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,mBAAmB,GAAG,UACjC,gCAAwC,EACxC,QAAgB,EAChB,eAAuB,EACvB,kBAA0B,EAC1B,gBAAwB;IAExB,IAAM,yBAAyB,GAAG,QAAQ,CAAC,gCAAgC,CAAC,CAAC;IAC7E,IAAM,WAAW,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACvC,IAAM,oBAAoB,GAAG,mCAAmC,CAC9D,WAAW,EACX,yBAAyB,EACzB,QAAQ,EACR,SAAS,CACV,CAAC;IAEF,OAAO,uBACI,eAAe,4BACd,eAAe,qCACN,kBAAkB,gBAAM,oBAAoB,6BACvD,gBAAgB,UACzB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,QAAgB,EAAE,UAAkB;IAClE,OAAO,2BACQ,QAAQ,iCACN,UAAU,UAC1B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,sBAAsB,GAAG,UAAC,SAAiB;IACtD,OAAO,uBACI,SAAS,UACnB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { isChrome, isFirefox } from '../../lib/client.js';\nimport { getLabGrotesqueBaselineCompensation } from '../../lib/styles/getLabGrotesqueBaselineCompensation.js';\n\nexport const checkboxSizeMixin = (\n fontSize: string,\n lineHeight: string,\n paddingY: string,\n checkboxBoxSize: string,\n paddingX: string,\n): string => {\n return `\n line-height: ${lineHeight};\n font-size: ${fontSize};\n padding: ${paddingY} ${paddingX};\n\n &::before {\n width: ${checkboxBoxSize};\n }\n `;\n};\n\nexport const boxWrapperSizeMixin = (\n labGrotesqueBaselineCompensation: string,\n fontSize: string,\n checkboxBoxSize: string,\n checkboxBoxOffsetY: string,\n checkboxPaddingX: string,\n): string => {\n const labGrotesqueCompenstation = parseInt(labGrotesqueBaselineCompensation);\n const boxFontSize = parseInt(fontSize);\n const baselineCompensation = getLabGrotesqueBaselineCompensation(\n boxFontSize,\n labGrotesqueCompenstation,\n isChrome,\n isFirefox,\n );\n\n return `\n width: ${checkboxBoxSize};\n height: ${checkboxBoxSize};\n margin-top: calc(${checkboxBoxOffsetY} + ${baselineCompensation}px);\n left: ${checkboxPaddingX};\n `;\n};\n\nexport const subcaptionMixin = (fontSize: string, lineHeight: string): string => {\n return `\n font-size: ${fontSize};\n line-height: ${lineHeight};\n `;\n};\n\nexport const disabledTextColorMixin = (textColor: string): string => {\n return `\n color: ${textColor};\n `;\n};\n"]}
|
|
@@ -24,4 +24,11 @@ export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGet
|
|
|
24
24
|
icon(): string;
|
|
25
25
|
iconUnchecked(): string;
|
|
26
26
|
caption(t: Theme): string;
|
|
27
|
+
captionWrapper(t: Theme): string;
|
|
28
|
+
captionNoGap(): string;
|
|
29
|
+
subcaption(t: Theme): string;
|
|
30
|
+
subcaptionDisabled(t: Theme): string;
|
|
31
|
+
subcaptionSmall(t: Theme): string;
|
|
32
|
+
subcaptionMedium(t: Theme): string;
|
|
33
|
+
subcaptionLarge(t: Theme): string;
|
|
27
34
|
}>;
|
|
@@ -3,7 +3,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
3
3
|
return cooked;
|
|
4
4
|
};
|
|
5
5
|
import { memoizeGetStyles, prefix } from '../../lib/theming/Emotion.js';
|
|
6
|
-
import { boxWrapperSizeMixin, checkboxSizeMixin } from './Checkbox.mixins.js';
|
|
6
|
+
import { boxWrapperSizeMixin, checkboxSizeMixin, disabledTextColorMixin, subcaptionMixin } from './Checkbox.mixins.js';
|
|
7
7
|
export var globalClasses = prefix('checkbox')({
|
|
8
8
|
box: 'box',
|
|
9
9
|
});
|
|
@@ -73,7 +73,28 @@ export var getStyles = memoizeGetStyles(function (_a) {
|
|
|
73
73
|
caption: function (t) {
|
|
74
74
|
return css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n color: ", ";\n padding-left: ", ";\n "], ["\n color: ", ";\n padding-left: ", ";\n "])), t.checkboxTextColorDefault, t.checkboxCaptionGap);
|
|
75
75
|
},
|
|
76
|
+
captionWrapper: function (t) {
|
|
77
|
+
return css(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n display: inline-block;\n padding-left: ", ";\n "], ["\n display: inline-block;\n padding-left: ", ";\n "])), t.checkboxCaptionGap);
|
|
78
|
+
},
|
|
79
|
+
captionNoGap: function () {
|
|
80
|
+
return css(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n padding-left: 0;\n "], ["\n padding-left: 0;\n "])));
|
|
81
|
+
},
|
|
82
|
+
subcaption: function (t) {
|
|
83
|
+
return css(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n margin-top: 2px;\n color: ", ";\n "], ["\n margin-top: 2px;\n color: ", ";\n "])), t.checkboxCommentTextColor);
|
|
84
|
+
},
|
|
85
|
+
subcaptionDisabled: function (t) {
|
|
86
|
+
return css(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n ", ";\n "], ["\n ", ";\n "])), disabledTextColorMixin(t.checkboxTextColorDisabled));
|
|
87
|
+
},
|
|
88
|
+
subcaptionSmall: function (t) {
|
|
89
|
+
return css(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n ", ";\n "], ["\n ", ";\n "])), subcaptionMixin(t.checkboxCommentFontSizeSmall, t.checkboxCommentLineHeightSmall));
|
|
90
|
+
},
|
|
91
|
+
subcaptionMedium: function (t) {
|
|
92
|
+
return css(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n ", ";\n "], ["\n ", ";\n "])), subcaptionMixin(t.checkboxCommentFontSizeMedium, t.checkboxCommentLineHeightMedium));
|
|
93
|
+
},
|
|
94
|
+
subcaptionLarge: function (t) {
|
|
95
|
+
return css(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n ", ";\n "], ["\n ", ";\n "])), subcaptionMixin(t.checkboxCommentFontSizeLarge, t.checkboxCommentLineHeightLarge));
|
|
96
|
+
},
|
|
76
97
|
});
|
|
77
98
|
});
|
|
78
|
-
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;
|
|
99
|
+
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;
|
|
79
100
|
//# sourceMappingURL=Checkbox.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.styles.js","sourceRoot":"","sources":["Checkbox.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 { boxWrapperSizeMixin, checkboxSizeMixin } from './Checkbox.mixins.js';\n\nexport const globalClasses = prefix('checkbox')({\n box: 'box',\n});\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n root(t: Theme) {\n return css`\n display: inline-flex;\n align-items: baseline;\n cursor: pointer;\n position: relative;\n\n &::before {\n // non-breaking space.\n // makes a correct space for absolutely positioned box,\n // and also height and baseline for checkbox without caption.\n content: '\\\\00A0';\n display: inline-block;\n flex: 0 0 auto;\n }\n\n .${globalClasses.box} {\n transition:\n background ${t.transitionDuration} ${t.transitionTimingFunction},\n box-shadow ${t.transitionDuration} ${t.transitionTimingFunction};\n }\n\n &:hover .${globalClasses.box} {\n background: ${t.checkboxHoverBg};\n box-shadow: ${t.checkboxShadowHover};\n }\n\n &:active .${globalClasses.box} {\n box-shadow: ${t.checkboxShadowActive};\n background: ${t.checkboxActiveBg};\n }\n `;\n },\n\n rootSmall(t: Theme) {\n return css`\n ${checkboxSizeMixin(\n t.checkboxFontSizeSmall,\n t.checkboxLineHeightSmall,\n t.checkboxPaddingYSmall,\n t.checkboxBoxSizeSmall,\n t.checkboxPaddingXSmall,\n )};\n `;\n },\n\n rootMedium(t: Theme) {\n return css`\n ${checkboxSizeMixin(\n t.checkboxFontSizeMedium,\n t.checkboxLineHeightMedium,\n t.checkboxPaddingYMedium,\n t.checkboxBoxSizeMedium,\n t.checkboxPaddingXMedium,\n )};\n `;\n },\n\n rootLarge(t: Theme) {\n return css`\n ${checkboxSizeMixin(\n t.checkboxFontSizeLarge,\n t.checkboxLineHeightLarge,\n t.checkboxPaddingYLarge,\n t.checkboxBoxSizeLarge,\n t.checkboxPaddingXLarge,\n )};\n `;\n },\n\n rootDisableTextSelect() {\n return css`\n user-select: none;\n `;\n },\n\n rootChecked(t: Theme) {\n return css`\n &:hover .${globalClasses.box} {\n box-shadow: ${t.checkboxCheckedHoverShadow};\n background: ${t.checkboxCheckedHoverBg};\n }\n\n &:active .${globalClasses.box} {\n background: ${t.checkboxCheckedActiveBg};\n box-shadow: ${t.checkboxCheckedActiveShadow};\n }\n `;\n },\n\n boxWrapper(t: Theme) {\n return css`\n position: absolute;\n box-sizing: border-box;\n padding: ${t.checkboxBorderWidth};\n\n display: inline-block; \n )};\n `;\n },\n\n boxWrapperSmall(t: Theme) {\n return css`\n ${boxWrapperSizeMixin(\n t.labGrotesqueBaselineCompensation,\n t.checkboxFontSizeSmall,\n t.checkboxBoxSizeSmall,\n t.checkboxBoxOffsetY,\n t.checkboxPaddingXSmall,\n )};\n `;\n },\n\n boxWrapperMedium(t: Theme) {\n return css`\n ${boxWrapperSizeMixin(\n t.labGrotesqueBaselineCompensation,\n t.checkboxFontSizeMedium,\n t.checkboxBoxSizeMedium,\n t.checkboxBoxOffsetY,\n t.checkboxPaddingXMedium,\n )};\n `;\n },\n\n boxWrapperLarge(t: Theme) {\n return css`\n ${boxWrapperSizeMixin(\n t.labGrotesqueBaselineCompensation,\n t.checkboxFontSizeLarge,\n t.checkboxBoxSizeLarge,\n t.checkboxBoxOffsetY,\n t.checkboxPaddingXLarge,\n )};\n `;\n },\n\n box(t: Theme) {\n return css`\n color: ${t.checkboxTextColorDefault};\n box-shadow: ${t.checkboxShadow};\n background: ${t.checkboxBg};\n border-radius: ${t.checkboxBorderRadius};\n height: 100%;\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 boxWarning(t: Theme) {\n return css`\n box-shadow:\n inset 0 0 0 1px ${t.checkboxOutlineColorFocus},\n 0 0 0 ${t.checkboxOutlineWidth} ${t.checkboxBorderColorWarning} !important; // override hover and active\n `;\n },\n\n boxError(t: Theme) {\n return css`\n box-shadow:\n inset 0 0 0 1px ${t.checkboxOutlineColorFocus},\n 0 0 0 ${t.checkboxOutlineWidth} ${t.checkboxBorderColorError} !important; // override hover and active\n `;\n },\n\n boxChecked(t: Theme) {\n return css`\n background: ${t.checkboxCheckedBg};\n color: ${t.checkboxCheckedColor};\n box-shadow: ${t.checkboxCheckedShadow};\n `;\n },\n\n boxFocus(t: Theme) {\n return css`\n box-shadow:\n inset 0 0 0 1px ${t.checkboxOutlineColorFocus},\n 0 0 0 ${t.checkboxOutlineWidth} ${t.checkboxBorderColorFocus} !important; // override hover and active\n `;\n },\n\n boxDisabled(t: Theme) {\n return css`\n box-shadow: ${t.checkboxShadowDisabled} !important; // override hover and active\n background: ${t.checkboxBgDisabled} !important; // override hover and active\n color: ${t.checkboxTextColorDisabled};\n `;\n },\n\n disabled(t: Theme) {\n return css`\n color: ${t.checkboxTextColorDisabled};\n cursor: default;\n `;\n },\n\n icon() {\n return css`\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n `;\n },\n\n iconUnchecked() {\n return css`\n color: transparent;\n `;\n },\n\n caption(t: Theme) {\n return css`\n color: ${t.checkboxTextColorDefault};\n padding-left: ${t.checkboxCaptionGap};\n `;\n },\n}));\n"]}
|
|
1
|
+
{"version":3,"file":"Checkbox.styles.js","sourceRoot":"","sources":["Checkbox.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 { boxWrapperSizeMixin, checkboxSizeMixin, disabledTextColorMixin, subcaptionMixin } from './Checkbox.mixins.js';\n\nexport const globalClasses = prefix('checkbox')({\n box: 'box',\n});\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n root(t: Theme) {\n return css`\n display: inline-flex;\n align-items: baseline;\n cursor: pointer;\n position: relative;\n\n &::before {\n // non-breaking space.\n // makes a correct space for absolutely positioned box,\n // and also height and baseline for checkbox without caption.\n content: '\\\\00A0';\n display: inline-block;\n flex: 0 0 auto;\n }\n\n .${globalClasses.box} {\n transition:\n background ${t.transitionDuration} ${t.transitionTimingFunction},\n box-shadow ${t.transitionDuration} ${t.transitionTimingFunction};\n }\n\n &:hover .${globalClasses.box} {\n background: ${t.checkboxHoverBg};\n box-shadow: ${t.checkboxShadowHover};\n }\n\n &:active .${globalClasses.box} {\n box-shadow: ${t.checkboxShadowActive};\n background: ${t.checkboxActiveBg};\n }\n `;\n },\n\n rootSmall(t: Theme) {\n return css`\n ${checkboxSizeMixin(\n t.checkboxFontSizeSmall,\n t.checkboxLineHeightSmall,\n t.checkboxPaddingYSmall,\n t.checkboxBoxSizeSmall,\n t.checkboxPaddingXSmall,\n )};\n `;\n },\n\n rootMedium(t: Theme) {\n return css`\n ${checkboxSizeMixin(\n t.checkboxFontSizeMedium,\n t.checkboxLineHeightMedium,\n t.checkboxPaddingYMedium,\n t.checkboxBoxSizeMedium,\n t.checkboxPaddingXMedium,\n )};\n `;\n },\n\n rootLarge(t: Theme) {\n return css`\n ${checkboxSizeMixin(\n t.checkboxFontSizeLarge,\n t.checkboxLineHeightLarge,\n t.checkboxPaddingYLarge,\n t.checkboxBoxSizeLarge,\n t.checkboxPaddingXLarge,\n )};\n `;\n },\n\n rootDisableTextSelect() {\n return css`\n user-select: none;\n `;\n },\n\n rootChecked(t: Theme) {\n return css`\n &:hover .${globalClasses.box} {\n box-shadow: ${t.checkboxCheckedHoverShadow};\n background: ${t.checkboxCheckedHoverBg};\n }\n\n &:active .${globalClasses.box} {\n background: ${t.checkboxCheckedActiveBg};\n box-shadow: ${t.checkboxCheckedActiveShadow};\n }\n `;\n },\n\n boxWrapper(t: Theme) {\n return css`\n position: absolute;\n box-sizing: border-box;\n padding: ${t.checkboxBorderWidth};\n\n display: inline-block; \n )};\n `;\n },\n\n boxWrapperSmall(t: Theme) {\n return css`\n ${boxWrapperSizeMixin(\n t.labGrotesqueBaselineCompensation,\n t.checkboxFontSizeSmall,\n t.checkboxBoxSizeSmall,\n t.checkboxBoxOffsetY,\n t.checkboxPaddingXSmall,\n )};\n `;\n },\n\n boxWrapperMedium(t: Theme) {\n return css`\n ${boxWrapperSizeMixin(\n t.labGrotesqueBaselineCompensation,\n t.checkboxFontSizeMedium,\n t.checkboxBoxSizeMedium,\n t.checkboxBoxOffsetY,\n t.checkboxPaddingXMedium,\n )};\n `;\n },\n\n boxWrapperLarge(t: Theme) {\n return css`\n ${boxWrapperSizeMixin(\n t.labGrotesqueBaselineCompensation,\n t.checkboxFontSizeLarge,\n t.checkboxBoxSizeLarge,\n t.checkboxBoxOffsetY,\n t.checkboxPaddingXLarge,\n )};\n `;\n },\n\n box(t: Theme) {\n return css`\n color: ${t.checkboxTextColorDefault};\n box-shadow: ${t.checkboxShadow};\n background: ${t.checkboxBg};\n border-radius: ${t.checkboxBorderRadius};\n height: 100%;\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 boxWarning(t: Theme) {\n return css`\n box-shadow:\n inset 0 0 0 1px ${t.checkboxOutlineColorFocus},\n 0 0 0 ${t.checkboxOutlineWidth} ${t.checkboxBorderColorWarning} !important; // override hover and active\n `;\n },\n\n boxError(t: Theme) {\n return css`\n box-shadow:\n inset 0 0 0 1px ${t.checkboxOutlineColorFocus},\n 0 0 0 ${t.checkboxOutlineWidth} ${t.checkboxBorderColorError} !important; // override hover and active\n `;\n },\n\n boxChecked(t: Theme) {\n return css`\n background: ${t.checkboxCheckedBg};\n color: ${t.checkboxCheckedColor};\n box-shadow: ${t.checkboxCheckedShadow};\n `;\n },\n\n boxFocus(t: Theme) {\n return css`\n box-shadow:\n inset 0 0 0 1px ${t.checkboxOutlineColorFocus},\n 0 0 0 ${t.checkboxOutlineWidth} ${t.checkboxBorderColorFocus} !important; // override hover and active\n `;\n },\n\n boxDisabled(t: Theme) {\n return css`\n box-shadow: ${t.checkboxShadowDisabled} !important; // override hover and active\n background: ${t.checkboxBgDisabled} !important; // override hover and active\n color: ${t.checkboxTextColorDisabled};\n `;\n },\n\n disabled(t: Theme) {\n return css`\n color: ${t.checkboxTextColorDisabled};\n cursor: default;\n `;\n },\n\n icon() {\n return css`\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n `;\n },\n\n iconUnchecked() {\n return css`\n color: transparent;\n `;\n },\n\n caption(t: Theme) {\n return css`\n color: ${t.checkboxTextColorDefault};\n padding-left: ${t.checkboxCaptionGap};\n `;\n },\n\n captionWrapper(t: Theme) {\n return css`\n display: inline-block;\n padding-left: ${t.checkboxCaptionGap};\n `;\n },\n\n captionNoGap() {\n return css`\n padding-left: 0;\n `;\n },\n\n subcaption(t: Theme) {\n return css`\n margin-top: 2px;\n color: ${t.checkboxCommentTextColor};\n `;\n },\n\n subcaptionDisabled(t: Theme) {\n return css`\n ${disabledTextColorMixin(t.checkboxTextColorDisabled)};\n `;\n },\n\n subcaptionSmall(t: Theme) {\n return css`\n ${subcaptionMixin(t.checkboxCommentFontSizeSmall, t.checkboxCommentLineHeightSmall)};\n `;\n },\n subcaptionMedium(t: Theme) {\n return css`\n ${subcaptionMixin(t.checkboxCommentFontSizeMedium, t.checkboxCommentLineHeightMedium)};\n `;\n },\n subcaptionLarge(t: Theme) {\n return css`\n ${subcaptionMixin(t.checkboxCommentFontSizeLarge, t.checkboxCommentLineHeightLarge)};\n `;\n },\n}));\n"]}
|
|
@@ -27,6 +27,8 @@ export interface RadioProps<T> extends Pick<AriaAttributes, 'aria-label'>, Commo
|
|
|
27
27
|
onMouseOver?: React.MouseEventHandler<HTMLLabelElement>;
|
|
28
28
|
/** Значение. */
|
|
29
29
|
value: T;
|
|
30
|
+
/** Задаёт второстепенный пояснительный текст под основным текстом радиокнопки. */
|
|
31
|
+
comment?: React.ReactNode;
|
|
30
32
|
}> {
|
|
31
33
|
}
|
|
32
34
|
export interface RadioState {
|
|
@@ -76,6 +78,8 @@ export declare class Radio<T> extends React.Component<RadioProps<T>, RadioState>
|
|
|
76
78
|
renderMain: (props: CommonWrapperRestProps<RadioProps<T>>) => React.JSX.Element;
|
|
77
79
|
private _isInRadioGroup;
|
|
78
80
|
private renderCaption;
|
|
81
|
+
private getSubcaptionSizeClassName;
|
|
82
|
+
private renderComment;
|
|
79
83
|
private handleChange;
|
|
80
84
|
private handleMouseOver;
|
|
81
85
|
private handleMouseEnter;
|
|
@@ -120,7 +120,9 @@ var Radio = /** @class */ (function (_super) {
|
|
|
120
120
|
React.createElement("input", __assign({}, inputProps))),
|
|
121
121
|
React.createElement("span", __assign({}, radioProps),
|
|
122
122
|
React.createElement("span", { className: _this.styles.placeholder() })),
|
|
123
|
-
_this.props.children && _this.
|
|
123
|
+
_this.props.children && (React.createElement("div", { className: _this.styles.captionWrapper(_this.theme) },
|
|
124
|
+
_this.renderCaption(),
|
|
125
|
+
_this.props.comment && _this.renderComment()))));
|
|
124
126
|
};
|
|
125
127
|
_this._isInRadioGroup = function () { return Boolean(_this.context.name); };
|
|
126
128
|
_this.handleChange = function (e) {
|
|
@@ -234,6 +236,23 @@ var Radio = /** @class */ (function (_super) {
|
|
|
234
236
|
_a));
|
|
235
237
|
return React.createElement("div", { className: captionClassNames }, this.props.children);
|
|
236
238
|
};
|
|
239
|
+
Radio.prototype.getSubcaptionSizeClassName = function () {
|
|
240
|
+
switch (this.size) {
|
|
241
|
+
case 'large':
|
|
242
|
+
return this.styles.subcaptionLarge(this.theme);
|
|
243
|
+
case 'medium':
|
|
244
|
+
return this.styles.subcaptionMedium(this.theme);
|
|
245
|
+
case 'small':
|
|
246
|
+
default:
|
|
247
|
+
return this.styles.subcaptionSmall(this.theme);
|
|
248
|
+
}
|
|
249
|
+
};
|
|
250
|
+
Radio.prototype.renderComment = function () {
|
|
251
|
+
var _a;
|
|
252
|
+
return (React.createElement("div", { className: this.cx(this.styles.subcaption(this.theme), this.getSubcaptionSizeClassName(), (_a = {},
|
|
253
|
+
_a[this.styles.subcaptionDisabled(this.theme)] = !!(this.props.disabled || this.context.disabled),
|
|
254
|
+
_a)) }, this.props.comment));
|
|
255
|
+
};
|
|
237
256
|
var Radio_1;
|
|
238
257
|
Radio.__KONTUR_REACT_UI__ = 'Radio';
|
|
239
258
|
Radio.displayName = 'Radio';
|
|
@@ -1 +1 @@
|
|
|
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\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 && this.renderCaption()}\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 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 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"]}
|
|
@@ -3,3 +3,5 @@ export declare const circleSizeMixin: (labGrotesqueBaselineCompensation: string,
|
|
|
3
3
|
export declare const radioCheckedMixin: (bulletSize: string) => string;
|
|
4
4
|
export declare const afterOutlineMixin: (radioOutlineWidth: string) => string;
|
|
5
5
|
export declare const outlineColorMixin: (shadow: string, borderColor: string) => string;
|
|
6
|
+
export declare const subcaptionMixin: (fontSize: string, lineHeight: string) => string;
|
|
7
|
+
export declare const disabledTextColorMixin: (textColor: string) => string;
|
|
@@ -21,4 +21,10 @@ export var afterOutlineMixin = function (radioOutlineWidth) {
|
|
|
21
21
|
export var outlineColorMixin = function (shadow, borderColor) {
|
|
22
22
|
return "\n box-shadow: ".concat(shadow, ";\n border-color: ").concat(borderColor, ";\n ");
|
|
23
23
|
};
|
|
24
|
+
export var subcaptionMixin = function (fontSize, lineHeight) {
|
|
25
|
+
return "\n font-size: ".concat(fontSize, ";\n line-height: ").concat(lineHeight, ";\n ");
|
|
26
|
+
};
|
|
27
|
+
export var disabledTextColorMixin = function (textColor) {
|
|
28
|
+
return "\n color: ".concat(textColor, ";\n ");
|
|
29
|
+
};
|
|
24
30
|
//# sourceMappingURL=Radio.mixins.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.mixins.js","sourceRoot":"","sources":["Radio.mixins.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,mCAAmC,EAAE,MAAM,yDAAyD,CAAC;AAE9G,MAAM,CAAC,IAAM,cAAc,GAAG,UAAC,QAAgB,EAAE,UAAkB,EAAE,QAAgB,EAAE,SAAiB;IACtG,OAAO,2BACQ,QAAQ,iCACN,UAAU,6BACd,QAAQ,gDAER,SAAS,iBAErB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,eAAe,GAAG,UAC7B,gCAAwC,EACxC,QAAgB,EAChB,SAAiB,EACjB,4BAAoC,EACpC,kBAA0B;IAE1B,IAAM,yBAAyB,GAAG,QAAQ,CAAC,gCAAgC,CAAC,CAAC;IAC7E,IAAM,aAAa,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAEzC,IAAM,oBAAoB,GAAG,mCAAmC,CAC9D,aAAa,EACb,yBAAyB,EACzB,QAAQ,EACR,SAAS,CACV,CAAC;IACF,IAAM,UAAU,GAAG,eAAQ,SAAS,oBAAU,4BAA4B,MAAG,CAAC;IAC9E,IAAM,aAAa,GAAG,eAAQ,kBAAkB,gBAAM,4BAA4B,gBAAM,oBAAoB,QAAK,CAAC;IAClH,IAAM,aAAa,GAAG,4BAA4B,CAAC;IACnD,OAAO,wBACK,UAAU,2BACX,UAAU,4BACT,aAAa,cAAI,aAAa,YACzC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,UAAkB;IAClD,OAAO,2CAEO,UAAU,6BACX,UAAU,iBAEtB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,iBAAyB;IACzD,OAAO,kEAGG,iBAAiB,6BACd,iBAAiB,2BACnB,iBAAiB,4BAChB,iBAAiB,kCACX,iBAAiB,0FAIlC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,MAAc,EAAE,WAAmB;IACnE,OAAO,4BACS,MAAM,kCACJ,WAAW,UAC5B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { isChrome, isFirefox } from '../../lib/client.js';\nimport { getLabGrotesqueBaselineCompensation } from '../../lib/styles/getLabGrotesqueBaselineCompensation.js';\n\nexport const radioSizeMixin = (fontSize: string, lineHeight: string, paddingY: string, radioSize: string): string => {\n return `\n font-size: ${fontSize};\n line-height: ${lineHeight};\n padding: ${paddingY} 0;\n &::before {\n width: ${radioSize};\n }\n `;\n};\n\nexport const circleSizeMixin = (\n labGrotesqueBaselineCompensation: string,\n fontSize: string,\n radioSize: string,\n radioBorderWidthCompensation: string,\n radioCircleOffsetY: string,\n): string => {\n const labGrotesqueCompenstation = parseInt(labGrotesqueBaselineCompensation);\n const radioFontSize = parseInt(fontSize);\n\n const baselineCompensation = getLabGrotesqueBaselineCompensation(\n radioFontSize,\n labGrotesqueCompenstation,\n isChrome,\n isFirefox,\n );\n const circleSize = `calc(${radioSize} - 2 * ${radioBorderWidthCompensation})`;\n const circleOffsetY = `calc(${radioCircleOffsetY} + ${radioBorderWidthCompensation} + ${baselineCompensation}px)`;\n const circleMarginX = radioBorderWidthCompensation;\n return `\n height: ${circleSize};\n width: ${circleSize};\n margin: ${circleOffsetY} ${circleMarginX} 0;\n `;\n};\n\nexport const radioCheckedMixin = (bulletSize: string): string => {\n return `\n &::before {\n height: ${bulletSize};\n width: ${bulletSize};\n }\n `;\n};\n\nexport const afterOutlineMixin = (radioOutlineWidth: string): string => {\n return `\n content: ' ';\n position: absolute;\n top: -${radioOutlineWidth};\n bottom: -${radioOutlineWidth};\n left: -${radioOutlineWidth};\n right: -${radioOutlineWidth};\n border-width: ${radioOutlineWidth};\n border-style: solid;\n border-radius: 50%;\n box-sizing: border-box;\n `;\n};\n\nexport const outlineColorMixin = (shadow: string, borderColor: string): string => {\n return `\n box-shadow: ${shadow};\n border-color: ${borderColor};\n `;\n};\n"]}
|
|
1
|
+
{"version":3,"file":"Radio.mixins.js","sourceRoot":"","sources":["Radio.mixins.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,mCAAmC,EAAE,MAAM,yDAAyD,CAAC;AAE9G,MAAM,CAAC,IAAM,cAAc,GAAG,UAAC,QAAgB,EAAE,UAAkB,EAAE,QAAgB,EAAE,SAAiB;IACtG,OAAO,2BACQ,QAAQ,iCACN,UAAU,6BACd,QAAQ,gDAER,SAAS,iBAErB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,eAAe,GAAG,UAC7B,gCAAwC,EACxC,QAAgB,EAChB,SAAiB,EACjB,4BAAoC,EACpC,kBAA0B;IAE1B,IAAM,yBAAyB,GAAG,QAAQ,CAAC,gCAAgC,CAAC,CAAC;IAC7E,IAAM,aAAa,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAEzC,IAAM,oBAAoB,GAAG,mCAAmC,CAC9D,aAAa,EACb,yBAAyB,EACzB,QAAQ,EACR,SAAS,CACV,CAAC;IACF,IAAM,UAAU,GAAG,eAAQ,SAAS,oBAAU,4BAA4B,MAAG,CAAC;IAC9E,IAAM,aAAa,GAAG,eAAQ,kBAAkB,gBAAM,4BAA4B,gBAAM,oBAAoB,QAAK,CAAC;IAClH,IAAM,aAAa,GAAG,4BAA4B,CAAC;IACnD,OAAO,wBACK,UAAU,2BACX,UAAU,4BACT,aAAa,cAAI,aAAa,YACzC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,UAAkB;IAClD,OAAO,2CAEO,UAAU,6BACX,UAAU,iBAEtB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,iBAAyB;IACzD,OAAO,kEAGG,iBAAiB,6BACd,iBAAiB,2BACnB,iBAAiB,4BAChB,iBAAiB,kCACX,iBAAiB,0FAIlC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,MAAc,EAAE,WAAmB;IACnE,OAAO,4BACS,MAAM,kCACJ,WAAW,UAC5B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,QAAgB,EAAE,UAAkB;IAClE,OAAO,2BACQ,QAAQ,iCACN,UAAU,UAC1B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,sBAAsB,GAAG,UAAC,SAAiB;IACtD,OAAO,uBACI,SAAS,UACnB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { isChrome, isFirefox } from '../../lib/client.js';\nimport { getLabGrotesqueBaselineCompensation } from '../../lib/styles/getLabGrotesqueBaselineCompensation.js';\n\nexport const radioSizeMixin = (fontSize: string, lineHeight: string, paddingY: string, radioSize: string): string => {\n return `\n font-size: ${fontSize};\n line-height: ${lineHeight};\n padding: ${paddingY} 0;\n &::before {\n width: ${radioSize};\n }\n `;\n};\n\nexport const circleSizeMixin = (\n labGrotesqueBaselineCompensation: string,\n fontSize: string,\n radioSize: string,\n radioBorderWidthCompensation: string,\n radioCircleOffsetY: string,\n): string => {\n const labGrotesqueCompenstation = parseInt(labGrotesqueBaselineCompensation);\n const radioFontSize = parseInt(fontSize);\n\n const baselineCompensation = getLabGrotesqueBaselineCompensation(\n radioFontSize,\n labGrotesqueCompenstation,\n isChrome,\n isFirefox,\n );\n const circleSize = `calc(${radioSize} - 2 * ${radioBorderWidthCompensation})`;\n const circleOffsetY = `calc(${radioCircleOffsetY} + ${radioBorderWidthCompensation} + ${baselineCompensation}px)`;\n const circleMarginX = radioBorderWidthCompensation;\n return `\n height: ${circleSize};\n width: ${circleSize};\n margin: ${circleOffsetY} ${circleMarginX} 0;\n `;\n};\n\nexport const radioCheckedMixin = (bulletSize: string): string => {\n return `\n &::before {\n height: ${bulletSize};\n width: ${bulletSize};\n }\n `;\n};\n\nexport const afterOutlineMixin = (radioOutlineWidth: string): string => {\n return `\n content: ' ';\n position: absolute;\n top: -${radioOutlineWidth};\n bottom: -${radioOutlineWidth};\n left: -${radioOutlineWidth};\n right: -${radioOutlineWidth};\n border-width: ${radioOutlineWidth};\n border-style: solid;\n border-radius: 50%;\n box-sizing: border-box;\n `;\n};\n\nexport const outlineColorMixin = (shadow: string, borderColor: string): string => {\n return `\n box-shadow: ${shadow};\n border-color: ${borderColor};\n `;\n};\n\nexport const subcaptionMixin = (fontSize: string, lineHeight: string): string => {\n return `\n font-size: ${fontSize};\n line-height: ${lineHeight};\n `;\n};\n\nexport const disabledTextColorMixin = (textColor: string): string => {\n return `\n color: ${textColor};\n `;\n};\n"]}
|
|
@@ -25,4 +25,10 @@ export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGet
|
|
|
25
25
|
caption(t: Theme): string;
|
|
26
26
|
captionDisabled(t: Theme): string;
|
|
27
27
|
placeholder(): string;
|
|
28
|
+
captionWrapper(t: Theme): string;
|
|
29
|
+
subcaption(t: Theme): string;
|
|
30
|
+
subcaptionDisabled(t: Theme): string;
|
|
31
|
+
subcaptionSmall(t: Theme): string;
|
|
32
|
+
subcaptionMedium(t: Theme): string;
|
|
33
|
+
subcaptionLarge(t: Theme): string;
|
|
28
34
|
}>;
|