@semcore/radio 5.0.4 → 5.0.7
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 +18 -0
- package/README.md +67 -0
- package/lib/cjs/Radio.js +14 -14
- package/lib/cjs/Radio.js.map +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/es6/Radio.js +14 -14
- package/lib/es6/Radio.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/package.json +3 -3
- package/src/Radio.jsx +0 -133
- package/src/index.d.ts +0 -76
- package/src/index.js +0 -2
- package/src/style/radio.shadow.css +0 -120
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,24 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [5.0.7] - 2022-08-11
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.35.1 ~> 3.36.0], `@semcore/flex-box` [4.5.8 ~> 4.5.9], `@semcore/typography` [4.0.11 ~> 4.1.0]).
|
|
10
|
+
|
|
11
|
+
## [5.0.6] - 2022-07-22
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.34.0 ~> 3.35.0], `@semcore/flex-box` [4.5.6 ~> 4.5.7]).
|
|
16
|
+
|
|
17
|
+
## [5.0.5] - 2022-07-07
|
|
18
|
+
|
|
19
|
+
### Changed
|
|
20
|
+
|
|
21
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.33.0 ~> 3.34.0], `@semcore/flex-box` [4.5.5 ~> 4.5.6]).
|
|
22
|
+
|
|
5
23
|
## [5.0.4] - 2022-06-27
|
|
6
24
|
|
|
7
25
|
### Fixed
|
package/README.md
CHANGED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
# @semcore/radio
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/@semcore/radio)
|
|
4
|
+
[](https://www.npmjs.com/package/@semcore/radio)
|
|
5
|
+
[](https://github.com/semrush/intergalactic/blob/master/LICENSE)
|
|
6
|
+
|
|
7
|
+
> This component is part of the Intergalactic design system
|
|
8
|
+
|
|
9
|
+
### 📖 [Component documentation](https://developer.semrush.com/intergalactic/components/radio/)
|
|
10
|
+
|
|
11
|
+
### 🏠 [Design system](https://developer.semrush.com/intergalactic/)
|
|
12
|
+
|
|
13
|
+
## Install
|
|
14
|
+
|
|
15
|
+
```sh
|
|
16
|
+
npm install @semcore/ui
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
```jsx
|
|
22
|
+
import Radio, { RadioGroup } from '@semcore/ui/radio';
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
<details>
|
|
26
|
+
<summary>Alternative installation and use</summary>
|
|
27
|
+
|
|
28
|
+
**We do not recommend this usage path due to possible dependency and update issues.**
|
|
29
|
+
|
|
30
|
+
### Install
|
|
31
|
+
|
|
32
|
+
You can only install one package from the design system
|
|
33
|
+
|
|
34
|
+
```sh
|
|
35
|
+
npm install @semcore/radio @semcore/core
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
`@semcore/core` - _is the basic package by which we create our components, and it contains all of the common logic
|
|
39
|
+
of the components that is discussed below. There should only be one version of the package in the project._
|
|
40
|
+
|
|
41
|
+
### Usage
|
|
42
|
+
|
|
43
|
+
You can use the package the same way but without `/ui/` in the import path.
|
|
44
|
+
|
|
45
|
+
```jsx
|
|
46
|
+
import Radio, { RadioGroup } from '@semcore/radio';
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
</details>
|
|
50
|
+
|
|
51
|
+
## 👤 Author
|
|
52
|
+
|
|
53
|
+
[UI-kit team](https://github.com/semrush/intergalactic/blob/master/MAINTAINERS) and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
|
|
54
|
+
|
|
55
|
+
## 🤝 Contributing
|
|
56
|
+
|
|
57
|
+
Contributions, issues and feature requests are welcome!
|
|
58
|
+
|
|
59
|
+
Feel free to check [issues page](https://github.com/semrush/intergalactic/issues). You can also take a look at the [contributing guide](https://github.com/semrush/intergalactic/blob/master/CONTRIBUTING.md).
|
|
60
|
+
|
|
61
|
+
## Show your support
|
|
62
|
+
|
|
63
|
+
Give a ⭐️ if this project helped you!
|
|
64
|
+
|
|
65
|
+
## 📝 License
|
|
66
|
+
|
|
67
|
+
This project is [MIT](https://github.com/semrush/intergalactic/blob/master/LICENSE) licensed.
|
package/lib/cjs/Radio.js
CHANGED
|
@@ -62,23 +62,23 @@ var style = (
|
|
|
62
62
|
/*__reshadow_css_start__*/
|
|
63
63
|
_core.sstyled.insert(
|
|
64
64
|
/*__inner_css_start__*/
|
|
65
|
-
".
|
|
65
|
+
".___SRadio_zf0jk_gg_{display:inline-flex;align-items:flex-start;cursor:pointer}.___SRadio_zf0jk_gg_.__disabled_zf0jk_gg_{opacity:0.3;cursor:default;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.___SText_zf0jk_gg_{margin-left:8px}.___SText_zf0jk_gg_._size_m_zf0jk_gg_{font-size:14px;line-height:1.42}.___SText_zf0jk_gg_._size_l_zf0jk_gg_{font-size:16px;line-height:1.5}.___SValue_zf0jk_gg_{position:relative;flex-shrink:0;padding:0;outline:none;z-index:0;margin-top:2px}.___SValue_zf0jk_gg_:before{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;background:#fff;border:1px solid;border-radius:50%}.___SValue_zf0jk_gg_:after{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;width:0;height:0;border-radius:50%;background:#fff}.___SValue_zf0jk_gg_._size_m_zf0jk_gg_{width:16px;height:16px}.___SValue_zf0jk_gg_._size_l_zf0jk_gg_{width:20px;height:20px}.___SValue_zf0jk_gg_._state_normal_zf0jk_gg_:before{border-color:#c4c7cf}.___SValue_zf0jk_gg_._state_invalid_zf0jk_gg_:before{border-color:#ff4953}.___SControl_zf0jk_gg_{position:absolute;clip:rect(1px,1px,1px,1px)}.___SControl_zf0jk_gg_:checked~.___SValue_zf0jk_gg_:before{border-color:#008ff8;background-color:#008ff8}.___SControl_zf0jk_gg_:checked~.___SValue_zf0jk_gg_._size_m_zf0jk_gg_:after{width:6px;height:6px}.___SControl_zf0jk_gg_:checked~.___SValue_zf0jk_gg_._size_l_zf0jk_gg_:after{width:8px;height:8px}.___SValue_zf0jk_gg_._state_normal_zf0jk_gg_.__keyboardFocused_zf0jk_gg_:before{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2);border-color:#008ff8}.___SValue_zf0jk_gg_._state_invalid_zf0jk_gg_.__keyboardFocused_zf0jk_gg_:before{box-shadow:0px 0px 0px 3px rgba(255, 73, 83, 0.2)}.___SControl_zf0jk_gg_:checked~.___SValue_zf0jk_gg_.__theme_zf0jk_gg_:before{border-color:var(--theme_zf0jk);background-color:var(--theme_zf0jk)}.___SValue_zf0jk_gg_._state_normal_zf0jk_gg_.__theme_zf0jk_gg_:before{border-color:var(--theme_zf0jk)}"
|
|
66
66
|
/*__inner_css_end__*/
|
|
67
|
-
, "
|
|
67
|
+
, "zf0jk_gg_")
|
|
68
68
|
/*__reshadow_css_end__*/
|
|
69
69
|
, {
|
|
70
|
-
"__SRadio": "
|
|
71
|
-
"_disabled": "
|
|
72
|
-
"__SText": "
|
|
73
|
-
"_size_m": "
|
|
74
|
-
"_size_l": "
|
|
75
|
-
"__SValue": "
|
|
76
|
-
"_state_normal": "
|
|
77
|
-
"_state_invalid": "
|
|
78
|
-
"__SControl": "
|
|
79
|
-
"_keyboardFocused": "
|
|
80
|
-
"_theme": "
|
|
81
|
-
"--theme": "--
|
|
70
|
+
"__SRadio": "___SRadio_zf0jk_gg_",
|
|
71
|
+
"_disabled": "__disabled_zf0jk_gg_",
|
|
72
|
+
"__SText": "___SText_zf0jk_gg_",
|
|
73
|
+
"_size_m": "_size_m_zf0jk_gg_",
|
|
74
|
+
"_size_l": "_size_l_zf0jk_gg_",
|
|
75
|
+
"__SValue": "___SValue_zf0jk_gg_",
|
|
76
|
+
"_state_normal": "_state_normal_zf0jk_gg_",
|
|
77
|
+
"_state_invalid": "_state_invalid_zf0jk_gg_",
|
|
78
|
+
"__SControl": "___SControl_zf0jk_gg_",
|
|
79
|
+
"_keyboardFocused": "__keyboardFocused_zf0jk_gg_",
|
|
80
|
+
"_theme": "__theme_zf0jk_gg_",
|
|
81
|
+
"--theme": "--theme_zf0jk"
|
|
82
82
|
});
|
|
83
83
|
|
|
84
84
|
var RadioGroupRoot = /*#__PURE__*/function (_Component) {
|
package/lib/cjs/Radio.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Radio.js","names":["RadioGroupRoot","value","asProps","theme","size","name","onChange","Children","Component","state","defaultValue","RadioGroup","createComponent","Radio","checked","e","context","props","assignProps","other","undefined","bindHandlerChange","SRadio","Box","styles","sstyled","style","CONTEXT_COMPONENT","Value","target","SValue","SControl","forwardRef","includeInputProps","getInputProps","controlProps","boxProps","resolveColor","inputProps","defaultChecked","keyboardFocusEnhance","Text","SText"],"sources":["../../src/Radio.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, CONTEXT_COMPONENT, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport assignProps from '@semcore/utils/lib/assignProps';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport resolveColor from '@semcore/utils/lib/color';\nimport getInputProps, { inputProps } from '@semcore/utils/lib/inputProps';\n\nimport style from './style/radio.shadow.css';\n\nclass RadioGroupRoot extends Component {\n static displayName = 'RadioGroup';\n\n static defaultProps = {\n state: 'normal',\n size: 'm',\n defaultValue: null,\n };\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n setContext() {\n const { theme, size, name, value, onChange } = this.asProps;\n return {\n onChange,\n value,\n theme,\n size,\n name,\n };\n }\n\n render() {\n const { Children } = this.asProps;\n return <Children />;\n }\n}\n\nconst RadioGroup = createComponent(RadioGroupRoot);\n\nclass Radio extends Component {\n static displayName = 'Radio';\n static style = style;\n static contextType = RadioGroup[CONTEXT_COMPONENT];\n\n bindHandlerChange = (value) => (checked, e) => {\n this.context.onChange(value, e);\n };\n\n getValueProps(props) {\n // The default values are here, since you cannot rewrite out of context\n const { state = 'normal', size = 'm', theme, name } = assignProps(this.props, this.context);\n const { value } = this.context;\n const other = {};\n // if used with the context\n if (value !== undefined) {\n other['checked'] = value === props.value;\n other['onChange'] = this.bindHandlerChange(props.value);\n }\n return {\n ...other,\n state,\n size,\n theme,\n name,\n };\n }\n\n getTextProps() {\n // The default values are here, since you cannot rewrite out of context\n const { size = 'm' } = assignProps(this.props, this.context);\n return {\n size: size,\n };\n }\n\n render() {\n const SRadio = Root;\n const { styles, Children } = this.asProps;\n\n return sstyled(styles)(\n <SRadio render={Box} tag=\"label\">\n <Children />\n </SRadio>,\n );\n }\n}\n\nclass Value extends Component {\n static defaultProps = {\n includeInputProps: inputProps,\n defaultChecked: false,\n };\n static enhance = [keyboardFocusEnhance()];\n static hoistProps = ['disabled'];\n\n uncontrolledProps() {\n return {\n checked: (e) => e.target.checked,\n };\n }\n\n render() {\n const SValue = Box;\n const SControl = Box;\n const { forwardRef, styles, includeInputProps, theme } = this.asProps;\n\n const [controlProps, boxProps] = getInputProps(this.asProps, includeInputProps);\n\n return sstyled(styles)(\n <>\n <SControl tag=\"input\" type=\"radio\" {...controlProps} />\n <SValue ref={forwardRef} use:theme={resolveColor(theme)} {...boxProps} />\n </>,\n );\n }\n}\n\nfunction Text(props) {\n const SText = Root;\n const { styles } = props;\n return sstyled(styles)(<SText render={Box} />);\n}\n\nexport { inputProps, RadioGroup };\nexport default createComponent(Radio, {\n Value,\n Text,\n});\n"],"mappings":"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"}
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './Radio';\nexport * from './Radio';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
|
package/lib/es6/Radio.js
CHANGED
|
@@ -31,23 +31,23 @@ var style = (
|
|
|
31
31
|
/*__reshadow_css_start__*/
|
|
32
32
|
_sstyled.insert(
|
|
33
33
|
/*__inner_css_start__*/
|
|
34
|
-
".
|
|
34
|
+
".___SRadio_zf0jk_gg_{display:inline-flex;align-items:flex-start;cursor:pointer}.___SRadio_zf0jk_gg_.__disabled_zf0jk_gg_{opacity:0.3;cursor:default;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.___SText_zf0jk_gg_{margin-left:8px}.___SText_zf0jk_gg_._size_m_zf0jk_gg_{font-size:14px;line-height:1.42}.___SText_zf0jk_gg_._size_l_zf0jk_gg_{font-size:16px;line-height:1.5}.___SValue_zf0jk_gg_{position:relative;flex-shrink:0;padding:0;outline:none;z-index:0;margin-top:2px}.___SValue_zf0jk_gg_:before{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;background:#fff;border:1px solid;border-radius:50%}.___SValue_zf0jk_gg_:after{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;width:0;height:0;border-radius:50%;background:#fff}.___SValue_zf0jk_gg_._size_m_zf0jk_gg_{width:16px;height:16px}.___SValue_zf0jk_gg_._size_l_zf0jk_gg_{width:20px;height:20px}.___SValue_zf0jk_gg_._state_normal_zf0jk_gg_:before{border-color:#c4c7cf}.___SValue_zf0jk_gg_._state_invalid_zf0jk_gg_:before{border-color:#ff4953}.___SControl_zf0jk_gg_{position:absolute;clip:rect(1px,1px,1px,1px)}.___SControl_zf0jk_gg_:checked~.___SValue_zf0jk_gg_:before{border-color:#008ff8;background-color:#008ff8}.___SControl_zf0jk_gg_:checked~.___SValue_zf0jk_gg_._size_m_zf0jk_gg_:after{width:6px;height:6px}.___SControl_zf0jk_gg_:checked~.___SValue_zf0jk_gg_._size_l_zf0jk_gg_:after{width:8px;height:8px}.___SValue_zf0jk_gg_._state_normal_zf0jk_gg_.__keyboardFocused_zf0jk_gg_:before{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2);border-color:#008ff8}.___SValue_zf0jk_gg_._state_invalid_zf0jk_gg_.__keyboardFocused_zf0jk_gg_:before{box-shadow:0px 0px 0px 3px rgba(255, 73, 83, 0.2)}.___SControl_zf0jk_gg_:checked~.___SValue_zf0jk_gg_.__theme_zf0jk_gg_:before{border-color:var(--theme_zf0jk);background-color:var(--theme_zf0jk)}.___SValue_zf0jk_gg_._state_normal_zf0jk_gg_.__theme_zf0jk_gg_:before{border-color:var(--theme_zf0jk)}"
|
|
35
35
|
/*__inner_css_end__*/
|
|
36
|
-
, "
|
|
36
|
+
, "zf0jk_gg_")
|
|
37
37
|
/*__reshadow_css_end__*/
|
|
38
38
|
, {
|
|
39
|
-
"__SRadio": "
|
|
40
|
-
"_disabled": "
|
|
41
|
-
"__SText": "
|
|
42
|
-
"_size_m": "
|
|
43
|
-
"_size_l": "
|
|
44
|
-
"__SValue": "
|
|
45
|
-
"_state_normal": "
|
|
46
|
-
"_state_invalid": "
|
|
47
|
-
"__SControl": "
|
|
48
|
-
"_keyboardFocused": "
|
|
49
|
-
"_theme": "
|
|
50
|
-
"--theme": "--
|
|
39
|
+
"__SRadio": "___SRadio_zf0jk_gg_",
|
|
40
|
+
"_disabled": "__disabled_zf0jk_gg_",
|
|
41
|
+
"__SText": "___SText_zf0jk_gg_",
|
|
42
|
+
"_size_m": "_size_m_zf0jk_gg_",
|
|
43
|
+
"_size_l": "_size_l_zf0jk_gg_",
|
|
44
|
+
"__SValue": "___SValue_zf0jk_gg_",
|
|
45
|
+
"_state_normal": "_state_normal_zf0jk_gg_",
|
|
46
|
+
"_state_invalid": "_state_invalid_zf0jk_gg_",
|
|
47
|
+
"__SControl": "___SControl_zf0jk_gg_",
|
|
48
|
+
"_keyboardFocused": "__keyboardFocused_zf0jk_gg_",
|
|
49
|
+
"_theme": "__theme_zf0jk_gg_",
|
|
50
|
+
"--theme": "--theme_zf0jk"
|
|
51
51
|
});
|
|
52
52
|
|
|
53
53
|
var RadioGroupRoot = /*#__PURE__*/function (_Component) {
|
package/lib/es6/Radio.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Radio.js","names":["React","createComponent","Component","CONTEXT_COMPONENT","sstyled","Root","Box","assignProps","keyboardFocusEnhance","resolveColor","getInputProps","inputProps","RadioGroupRoot","value","asProps","theme","size","name","onChange","Children","state","defaultValue","RadioGroup","Radio","checked","e","context","props","other","undefined","bindHandlerChange","SRadio","styles","style","Value","target","SValue","SControl","forwardRef","includeInputProps","controlProps","boxProps","defaultChecked","Text","SText"],"sources":["../../src/Radio.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, CONTEXT_COMPONENT, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport assignProps from '@semcore/utils/lib/assignProps';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport resolveColor from '@semcore/utils/lib/color';\nimport getInputProps, { inputProps } from '@semcore/utils/lib/inputProps';\n\nimport style from './style/radio.shadow.css';\n\nclass RadioGroupRoot extends Component {\n static displayName = 'RadioGroup';\n\n static defaultProps = {\n state: 'normal',\n size: 'm',\n defaultValue: null,\n };\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n setContext() {\n const { theme, size, name, value, onChange } = this.asProps;\n return {\n onChange,\n value,\n theme,\n size,\n name,\n };\n }\n\n render() {\n const { Children } = this.asProps;\n return <Children />;\n }\n}\n\nconst RadioGroup = createComponent(RadioGroupRoot);\n\nclass Radio extends Component {\n static displayName = 'Radio';\n static style = style;\n static contextType = RadioGroup[CONTEXT_COMPONENT];\n\n bindHandlerChange = (value) => (checked, e) => {\n this.context.onChange(value, e);\n };\n\n getValueProps(props) {\n // The default values are here, since you cannot rewrite out of context\n const { state = 'normal', size = 'm', theme, name } = assignProps(this.props, this.context);\n const { value } = this.context;\n const other = {};\n // if used with the context\n if (value !== undefined) {\n other['checked'] = value === props.value;\n other['onChange'] = this.bindHandlerChange(props.value);\n }\n return {\n ...other,\n state,\n size,\n theme,\n name,\n };\n }\n\n getTextProps() {\n // The default values are here, since you cannot rewrite out of context\n const { size = 'm' } = assignProps(this.props, this.context);\n return {\n size: size,\n };\n }\n\n render() {\n const SRadio = Root;\n const { styles, Children } = this.asProps;\n\n return sstyled(styles)(\n <SRadio render={Box} tag=\"label\">\n <Children />\n </SRadio>,\n );\n }\n}\n\nclass Value extends Component {\n static defaultProps = {\n includeInputProps: inputProps,\n defaultChecked: false,\n };\n static enhance = [keyboardFocusEnhance()];\n static hoistProps = ['disabled'];\n\n uncontrolledProps() {\n return {\n checked: (e) => e.target.checked,\n };\n }\n\n render() {\n const SValue = Box;\n const SControl = Box;\n const { forwardRef, styles, includeInputProps, theme } = this.asProps;\n\n const [controlProps, boxProps] = getInputProps(this.asProps, includeInputProps);\n\n return sstyled(styles)(\n <>\n <SControl tag=\"input\" type=\"radio\" {...controlProps} />\n <SValue ref={forwardRef} use:theme={resolveColor(theme)} {...boxProps} />\n </>,\n );\n }\n}\n\nfunction Text(props) {\n const SText = Root;\n const { styles } = props;\n return sstyled(styles)(<SText render={Box} />);\n}\n\nexport { inputProps, RadioGroup };\nexport default createComponent(Radio, {\n Value,\n Text,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,eAAP,IAA0BC,SAA1B,EAAqCC,iBAArC,EAAwDC,OAAxD,EAAiEC,IAAjE,QAA6E,eAA7E;AACA,SAASC,GAAT,QAAoB,mBAApB;AACA,OAAOC,WAAP,MAAwB,gCAAxB;AACA,OAAOC,oBAAP,MAAiC,kDAAjC;AACA,OAAOC,YAAP,MAAyB,0BAAzB;AACA,OAAOC,aAAP,IAAwBC,UAAxB,QAA0C,+BAA1C;;;;;;;;;;;;;;;;;;;;;;;;;;IAIMC,c;;;;;;;;;;;;;WASJ,6BAAoB;MAClB,OAAO;QACLC,KAAK,EAAE;MADF,CAAP;IAGD;;;WAED,sBAAa;MACX,oBAA+C,KAAKC,OAApD;MAAA,IAAQC,KAAR,iBAAQA,KAAR;MAAA,IAAeC,IAAf,iBAAeA,IAAf;MAAA,IAAqBC,IAArB,iBAAqBA,IAArB;MAAA,IAA2BJ,KAA3B,iBAA2BA,KAA3B;MAAA,IAAkCK,QAAlC,iBAAkCA,QAAlC;MACA,OAAO;QACLA,QAAQ,EAARA,QADK;QAELL,KAAK,EAALA,KAFK;QAGLE,KAAK,EAALA,KAHK;QAILC,IAAI,EAAJA,IAJK;QAKLC,IAAI,EAAJA;MALK,CAAP;IAOD;;;WAED,kBAAS;MACP,IAAQE,QAAR,GAAqB,KAAKL,OAA1B,CAAQK,QAAR;MACA,oBAAO,oBAAC,QAAD,OAAP;IACD;;;;EA7B0BjB,S;;gBAAvBU,c,iBACiB,Y;;gBADjBA,c,kBAGkB;EACpBQ,KAAK,EAAE,QADa;EAEpBJ,IAAI,EAAE,GAFc;EAGpBK,YAAY,EAAE;AAHM,C;;AA6BxB,IAAMC,UAAU,GAAGrB,eAAe,CAACW,cAAD,CAAlC;;IAEMW,K;;;;;;;;;;;;;;;;wEAKgB,UAACV,KAAD;MAAA,OAAW,UAACW,OAAD,EAAUC,CAAV,EAAgB;QAC7C,MAAKC,OAAL,CAAaR,QAAb,CAAsBL,KAAtB,EAA6BY,CAA7B;MACD,CAFmB;IAAA,C;;;;;;;WAIpB,uBAAcE,KAAd,EAAqB;MACnB;MACA,oBAAsDpB,WAAW,CAAC,KAAKoB,KAAN,EAAa,KAAKD,OAAlB,CAAjE;MAAA,wCAAQN,KAAR;MAAA,IAAQA,KAAR,oCAAgB,QAAhB;MAAA,uCAA0BJ,IAA1B;MAAA,IAA0BA,IAA1B,mCAAiC,GAAjC;MAAA,IAAsCD,KAAtC,iBAAsCA,KAAtC;MAAA,IAA6CE,IAA7C,iBAA6CA,IAA7C;;MACA,IAAQJ,KAAR,GAAkB,KAAKa,OAAvB,CAAQb,KAAR;MACA,IAAMe,KAAK,GAAG,EAAd,CAJmB,CAKnB;;MACA,IAAIf,KAAK,KAAKgB,SAAd,EAAyB;QACvBD,KAAK,CAAC,SAAD,CAAL,GAAmBf,KAAK,KAAKc,KAAK,CAACd,KAAnC;QACAe,KAAK,CAAC,UAAD,CAAL,GAAoB,KAAKE,iBAAL,CAAuBH,KAAK,CAACd,KAA7B,CAApB;MACD;;MACD,uCACKe,KADL;QAEER,KAAK,EAALA,KAFF;QAGEJ,IAAI,EAAJA,IAHF;QAIED,KAAK,EAALA,KAJF;QAKEE,IAAI,EAAJA;MALF;IAOD;;;WAED,wBAAe;MACb;MACA,oBAAuBV,WAAW,CAAC,KAAKoB,KAAN,EAAa,KAAKD,OAAlB,CAAlC;MAAA,uCAAQV,IAAR;MAAA,IAAQA,IAAR,mCAAe,GAAf;;MACA,OAAO;QACLA,IAAI,EAAEA;MADD,CAAP;IAGD;;;WAED,kBAAS;MAAA;MAAA;;MACP,IAAMe,MAAM,GAIMzB,GAJlB;MACA,qBAA6B,KAAKQ,OAAlC;MAAA,IAAQkB,MAAR,kBAAQA,MAAR;MAAA,IAAgBb,QAAhB,kBAAgBA,QAAhB;MAEA,eAAOf,OAAO,CAAC4B,MAAD,CAAd,eACE,oBAAC,MAAD;QAAA,OAAyB;MAAzB,yBACE,oBAAC,QAAD,2BADF,CADF;IAKD;;;;EA7CiB9B,S;;gBAAdqB,K,iBACiB,O;;gBADjBA,K,WAEWU,K;;gBAFXV,K,iBAGiBD,UAAU,CAACnB,iBAAD,C;;IA6C3B+B,K;;;;;;;;;;;;;WAQJ,6BAAoB;MAClB,OAAO;QACLV,OAAO,EAAE,iBAACC,CAAD;UAAA,OAAOA,CAAC,CAACU,MAAF,CAASX,OAAhB;QAAA;MADJ,CAAP;IAGD;;;WAED,kBAAS;MAAA;;MACP,IAAMY,MAAM,GAAG9B,GAAf;MACA,IAAM+B,QAAQ,GAAG/B,GAAjB;MACA,qBAAyD,KAAKQ,OAA9D;MAAA,IAAQwB,UAAR,kBAAQA,UAAR;MAAA,IAAoBN,MAApB,kBAAoBA,MAApB;MAAA,IAA4BO,iBAA5B,kBAA4BA,iBAA5B;MAAA,IAA+CxB,KAA/C,kBAA+CA,KAA/C;;MAEA,qBAAiCL,aAAa,CAAC,KAAKI,OAAN,EAAeyB,iBAAf,CAA9C;MAAA;MAAA,IAAOC,YAAP;MAAA,IAAqBC,QAArB;;MAEA,eAAOrC,OAAO,CAAC4B,MAAD,CAAd,eACE,uDACE,oBAAC,QAAD;QAAA,OAAc,OAAd;QAAA,QAA2B;MAA3B,GAAuCQ,YAAvC,GADF,eAEE,oBAAC,MAAD;QAAA,OAAaF,UAAb;QAAA,aAAoC7B,YAAY,CAACM,KAAD;MAAhD,GAA6D0B,QAA7D,GAFF,CADF;IAMD;;;;EA3BiBvC,S;;gBAAdgC,K,kBACkB;EACpBK,iBAAiB,EAAE5B,UADC;EAEpB+B,cAAc,EAAE;AAFI,C;;gBADlBR,K,aAKa,CAAC1B,oBAAoB,EAArB,C;;gBALb0B,K,gBAMgB,CAAC,UAAD,C;;AAwBtB,SAASS,IAAT,CAAchB,KAAd,EAAqB;EAAA;EAAA;;EACnB,IAAMiB,KAAK,GAE2BtC,GAFtC;EACA,IAAQ0B,MAAR,GAAmBL,KAAnB,CAAQK,MAAR;EACA,eAAO5B,OAAO,CAAC4B,MAAD,CAAd,eAAuB,oBAAC,KAAD,iEAAvB;AACD;;AAED,SAASrB,UAAT,EAAqBW,UAArB;AACA,eAAerB,eAAe,CAACsB,KAAD,EAAQ;EACpCW,KAAK,EAALA,KADoC;EAEpCS,IAAI,EAAJA;AAFoC,CAAR,CAA9B"}
|
package/lib/es6/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './Radio';\nexport * from './Radio';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,SAAxB;AACA,cAAc,SAAd"}
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/radio",
|
|
3
|
-
"description": "
|
|
4
|
-
"version": "5.0.
|
|
3
|
+
"description": "Semrush Radio Component",
|
|
4
|
+
"version": "5.0.7",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
8
8
|
"sideEffects": false,
|
|
9
|
-
"author": "
|
|
9
|
+
"author": "UI-kit team <ui-kit-team@semrush.com>",
|
|
10
10
|
"license": "MIT",
|
|
11
11
|
"scripts": {
|
|
12
12
|
"build": "build --source=js",
|
package/src/Radio.jsx
DELETED
|
@@ -1,133 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import createComponent, { Component, CONTEXT_COMPONENT, sstyled, Root } from '@semcore/core';
|
|
3
|
-
import { Box } from '@semcore/flex-box';
|
|
4
|
-
import assignProps from '@semcore/utils/lib/assignProps';
|
|
5
|
-
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
6
|
-
import resolveColor from '@semcore/utils/lib/color';
|
|
7
|
-
import getInputProps, { inputProps } from '@semcore/utils/lib/inputProps';
|
|
8
|
-
|
|
9
|
-
import style from './style/radio.shadow.css';
|
|
10
|
-
|
|
11
|
-
class RadioGroupRoot extends Component {
|
|
12
|
-
static displayName = 'RadioGroup';
|
|
13
|
-
|
|
14
|
-
static defaultProps = {
|
|
15
|
-
state: 'normal',
|
|
16
|
-
size: 'm',
|
|
17
|
-
defaultValue: null,
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
uncontrolledProps() {
|
|
21
|
-
return {
|
|
22
|
-
value: null,
|
|
23
|
-
};
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
setContext() {
|
|
27
|
-
const { theme, size, name, value, onChange } = this.asProps;
|
|
28
|
-
return {
|
|
29
|
-
onChange,
|
|
30
|
-
value,
|
|
31
|
-
theme,
|
|
32
|
-
size,
|
|
33
|
-
name,
|
|
34
|
-
};
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
render() {
|
|
38
|
-
const { Children } = this.asProps;
|
|
39
|
-
return <Children />;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
const RadioGroup = createComponent(RadioGroupRoot);
|
|
44
|
-
|
|
45
|
-
class Radio extends Component {
|
|
46
|
-
static displayName = 'Radio';
|
|
47
|
-
static style = style;
|
|
48
|
-
static contextType = RadioGroup[CONTEXT_COMPONENT];
|
|
49
|
-
|
|
50
|
-
bindHandlerChange = (value) => (checked, e) => {
|
|
51
|
-
this.context.onChange(value, e);
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
getValueProps(props) {
|
|
55
|
-
// The default values are here, since you cannot rewrite out of context
|
|
56
|
-
const { state = 'normal', size = 'm', theme, name } = assignProps(this.props, this.context);
|
|
57
|
-
const { value } = this.context;
|
|
58
|
-
const other = {};
|
|
59
|
-
// if used with the context
|
|
60
|
-
if (value !== undefined) {
|
|
61
|
-
other['checked'] = value === props.value;
|
|
62
|
-
other['onChange'] = this.bindHandlerChange(props.value);
|
|
63
|
-
}
|
|
64
|
-
return {
|
|
65
|
-
...other,
|
|
66
|
-
state,
|
|
67
|
-
size,
|
|
68
|
-
theme,
|
|
69
|
-
name,
|
|
70
|
-
};
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
getTextProps() {
|
|
74
|
-
// The default values are here, since you cannot rewrite out of context
|
|
75
|
-
const { size = 'm' } = assignProps(this.props, this.context);
|
|
76
|
-
return {
|
|
77
|
-
size: size,
|
|
78
|
-
};
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
render() {
|
|
82
|
-
const SRadio = Root;
|
|
83
|
-
const { styles, Children } = this.asProps;
|
|
84
|
-
|
|
85
|
-
return sstyled(styles)(
|
|
86
|
-
<SRadio render={Box} tag="label">
|
|
87
|
-
<Children />
|
|
88
|
-
</SRadio>,
|
|
89
|
-
);
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
class Value extends Component {
|
|
94
|
-
static defaultProps = {
|
|
95
|
-
includeInputProps: inputProps,
|
|
96
|
-
defaultChecked: false,
|
|
97
|
-
};
|
|
98
|
-
static enhance = [keyboardFocusEnhance()];
|
|
99
|
-
static hoistProps = ['disabled'];
|
|
100
|
-
|
|
101
|
-
uncontrolledProps() {
|
|
102
|
-
return {
|
|
103
|
-
checked: (e) => e.target.checked,
|
|
104
|
-
};
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
render() {
|
|
108
|
-
const SValue = Box;
|
|
109
|
-
const SControl = Box;
|
|
110
|
-
const { forwardRef, styles, includeInputProps, theme } = this.asProps;
|
|
111
|
-
|
|
112
|
-
const [controlProps, boxProps] = getInputProps(this.asProps, includeInputProps);
|
|
113
|
-
|
|
114
|
-
return sstyled(styles)(
|
|
115
|
-
<>
|
|
116
|
-
<SControl tag="input" type="radio" {...controlProps} />
|
|
117
|
-
<SValue ref={forwardRef} use:theme={resolveColor(theme)} {...boxProps} />
|
|
118
|
-
</>,
|
|
119
|
-
);
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
function Text(props) {
|
|
124
|
-
const SText = Root;
|
|
125
|
-
const { styles } = props;
|
|
126
|
-
return sstyled(styles)(<SText render={Box} />);
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
export { inputProps, RadioGroup };
|
|
130
|
-
export default createComponent(Radio, {
|
|
131
|
-
Value,
|
|
132
|
-
Text,
|
|
133
|
-
});
|
package/src/index.d.ts
DELETED
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
|
|
2
|
-
import { IBoxProps } from '@semcore/flex-box';
|
|
3
|
-
import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
4
|
-
import { Text } from '@semcore/typography';
|
|
5
|
-
|
|
6
|
-
export type RadioSize = 'm' | 'l';
|
|
7
|
-
export type RadioState = 'normal' | 'invalid';
|
|
8
|
-
export type RadioValue = string | number | boolean;
|
|
9
|
-
|
|
10
|
-
export interface IRadioProps extends IBoxProps {
|
|
11
|
-
/**
|
|
12
|
-
* The value displaying the state of the component
|
|
13
|
-
* @default normal
|
|
14
|
-
*/
|
|
15
|
-
state?: RadioState;
|
|
16
|
-
/**
|
|
17
|
-
* Radio button size
|
|
18
|
-
* @default m
|
|
19
|
-
**/
|
|
20
|
-
size?: RadioSize;
|
|
21
|
-
/** The theme of the radio button that you can send your color to */
|
|
22
|
-
theme?: string;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
export interface IRadioGroupProps {
|
|
26
|
-
/** Radio group name */
|
|
27
|
-
name?: string;
|
|
28
|
-
/** Active default value */
|
|
29
|
-
defaultValue?: RadioValue;
|
|
30
|
-
/** Active value */
|
|
31
|
-
value?: RadioValue;
|
|
32
|
-
/** Called when the selected element is changed */
|
|
33
|
-
onChange?: (value: RadioValue, e?: React.SyntheticEvent<HTMLInputElement>) => void;
|
|
34
|
-
/** Radio button size */
|
|
35
|
-
size?: RadioSize;
|
|
36
|
-
/** The theme of the radio button that you can send your color to */
|
|
37
|
-
theme?: string;
|
|
38
|
-
/** Blocks access and changes to the form field */
|
|
39
|
-
disabled?: boolean;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
export interface IRadioValueProps extends IBoxProps, IKeyboardFocusProps {
|
|
43
|
-
/** List of elements that can be put on a hidden input */
|
|
44
|
-
includeInputProps?: string[];
|
|
45
|
-
/**
|
|
46
|
-
* The value displaying the state of the component
|
|
47
|
-
* @default normal
|
|
48
|
-
*/
|
|
49
|
-
state?: RadioState;
|
|
50
|
-
/** The theme of the radio button that you can send your color to */
|
|
51
|
-
theme?: string;
|
|
52
|
-
/** Radio button size */
|
|
53
|
-
size?: RadioSize;
|
|
54
|
-
/** The element value is required for RadioGroup */
|
|
55
|
-
value?: RadioValue;
|
|
56
|
-
/** Called when the value changes */
|
|
57
|
-
onChange?: (value: boolean, e?: React.SyntheticEvent<HTMLInputElement>) => void;
|
|
58
|
-
/** Blocks access and changes to the form field */
|
|
59
|
-
disabled?: boolean;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
export interface IRadioCtx {
|
|
63
|
-
getValueProps: PropGetterFn;
|
|
64
|
-
getTextProps: PropGetterFn;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
declare const RadioGroup: <T>(props: CProps<IRadioGroupProps & T>) => ReturnEl;
|
|
68
|
-
|
|
69
|
-
export { RadioGroup };
|
|
70
|
-
|
|
71
|
-
declare const Radio: (<T>(props: CProps<IRadioProps & T, IRadioCtx>) => ReturnEl) & {
|
|
72
|
-
Value: <T>(props: IRadioValueProps & T) => ReturnEl;
|
|
73
|
-
Text: typeof Text;
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
export default Radio;
|
package/src/index.js
DELETED
|
@@ -1,120 +0,0 @@
|
|
|
1
|
-
@import '@semcore/utils/style/var.css';
|
|
2
|
-
|
|
3
|
-
SRadio {
|
|
4
|
-
display: inline-flex;
|
|
5
|
-
align-items: flex-start;
|
|
6
|
-
cursor: pointer;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
SRadio[disabled] {
|
|
10
|
-
opacity: var(--disabled-opacity);
|
|
11
|
-
cursor: default;
|
|
12
|
-
pointer-events: none;
|
|
13
|
-
user-select: none;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
SText {
|
|
17
|
-
margin-left: 8px;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
SText[size='m'] {
|
|
21
|
-
font-size: var(--fs-200);
|
|
22
|
-
line-height: var(--lh-200);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
SText[size='l'] {
|
|
26
|
-
font-size: var(--fs-300);
|
|
27
|
-
line-height: var(--lh-300);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
SValue {
|
|
31
|
-
position: relative;
|
|
32
|
-
flex-shrink: 0;
|
|
33
|
-
padding: 0;
|
|
34
|
-
outline: none;
|
|
35
|
-
z-index: 0;
|
|
36
|
-
|
|
37
|
-
margin-top: 2px;
|
|
38
|
-
|
|
39
|
-
&::before {
|
|
40
|
-
content: '';
|
|
41
|
-
position: absolute;
|
|
42
|
-
top: 0;
|
|
43
|
-
left: 0;
|
|
44
|
-
right: 0;
|
|
45
|
-
bottom: 0;
|
|
46
|
-
background: #fff;
|
|
47
|
-
border: 1px solid;
|
|
48
|
-
border-radius: 50%;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
&::after {
|
|
52
|
-
content: '';
|
|
53
|
-
position: absolute;
|
|
54
|
-
top: 0;
|
|
55
|
-
left: 0;
|
|
56
|
-
right: 0;
|
|
57
|
-
bottom: 0;
|
|
58
|
-
margin: auto;
|
|
59
|
-
width: 0;
|
|
60
|
-
height: 0;
|
|
61
|
-
border-radius: 50%;
|
|
62
|
-
background: #fff;
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
SValue[size='m'] {
|
|
67
|
-
width: 16px;
|
|
68
|
-
height: 16px;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
SValue[size='l'] {
|
|
72
|
-
width: 20px;
|
|
73
|
-
height: 20px;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
SValue[state='normal']::before {
|
|
77
|
-
border-color: var(--gray-200);
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
SValue[state='invalid']::before {
|
|
81
|
-
border-color: var(--red-400);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
SControl {
|
|
85
|
-
position: absolute;
|
|
86
|
-
clip: rect(1px, 1px, 1px, 1px);
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
SControl:checked ~ SValue::before {
|
|
90
|
-
border-color: var(--blue-400);
|
|
91
|
-
background-color: var(--blue-400);
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
SControl:checked ~ SValue[size='m']::after {
|
|
95
|
-
width: 6px;
|
|
96
|
-
height: 6px;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
SControl:checked ~ SValue[size='l']::after {
|
|
100
|
-
width: 8px;
|
|
101
|
-
height: 8px;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
SValue[state='normal'][keyboardFocused]::before {
|
|
105
|
-
box-shadow: var(--keyboard-focus);
|
|
106
|
-
border-color: var(--blue-400);
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
SValue[state='invalid'][keyboardFocused]::before {
|
|
110
|
-
box-shadow: var(--keyboard-focus-invalid);
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
SControl:checked ~ SValue[theme]::before {
|
|
114
|
-
border-color: var(--theme);
|
|
115
|
-
background-color: var(--theme);
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
SValue[state='normal'][theme]::before {
|
|
119
|
-
border-color: var(--theme);
|
|
120
|
-
}
|