@semcore/pills 16.0.11 → 17.0.0-prerelease.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/es6/Pills.js CHANGED
@@ -1,183 +1,158 @@
1
- import _objectSpread from "@babel/runtime/helpers/objectSpread2";
2
- import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
3
- import _createClass from "@babel/runtime/helpers/createClass";
4
- import _callSuper from "@babel/runtime/helpers/callSuper";
5
- import _inherits from "@babel/runtime/helpers/inherits";
6
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
7
2
  import { sstyled as _sstyled } from "@semcore/core";
8
3
  import { assignProps as _assignProps4 } from "@semcore/core";
9
4
  import { assignProps as _assignProps3 } from "@semcore/core";
10
5
  import { assignProps as _assignProps2 } from "@semcore/core";
11
6
  import { assignProps as _assignProps } from "@semcore/core";
7
+ import { NeighborLocation, Box, useNeighborLocationDetect } from '@semcore/base-components';
12
8
  import { createComponent, Component, sstyled, Root } from '@semcore/core';
13
9
  import addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';
14
10
  import a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';
15
- import log from '@semcore/core/lib/utils/logger';
16
- import { Box } from '@semcore/flex-box';
17
- import NeighborLocation, { useNeighborLocationDetect } from '@semcore/neighbor-location';
18
11
  import React from 'react';
19
12
  /*!__reshadow-styles__:"./style/pills.shadow.css"*/
20
- var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SPills_7x4a8_gg_{display:inline-flex;align-items:center;justify-content:center;isolation:isolate;border-radius:var(--intergalactic-control-rounded, 6px)}.___SPills_7x4a8_gg_ .___SPill_7x4a8_gg_.__selected_7x4a8_gg_{background:var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));border-color:var(--intergalactic-border-info-active, #006dca);z-index:3}.___SPills_7x4a8_gg_ .___SPill_7x4a8_gg_.__selected_7x4a8_gg_,.___SPills_7x4a8_gg_ .___SPill_7x4a8_gg_:focus-visible{z-index:3}.___SPills_7x4a8_gg_ .___SPill_7x4a8_gg_:active{z-index:2}@media (hover:hover){.___SPills_7x4a8_gg_ .___SPill_7x4a8_gg_:hover{z-index:2}}.___SPill_7x4a8_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;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_7x4a8_gg_::-moz-focus-inner{border:0;padding:0}.___SPill_7x4a8_gg_:active{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPill_7x4a8_gg_:hover{background:var(--intergalactic-bg-primary-neutral-hover, #f4f5f9)}}.___SPill_7x4a8_gg_.__disabled_7x4a8_gg_{cursor:default;pointer-events:none}.___SPill_7x4a8_gg_.__disabled_7x4a8_gg_>*{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SText_7x4a8_gg_{color:var(--intergalactic-text-primary, #191b23);display:inline-flex}.___SAddon_7x4a8_gg_{color:var(--intergalactic-text-secondary, #6c6e79);display:inline-flex;align-items:center;justify-content:center}.___SPill_7x4a8_gg_._size_m_7x4a8_gg_{height:var(--intergalactic-form-control-m, 28px);min-width:var(--intergalactic-form-control-m, 28px);font-size:var(--intergalactic-fs-200, 14px)}.___SPill_7x4a8_gg_._size_l_7x4a8_gg_ .___SText_7x4a8_gg_,.___SPill_7x4a8_gg_._size_m_7x4a8_gg_ .___SText_7x4a8_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_7x4a8_gg_._size_m_7x4a8_gg_ .___SAddon_7x4a8_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SPill_7x4a8_gg_._size_m_7x4a8_gg_ .___SAddon_7x4a8_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_7x4a8_gg_._size_m_7x4a8_gg_ .___SAddon_7x4a8_gg_:only-child{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_7x4a8_gg_._size_l_7x4a8_gg_{height:var(--intergalactic-form-control-l, 40px);min-width:var(--intergalactic-form-control-l, 40px);font-size:var(--intergalactic-fs-300, 16px)}.___SPill_7x4a8_gg_._size_l_7x4a8_gg_ .___SAddon_7x4a8_gg_:only-child,.___SPill_7x4a8_gg_._size_l_7x4a8_gg_ .___SText_7x4a8_gg_:only-child{margin-left:var(--intergalactic-spacing-3x, 12px);margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_7x4a8_gg_._size_l_7x4a8_gg_ .___SAddon_7x4a8_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SPill_7x4a8_gg_._size_l_7x4a8_gg_ .___SAddon_7x4a8_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_7x4a8_gg_._neighborLocation_right_7x4a8_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_7x4a8_gg_._neighborLocation_both_7x4a8_gg_{border-radius:0;margin-left:-1px}.___SPill_7x4a8_gg_._neighborLocation_left_7x4a8_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}", /*__inner_css_end__*/"7x4a8_gg_"),
13
+ const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SPills_1x82a_gg_{display:inline-flex;align-items:center;justify-content:center;isolation:isolate;border-radius:var(--intergalactic-control-rounded, 6px)}.___SPills_1x82a_gg_ .___SPill_1x82a_gg_.__selected_1x82a_gg_{background:var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));border-color:var(--intergalactic-border-info-active, #006dca);z-index:3}.___SPills_1x82a_gg_ .___SPill_1x82a_gg_.__selected_1x82a_gg_,.___SPills_1x82a_gg_ .___SPill_1x82a_gg_:focus-visible{z-index:3}.___SPills_1x82a_gg_ .___SPill_1x82a_gg_:active{z-index:2}@media (hover:hover){.___SPills_1x82a_gg_ .___SPill_1x82a_gg_:hover{z-index:2}}.___SPill_1x82a_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;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_1x82a_gg_::-moz-focus-inner{border:0;padding:0}.___SPill_1x82a_gg_:active{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPill_1x82a_gg_:hover{background:var(--intergalactic-bg-primary-neutral-hover, #f4f5f9)}}.___SPill_1x82a_gg_.__disabled_1x82a_gg_{cursor:default;pointer-events:none}.___SPill_1x82a_gg_.__disabled_1x82a_gg_>*{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SText_1x82a_gg_{color:var(--intergalactic-text-primary, #191b23);display:inline-flex}.___SAddon_1x82a_gg_{color:var(--intergalactic-text-secondary, #6c6e79);display:inline-flex;align-items:center;justify-content:center}.___SPill_1x82a_gg_._size_m_1x82a_gg_{height:var(--intergalactic-form-control-m, 28px);min-width:var(--intergalactic-form-control-m, 28px);font-size:var(--intergalactic-fs-200, 14px)}.___SPill_1x82a_gg_._size_l_1x82a_gg_ .___SText_1x82a_gg_,.___SPill_1x82a_gg_._size_m_1x82a_gg_ .___SText_1x82a_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_1x82a_gg_._size_m_1x82a_gg_ .___SAddon_1x82a_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SPill_1x82a_gg_._size_m_1x82a_gg_ .___SAddon_1x82a_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_1x82a_gg_._size_m_1x82a_gg_ .___SAddon_1x82a_gg_:only-child{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_1x82a_gg_._size_l_1x82a_gg_{height:var(--intergalactic-form-control-l, 40px);min-width:var(--intergalactic-form-control-l, 40px);font-size:var(--intergalactic-fs-300, 16px)}.___SPill_1x82a_gg_._size_l_1x82a_gg_ .___SAddon_1x82a_gg_:only-child,.___SPill_1x82a_gg_._size_l_1x82a_gg_ .___SText_1x82a_gg_:only-child{margin-left:var(--intergalactic-spacing-3x, 12px);margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_1x82a_gg_._size_l_1x82a_gg_ .___SAddon_1x82a_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SPill_1x82a_gg_._size_l_1x82a_gg_ .___SAddon_1x82a_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_1x82a_gg_._neighborLocation_right_1x82a_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_1x82a_gg_._neighborLocation_both_1x82a_gg_{border-radius:0;margin-left:-1px}.___SPill_1x82a_gg_._neighborLocation_left_1x82a_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}", /*__inner_css_end__*/"1x82a_gg_"),
21
14
  /*__reshadow_css_end__*/
22
15
  {
23
- "__SText": "___SText_7x4a8_gg_",
24
- "__SAddon": "___SAddon_7x4a8_gg_",
25
- "__SPill": "___SPill_7x4a8_gg_",
26
- "_neighborLocation_right": "_neighborLocation_right_7x4a8_gg_",
27
- "_neighborLocation_both": "_neighborLocation_both_7x4a8_gg_",
28
- "_neighborLocation_left": "_neighborLocation_left_7x4a8_gg_",
29
- "__SPills": "___SPills_7x4a8_gg_",
30
- "_selected": "__selected_7x4a8_gg_",
31
- "_disabled": "__disabled_7x4a8_gg_",
32
- "_size_m": "_size_m_7x4a8_gg_",
33
- "_size_l": "_size_l_7x4a8_gg_"
16
+ "__SText": "___SText_1x82a_gg_",
17
+ "__SAddon": "___SAddon_1x82a_gg_",
18
+ "__SPill": "___SPill_1x82a_gg_",
19
+ "_neighborLocation_right": "_neighborLocation_right_1x82a_gg_",
20
+ "_neighborLocation_both": "_neighborLocation_both_1x82a_gg_",
21
+ "_neighborLocation_left": "_neighborLocation_left_1x82a_gg_",
22
+ "__SPills": "___SPills_1x82a_gg_",
23
+ "_selected": "__selected_1x82a_gg_",
24
+ "_disabled": "__disabled_1x82a_gg_",
25
+ "_size_m": "_size_m_1x82a_gg_",
26
+ "_size_l": "_size_l_1x82a_gg_"
34
27
  });
35
- var optionsA11yEnhance = {
36
- onNeighborChange: function onNeighborChange(neighborElement, props) {
28
+ const optionsA11yEnhance = {
29
+ onNeighborChange: (neighborElement, props) => {
37
30
  if (neighborElement) {
38
31
  neighborElement.focus();
39
- if (props.behavior === 'auto' || props.behavior === 'radio') {
32
+ if (props.behavior === 'auto') {
40
33
  neighborElement.click();
41
34
  }
42
35
  }
43
36
  },
44
- childSelector: function childSelector(props) {
45
- return props.behavior === 'auto' || props.behavior === 'radio' ? ['role', 'radio'] : ['role', 'tab'];
46
- }
37
+ childSelector: props => props.behavior === 'auto' ? ['role', 'radio'] : ['role', 'tab']
47
38
  };
48
- var RootPills = /*#__PURE__*/function (_Component) {
49
- function RootPills() {
50
- var _this;
51
- _classCallCheck(this, RootPills);
52
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
53
- args[_key] = arguments[_key];
54
- }
55
- _this = _callSuper(this, RootPills, [].concat(args));
56
- _defineProperty(_this, "itemValues", []);
57
- _defineProperty(_this, "bindHandlerClick", function (value) {
58
- return function (e) {
59
- _this.handlers.value(value, e);
60
- };
39
+ class RootPills extends Component {
40
+ constructor(...args) {
41
+ super(...args);
42
+ _defineProperty(this, "itemValues", []);
43
+ _defineProperty(this, "bindHandlerClick", value => e => {
44
+ this.handlers.value(value, e);
61
45
  });
62
- _defineProperty(_this, "bindHandleKeyDown", function (value) {
63
- return function (event) {
64
- if (event.key === 'Enter' || event.key === ' ') {
65
- event.preventDefault();
66
- _this.handlers.value(value, event);
67
- }
68
- };
46
+ _defineProperty(this, "bindHandleKeyDown", value => event => {
47
+ if (event.key === 'Enter' || event.key === ' ') {
48
+ event.preventDefault();
49
+ this.handlers.value(value, event);
50
+ }
69
51
  });
70
- _defineProperty(_this, "changeIndex", function (startIndex, type) {
71
- var selectable = false;
72
- while (!selectable && startIndex >= 0 && startIndex < _this.itemValues.length) {
52
+ _defineProperty(this, "changeIndex", (startIndex, type) => {
53
+ let selectable = false;
54
+ while (!selectable && startIndex >= 0 && startIndex < this.itemValues.length) {
73
55
  if (type === 'increment') startIndex++;
74
56
  if (type === 'decrement') startIndex--;
75
- var element = _this.itemRefs[startIndex];
76
- if ((element === null || element === void 0 ? void 0 : element.disabled) === false) {
57
+ const element = this.itemRefs[startIndex];
58
+ if (element?.disabled === false) {
77
59
  selectable = true;
78
60
  }
79
61
  }
80
- return startIndex >= 0 && startIndex < _this.itemValues.length ? startIndex : undefined;
62
+ return startIndex >= 0 && startIndex < this.itemValues.length ? startIndex : undefined;
81
63
  });
82
- return _this;
83
64
  }
84
- _inherits(RootPills, _Component);
85
- return _createClass(RootPills, [{
86
- key: "componentDidMount",
87
- value: function componentDidMount() {
88
- log.warn(this.asProps.behavior === 'tabs', 'Use behavior `manual` instead of `tabs`. \n`tabs` is deprecated and will be removed in the next major release.', 'Pills');
89
- log.warn(this.asProps.behavior === 'radio', '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.', 'Pills');
90
- }
91
- }, {
92
- key: "uncontrolledProps",
93
- value: function uncontrolledProps() {
94
- return {
95
- value: null
96
- };
97
- }
98
- }, {
99
- key: "getItemProps",
100
- value: function getItemProps(props, index) {
101
- var _this$asProps = this.asProps,
102
- value = _this$asProps.value,
103
- size = _this$asProps.size,
104
- disabled = _this$asProps.disabled,
105
- behavior = _this$asProps.behavior;
106
- var isSelected = value === props.value;
107
- this.itemValues[index] = props.value;
108
- return {
109
- index: index,
110
- size: size,
111
- disabled: disabled,
112
- selected: isSelected,
113
- behavior: behavior,
114
- tabIndex: isSelected ? 0 : -1,
115
- onClick: this.bindHandlerClick(props.value),
116
- onKeyDown: this.bindHandleKeyDown(props.value)
117
- };
118
- }
119
- }, {
120
- key: "render",
121
- value: function render() {
122
- var _ref = this.asProps,
123
- _ref5;
124
- var SPills = Box;
125
- var _this$asProps2 = this.asProps,
126
- Children = _this$asProps2.Children,
127
- styles = _this$asProps2.styles,
128
- controlsLength = _this$asProps2.controlsLength,
129
- disabled = _this$asProps2.disabled,
130
- behavior = _this$asProps2.behavior,
131
- value = _this$asProps2.value;
132
- return _ref5 = sstyled(styles), /*#__PURE__*/React.createElement(SPills, _ref5.cn("SPills", _objectSpread({}, _assignProps({
133
- "role": behavior === 'radio' || behavior === 'auto' ? 'radiogroup' : 'tablist',
65
+ uncontrolledProps() {
66
+ return {
67
+ value: null
68
+ };
69
+ }
70
+ getItemProps(props, index) {
71
+ const {
72
+ value,
73
+ size,
74
+ disabled,
75
+ behavior
76
+ } = this.asProps;
77
+ const isSelected = value === props.value;
78
+ this.itemValues[index] = props.value;
79
+ return {
80
+ index: index,
81
+ size,
82
+ disabled,
83
+ selected: isSelected,
84
+ behavior,
85
+ tabIndex: isSelected ? 0 : -1,
86
+ onClick: this.bindHandlerClick(props.value),
87
+ onKeyDown: this.bindHandleKeyDown(props.value)
88
+ };
89
+ }
90
+ render() {
91
+ var _ref = this.asProps,
92
+ _ref5;
93
+ const SPills = Box;
94
+ const {
95
+ Children,
96
+ styles,
97
+ controlsLength,
98
+ disabled,
99
+ behavior,
100
+ value
101
+ } = this.asProps;
102
+ return _ref5 = sstyled(styles), /*#__PURE__*/React.createElement(SPills, _ref5.cn("SPills", {
103
+ ..._assignProps({
104
+ "role": behavior === 'auto' ? 'radiogroup' : 'tablist',
134
105
  "aria-disabled": disabled,
135
106
  "use:tabIndex": value !== null ? -1 : 0
136
- }, _ref))), /*#__PURE__*/React.createElement(NeighborLocation, _ref5.cn("NeighborLocation", {
137
- "controlsLength": controlsLength
138
- }), /*#__PURE__*/React.createElement(Children, _ref5.cn("Children", {}))));
139
- }
140
- }]);
141
- }(Component);
107
+ }, _ref)
108
+ }), /*#__PURE__*/React.createElement(NeighborLocation, _ref5.cn("NeighborLocation", {
109
+ "controlsLength": controlsLength
110
+ }), /*#__PURE__*/React.createElement(Children, _ref5.cn("Children", {}))));
111
+ }
112
+ }
142
113
  _defineProperty(RootPills, "displayName", 'Pills');
143
114
  _defineProperty(RootPills, "style", style);
144
- _defineProperty(RootPills, "defaultProps", function (_ref9) {
145
- var behavior = _ref9.behavior;
146
- return {
147
- size: 'm',
148
- defaultValue: null,
149
- behavior: behavior !== null && behavior !== void 0 ? behavior : 'auto'
150
- };
151
- });
115
+ _defineProperty(RootPills, "defaultProps", ({
116
+ behavior
117
+ }) => ({
118
+ size: 'm',
119
+ defaultValue: null,
120
+ behavior: behavior ?? 'auto'
121
+ }));
152
122
  _defineProperty(RootPills, "enhance", [a11yEnhance(optionsA11yEnhance)]);
153
123
  function Pill(props) {
154
124
  var _ref2 = arguments[0],
155
125
  _ref6;
156
- var SPill = Box;
157
- var Children = props.Children,
158
- styles = props.styles,
159
- addonLeft = props.addonLeft,
160
- addonRight = props.addonRight,
161
- selected = props.selected,
162
- disabled = props.disabled,
163
- index = props.index,
164
- behavior = props.behavior;
165
- var neighborLocation = useNeighborLocationDetect(index);
166
- var roleAreaProps = {};
167
- if (behavior === 'radio' || behavior === 'auto') {
126
+ const SPill = Box;
127
+ const {
128
+ Children,
129
+ styles,
130
+ addonLeft,
131
+ addonRight,
132
+ selected,
133
+ disabled,
134
+ index,
135
+ behavior
136
+ } = props;
137
+ const neighborLocation = useNeighborLocationDetect(index);
138
+ const roleAreaProps = {};
139
+ if (behavior === 'auto') {
168
140
  roleAreaProps.role = 'radio';
169
141
  roleAreaProps['aria-checked'] = selected;
170
142
  } else {
171
143
  roleAreaProps.role = 'tab';
172
144
  roleAreaProps['aria-selected'] = selected;
173
145
  }
174
- return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SPill, _ref6.cn("SPill", _objectSpread({}, _assignProps2(_objectSpread({
175
- "tag": 'button',
176
- "type": 'button',
177
- "tabIndex": 0,
178
- "neighborLocation": neighborLocation,
179
- "aria-disabled": disabled
180
- }, roleAreaProps), _ref2))), addonLeft ? /*#__PURE__*/React.createElement(Pills.Item.Addon, {
146
+ return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SPill, _ref6.cn("SPill", {
147
+ ..._assignProps2({
148
+ "tag": 'button',
149
+ "type": 'button',
150
+ "tabIndex": 0,
151
+ "neighborLocation": neighborLocation,
152
+ "aria-disabled": disabled,
153
+ ...roleAreaProps
154
+ }, _ref2)
155
+ }), addonLeft ? /*#__PURE__*/React.createElement(Pills.Item.Addon, {
181
156
  tag: addonLeft
182
157
  }) : null, addonTextChildren(Children, Pills.Item.Text, Pills.Item.Addon), addonRight ? /*#__PURE__*/React.createElement(Pills.Item.Addon, {
183
158
  tag: addonRight
@@ -186,27 +161,29 @@ function Pill(props) {
186
161
  function Text(props) {
187
162
  var _ref3 = arguments[0],
188
163
  _ref7;
189
- var SText = Box;
190
- return _ref7 = sstyled(props.styles), /*#__PURE__*/React.createElement(SText, _ref7.cn("SText", _objectSpread({}, _assignProps3({
191
- "tag": 'span'
192
- }, _ref3))));
164
+ const SText = Box;
165
+ return _ref7 = sstyled(props.styles), /*#__PURE__*/React.createElement(SText, _ref7.cn("SText", {
166
+ ..._assignProps3({
167
+ "tag": 'span'
168
+ }, _ref3)
169
+ }));
193
170
  }
194
171
  function Addon(props) {
195
172
  var _ref4 = arguments[0],
196
173
  _ref8;
197
- var SAddon = Box;
198
- return _ref8 = sstyled(props.styles), /*#__PURE__*/React.createElement(SAddon, _ref8.cn("SAddon", _objectSpread({}, _assignProps4({
199
- "tag": 'span'
200
- }, _ref4))));
174
+ const SAddon = Box;
175
+ return _ref8 = sstyled(props.styles), /*#__PURE__*/React.createElement(SAddon, _ref8.cn("SAddon", {
176
+ ..._assignProps4({
177
+ "tag": 'span'
178
+ }, _ref4)
179
+ }));
201
180
  }
202
- var Pills = createComponent(RootPills, {
181
+ const Pills = createComponent(RootPills, {
203
182
  Item: [Pill, {
204
- Text: Text,
205
- Addon: Addon
183
+ Text,
184
+ Addon
206
185
  }]
207
186
  });
208
- export var wrapPills = function wrapPills(wrapper) {
209
- return wrapper;
210
- };
187
+ export const wrapPills = wrapper => wrapper;
211
188
  export default Pills;
212
189
  //# sourceMappingURL=Pills.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Pills.js","names":["createComponent","Component","sstyled","Root","addonTextChildren","a11yEnhance","log","Box","NeighborLocation","useNeighborLocationDetect","React","style","_sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","RootPills","_Component","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","concat","_defineProperty","value","e","handlers","event","key","preventDefault","startIndex","type","selectable","itemValues","element","itemRefs","disabled","undefined","_inherits","_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 { createComponent, Component, sstyled, Root } from '@semcore/core';\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';\nimport { Box } from '@semcore/flex-box';\nimport NeighborLocation, { useNeighborLocationDetect } from '@semcore/neighbor-location';\nimport React from 'react';\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\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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","ignoreList":[]}
1
+ {"version":3,"file":"Pills.js","names":["NeighborLocation","Box","useNeighborLocationDetect","createComponent","Component","sstyled","Root","addonTextChildren","a11yEnhance","React","style","_sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","RootPills","constructor","args","_defineProperty","value","e","handlers","event","key","preventDefault","startIndex","type","selectable","itemValues","length","element","itemRefs","disabled","undefined","uncontrolledProps","getItemProps","index","size","asProps","isSelected","selected","tabIndex","onClick","bindHandlerClick","onKeyDown","bindHandleKeyDown","render","_ref","_ref5","SPills","Children","styles","controlsLength","createElement","cn","_assignProps","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 { NeighborLocation, Box, useNeighborLocationDetect } from '@semcore/base-components';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\nimport React from 'react';\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') {\n neighborElement.click();\n }\n }\n },\n childSelector: (props) =>\n props.behavior === 'auto' ? ['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\n itemValues = [];\n static enhance = [a11yEnhance(optionsA11yEnhance)];\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 === '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 === '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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","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport type { Box, BoxProps } from '@semcore/flex-box';\nimport type { NeighborItemProps, NeighborLocationProps } from '@semcore/neighbor-location';\nimport type React from 'react';\n\nexport type PillsValue = string | number | boolean | null;\n\n/**\n * @deprecated\n * use `manual`\n */\nexport type DeprecatedBehaviorTabs = 'tabs';\n/**\n * @deprecated\n * use `auto`\n */\nexport type DeprecatedBehaviorRadio = 'radio';\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?:\n DeprecatedBehaviorTabs | DeprecatedBehaviorRadio\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) &\nIntergalactic.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":"","ignoreList":[]}
1
+ {"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { Box, BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type React from 'react';\n\nexport type PillsValue = string | number | boolean | null;\n\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?:\n | 'auto'\n | 'manual';\n };\n\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\nexport type PillsContext = {\n getItemProps: PropGetterFn;\n};\n\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) &\nIntergalactic.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":"","ignoreList":[]}