@semcore/pills 5.43.4 → 16.0.0-prerelease.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 (13) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/lib/cjs/Pills.js +19 -22
  3. package/lib/cjs/Pills.js.map +1 -1
  4. package/lib/cjs/index.d.js.map +1 -1
  5. package/lib/cjs/style/pills.shadow.css +5 -15
  6. package/lib/es6/Pills.js +19 -21
  7. package/lib/es6/Pills.js.map +1 -1
  8. package/lib/es6/index.d.js.map +1 -1
  9. package/lib/es6/style/pills.shadow.css +5 -15
  10. package/lib/esm/Pills.mjs +23 -26
  11. package/lib/esm/style/pills.shadow.css +5 -15
  12. package/lib/types/index.d.ts +1 -4
  13. package/package.json +4 -7
package/CHANGELOG.md CHANGED
@@ -2,6 +2,12 @@
2
2
 
3
3
  CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
4
4
 
5
+ ## [16.0.0] - 2025-05-19
6
+
7
+ ### Break
8
+
9
+ - `keyboardFocusEnhance` to css `:focus-visible` property.
10
+
5
11
  ## [5.43.4] - 2025-05-13
6
12
 
7
13
  ### Changed
package/lib/cjs/Pills.js CHANGED
@@ -13,31 +13,28 @@ var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/hel
13
13
  var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
14
14
  var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
15
15
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
16
- var _index = require("@semcore/utils/lib/core/index");
17
- var _core = _interopRequireWildcard(require("@semcore/core"));
16
+ var _core = require("@semcore/core");
18
17
  var _react = _interopRequireDefault(require("react"));
19
18
  var _flexBox = require("@semcore/flex-box");
20
19
  var _neighborLocation = _interopRequireWildcard(require("@semcore/neighbor-location"));
21
- var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
22
- var _addonTextChildren = _interopRequireDefault(require("@semcore/utils/lib/addonTextChildren"));
23
- var _a11yEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/a11yEnhance"));
24
- var _logger = _interopRequireDefault(require("@semcore/utils/lib/logger"));
20
+ var _addonTextChildren = _interopRequireDefault(require("@semcore/core/lib/utils/addonTextChildren"));
21
+ var _a11yEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/a11yEnhance"));
22
+ var _logger = _interopRequireDefault(require("@semcore/core/lib/utils/logger"));
25
23
  /*!__reshadow-styles__:"./style/pills.shadow.css"*/
26
- var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SPills_b73wr_gg_{display:inline-flex;align-items:center;justify-content:center;isolation:isolate;outline:0}.___SPills_b73wr_gg_.__keyboardFocused_b73wr_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1}.___SPill_b73wr_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;-webkit-text-decoration: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:var(--intergalactic-bg-primary-neutral, #ffffff);border:1px solid var(--intergalactic-border-primary, #c4c7cf);border-radius:var(--intergalactic-control-rounded, 6px)}.___SPill_b73wr_gg_::-moz-focus-inner{border:0;padding:0}.___SPill_b73wr_gg_:active,.___SPill_b73wr_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPill_b73wr_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none;background:var(--intergalactic-bg-primary-neutral-hover, #f4f5f9)}}.___SPill_b73wr_gg_.__selected_b73wr_gg_{background:var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));border-color:var(--intergalactic-border-info-active, #006dca);z-index:1}.___SPill_b73wr_gg_.__disabled_b73wr_gg_{cursor:default;pointer-events:none}.___SPill_b73wr_gg_.__disabled_b73wr_gg_>*{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SPill_b73wr_gg_.__keyboardFocused_b73wr_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1}.___SText_b73wr_gg_{color:var(--intergalactic-text-primary, #191b23);display:inline-flex}.___SAddon_b73wr_gg_{color:var(--intergalactic-text-secondary, #6c6e79);display:inline-flex;align-items:center;justify-content:center}.___SPill_b73wr_gg_._size_m_b73wr_gg_{height:var(--intergalactic-form-control-m, 28px);min-width:var(--intergalactic-form-control-m, 28px);font-size:var(--intergalactic-fs-200, 14px)}.___SPill_b73wr_gg_._size_l_b73wr_gg_ .___SText_b73wr_gg_,.___SPill_b73wr_gg_._size_m_b73wr_gg_ .___SText_b73wr_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_b73wr_gg_._size_m_b73wr_gg_ .___SAddon_b73wr_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SPill_b73wr_gg_._size_m_b73wr_gg_ .___SAddon_b73wr_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_b73wr_gg_._size_m_b73wr_gg_ .___SAddon_b73wr_gg_:only-child{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_b73wr_gg_._size_l_b73wr_gg_{height:var(--intergalactic-form-control-l, 40px);min-width:var(--intergalactic-form-control-l, 40px);font-size:var(--intergalactic-fs-300, 16px)}.___SPill_b73wr_gg_._size_l_b73wr_gg_ .___SAddon_b73wr_gg_:only-child,.___SPill_b73wr_gg_._size_l_b73wr_gg_ .___SText_b73wr_gg_:only-child{margin-left:var(--intergalactic-spacing-3x, 12px);margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_b73wr_gg_._size_l_b73wr_gg_ .___SAddon_b73wr_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SPill_b73wr_gg_._size_l_b73wr_gg_ .___SAddon_b73wr_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_b73wr_gg_._neighborLocation_right_b73wr_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_b73wr_gg_._neighborLocation_both_b73wr_gg_{border-radius:0;margin-left:-1px}.___SPill_b73wr_gg_._neighborLocation_left_b73wr_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}", /*__inner_css_end__*/"b73wr_gg_"),
24
+ var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SPill_1642b_gg_,.___SPills_1642b_gg_{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--intergalactic-control-rounded, 6px)}.___SPills_1642b_gg_{isolation:isolate}.___SPill_1642b_gg_{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;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;background:var(--intergalactic-bg-primary-neutral, #ffffff);border:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SPill_1642b_gg_::-moz-focus-inner{border:0;padding:0}.___SPill_1642b_gg_:active{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPill_1642b_gg_:hover{background:var(--intergalactic-bg-primary-neutral-hover, #f4f5f9)}}.___SPill_1642b_gg_.__selected_1642b_gg_{background:var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));border-color:var(--intergalactic-border-info-active, #006dca);z-index:2}.___SPill_1642b_gg_:active,.___SPill_1642b_gg_:focus-visible{z-index:1}@media (hover:hover){.___SPill_1642b_gg_:hover{z-index:1}}.___SPill_1642b_gg_.__disabled_1642b_gg_{cursor:default;pointer-events:none}.___SPill_1642b_gg_.__disabled_1642b_gg_>*{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SText_1642b_gg_{color:var(--intergalactic-text-primary, #191b23);display:inline-flex}.___SAddon_1642b_gg_{color:var(--intergalactic-text-secondary, #6c6e79);display:inline-flex;align-items:center;justify-content:center}.___SPill_1642b_gg_._size_m_1642b_gg_{height:var(--intergalactic-form-control-m, 28px);min-width:var(--intergalactic-form-control-m, 28px);font-size:var(--intergalactic-fs-200, 14px)}.___SPill_1642b_gg_._size_l_1642b_gg_ .___SText_1642b_gg_,.___SPill_1642b_gg_._size_m_1642b_gg_ .___SText_1642b_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_1642b_gg_._size_m_1642b_gg_ .___SAddon_1642b_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SPill_1642b_gg_._size_m_1642b_gg_ .___SAddon_1642b_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_1642b_gg_._size_m_1642b_gg_ .___SAddon_1642b_gg_:only-child{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_1642b_gg_._size_l_1642b_gg_{height:var(--intergalactic-form-control-l, 40px);min-width:var(--intergalactic-form-control-l, 40px);font-size:var(--intergalactic-fs-300, 16px)}.___SPill_1642b_gg_._size_l_1642b_gg_ .___SAddon_1642b_gg_:only-child,.___SPill_1642b_gg_._size_l_1642b_gg_ .___SText_1642b_gg_:only-child{margin-left:var(--intergalactic-spacing-3x, 12px);margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_1642b_gg_._size_l_1642b_gg_ .___SAddon_1642b_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SPill_1642b_gg_._size_l_1642b_gg_ .___SAddon_1642b_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_1642b_gg_._neighborLocation_right_1642b_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_1642b_gg_._neighborLocation_both_1642b_gg_{border-radius:0;margin-left:-1px}.___SPill_1642b_gg_._neighborLocation_left_1642b_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}", /*__inner_css_end__*/"1642b_gg_"),
27
25
  /*__reshadow_css_end__*/
28
26
  {
29
- "__SPills": "___SPills_b73wr_gg_",
30
- "_keyboardFocused": "__keyboardFocused_b73wr_gg_",
31
- "__SPill": "___SPill_b73wr_gg_",
32
- "_selected": "__selected_b73wr_gg_",
33
- "__SText": "___SText_b73wr_gg_",
34
- "__SAddon": "___SAddon_b73wr_gg_",
35
- "_neighborLocation_right": "_neighborLocation_right_b73wr_gg_",
36
- "_neighborLocation_both": "_neighborLocation_both_b73wr_gg_",
37
- "_neighborLocation_left": "_neighborLocation_left_b73wr_gg_",
38
- "_disabled": "__disabled_b73wr_gg_",
39
- "_size_m": "_size_m_b73wr_gg_",
40
- "_size_l": "_size_l_b73wr_gg_"
27
+ "__SPills": "___SPills_1642b_gg_",
28
+ "__SPill": "___SPill_1642b_gg_",
29
+ "_selected": "__selected_1642b_gg_",
30
+ "__SText": "___SText_1642b_gg_",
31
+ "__SAddon": "___SAddon_1642b_gg_",
32
+ "_neighborLocation_right": "_neighborLocation_right_1642b_gg_",
33
+ "_neighborLocation_both": "_neighborLocation_both_1642b_gg_",
34
+ "_neighborLocation_left": "_neighborLocation_left_1642b_gg_",
35
+ "_disabled": "__disabled_1642b_gg_",
36
+ "_size_m": "_size_m_1642b_gg_",
37
+ "_size_l": "_size_l_1642b_gg_"
41
38
  });
42
39
  var optionsA11yEnhance = {
43
40
  onNeighborChange: function onNeighborChange(neighborElement, props) {
@@ -158,7 +155,7 @@ var RootPills = /*#__PURE__*/function (_Component) {
158
155
  behavior: behavior !== null && behavior !== void 0 ? behavior : 'auto'
159
156
  };
160
157
  });
161
- (0, _defineProperty2["default"])(RootPills, "enhance", [(0, _a11yEnhance["default"])(optionsA11yEnhance), (0, _keyboardFocusEnhance["default"])()]);
158
+ (0, _defineProperty2["default"])(RootPills, "enhance", [(0, _a11yEnhance["default"])(optionsA11yEnhance)]);
162
159
  function Pill(props) {
163
160
  var _ref2 = arguments[0],
164
161
  _ref6;
@@ -183,6 +180,7 @@ function Pill(props) {
183
180
  return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPill, _ref6.cn("SPill", (0, _objectSpread2["default"])({}, (0, _core.assignProps)((0, _objectSpread2["default"])({
184
181
  "tag": 'button',
185
182
  "type": 'button',
183
+ "tabIndex": 0,
186
184
  "neighborLocation": neighborLocation,
187
185
  "aria-disabled": disabled
188
186
  }, roleAreaProps), _ref2))), addonLeft ? /*#__PURE__*/_react["default"].createElement(Pills.Item.Addon, {
@@ -191,7 +189,6 @@ function Pill(props) {
191
189
  tag: addonRight
192
190
  }) : null);
193
191
  }
194
- Pill.enhance = [(0, _keyboardFocusEnhance["default"])()];
195
192
  function Text(props) {
196
193
  var _ref3 = arguments[0],
197
194
  _ref7;
@@ -208,7 +205,7 @@ function Addon(props) {
208
205
  "tag": 'span'
209
206
  }, _ref4))));
210
207
  }
211
- var Pills = (0, _core["default"])(RootPills, {
208
+ var Pills = (0, _core.createComponent)(RootPills, {
212
209
  Item: [Pill, {
213
210
  Text: Text,
214
211
  Addon: Addon
package/lib/cjs/Pills.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Pills.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_flexBox","_neighborLocation","_keyboardFocusEnhance","_addonTextChildren","_a11yEnhance","_logger","style","_index","sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","RootPills","_Component","_inherits2","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","value","e","handlers","event","key","preventDefault","startIndex","type","selectable","itemValues","element","itemRefs","disabled","undefined","_createClass2","componentDidMount","log","warn","asProps","uncontrolledProps","getItemProps","index","_this$asProps","size","isSelected","selected","tabIndex","onClick","bindHandlerClick","onKeyDown","bindHandleKeyDown","render","_ref","_ref5","SPills","Box","_this$asProps2","Children","styles","controlsLength","createElement","cn","_objectSpread2","assignProps","Component","_ref9","defaultValue","a11yEnhance","keyboardFocusEnhance","Pill","_ref2","arguments[0]","_ref6","SPill","addonLeft","addonRight","neighborLocation","useNeighborLocationDetect","roleAreaProps","role","Pills","Item","Addon","tag","addonTextChildren","Text","enhance","_ref3","_ref7","SText","_ref4","_ref8","SAddon","createComponent","wrapPills","wrapper","exports","_default"],"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, { useNeighborLocationDetect } from '@semcore/neighbor-location';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';\nimport log from '@semcore/utils/lib/logger';\n\nimport style from './style/pills.shadow.css';\n\nconst optionsA11yEnhance = {\n onNeighborChange: (neighborElement, props) => {\n if (neighborElement) {\n neighborElement.focus();\n if (props.behavior === 'auto' || props.behavior === 'radio') {\n neighborElement.click();\n }\n }\n },\n childSelector: (props) =>\n props.behavior === 'auto' || props.behavior === 'radio' ? ['role', 'radio'] : ['role', 'tab'],\n};\n\nclass RootPills extends Component {\n static displayName = 'Pills';\n static style = style;\n static defaultProps = ({ behavior }) => ({\n size: 'm',\n defaultValue: null,\n behavior: behavior ?? 'auto',\n });\n itemValues = [];\n static enhance = [a11yEnhance(optionsA11yEnhance), keyboardFocusEnhance()];\n\n componentDidMount() {\n log.warn(\n this.asProps.behavior === 'tabs',\n 'Use behavior `manual` instead of `tabs`. \\n`tabs` is deprecated and will be removed in the next major release.',\n 'Pills',\n );\n\n log.warn(\n this.asProps.behavior === 'radio',\n 'Use behavior `auto` (or nothing, it is default value) instead of `radio`. \\n`radio` is deprecated and will be removed in the next major release.',\n 'Pills',\n );\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 bindHandleKeyDown = (value) => (event) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.handlers.value(value, event);\n }\n };\n\n getItemProps(props, index) {\n const { value, size, disabled, behavior } = this.asProps;\n const isSelected = value === props.value;\n\n this.itemValues[index] = props.value;\n return {\n index: index,\n size,\n disabled,\n selected: isSelected,\n behavior,\n tabIndex: isSelected ? 0 : -1,\n onClick: this.bindHandlerClick(props.value),\n onKeyDown: this.bindHandleKeyDown(props.value),\n };\n }\n\n changeIndex = (startIndex, type) => {\n let selectable = false;\n\n while (!selectable && startIndex >= 0 && startIndex < this.itemValues.length) {\n if (type === 'increment') startIndex++;\n if (type === 'decrement') startIndex--;\n\n const element = this.itemRefs[startIndex];\n\n if (element?.disabled === false) {\n selectable = true;\n }\n }\n\n return startIndex >= 0 && startIndex < this.itemValues.length ? startIndex : undefined;\n };\n\n render() {\n const SPills = Root;\n const { Children, styles, controlsLength, disabled, behavior, value } = this.asProps;\n\n return sstyled(styles)(\n <SPills\n render={Box}\n role={behavior === 'radio' || behavior === 'auto' ? 'radiogroup' : 'tablist'}\n aria-disabled={disabled}\n use:tabIndex={value !== null ? -1 : 0}\n >\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, index, behavior } = props;\n const neighborLocation = useNeighborLocationDetect(index);\n const roleAreaProps = {};\n if (behavior === 'radio' || behavior === 'auto') {\n roleAreaProps.role = 'radio';\n roleAreaProps['aria-checked'] = selected;\n } else {\n roleAreaProps.role = 'tab';\n roleAreaProps['aria-selected'] = selected;\n }\n return sstyled(styles)(\n <SPill\n render={Box}\n tag='button'\n type='button'\n neighborLocation={neighborLocation}\n aria-disabled={disabled}\n {...roleAreaProps}\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()];\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 const wrapPills = (wrapper) => wrapper;\n\nexport default Pills;\n"],"mappings":"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"}
1
+ {"version":3,"file":"Pills.js","names":["_core","require","_react","_interopRequireDefault","_flexBox","_neighborLocation","_interopRequireWildcard","_addonTextChildren","_a11yEnhance","_logger","style","sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","RootPills","_Component","_inherits2","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","value","e","handlers","event","key","preventDefault","startIndex","type","selectable","itemValues","element","itemRefs","disabled","undefined","_createClass2","componentDidMount","log","warn","asProps","uncontrolledProps","getItemProps","index","_this$asProps","size","isSelected","selected","tabIndex","onClick","bindHandlerClick","onKeyDown","bindHandleKeyDown","render","_ref","_ref5","SPills","Box","_this$asProps2","Children","styles","controlsLength","createElement","cn","_objectSpread2","assignProps","Component","_ref9","defaultValue","a11yEnhance","Pill","_ref2","arguments[0]","_ref6","SPill","addonLeft","addonRight","neighborLocation","useNeighborLocationDetect","roleAreaProps","role","Pills","Item","Addon","tag","addonTextChildren","Text","_ref3","_ref7","SText","_ref4","_ref8","SAddon","createComponent","wrapPills","wrapper","exports","_default"],"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, { useNeighborLocationDetect } from '@semcore/neighbor-location';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\nimport log from '@semcore/core/lib/utils/logger';\n\nimport style from './style/pills.shadow.css';\n\nconst optionsA11yEnhance = {\n onNeighborChange: (neighborElement, props) => {\n if (neighborElement) {\n neighborElement.focus();\n if (props.behavior === 'auto' || props.behavior === 'radio') {\n neighborElement.click();\n }\n }\n },\n childSelector: (props) =>\n props.behavior === 'auto' || props.behavior === 'radio' ? ['role', 'radio'] : ['role', 'tab'],\n};\n\nclass RootPills extends Component {\n static displayName = 'Pills';\n static style = style;\n static defaultProps = ({ behavior }) => ({\n size: 'm',\n defaultValue: null,\n behavior: behavior ?? 'auto',\n });\n itemValues = [];\n static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n componentDidMount() {\n log.warn(\n this.asProps.behavior === 'tabs',\n 'Use behavior `manual` instead of `tabs`. \\n`tabs` is deprecated and will be removed in the next major release.',\n 'Pills',\n );\n\n log.warn(\n this.asProps.behavior === 'radio',\n 'Use behavior `auto` (or nothing, it is default value) instead of `radio`. \\n`radio` is deprecated and will be removed in the next major release.',\n 'Pills',\n );\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 bindHandleKeyDown = (value) => (event) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.handlers.value(value, event);\n }\n };\n\n getItemProps(props, index) {\n const { value, size, disabled, behavior } = this.asProps;\n const isSelected = value === props.value;\n\n this.itemValues[index] = props.value;\n return {\n index: index,\n size,\n disabled,\n selected: isSelected,\n behavior,\n tabIndex: isSelected ? 0 : -1,\n onClick: this.bindHandlerClick(props.value),\n onKeyDown: this.bindHandleKeyDown(props.value),\n };\n }\n\n changeIndex = (startIndex, type) => {\n let selectable = false;\n\n while (!selectable && startIndex >= 0 && startIndex < this.itemValues.length) {\n if (type === 'increment') startIndex++;\n if (type === 'decrement') startIndex--;\n\n const element = this.itemRefs[startIndex];\n\n if (element?.disabled === false) {\n selectable = true;\n }\n }\n\n return startIndex >= 0 && startIndex < this.itemValues.length ? startIndex : undefined;\n };\n\n render() {\n const SPills = Root;\n const { Children, styles, controlsLength, disabled, behavior, value } = this.asProps;\n\n return sstyled(styles)(\n <SPills\n render={Box}\n role={behavior === 'radio' || behavior === 'auto' ? 'radiogroup' : 'tablist'}\n aria-disabled={disabled}\n use:tabIndex={value !== null ? -1 : 0}\n >\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, index, behavior } = props;\n const neighborLocation = useNeighborLocationDetect(index);\n const roleAreaProps = {};\n if (behavior === 'radio' || behavior === 'auto') {\n roleAreaProps.role = 'radio';\n roleAreaProps['aria-checked'] = selected;\n } else {\n roleAreaProps.role = 'tab';\n roleAreaProps['aria-selected'] = selected;\n }\n return sstyled(styles)(\n <SPill\n render={Box}\n tag='button'\n type='button'\n tabIndex={0}\n neighborLocation={neighborLocation}\n aria-disabled={disabled}\n {...roleAreaProps}\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\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 const wrapPills = (wrapper) => wrapper;\n\nexport default Pills;\n"],"mappings":"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"}
package/lib/cjs/index.d.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { Box, BoxProps } from '@semcore/flex-box';\nimport { NeighborItemProps, NeighborLocationProps } from '@semcore/neighbor-location';\nimport { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nexport type PillsValue = string | number | boolean | null;\n\n/** @deprecated */\nexport interface IPillsProps<T extends PillsValue = PillsValue>\n extends PillsProps<T>,\n UnknownProperties {}\nexport type PillsProps<T extends PillsValue = PillsValue> = NeighborLocationProps &\n KeyboardFocusProps &\n BoxProps & {\n /** Pills size */\n size?: 'l' | 'm';\n /** Disabled state */\n disabled?: boolean;\n /** Called when the selection is changed */\n onChange?:\n | ((value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void)\n | React.Dispatch<React.SetStateAction<T>>;\n /** Value for the selected pill */\n value?: T;\n /** Default value for the selected pill */\n defaultValue?: T;\n /** Sets semantic role for corresponding behavior,\n * when set to `auto` pressing left and right arrows\n * selects corresponding sibling pill.\n *\n * It's recommended to use `auto` behavior in forms\n * while `manual` behavior for navigation and layout.\n * @default tabs\n */\n behavior?: /** @deprecated use `manual` */\n | 'tabs'\n /** @deprecated use `auto` */\n | 'radio'\n | 'auto'\n | 'manual';\n };\n\n/** @deprecated */\nexport interface IPillProps extends PillProps, UnknownProperties {}\nexport type PillProps = BoxProps &\n NeighborItemProps &\n KeyboardFocusProps & {\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\n/** @deprecated */\nexport interface IPillsContext extends PillsContext, UnknownProperties {}\nexport type PillsContext = {\n getItemProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface IPillsHandlers extends PillsHandlers, UnknownProperties {}\nexport type PillsHandlers = {\n value: (value: PillsValue) => void;\n};\n\ntype IntergalacticPillsComponent<PropsExtending = {}> = (<\n Value extends PillsValue,\n Tag extends Intergalactic.Tag = 'div',\n>(\n props: Intergalactic.InternalTypings.ComponentProps<\n Tag,\n 'div',\n PillsProps<Value>,\n PillsContext,\n [handlers: PillsHandlers]\n > &\n PropsExtending,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', PillsProps>;\n\ndeclare const Pills: IntergalacticPillsComponent & {\n Item: Intergalactic.Component<'button', PillProps, [handlers: PillsHandlers]> & {\n Text: typeof Box;\n Addon: typeof Box;\n };\n};\n\ndeclare const wrapPills: <PropsExtending extends {}>(\n wrapper: (\n props: Intergalactic.InternalTypings.UntypeRefAndTag<\n Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticPillsComponent>\n > &\n PropsExtending,\n ) => React.ReactNode,\n) => IntergalacticPillsComponent<PropsExtending>;\nexport { wrapPills };\n\nexport default Pills;\n"],"mappings":""}
1
+ {"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { Box, BoxProps } from '@semcore/flex-box';\nimport { NeighborItemProps, NeighborLocationProps } from '@semcore/neighbor-location';\n\nexport type PillsValue = string | number | boolean | null;\n\n/** @deprecated */\nexport interface IPillsProps<T extends PillsValue = PillsValue>\n extends PillsProps<T>,\n UnknownProperties {}\nexport type PillsProps<T extends PillsValue = PillsValue> = NeighborLocationProps &\n BoxProps & {\n /** Pills size */\n size?: 'l' | 'm';\n /** Disabled state */\n disabled?: boolean;\n /** Called when the selection is changed */\n onChange?:\n | ((value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void)\n | React.Dispatch<React.SetStateAction<T>>;\n /** Value for the selected pill */\n value?: T;\n /** Default value for the selected pill */\n defaultValue?: T;\n /** Sets semantic role for corresponding behavior,\n * when set to `auto` pressing left and right arrows\n * selects corresponding sibling pill.\n *\n * It's recommended to use `auto` behavior in forms\n * while `manual` behavior for navigation and layout.\n * @default tabs\n */\n behavior?: /** @deprecated use `manual` */\n | 'tabs'\n /** @deprecated use `auto` */\n | 'radio'\n | 'auto'\n | 'manual';\n };\n\n/** @deprecated */\nexport interface IPillProps extends PillProps, UnknownProperties {}\nexport type PillProps = BoxProps &\n NeighborItemProps & {\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\n/** @deprecated */\nexport interface IPillsContext extends PillsContext, UnknownProperties {}\nexport type PillsContext = {\n getItemProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface IPillsHandlers extends PillsHandlers, UnknownProperties {}\nexport type PillsHandlers = {\n value: (value: PillsValue) => void;\n};\n\ntype IntergalacticPillsComponent<PropsExtending = {}> = (<\n Value extends PillsValue,\n Tag extends Intergalactic.Tag = 'div',\n>(\n props: Intergalactic.InternalTypings.ComponentProps<\n Tag,\n 'div',\n PillsProps<Value>,\n PillsContext,\n [handlers: PillsHandlers]\n > &\n PropsExtending,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', PillsProps>;\n\ndeclare const Pills: IntergalacticPillsComponent & {\n Item: Intergalactic.Component<'button', PillProps, [handlers: PillsHandlers]> & {\n Text: typeof Box;\n Addon: typeof Box;\n };\n};\n\ndeclare const wrapPills: <PropsExtending extends {}>(\n wrapper: (\n props: Intergalactic.InternalTypings.UntypeRefAndTag<\n Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticPillsComponent>\n > &\n PropsExtending,\n ) => React.ReactNode,\n) => IntergalacticPillsComponent<PropsExtending>;\nexport { wrapPills };\n\nexport default Pills;\n"],"mappings":""}
package/lib/cjs/style/pills.shadow.css CHANGED
@@ -3,12 +3,7 @@ SPills {
3
3
  align-items: center;
4
4
  justify-content: center;
5
5
  isolation: isolate;
6
- outline: none;
7
- }
8
-
9
- SPills[keyboardFocused]:focus {
10
- box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
11
- z-index: 1;
6
+ border-radius: var(--intergalactic-control-rounded, 6px);
12
7
  }
13
8
 
14
9
  SPill {
@@ -27,7 +22,6 @@ SPill {
27
22
  text-decoration: none;
28
23
  -webkit-tap-highlight-color: transparent;
29
24
  overflow: visible;
30
- outline: 0;
31
25
  text-align: center;
32
26
  vertical-align: middle;
33
27
  font-family: inherit;
@@ -41,9 +35,7 @@ SPill {
41
35
  padding: 0;
42
36
  }
43
37
 
44
- &:active,
45
- &:hover,
46
- &:focus {
38
+ &:active {
47
39
  outline: 0;
48
40
  text-decoration: none;
49
41
  }
@@ -56,6 +48,9 @@ SPill {
56
48
  SPill[selected] {
57
49
  background: var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));
58
50
  border-color: var(--intergalactic-border-info-active, #006dca);
51
+ z-index: 2;
52
+ }
53
+ SPill:focus-visible, SPill:hover, SPill:active {
59
54
  z-index: 1;
60
55
  }
61
56
 
@@ -69,11 +64,6 @@ SPill[disabled] {
69
64
  }
70
65
  }
71
66
 
72
- SPill[keyboardFocused] {
73
- box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
74
- z-index: 1;
75
- }
76
-
77
67
  SText {
78
68
  color: var(--intergalactic-text-primary, #191b23);
79
69
  display: inline-flex;
package/lib/es6/Pills.js CHANGED
@@ -5,35 +5,33 @@ import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized
5
5
  import _inherits from "@babel/runtime/helpers/inherits";
6
6
  import _createSuper from "@babel/runtime/helpers/createSuper";
7
7
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
8
- import { sstyled as _sstyled } from "@semcore/utils/lib/core/index";
8
+ import { sstyled as _sstyled } from "@semcore/core";
9
9
  import { assignProps as _assignProps4 } from "@semcore/core";
10
10
  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
  import React from 'react';
14
- import createComponent, { Component, sstyled, Root } from '@semcore/core';
14
+ import { createComponent, Component, sstyled, Root } from '@semcore/core';
15
15
  import { Box } from '@semcore/flex-box';
16
16
  import NeighborLocation, { useNeighborLocationDetect } from '@semcore/neighbor-location';
17
- import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
18
- import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
19
- import a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';
20
- import log from '@semcore/utils/lib/logger';
17
+ import addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';
18
+ import a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';
19
+ import log from '@semcore/core/lib/utils/logger';
21
20
  /*!__reshadow-styles__:"./style/pills.shadow.css"*/
22
- var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SPills_b73wr_gg_{display:inline-flex;align-items:center;justify-content:center;isolation:isolate;outline:0}.___SPills_b73wr_gg_.__keyboardFocused_b73wr_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1}.___SPill_b73wr_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;-webkit-text-decoration: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:var(--intergalactic-bg-primary-neutral, #ffffff);border:1px solid var(--intergalactic-border-primary, #c4c7cf);border-radius:var(--intergalactic-control-rounded, 6px)}.___SPill_b73wr_gg_::-moz-focus-inner{border:0;padding:0}.___SPill_b73wr_gg_:active,.___SPill_b73wr_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPill_b73wr_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none;background:var(--intergalactic-bg-primary-neutral-hover, #f4f5f9)}}.___SPill_b73wr_gg_.__selected_b73wr_gg_{background:var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));border-color:var(--intergalactic-border-info-active, #006dca);z-index:1}.___SPill_b73wr_gg_.__disabled_b73wr_gg_{cursor:default;pointer-events:none}.___SPill_b73wr_gg_.__disabled_b73wr_gg_>*{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SPill_b73wr_gg_.__keyboardFocused_b73wr_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1}.___SText_b73wr_gg_{color:var(--intergalactic-text-primary, #191b23);display:inline-flex}.___SAddon_b73wr_gg_{color:var(--intergalactic-text-secondary, #6c6e79);display:inline-flex;align-items:center;justify-content:center}.___SPill_b73wr_gg_._size_m_b73wr_gg_{height:var(--intergalactic-form-control-m, 28px);min-width:var(--intergalactic-form-control-m, 28px);font-size:var(--intergalactic-fs-200, 14px)}.___SPill_b73wr_gg_._size_l_b73wr_gg_ .___SText_b73wr_gg_,.___SPill_b73wr_gg_._size_m_b73wr_gg_ .___SText_b73wr_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_b73wr_gg_._size_m_b73wr_gg_ .___SAddon_b73wr_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SPill_b73wr_gg_._size_m_b73wr_gg_ .___SAddon_b73wr_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_b73wr_gg_._size_m_b73wr_gg_ .___SAddon_b73wr_gg_:only-child{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_b73wr_gg_._size_l_b73wr_gg_{height:var(--intergalactic-form-control-l, 40px);min-width:var(--intergalactic-form-control-l, 40px);font-size:var(--intergalactic-fs-300, 16px)}.___SPill_b73wr_gg_._size_l_b73wr_gg_ .___SAddon_b73wr_gg_:only-child,.___SPill_b73wr_gg_._size_l_b73wr_gg_ .___SText_b73wr_gg_:only-child{margin-left:var(--intergalactic-spacing-3x, 12px);margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_b73wr_gg_._size_l_b73wr_gg_ .___SAddon_b73wr_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SPill_b73wr_gg_._size_l_b73wr_gg_ .___SAddon_b73wr_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_b73wr_gg_._neighborLocation_right_b73wr_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_b73wr_gg_._neighborLocation_both_b73wr_gg_{border-radius:0;margin-left:-1px}.___SPill_b73wr_gg_._neighborLocation_left_b73wr_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}", /*__inner_css_end__*/"b73wr_gg_"),
21
+ var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SPill_1642b_gg_,.___SPills_1642b_gg_{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--intergalactic-control-rounded, 6px)}.___SPills_1642b_gg_{isolation:isolate}.___SPill_1642b_gg_{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;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;background:var(--intergalactic-bg-primary-neutral, #ffffff);border:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SPill_1642b_gg_::-moz-focus-inner{border:0;padding:0}.___SPill_1642b_gg_:active{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPill_1642b_gg_:hover{background:var(--intergalactic-bg-primary-neutral-hover, #f4f5f9)}}.___SPill_1642b_gg_.__selected_1642b_gg_{background:var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));border-color:var(--intergalactic-border-info-active, #006dca);z-index:2}.___SPill_1642b_gg_:active,.___SPill_1642b_gg_:focus-visible{z-index:1}@media (hover:hover){.___SPill_1642b_gg_:hover{z-index:1}}.___SPill_1642b_gg_.__disabled_1642b_gg_{cursor:default;pointer-events:none}.___SPill_1642b_gg_.__disabled_1642b_gg_>*{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SText_1642b_gg_{color:var(--intergalactic-text-primary, #191b23);display:inline-flex}.___SAddon_1642b_gg_{color:var(--intergalactic-text-secondary, #6c6e79);display:inline-flex;align-items:center;justify-content:center}.___SPill_1642b_gg_._size_m_1642b_gg_{height:var(--intergalactic-form-control-m, 28px);min-width:var(--intergalactic-form-control-m, 28px);font-size:var(--intergalactic-fs-200, 14px)}.___SPill_1642b_gg_._size_l_1642b_gg_ .___SText_1642b_gg_,.___SPill_1642b_gg_._size_m_1642b_gg_ .___SText_1642b_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_1642b_gg_._size_m_1642b_gg_ .___SAddon_1642b_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SPill_1642b_gg_._size_m_1642b_gg_ .___SAddon_1642b_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_1642b_gg_._size_m_1642b_gg_ .___SAddon_1642b_gg_:only-child{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_1642b_gg_._size_l_1642b_gg_{height:var(--intergalactic-form-control-l, 40px);min-width:var(--intergalactic-form-control-l, 40px);font-size:var(--intergalactic-fs-300, 16px)}.___SPill_1642b_gg_._size_l_1642b_gg_ .___SAddon_1642b_gg_:only-child,.___SPill_1642b_gg_._size_l_1642b_gg_ .___SText_1642b_gg_:only-child{margin-left:var(--intergalactic-spacing-3x, 12px);margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_1642b_gg_._size_l_1642b_gg_ .___SAddon_1642b_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SPill_1642b_gg_._size_l_1642b_gg_ .___SAddon_1642b_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_1642b_gg_._neighborLocation_right_1642b_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_1642b_gg_._neighborLocation_both_1642b_gg_{border-radius:0;margin-left:-1px}.___SPill_1642b_gg_._neighborLocation_left_1642b_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}", /*__inner_css_end__*/"1642b_gg_"),
23
22
  /*__reshadow_css_end__*/
24
23
  {
25
- "__SPills": "___SPills_b73wr_gg_",
26
- "_keyboardFocused": "__keyboardFocused_b73wr_gg_",
27
- "__SPill": "___SPill_b73wr_gg_",
28
- "_selected": "__selected_b73wr_gg_",
29
- "__SText": "___SText_b73wr_gg_",
30
- "__SAddon": "___SAddon_b73wr_gg_",
31
- "_neighborLocation_right": "_neighborLocation_right_b73wr_gg_",
32
- "_neighborLocation_both": "_neighborLocation_both_b73wr_gg_",
33
- "_neighborLocation_left": "_neighborLocation_left_b73wr_gg_",
34
- "_disabled": "__disabled_b73wr_gg_",
35
- "_size_m": "_size_m_b73wr_gg_",
36
- "_size_l": "_size_l_b73wr_gg_"
24
+ "__SPills": "___SPills_1642b_gg_",
25
+ "__SPill": "___SPill_1642b_gg_",
26
+ "_selected": "__selected_1642b_gg_",
27
+ "__SText": "___SText_1642b_gg_",
28
+ "__SAddon": "___SAddon_1642b_gg_",
29
+ "_neighborLocation_right": "_neighborLocation_right_1642b_gg_",
30
+ "_neighborLocation_both": "_neighborLocation_both_1642b_gg_",
31
+ "_neighborLocation_left": "_neighborLocation_left_1642b_gg_",
32
+ "_disabled": "__disabled_1642b_gg_",
33
+ "_size_m": "_size_m_1642b_gg_",
34
+ "_size_l": "_size_l_1642b_gg_"
37
35
  });
38
36
  var optionsA11yEnhance = {
39
37
  onNeighborChange: function onNeighborChange(neighborElement, props) {
@@ -154,7 +152,7 @@ _defineProperty(RootPills, "defaultProps", function (_ref9) {
154
152
  behavior: behavior !== null && behavior !== void 0 ? behavior : 'auto'
155
153
  };
156
154
  });
157
- _defineProperty(RootPills, "enhance", [a11yEnhance(optionsA11yEnhance), keyboardFocusEnhance()]);
155
+ _defineProperty(RootPills, "enhance", [a11yEnhance(optionsA11yEnhance)]);
158
156
  function Pill(props) {
159
157
  var _ref2 = arguments[0],
160
158
  _ref6;
@@ -179,6 +177,7 @@ function Pill(props) {
179
177
  return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SPill, _ref6.cn("SPill", _objectSpread({}, _assignProps2(_objectSpread({
180
178
  "tag": 'button',
181
179
  "type": 'button',
180
+ "tabIndex": 0,
182
181
  "neighborLocation": neighborLocation,
183
182
  "aria-disabled": disabled
184
183
  }, roleAreaProps), _ref2))), addonLeft ? /*#__PURE__*/React.createElement(Pills.Item.Addon, {
@@ -187,7 +186,6 @@ function Pill(props) {
187
186
  tag: addonRight
188
187
  }) : null);
189
188
  }
190
- Pill.enhance = [keyboardFocusEnhance()];
191
189
  function Text(props) {
192
190
  var _ref3 = arguments[0],
193
191
  _ref7;
package/lib/es6/Pills.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Pills.js","names":["React","createComponent","Component","sstyled","Root","Box","NeighborLocation","useNeighborLocationDetect","keyboardFocusEnhance","addonTextChildren","a11yEnhance","log","style","_sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","RootPills","_Component","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty","_assertThisInitialized","value","e","handlers","event","key","preventDefault","startIndex","type","selectable","itemValues","element","itemRefs","disabled","undefined","_createClass","componentDidMount","warn","asProps","uncontrolledProps","getItemProps","index","_this$asProps","size","isSelected","selected","tabIndex","onClick","bindHandlerClick","onKeyDown","bindHandleKeyDown","render","_ref","_ref5","SPills","_this$asProps2","Children","styles","controlsLength","createElement","cn","_objectSpread","_assignProps","_ref9","defaultValue","Pill","_ref2","arguments[0]","_ref6","SPill","addonLeft","addonRight","neighborLocation","roleAreaProps","role","_assignProps2","Pills","Item","Addon","tag","Text","enhance","_ref3","_ref7","SText","_assignProps3","_ref4","_ref8","SAddon","_assignProps4","wrapPills","wrapper"],"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, { useNeighborLocationDetect } from '@semcore/neighbor-location';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';\nimport log from '@semcore/utils/lib/logger';\n\nimport style from './style/pills.shadow.css';\n\nconst optionsA11yEnhance = {\n onNeighborChange: (neighborElement, props) => {\n if (neighborElement) {\n neighborElement.focus();\n if (props.behavior === 'auto' || props.behavior === 'radio') {\n neighborElement.click();\n }\n }\n },\n childSelector: (props) =>\n props.behavior === 'auto' || props.behavior === 'radio' ? ['role', 'radio'] : ['role', 'tab'],\n};\n\nclass RootPills extends Component {\n static displayName = 'Pills';\n static style = style;\n static defaultProps = ({ behavior }) => ({\n size: 'm',\n defaultValue: null,\n behavior: behavior ?? 'auto',\n });\n itemValues = [];\n static enhance = [a11yEnhance(optionsA11yEnhance), keyboardFocusEnhance()];\n\n componentDidMount() {\n log.warn(\n this.asProps.behavior === 'tabs',\n 'Use behavior `manual` instead of `tabs`. \\n`tabs` is deprecated and will be removed in the next major release.',\n 'Pills',\n );\n\n log.warn(\n this.asProps.behavior === 'radio',\n 'Use behavior `auto` (or nothing, it is default value) instead of `radio`. \\n`radio` is deprecated and will be removed in the next major release.',\n 'Pills',\n );\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 bindHandleKeyDown = (value) => (event) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.handlers.value(value, event);\n }\n };\n\n getItemProps(props, index) {\n const { value, size, disabled, behavior } = this.asProps;\n const isSelected = value === props.value;\n\n this.itemValues[index] = props.value;\n return {\n index: index,\n size,\n disabled,\n selected: isSelected,\n behavior,\n tabIndex: isSelected ? 0 : -1,\n onClick: this.bindHandlerClick(props.value),\n onKeyDown: this.bindHandleKeyDown(props.value),\n };\n }\n\n changeIndex = (startIndex, type) => {\n let selectable = false;\n\n while (!selectable && startIndex >= 0 && startIndex < this.itemValues.length) {\n if (type === 'increment') startIndex++;\n if (type === 'decrement') startIndex--;\n\n const element = this.itemRefs[startIndex];\n\n if (element?.disabled === false) {\n selectable = true;\n }\n }\n\n return startIndex >= 0 && startIndex < this.itemValues.length ? startIndex : undefined;\n };\n\n render() {\n const SPills = Root;\n const { Children, styles, controlsLength, disabled, behavior, value } = this.asProps;\n\n return sstyled(styles)(\n <SPills\n render={Box}\n role={behavior === 'radio' || behavior === 'auto' ? 'radiogroup' : 'tablist'}\n aria-disabled={disabled}\n use:tabIndex={value !== null ? -1 : 0}\n >\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, index, behavior } = props;\n const neighborLocation = useNeighborLocationDetect(index);\n const roleAreaProps = {};\n if (behavior === 'radio' || behavior === 'auto') {\n roleAreaProps.role = 'radio';\n roleAreaProps['aria-checked'] = selected;\n } else {\n roleAreaProps.role = 'tab';\n roleAreaProps['aria-selected'] = selected;\n }\n return sstyled(styles)(\n <SPill\n render={Box}\n tag='button'\n type='button'\n neighborLocation={neighborLocation}\n aria-disabled={disabled}\n {...roleAreaProps}\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()];\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 const wrapPills = (wrapper) => wrapper;\n\nexport default Pills;\n"],"mappings":"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"}
1
+ {"version":3,"file":"Pills.js","names":["React","createComponent","Component","sstyled","Root","Box","NeighborLocation","useNeighborLocationDetect","addonTextChildren","a11yEnhance","log","style","_sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","RootPills","_Component","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty","_assertThisInitialized","value","e","handlers","event","key","preventDefault","startIndex","type","selectable","itemValues","element","itemRefs","disabled","undefined","_createClass","componentDidMount","warn","asProps","uncontrolledProps","getItemProps","index","_this$asProps","size","isSelected","selected","tabIndex","onClick","bindHandlerClick","onKeyDown","bindHandleKeyDown","render","_ref","_ref5","SPills","_this$asProps2","Children","styles","controlsLength","createElement","cn","_objectSpread","_assignProps","_ref9","defaultValue","Pill","_ref2","arguments[0]","_ref6","SPill","addonLeft","addonRight","neighborLocation","roleAreaProps","role","_assignProps2","Pills","Item","Addon","tag","Text","_ref3","_ref7","SText","_assignProps3","_ref4","_ref8","SAddon","_assignProps4","wrapPills","wrapper"],"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, { useNeighborLocationDetect } from '@semcore/neighbor-location';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\nimport log from '@semcore/core/lib/utils/logger';\n\nimport style from './style/pills.shadow.css';\n\nconst optionsA11yEnhance = {\n onNeighborChange: (neighborElement, props) => {\n if (neighborElement) {\n neighborElement.focus();\n if (props.behavior === 'auto' || props.behavior === 'radio') {\n neighborElement.click();\n }\n }\n },\n childSelector: (props) =>\n props.behavior === 'auto' || props.behavior === 'radio' ? ['role', 'radio'] : ['role', 'tab'],\n};\n\nclass RootPills extends Component {\n static displayName = 'Pills';\n static style = style;\n static defaultProps = ({ behavior }) => ({\n size: 'm',\n defaultValue: null,\n behavior: behavior ?? 'auto',\n });\n itemValues = [];\n static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n componentDidMount() {\n log.warn(\n this.asProps.behavior === 'tabs',\n 'Use behavior `manual` instead of `tabs`. \\n`tabs` is deprecated and will be removed in the next major release.',\n 'Pills',\n );\n\n log.warn(\n this.asProps.behavior === 'radio',\n 'Use behavior `auto` (or nothing, it is default value) instead of `radio`. \\n`radio` is deprecated and will be removed in the next major release.',\n 'Pills',\n );\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 bindHandleKeyDown = (value) => (event) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.handlers.value(value, event);\n }\n };\n\n getItemProps(props, index) {\n const { value, size, disabled, behavior } = this.asProps;\n const isSelected = value === props.value;\n\n this.itemValues[index] = props.value;\n return {\n index: index,\n size,\n disabled,\n selected: isSelected,\n behavior,\n tabIndex: isSelected ? 0 : -1,\n onClick: this.bindHandlerClick(props.value),\n onKeyDown: this.bindHandleKeyDown(props.value),\n };\n }\n\n changeIndex = (startIndex, type) => {\n let selectable = false;\n\n while (!selectable && startIndex >= 0 && startIndex < this.itemValues.length) {\n if (type === 'increment') startIndex++;\n if (type === 'decrement') startIndex--;\n\n const element = this.itemRefs[startIndex];\n\n if (element?.disabled === false) {\n selectable = true;\n }\n }\n\n return startIndex >= 0 && startIndex < this.itemValues.length ? startIndex : undefined;\n };\n\n render() {\n const SPills = Root;\n const { Children, styles, controlsLength, disabled, behavior, value } = this.asProps;\n\n return sstyled(styles)(\n <SPills\n render={Box}\n role={behavior === 'radio' || behavior === 'auto' ? 'radiogroup' : 'tablist'}\n aria-disabled={disabled}\n use:tabIndex={value !== null ? -1 : 0}\n >\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, index, behavior } = props;\n const neighborLocation = useNeighborLocationDetect(index);\n const roleAreaProps = {};\n if (behavior === 'radio' || behavior === 'auto') {\n roleAreaProps.role = 'radio';\n roleAreaProps['aria-checked'] = selected;\n } else {\n roleAreaProps.role = 'tab';\n roleAreaProps['aria-selected'] = selected;\n }\n return sstyled(styles)(\n <SPill\n render={Box}\n tag='button'\n type='button'\n tabIndex={0}\n neighborLocation={neighborLocation}\n aria-disabled={disabled}\n {...roleAreaProps}\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\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 const wrapPills = (wrapper) => wrapper;\n\nexport default Pills;\n"],"mappings":"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"}
package/lib/es6/index.d.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { Box, BoxProps } from '@semcore/flex-box';\nimport { NeighborItemProps, NeighborLocationProps } from '@semcore/neighbor-location';\nimport { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nexport type PillsValue = string | number | boolean | null;\n\n/** @deprecated */\nexport interface IPillsProps<T extends PillsValue = PillsValue>\n extends PillsProps<T>,\n UnknownProperties {}\nexport type PillsProps<T extends PillsValue = PillsValue> = NeighborLocationProps &\n KeyboardFocusProps &\n BoxProps & {\n /** Pills size */\n size?: 'l' | 'm';\n /** Disabled state */\n disabled?: boolean;\n /** Called when the selection is changed */\n onChange?:\n | ((value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void)\n | React.Dispatch<React.SetStateAction<T>>;\n /** Value for the selected pill */\n value?: T;\n /** Default value for the selected pill */\n defaultValue?: T;\n /** Sets semantic role for corresponding behavior,\n * when set to `auto` pressing left and right arrows\n * selects corresponding sibling pill.\n *\n * It's recommended to use `auto` behavior in forms\n * while `manual` behavior for navigation and layout.\n * @default tabs\n */\n behavior?: /** @deprecated use `manual` */\n | 'tabs'\n /** @deprecated use `auto` */\n | 'radio'\n | 'auto'\n | 'manual';\n };\n\n/** @deprecated */\nexport interface IPillProps extends PillProps, UnknownProperties {}\nexport type PillProps = BoxProps &\n NeighborItemProps &\n KeyboardFocusProps & {\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\n/** @deprecated */\nexport interface IPillsContext extends PillsContext, UnknownProperties {}\nexport type PillsContext = {\n getItemProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface IPillsHandlers extends PillsHandlers, UnknownProperties {}\nexport type PillsHandlers = {\n value: (value: PillsValue) => void;\n};\n\ntype IntergalacticPillsComponent<PropsExtending = {}> = (<\n Value extends PillsValue,\n Tag extends Intergalactic.Tag = 'div',\n>(\n props: Intergalactic.InternalTypings.ComponentProps<\n Tag,\n 'div',\n PillsProps<Value>,\n PillsContext,\n [handlers: PillsHandlers]\n > &\n PropsExtending,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', PillsProps>;\n\ndeclare const Pills: IntergalacticPillsComponent & {\n Item: Intergalactic.Component<'button', PillProps, [handlers: PillsHandlers]> & {\n Text: typeof Box;\n Addon: typeof Box;\n };\n};\n\ndeclare const wrapPills: <PropsExtending extends {}>(\n wrapper: (\n props: Intergalactic.InternalTypings.UntypeRefAndTag<\n Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticPillsComponent>\n > &\n PropsExtending,\n ) => React.ReactNode,\n) => IntergalacticPillsComponent<PropsExtending>;\nexport { wrapPills };\n\nexport default Pills;\n"],"mappings":""}
1
+ {"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { Box, BoxProps } from '@semcore/flex-box';\nimport { NeighborItemProps, NeighborLocationProps } from '@semcore/neighbor-location';\n\nexport type PillsValue = string | number | boolean | null;\n\n/** @deprecated */\nexport interface IPillsProps<T extends PillsValue = PillsValue>\n extends PillsProps<T>,\n UnknownProperties {}\nexport type PillsProps<T extends PillsValue = PillsValue> = NeighborLocationProps &\n BoxProps & {\n /** Pills size */\n size?: 'l' | 'm';\n /** Disabled state */\n disabled?: boolean;\n /** Called when the selection is changed */\n onChange?:\n | ((value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void)\n | React.Dispatch<React.SetStateAction<T>>;\n /** Value for the selected pill */\n value?: T;\n /** Default value for the selected pill */\n defaultValue?: T;\n /** Sets semantic role for corresponding behavior,\n * when set to `auto` pressing left and right arrows\n * selects corresponding sibling pill.\n *\n * It's recommended to use `auto` behavior in forms\n * while `manual` behavior for navigation and layout.\n * @default tabs\n */\n behavior?: /** @deprecated use `manual` */\n | 'tabs'\n /** @deprecated use `auto` */\n | 'radio'\n | 'auto'\n | 'manual';\n };\n\n/** @deprecated */\nexport interface IPillProps extends PillProps, UnknownProperties {}\nexport type PillProps = BoxProps &\n NeighborItemProps & {\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\n/** @deprecated */\nexport interface IPillsContext extends PillsContext, UnknownProperties {}\nexport type PillsContext = {\n getItemProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface IPillsHandlers extends PillsHandlers, UnknownProperties {}\nexport type PillsHandlers = {\n value: (value: PillsValue) => void;\n};\n\ntype IntergalacticPillsComponent<PropsExtending = {}> = (<\n Value extends PillsValue,\n Tag extends Intergalactic.Tag = 'div',\n>(\n props: Intergalactic.InternalTypings.ComponentProps<\n Tag,\n 'div',\n PillsProps<Value>,\n PillsContext,\n [handlers: PillsHandlers]\n > &\n PropsExtending,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', PillsProps>;\n\ndeclare const Pills: IntergalacticPillsComponent & {\n Item: Intergalactic.Component<'button', PillProps, [handlers: PillsHandlers]> & {\n Text: typeof Box;\n Addon: typeof Box;\n };\n};\n\ndeclare const wrapPills: <PropsExtending extends {}>(\n wrapper: (\n props: Intergalactic.InternalTypings.UntypeRefAndTag<\n Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticPillsComponent>\n > &\n PropsExtending,\n ) => React.ReactNode,\n) => IntergalacticPillsComponent<PropsExtending>;\nexport { wrapPills };\n\nexport default Pills;\n"],"mappings":""}
package/lib/es6/style/pills.shadow.css CHANGED
@@ -3,12 +3,7 @@ SPills {
3
3
  align-items: center;
4
4
  justify-content: center;
5
5
  isolation: isolate;
6
- outline: none;
7
- }
8
-
9
- SPills[keyboardFocused]:focus {
10
- box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
11
- z-index: 1;
6
+ border-radius: var(--intergalactic-control-rounded, 6px);
12
7
  }
13
8
 
14
9
  SPill {
@@ -27,7 +22,6 @@ SPill {
27
22
  text-decoration: none;
28
23
  -webkit-tap-highlight-color: transparent;
29
24
  overflow: visible;
30
- outline: 0;
31
25
  text-align: center;
32
26
  vertical-align: middle;
33
27
  font-family: inherit;
@@ -41,9 +35,7 @@ SPill {
41
35
  padding: 0;
42
36
  }
43
37
 
44
- &:active,
45
- &:hover,
46
- &:focus {
38
+ &:active {
47
39
  outline: 0;
48
40
  text-decoration: none;
49
41
  }
@@ -56,6 +48,9 @@ SPill {
56
48
  SPill[selected] {
57
49
  background: var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));
58
50
  border-color: var(--intergalactic-border-info-active, #006dca);
51
+ z-index: 2;
52
+ }
53
+ SPill:focus-visible, SPill:hover, SPill:active {
59
54
  z-index: 1;
60
55
  }
61
56
 
@@ -69,11 +64,6 @@ SPill[disabled] {
69
64
  }
70
65
  }
71
66
 
72
- SPill[keyboardFocused] {
73
- box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
74
- z-index: 1;
75
- }
76
-
77
67
  SText {
78
68
  color: var(--intergalactic-text-primary, #191b23);
79
69
  display: inline-flex;
package/lib/esm/Pills.mjs CHANGED
@@ -5,37 +5,34 @@ import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitial
5
5
  import _inherits from "@babel/runtime/helpers/esm/inherits";
6
6
  import _createSuper from "@babel/runtime/helpers/esm/createSuper";
7
7
  import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
8
- import { sstyled } from "@semcore/utils/lib/core/index";
9
- import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
8
+ import { sstyled, createComponent, assignProps, Component } from "@semcore/core";
10
9
  import React from "react";
11
10
  import { Box } from "@semcore/flex-box";
12
11
  import NeighborLocation, { useNeighborLocationDetect } from "@semcore/neighbor-location";
13
- import keyboardFocusEnhance from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
14
- import addonTextChildren from "@semcore/utils/lib/addonTextChildren";
15
- import a11yEnhance from "@semcore/utils/lib/enhances/a11yEnhance";
16
- import log from "@semcore/utils/lib/logger";
12
+ import addonTextChildren from "@semcore/core/lib/utils/addonTextChildren";
13
+ import a11yEnhance from "@semcore/core/lib/utils/enhances/a11yEnhance";
14
+ import log from "@semcore/core/lib/utils/logger";
17
15
  /*!__reshadow-styles__:"./style/pills.shadow.css"*/
18
16
  var style = (
19
17
  /*__reshadow_css_start__*/
20
18
  (sstyled.insert(
21
19
  /*__inner_css_start__*/
22
- ".___SPills_b73wr_gg_{display:inline-flex;align-items:center;justify-content:center;isolation:isolate;outline:0}.___SPills_b73wr_gg_.__keyboardFocused_b73wr_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1}.___SPill_b73wr_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;-webkit-text-decoration: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:var(--intergalactic-bg-primary-neutral, #ffffff);border:1px solid var(--intergalactic-border-primary, #c4c7cf);border-radius:var(--intergalactic-control-rounded, 6px)}.___SPill_b73wr_gg_::-moz-focus-inner{border:0;padding:0}.___SPill_b73wr_gg_:active,.___SPill_b73wr_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPill_b73wr_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none;background:var(--intergalactic-bg-primary-neutral-hover, #f4f5f9)}}.___SPill_b73wr_gg_.__selected_b73wr_gg_{background:var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));border-color:var(--intergalactic-border-info-active, #006dca);z-index:1}.___SPill_b73wr_gg_.__disabled_b73wr_gg_{cursor:default;pointer-events:none}.___SPill_b73wr_gg_.__disabled_b73wr_gg_>*{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SPill_b73wr_gg_.__keyboardFocused_b73wr_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1}.___SText_b73wr_gg_{color:var(--intergalactic-text-primary, #191b23);display:inline-flex}.___SAddon_b73wr_gg_{color:var(--intergalactic-text-secondary, #6c6e79);display:inline-flex;align-items:center;justify-content:center}.___SPill_b73wr_gg_._size_m_b73wr_gg_{height:var(--intergalactic-form-control-m, 28px);min-width:var(--intergalactic-form-control-m, 28px);font-size:var(--intergalactic-fs-200, 14px)}.___SPill_b73wr_gg_._size_l_b73wr_gg_ .___SText_b73wr_gg_,.___SPill_b73wr_gg_._size_m_b73wr_gg_ .___SText_b73wr_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_b73wr_gg_._size_m_b73wr_gg_ .___SAddon_b73wr_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SPill_b73wr_gg_._size_m_b73wr_gg_ .___SAddon_b73wr_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_b73wr_gg_._size_m_b73wr_gg_ .___SAddon_b73wr_gg_:only-child{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_b73wr_gg_._size_l_b73wr_gg_{height:var(--intergalactic-form-control-l, 40px);min-width:var(--intergalactic-form-control-l, 40px);font-size:var(--intergalactic-fs-300, 16px)}.___SPill_b73wr_gg_._size_l_b73wr_gg_ .___SAddon_b73wr_gg_:only-child,.___SPill_b73wr_gg_._size_l_b73wr_gg_ .___SText_b73wr_gg_:only-child{margin-left:var(--intergalactic-spacing-3x, 12px);margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_b73wr_gg_._size_l_b73wr_gg_ .___SAddon_b73wr_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SPill_b73wr_gg_._size_l_b73wr_gg_ .___SAddon_b73wr_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_b73wr_gg_._neighborLocation_right_b73wr_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_b73wr_gg_._neighborLocation_both_b73wr_gg_{border-radius:0;margin-left:-1px}.___SPill_b73wr_gg_._neighborLocation_left_b73wr_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}",
20
+ ".___SPill_1642b_gg_,.___SPills_1642b_gg_{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--intergalactic-control-rounded, 6px)}.___SPills_1642b_gg_{isolation:isolate}.___SPill_1642b_gg_{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;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;background:var(--intergalactic-bg-primary-neutral, #ffffff);border:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SPill_1642b_gg_::-moz-focus-inner{border:0;padding:0}.___SPill_1642b_gg_:active{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPill_1642b_gg_:hover{background:var(--intergalactic-bg-primary-neutral-hover, #f4f5f9)}}.___SPill_1642b_gg_.__selected_1642b_gg_{background:var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));border-color:var(--intergalactic-border-info-active, #006dca);z-index:2}.___SPill_1642b_gg_:active,.___SPill_1642b_gg_:focus-visible{z-index:1}@media (hover:hover){.___SPill_1642b_gg_:hover{z-index:1}}.___SPill_1642b_gg_.__disabled_1642b_gg_{cursor:default;pointer-events:none}.___SPill_1642b_gg_.__disabled_1642b_gg_>*{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SText_1642b_gg_{color:var(--intergalactic-text-primary, #191b23);display:inline-flex}.___SAddon_1642b_gg_{color:var(--intergalactic-text-secondary, #6c6e79);display:inline-flex;align-items:center;justify-content:center}.___SPill_1642b_gg_._size_m_1642b_gg_{height:var(--intergalactic-form-control-m, 28px);min-width:var(--intergalactic-form-control-m, 28px);font-size:var(--intergalactic-fs-200, 14px)}.___SPill_1642b_gg_._size_l_1642b_gg_ .___SText_1642b_gg_,.___SPill_1642b_gg_._size_m_1642b_gg_ .___SText_1642b_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_1642b_gg_._size_m_1642b_gg_ .___SAddon_1642b_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SPill_1642b_gg_._size_m_1642b_gg_ .___SAddon_1642b_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_1642b_gg_._size_m_1642b_gg_ .___SAddon_1642b_gg_:only-child{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_1642b_gg_._size_l_1642b_gg_{height:var(--intergalactic-form-control-l, 40px);min-width:var(--intergalactic-form-control-l, 40px);font-size:var(--intergalactic-fs-300, 16px)}.___SPill_1642b_gg_._size_l_1642b_gg_ .___SAddon_1642b_gg_:only-child,.___SPill_1642b_gg_._size_l_1642b_gg_ .___SText_1642b_gg_:only-child{margin-left:var(--intergalactic-spacing-3x, 12px);margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_1642b_gg_._size_l_1642b_gg_ .___SAddon_1642b_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SPill_1642b_gg_._size_l_1642b_gg_ .___SAddon_1642b_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_1642b_gg_._neighborLocation_right_1642b_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_1642b_gg_._neighborLocation_both_1642b_gg_{border-radius:0;margin-left:-1px}.___SPill_1642b_gg_._neighborLocation_left_1642b_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}",
23
21
  /*__inner_css_end__*/
24
- "b73wr_gg_"
22
+ "1642b_gg_"
25
23
  ), /*__reshadow_css_end__*/
26
24
  {
27
- "__SPills": "___SPills_b73wr_gg_",
28
- "_keyboardFocused": "__keyboardFocused_b73wr_gg_",
29
- "__SPill": "___SPill_b73wr_gg_",
30
- "_selected": "__selected_b73wr_gg_",
31
- "__SText": "___SText_b73wr_gg_",
32
- "__SAddon": "___SAddon_b73wr_gg_",
33
- "_neighborLocation_right": "_neighborLocation_right_b73wr_gg_",
34
- "_neighborLocation_both": "_neighborLocation_both_b73wr_gg_",
35
- "_neighborLocation_left": "_neighborLocation_left_b73wr_gg_",
36
- "_disabled": "__disabled_b73wr_gg_",
37
- "_size_m": "_size_m_b73wr_gg_",
38
- "_size_l": "_size_l_b73wr_gg_"
25
+ "__SPills": "___SPills_1642b_gg_",
26
+ "__SPill": "___SPill_1642b_gg_",
27
+ "_selected": "__selected_1642b_gg_",
28
+ "__SText": "___SText_1642b_gg_",
29
+ "__SAddon": "___SAddon_1642b_gg_",
30
+ "_neighborLocation_right": "_neighborLocation_right_1642b_gg_",
31
+ "_neighborLocation_both": "_neighborLocation_both_1642b_gg_",
32
+ "_neighborLocation_left": "_neighborLocation_left_1642b_gg_",
33
+ "_disabled": "__disabled_1642b_gg_",
34
+ "_size_m": "_size_m_1642b_gg_",
35
+ "_size_l": "_size_l_1642b_gg_"
39
36
  })
40
37
  );
41
38
  var optionsA11yEnhance = {
@@ -125,7 +122,7 @@ var RootPills = /* @__PURE__ */ function(_Component) {
125
122
  var _ref = this.asProps, _ref5;
126
123
  var SPills = Box;
127
124
  var _this$asProps2 = this.asProps, Children = _this$asProps2.Children, styles = _this$asProps2.styles, controlsLength = _this$asProps2.controlsLength, disabled = _this$asProps2.disabled, behavior = _this$asProps2.behavior, value = _this$asProps2.value;
128
- return _ref5 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SPills, _ref5.cn("SPills", _objectSpread({}, assignProps({
125
+ return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SPills, _ref5.cn("SPills", _objectSpread({}, assignProps({
129
126
  "role": behavior === "radio" || behavior === "auto" ? "radiogroup" : "tablist",
130
127
  "aria-disabled": disabled,
131
128
  "use:tabIndex": value !== null ? -1 : 0
@@ -146,7 +143,7 @@ _defineProperty(RootPills, "defaultProps", function(_ref9) {
146
143
  behavior: behavior !== null && behavior !== void 0 ? behavior : "auto"
147
144
  };
148
145
  });
149
- _defineProperty(RootPills, "enhance", [a11yEnhance(optionsA11yEnhance), keyboardFocusEnhance()]);
146
+ _defineProperty(RootPills, "enhance", [a11yEnhance(optionsA11yEnhance)]);
150
147
  function Pill(props) {
151
148
  var _ref2 = arguments[0], _ref6;
152
149
  var SPill = Box;
@@ -160,9 +157,10 @@ function Pill(props) {
160
157
  roleAreaProps.role = "tab";
161
158
  roleAreaProps["aria-selected"] = selected;
162
159
  }
163
- return _ref6 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SPill, _ref6.cn("SPill", _objectSpread({}, assignProps(_objectSpread({
160
+ return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SPill, _ref6.cn("SPill", _objectSpread({}, assignProps(_objectSpread({
164
161
  "tag": "button",
165
162
  "type": "button",
163
+ "tabIndex": 0,
166
164
  "neighborLocation": neighborLocation,
167
165
  "aria-disabled": disabled
168
166
  }, roleAreaProps), _ref2))), addonLeft ? /* @__PURE__ */ React.createElement(Pills.Item.Addon, {
@@ -171,18 +169,17 @@ function Pill(props) {
171
169
  tag: addonRight
172
170
  }) : null);
173
171
  }
174
- Pill.enhance = [keyboardFocusEnhance()];
175
172
  function Text(props) {
176
173
  var _ref3 = arguments[0], _ref7;
177
174
  var SText = Box;
178
- return _ref7 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(SText, _ref7.cn("SText", _objectSpread({}, assignProps({
175
+ return _ref7 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SText, _ref7.cn("SText", _objectSpread({}, assignProps({
179
176
  "tag": "span"
180
177
  }, _ref3))));
181
178
  }
182
179
  function Addon(props) {
183
180
  var _ref4 = arguments[0], _ref8;
184
181
  var SAddon = Box;
185
- return _ref8 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(SAddon, _ref8.cn("SAddon", _objectSpread({}, assignProps({
182
+ return _ref8 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SAddon, _ref8.cn("SAddon", _objectSpread({}, assignProps({
186
183
  "tag": "span"
187
184
  }, _ref4))));
188
185
  }
package/lib/esm/style/pills.shadow.css CHANGED
@@ -3,12 +3,7 @@ SPills {
3
3
  align-items: center;
4
4
  justify-content: center;
5
5
  isolation: isolate;
6
- outline: none;
7
- }
8
-
9
- SPills[keyboardFocused]:focus {
10
- box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
11
- z-index: 1;
6
+ border-radius: var(--intergalactic-control-rounded, 6px);
12
7
  }
13
8
 
14
9
  SPill {
@@ -27,7 +22,6 @@ SPill {
27
22
  text-decoration: none;
28
23
  -webkit-tap-highlight-color: transparent;
29
24
  overflow: visible;
30
- outline: 0;
31
25
  text-align: center;
32
26
  vertical-align: middle;
33
27
  font-family: inherit;
@@ -41,9 +35,7 @@ SPill {
41
35
  padding: 0;
42
36
  }
43
37
 
44
- &:active,
45
- &:hover,
46
- &:focus {
38
+ &:active {
47
39
  outline: 0;
48
40
  text-decoration: none;
49
41
  }
@@ -56,6 +48,9 @@ SPill {
56
48
  SPill[selected] {
57
49
  background: var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));
58
50
  border-color: var(--intergalactic-border-info-active, #006dca);
51
+ z-index: 2;
52
+ }
53
+ SPill:focus-visible, SPill:hover, SPill:active {
59
54
  z-index: 1;
60
55
  }
61
56
 
@@ -69,11 +64,6 @@ SPill[disabled] {
69
64
  }
70
65
  }
71
66
 
72
- SPill[keyboardFocused] {
73
- box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
74
- z-index: 1;
75
- }
76
-
77
67
  SText {
78
68
  color: var(--intergalactic-text-primary, #191b23);
79
69
  display: inline-flex;
package/lib/types/index.d.ts CHANGED
@@ -2,7 +2,6 @@ import React from 'react';
2
2
  import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
3
3
  import { Box, BoxProps } from '@semcore/flex-box';
4
4
  import { NeighborItemProps, NeighborLocationProps } from '@semcore/neighbor-location';
5
- import { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
6
5
 
7
6
  export type PillsValue = string | number | boolean | null;
8
7
 
@@ -11,7 +10,6 @@ export interface IPillsProps<T extends PillsValue = PillsValue>
11
10
  extends PillsProps<T>,
12
11
  UnknownProperties {}
13
12
  export type PillsProps<T extends PillsValue = PillsValue> = NeighborLocationProps &
14
- KeyboardFocusProps &
15
13
  BoxProps & {
16
14
  /** Pills size */
17
15
  size?: 'l' | 'm';
@@ -44,8 +42,7 @@ export type PillsProps<T extends PillsValue = PillsValue> = NeighborLocationProp
44
42
  /** @deprecated */
45
43
  export interface IPillProps extends PillProps, UnknownProperties {}
46
44
  export type PillProps = BoxProps &
47
- NeighborItemProps &
48
- KeyboardFocusProps & {
45
+ NeighborItemProps & {
49
46
  /** Pill value */
50
47
  value?: PillsValue;
51
48
  /** Disabled state */
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/pills",
3
3
  "description": "Semrush Pills Component",
4
- "version": "5.43.4",
4
+ "version": "16.0.0-prerelease.0",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",
@@ -14,14 +14,11 @@
14
14
  "types": "./lib/types/index.d.ts"
15
15
  },
16
16
  "dependencies": {
17
- "@semcore/flex-box": "5.41.4",
18
- "@semcore/neighbor-location": "4.40.4",
19
- "@semcore/utils": "4.48.5"
17
+ "@semcore/flex-box": "16.0.0-prerelease.0",
18
+ "@semcore/neighbor-location": "16.0.0-prerelease.0"
20
19
  },
21
20
  "peerDependencies": {
22
- "@semcore/core": "^2.17.5",
23
- "react": "16.8 - 18",
24
- "react-dom": "16.8 - 18"
21
+ "@semcore/base-components": "^16.0.0-prerelease.0"
25
22
  },
26
23
  "repository": {
27
24
  "type": "git",