@semcore/pills 5.44.0-prerelease.5 → 5.44.0-prerelease.6
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/cjs/Pills.js +93 -63
- package/lib/cjs/Pills.js.map +1 -1
- package/lib/cjs/index.d.js +2 -0
- package/lib/cjs/index.d.js.map +1 -0
- package/lib/cjs/index.js +5 -14
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/style/pills.shadow.css +20 -14
- package/lib/es6/Pills.js +81 -55
- package/lib/es6/Pills.js.map +1 -1
- package/lib/es6/index.d.js +2 -0
- package/lib/es6/index.d.js.map +1 -0
- package/lib/es6/index.js +2 -2
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/style/pills.shadow.css +20 -14
- package/lib/esm/Pills.mjs +88 -61
- package/lib/esm/index.mjs +0 -1
- package/lib/esm/style/pills.shadow.css +20 -14
- package/lib/types/index.d.ts +105 -2
- package/package.json +5 -5
- package/lib/cjs/Pills.type.js +0 -2
- package/lib/cjs/Pills.type.js.map +0 -1
- package/lib/es6/Pills.type.js +0 -2
- package/lib/es6/Pills.type.js.map +0 -1
- package/lib/esm/Pills.type.mjs +0 -1
- package/lib/types/Pills.d.ts +0 -6
- package/lib/types/Pills.type.d.ts +0 -74
package/lib/es6/Pills.js
CHANGED
|
@@ -1,67 +1,102 @@
|
|
|
1
1
|
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
|
2
2
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
3
3
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
4
|
-
import
|
|
4
|
+
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
|
|
5
5
|
import _inherits from "@babel/runtime/helpers/inherits";
|
|
6
|
+
import _createSuper from "@babel/runtime/helpers/createSuper";
|
|
6
7
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
7
|
-
import { sstyled as _sstyled } from "@semcore/core";
|
|
8
|
+
import { sstyled as _sstyled } from "@semcore/utils/lib/core/index";
|
|
8
9
|
import { assignProps as _assignProps4 } from "@semcore/core";
|
|
9
10
|
import { assignProps as _assignProps3 } from "@semcore/core";
|
|
10
11
|
import { assignProps as _assignProps2 } from "@semcore/core";
|
|
11
12
|
import { assignProps as _assignProps } from "@semcore/core";
|
|
12
|
-
import { NeighborLocation, Box, useNeighborLocationDetect } from '@semcore/base-components';
|
|
13
|
-
import { createComponent, Component, sstyled, Root } from '@semcore/core';
|
|
14
|
-
import addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';
|
|
15
|
-
import a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';
|
|
16
13
|
import React from 'react';
|
|
14
|
+
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
15
|
+
import { Box } from '@semcore/flex-box';
|
|
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
21
|
/*!__reshadow-styles__:"./style/pills.shadow.css"*/
|
|
18
|
-
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".
|
|
22
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SPills_gpkgu_gg_{display:inline-flex;align-items:center;justify-content:center;isolation:isolate;outline:0}.___SPills_gpkgu_gg_.__keyboardFocused_gpkgu_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469));z-index:1}@supports (color:color(display-p3 0 0 0)){.___SPills_gpkgu_gg_.__keyboardFocused_gpkgu_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469))}@media (color-gamut:p3){.___SPills_gpkgu_gg_.__keyboardFocused_gpkgu_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px color(display-p3 0.03256 0.12227 0.83249 / 0.469))}}}.___SPill_gpkgu_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, rgb(255, 255, 255));border:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161));border-radius:var(--intergalactic-control-rounded, 6px)}@supports (color:color(display-p3 0 0 0)){.___SPill_gpkgu_gg_{border:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___SPill_gpkgu_gg_{border:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___SPill_gpkgu_gg_::-moz-focus-inner{border:0;padding:0}.___SPill_gpkgu_gg_:active,.___SPill_gpkgu_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPill_gpkgu_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none;background:var(--intergalactic-bg-primary-neutral-hover, rgb(248, 249, 248))}}.___SPill_gpkgu_gg_.__selected_gpkgu_gg_{background:var(--intergalactic-control-secondary-info, rgba(0, 81, 255, 0.039));border-color:var(--intergalactic-border-info-active, rgba(0, 40, 230, 0.419));z-index:1}@supports (color:color(display-p3 0 0 0)){.___SPill_gpkgu_gg_.__selected_gpkgu_gg_{background:var(--intergalactic-control-secondary-info, rgba(0, 81, 255, 0.039))}@media (color-gamut:p3){.___SPill_gpkgu_gg_.__selected_gpkgu_gg_{background:var(--intergalactic-control-secondary-info, color(display-p3 0.12567 0.31308 0.96324 / 0.039))}}}.___SPill_gpkgu_gg_.__disabled_gpkgu_gg_{cursor:default;pointer-events:none}.___SPill_gpkgu_gg_.__disabled_gpkgu_gg_>*{opacity:var(--intergalactic-disabled-opacity, 0.4)}.___SPill_gpkgu_gg_.__keyboardFocused_gpkgu_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469));z-index:1}@supports (color:color(display-p3 0 0 0)){.___SPill_gpkgu_gg_.__keyboardFocused_gpkgu_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469))}@media (color-gamut:p3){.___SPill_gpkgu_gg_.__keyboardFocused_gpkgu_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px color(display-p3 0.03256 0.12227 0.83249 / 0.469))}}}.___SText_gpkgu_gg_{color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));display:inline-flex}.___SAddon_gpkgu_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));display:inline-flex;align-items:center;justify-content:center}@supports (color:color(display-p3 0 0 0)){.___SAddon_gpkgu_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SAddon_gpkgu_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SPill_gpkgu_gg_._size_m_gpkgu_gg_{height:var(--intergalactic-form-control-m, 28px);min-width:var(--intergalactic-form-control-m, 28px);font-size:var(--intergalactic-fs-200, 14px)}.___SPill_gpkgu_gg_._size_l_gpkgu_gg_ .___SText_gpkgu_gg_,.___SPill_gpkgu_gg_._size_m_gpkgu_gg_ .___SText_gpkgu_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_gpkgu_gg_._size_m_gpkgu_gg_ .___SAddon_gpkgu_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SPill_gpkgu_gg_._size_m_gpkgu_gg_ .___SAddon_gpkgu_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_gpkgu_gg_._size_m_gpkgu_gg_ .___SAddon_gpkgu_gg_:only-child{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_gpkgu_gg_._size_l_gpkgu_gg_{height:var(--intergalactic-form-control-l, 40px);min-width:var(--intergalactic-form-control-l, 40px);font-size:var(--intergalactic-fs-300, 16px)}.___SPill_gpkgu_gg_._size_l_gpkgu_gg_ .___SAddon_gpkgu_gg_:only-child,.___SPill_gpkgu_gg_._size_l_gpkgu_gg_ .___SText_gpkgu_gg_:only-child{margin-left:var(--intergalactic-spacing-3x, 12px);margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_gpkgu_gg_._size_l_gpkgu_gg_ .___SAddon_gpkgu_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SPill_gpkgu_gg_._size_l_gpkgu_gg_ .___SAddon_gpkgu_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_gpkgu_gg_._neighborLocation_right_gpkgu_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_gpkgu_gg_._neighborLocation_both_gpkgu_gg_{border-radius:0;margin-left:-1px}.___SPill_gpkgu_gg_._neighborLocation_left_gpkgu_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}", /*__inner_css_end__*/"gpkgu_gg_"),
|
|
19
23
|
/*__reshadow_css_end__*/
|
|
20
24
|
{
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"__SPill": "
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
25
|
+
"__SPills": "___SPills_gpkgu_gg_",
|
|
26
|
+
"_keyboardFocused": "__keyboardFocused_gpkgu_gg_",
|
|
27
|
+
"__SPill": "___SPill_gpkgu_gg_",
|
|
28
|
+
"_selected": "__selected_gpkgu_gg_",
|
|
29
|
+
"__SText": "___SText_gpkgu_gg_",
|
|
30
|
+
"__SAddon": "___SAddon_gpkgu_gg_",
|
|
31
|
+
"_neighborLocation_right": "_neighborLocation_right_gpkgu_gg_",
|
|
32
|
+
"_neighborLocation_both": "_neighborLocation_both_gpkgu_gg_",
|
|
33
|
+
"_neighborLocation_left": "_neighborLocation_left_gpkgu_gg_",
|
|
34
|
+
"_disabled": "__disabled_gpkgu_gg_",
|
|
35
|
+
"_size_m": "_size_m_gpkgu_gg_",
|
|
36
|
+
"_size_l": "_size_l_gpkgu_gg_"
|
|
32
37
|
});
|
|
38
|
+
var optionsA11yEnhance = {
|
|
39
|
+
onNeighborChange: function onNeighborChange(neighborElement, props) {
|
|
40
|
+
if (neighborElement) {
|
|
41
|
+
neighborElement.focus();
|
|
42
|
+
if (props.behavior === 'auto' || props.behavior === 'radio') {
|
|
43
|
+
neighborElement.click();
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
childSelector: function childSelector(props) {
|
|
48
|
+
return props.behavior === 'auto' || props.behavior === 'radio' ? ['role', 'radio'] : ['role', 'tab'];
|
|
49
|
+
}
|
|
50
|
+
};
|
|
33
51
|
var RootPills = /*#__PURE__*/function (_Component) {
|
|
52
|
+
_inherits(RootPills, _Component);
|
|
53
|
+
var _super = _createSuper(RootPills);
|
|
34
54
|
function RootPills() {
|
|
35
55
|
var _this;
|
|
36
56
|
_classCallCheck(this, RootPills);
|
|
37
57
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
38
58
|
args[_key] = arguments[_key];
|
|
39
59
|
}
|
|
40
|
-
_this =
|
|
41
|
-
_defineProperty(_this, "itemValues", []);
|
|
42
|
-
_defineProperty(_this, "bindHandlerClick", function (value) {
|
|
60
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
61
|
+
_defineProperty(_assertThisInitialized(_this), "itemValues", []);
|
|
62
|
+
_defineProperty(_assertThisInitialized(_this), "bindHandlerClick", function (value) {
|
|
43
63
|
return function (e) {
|
|
44
64
|
_this.handlers.value(value, e);
|
|
45
65
|
};
|
|
46
66
|
});
|
|
47
|
-
_defineProperty(_this, "bindHandleKeyDown", function (value) {
|
|
48
|
-
return function (
|
|
49
|
-
if (
|
|
50
|
-
|
|
51
|
-
_this.handlers.value(value,
|
|
67
|
+
_defineProperty(_assertThisInitialized(_this), "bindHandleKeyDown", function (value) {
|
|
68
|
+
return function (event) {
|
|
69
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
70
|
+
event.preventDefault();
|
|
71
|
+
_this.handlers.value(value, event);
|
|
52
72
|
}
|
|
53
73
|
};
|
|
54
74
|
});
|
|
75
|
+
_defineProperty(_assertThisInitialized(_this), "changeIndex", function (startIndex, type) {
|
|
76
|
+
var selectable = false;
|
|
77
|
+
while (!selectable && startIndex >= 0 && startIndex < _this.itemValues.length) {
|
|
78
|
+
if (type === 'increment') startIndex++;
|
|
79
|
+
if (type === 'decrement') startIndex--;
|
|
80
|
+
var element = _this.itemRefs[startIndex];
|
|
81
|
+
if ((element === null || element === void 0 ? void 0 : element.disabled) === false) {
|
|
82
|
+
selectable = true;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
return startIndex >= 0 && startIndex < _this.itemValues.length ? startIndex : undefined;
|
|
86
|
+
});
|
|
55
87
|
return _this;
|
|
56
88
|
}
|
|
57
|
-
|
|
58
|
-
|
|
89
|
+
_createClass(RootPills, [{
|
|
90
|
+
key: "componentDidMount",
|
|
91
|
+
value: function componentDidMount() {
|
|
92
|
+
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');
|
|
93
|
+
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');
|
|
94
|
+
}
|
|
95
|
+
}, {
|
|
59
96
|
key: "uncontrolledProps",
|
|
60
97
|
value: function uncontrolledProps() {
|
|
61
98
|
return {
|
|
62
|
-
value:
|
|
63
|
-
return _value;
|
|
64
|
-
}
|
|
99
|
+
value: null
|
|
65
100
|
};
|
|
66
101
|
}
|
|
67
102
|
}, {
|
|
@@ -99,7 +134,7 @@ var RootPills = /*#__PURE__*/function (_Component) {
|
|
|
99
134
|
behavior = _this$asProps2.behavior,
|
|
100
135
|
value = _this$asProps2.value;
|
|
101
136
|
return _ref5 = sstyled(styles), /*#__PURE__*/React.createElement(SPills, _ref5.cn("SPills", _objectSpread({}, _assignProps({
|
|
102
|
-
"role": behavior === 'auto' ? 'radiogroup' : 'tablist',
|
|
137
|
+
"role": behavior === 'radio' || behavior === 'auto' ? 'radiogroup' : 'tablist',
|
|
103
138
|
"aria-disabled": disabled,
|
|
104
139
|
"use:tabIndex": value !== null ? -1 : 0
|
|
105
140
|
}, _ref))), /*#__PURE__*/React.createElement(NeighborLocation, _ref5.cn("NeighborLocation", {
|
|
@@ -107,6 +142,7 @@ var RootPills = /*#__PURE__*/function (_Component) {
|
|
|
107
142
|
}), /*#__PURE__*/React.createElement(Children, _ref5.cn("Children", {}))));
|
|
108
143
|
}
|
|
109
144
|
}]);
|
|
145
|
+
return RootPills;
|
|
110
146
|
}(Component);
|
|
111
147
|
_defineProperty(RootPills, "displayName", 'Pills');
|
|
112
148
|
_defineProperty(RootPills, "style", style);
|
|
@@ -118,20 +154,7 @@ _defineProperty(RootPills, "defaultProps", function (_ref9) {
|
|
|
118
154
|
behavior: behavior !== null && behavior !== void 0 ? behavior : 'auto'
|
|
119
155
|
};
|
|
120
156
|
});
|
|
121
|
-
_defineProperty(RootPills, "enhance", [a11yEnhance(
|
|
122
|
-
onNeighborChange: function onNeighborChange(neighborElement, props) {
|
|
123
|
-
if (neighborElement) {
|
|
124
|
-
neighborElement.focus();
|
|
125
|
-
if (props.behavior === 'auto') {
|
|
126
|
-
neighborElement.click();
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
},
|
|
130
|
-
childSelector: function childSelector(props) {
|
|
131
|
-
var selector = props.behavior === 'auto' ? ['role', 'radio'] : ['role', 'tab'];
|
|
132
|
-
return selector;
|
|
133
|
-
}
|
|
134
|
-
})]);
|
|
157
|
+
_defineProperty(RootPills, "enhance", [a11yEnhance(optionsA11yEnhance), keyboardFocusEnhance()]);
|
|
135
158
|
function Pill(props) {
|
|
136
159
|
var _ref2 = arguments[0],
|
|
137
160
|
_ref6;
|
|
@@ -145,15 +168,17 @@ function Pill(props) {
|
|
|
145
168
|
index = props.index,
|
|
146
169
|
behavior = props.behavior;
|
|
147
170
|
var neighborLocation = useNeighborLocationDetect(index);
|
|
148
|
-
var roleAreaProps = {
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
'aria-
|
|
152
|
-
}
|
|
171
|
+
var roleAreaProps = {};
|
|
172
|
+
if (behavior === 'radio' || behavior === 'auto') {
|
|
173
|
+
roleAreaProps.role = 'radio';
|
|
174
|
+
roleAreaProps['aria-checked'] = selected;
|
|
175
|
+
} else {
|
|
176
|
+
roleAreaProps.role = 'tab';
|
|
177
|
+
roleAreaProps['aria-selected'] = selected;
|
|
178
|
+
}
|
|
153
179
|
return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SPill, _ref6.cn("SPill", _objectSpread({}, _assignProps2(_objectSpread({
|
|
154
180
|
"tag": 'button',
|
|
155
181
|
"type": 'button',
|
|
156
|
-
"tabIndex": 0,
|
|
157
182
|
"neighborLocation": neighborLocation,
|
|
158
183
|
"aria-disabled": disabled
|
|
159
184
|
}, roleAreaProps), _ref2))), addonLeft ? /*#__PURE__*/React.createElement(Pills.Item.Addon, {
|
|
@@ -162,6 +187,7 @@ function Pill(props) {
|
|
|
162
187
|
tag: addonRight
|
|
163
188
|
}) : null);
|
|
164
189
|
}
|
|
190
|
+
Pill.enhance = [keyboardFocusEnhance()];
|
|
165
191
|
function Text(props) {
|
|
166
192
|
var _ref3 = arguments[0],
|
|
167
193
|
_ref7;
|
|
@@ -178,14 +204,14 @@ function Addon(props) {
|
|
|
178
204
|
"tag": 'span'
|
|
179
205
|
}, _ref4))));
|
|
180
206
|
}
|
|
181
|
-
export var wrapPills = function wrapPills(wrapper) {
|
|
182
|
-
return wrapper;
|
|
183
|
-
};
|
|
184
207
|
var Pills = createComponent(RootPills, {
|
|
185
208
|
Item: [Pill, {
|
|
186
209
|
Text: Text,
|
|
187
210
|
Addon: Addon
|
|
188
211
|
}]
|
|
189
212
|
});
|
|
213
|
+
export var wrapPills = function wrapPills(wrapper) {
|
|
214
|
+
return wrapper;
|
|
215
|
+
};
|
|
190
216
|
export default Pills;
|
|
191
217
|
//# sourceMappingURL=Pills.js.map
|
package/lib/es6/Pills.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pills.js","names":["NeighborLocation","Box","useNeighborLocationDetect","createComponent","Component","sstyled","Root","addonTextChildren","a11yEnhance","React","style","_sstyled","insert","RootPills","_Component","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","concat","_defineProperty","value","e","handlers","key","preventDefault","_inherits","_createClass","uncontrolledProps","getItemProps","props","index","_this$asProps","asProps","size","disabled","behavior","isSelected","itemValues","selected","tabIndex","onClick","bindHandlerClick","onKeyDown","bindHandleKeyDown","render","_ref","_ref5","SPills","_this$asProps2","Children","styles","controlsLength","createElement","cn","_objectSpread","_assignProps","_ref9","defaultValue","onNeighborChange","neighborElement","focus","click","childSelector","selector","Pill","_ref2","arguments[0]","_ref6","SPill","addonLeft","addonRight","neighborLocation","roleAreaProps","undefined","_assignProps2","Pills","Item","Addon","tag","Text","_ref3","_ref7","SText","_assignProps3","_ref4","_ref8","SAddon","_assignProps4","wrapPills","wrapper"],"sources":["../../src/Pills.tsx"],"sourcesContent":["import { NeighborLocation, Box, useNeighborLocationDetect } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\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 type { NSPills } from './Pills.type';\nimport style from './style/pills.shadow.css';\n\nclass RootPills extends Component<\n Intergalactic.InternalTypings.InferComponentProps<NSPills.Component>,\n typeof RootPills.enhance,\n NSPills.Handlers\n> {\n static displayName = 'Pills';\n static style = style;\n static defaultProps = ({ behavior }: NSPills.Props) => ({\n size: 'm',\n defaultValue: null,\n behavior: behavior ?? 'auto',\n });\n\n itemValues: Array<NSPills.Pill.Props['value']> = [];\n\n static enhance = [a11yEnhance({\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 const selector = props.behavior === 'auto' ? ['role', 'radio'] : ['role', 'tab'];\n\n return selector as [string, string];\n },\n })] as const;\n\n uncontrolledProps() {\n return {\n value: (value: NSPills.Pill.Props['value'], e: React.SyntheticEvent) => value,\n };\n }\n\n bindHandlerClick = (value: NSPills.Pill.Props['value']) => (e: React.MouseEvent) => {\n this.handlers.value(value, e);\n };\n\n bindHandleKeyDown = (value: NSPills.Pill.Props['value']) => (e: React.KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.handlers.value(value, e);\n }\n };\n\n getItemProps(props: NSPills.Pill.Props, index: number) {\n const { value, size, disabled, behavior } = this.asProps;\n const isSelected = value === props.value;\n\n this.itemValues[index] = props.value;\n\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 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: Intergalactic.InternalTypings.InferChildComponentProps<NSPills.Pill.Component, typeof RootPills, 'Item'>) {\n const SPill = Root;\n const { Children, styles, addonLeft, addonRight, selected, disabled, index, behavior } = props;\n const neighborLocation = useNeighborLocationDetect(index);\n\n const roleAreaProps = {\n 'role': behavior === 'auto' ? 'radio' : 'tab',\n 'aria-checked': behavior === 'auto' ? selected : undefined,\n 'aria-selected': behavior !== 'auto' ? selected : undefined,\n };\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: Intergalactic.InternalTypings.InferComponentProps<NSPills.Pill.Text.Component>) {\n const SText = Root;\n return sstyled(props.styles)(<SText render={Box} tag='span' />);\n}\n\nfunction Addon(props: Intergalactic.InternalTypings.InferComponentProps<NSPills.Pill.Addon.Component>) {\n const SAddon = Root;\n return sstyled(props.styles)(<SAddon render={Box} tag='span' />);\n}\n\nexport const wrapPills = <PropsExtending extends {}>(wrapper: (\n props: Intergalactic.InternalTypings.UntypeRefAndTag<\n Intergalactic.InternalTypings.ComponentPropsNesting<NSPills.WrapComponent>\n > &\n PropsExtending,\n) => React.ReactNode) => wrapper as NSPills.WrapComponent<PropsExtending>;\n\nconst Pills = createComponent(RootPills, {\n Item: [Pill, { Text, Addon }],\n}) as unknown as NSPills.Component;\n\nexport default Pills;\n"],"mappings":"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","ignoreList":[]}
|
|
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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"}
|
|
@@ -0,0 +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":""}
|
package/lib/es6/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { default
|
|
2
|
-
export * from './Pills
|
|
1
|
+
export { default } from './Pills';
|
|
2
|
+
export * from './Pills';
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
package/lib/es6/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["default"
|
|
1
|
+
{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './Pills';\nexport * from './Pills';\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,SAAS;AACjC,cAAc,SAAS"}
|
|
@@ -3,20 +3,12 @@ SPills {
|
|
|
3
3
|
align-items: center;
|
|
4
4
|
justify-content: center;
|
|
5
5
|
isolation: isolate;
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
SPill[selected] {
|
|
9
|
-
background: var(--intergalactic-control-secondary-info, oklch(0.527 0.264 262.9 / 0.039));
|
|
10
|
-
border-color: var(--intergalactic-border-info-active, oklch(0.443 0.273 264.2 / 0.419));
|
|
11
|
-
z-index: 3;
|
|
12
|
-
}
|
|
13
|
-
SPill:focus-visible, SPill[selected] {
|
|
14
|
-
z-index: 3;
|
|
15
|
-
}
|
|
6
|
+
outline: none;
|
|
7
|
+
}
|
|
16
8
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
9
|
+
SPills[keyboardFocused]:focus {
|
|
10
|
+
box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(0.424 0.269 264.2 / 0.469));
|
|
11
|
+
z-index: 1;
|
|
20
12
|
}
|
|
21
13
|
|
|
22
14
|
SPill {
|
|
@@ -35,6 +27,7 @@ SPill {
|
|
|
35
27
|
text-decoration: none;
|
|
36
28
|
-webkit-tap-highlight-color: transparent;
|
|
37
29
|
overflow: visible;
|
|
30
|
+
outline: 0;
|
|
38
31
|
text-align: center;
|
|
39
32
|
vertical-align: middle;
|
|
40
33
|
font-family: inherit;
|
|
@@ -48,7 +41,9 @@ SPill {
|
|
|
48
41
|
padding: 0;
|
|
49
42
|
}
|
|
50
43
|
|
|
51
|
-
&:active
|
|
44
|
+
&:active,
|
|
45
|
+
&:hover,
|
|
46
|
+
&:focus {
|
|
52
47
|
outline: 0;
|
|
53
48
|
text-decoration: none;
|
|
54
49
|
}
|
|
@@ -58,6 +53,12 @@ SPill {
|
|
|
58
53
|
}
|
|
59
54
|
}
|
|
60
55
|
|
|
56
|
+
SPill[selected] {
|
|
57
|
+
background: var(--intergalactic-control-secondary-info, oklch(0.527 0.264 262.9 / 0.039));
|
|
58
|
+
border-color: var(--intergalactic-border-info-active, oklch(0.443 0.273 264.2 / 0.419));
|
|
59
|
+
z-index: 1;
|
|
60
|
+
}
|
|
61
|
+
|
|
61
62
|
SPill[disabled] {
|
|
62
63
|
cursor: default;
|
|
63
64
|
/* Disable link interactions */
|
|
@@ -68,6 +69,11 @@ SPill[disabled] {
|
|
|
68
69
|
}
|
|
69
70
|
}
|
|
70
71
|
|
|
72
|
+
SPill[keyboardFocused] {
|
|
73
|
+
box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(0.424 0.269 264.2 / 0.469));
|
|
74
|
+
z-index: 1;
|
|
75
|
+
}
|
|
76
|
+
|
|
71
77
|
SText {
|
|
72
78
|
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
|
|
73
79
|
display: inline-flex;
|