@semcore/pills 4.1.6 → 4.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/lib/cjs/Pills.js +27 -18
- package/lib/cjs/Pills.js.map +1 -1
- package/lib/es6/Pills.js +27 -18
- package/lib/es6/Pills.js.map +1 -1
- package/package.json +7 -5
package/CHANGELOG.md
CHANGED
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_1v2pk_gg_{display:inline-flex;align-items:center;justify-content:center}.___SPill_1v2pk_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_1v2pk_gg_::-moz-focus-inner{border:none;padding:0}.___SPill_1v2pk_gg_:active,.___SPill_1v2pk_gg_:focus,.___SPill_1v2pk_gg_:hover{outline:0;text-decoration:none}.___SPill_1v2pk_gg_:hover{background:rgba(138,142,155,.2)}.___SPill_1v2pk_gg_.__selected_1v2pk_gg_{background:rgba(0,143,248,.2);border-color:#008ff8;z-index:1}.___SPill_1v2pk_gg_.__disabled_1v2pk_gg_{cursor:default;pointer-events:none}.___SPill_1v2pk_gg_.__disabled_1v2pk_gg_>*{opacity:0.3}.___SPill_1v2pk_gg_.__keyboardFocused_1v2pk_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SText_1v2pk_gg_{color:#191b23;display:inline-flex}.___SAddon_1v2pk_gg_{color:#6c6e79;display:inline-flex;align-items:center;justify-content:center}.___SPill_1v2pk_gg_._size_m_1v2pk_gg_{height:28px;min-width:28px;font-size:14px}.___SPill_1v2pk_gg_._size_m_1v2pk_gg_ .___SText_1v2pk_gg_{margin-left:8px;margin-right:8px}.___SPill_1v2pk_gg_._size_m_1v2pk_gg_ .___SAddon_1v2pk_gg_:not(:only-child):first-child{margin-left:8px}.___SPill_1v2pk_gg_._size_m_1v2pk_gg_ .___SAddon_1v2pk_gg_:not(:only-child):last-child{margin-right:8px}.___SPill_1v2pk_gg_._size_m_1v2pk_gg_ .___SAddon_1v2pk_gg_:only-child{margin-left:8px;margin-right:8px}.___SPill_1v2pk_gg_._size_l_1v2pk_gg_{height:40px;min-width:40px;font-size:16px}.___SPill_1v2pk_gg_._size_l_1v2pk_gg_ .___SText_1v2pk_gg_{margin-left:8px;margin-right:8px}.___SPill_1v2pk_gg_._size_l_1v2pk_gg_ .___SText_1v2pk_gg_:only-child{margin-left:12px;margin-right:12px}.___SPill_1v2pk_gg_._size_l_1v2pk_gg_ .___SAddon_1v2pk_gg_:not(:only-child):first-child{margin-left:12px}.___SPill_1v2pk_gg_._size_l_1v2pk_gg_ .___SAddon_1v2pk_gg_:not(:only-child):last-child{margin-right:12px}.___SPill_1v2pk_gg_._size_l_1v2pk_gg_ .___SAddon_1v2pk_gg_:only-child{margin-left:12px;margin-right:12px}.___SPill_1v2pk_gg_._neighborLocation_right_1v2pk_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_1v2pk_gg_._neighborLocation_both_1v2pk_gg_{border-radius:0;margin-left:-1px}.___SPill_1v2pk_gg_._neighborLocation_left_1v2pk_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}"
|
|
56
56
|
/*__inner_css_end__*/
|
|
57
|
-
, "
|
|
57
|
+
, "1v2pk_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_1v2pk_gg_",
|
|
61
|
+
"__SPill": "___SPill_1v2pk_gg_",
|
|
62
|
+
"_selected": "__selected_1v2pk_gg_",
|
|
63
|
+
"_disabled": "__disabled_1v2pk_gg_",
|
|
64
|
+
"_keyboardFocused": "__keyboardFocused_1v2pk_gg_",
|
|
65
|
+
"__SText": "___SText_1v2pk_gg_",
|
|
66
|
+
"__SAddon": "___SAddon_1v2pk_gg_",
|
|
67
|
+
"_size_m": "_size_m_1v2pk_gg_",
|
|
68
|
+
"_size_l": "_size_l_1v2pk_gg_",
|
|
69
|
+
"_neighborLocation_right": "_neighborLocation_right_1v2pk_gg_",
|
|
70
|
+
"_neighborLocation_both": "_neighborLocation_both_1v2pk_gg_",
|
|
71
|
+
"_neighborLocation_left": "_neighborLocation_left_1v2pk_gg_"
|
|
72
72
|
});
|
|
73
73
|
|
|
74
74
|
var RootPills = /*#__PURE__*/function (_Component) {
|
|
@@ -125,8 +125,12 @@ var RootPills = /*#__PURE__*/function (_Component) {
|
|
|
125
125
|
var _this$asProps2 = this.asProps,
|
|
126
126
|
Children = _this$asProps2.Children,
|
|
127
127
|
styles = _this$asProps2.styles,
|
|
128
|
-
controlsLength = _this$asProps2.controlsLength
|
|
129
|
-
|
|
128
|
+
controlsLength = _this$asProps2.controlsLength,
|
|
129
|
+
disabled = _this$asProps2.disabled;
|
|
130
|
+
return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPills, _ref5.cn("SPills", _objectSpread({}, (0, _core.assignProps)({
|
|
131
|
+
"role": "radiogroup",
|
|
132
|
+
"aria-disabled": disabled
|
|
133
|
+
}, _ref))), /*#__PURE__*/_react["default"].createElement(_neighborLocation["default"], _ref5.cn("NeighborLocation", {
|
|
130
134
|
"controlsLength": controlsLength
|
|
131
135
|
}), /*#__PURE__*/_react["default"].createElement(Children, _ref5.cn("Children", {}))));
|
|
132
136
|
}
|
|
@@ -149,10 +153,15 @@ function Pill(props) {
|
|
|
149
153
|
var Children = props.Children,
|
|
150
154
|
styles = props.styles,
|
|
151
155
|
addonLeft = props.addonLeft,
|
|
152
|
-
addonRight = props.addonRight
|
|
156
|
+
addonRight = props.addonRight,
|
|
157
|
+
selected = props.selected,
|
|
158
|
+
disabled = props.disabled;
|
|
153
159
|
return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPill, _ref6.cn("SPill", _objectSpread({}, (0, _core.assignProps)({
|
|
154
160
|
"type": "button",
|
|
155
|
-
"tag": "button"
|
|
161
|
+
"tag": "button",
|
|
162
|
+
"role": "radio",
|
|
163
|
+
"aria-checked": selected,
|
|
164
|
+
"aria-disabled": disabled
|
|
156
165
|
}, _ref2))), addonLeft ? /*#__PURE__*/_react["default"].createElement(Pills.Item.Addon, {
|
|
157
166
|
tag: addonLeft
|
|
158
167
|
}) : null, (0, _addonTextChildren["default"])(Children, Pills.Item.Text, Pills.Item.Addon), addonRight ? /*#__PURE__*/_react["default"].createElement(Pills.Item.Addon, {
|
package/lib/cjs/Pills.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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
|
|
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, disabled } = this.asProps;\n\n return sstyled(styles)(\n <SPills render={Box} role=\"radiogroup\" aria-disabled={disabled}>\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, selected, disabled } = props;\n\n return sstyled(styles)(\n <SPill\n render={Box}\n type=\"button\"\n tag=\"button\"\n role=\"radio\"\n aria-checked={selected}\n aria-disabled={disabled}\n >\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/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_1v2pk_gg_{display:inline-flex;align-items:center;justify-content:center}.___SPill_1v2pk_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_1v2pk_gg_::-moz-focus-inner{border:none;padding:0}.___SPill_1v2pk_gg_:active,.___SPill_1v2pk_gg_:focus,.___SPill_1v2pk_gg_:hover{outline:0;text-decoration:none}.___SPill_1v2pk_gg_:hover{background:rgba(138,142,155,.2)}.___SPill_1v2pk_gg_.__selected_1v2pk_gg_{background:rgba(0,143,248,.2);border-color:#008ff8;z-index:1}.___SPill_1v2pk_gg_.__disabled_1v2pk_gg_{cursor:default;pointer-events:none}.___SPill_1v2pk_gg_.__disabled_1v2pk_gg_>*{opacity:0.3}.___SPill_1v2pk_gg_.__keyboardFocused_1v2pk_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SText_1v2pk_gg_{color:#191b23;display:inline-flex}.___SAddon_1v2pk_gg_{color:#6c6e79;display:inline-flex;align-items:center;justify-content:center}.___SPill_1v2pk_gg_._size_m_1v2pk_gg_{height:28px;min-width:28px;font-size:14px}.___SPill_1v2pk_gg_._size_m_1v2pk_gg_ .___SText_1v2pk_gg_{margin-left:8px;margin-right:8px}.___SPill_1v2pk_gg_._size_m_1v2pk_gg_ .___SAddon_1v2pk_gg_:not(:only-child):first-child{margin-left:8px}.___SPill_1v2pk_gg_._size_m_1v2pk_gg_ .___SAddon_1v2pk_gg_:not(:only-child):last-child{margin-right:8px}.___SPill_1v2pk_gg_._size_m_1v2pk_gg_ .___SAddon_1v2pk_gg_:only-child{margin-left:8px;margin-right:8px}.___SPill_1v2pk_gg_._size_l_1v2pk_gg_{height:40px;min-width:40px;font-size:16px}.___SPill_1v2pk_gg_._size_l_1v2pk_gg_ .___SText_1v2pk_gg_{margin-left:8px;margin-right:8px}.___SPill_1v2pk_gg_._size_l_1v2pk_gg_ .___SText_1v2pk_gg_:only-child{margin-left:12px;margin-right:12px}.___SPill_1v2pk_gg_._size_l_1v2pk_gg_ .___SAddon_1v2pk_gg_:not(:only-child):first-child{margin-left:12px}.___SPill_1v2pk_gg_._size_l_1v2pk_gg_ .___SAddon_1v2pk_gg_:not(:only-child):last-child{margin-right:12px}.___SPill_1v2pk_gg_._size_l_1v2pk_gg_ .___SAddon_1v2pk_gg_:only-child{margin-left:12px;margin-right:12px}.___SPill_1v2pk_gg_._neighborLocation_right_1v2pk_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_1v2pk_gg_._neighborLocation_both_1v2pk_gg_{border-radius:0;margin-left:-1px}.___SPill_1v2pk_gg_._neighborLocation_left_1v2pk_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}"
|
|
35
35
|
/*__inner_css_end__*/
|
|
36
|
-
, "
|
|
36
|
+
, "1v2pk_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_1v2pk_gg_",
|
|
40
|
+
"__SPill": "___SPill_1v2pk_gg_",
|
|
41
|
+
"_selected": "__selected_1v2pk_gg_",
|
|
42
|
+
"_disabled": "__disabled_1v2pk_gg_",
|
|
43
|
+
"_keyboardFocused": "__keyboardFocused_1v2pk_gg_",
|
|
44
|
+
"__SText": "___SText_1v2pk_gg_",
|
|
45
|
+
"__SAddon": "___SAddon_1v2pk_gg_",
|
|
46
|
+
"_size_m": "_size_m_1v2pk_gg_",
|
|
47
|
+
"_size_l": "_size_l_1v2pk_gg_",
|
|
48
|
+
"_neighborLocation_right": "_neighborLocation_right_1v2pk_gg_",
|
|
49
|
+
"_neighborLocation_both": "_neighborLocation_both_1v2pk_gg_",
|
|
50
|
+
"_neighborLocation_left": "_neighborLocation_left_1v2pk_gg_"
|
|
51
51
|
});
|
|
52
52
|
|
|
53
53
|
var RootPills = /*#__PURE__*/function (_Component) {
|
|
@@ -106,8 +106,12 @@ var RootPills = /*#__PURE__*/function (_Component) {
|
|
|
106
106
|
var _this$asProps2 = this.asProps,
|
|
107
107
|
Children = _this$asProps2.Children,
|
|
108
108
|
styles = _this$asProps2.styles,
|
|
109
|
-
controlsLength = _this$asProps2.controlsLength
|
|
110
|
-
|
|
109
|
+
controlsLength = _this$asProps2.controlsLength,
|
|
110
|
+
disabled = _this$asProps2.disabled;
|
|
111
|
+
return _ref5 = sstyled(styles), /*#__PURE__*/React.createElement(SPills, _ref5.cn("SPills", _objectSpread({}, _assignProps({
|
|
112
|
+
"role": "radiogroup",
|
|
113
|
+
"aria-disabled": disabled
|
|
114
|
+
}, _ref))), /*#__PURE__*/React.createElement(NeighborLocation, _ref5.cn("NeighborLocation", {
|
|
111
115
|
"controlsLength": controlsLength
|
|
112
116
|
}), /*#__PURE__*/React.createElement(Children, _ref5.cn("Children", {}))));
|
|
113
117
|
}
|
|
@@ -133,10 +137,15 @@ function Pill(props) {
|
|
|
133
137
|
var Children = props.Children,
|
|
134
138
|
styles = props.styles,
|
|
135
139
|
addonLeft = props.addonLeft,
|
|
136
|
-
addonRight = props.addonRight
|
|
140
|
+
addonRight = props.addonRight,
|
|
141
|
+
selected = props.selected,
|
|
142
|
+
disabled = props.disabled;
|
|
137
143
|
return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SPill, _ref6.cn("SPill", _objectSpread({}, _assignProps2({
|
|
138
144
|
"type": "button",
|
|
139
|
-
"tag": "button"
|
|
145
|
+
"tag": "button",
|
|
146
|
+
"role": "radio",
|
|
147
|
+
"aria-checked": selected,
|
|
148
|
+
"aria-disabled": disabled
|
|
140
149
|
}, _ref2))), addonLeft ? /*#__PURE__*/React.createElement(Pills.Item.Addon, {
|
|
141
150
|
tag: addonLeft
|
|
142
151
|
}) : null, addonTextChildren(Children, Pills.Item.Text, Pills.Item.Addon), addonRight ? /*#__PURE__*/React.createElement(Pills.Item.Addon, {
|
package/lib/es6/Pills.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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
|
|
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, disabled } = this.asProps;\n\n return sstyled(styles)(\n <SPills render={Box} role=\"radiogroup\" aria-disabled={disabled}>\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, selected, disabled } = props;\n\n return sstyled(styles)(\n <SPill\n render={Box}\n type=\"button\"\n tag=\"button\"\n role=\"radio\"\n aria-checked={selected}\n aria-disabled={disabled}\n >\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/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/pills",
|
|
3
3
|
"description": "Semrush Pills Component",
|
|
4
|
-
"version": "4.
|
|
4
|
+
"version": "4.2.0",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -13,9 +13,9 @@
|
|
|
13
13
|
"test": "jest"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@semcore/utils": "^3.15",
|
|
17
16
|
"@semcore/flex-box": "^4",
|
|
18
|
-
"@semcore/neighbor-location": "^2"
|
|
17
|
+
"@semcore/neighbor-location": "^2",
|
|
18
|
+
"@semcore/utils": "^3.15"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
21
|
"@semcore/core": "^1.11",
|
|
@@ -30,8 +30,10 @@
|
|
|
30
30
|
"directory": "semcore/pills"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
|
-
"@
|
|
33
|
+
"@guidepup/playwright": "0.6.1",
|
|
34
|
+
"@playwright/test": "1.25.1",
|
|
35
|
+
"@semcore/badge": "*",
|
|
34
36
|
"@semcore/icon": "*",
|
|
35
|
-
"@semcore/
|
|
37
|
+
"@semcore/jest-preset-ui": "1.0.0"
|
|
36
38
|
}
|
|
37
39
|
}
|