@semcore/pills 5.44.0-prerelease.1 → 5.44.0-prerelease.5
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 +63 -93
- package/lib/cjs/Pills.js.map +1 -1
- package/lib/cjs/Pills.type.js +2 -0
- package/lib/cjs/Pills.type.js.map +1 -0
- package/lib/cjs/index.js +14 -5
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/style/pills.shadow.css +14 -20
- package/lib/es6/Pills.js +55 -81
- package/lib/es6/Pills.js.map +1 -1
- package/lib/es6/Pills.type.js +2 -0
- package/lib/es6/Pills.type.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 +14 -20
- package/lib/esm/Pills.mjs +61 -88
- package/lib/esm/Pills.type.mjs +1 -0
- package/lib/esm/index.mjs +1 -0
- package/lib/esm/style/pills.shadow.css +14 -20
- package/lib/types/Pills.d.ts +6 -0
- package/lib/types/Pills.type.d.ts +74 -0
- package/lib/types/index.d.ts +2 -105
- package/package.json +5 -5
- package/lib/cjs/index.d.js +0 -2
- package/lib/cjs/index.d.js.map +0 -1
- package/lib/es6/index.d.js +0 -2
- package/lib/es6/index.d.js.map +0 -1
package/lib/cjs/Pills.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
@@ -9,98 +8,62 @@ exports.wrapPills = exports["default"] = void 0;
|
|
|
9
8
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
10
9
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
11
10
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
12
|
-
var
|
|
11
|
+
var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
|
|
13
12
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
14
|
-
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
|
|
15
13
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
16
|
-
var
|
|
17
|
-
var
|
|
14
|
+
var _core = require("@semcore/core");
|
|
15
|
+
var _baseComponents = require("@semcore/base-components");
|
|
16
|
+
var _addonTextChildren = _interopRequireDefault(require("@semcore/core/lib/utils/addonTextChildren"));
|
|
17
|
+
var _a11yEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/a11yEnhance"));
|
|
18
18
|
var _react = _interopRequireDefault(require("react"));
|
|
19
|
-
var _flexBox = require("@semcore/flex-box");
|
|
20
|
-
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"));
|
|
25
19
|
/*!__reshadow-styles__:"./style/pills.shadow.css"*/
|
|
26
|
-
var style = (
|
|
20
|
+
var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SPills_13owk_gg_{display:inline-flex;align-items:center;justify-content:center;isolation:isolate;border-radius:var(--intergalactic-control-rounded, 6px)}.___SPills_13owk_gg_ .___SPill_13owk_gg_.__selected_13owk_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:3}@supports (color:color(display-p3 0 0 0%)){.___SPills_13owk_gg_ .___SPill_13owk_gg_.__selected_13owk_gg_{background:var(--intergalactic-control-secondary-info, rgba(0, 81, 255, 0.039))}@media (color-gamut:p3){.___SPills_13owk_gg_ .___SPill_13owk_gg_.__selected_13owk_gg_{background:var(--intergalactic-control-secondary-info, color(display-p3 0.12567 0.31309 0.96324 / 0.039))}}}.___SPills_13owk_gg_ .___SPill_13owk_gg_.__selected_13owk_gg_,.___SPills_13owk_gg_ .___SPill_13owk_gg_:focus-visible{z-index:3}.___SPills_13owk_gg_ .___SPill_13owk_gg_:active{z-index:2}@media (hover:hover){.___SPills_13owk_gg_ .___SPill_13owk_gg_:hover{z-index:2}}.___SPill_13owk_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, 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_13owk_gg_{border:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___SPill_13owk_gg_{border:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___SPill_13owk_gg_::-moz-focus-inner{border:0;padding:0}.___SPill_13owk_gg_:active{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPill_13owk_gg_:hover{background:var(--intergalactic-bg-primary-neutral-hover, rgb(248, 249, 248))}}.___SPill_13owk_gg_.__disabled_13owk_gg_{cursor:default;pointer-events:none}.___SPill_13owk_gg_.__disabled_13owk_gg_>*{opacity:var(--intergalactic-disabled-opacity, 0.4)}.___SText_13owk_gg_{color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));display:inline-flex}.___SAddon_13owk_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_13owk_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SAddon_13owk_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SPill_13owk_gg_._size_m_13owk_gg_{height:var(--intergalactic-form-control-m, 28px);min-width:var(--intergalactic-form-control-m, 28px);font-size:var(--intergalactic-fs-200, 14px)}.___SPill_13owk_gg_._size_l_13owk_gg_ .___SText_13owk_gg_,.___SPill_13owk_gg_._size_m_13owk_gg_ .___SText_13owk_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_13owk_gg_._size_m_13owk_gg_ .___SAddon_13owk_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SPill_13owk_gg_._size_m_13owk_gg_ .___SAddon_13owk_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_13owk_gg_._size_m_13owk_gg_ .___SAddon_13owk_gg_:only-child{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_13owk_gg_._size_l_13owk_gg_{height:var(--intergalactic-form-control-l, 40px);min-width:var(--intergalactic-form-control-l, 40px);font-size:var(--intergalactic-fs-300, 16px)}.___SPill_13owk_gg_._size_l_13owk_gg_ .___SAddon_13owk_gg_:only-child,.___SPill_13owk_gg_._size_l_13owk_gg_ .___SText_13owk_gg_:only-child{margin-left:var(--intergalactic-spacing-3x, 12px);margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_13owk_gg_._size_l_13owk_gg_ .___SAddon_13owk_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SPill_13owk_gg_._size_l_13owk_gg_ .___SAddon_13owk_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_13owk_gg_._neighborLocation_right_13owk_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_13owk_gg_._neighborLocation_both_13owk_gg_{border-radius:0;margin-left:-1px}.___SPill_13owk_gg_._neighborLocation_left_13owk_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}", /*__inner_css_end__*/"13owk_gg_"),
|
|
27
21
|
/*__reshadow_css_end__*/
|
|
28
22
|
{
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"__SPill": "
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
"
|
|
40
|
-
"_size_l": "_size_l_1gk2t_gg_"
|
|
23
|
+
"__SText": "___SText_13owk_gg_",
|
|
24
|
+
"__SAddon": "___SAddon_13owk_gg_",
|
|
25
|
+
"__SPill": "___SPill_13owk_gg_",
|
|
26
|
+
"_neighborLocation_right": "_neighborLocation_right_13owk_gg_",
|
|
27
|
+
"_neighborLocation_both": "_neighborLocation_both_13owk_gg_",
|
|
28
|
+
"_neighborLocation_left": "_neighborLocation_left_13owk_gg_",
|
|
29
|
+
"__SPills": "___SPills_13owk_gg_",
|
|
30
|
+
"_selected": "__selected_13owk_gg_",
|
|
31
|
+
"_disabled": "__disabled_13owk_gg_",
|
|
32
|
+
"_size_m": "_size_m_13owk_gg_",
|
|
33
|
+
"_size_l": "_size_l_13owk_gg_"
|
|
41
34
|
});
|
|
42
|
-
var optionsA11yEnhance = {
|
|
43
|
-
onNeighborChange: function onNeighborChange(neighborElement, props) {
|
|
44
|
-
if (neighborElement) {
|
|
45
|
-
neighborElement.focus();
|
|
46
|
-
if (props.behavior === 'auto' || props.behavior === 'radio') {
|
|
47
|
-
neighborElement.click();
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
},
|
|
51
|
-
childSelector: function childSelector(props) {
|
|
52
|
-
return props.behavior === 'auto' || props.behavior === 'radio' ? ['role', 'radio'] : ['role', 'tab'];
|
|
53
|
-
}
|
|
54
|
-
};
|
|
55
35
|
var RootPills = /*#__PURE__*/function (_Component) {
|
|
56
|
-
(0, _inherits2["default"])(RootPills, _Component);
|
|
57
|
-
var _super = (0, _createSuper2["default"])(RootPills);
|
|
58
36
|
function RootPills() {
|
|
59
37
|
var _this;
|
|
60
38
|
(0, _classCallCheck2["default"])(this, RootPills);
|
|
61
39
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
62
40
|
args[_key] = arguments[_key];
|
|
63
41
|
}
|
|
64
|
-
_this =
|
|
65
|
-
(0, _defineProperty2["default"])(
|
|
66
|
-
(0, _defineProperty2["default"])(
|
|
42
|
+
_this = (0, _callSuper2["default"])(this, RootPills, [].concat(args));
|
|
43
|
+
(0, _defineProperty2["default"])(_this, "itemValues", []);
|
|
44
|
+
(0, _defineProperty2["default"])(_this, "bindHandlerClick", function (value) {
|
|
67
45
|
return function (e) {
|
|
68
46
|
_this.handlers.value(value, e);
|
|
69
47
|
};
|
|
70
48
|
});
|
|
71
|
-
(0, _defineProperty2["default"])(
|
|
72
|
-
return function (
|
|
73
|
-
if (
|
|
74
|
-
|
|
75
|
-
_this.handlers.value(value,
|
|
49
|
+
(0, _defineProperty2["default"])(_this, "bindHandleKeyDown", function (value) {
|
|
50
|
+
return function (e) {
|
|
51
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
52
|
+
e.preventDefault();
|
|
53
|
+
_this.handlers.value(value, e);
|
|
76
54
|
}
|
|
77
55
|
};
|
|
78
56
|
});
|
|
79
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeIndex", function (startIndex, type) {
|
|
80
|
-
var selectable = false;
|
|
81
|
-
while (!selectable && startIndex >= 0 && startIndex < _this.itemValues.length) {
|
|
82
|
-
if (type === 'increment') startIndex++;
|
|
83
|
-
if (type === 'decrement') startIndex--;
|
|
84
|
-
var element = _this.itemRefs[startIndex];
|
|
85
|
-
if ((element === null || element === void 0 ? void 0 : element.disabled) === false) {
|
|
86
|
-
selectable = true;
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
return startIndex >= 0 && startIndex < _this.itemValues.length ? startIndex : undefined;
|
|
90
|
-
});
|
|
91
57
|
return _this;
|
|
92
58
|
}
|
|
93
|
-
(0,
|
|
94
|
-
|
|
95
|
-
value: function componentDidMount() {
|
|
96
|
-
_logger["default"].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');
|
|
97
|
-
_logger["default"].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');
|
|
98
|
-
}
|
|
99
|
-
}, {
|
|
59
|
+
(0, _inherits2["default"])(RootPills, _Component);
|
|
60
|
+
return (0, _createClass2["default"])(RootPills, [{
|
|
100
61
|
key: "uncontrolledProps",
|
|
101
62
|
value: function uncontrolledProps() {
|
|
102
63
|
return {
|
|
103
|
-
value:
|
|
64
|
+
value: function value(_value, e) {
|
|
65
|
+
return _value;
|
|
66
|
+
}
|
|
104
67
|
};
|
|
105
68
|
}
|
|
106
69
|
}, {
|
|
@@ -129,7 +92,7 @@ var RootPills = /*#__PURE__*/function (_Component) {
|
|
|
129
92
|
value: function render() {
|
|
130
93
|
var _ref = this.asProps,
|
|
131
94
|
_ref5;
|
|
132
|
-
var SPills =
|
|
95
|
+
var SPills = _baseComponents.Box;
|
|
133
96
|
var _this$asProps2 = this.asProps,
|
|
134
97
|
Children = _this$asProps2.Children,
|
|
135
98
|
styles = _this$asProps2.styles,
|
|
@@ -138,15 +101,14 @@ var RootPills = /*#__PURE__*/function (_Component) {
|
|
|
138
101
|
behavior = _this$asProps2.behavior,
|
|
139
102
|
value = _this$asProps2.value;
|
|
140
103
|
return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPills, _ref5.cn("SPills", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
141
|
-
"role": behavior === '
|
|
104
|
+
"role": behavior === 'auto' ? 'radiogroup' : 'tablist',
|
|
142
105
|
"aria-disabled": disabled,
|
|
143
106
|
"use:tabIndex": value !== null ? -1 : 0
|
|
144
|
-
}, _ref))), /*#__PURE__*/_react["default"].createElement(
|
|
107
|
+
}, _ref))), /*#__PURE__*/_react["default"].createElement(_baseComponents.NeighborLocation, _ref5.cn("NeighborLocation", {
|
|
145
108
|
"controlsLength": controlsLength
|
|
146
109
|
}), /*#__PURE__*/_react["default"].createElement(Children, _ref5.cn("Children", {}))));
|
|
147
110
|
}
|
|
148
111
|
}]);
|
|
149
|
-
return RootPills;
|
|
150
112
|
}(_core.Component);
|
|
151
113
|
(0, _defineProperty2["default"])(RootPills, "displayName", 'Pills');
|
|
152
114
|
(0, _defineProperty2["default"])(RootPills, "style", style);
|
|
@@ -158,11 +120,24 @@ var RootPills = /*#__PURE__*/function (_Component) {
|
|
|
158
120
|
behavior: behavior !== null && behavior !== void 0 ? behavior : 'auto'
|
|
159
121
|
};
|
|
160
122
|
});
|
|
161
|
-
(0, _defineProperty2["default"])(RootPills, "enhance", [(0, _a11yEnhance["default"])(
|
|
123
|
+
(0, _defineProperty2["default"])(RootPills, "enhance", [(0, _a11yEnhance["default"])({
|
|
124
|
+
onNeighborChange: function onNeighborChange(neighborElement, props) {
|
|
125
|
+
if (neighborElement) {
|
|
126
|
+
neighborElement.focus();
|
|
127
|
+
if (props.behavior === 'auto') {
|
|
128
|
+
neighborElement.click();
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
},
|
|
132
|
+
childSelector: function childSelector(props) {
|
|
133
|
+
var selector = props.behavior === 'auto' ? ['role', 'radio'] : ['role', 'tab'];
|
|
134
|
+
return selector;
|
|
135
|
+
}
|
|
136
|
+
})]);
|
|
162
137
|
function Pill(props) {
|
|
163
138
|
var _ref2 = arguments[0],
|
|
164
139
|
_ref6;
|
|
165
|
-
var SPill =
|
|
140
|
+
var SPill = _baseComponents.Box;
|
|
166
141
|
var Children = props.Children,
|
|
167
142
|
styles = props.styles,
|
|
168
143
|
addonLeft = props.addonLeft,
|
|
@@ -171,18 +146,16 @@ function Pill(props) {
|
|
|
171
146
|
disabled = props.disabled,
|
|
172
147
|
index = props.index,
|
|
173
148
|
behavior = props.behavior;
|
|
174
|
-
var neighborLocation = (0,
|
|
175
|
-
var roleAreaProps = {
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
}
|
|
180
|
-
roleAreaProps.role = 'tab';
|
|
181
|
-
roleAreaProps['aria-selected'] = selected;
|
|
182
|
-
}
|
|
149
|
+
var neighborLocation = (0, _baseComponents.useNeighborLocationDetect)(index);
|
|
150
|
+
var roleAreaProps = {
|
|
151
|
+
'role': behavior === 'auto' ? 'radio' : 'tab',
|
|
152
|
+
'aria-checked': behavior === 'auto' ? selected : undefined,
|
|
153
|
+
'aria-selected': behavior !== 'auto' ? selected : undefined
|
|
154
|
+
};
|
|
183
155
|
return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPill, _ref6.cn("SPill", (0, _objectSpread2["default"])({}, (0, _core.assignProps)((0, _objectSpread2["default"])({
|
|
184
156
|
"tag": 'button',
|
|
185
157
|
"type": 'button',
|
|
158
|
+
"tabIndex": 0,
|
|
186
159
|
"neighborLocation": neighborLocation,
|
|
187
160
|
"aria-disabled": disabled
|
|
188
161
|
}, roleAreaProps), _ref2))), addonLeft ? /*#__PURE__*/_react["default"].createElement(Pills.Item.Addon, {
|
|
@@ -191,11 +164,10 @@ function Pill(props) {
|
|
|
191
164
|
tag: addonRight
|
|
192
165
|
}) : null);
|
|
193
166
|
}
|
|
194
|
-
Pill.enhance = [(0, _keyboardFocusEnhance["default"])()];
|
|
195
167
|
function Text(props) {
|
|
196
168
|
var _ref3 = arguments[0],
|
|
197
169
|
_ref7;
|
|
198
|
-
var SText =
|
|
170
|
+
var SText = _baseComponents.Box;
|
|
199
171
|
return _ref7 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SText, _ref7.cn("SText", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
200
172
|
"tag": 'span'
|
|
201
173
|
}, _ref3))));
|
|
@@ -203,21 +175,19 @@ function Text(props) {
|
|
|
203
175
|
function Addon(props) {
|
|
204
176
|
var _ref4 = arguments[0],
|
|
205
177
|
_ref8;
|
|
206
|
-
var SAddon =
|
|
178
|
+
var SAddon = _baseComponents.Box;
|
|
207
179
|
return _ref8 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SAddon, _ref8.cn("SAddon", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
208
180
|
"tag": 'span'
|
|
209
181
|
}, _ref4))));
|
|
210
182
|
}
|
|
211
|
-
var
|
|
183
|
+
var wrapPills = exports.wrapPills = function wrapPills(wrapper) {
|
|
184
|
+
return wrapper;
|
|
185
|
+
};
|
|
186
|
+
var Pills = (0, _core.createComponent)(RootPills, {
|
|
212
187
|
Item: [Pill, {
|
|
213
188
|
Text: Text,
|
|
214
189
|
Addon: Addon
|
|
215
190
|
}]
|
|
216
191
|
});
|
|
217
|
-
var
|
|
218
|
-
return wrapper;
|
|
219
|
-
};
|
|
220
|
-
exports.wrapPills = wrapPills;
|
|
221
|
-
var _default = Pills;
|
|
222
|
-
exports["default"] = _default;
|
|
192
|
+
var _default = exports["default"] = Pills;
|
|
223
193
|
//# sourceMappingURL=Pills.js.map
|
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","_baseComponents","_addonTextChildren","_interopRequireDefault","_a11yEnhance","_react","style","sstyled","insert","RootPills","_Component","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","_callSuper2","concat","_defineProperty2","value","e","handlers","key","preventDefault","_inherits2","_createClass2","uncontrolledProps","getItemProps","props","index","_this$asProps","asProps","size","disabled","behavior","isSelected","itemValues","selected","tabIndex","onClick","bindHandlerClick","onKeyDown","bindHandleKeyDown","render","_ref","_ref5","SPills","Box","_this$asProps2","Children","styles","controlsLength","createElement","cn","_objectSpread2","assignProps","NeighborLocation","Component","_ref9","defaultValue","a11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","selector","Pill","_ref2","arguments[0]","_ref6","SPill","addonLeft","addonRight","neighborLocation","useNeighborLocationDetect","roleAreaProps","undefined","Pills","Item","Addon","tag","addonTextChildren","Text","_ref3","_ref7","SText","_ref4","_ref8","SAddon","wrapPills","exports","wrapper","createComponent","_default"],"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":";;;;;;;;;;;;;AAEA,IAAAA,KAAA,GAAAC,OAAA;AAFA,IAAAC,eAAA,GAAAD,OAAA;AAGA,IAAAE,kBAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,YAAA,GAAAD,sBAAA,CAAAH,OAAA;AACA,IAAAK,MAAA,GAAAF,sBAAA,CAAAH,OAAA;AAA0B;AAAA,IAAAM,KAAA,8BAAAP,KAAA,CAAAQ,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAAA,IAKpBC,SAAS,0BAAAC,UAAA;EAAA,SAAAD,UAAA;IAAA,IAAAE,KAAA;IAAA,IAAAC,gBAAA,mBAAAH,SAAA;IAAA,SAAAI,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;MAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;IAAA;IAAAP,KAAA,OAAAQ,WAAA,mBAAAV,SAAA,KAAAW,MAAA,CAAAJ,IAAA;IAAA,IAAAK,gBAAA,aAAAV,KAAA,gBAaoC,EAAE;IAAA,IAAAU,gBAAA,aAAAV,KAAA,sBAwBhC,UAACW,KAAkC;MAAA,OAAK,UAACC,CAAmB,EAAK;QAClFZ,KAAA,CAAKa,QAAQ,CAACF,KAAK,CAACA,KAAK,EAAEC,CAAC,CAAC;MAC/B,CAAC;IAAA;IAAA,IAAAF,gBAAA,aAAAV,KAAA,uBAEmB,UAACW,KAAkC;MAAA,OAAK,UAACC,CAAsB,EAAK;QACtF,IAAIA,CAAC,CAACE,GAAG,KAAK,OAAO,IAAIF,CAAC,CAACE,GAAG,KAAK,GAAG,EAAE;UACtCF,CAAC,CAACG,cAAc,CAAC,CAAC;UAClBf,KAAA,CAAKa,QAAQ,CAACF,KAAK,CAACA,KAAK,EAAEC,CAAC,CAAC;QAC/B;MACF,CAAC;IAAA;IAAA,OAAAZ,KAAA;EAAA;EAAA,IAAAgB,UAAA,aAAAlB,SAAA,EAAAC,UAAA;EAAA,WAAAkB,aAAA,aAAAnB,SAAA;IAAAgB,GAAA;IAAAH,KAAA,EAfD,SAAAO,iBAAiBA,CAAA,EAAG;MAClB,OAAO;QACLP,KAAK,EAAE,SAAPA,KAAKA,CAAGA,MAAkC,EAAEC,CAAuB;UAAA,OAAKD,MAAK;QAAA;MAC/E,CAAC;IACH;EAAC;IAAAG,GAAA;IAAAH,KAAA,EAaD,SAAAQ,YAAYA,CAACC,KAAyB,EAAEC,KAAa,EAAE;MACrD,IAAAC,aAAA,GAA4C,IAAI,CAACC,OAAO;QAAhDZ,KAAK,GAAAW,aAAA,CAALX,KAAK;QAAEa,IAAI,GAAAF,aAAA,CAAJE,IAAI;QAAEC,QAAQ,GAAAH,aAAA,CAARG,QAAQ;QAAEC,QAAQ,GAAAJ,aAAA,CAARI,QAAQ;MACvC,IAAMC,UAAU,GAAGhB,KAAK,KAAKS,KAAK,CAACT,KAAK;MAExC,IAAI,CAACiB,UAAU,CAACP,KAAK,CAAC,GAAGD,KAAK,CAACT,KAAK;MAEpC,OAAO;QACLU,KAAK,EAAEA,KAAK;QACZG,IAAI,EAAJA,IAAI;QACJC,QAAQ,EAARA,QAAQ;QACRI,QAAQ,EAAEF,UAAU;QACpBD,QAAQ,EAARA,QAAQ;QACRI,QAAQ,EAAEH,UAAU,GAAG,CAAC,GAAG,CAAC,CAAC;QAC7BI,OAAO,EAAE,IAAI,CAACC,gBAAgB,CAACZ,KAAK,CAACT,KAAK,CAAC;QAC3CsB,SAAS,EAAE,IAAI,CAACC,iBAAiB,CAACd,KAAK,CAACT,KAAK;MAC/C,CAAC;IACH;EAAC;IAAAG,GAAA;IAAAH,KAAA,EAED,SAAAwB,MAAMA,CAAA,EAAG;MAAA,IAAAC,IAAA,QAAAb,OAAA;QAAAc,KAAA;MACP,IAAMC,MAAM,GAKAC,mBAAG;MAJf,IAAAC,cAAA,GAAwE,IAAI,CAACjB,OAAO;QAA5EkB,QAAQ,GAAAD,cAAA,CAARC,QAAQ;QAAEC,MAAM,GAAAF,cAAA,CAANE,MAAM;QAAEC,cAAc,GAAAH,cAAA,CAAdG,cAAc;QAAElB,QAAQ,GAAAe,cAAA,CAARf,QAAQ;QAAEC,QAAQ,GAAAc,cAAA,CAARd,QAAQ;QAAEf,KAAK,GAAA6B,cAAA,CAAL7B,KAAK;MAEnE,OAAA0B,KAAA,GAAO,IAAAzC,aAAO,EAAC8C,MAAM,CAAC,eACpBhD,MAAA,YAAAkD,aAAA,CAACN,MAAM,EAAAD,KAAA,CAAAQ,EAAA,eAAAC,cAAA,qBAAA1D,KAAA,CAAA2D,WAAA;QAAA,QAECrB,QAAQ,KAAK,MAAM,GAAG,YAAY,GAAG,SAAS;QAAA,iBACrCD,QAAQ;QAAA,gBACTd,KAAK,KAAK,IAAI,GAAG,CAAC,CAAC,GAAG;MAAC,GAAAyB,IAAA,kBAErC1C,MAAA,YAAAkD,aAAA,CAACtD,eAAA,CAAA0D,gBAAgB,EAAAX,KAAA,CAAAQ,EAAA;QAAA,kBAAiBF;MAAc,iBAC9CjD,MAAA,YAAAkD,aAAA,CAACH,QAAQ,EAAAJ,KAAA,CAAAQ,EAAA,gBAAE,CACK,CACZ,CAAC;IAEb;EAAC;AAAA,EAlFqBI,eAAS;AAAA,IAAAvC,gBAAA,aAA3BZ,SAAS,iBAKQ,OAAO;AAAA,IAAAY,gBAAA,aALxBZ,SAAS,WAMEH,KAAK;AAAA,IAAAe,gBAAA,aANhBZ,SAAS,kBAOS,UAAAoD,KAAA;EAAA,IAAGxB,QAAQ,GAAAwB,KAAA,CAARxB,QAAQ;EAAA,OAAuB;IACtDF,IAAI,EAAE,GAAG;IACT2B,YAAY,EAAE,IAAI;IAClBzB,QAAQ,EAAEA,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI;EACxB,CAAC;AAAA,CAAC;AAAA,IAAAhB,gBAAA,aAXEZ,SAAS,aAeI,CAAC,IAAAsD,uBAAW,EAAC;EAC5BC,gBAAgB,EAAE,SAAlBA,gBAAgBA,CAAGC,eAAe,EAAElC,KAAK,EAAK;IAC5C,IAAIkC,eAAe,EAAE;MACnBA,eAAe,CAACC,KAAK,CAAC,CAAC;MACvB,IAAInC,KAAK,CAACM,QAAQ,KAAK,MAAM,EAAE;QAC7B4B,eAAe,CAACE,KAAK,CAAC,CAAC;MACzB;IACF;EACF,CAAC;EACDC,aAAa,EAAE,SAAfA,aAAaA,CAAGrC,KAAK,EAAK;IACxB,IAAMsC,QAAQ,GAAGtC,KAAK,CAACM,QAAQ,KAAK,MAAM,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC;IAEhF,OAAOgC,QAAQ;EACjB;AACF,CAAC,CAAC,CAAC;AAwDL,SAASC,IAAIA,CAACvC,KAA+G,EAAE;EAAA,IAAAwC,KAAA,GAAAC,YAAA;IAAAC,KAAA;EAC7H,IAAMC,KAAK,GAYCxB,mBAAG;EAXf,IAAQE,QAAQ,GAAyErB,KAAK,CAAtFqB,QAAQ;IAAEC,MAAM,GAAiEtB,KAAK,CAA5EsB,MAAM;IAAEsB,SAAS,GAAsD5C,KAAK,CAApE4C,SAAS;IAAEC,UAAU,GAA0C7C,KAAK,CAAzD6C,UAAU;IAAEpC,QAAQ,GAAgCT,KAAK,CAA7CS,QAAQ;IAAEJ,QAAQ,GAAsBL,KAAK,CAAnCK,QAAQ;IAAEJ,KAAK,GAAeD,KAAK,CAAzBC,KAAK;IAAEK,QAAQ,GAAKN,KAAK,CAAlBM,QAAQ;EACpF,IAAMwC,gBAAgB,GAAG,IAAAC,yCAAyB,EAAC9C,KAAK,CAAC;EAEzD,IAAM+C,aAAa,GAAG;IACpB,MAAM,EAAE1C,QAAQ,KAAK,MAAM,GAAG,OAAO,GAAG,KAAK;IAC7C,cAAc,EAAEA,QAAQ,KAAK,MAAM,GAAGG,QAAQ,GAAGwC,SAAS;IAC1D,eAAe,EAAE3C,QAAQ,KAAK,MAAM,GAAGG,QAAQ,GAAGwC;EACpD,CAAC;EAED,OAAAP,KAAA,GAAO,IAAAlE,aAAO,EAAC8C,MAAM,CAAC,eACpBhD,MAAA,YAAAkD,aAAA,CAACmB,KAAK,EAAAD,KAAA,CAAAjB,EAAA,cAAAC,cAAA,qBAAA1D,KAAA,CAAA2D,WAAA,MAAAD,cAAA;IAAA,OAEA,QAAQ;IAAA,QACP,QAAQ;IAAA,YACH,CAAC;IAAA,oBACOoB,gBAAgB;IAAA,iBACnBzC;EAAQ,GACnB2C,aAAa,GAAAR,KAAA,KAEhBI,SAAS,gBAAGtE,MAAA,YAAAkD,aAAA,CAAC0B,KAAK,CAACC,IAAI,CAACC,KAAK;IAACC,GAAG,EAAET;EAAU,CAAE,CAAC,GAAG,IAAI,EACvD,IAAAU,6BAAiB,EAACjC,QAAQ,EAAE6B,KAAK,CAACC,IAAI,CAACI,IAAI,EAAEL,KAAK,CAACC,IAAI,CAACC,KAAK,CAAC,EAC9DP,UAAU,gBAAGvE,MAAA,YAAAkD,aAAA,CAAC0B,KAAK,CAACC,IAAI,CAACC,KAAK;IAACC,GAAG,EAAER;EAAW,CAAE,CAAC,GAAG,IACjD,CAAC;AAEZ;AAEA,SAASU,IAAIA,CAACvD,KAAqF,EAAE;EAAA,IAAAwD,KAAA,GAAAf,YAAA;IAAAgB,KAAA;EACnG,IAAMC,KAAK,GACiCvC,mBAAG;EAA/C,OAAAsC,KAAA,GAAO,IAAAjF,aAAO,EAACwB,KAAK,CAACsB,MAAM,CAAC,eAAChD,MAAA,YAAAkD,aAAA,CAACkC,KAAK,EAAAD,KAAA,CAAAhC,EAAA,cAAAC,cAAA,qBAAA1D,KAAA,CAAA2D,WAAA;IAAA,OAAkB;EAAM,GAAA6B,KAAA,GAAE,CAAC;AAChE;AAEA,SAASJ,KAAKA,CAACpD,KAAsF,EAAE;EAAA,IAAA2D,KAAA,GAAAlB,YAAA;IAAAmB,KAAA;EACrG,IAAMC,MAAM,GACiC1C,mBAAG;EAAhD,OAAAyC,KAAA,GAAO,IAAApF,aAAO,EAACwB,KAAK,CAACsB,MAAM,CAAC,eAAChD,MAAA,YAAAkD,aAAA,CAACqC,MAAM,EAAAD,KAAA,CAAAnC,EAAA,eAAAC,cAAA,qBAAA1D,KAAA,CAAA2D,WAAA;IAAA,OAAkB;EAAM,GAAAgC,KAAA,GAAE,CAAC;AACjE;AAEO,IAAMG,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,SAAZA,SAASA,CAA+BE,OAKjC;EAAA,OAAKA,OAAO;AAAA,CAAyC;AAEzE,IAAMd,KAAK,GAAG,IAAAe,qBAAe,EAACvF,SAAS,EAAE;EACvCyE,IAAI,EAAE,CAACZ,IAAI,EAAE;IAAEgB,IAAI,EAAJA,IAAI;IAAEH,KAAK,EAALA;EAAM,CAAC;AAC9B,CAAC,CAAiC;AAAC,IAAAc,QAAA,GAAAH,OAAA,cAEpBb,KAAK","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Pills.type.js","names":[],"sources":["../../src/Pills.type.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\ndeclare namespace NSPills {\n // TODO: It looks like the value isn't accurate. Revise and align it with the component's logic.\n type Value = string | number | boolean | null;\n type Props<T extends NSPills.Value = NSPills.Value> = NeighborLocationProps & 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 type Ctx = {\n getItemProps: PropGetterFn;\n };\n type Handlers = {\n value: (value: Props['value'], event: React.SyntheticEvent) => Props['value'];\n };\n namespace Pill {\n type Props = BoxProps & NeighborItemProps & {\n /** Pill value */\n value?: NSPills.Value;\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 namespace Text {\n type Component = typeof Box;\n }\n namespace Addon {\n type Component = typeof Box;\n }\n\n type Component = Intergalactic.Component<'button', Props, [handlers: Handlers]>;\n }\n\n type WrapComponent<PropsExtending = {}> = (<\n V extends Value,\n Tag extends Intergalactic.Tag = 'div',\n >(\n props: Intergalactic.InternalTypings.ComponentProps<\n Tag,\n 'div',\n Props<V>,\n Ctx,\n [handlers: Handlers]\n > &\n PropsExtending,\n ) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', Props>;\n\n type Component = WrapComponent & {\n Item: Pill.Component & {\n Text: Pill.Text.Component;\n Addon: Pill.Addon.Component;\n };\n };\n}\n\n/** @deprecated It will be removed in v18. */\nexport type PillsValue = NSPills.Value;\n/** @deprecated It will be removed in v18. */\nexport type PillsProps<T extends PillsValue = PillsValue> = NSPills.Props<T>;\n/** @deprecated It will be removed in v18. */\nexport type PillProps = NSPills.Pill.Props;\n/** @deprecated It will be removed in v18. */\nexport type PillsContext = NSPills.Ctx;\n/** @deprecated It will be removed in v18. */\nexport type PillsHandlers = NSPills.Handlers;\n\nexport type { NSPills };\n"],"mappings":"","ignoreList":[]}
|
package/lib/cjs/index.js
CHANGED
|
@@ -1,25 +1,34 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
var _exportNames = {
|
|
7
|
+
var _exportNames = {
|
|
8
|
+
wrapPills: true
|
|
9
|
+
};
|
|
8
10
|
Object.defineProperty(exports, "default", {
|
|
9
11
|
enumerable: true,
|
|
10
12
|
get: function get() {
|
|
11
13
|
return _Pills["default"];
|
|
12
14
|
}
|
|
13
15
|
});
|
|
16
|
+
Object.defineProperty(exports, "wrapPills", {
|
|
17
|
+
enumerable: true,
|
|
18
|
+
get: function get() {
|
|
19
|
+
return _Pills.wrapPills;
|
|
20
|
+
}
|
|
21
|
+
});
|
|
14
22
|
var _Pills = _interopRequireWildcard(require("./Pills"));
|
|
15
|
-
|
|
23
|
+
var _Pills2 = require("./Pills.type");
|
|
24
|
+
Object.keys(_Pills2).forEach(function (key) {
|
|
16
25
|
if (key === "default" || key === "__esModule") return;
|
|
17
26
|
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
18
|
-
if (key in exports && exports[key] ===
|
|
27
|
+
if (key in exports && exports[key] === _Pills2[key]) return;
|
|
19
28
|
Object.defineProperty(exports, key, {
|
|
20
29
|
enumerable: true,
|
|
21
30
|
get: function get() {
|
|
22
|
-
return
|
|
31
|
+
return _Pills2[key];
|
|
23
32
|
}
|
|
24
33
|
});
|
|
25
34
|
});
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_Pills","_interopRequireWildcard","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get"],"sources":["../../src/index.
|
|
1
|
+
{"version":3,"file":"index.js","names":["_Pills","_interopRequireWildcard","require","_Pills2","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get"],"sources":["../../src/index.ts"],"sourcesContent":["export { default, wrapPills } from './Pills';\nexport * from './Pills.type';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAF,OAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,OAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAZ,OAAA,CAAAI,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
|
|
@@ -3,12 +3,20 @@ SPills {
|
|
|
3
3
|
align-items: center;
|
|
4
4
|
justify-content: center;
|
|
5
5
|
isolation: isolate;
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
border-radius: var(--intergalactic-control-rounded, 6px);
|
|
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
|
+
}
|
|
8
16
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
17
|
+
SPill:hover, SPill:active {
|
|
18
|
+
z-index: 2;
|
|
19
|
+
}
|
|
12
20
|
}
|
|
13
21
|
|
|
14
22
|
SPill {
|
|
@@ -27,7 +35,6 @@ SPill {
|
|
|
27
35
|
text-decoration: none;
|
|
28
36
|
-webkit-tap-highlight-color: transparent;
|
|
29
37
|
overflow: visible;
|
|
30
|
-
outline: 0;
|
|
31
38
|
text-align: center;
|
|
32
39
|
vertical-align: middle;
|
|
33
40
|
font-family: inherit;
|
|
@@ -41,9 +48,7 @@ SPill {
|
|
|
41
48
|
padding: 0;
|
|
42
49
|
}
|
|
43
50
|
|
|
44
|
-
&:active
|
|
45
|
-
&:hover,
|
|
46
|
-
&:focus {
|
|
51
|
+
&:active {
|
|
47
52
|
outline: 0;
|
|
48
53
|
text-decoration: none;
|
|
49
54
|
}
|
|
@@ -53,12 +58,6 @@ SPill {
|
|
|
53
58
|
}
|
|
54
59
|
}
|
|
55
60
|
|
|
56
|
-
SPill[selected] {
|
|
57
|
-
background: var(--intergalactic-control-secondary-info, oklch(0.41 0.258 264.2 / 0.031));
|
|
58
|
-
border-color: var(--intergalactic-border-info-active, oklch(0.382 0.248 264.2 / 0.386));
|
|
59
|
-
z-index: 1;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
61
|
SPill[disabled] {
|
|
63
62
|
cursor: default;
|
|
64
63
|
/* Disable link interactions */
|
|
@@ -69,11 +68,6 @@ SPill[disabled] {
|
|
|
69
68
|
}
|
|
70
69
|
}
|
|
71
70
|
|
|
72
|
-
SPill[keyboardFocused] {
|
|
73
|
-
box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(0.376 0.247 264.2 / 0.441));
|
|
74
|
-
z-index: 1;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
71
|
SText {
|
|
78
72
|
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
|
|
79
73
|
display: inline-flex;
|