@semcore/pills 4.1.6 → 4.2.1
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 +12 -0
- package/lib/cjs/Pills.js +27 -18
- package/lib/cjs/Pills.js.map +1 -1
- package/lib/cjs/index.d.js +2 -0
- package/lib/cjs/index.d.js.map +1 -0
- package/lib/es6/Pills.js +27 -18
- package/lib/es6/Pills.js.map +1 -1
- package/lib/es6/index.d.js +2 -0
- package/lib/es6/index.d.js.map +1 -0
- package/package.json +9 -6
- package/lib/cjs/index.d.ts +0 -52
- package/lib/es6/index.d.ts +0 -52
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [4.2.1] - 2022-10-04
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/flex-box` [4.5.11 ~> 4.5.12], `@semcore/neighbor-location` [2.3.15 ~> 2.3.16], `@semcore/utils` [3.37.1 ~> 3.37.2]).
|
|
10
|
+
|
|
11
|
+
## [4.2.0] - 2022-09-30
|
|
12
|
+
|
|
13
|
+
### Fixed
|
|
14
|
+
|
|
15
|
+
- Added essential accessibility attributes.
|
|
16
|
+
|
|
5
17
|
## [4.1.6] - 2022-08-30
|
|
6
18
|
|
|
7
19
|
### 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_pmxf0_gg_{display:inline-flex;align-items:center;justify-content:center}.___SPill_pmxf0_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;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_pmxf0_gg_::-moz-focus-inner{border:none;padding:0}.___SPill_pmxf0_gg_:active,.___SPill_pmxf0_gg_:focus,.___SPill_pmxf0_gg_:hover{outline:0;text-decoration:none}.___SPill_pmxf0_gg_:hover{background:rgba(138,142,155,.2)}.___SPill_pmxf0_gg_.__selected_pmxf0_gg_{background:rgba(0,143,248,.2);border-color:#008ff8;z-index:1}.___SPill_pmxf0_gg_.__disabled_pmxf0_gg_{cursor:default;pointer-events:none}.___SPill_pmxf0_gg_.__disabled_pmxf0_gg_>*{opacity:0.3}.___SPill_pmxf0_gg_.__keyboardFocused_pmxf0_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SText_pmxf0_gg_{color:#191b23;display:inline-flex}.___SAddon_pmxf0_gg_{color:#6c6e79;display:inline-flex;align-items:center;justify-content:center}.___SPill_pmxf0_gg_._size_m_pmxf0_gg_{height:28px;min-width:28px;font-size:14px}.___SPill_pmxf0_gg_._size_m_pmxf0_gg_ .___SText_pmxf0_gg_{margin-left:8px;margin-right:8px}.___SPill_pmxf0_gg_._size_m_pmxf0_gg_ .___SAddon_pmxf0_gg_:not(:only-child):first-child{margin-left:8px}.___SPill_pmxf0_gg_._size_m_pmxf0_gg_ .___SAddon_pmxf0_gg_:not(:only-child):last-child{margin-right:8px}.___SPill_pmxf0_gg_._size_m_pmxf0_gg_ .___SAddon_pmxf0_gg_:only-child{margin-left:8px;margin-right:8px}.___SPill_pmxf0_gg_._size_l_pmxf0_gg_{height:40px;min-width:40px;font-size:16px}.___SPill_pmxf0_gg_._size_l_pmxf0_gg_ .___SText_pmxf0_gg_{margin-left:8px;margin-right:8px}.___SPill_pmxf0_gg_._size_l_pmxf0_gg_ .___SText_pmxf0_gg_:only-child{margin-left:12px;margin-right:12px}.___SPill_pmxf0_gg_._size_l_pmxf0_gg_ .___SAddon_pmxf0_gg_:not(:only-child):first-child{margin-left:12px}.___SPill_pmxf0_gg_._size_l_pmxf0_gg_ .___SAddon_pmxf0_gg_:not(:only-child):last-child{margin-right:12px}.___SPill_pmxf0_gg_._size_l_pmxf0_gg_ .___SAddon_pmxf0_gg_:only-child{margin-left:12px;margin-right:12px}.___SPill_pmxf0_gg_._neighborLocation_right_pmxf0_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_pmxf0_gg_._neighborLocation_both_pmxf0_gg_{border-radius:0;margin-left:-1px}.___SPill_pmxf0_gg_._neighborLocation_left_pmxf0_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}"
|
|
56
56
|
/*__inner_css_end__*/
|
|
57
|
-
, "
|
|
57
|
+
, "pmxf0_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_pmxf0_gg_",
|
|
61
|
+
"__SPill": "___SPill_pmxf0_gg_",
|
|
62
|
+
"_selected": "__selected_pmxf0_gg_",
|
|
63
|
+
"_disabled": "__disabled_pmxf0_gg_",
|
|
64
|
+
"_keyboardFocused": "__keyboardFocused_pmxf0_gg_",
|
|
65
|
+
"__SText": "___SText_pmxf0_gg_",
|
|
66
|
+
"__SAddon": "___SAddon_pmxf0_gg_",
|
|
67
|
+
"_size_m": "_size_m_pmxf0_gg_",
|
|
68
|
+
"_size_l": "_size_l_pmxf0_gg_",
|
|
69
|
+
"_neighborLocation_right": "_neighborLocation_right_pmxf0_gg_",
|
|
70
|
+
"_neighborLocation_both": "_neighborLocation_both_pmxf0_gg_",
|
|
71
|
+
"_neighborLocation_left": "_neighborLocation_left_pmxf0_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":";;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIMA,S;;;;;;;;;;;;;;;yGAce,UAACC,KAAD;MAAA,OAAW,UAACC,CAAD,EAAO;QACnC,MAAKC,QAAL,CAAcF,KAAd,CAAoBA,KAApB,EAA2BC,CAA3B;MACD,CAFkB;IAAA,C;;;;;;WANnB,6BAAoB;MAClB,OAAO;QACLD,KAAK,EAAE;MADF,CAAP;IAGD;;;WAMD,sBAAaG,KAAb,EAAoB;MAClB,oBAAkC,KAAKC,OAAvC;MAAA,IAAQJ,KAAR,iBAAQA,KAAR;MAAA,IAAeK,IAAf,iBAAeA,IAAf;MAAA,IAAqBC,QAArB,iBAAqBA,QAArB;MACA,OAAO;QACLD,IAAI,EAAJA,IADK;QAELC,QAAQ,EAARA,QAFK;QAGLC,QAAQ,EAAEP,KAAK,KAAKG,KAAK,CAACH,KAHrB;QAILQ,OAAO,EAAE,KAAKC,gBAAL,CAAsBN,KAAK,CAACH,KAA5B;MAJJ,CAAP;IAMD;;;WAED,kBAAS;MAAA;MAAA;;MACP,IAAMU,MAAM,GAIMC,YAJlB;MACA,qBAAuD,KAAKP,OAA5D;MAAA,IAAQQ,QAAR,kBAAQA,QAAR;MAAA,IAAkBC,MAAlB,kBAAkBA,MAAlB;MAAA,IAA0BC,cAA1B,kBAA0BA,cAA1B;MAAA,IAA0CR,QAA1C,kBAA0CA,QAA1C;MAEA,eAAO,IAAAS,aAAA,EAAQF,MAAR,CAAP,eACE,gCAAC,MAAD;QAAA,QAA0B,YAA1B;QAAA,iBAAsDP;MAAtD,yBACE,gCAAC,4BAAD;QAAA,kBAAkCQ;MAAlC,iBACE,gCAAC,QAAD,2BADF,CADF,CADF;IAOD;;;EAvCqBE,e;;iCAAlBjB,S,iBACiB,O;iCADjBA,S,WAEWkB,K;iCAFXlB,S,kBAGkB;EACpBM,IAAI,EAAE,GADc;EAEpBa,YAAY,EAAE;AAFM,C;;AAuCxB,SAASC,IAAT,CAAchB,KAAd,EAAqB;EAAA;EAAA;;EACnB,IAAMiB,KAAK,GAKCT,YALZ;EACA,IAAQC,QAAR,GAAwET,KAAxE,CAAQS,QAAR;EAAA,IAAkBC,MAAlB,GAAwEV,KAAxE,CAAkBU,MAAlB;EAAA,IAA0BQ,SAA1B,GAAwElB,KAAxE,CAA0BkB,SAA1B;EAAA,IAAqCC,UAArC,GAAwEnB,KAAxE,CAAqCmB,UAArC;EAAA,IAAiDf,QAAjD,GAAwEJ,KAAxE,CAAiDI,QAAjD;EAAA,IAA2DD,QAA3D,GAAwEH,KAAxE,CAA2DG,QAA3D;EAEA,eAAO,IAAAS,aAAA,EAAQF,MAAR,CAAP,eACE,gCAAC,KAAD;IAAA,QAEO,QAFP;IAAA,OAGM,QAHN;IAAA,QAIO,OAJP;IAAA,gBAKgBN,QALhB;IAAA,iBAMiBD;EANjB,aAQGe,SAAS,gBAAG,gCAAC,KAAD,CAAO,IAAP,CAAY,KAAZ;IAAkB,GAAG,EAAEA;EAAvB,EAAH,GAA0C,IARtD,EASG,IAAAE,6BAAA,EAAkBX,QAAlB,EAA4BY,KAAK,CAACC,IAAN,CAAWC,IAAvC,EAA6CF,KAAK,CAACC,IAAN,CAAWE,KAAxD,CATH,EAUGL,UAAU,gBAAG,gCAAC,KAAD,CAAO,IAAP,CAAY,KAAZ;IAAkB,GAAG,EAAEA;EAAvB,EAAH,GAA2C,IAVxD,CADF;AAcD;;AAEDH,IAAI,CAACS,OAAL,GAAe,CAAC,IAAAC,gCAAA,GAAD,EAAyB,IAAAC,yCAAA,GAAzB,CAAf;;AAEA,SAASJ,IAAT,CAAcvB,KAAd,EAAqB;EAAA;EAAA;;EACnB,IAAM4B,KAAK,GACiCpB,YAD5C;EACA,eAAO,IAAAI,aAAA,EAAQZ,KAAK,CAACU,MAAd,CAAP,eAA6B,gCAAC,KAAD;IAAA,OAAwB;EAAxB,YAA7B;AACD;;AAED,SAASc,KAAT,CAAexB,KAAf,EAAsB;EAAA;EAAA;;EACpB,IAAM6B,MAAM,GACiCrB,YAD7C;EACA,eAAO,IAAAI,aAAA,EAAQZ,KAAK,CAACU,MAAd,CAAP,eAA6B,gCAAC,MAAD;IAAA,OAAyB;EAAzB,YAA7B;AACD;;AAED,IAAMW,KAAK,GAAG,IAAAS,gBAAA,EAAgBlC,SAAhB,EAA2B;EACvC0B,IAAI,EAAE,CAACN,IAAD,EAAO;IAAEO,IAAI,EAAJA,IAAF;IAAQC,KAAK,EAALA;EAAR,CAAP;AADiC,CAA3B,CAAd;eAIeH,K"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { CProps, PropGetterFn, ReturnEl } from '@semcore/core';\nimport { Box, IBoxProps } from '@semcore/flex-box';\nimport { INeighborItemProps, INeighborLocationProps } from '@semcore/neighbor-location';\nimport { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nexport type PillsValue = string | number | boolean;\n\nexport interface IPillsProps<T extends PillsValue = PillsValue> extends INeighborLocationProps {\n /** Pills size */\n size?: 'l' | 'm';\n /** Disabled state */\n disabled?: boolean;\n /** Called when the selection is changed */\n onChange?: (value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void;\n /** Value for the selected pill */\n value?: T;\n /** Default value for the selected pill */\n defaultValue?: T;\n}\n\nexport interface IPillProps extends IBoxProps, INeighborItemProps, IKeyboardFocusProps {\n /** Pill value */\n value?: PillsValue;\n /** Disabled state */\n disabled?: boolean;\n /** Selected state */\n selected?: boolean;\n /** Left addon text */\n addonLeft?: React.ElementType;\n /** Right addon tag */\n addonRight?: React.ElementType;\n}\n\nexport interface IPillsContext {\n getItemProps: PropGetterFn;\n}\n\nexport interface IPillsHandlers {\n value: (value: PillsValue) => void;\n}\n\ndeclare const Pills: (<T, V extends PillsValue = PillsValue>(\n props: CProps<IPillsProps<V> & T, IPillsContext, IPillsHandlers>,\n) => ReturnEl) & {\n Item: (<T>(props: CProps<IPillProps & T, {}, IPillsHandlers>) => ReturnEl) & {\n Text: typeof Box;\n Addon: typeof Box;\n };\n};\n\nexport default Pills;\n"],"mappings":""}
|
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_pmxf0_gg_{display:inline-flex;align-items:center;justify-content:center}.___SPill_pmxf0_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;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_pmxf0_gg_::-moz-focus-inner{border:none;padding:0}.___SPill_pmxf0_gg_:active,.___SPill_pmxf0_gg_:focus,.___SPill_pmxf0_gg_:hover{outline:0;text-decoration:none}.___SPill_pmxf0_gg_:hover{background:rgba(138,142,155,.2)}.___SPill_pmxf0_gg_.__selected_pmxf0_gg_{background:rgba(0,143,248,.2);border-color:#008ff8;z-index:1}.___SPill_pmxf0_gg_.__disabled_pmxf0_gg_{cursor:default;pointer-events:none}.___SPill_pmxf0_gg_.__disabled_pmxf0_gg_>*{opacity:0.3}.___SPill_pmxf0_gg_.__keyboardFocused_pmxf0_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SText_pmxf0_gg_{color:#191b23;display:inline-flex}.___SAddon_pmxf0_gg_{color:#6c6e79;display:inline-flex;align-items:center;justify-content:center}.___SPill_pmxf0_gg_._size_m_pmxf0_gg_{height:28px;min-width:28px;font-size:14px}.___SPill_pmxf0_gg_._size_m_pmxf0_gg_ .___SText_pmxf0_gg_{margin-left:8px;margin-right:8px}.___SPill_pmxf0_gg_._size_m_pmxf0_gg_ .___SAddon_pmxf0_gg_:not(:only-child):first-child{margin-left:8px}.___SPill_pmxf0_gg_._size_m_pmxf0_gg_ .___SAddon_pmxf0_gg_:not(:only-child):last-child{margin-right:8px}.___SPill_pmxf0_gg_._size_m_pmxf0_gg_ .___SAddon_pmxf0_gg_:only-child{margin-left:8px;margin-right:8px}.___SPill_pmxf0_gg_._size_l_pmxf0_gg_{height:40px;min-width:40px;font-size:16px}.___SPill_pmxf0_gg_._size_l_pmxf0_gg_ .___SText_pmxf0_gg_{margin-left:8px;margin-right:8px}.___SPill_pmxf0_gg_._size_l_pmxf0_gg_ .___SText_pmxf0_gg_:only-child{margin-left:12px;margin-right:12px}.___SPill_pmxf0_gg_._size_l_pmxf0_gg_ .___SAddon_pmxf0_gg_:not(:only-child):first-child{margin-left:12px}.___SPill_pmxf0_gg_._size_l_pmxf0_gg_ .___SAddon_pmxf0_gg_:not(:only-child):last-child{margin-right:12px}.___SPill_pmxf0_gg_._size_l_pmxf0_gg_ .___SAddon_pmxf0_gg_:only-child{margin-left:12px;margin-right:12px}.___SPill_pmxf0_gg_._neighborLocation_right_pmxf0_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_pmxf0_gg_._neighborLocation_both_pmxf0_gg_{border-radius:0;margin-left:-1px}.___SPill_pmxf0_gg_._neighborLocation_left_pmxf0_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}"
|
|
35
35
|
/*__inner_css_end__*/
|
|
36
|
-
, "
|
|
36
|
+
, "pmxf0_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_pmxf0_gg_",
|
|
40
|
+
"__SPill": "___SPill_pmxf0_gg_",
|
|
41
|
+
"_selected": "__selected_pmxf0_gg_",
|
|
42
|
+
"_disabled": "__disabled_pmxf0_gg_",
|
|
43
|
+
"_keyboardFocused": "__keyboardFocused_pmxf0_gg_",
|
|
44
|
+
"__SText": "___SText_pmxf0_gg_",
|
|
45
|
+
"__SAddon": "___SAddon_pmxf0_gg_",
|
|
46
|
+
"_size_m": "_size_m_pmxf0_gg_",
|
|
47
|
+
"_size_l": "_size_l_pmxf0_gg_",
|
|
48
|
+
"_neighborLocation_right": "_neighborLocation_right_pmxf0_gg_",
|
|
49
|
+
"_neighborLocation_both": "_neighborLocation_both_pmxf0_gg_",
|
|
50
|
+
"_neighborLocation_left": "_neighborLocation_left_pmxf0_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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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { CProps, PropGetterFn, ReturnEl } from '@semcore/core';\nimport { Box, IBoxProps } from '@semcore/flex-box';\nimport { INeighborItemProps, INeighborLocationProps } from '@semcore/neighbor-location';\nimport { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nexport type PillsValue = string | number | boolean;\n\nexport interface IPillsProps<T extends PillsValue = PillsValue> extends INeighborLocationProps {\n /** Pills size */\n size?: 'l' | 'm';\n /** Disabled state */\n disabled?: boolean;\n /** Called when the selection is changed */\n onChange?: (value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void;\n /** Value for the selected pill */\n value?: T;\n /** Default value for the selected pill */\n defaultValue?: T;\n}\n\nexport interface IPillProps extends IBoxProps, INeighborItemProps, IKeyboardFocusProps {\n /** Pill value */\n value?: PillsValue;\n /** Disabled state */\n disabled?: boolean;\n /** Selected state */\n selected?: boolean;\n /** Left addon text */\n addonLeft?: React.ElementType;\n /** Right addon tag */\n addonRight?: React.ElementType;\n}\n\nexport interface IPillsContext {\n getItemProps: PropGetterFn;\n}\n\nexport interface IPillsHandlers {\n value: (value: PillsValue) => void;\n}\n\ndeclare const Pills: (<T, V extends PillsValue = PillsValue>(\n props: CProps<IPillsProps<V> & T, IPillsContext, IPillsHandlers>,\n) => ReturnEl) & {\n Item: (<T>(props: CProps<IPillProps & T, {}, IPillsHandlers>) => ReturnEl) & {\n Text: typeof Box;\n Addon: typeof Box;\n };\n};\n\nexport default Pills;\n"],"mappings":""}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/pills",
|
|
3
3
|
"description": "Semrush Pills Component",
|
|
4
|
-
"version": "4.1
|
|
4
|
+
"version": "4.2.1",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -9,13 +9,13 @@
|
|
|
9
9
|
"author": "UI-kit team <ui-kit-team@semrush.com>",
|
|
10
10
|
"license": "MIT",
|
|
11
11
|
"scripts": {
|
|
12
|
-
"build": "
|
|
12
|
+
"build": "pnpm semcore-builder --source=js",
|
|
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,11 @@
|
|
|
30
30
|
"directory": "semcore/pills"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
|
-
"@
|
|
33
|
+
"@types/react": "16.8 - 17",
|
|
34
|
+
"@guidepup/playwright": "0.6.1",
|
|
35
|
+
"@playwright/test": "1.25.1",
|
|
36
|
+
"@semcore/badge": "*",
|
|
34
37
|
"@semcore/icon": "*",
|
|
35
|
-
"@semcore/
|
|
38
|
+
"@semcore/jest-preset-ui": "1.0.0"
|
|
36
39
|
}
|
|
37
40
|
}
|
package/lib/cjs/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/lib/es6/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;
|