@semcore/pills 4.1.0 → 4.1.3
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 +69 -0
- package/lib/cjs/Pills.js +14 -14
- package/lib/cjs/Pills.js.map +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/es6/Pills.js +14 -14
- package/lib/es6/Pills.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/package.json +2 -2
- package/src/Pills.jsx +0 -81
- package/src/index.d.ts +0 -52
- package/src/index.js +0 -1
- package/src/style/pills.shadow.css +0 -154
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
|
+
## [4.1.3] - 2022-07-22
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- 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], `@semcore/neighbor-location` [2.3.10 ~> 2.3.11]).
|
|
10
|
+
|
|
11
|
+
## [4.1.2] - 2022-07-14
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- Version patch update due to children dependencies update (`@semcore/neighbor-location` [2.3.9 ~> 2.3.10]).
|
|
16
|
+
|
|
17
|
+
## [4.1.1] - 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], `@semcore/neighbor-location` [2.3.8 ~> 2.3.9]).
|
|
22
|
+
|
|
5
23
|
## [4.1.0] - 2022-06-01
|
|
6
24
|
|
|
7
25
|
### Changed
|
package/README.md
CHANGED
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
# @semcore/pills
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/@semcore/pills)
|
|
4
|
+
[](https://www.npmjs.com/package/@semcore/pills)
|
|
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/pills/)
|
|
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 Pills from '@semcore/ui/pills';
|
|
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/pills @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 Pills from '@semcore/pills';
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
</details>
|
|
50
|
+
|
|
51
|
+
## 👤 Author
|
|
52
|
+
|
|
53
|
+
[UI-kit team](https://github.com/semrush/intergalactic/blob/master/MAINTAINERS)
|
|
54
|
+
and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
|
|
55
|
+
|
|
56
|
+
## 🤝 Contributing
|
|
57
|
+
|
|
58
|
+
Contributions, issues and feature requests are welcome!
|
|
59
|
+
|
|
60
|
+
Feel free to check [issues page](https://github.com/semrush/intergalactic/issues). You can also take a look at
|
|
61
|
+
the [contributing guide](https://github.com/semrush/intergalactic/blob/master/CONTRIBUTING.md).
|
|
62
|
+
|
|
63
|
+
## Show your support
|
|
64
|
+
|
|
65
|
+
Give a ⭐️ if this project helped you!
|
|
66
|
+
|
|
67
|
+
## 📝 License
|
|
68
|
+
|
|
69
|
+
This project is [MIT](https://github.com/semrush/intergalactic/blob/master/LICENSE) licensed.
|
package/lib/cjs/Pills.js
CHANGED
|
@@ -52,23 +52,23 @@ var style = (
|
|
|
52
52
|
/*__reshadow_css_start__*/
|
|
53
53
|
_core.sstyled.insert(
|
|
54
54
|
/*__inner_css_start__*/
|
|
55
|
-
".
|
|
55
|
+
".___SPills_b6lww_gg_{display:inline-flex;align-items:center;justify-content:center}.___SPill_b6lww_gg_{display:inline-flex;align-items:center;justify-content:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;background:#ffffff;border:1px solid #c4c7cf;border-radius:6px}.___SPill_b6lww_gg_::-moz-focus-inner{border:none;padding:0}.___SPill_b6lww_gg_:active,.___SPill_b6lww_gg_:focus,.___SPill_b6lww_gg_:hover{outline:0;text-decoration:none}.___SPill_b6lww_gg_:hover{background:rgba(138,142,155,.2)}.___SPill_b6lww_gg_.__selected_b6lww_gg_{background:rgba(0,143,248,.2);border-color:#008ff8;z-index:1}.___SPill_b6lww_gg_.__disabled_b6lww_gg_{cursor:default;pointer-events:none}.___SPill_b6lww_gg_.__disabled_b6lww_gg_>*{opacity:0.3}.___SPill_b6lww_gg_.__keyboardFocused_b6lww_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SText_b6lww_gg_{color:#191b23;display:inline-flex}.___SAddon_b6lww_gg_{color:#6c6e79;display:inline-flex;align-items:center;justify-content:center}.___SPill_b6lww_gg_._size_m_b6lww_gg_{height:28px;min-width:28px;font-size:14px}.___SPill_b6lww_gg_._size_m_b6lww_gg_ .___SText_b6lww_gg_{margin-left:8px;margin-right:8px}.___SPill_b6lww_gg_._size_m_b6lww_gg_ .___SAddon_b6lww_gg_:not(:only-child):first-child{margin-left:8px}.___SPill_b6lww_gg_._size_m_b6lww_gg_ .___SAddon_b6lww_gg_:not(:only-child):last-child{margin-right:8px}.___SPill_b6lww_gg_._size_m_b6lww_gg_ .___SAddon_b6lww_gg_:only-child{margin-left:8px;margin-right:8px}.___SPill_b6lww_gg_._size_l_b6lww_gg_{height:40px;min-width:40px;font-size:16px}.___SPill_b6lww_gg_._size_l_b6lww_gg_ .___SText_b6lww_gg_{margin-left:8px;margin-right:8px}.___SPill_b6lww_gg_._size_l_b6lww_gg_ .___SText_b6lww_gg_:only-child{margin-left:12px;margin-right:12px}.___SPill_b6lww_gg_._size_l_b6lww_gg_ .___SAddon_b6lww_gg_:not(:only-child):first-child{margin-left:12px}.___SPill_b6lww_gg_._size_l_b6lww_gg_ .___SAddon_b6lww_gg_:not(:only-child):last-child{margin-right:12px}.___SPill_b6lww_gg_._size_l_b6lww_gg_ .___SAddon_b6lww_gg_:only-child{margin-left:12px;margin-right:12px}.___SPill_b6lww_gg_._neighborLocation_right_b6lww_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_b6lww_gg_._neighborLocation_both_b6lww_gg_{border-radius:0;margin-left:-1px}.___SPill_b6lww_gg_._neighborLocation_left_b6lww_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}"
|
|
56
56
|
/*__inner_css_end__*/
|
|
57
|
-
, "
|
|
57
|
+
, "b6lww_gg_")
|
|
58
58
|
/*__reshadow_css_end__*/
|
|
59
59
|
, {
|
|
60
|
-
"__SPills": "
|
|
61
|
-
"__SPill": "
|
|
62
|
-
"_selected": "
|
|
63
|
-
"_disabled": "
|
|
64
|
-
"_keyboardFocused": "
|
|
65
|
-
"__SText": "
|
|
66
|
-
"__SAddon": "
|
|
67
|
-
"_size_m": "
|
|
68
|
-
"_size_l": "
|
|
69
|
-
"_neighborLocation_right": "
|
|
70
|
-
"_neighborLocation_both": "
|
|
71
|
-
"_neighborLocation_left": "
|
|
60
|
+
"__SPills": "___SPills_b6lww_gg_",
|
|
61
|
+
"__SPill": "___SPill_b6lww_gg_",
|
|
62
|
+
"_selected": "__selected_b6lww_gg_",
|
|
63
|
+
"_disabled": "__disabled_b6lww_gg_",
|
|
64
|
+
"_keyboardFocused": "__keyboardFocused_b6lww_gg_",
|
|
65
|
+
"__SText": "___SText_b6lww_gg_",
|
|
66
|
+
"__SAddon": "___SAddon_b6lww_gg_",
|
|
67
|
+
"_size_m": "_size_m_b6lww_gg_",
|
|
68
|
+
"_size_l": "_size_l_b6lww_gg_",
|
|
69
|
+
"_neighborLocation_right": "_neighborLocation_right_b6lww_gg_",
|
|
70
|
+
"_neighborLocation_both": "_neighborLocation_both_b6lww_gg_",
|
|
71
|
+
"_neighborLocation_left": "_neighborLocation_left_b6lww_gg_"
|
|
72
72
|
});
|
|
73
73
|
|
|
74
74
|
var RootPills = /*#__PURE__*/function (_Component) {
|
package/lib/cjs/Pills.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Pills.js","names":["RootPills","value","e","handlers","props","asProps","size","disabled","selected","onClick","bindHandlerClick","SPills","Box","Children","styles","controlsLength","sstyled","Component","style","defaultValue","Pill","SPill","addonLeft","addonRight","addonTextChildren","Pills","Item","Text","Addon","enhance","keyboardFocusEnhance","neighborLocationEnhance","SText","SAddon","createComponent"],"sources":["../../src/Pills.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\n\nimport style from './style/pills.shadow.css';\n\nclass RootPills extends Component {\n static displayName = 'Pills';\n static style = style;\n static defaultProps = {\n size: 'm',\n defaultValue: null,\n };\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n bindHandlerClick = (value) => (e) => {\n this.handlers.value(value, e);\n };\n\n getItemProps(props) {\n const { value, size, disabled } = this.asProps;\n return {\n size,\n disabled,\n selected: value === props.value,\n onClick: this.bindHandlerClick(props.value),\n };\n }\n\n render() {\n const SPills = Root;\n const { Children, styles, controlsLength } = this.asProps;\n\n return sstyled(styles)(\n <SPills render={Box}>\n <NeighborLocation controlsLength={controlsLength}>\n <Children />\n </NeighborLocation>\n </SPills>,\n );\n }\n}\n\nfunction Pill(props) {\n const SPill = Root;\n const { Children, styles, addonLeft, addonRight } = props;\n\n return sstyled(styles)(\n <SPill render={Box} type=\"button\" tag=\"button\">\n {addonLeft ? <Pills.Item.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, Pills.Item.Text, Pills.Item.Addon)}\n {addonRight ? <Pills.Item.Addon tag={addonRight} /> : null}\n </SPill>,\n );\n}\n\nPill.enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];\n\nfunction Text(props) {\n const SText = Root;\n return sstyled(props.styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n return sstyled(props.styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nconst Pills = createComponent(RootPills, {\n Item: [Pill, { Text, Addon }],\n});\n\nexport default Pills;\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 './Pills';\n"],"mappings":";;;;;;;;;;;;;;AAAA"}
|
package/lib/es6/Pills.js
CHANGED
|
@@ -31,23 +31,23 @@ var style = (
|
|
|
31
31
|
/*__reshadow_css_start__*/
|
|
32
32
|
_sstyled.insert(
|
|
33
33
|
/*__inner_css_start__*/
|
|
34
|
-
".
|
|
34
|
+
".___SPills_b6lww_gg_{display:inline-flex;align-items:center;justify-content:center}.___SPill_b6lww_gg_{display:inline-flex;align-items:center;justify-content:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;background:#ffffff;border:1px solid #c4c7cf;border-radius:6px}.___SPill_b6lww_gg_::-moz-focus-inner{border:none;padding:0}.___SPill_b6lww_gg_:active,.___SPill_b6lww_gg_:focus,.___SPill_b6lww_gg_:hover{outline:0;text-decoration:none}.___SPill_b6lww_gg_:hover{background:rgba(138,142,155,.2)}.___SPill_b6lww_gg_.__selected_b6lww_gg_{background:rgba(0,143,248,.2);border-color:#008ff8;z-index:1}.___SPill_b6lww_gg_.__disabled_b6lww_gg_{cursor:default;pointer-events:none}.___SPill_b6lww_gg_.__disabled_b6lww_gg_>*{opacity:0.3}.___SPill_b6lww_gg_.__keyboardFocused_b6lww_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SText_b6lww_gg_{color:#191b23;display:inline-flex}.___SAddon_b6lww_gg_{color:#6c6e79;display:inline-flex;align-items:center;justify-content:center}.___SPill_b6lww_gg_._size_m_b6lww_gg_{height:28px;min-width:28px;font-size:14px}.___SPill_b6lww_gg_._size_m_b6lww_gg_ .___SText_b6lww_gg_{margin-left:8px;margin-right:8px}.___SPill_b6lww_gg_._size_m_b6lww_gg_ .___SAddon_b6lww_gg_:not(:only-child):first-child{margin-left:8px}.___SPill_b6lww_gg_._size_m_b6lww_gg_ .___SAddon_b6lww_gg_:not(:only-child):last-child{margin-right:8px}.___SPill_b6lww_gg_._size_m_b6lww_gg_ .___SAddon_b6lww_gg_:only-child{margin-left:8px;margin-right:8px}.___SPill_b6lww_gg_._size_l_b6lww_gg_{height:40px;min-width:40px;font-size:16px}.___SPill_b6lww_gg_._size_l_b6lww_gg_ .___SText_b6lww_gg_{margin-left:8px;margin-right:8px}.___SPill_b6lww_gg_._size_l_b6lww_gg_ .___SText_b6lww_gg_:only-child{margin-left:12px;margin-right:12px}.___SPill_b6lww_gg_._size_l_b6lww_gg_ .___SAddon_b6lww_gg_:not(:only-child):first-child{margin-left:12px}.___SPill_b6lww_gg_._size_l_b6lww_gg_ .___SAddon_b6lww_gg_:not(:only-child):last-child{margin-right:12px}.___SPill_b6lww_gg_._size_l_b6lww_gg_ .___SAddon_b6lww_gg_:only-child{margin-left:12px;margin-right:12px}.___SPill_b6lww_gg_._neighborLocation_right_b6lww_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_b6lww_gg_._neighborLocation_both_b6lww_gg_{border-radius:0;margin-left:-1px}.___SPill_b6lww_gg_._neighborLocation_left_b6lww_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}"
|
|
35
35
|
/*__inner_css_end__*/
|
|
36
|
-
, "
|
|
36
|
+
, "b6lww_gg_")
|
|
37
37
|
/*__reshadow_css_end__*/
|
|
38
38
|
, {
|
|
39
|
-
"__SPills": "
|
|
40
|
-
"__SPill": "
|
|
41
|
-
"_selected": "
|
|
42
|
-
"_disabled": "
|
|
43
|
-
"_keyboardFocused": "
|
|
44
|
-
"__SText": "
|
|
45
|
-
"__SAddon": "
|
|
46
|
-
"_size_m": "
|
|
47
|
-
"_size_l": "
|
|
48
|
-
"_neighborLocation_right": "
|
|
49
|
-
"_neighborLocation_both": "
|
|
50
|
-
"_neighborLocation_left": "
|
|
39
|
+
"__SPills": "___SPills_b6lww_gg_",
|
|
40
|
+
"__SPill": "___SPill_b6lww_gg_",
|
|
41
|
+
"_selected": "__selected_b6lww_gg_",
|
|
42
|
+
"_disabled": "__disabled_b6lww_gg_",
|
|
43
|
+
"_keyboardFocused": "__keyboardFocused_b6lww_gg_",
|
|
44
|
+
"__SText": "___SText_b6lww_gg_",
|
|
45
|
+
"__SAddon": "___SAddon_b6lww_gg_",
|
|
46
|
+
"_size_m": "_size_m_b6lww_gg_",
|
|
47
|
+
"_size_l": "_size_l_b6lww_gg_",
|
|
48
|
+
"_neighborLocation_right": "_neighborLocation_right_b6lww_gg_",
|
|
49
|
+
"_neighborLocation_both": "_neighborLocation_both_b6lww_gg_",
|
|
50
|
+
"_neighborLocation_left": "_neighborLocation_left_b6lww_gg_"
|
|
51
51
|
});
|
|
52
52
|
|
|
53
53
|
var RootPills = /*#__PURE__*/function (_Component) {
|
package/lib/es6/Pills.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Pills.js","names":["React","createComponent","Component","sstyled","Root","Box","NeighborLocation","neighborLocationEnhance","keyboardFocusEnhance","addonTextChildren","RootPills","value","e","handlers","props","asProps","size","disabled","selected","onClick","bindHandlerClick","SPills","Children","styles","controlsLength","style","defaultValue","Pill","SPill","addonLeft","addonRight","Pills","Item","Text","Addon","enhance","SText","SAddon"],"sources":["../../src/Pills.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\n\nimport style from './style/pills.shadow.css';\n\nclass RootPills extends Component {\n static displayName = 'Pills';\n static style = style;\n static defaultProps = {\n size: 'm',\n defaultValue: null,\n };\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n bindHandlerClick = (value) => (e) => {\n this.handlers.value(value, e);\n };\n\n getItemProps(props) {\n const { value, size, disabled } = this.asProps;\n return {\n size,\n disabled,\n selected: value === props.value,\n onClick: this.bindHandlerClick(props.value),\n };\n }\n\n render() {\n const SPills = Root;\n const { Children, styles, controlsLength } = this.asProps;\n\n return sstyled(styles)(\n <SPills render={Box}>\n <NeighborLocation controlsLength={controlsLength}>\n <Children />\n </NeighborLocation>\n </SPills>,\n );\n }\n}\n\nfunction Pill(props) {\n const SPill = Root;\n const { Children, styles, addonLeft, addonRight } = props;\n\n return sstyled(styles)(\n <SPill render={Box} type=\"button\" tag=\"button\">\n {addonLeft ? <Pills.Item.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, Pills.Item.Text, Pills.Item.Addon)}\n {addonRight ? <Pills.Item.Addon tag={addonRight} /> : null}\n </SPill>,\n );\n}\n\nPill.enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];\n\nfunction Text(props) {\n const SText = Root;\n return sstyled(props.styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n return sstyled(props.styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nconst Pills = createComponent(RootPills, {\n Item: [Pill, { Text, Addon }],\n});\n\nexport default Pills;\n"],"mappings":"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"}
|
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 './Pills';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,SAAxB"}
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/pills",
|
|
3
3
|
"description": "SEMRush Pills Component",
|
|
4
|
-
"version": "4.1.
|
|
4
|
+
"version": "4.1.3",
|
|
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/Pills.jsx
DELETED
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
3
|
-
import { Box } from '@semcore/flex-box';
|
|
4
|
-
import NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';
|
|
5
|
-
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
6
|
-
import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
|
|
7
|
-
|
|
8
|
-
import style from './style/pills.shadow.css';
|
|
9
|
-
|
|
10
|
-
class RootPills extends Component {
|
|
11
|
-
static displayName = 'Pills';
|
|
12
|
-
static style = style;
|
|
13
|
-
static defaultProps = {
|
|
14
|
-
size: 'm',
|
|
15
|
-
defaultValue: null,
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
uncontrolledProps() {
|
|
19
|
-
return {
|
|
20
|
-
value: null,
|
|
21
|
-
};
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
bindHandlerClick = (value) => (e) => {
|
|
25
|
-
this.handlers.value(value, e);
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
getItemProps(props) {
|
|
29
|
-
const { value, size, disabled } = this.asProps;
|
|
30
|
-
return {
|
|
31
|
-
size,
|
|
32
|
-
disabled,
|
|
33
|
-
selected: value === props.value,
|
|
34
|
-
onClick: this.bindHandlerClick(props.value),
|
|
35
|
-
};
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
render() {
|
|
39
|
-
const SPills = Root;
|
|
40
|
-
const { Children, styles, controlsLength } = this.asProps;
|
|
41
|
-
|
|
42
|
-
return sstyled(styles)(
|
|
43
|
-
<SPills render={Box}>
|
|
44
|
-
<NeighborLocation controlsLength={controlsLength}>
|
|
45
|
-
<Children />
|
|
46
|
-
</NeighborLocation>
|
|
47
|
-
</SPills>,
|
|
48
|
-
);
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
function Pill(props) {
|
|
53
|
-
const SPill = Root;
|
|
54
|
-
const { Children, styles, addonLeft, addonRight } = props;
|
|
55
|
-
|
|
56
|
-
return sstyled(styles)(
|
|
57
|
-
<SPill render={Box} type="button" tag="button">
|
|
58
|
-
{addonLeft ? <Pills.Item.Addon tag={addonLeft} /> : null}
|
|
59
|
-
{addonTextChildren(Children, Pills.Item.Text, Pills.Item.Addon)}
|
|
60
|
-
{addonRight ? <Pills.Item.Addon tag={addonRight} /> : null}
|
|
61
|
-
</SPill>,
|
|
62
|
-
);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
Pill.enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];
|
|
66
|
-
|
|
67
|
-
function Text(props) {
|
|
68
|
-
const SText = Root;
|
|
69
|
-
return sstyled(props.styles)(<SText render={Box} tag="span" />);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
function Addon(props) {
|
|
73
|
-
const SAddon = Root;
|
|
74
|
-
return sstyled(props.styles)(<SAddon render={Box} tag="span" />);
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
const Pills = createComponent(RootPills, {
|
|
78
|
-
Item: [Pill, { Text, Addon }],
|
|
79
|
-
});
|
|
80
|
-
|
|
81
|
-
export default Pills;
|
package/src/index.d.ts
DELETED
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
|
|
3
|
-
import { Box, IBoxProps } from '@semcore/flex-box';
|
|
4
|
-
import { INeighborItemProps, INeighborLocationProps } from '@semcore/neighbor-location';
|
|
5
|
-
import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
6
|
-
|
|
7
|
-
export type PillsValue = string | number | boolean;
|
|
8
|
-
|
|
9
|
-
export interface IPillsProps<T extends PillsValue = PillsValue> extends INeighborLocationProps {
|
|
10
|
-
/** Pills size */
|
|
11
|
-
size?: 'l' | 'm';
|
|
12
|
-
/** Disabled state */
|
|
13
|
-
disabled?: boolean;
|
|
14
|
-
/** Called when the selection is changed */
|
|
15
|
-
onChange?: (value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void;
|
|
16
|
-
/** Value for the selected pill */
|
|
17
|
-
value?: T;
|
|
18
|
-
/** Default value for the selected pill */
|
|
19
|
-
defaultValue?: T;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
export interface IPillProps extends IBoxProps, INeighborItemProps, IKeyboardFocusProps {
|
|
23
|
-
/** Pill value */
|
|
24
|
-
value?: PillsValue;
|
|
25
|
-
/** Disabled state */
|
|
26
|
-
disabled?: boolean;
|
|
27
|
-
/** Selected state */
|
|
28
|
-
selected?: boolean;
|
|
29
|
-
/** Left addon text */
|
|
30
|
-
addonLeft?: React.ElementType;
|
|
31
|
-
/** Right addon tag */
|
|
32
|
-
addonRight?: React.ElementType;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
export interface IPillsContext {
|
|
36
|
-
getItemProps: PropGetterFn;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
export interface IPillsHandlers {
|
|
40
|
-
value: (value: PillsValue) => void;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
declare const Pills: (<T, V extends PillsValue = PillsValue>(
|
|
44
|
-
props: CProps<IPillsProps<V> & T, IPillsContext, IPillsHandlers>,
|
|
45
|
-
) => ReturnEl) & {
|
|
46
|
-
Item: (<T>(props: CProps<IPillProps & T, {}, IPillsHandlers>) => ReturnEl) & {
|
|
47
|
-
Text: typeof Box;
|
|
48
|
-
Addon: typeof Box;
|
|
49
|
-
};
|
|
50
|
-
};
|
|
51
|
-
|
|
52
|
-
export default Pills;
|
package/src/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './Pills';
|
|
@@ -1,154 +0,0 @@
|
|
|
1
|
-
@import '@semcore/utils/style/var.css';
|
|
2
|
-
|
|
3
|
-
SPills {
|
|
4
|
-
display: inline-flex;
|
|
5
|
-
align-items: center;
|
|
6
|
-
justify-content: center;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
SPill {
|
|
10
|
-
display: inline-flex;
|
|
11
|
-
align-items: center;
|
|
12
|
-
justify-content: center;
|
|
13
|
-
line-height: normal;
|
|
14
|
-
position: relative;
|
|
15
|
-
touch-action: manipulation;
|
|
16
|
-
white-space: nowrap;
|
|
17
|
-
user-select: none;
|
|
18
|
-
box-sizing: border-box;
|
|
19
|
-
padding: 0;
|
|
20
|
-
margin: 0;
|
|
21
|
-
box-shadow: none;
|
|
22
|
-
outline: none;
|
|
23
|
-
text-decoration: none;
|
|
24
|
-
-webkit-tap-highlight-color: transparent;
|
|
25
|
-
overflow: visible;
|
|
26
|
-
outline: 0;
|
|
27
|
-
text-align: center;
|
|
28
|
-
vertical-align: middle;
|
|
29
|
-
font-family: inherit;
|
|
30
|
-
cursor: pointer;
|
|
31
|
-
background: var(--white);
|
|
32
|
-
border: 1px solid var(--gray-200);
|
|
33
|
-
border-radius: var(--rounded-m);
|
|
34
|
-
|
|
35
|
-
&::-moz-focus-inner {
|
|
36
|
-
border: none;
|
|
37
|
-
padding: 0;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
&:active,
|
|
41
|
-
&:hover,
|
|
42
|
-
&:focus {
|
|
43
|
-
outline: 0;
|
|
44
|
-
text-decoration: none;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
&:hover {
|
|
48
|
-
background: color-mod(var(--gray-400) a(20%));
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
SPill[selected] {
|
|
53
|
-
background: color-mod(var(--blue-400) a(20%));
|
|
54
|
-
border-color: var(--blue-400);
|
|
55
|
-
z-index: 1;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
SPill[disabled] {
|
|
59
|
-
cursor: default;
|
|
60
|
-
pointer-events: none; /* Disable link interactions */
|
|
61
|
-
|
|
62
|
-
& > * {
|
|
63
|
-
opacity: var(--disabled-opacity);
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
SPill[keyboardFocused] {
|
|
68
|
-
box-shadow: var(--keyboard-focus);
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
SText {
|
|
72
|
-
color: var(--gray-800);
|
|
73
|
-
display: inline-flex;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
SAddon {
|
|
77
|
-
color: var(--gray-500);
|
|
78
|
-
display: inline-flex;
|
|
79
|
-
align-items: center;
|
|
80
|
-
justify-content: center;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
SPill[size='m'] {
|
|
84
|
-
height: var(--form-control-m);
|
|
85
|
-
min-width: var(--form-control-m);
|
|
86
|
-
font-size: var(--fs-200);
|
|
87
|
-
|
|
88
|
-
& SText {
|
|
89
|
-
margin-left: 8px;
|
|
90
|
-
margin-right: 8px;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
& SAddon {
|
|
94
|
-
&:not(:only-child):first-child {
|
|
95
|
-
margin-left: 8px;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
&:not(:only-child):last-child {
|
|
99
|
-
margin-right: 8px;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
&:only-child {
|
|
103
|
-
margin-left: 8px;
|
|
104
|
-
margin-right: 8px;
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
SPill[size='l'] {
|
|
110
|
-
height: var(--form-control-l);
|
|
111
|
-
min-width: var(--form-control-l);
|
|
112
|
-
font-size: var(--fs-300);
|
|
113
|
-
|
|
114
|
-
& SText {
|
|
115
|
-
margin-left: 8px;
|
|
116
|
-
margin-right: 8px;
|
|
117
|
-
|
|
118
|
-
&:only-child {
|
|
119
|
-
margin-left: 12px;
|
|
120
|
-
margin-right: 12px;
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
& SAddon {
|
|
125
|
-
&:not(:only-child):first-child {
|
|
126
|
-
margin-left: 12px;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
&:not(:only-child):last-child {
|
|
130
|
-
margin-right: 12px;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
&:only-child {
|
|
134
|
-
margin-left: 12px;
|
|
135
|
-
margin-right: 12px;
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
SPill[neighborLocation='right'] {
|
|
141
|
-
border-top-right-radius: 0;
|
|
142
|
-
border-bottom-right-radius: 0;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
SPill[neighborLocation='both'] {
|
|
146
|
-
border-radius: 0;
|
|
147
|
-
margin-left: -1px;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
SPill[neighborLocation='left'] {
|
|
151
|
-
border-top-left-radius: 0;
|
|
152
|
-
border-bottom-left-radius: 0;
|
|
153
|
-
margin-left: -1px;
|
|
154
|
-
}
|