@semcore/pills 3.5.3 → 4.0.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.
Files changed (19) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/lib/cjs/Pills.js +26 -24
  3. package/lib/cjs/Pills.js.map +1 -1
  4. package/lib/cjs/index.d.ts +52 -0
  5. package/lib/cjs/index.js +2 -15
  6. package/lib/cjs/index.js.map +1 -1
  7. package/lib/cjs/style/pills.shadow.css +21 -78
  8. package/lib/es6/Pills.js +20 -22
  9. package/lib/es6/Pills.js.map +1 -1
  10. package/lib/es6/index.d.ts +52 -0
  11. package/lib/es6/index.js +0 -1
  12. package/lib/es6/index.js.map +1 -1
  13. package/lib/es6/style/pills.shadow.css +21 -78
  14. package/lib/types/index.d.ts +7 -5
  15. package/package.json +12 -2
  16. package/src/{Pills.js → Pills.jsx} +2 -8
  17. package/src/index.d.ts +7 -5
  18. package/src/index.js +0 -1
  19. package/src/style/pills.shadow.css +21 -78
package/CHANGELOG.md CHANGED
@@ -2,6 +2,25 @@
2
2
 
3
3
  CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
4
4
 
5
+ ## [4.0.0] - 2022-05-17
6
+
7
+ ### BREAK
8
+
9
+ - Updated styles according to the library redesign policy.
10
+ - Remove value "xl"/"s"" for "size".
11
+
12
+ ## [3.5.5] - 2022-03-14
13
+
14
+ ### Changed
15
+
16
+ - Version patch update due to children dependencies update (`@semcore/utils` [3.31.2 ~> 3.31.2], `@semcore/flex-box` [4.5.0 ~> 4.5.1], `@semcore/neighbor-location` [2.3.4 ~> 2.3.5]).
17
+
18
+ ## [3.5.4] - 2022-02-24
19
+
20
+ ### Added
21
+
22
+ - Added repository field to package.json file.
23
+
5
24
  ## [3.5.3] - 2021-12-23
6
25
 
7
26
  ### Changed
package/lib/cjs/Pills.js CHANGED
@@ -1,9 +1,9 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
-
5
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
4
 
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
6
+
7
7
  Object.defineProperty(exports, "__esModule", {
8
8
  value: true
9
9
  });
@@ -35,9 +35,13 @@ var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/e
35
35
 
36
36
  var _addonTextChildren = _interopRequireDefault(require("@semcore/utils/lib/addonTextChildren"));
37
37
 
38
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
38
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
39
+
40
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
41
+
42
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
39
43
 
40
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
44
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
41
45
 
42
46
  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
43
47
 
@@ -48,25 +52,23 @@ var style = (
48
52
  /*__reshadow_css_start__*/
49
53
  _core.sstyled.insert(
50
54
  /*__inner_css_start__*/
51
- ".___SPill_1lpqi_gg_,.___SPills_1lpqi_gg_{display:inline-flex;align-items:center;justify-content:center}.___SPill_1lpqi_gg_{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;color:#666;background:#fff;border:1px solid #a6b0b3}.___SPill_1lpqi_gg_::-moz-focus-inner{border:none;padding:0}.___SPill_1lpqi_gg_:active,.___SPill_1lpqi_gg_:focus,.___SPill_1lpqi_gg_:hover{outline:0;text-decoration:none}.___SPill_1lpqi_gg_:hover{background:rgba(166,176,179,.2)}.___SPill_1lpqi_gg_.__selected_1lpqi_gg_{border-color:#2b94e1;z-index:1}.___SPill_1lpqi_gg_.__selected_1lpqi_gg_,.___SPill_1lpqi_gg_.__selected_1lpqi_gg_:enabled:hover{background:rgba(43,148,225,.2)}.___SPill_1lpqi_gg_.__disabled_1lpqi_gg_{cursor:default;pointer-events:none}.___SPill_1lpqi_gg_.__disabled_1lpqi_gg_>*{opacity:.3}.___SPill_1lpqi_gg_.__keyboardFocused_1lpqi_gg_{box-shadow:0 0 0 3px rgba(43,148,225,.3)}.___SText_1lpqi_gg_{color:#333}.___SAddon_1lpqi_gg_,.___SText_1lpqi_gg_{display:inline-flex;line-height:1.1}.___SAddon_1lpqi_gg_{color:#757575;align-items:center;justify-content:center}.___SPill_1lpqi_gg_._size_s_1lpqi_gg_{height:18px;min-width:18px;border-radius:2px;font-size:10px}.___SPill_1lpqi_gg_._size_s_1lpqi_gg_ .___SText_1lpqi_gg_{margin-left:4px;margin-right:4px}.___SPill_1lpqi_gg_._size_s_1lpqi_gg_ .___SAddon_1lpqi_gg_:not(:only-child):first-child{margin-left:4px}.___SPill_1lpqi_gg_._size_s_1lpqi_gg_ .___SAddon_1lpqi_gg_:not(:only-child):last-child{margin-right:4px}.___SPill_1lpqi_gg_._size_s_1lpqi_gg_ .___SAddon_1lpqi_gg_:only-child{margin-left:-2px;margin-right:-2px}.___SPill_1lpqi_gg_._size_m_1lpqi_gg_{height:26px;min-width:26px;border-radius:3px;font-size:12px}.___SPill_1lpqi_gg_._size_m_1lpqi_gg_ .___SText_1lpqi_gg_{margin-left:8px;margin-right:8px}.___SPill_1lpqi_gg_._size_m_1lpqi_gg_ .___SAddon_1lpqi_gg_:not(:only-child):first-child{margin-left:8px}.___SPill_1lpqi_gg_._size_m_1lpqi_gg_ .___SAddon_1lpqi_gg_:not(:only-child):last-child{margin-right:8px}.___SPill_1lpqi_gg_._size_m_1lpqi_gg_ .___SAddon_1lpqi_gg_:only-child{margin-left:-4px;margin-right:-4px}.___SPill_1lpqi_gg_._size_l_1lpqi_gg_{height:32px;min-width:32px;border-radius:4px;font-size:14px}.___SPill_1lpqi_gg_._size_l_1lpqi_gg_ .___SText_1lpqi_gg_{margin-left:8px;margin-right:8px}.___SPill_1lpqi_gg_._size_l_1lpqi_gg_ .___SAddon_1lpqi_gg_:not(:only-child):first-child{margin-left:8px}.___SPill_1lpqi_gg_._size_l_1lpqi_gg_ .___SAddon_1lpqi_gg_:not(:only-child):last-child{margin-right:8px}.___SPill_1lpqi_gg_._size_l_1lpqi_gg_ .___SAddon_1lpqi_gg_:only-child{margin-left:-4px;margin-right:-4px}.___SPill_1lpqi_gg_._size_xl_1lpqi_gg_{height:42px;min-width:42px;border-radius:5px;font-size:16px}.___SPill_1lpqi_gg_._size_xl_1lpqi_gg_ .___SText_1lpqi_gg_{margin-left:12px;margin-right:12px}.___SPill_1lpqi_gg_._size_xl_1lpqi_gg_ .___SAddon_1lpqi_gg_:not(:only-child):first-child{margin-left:12px}.___SPill_1lpqi_gg_._size_xl_1lpqi_gg_ .___SAddon_1lpqi_gg_:not(:only-child):last-child{margin-right:12px}.___SPill_1lpqi_gg_._size_xl_1lpqi_gg_ .___SAddon_1lpqi_gg_:only-child{margin-left:-6px;margin-right:-6px}.___SPill_1lpqi_gg_._neighborLocation_right_1lpqi_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_1lpqi_gg_._neighborLocation_both_1lpqi_gg_{border-radius:0;margin-left:-1px}.___SPill_1lpqi_gg_._neighborLocation_left_1lpqi_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}"
55
+ ".___SPills_1frzm_gg_{display:inline-flex;align-items:center;justify-content:center}.___SPill_1frzm_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_1frzm_gg_::-moz-focus-inner{border:none;padding:0}.___SPill_1frzm_gg_:active,.___SPill_1frzm_gg_:focus,.___SPill_1frzm_gg_:hover{outline:0;text-decoration:none}.___SPill_1frzm_gg_:hover{background:rgba(138,142,155,.2)}.___SPill_1frzm_gg_.__selected_1frzm_gg_{background:rgba(0,143,248,.2);border-color:#008ff8;z-index:1}.___SPill_1frzm_gg_.__disabled_1frzm_gg_{cursor:default;pointer-events:none}.___SPill_1frzm_gg_.__disabled_1frzm_gg_>*{opacity:0.3}.___SPill_1frzm_gg_.__keyboardFocused_1frzm_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SText_1frzm_gg_{color:#191b23;display:inline-flex}.___SAddon_1frzm_gg_{color:#6c6e79;display:inline-flex;align-items:center;justify-content:center}.___SPill_1frzm_gg_._size_m_1frzm_gg_{height:28px;min-width:28px;font-size:14px}.___SPill_1frzm_gg_._size_m_1frzm_gg_ .___SText_1frzm_gg_{margin-left:8px;margin-right:8px}.___SPill_1frzm_gg_._size_m_1frzm_gg_ .___SAddon_1frzm_gg_:not(:only-child):first-child{margin-left:8px}.___SPill_1frzm_gg_._size_m_1frzm_gg_ .___SAddon_1frzm_gg_:not(:only-child):last-child{margin-right:8px}.___SPill_1frzm_gg_._size_m_1frzm_gg_ .___SAddon_1frzm_gg_:only-child{margin-left:8px;margin-right:8px}.___SPill_1frzm_gg_._size_l_1frzm_gg_{height:40px;min-width:40px;font-size:16px}.___SPill_1frzm_gg_._size_l_1frzm_gg_ .___SText_1frzm_gg_{margin-left:8px;margin-right:8px}.___SPill_1frzm_gg_._size_l_1frzm_gg_ .___SText_1frzm_gg_:only-child{margin-left:12px;margin-right:12px}.___SPill_1frzm_gg_._size_l_1frzm_gg_ .___SAddon_1frzm_gg_:not(:only-child):first-child{margin-left:12px}.___SPill_1frzm_gg_._size_l_1frzm_gg_ .___SAddon_1frzm_gg_:not(:only-child):last-child{margin-right:12px}.___SPill_1frzm_gg_._size_l_1frzm_gg_ .___SAddon_1frzm_gg_:only-child{margin-left:12px;margin-right:12px}.___SPill_1frzm_gg_._neighborLocation_right_1frzm_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_1frzm_gg_._neighborLocation_both_1frzm_gg_{border-radius:0;margin-left:-1px}.___SPill_1frzm_gg_._neighborLocation_left_1frzm_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}"
52
56
  /*__inner_css_end__*/
53
- , "1y1hdgc_gg_")
57
+ , "1dqcagg_gg_")
54
58
  /*__reshadow_css_end__*/
55
59
  , {
56
- "__SPill": "___SPill_1lpqi_gg_",
57
- "__SPills": "___SPills_1lpqi_gg_",
58
- "_selected": "__selected_1lpqi_gg_",
59
- "_disabled": "__disabled_1lpqi_gg_",
60
- "_keyboardFocused": "__keyboardFocused_1lpqi_gg_",
61
- "__SText": "___SText_1lpqi_gg_",
62
- "__SAddon": "___SAddon_1lpqi_gg_",
63
- "_size_s": "_size_s_1lpqi_gg_",
64
- "_size_m": "_size_m_1lpqi_gg_",
65
- "_size_l": "_size_l_1lpqi_gg_",
66
- "_size_xl": "_size_xl_1lpqi_gg_",
67
- "_neighborLocation_right": "_neighborLocation_right_1lpqi_gg_",
68
- "_neighborLocation_both": "_neighborLocation_both_1lpqi_gg_",
69
- "_neighborLocation_left": "_neighborLocation_left_1lpqi_gg_"
60
+ "__SPills": "___SPills_1frzm_gg_",
61
+ "__SPill": "___SPill_1frzm_gg_",
62
+ "_selected": "__selected_1frzm_gg_",
63
+ "_disabled": "__disabled_1frzm_gg_",
64
+ "_keyboardFocused": "__keyboardFocused_1frzm_gg_",
65
+ "__SText": "___SText_1frzm_gg_",
66
+ "__SAddon": "___SAddon_1frzm_gg_",
67
+ "_size_m": "_size_m_1frzm_gg_",
68
+ "_size_l": "_size_l_1frzm_gg_",
69
+ "_neighborLocation_right": "_neighborLocation_right_1frzm_gg_",
70
+ "_neighborLocation_both": "_neighborLocation_both_1frzm_gg_",
71
+ "_neighborLocation_left": "_neighborLocation_left_1frzm_gg_"
70
72
  });
71
73
 
72
74
  var RootPills = /*#__PURE__*/function (_Component) {
@@ -116,7 +118,7 @@ var RootPills = /*#__PURE__*/function (_Component) {
116
118
  }, {
117
119
  key: "render",
118
120
  value: function render() {
119
- var _ref = this ? this.asProps : arguments[0],
121
+ var _ref = this.asProps,
120
122
  _ref5;
121
123
 
122
124
  var SPills = _flexBox.Box;
@@ -140,7 +142,7 @@ var RootPills = /*#__PURE__*/function (_Component) {
140
142
  });
141
143
 
142
144
  function Pill(props) {
143
- var _ref2 = this ? this.asProps : arguments[0],
145
+ var _ref2 = arguments[0],
144
146
  _ref6;
145
147
 
146
148
  var SPill = _flexBox.Box;
@@ -161,7 +163,7 @@ function Pill(props) {
161
163
  Pill.enhance = [(0, _keyboardFocusEnhance["default"])(), (0, _neighborLocation.neighborLocationEnhance)()];
162
164
 
163
165
  function Text(props) {
164
- var _ref3 = this ? this.asProps : arguments[0],
166
+ var _ref3 = arguments[0],
165
167
  _ref7;
166
168
 
167
169
  var SText = _flexBox.Box;
@@ -171,7 +173,7 @@ function Text(props) {
171
173
  }
172
174
 
173
175
  function Addon(props) {
174
- var _ref4 = this ? this.asProps : arguments[0],
176
+ var _ref4 = arguments[0],
175
177
  _ref8;
176
178
 
177
179
  var SAddon = _flexBox.Box;
package/lib/cjs/Pills.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Pills.js"],"names":["RootPills","value","e","handlers","props","asProps","size","disabled","selected","onClick","bindHandlerClick","SPills","Box","Children","styles","controlsLength","Component","style","defaultValue","Pill","SPill","addonLeft","addonRight","Pills","Item","Text","Addon","enhance","SText","SAddon"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, {\n Component,\n sstyled,\n Root,\n} from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport NeighborLocation, {\n neighborLocationEnhance,\n} 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"],"file":"Pills.js"}
1
+ {"version":3,"sources":["../../src/Pills.jsx"],"names":["RootPills","value","e","handlers","props","asProps","size","disabled","selected","onClick","bindHandlerClick","SPills","Box","Children","styles","controlsLength","Component","style","defaultValue","Pill","SPill","addonLeft","addonRight","Pills","Item","Text","Addon","enhance","SText","SAddon"],"mappings":"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","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"],"file":"Pills.js"}
package/lib/cjs/index.d.ts ADDED
@@ -0,0 +1,52 @@
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 IPopperHandlers {
40
+ value: (value: PillsValue) => void;
41
+ }
42
+
43
+ declare const Pills: (<T, V extends PillsValue = PillsValue>(
44
+ props: CProps<IPillsProps<V> & T, IPillsContext, IPopperHandlers>,
45
+ ) => ReturnEl) & {
46
+ Item: (<T>(props: CProps<IPillProps & T, {}, IPopperHandlers>) => ReturnEl) & {
47
+ Text: typeof Box;
48
+ Addon: typeof Box;
49
+ };
50
+ };
51
+
52
+ export default Pills;
package/lib/cjs/index.js CHANGED
@@ -1,11 +1,10 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
4
 
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- var _exportNames = {};
9
8
  Object.defineProperty(exports, "default", {
10
9
  enumerable: true,
11
10
  get: function get() {
@@ -13,17 +12,5 @@ Object.defineProperty(exports, "default", {
13
12
  }
14
13
  });
15
14
 
16
- var _Pills = _interopRequireWildcard(require("./Pills"));
17
-
18
- Object.keys(_Pills).forEach(function (key) {
19
- if (key === "default" || key === "__esModule") return;
20
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
21
- if (key in exports && exports[key] === _Pills[key]) return;
22
- Object.defineProperty(exports, key, {
23
- enumerable: true,
24
- get: function get() {
25
- return _Pills[key];
26
- }
27
- });
28
- });
15
+ var _Pills = _interopRequireDefault(require("./Pills"));
29
16
  //# sourceMappingURL=index.js.map
package/lib/cjs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { default } from './Pills';\nexport * from './Pills';\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default } from './Pills';\n"],"file":"index.js"}
package/lib/cjs/style/pills.shadow.css CHANGED
@@ -28,9 +28,9 @@ SPill {
28
28
  vertical-align: middle;
29
29
  font-family: inherit;
30
30
  cursor: pointer;
31
- color: var(--gray40);
32
- background: #fff;
33
- border: 1px solid var(--stone);
31
+ background: var(--white);
32
+ border: 1px solid var(--gray-200);
33
+ border-radius: var(--rounded-m);
34
34
 
35
35
  &::-moz-focus-inner {
36
36
  border: none;
@@ -45,18 +45,14 @@ SPill {
45
45
  }
46
46
 
47
47
  &:hover {
48
- background: color-mod(var(--stone) a(20%));
48
+ background: color-mod(var(--gray-400) a(20%));
49
49
  }
50
50
  }
51
51
 
52
52
  SPill[selected] {
53
- background: color-mod(var(--light-blue) a(20%));
54
- border-color: var(--light-blue);
53
+ background: color-mod(var(--blue-400) a(20%));
54
+ border-color: var(--blue-400);
55
55
  z-index: 1;
56
-
57
- &:enabled:hover {
58
- background: color-mod(var(--light-blue) a(20%));
59
- }
60
56
  }
61
57
 
62
58
  SPill[disabled] {
@@ -69,55 +65,25 @@ SPill[disabled] {
69
65
  }
70
66
 
71
67
  SPill[keyboardFocused] {
72
- box-shadow: var(--keyborad-focus);
68
+ box-shadow: var(--keyboard-focus);
73
69
  }
74
70
 
75
71
  SText {
76
- color: var(--gray20);
72
+ color: var(--gray-800);
77
73
  display: inline-flex;
78
- line-height: 1.1;
79
74
  }
80
75
 
81
76
  SAddon {
82
- color: var(--gray60);
77
+ color: var(--gray-500);
83
78
  display: inline-flex;
84
79
  align-items: center;
85
80
  justify-content: center;
86
- line-height: 1.1;
87
- }
88
-
89
- SPill[size='s'] {
90
- height: 18px;
91
- min-width: 18px;
92
- border-radius: 2px;
93
- font-size: 10px;
94
-
95
- & SText {
96
- margin-left: 4px;
97
- margin-right: 4px;
98
- }
99
-
100
- & SAddon {
101
- &:not(:only-child):first-child {
102
- margin-left: 4px;
103
- }
104
-
105
- &:not(:only-child):last-child {
106
- margin-right: 4px;
107
- }
108
-
109
- &:only-child {
110
- margin-left: -2px;
111
- margin-right: -2px;
112
- }
113
- }
114
81
  }
115
82
 
116
83
  SPill[size='m'] {
117
- height: 26px;
118
- min-width: 26px;
119
- border-radius: 3px;
120
- font-size: 12px;
84
+ height: var(--form-control-m);
85
+ min-width: var(--form-control-m);
86
+ font-size: var(--fs-200);
121
87
 
122
88
  & SText {
123
89
  margin-left: 8px;
@@ -134,49 +100,26 @@ SPill[size='m'] {
134
100
  }
135
101
 
136
102
  &:only-child {
137
- margin-left: -4px;
138
- margin-right: -4px;
103
+ margin-left: 8px;
104
+ margin-right: 8px;
139
105
  }
140
106
  }
141
107
  }
142
108
 
143
109
  SPill[size='l'] {
144
- height: 32px;
145
- min-width: 32px;
146
- border-radius: 4px;
147
- font-size: 14px;
110
+ height: var(--form-control-l);
111
+ min-width: var(--form-control-l);
112
+ font-size: var(--fs-300);
148
113
 
149
114
  & SText {
150
115
  margin-left: 8px;
151
116
  margin-right: 8px;
152
- }
153
-
154
- & SAddon {
155
- &:not(:only-child):first-child {
156
- margin-left: 8px;
157
- }
158
-
159
- &:not(:only-child):last-child {
160
- margin-right: 8px;
161
- }
162
117
 
163
118
  &:only-child {
164
- margin-left: -4px;
165
- margin-right: -4px;
119
+ margin-left: 12px;
120
+ margin-right: 12px;
166
121
  }
167
122
  }
168
- }
169
-
170
- SPill[size='xl'] {
171
- height: 42px;
172
- min-width: 42px;
173
- border-radius: 5px;
174
- font-size: 16px;
175
-
176
- & SText {
177
- margin-left: 12px;
178
- margin-right: 12px;
179
- }
180
123
 
181
124
  & SAddon {
182
125
  &:not(:only-child):first-child {
@@ -188,8 +131,8 @@ SPill[size='xl'] {
188
131
  }
189
132
 
190
133
  &:only-child {
191
- margin-left: -6px;
192
- margin-right: -6px;
134
+ margin-left: 12px;
135
+ margin-right: 12px;
193
136
  }
194
137
  }
195
138
  }
package/lib/es6/Pills.js CHANGED
@@ -11,9 +11,9 @@ import { assignProps as _assignProps3 } from "@semcore/core";
11
11
  import { assignProps as _assignProps2 } from "@semcore/core";
12
12
  import { assignProps as _assignProps } from "@semcore/core";
13
13
 
14
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
14
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
15
15
 
16
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
16
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
17
17
 
18
18
  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
19
19
 
@@ -31,25 +31,23 @@ var style = (
31
31
  /*__reshadow_css_start__*/
32
32
  _sstyled.insert(
33
33
  /*__inner_css_start__*/
34
- ".___SPill_1lpqi_gg_,.___SPills_1lpqi_gg_{display:inline-flex;align-items:center;justify-content:center}.___SPill_1lpqi_gg_{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;color:#666;background:#fff;border:1px solid #a6b0b3}.___SPill_1lpqi_gg_::-moz-focus-inner{border:none;padding:0}.___SPill_1lpqi_gg_:active,.___SPill_1lpqi_gg_:focus,.___SPill_1lpqi_gg_:hover{outline:0;text-decoration:none}.___SPill_1lpqi_gg_:hover{background:rgba(166,176,179,.2)}.___SPill_1lpqi_gg_.__selected_1lpqi_gg_{border-color:#2b94e1;z-index:1}.___SPill_1lpqi_gg_.__selected_1lpqi_gg_,.___SPill_1lpqi_gg_.__selected_1lpqi_gg_:enabled:hover{background:rgba(43,148,225,.2)}.___SPill_1lpqi_gg_.__disabled_1lpqi_gg_{cursor:default;pointer-events:none}.___SPill_1lpqi_gg_.__disabled_1lpqi_gg_>*{opacity:.3}.___SPill_1lpqi_gg_.__keyboardFocused_1lpqi_gg_{box-shadow:0 0 0 3px rgba(43,148,225,.3)}.___SText_1lpqi_gg_{color:#333}.___SAddon_1lpqi_gg_,.___SText_1lpqi_gg_{display:inline-flex;line-height:1.1}.___SAddon_1lpqi_gg_{color:#757575;align-items:center;justify-content:center}.___SPill_1lpqi_gg_._size_s_1lpqi_gg_{height:18px;min-width:18px;border-radius:2px;font-size:10px}.___SPill_1lpqi_gg_._size_s_1lpqi_gg_ .___SText_1lpqi_gg_{margin-left:4px;margin-right:4px}.___SPill_1lpqi_gg_._size_s_1lpqi_gg_ .___SAddon_1lpqi_gg_:not(:only-child):first-child{margin-left:4px}.___SPill_1lpqi_gg_._size_s_1lpqi_gg_ .___SAddon_1lpqi_gg_:not(:only-child):last-child{margin-right:4px}.___SPill_1lpqi_gg_._size_s_1lpqi_gg_ .___SAddon_1lpqi_gg_:only-child{margin-left:-2px;margin-right:-2px}.___SPill_1lpqi_gg_._size_m_1lpqi_gg_{height:26px;min-width:26px;border-radius:3px;font-size:12px}.___SPill_1lpqi_gg_._size_m_1lpqi_gg_ .___SText_1lpqi_gg_{margin-left:8px;margin-right:8px}.___SPill_1lpqi_gg_._size_m_1lpqi_gg_ .___SAddon_1lpqi_gg_:not(:only-child):first-child{margin-left:8px}.___SPill_1lpqi_gg_._size_m_1lpqi_gg_ .___SAddon_1lpqi_gg_:not(:only-child):last-child{margin-right:8px}.___SPill_1lpqi_gg_._size_m_1lpqi_gg_ .___SAddon_1lpqi_gg_:only-child{margin-left:-4px;margin-right:-4px}.___SPill_1lpqi_gg_._size_l_1lpqi_gg_{height:32px;min-width:32px;border-radius:4px;font-size:14px}.___SPill_1lpqi_gg_._size_l_1lpqi_gg_ .___SText_1lpqi_gg_{margin-left:8px;margin-right:8px}.___SPill_1lpqi_gg_._size_l_1lpqi_gg_ .___SAddon_1lpqi_gg_:not(:only-child):first-child{margin-left:8px}.___SPill_1lpqi_gg_._size_l_1lpqi_gg_ .___SAddon_1lpqi_gg_:not(:only-child):last-child{margin-right:8px}.___SPill_1lpqi_gg_._size_l_1lpqi_gg_ .___SAddon_1lpqi_gg_:only-child{margin-left:-4px;margin-right:-4px}.___SPill_1lpqi_gg_._size_xl_1lpqi_gg_{height:42px;min-width:42px;border-radius:5px;font-size:16px}.___SPill_1lpqi_gg_._size_xl_1lpqi_gg_ .___SText_1lpqi_gg_{margin-left:12px;margin-right:12px}.___SPill_1lpqi_gg_._size_xl_1lpqi_gg_ .___SAddon_1lpqi_gg_:not(:only-child):first-child{margin-left:12px}.___SPill_1lpqi_gg_._size_xl_1lpqi_gg_ .___SAddon_1lpqi_gg_:not(:only-child):last-child{margin-right:12px}.___SPill_1lpqi_gg_._size_xl_1lpqi_gg_ .___SAddon_1lpqi_gg_:only-child{margin-left:-6px;margin-right:-6px}.___SPill_1lpqi_gg_._neighborLocation_right_1lpqi_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_1lpqi_gg_._neighborLocation_both_1lpqi_gg_{border-radius:0;margin-left:-1px}.___SPill_1lpqi_gg_._neighborLocation_left_1lpqi_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}"
34
+ ".___SPills_1frzm_gg_{display:inline-flex;align-items:center;justify-content:center}.___SPill_1frzm_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_1frzm_gg_::-moz-focus-inner{border:none;padding:0}.___SPill_1frzm_gg_:active,.___SPill_1frzm_gg_:focus,.___SPill_1frzm_gg_:hover{outline:0;text-decoration:none}.___SPill_1frzm_gg_:hover{background:rgba(138,142,155,.2)}.___SPill_1frzm_gg_.__selected_1frzm_gg_{background:rgba(0,143,248,.2);border-color:#008ff8;z-index:1}.___SPill_1frzm_gg_.__disabled_1frzm_gg_{cursor:default;pointer-events:none}.___SPill_1frzm_gg_.__disabled_1frzm_gg_>*{opacity:0.3}.___SPill_1frzm_gg_.__keyboardFocused_1frzm_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SText_1frzm_gg_{color:#191b23;display:inline-flex}.___SAddon_1frzm_gg_{color:#6c6e79;display:inline-flex;align-items:center;justify-content:center}.___SPill_1frzm_gg_._size_m_1frzm_gg_{height:28px;min-width:28px;font-size:14px}.___SPill_1frzm_gg_._size_m_1frzm_gg_ .___SText_1frzm_gg_{margin-left:8px;margin-right:8px}.___SPill_1frzm_gg_._size_m_1frzm_gg_ .___SAddon_1frzm_gg_:not(:only-child):first-child{margin-left:8px}.___SPill_1frzm_gg_._size_m_1frzm_gg_ .___SAddon_1frzm_gg_:not(:only-child):last-child{margin-right:8px}.___SPill_1frzm_gg_._size_m_1frzm_gg_ .___SAddon_1frzm_gg_:only-child{margin-left:8px;margin-right:8px}.___SPill_1frzm_gg_._size_l_1frzm_gg_{height:40px;min-width:40px;font-size:16px}.___SPill_1frzm_gg_._size_l_1frzm_gg_ .___SText_1frzm_gg_{margin-left:8px;margin-right:8px}.___SPill_1frzm_gg_._size_l_1frzm_gg_ .___SText_1frzm_gg_:only-child{margin-left:12px;margin-right:12px}.___SPill_1frzm_gg_._size_l_1frzm_gg_ .___SAddon_1frzm_gg_:not(:only-child):first-child{margin-left:12px}.___SPill_1frzm_gg_._size_l_1frzm_gg_ .___SAddon_1frzm_gg_:not(:only-child):last-child{margin-right:12px}.___SPill_1frzm_gg_._size_l_1frzm_gg_ .___SAddon_1frzm_gg_:only-child{margin-left:12px;margin-right:12px}.___SPill_1frzm_gg_._neighborLocation_right_1frzm_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_1frzm_gg_._neighborLocation_both_1frzm_gg_{border-radius:0;margin-left:-1px}.___SPill_1frzm_gg_._neighborLocation_left_1frzm_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}"
35
35
  /*__inner_css_end__*/
36
- , "1y1hdgc_gg_")
36
+ , "1dqcagg_gg_")
37
37
  /*__reshadow_css_end__*/
38
38
  , {
39
- "__SPill": "___SPill_1lpqi_gg_",
40
- "__SPills": "___SPills_1lpqi_gg_",
41
- "_selected": "__selected_1lpqi_gg_",
42
- "_disabled": "__disabled_1lpqi_gg_",
43
- "_keyboardFocused": "__keyboardFocused_1lpqi_gg_",
44
- "__SText": "___SText_1lpqi_gg_",
45
- "__SAddon": "___SAddon_1lpqi_gg_",
46
- "_size_s": "_size_s_1lpqi_gg_",
47
- "_size_m": "_size_m_1lpqi_gg_",
48
- "_size_l": "_size_l_1lpqi_gg_",
49
- "_size_xl": "_size_xl_1lpqi_gg_",
50
- "_neighborLocation_right": "_neighborLocation_right_1lpqi_gg_",
51
- "_neighborLocation_both": "_neighborLocation_both_1lpqi_gg_",
52
- "_neighborLocation_left": "_neighborLocation_left_1lpqi_gg_"
39
+ "__SPills": "___SPills_1frzm_gg_",
40
+ "__SPill": "___SPill_1frzm_gg_",
41
+ "_selected": "__selected_1frzm_gg_",
42
+ "_disabled": "__disabled_1frzm_gg_",
43
+ "_keyboardFocused": "__keyboardFocused_1frzm_gg_",
44
+ "__SText": "___SText_1frzm_gg_",
45
+ "__SAddon": "___SAddon_1frzm_gg_",
46
+ "_size_m": "_size_m_1frzm_gg_",
47
+ "_size_l": "_size_l_1frzm_gg_",
48
+ "_neighborLocation_right": "_neighborLocation_right_1frzm_gg_",
49
+ "_neighborLocation_both": "_neighborLocation_both_1frzm_gg_",
50
+ "_neighborLocation_left": "_neighborLocation_left_1frzm_gg_"
53
51
  });
54
52
 
55
53
  var RootPills = /*#__PURE__*/function (_Component) {
@@ -101,7 +99,7 @@ var RootPills = /*#__PURE__*/function (_Component) {
101
99
  }, {
102
100
  key: "render",
103
101
  value: function render() {
104
- var _ref = this ? this.asProps : arguments[0],
102
+ var _ref = this.asProps,
105
103
  _ref5;
106
104
 
107
105
  var SPills = Box;
@@ -128,7 +126,7 @@ _defineProperty(RootPills, "defaultProps", {
128
126
  });
129
127
 
130
128
  function Pill(props) {
131
- var _ref2 = this ? this.asProps : arguments[0],
129
+ var _ref2 = arguments[0],
132
130
  _ref6;
133
131
 
134
132
  var SPill = Box;
@@ -149,7 +147,7 @@ function Pill(props) {
149
147
  Pill.enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];
150
148
 
151
149
  function Text(props) {
152
- var _ref3 = this ? this.asProps : arguments[0],
150
+ var _ref3 = arguments[0],
153
151
  _ref7;
154
152
 
155
153
  var SText = Box;
@@ -159,7 +157,7 @@ function Text(props) {
159
157
  }
160
158
 
161
159
  function Addon(props) {
162
- var _ref4 = this ? this.asProps : arguments[0],
160
+ var _ref4 = arguments[0],
163
161
  _ref8;
164
162
 
165
163
  var SAddon = Box;
package/lib/es6/Pills.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/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"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, {\n Component,\n sstyled,\n Root,\n} from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport NeighborLocation, {\n neighborLocationEnhance,\n} 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"],"file":"Pills.js"}
1
+ {"version":3,"sources":["../../src/Pills.jsx"],"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"],"mappings":"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","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"],"file":"Pills.js"}
package/lib/es6/index.d.ts ADDED
@@ -0,0 +1,52 @@
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 IPopperHandlers {
40
+ value: (value: PillsValue) => void;
41
+ }
42
+
43
+ declare const Pills: (<T, V extends PillsValue = PillsValue>(
44
+ props: CProps<IPillsProps<V> & T, IPillsContext, IPopperHandlers>,
45
+ ) => ReturnEl) & {
46
+ Item: (<T>(props: CProps<IPillProps & T, {}, IPopperHandlers>) => ReturnEl) & {
47
+ Text: typeof Box;
48
+ Addon: typeof Box;
49
+ };
50
+ };
51
+
52
+ export default Pills;
package/lib/es6/index.js CHANGED
@@ -1,3 +1,2 @@
1
1
  export { default } from './Pills';
2
- export * from './Pills';
3
2
  //# sourceMappingURL=index.js.map
package/lib/es6/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,SAAxB;AACA,cAAc,SAAd","sourcesContent":["export { default } from './Pills';\nexport * from './Pills';\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../../src/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,SAAxB","sourcesContent":["export { default } from './Pills';\n"],"file":"index.js"}
package/lib/es6/style/pills.shadow.css CHANGED
@@ -28,9 +28,9 @@ SPill {
28
28
  vertical-align: middle;
29
29
  font-family: inherit;
30
30
  cursor: pointer;
31
- color: var(--gray40);
32
- background: #fff;
33
- border: 1px solid var(--stone);
31
+ background: var(--white);
32
+ border: 1px solid var(--gray-200);
33
+ border-radius: var(--rounded-m);
34
34
 
35
35
  &::-moz-focus-inner {
36
36
  border: none;
@@ -45,18 +45,14 @@ SPill {
45
45
  }
46
46
 
47
47
  &:hover {
48
- background: color-mod(var(--stone) a(20%));
48
+ background: color-mod(var(--gray-400) a(20%));
49
49
  }
50
50
  }
51
51
 
52
52
  SPill[selected] {
53
- background: color-mod(var(--light-blue) a(20%));
54
- border-color: var(--light-blue);
53
+ background: color-mod(var(--blue-400) a(20%));
54
+ border-color: var(--blue-400);
55
55
  z-index: 1;
56
-
57
- &:enabled:hover {
58
- background: color-mod(var(--light-blue) a(20%));
59
- }
60
56
  }
61
57
 
62
58
  SPill[disabled] {
@@ -69,55 +65,25 @@ SPill[disabled] {
69
65
  }
70
66
 
71
67
  SPill[keyboardFocused] {
72
- box-shadow: var(--keyborad-focus);
68
+ box-shadow: var(--keyboard-focus);
73
69
  }
74
70
 
75
71
  SText {
76
- color: var(--gray20);
72
+ color: var(--gray-800);
77
73
  display: inline-flex;
78
- line-height: 1.1;
79
74
  }
80
75
 
81
76
  SAddon {
82
- color: var(--gray60);
77
+ color: var(--gray-500);
83
78
  display: inline-flex;
84
79
  align-items: center;
85
80
  justify-content: center;
86
- line-height: 1.1;
87
- }
88
-
89
- SPill[size='s'] {
90
- height: 18px;
91
- min-width: 18px;
92
- border-radius: 2px;
93
- font-size: 10px;
94
-
95
- & SText {
96
- margin-left: 4px;
97
- margin-right: 4px;
98
- }
99
-
100
- & SAddon {
101
- &:not(:only-child):first-child {
102
- margin-left: 4px;
103
- }
104
-
105
- &:not(:only-child):last-child {
106
- margin-right: 4px;
107
- }
108
-
109
- &:only-child {
110
- margin-left: -2px;
111
- margin-right: -2px;
112
- }
113
- }
114
81
  }
115
82
 
116
83
  SPill[size='m'] {
117
- height: 26px;
118
- min-width: 26px;
119
- border-radius: 3px;
120
- font-size: 12px;
84
+ height: var(--form-control-m);
85
+ min-width: var(--form-control-m);
86
+ font-size: var(--fs-200);
121
87
 
122
88
  & SText {
123
89
  margin-left: 8px;
@@ -134,49 +100,26 @@ SPill[size='m'] {
134
100
  }
135
101
 
136
102
  &:only-child {
137
- margin-left: -4px;
138
- margin-right: -4px;
103
+ margin-left: 8px;
104
+ margin-right: 8px;
139
105
  }
140
106
  }
141
107
  }
142
108
 
143
109
  SPill[size='l'] {
144
- height: 32px;
145
- min-width: 32px;
146
- border-radius: 4px;
147
- font-size: 14px;
110
+ height: var(--form-control-l);
111
+ min-width: var(--form-control-l);
112
+ font-size: var(--fs-300);
148
113
 
149
114
  & SText {
150
115
  margin-left: 8px;
151
116
  margin-right: 8px;
152
- }
153
-
154
- & SAddon {
155
- &:not(:only-child):first-child {
156
- margin-left: 8px;
157
- }
158
-
159
- &:not(:only-child):last-child {
160
- margin-right: 8px;
161
- }
162
117
 
163
118
  &:only-child {
164
- margin-left: -4px;
165
- margin-right: -4px;
119
+ margin-left: 12px;
120
+ margin-right: 12px;
166
121
  }
167
122
  }
168
- }
169
-
170
- SPill[size='xl'] {
171
- height: 42px;
172
- min-width: 42px;
173
- border-radius: 5px;
174
- font-size: 16px;
175
-
176
- & SText {
177
- margin-left: 12px;
178
- margin-right: 12px;
179
- }
180
123
 
181
124
  & SAddon {
182
125
  &:not(:only-child):first-child {
@@ -188,8 +131,8 @@ SPill[size='xl'] {
188
131
  }
189
132
 
190
133
  &:only-child {
191
- margin-left: -6px;
192
- margin-right: -6px;
134
+ margin-left: 12px;
135
+ margin-right: 12px;
193
136
  }
194
137
  }
195
138
  }
package/lib/types/index.d.ts CHANGED
@@ -8,7 +8,7 @@ export type PillsValue = string | number | boolean;
8
8
 
9
9
  export interface IPillsProps<T extends PillsValue = PillsValue> extends INeighborLocationProps {
10
10
  /** Pills size */
11
- size?: 'xl' | 'l' | 'm' | 's' | false;
11
+ size?: 'l' | 'm';
12
12
  /** Disabled state */
13
13
  disabled?: boolean;
14
14
  /** Called when the selection is changed */
@@ -20,10 +20,12 @@ export interface IPillsProps<T extends PillsValue = PillsValue> extends INeighbo
20
20
  }
21
21
 
22
22
  export interface IPillProps extends IBoxProps, INeighborItemProps, IKeyboardFocusProps {
23
+ /** Pill value */
24
+ value?: PillsValue;
23
25
  /** Disabled state */
24
26
  disabled?: boolean;
25
- /** Pill value */
26
- value: PillsValue;
27
+ /** Selected state */
28
+ selected?: boolean;
27
29
  /** Left addon text */
28
30
  addonLeft?: React.ElementType;
29
31
  /** Right addon tag */
@@ -42,8 +44,8 @@ declare const Pills: (<T, V extends PillsValue = PillsValue>(
42
44
  props: CProps<IPillsProps<V> & T, IPillsContext, IPopperHandlers>,
43
45
  ) => ReturnEl) & {
44
46
  Item: (<T>(props: CProps<IPillProps & T, {}, IPopperHandlers>) => ReturnEl) & {
45
- Text: typeof Box
46
- Addon: typeof Box
47
+ Text: typeof Box;
48
+ Addon: typeof Box;
47
49
  };
48
50
  };
49
51
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/pills",
3
3
  "description": "SEMRush Pills Component",
4
- "version": "3.5.3",
4
+ "version": "4.0.0",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",
@@ -22,6 +22,16 @@
22
22
  "react": "16.8 - 17"
23
23
  },
24
24
  "jest": {
25
- "preset": "jest-preset-ui"
25
+ "preset": "@semcore/jest-preset-ui"
26
+ },
27
+ "repository": {
28
+ "type": "git",
29
+ "url": "https://github.com/semrush/intergalactic.git",
30
+ "directory": "semcore/pills"
31
+ },
32
+ "devDependencies": {
33
+ "@semcore/jest-preset-ui": "1.0.0",
34
+ "@semcore/icon": "*",
35
+ "@semcore/badge": "*"
26
36
  }
27
37
  }
package/src/{Pills.js → Pills.jsx} RENAMED
@@ -1,13 +1,7 @@
1
1
  import React from 'react';
2
- import createComponent, {
3
- Component,
4
- sstyled,
5
- Root,
6
- } from '@semcore/core';
2
+ import createComponent, { Component, sstyled, Root } from '@semcore/core';
7
3
  import { Box } from '@semcore/flex-box';
8
- import NeighborLocation, {
9
- neighborLocationEnhance,
10
- } from '@semcore/neighbor-location';
4
+ import NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';
11
5
  import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
12
6
  import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
13
7
 
package/src/index.d.ts CHANGED
@@ -8,7 +8,7 @@ export type PillsValue = string | number | boolean;
8
8
 
9
9
  export interface IPillsProps<T extends PillsValue = PillsValue> extends INeighborLocationProps {
10
10
  /** Pills size */
11
- size?: 'xl' | 'l' | 'm' | 's' | false;
11
+ size?: 'l' | 'm';
12
12
  /** Disabled state */
13
13
  disabled?: boolean;
14
14
  /** Called when the selection is changed */
@@ -20,10 +20,12 @@ export interface IPillsProps<T extends PillsValue = PillsValue> extends INeighbo
20
20
  }
21
21
 
22
22
  export interface IPillProps extends IBoxProps, INeighborItemProps, IKeyboardFocusProps {
23
+ /** Pill value */
24
+ value?: PillsValue;
23
25
  /** Disabled state */
24
26
  disabled?: boolean;
25
- /** Pill value */
26
- value: PillsValue;
27
+ /** Selected state */
28
+ selected?: boolean;
27
29
  /** Left addon text */
28
30
  addonLeft?: React.ElementType;
29
31
  /** Right addon tag */
@@ -42,8 +44,8 @@ declare const Pills: (<T, V extends PillsValue = PillsValue>(
42
44
  props: CProps<IPillsProps<V> & T, IPillsContext, IPopperHandlers>,
43
45
  ) => ReturnEl) & {
44
46
  Item: (<T>(props: CProps<IPillProps & T, {}, IPopperHandlers>) => ReturnEl) & {
45
- Text: typeof Box
46
- Addon: typeof Box
47
+ Text: typeof Box;
48
+ Addon: typeof Box;
47
49
  };
48
50
  };
49
51
 
package/src/index.js CHANGED
@@ -1,2 +1 @@
1
1
  export { default } from './Pills';
2
- export * from './Pills';
package/src/style/pills.shadow.css CHANGED
@@ -28,9 +28,9 @@ SPill {
28
28
  vertical-align: middle;
29
29
  font-family: inherit;
30
30
  cursor: pointer;
31
- color: var(--gray40);
32
- background: #fff;
33
- border: 1px solid var(--stone);
31
+ background: var(--white);
32
+ border: 1px solid var(--gray-200);
33
+ border-radius: var(--rounded-m);
34
34
 
35
35
  &::-moz-focus-inner {
36
36
  border: none;
@@ -45,18 +45,14 @@ SPill {
45
45
  }
46
46
 
47
47
  &:hover {
48
- background: color-mod(var(--stone) a(20%));
48
+ background: color-mod(var(--gray-400) a(20%));
49
49
  }
50
50
  }
51
51
 
52
52
  SPill[selected] {
53
- background: color-mod(var(--light-blue) a(20%));
54
- border-color: var(--light-blue);
53
+ background: color-mod(var(--blue-400) a(20%));
54
+ border-color: var(--blue-400);
55
55
  z-index: 1;
56
-
57
- &:enabled:hover {
58
- background: color-mod(var(--light-blue) a(20%));
59
- }
60
56
  }
61
57
 
62
58
  SPill[disabled] {
@@ -69,55 +65,25 @@ SPill[disabled] {
69
65
  }
70
66
 
71
67
  SPill[keyboardFocused] {
72
- box-shadow: var(--keyborad-focus);
68
+ box-shadow: var(--keyboard-focus);
73
69
  }
74
70
 
75
71
  SText {
76
- color: var(--gray20);
72
+ color: var(--gray-800);
77
73
  display: inline-flex;
78
- line-height: 1.1;
79
74
  }
80
75
 
81
76
  SAddon {
82
- color: var(--gray60);
77
+ color: var(--gray-500);
83
78
  display: inline-flex;
84
79
  align-items: center;
85
80
  justify-content: center;
86
- line-height: 1.1;
87
- }
88
-
89
- SPill[size='s'] {
90
- height: 18px;
91
- min-width: 18px;
92
- border-radius: 2px;
93
- font-size: 10px;
94
-
95
- & SText {
96
- margin-left: 4px;
97
- margin-right: 4px;
98
- }
99
-
100
- & SAddon {
101
- &:not(:only-child):first-child {
102
- margin-left: 4px;
103
- }
104
-
105
- &:not(:only-child):last-child {
106
- margin-right: 4px;
107
- }
108
-
109
- &:only-child {
110
- margin-left: -2px;
111
- margin-right: -2px;
112
- }
113
- }
114
81
  }
115
82
 
116
83
  SPill[size='m'] {
117
- height: 26px;
118
- min-width: 26px;
119
- border-radius: 3px;
120
- font-size: 12px;
84
+ height: var(--form-control-m);
85
+ min-width: var(--form-control-m);
86
+ font-size: var(--fs-200);
121
87
 
122
88
  & SText {
123
89
  margin-left: 8px;
@@ -134,49 +100,26 @@ SPill[size='m'] {
134
100
  }
135
101
 
136
102
  &:only-child {
137
- margin-left: -4px;
138
- margin-right: -4px;
103
+ margin-left: 8px;
104
+ margin-right: 8px;
139
105
  }
140
106
  }
141
107
  }
142
108
 
143
109
  SPill[size='l'] {
144
- height: 32px;
145
- min-width: 32px;
146
- border-radius: 4px;
147
- font-size: 14px;
110
+ height: var(--form-control-l);
111
+ min-width: var(--form-control-l);
112
+ font-size: var(--fs-300);
148
113
 
149
114
  & SText {
150
115
  margin-left: 8px;
151
116
  margin-right: 8px;
152
- }
153
-
154
- & SAddon {
155
- &:not(:only-child):first-child {
156
- margin-left: 8px;
157
- }
158
-
159
- &:not(:only-child):last-child {
160
- margin-right: 8px;
161
- }
162
117
 
163
118
  &:only-child {
164
- margin-left: -4px;
165
- margin-right: -4px;
119
+ margin-left: 12px;
120
+ margin-right: 12px;
166
121
  }
167
122
  }
168
- }
169
-
170
- SPill[size='xl'] {
171
- height: 42px;
172
- min-width: 42px;
173
- border-radius: 5px;
174
- font-size: 16px;
175
-
176
- & SText {
177
- margin-left: 12px;
178
- margin-right: 12px;
179
- }
180
123
 
181
124
  & SAddon {
182
125
  &:not(:only-child):first-child {
@@ -188,8 +131,8 @@ SPill[size='xl'] {
188
131
  }
189
132
 
190
133
  &:only-child {
191
- margin-left: -6px;
192
- margin-right: -6px;
134
+ margin-left: 12px;
135
+ margin-right: 12px;
193
136
  }
194
137
  }
195
138
  }