@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/esm/Pills.mjs
CHANGED
|
@@ -1,69 +1,105 @@
|
|
|
1
1
|
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
2
|
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
3
3
|
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
4
|
-
import
|
|
4
|
+
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
|
|
5
5
|
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
6
|
+
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
6
7
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
7
|
-
import { sstyled
|
|
8
|
-
import {
|
|
9
|
-
import addonTextChildren from "@semcore/core/lib/utils/addonTextChildren";
|
|
10
|
-
import a11yEnhance from "@semcore/core/lib/utils/enhances/a11yEnhance";
|
|
8
|
+
import { sstyled } from "@semcore/utils/lib/core/index";
|
|
9
|
+
import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
|
|
11
10
|
import React from "react";
|
|
11
|
+
import { Box } from "@semcore/flex-box";
|
|
12
|
+
import NeighborLocation, { useNeighborLocationDetect } from "@semcore/neighbor-location";
|
|
13
|
+
import keyboardFocusEnhance from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
|
|
14
|
+
import addonTextChildren from "@semcore/utils/lib/addonTextChildren";
|
|
15
|
+
import a11yEnhance from "@semcore/utils/lib/enhances/a11yEnhance";
|
|
16
|
+
import log from "@semcore/utils/lib/logger";
|
|
12
17
|
/*!__reshadow-styles__:"./style/pills.shadow.css"*/
|
|
13
18
|
var style = (
|
|
14
19
|
/*__reshadow_css_start__*/
|
|
15
20
|
(sstyled.insert(
|
|
16
21
|
/*__inner_css_start__*/
|
|
17
|
-
".
|
|
22
|
+
".___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}",
|
|
18
23
|
/*__inner_css_end__*/
|
|
19
|
-
"
|
|
24
|
+
"gpkgu_gg_"
|
|
20
25
|
), /*__reshadow_css_end__*/
|
|
21
26
|
{
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"__SPill": "
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
27
|
+
"__SPills": "___SPills_gpkgu_gg_",
|
|
28
|
+
"_keyboardFocused": "__keyboardFocused_gpkgu_gg_",
|
|
29
|
+
"__SPill": "___SPill_gpkgu_gg_",
|
|
30
|
+
"_selected": "__selected_gpkgu_gg_",
|
|
31
|
+
"__SText": "___SText_gpkgu_gg_",
|
|
32
|
+
"__SAddon": "___SAddon_gpkgu_gg_",
|
|
33
|
+
"_neighborLocation_right": "_neighborLocation_right_gpkgu_gg_",
|
|
34
|
+
"_neighborLocation_both": "_neighborLocation_both_gpkgu_gg_",
|
|
35
|
+
"_neighborLocation_left": "_neighborLocation_left_gpkgu_gg_",
|
|
36
|
+
"_disabled": "__disabled_gpkgu_gg_",
|
|
37
|
+
"_size_m": "_size_m_gpkgu_gg_",
|
|
38
|
+
"_size_l": "_size_l_gpkgu_gg_"
|
|
33
39
|
})
|
|
34
40
|
);
|
|
35
|
-
var
|
|
41
|
+
var optionsA11yEnhance = {
|
|
42
|
+
onNeighborChange: function onNeighborChange(neighborElement, props) {
|
|
43
|
+
if (neighborElement) {
|
|
44
|
+
neighborElement.focus();
|
|
45
|
+
if (props.behavior === "auto" || props.behavior === "radio") {
|
|
46
|
+
neighborElement.click();
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
childSelector: function childSelector(props) {
|
|
51
|
+
return props.behavior === "auto" || props.behavior === "radio" ? ["role", "radio"] : ["role", "tab"];
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
var RootPills = /* @__PURE__ */ function(_Component) {
|
|
55
|
+
_inherits(RootPills2, _Component);
|
|
56
|
+
var _super = _createSuper(RootPills2);
|
|
36
57
|
function RootPills2() {
|
|
37
58
|
var _this;
|
|
38
59
|
_classCallCheck(this, RootPills2);
|
|
39
60
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
40
61
|
args[_key] = arguments[_key];
|
|
41
62
|
}
|
|
42
|
-
_this =
|
|
43
|
-
_defineProperty(_this, "itemValues", []);
|
|
44
|
-
_defineProperty(_this, "bindHandlerClick", function(value) {
|
|
63
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
64
|
+
_defineProperty(_assertThisInitialized(_this), "itemValues", []);
|
|
65
|
+
_defineProperty(_assertThisInitialized(_this), "bindHandlerClick", function(value) {
|
|
45
66
|
return function(e) {
|
|
46
67
|
_this.handlers.value(value, e);
|
|
47
68
|
};
|
|
48
69
|
});
|
|
49
|
-
_defineProperty(_this, "bindHandleKeyDown", function(value) {
|
|
50
|
-
return function(
|
|
51
|
-
if (
|
|
52
|
-
|
|
53
|
-
_this.handlers.value(value,
|
|
70
|
+
_defineProperty(_assertThisInitialized(_this), "bindHandleKeyDown", function(value) {
|
|
71
|
+
return function(event) {
|
|
72
|
+
if (event.key === "Enter" || event.key === " ") {
|
|
73
|
+
event.preventDefault();
|
|
74
|
+
_this.handlers.value(value, event);
|
|
54
75
|
}
|
|
55
76
|
};
|
|
56
77
|
});
|
|
78
|
+
_defineProperty(_assertThisInitialized(_this), "changeIndex", function(startIndex, type) {
|
|
79
|
+
var selectable = false;
|
|
80
|
+
while (!selectable && startIndex >= 0 && startIndex < _this.itemValues.length) {
|
|
81
|
+
if (type === "increment") startIndex++;
|
|
82
|
+
if (type === "decrement") startIndex--;
|
|
83
|
+
var element = _this.itemRefs[startIndex];
|
|
84
|
+
if ((element === null || element === void 0 ? void 0 : element.disabled) === false) {
|
|
85
|
+
selectable = true;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
return startIndex >= 0 && startIndex < _this.itemValues.length ? startIndex : void 0;
|
|
89
|
+
});
|
|
57
90
|
return _this;
|
|
58
91
|
}
|
|
59
|
-
|
|
60
|
-
|
|
92
|
+
_createClass(RootPills2, [{
|
|
93
|
+
key: "componentDidMount",
|
|
94
|
+
value: function componentDidMount() {
|
|
95
|
+
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");
|
|
96
|
+
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");
|
|
97
|
+
}
|
|
98
|
+
}, {
|
|
61
99
|
key: "uncontrolledProps",
|
|
62
100
|
value: function uncontrolledProps() {
|
|
63
101
|
return {
|
|
64
|
-
value:
|
|
65
|
-
return _value;
|
|
66
|
-
}
|
|
102
|
+
value: null
|
|
67
103
|
};
|
|
68
104
|
}
|
|
69
105
|
}, {
|
|
@@ -89,8 +125,8 @@ var RootPills = /* @__PURE__ */ (function(_Component) {
|
|
|
89
125
|
var _ref = this.asProps, _ref5;
|
|
90
126
|
var SPills = Box;
|
|
91
127
|
var _this$asProps2 = this.asProps, Children = _this$asProps2.Children, styles = _this$asProps2.styles, controlsLength = _this$asProps2.controlsLength, disabled = _this$asProps2.disabled, behavior = _this$asProps2.behavior, value = _this$asProps2.value;
|
|
92
|
-
return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SPills, _ref5.cn("SPills", _objectSpread({}, assignProps({
|
|
93
|
-
"role": behavior === "auto" ? "radiogroup" : "tablist",
|
|
128
|
+
return _ref5 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SPills, _ref5.cn("SPills", _objectSpread({}, assignProps({
|
|
129
|
+
"role": behavior === "radio" || behavior === "auto" ? "radiogroup" : "tablist",
|
|
94
130
|
"aria-disabled": disabled,
|
|
95
131
|
"use:tabIndex": value !== null ? -1 : 0
|
|
96
132
|
}, _ref))), /* @__PURE__ */ React.createElement(NeighborLocation, _ref5.cn("NeighborLocation", {
|
|
@@ -98,7 +134,8 @@ var RootPills = /* @__PURE__ */ (function(_Component) {
|
|
|
98
134
|
}), /* @__PURE__ */ React.createElement(Children, _ref5.cn("Children", {}))));
|
|
99
135
|
}
|
|
100
136
|
}]);
|
|
101
|
-
|
|
137
|
+
return RootPills2;
|
|
138
|
+
}(Component);
|
|
102
139
|
_defineProperty(RootPills, "displayName", "Pills");
|
|
103
140
|
_defineProperty(RootPills, "style", style);
|
|
104
141
|
_defineProperty(RootPills, "defaultProps", function(_ref9) {
|
|
@@ -109,34 +146,23 @@ _defineProperty(RootPills, "defaultProps", function(_ref9) {
|
|
|
109
146
|
behavior: behavior !== null && behavior !== void 0 ? behavior : "auto"
|
|
110
147
|
};
|
|
111
148
|
});
|
|
112
|
-
_defineProperty(RootPills, "enhance", [a11yEnhance(
|
|
113
|
-
onNeighborChange: function onNeighborChange(neighborElement, props) {
|
|
114
|
-
if (neighborElement) {
|
|
115
|
-
neighborElement.focus();
|
|
116
|
-
if (props.behavior === "auto") {
|
|
117
|
-
neighborElement.click();
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
},
|
|
121
|
-
childSelector: function childSelector(props) {
|
|
122
|
-
var selector = props.behavior === "auto" ? ["role", "radio"] : ["role", "tab"];
|
|
123
|
-
return selector;
|
|
124
|
-
}
|
|
125
|
-
})]);
|
|
149
|
+
_defineProperty(RootPills, "enhance", [a11yEnhance(optionsA11yEnhance), keyboardFocusEnhance()]);
|
|
126
150
|
function Pill(props) {
|
|
127
151
|
var _ref2 = arguments[0], _ref6;
|
|
128
152
|
var SPill = Box;
|
|
129
153
|
var Children = props.Children, styles = props.styles, addonLeft = props.addonLeft, addonRight = props.addonRight, selected = props.selected, disabled = props.disabled, index = props.index, behavior = props.behavior;
|
|
130
154
|
var neighborLocation = useNeighborLocationDetect(index);
|
|
131
|
-
var roleAreaProps = {
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
"aria-
|
|
135
|
-
}
|
|
136
|
-
|
|
155
|
+
var roleAreaProps = {};
|
|
156
|
+
if (behavior === "radio" || behavior === "auto") {
|
|
157
|
+
roleAreaProps.role = "radio";
|
|
158
|
+
roleAreaProps["aria-checked"] = selected;
|
|
159
|
+
} else {
|
|
160
|
+
roleAreaProps.role = "tab";
|
|
161
|
+
roleAreaProps["aria-selected"] = selected;
|
|
162
|
+
}
|
|
163
|
+
return _ref6 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SPill, _ref6.cn("SPill", _objectSpread({}, assignProps(_objectSpread({
|
|
137
164
|
"tag": "button",
|
|
138
165
|
"type": "button",
|
|
139
|
-
"tabIndex": 0,
|
|
140
166
|
"neighborLocation": neighborLocation,
|
|
141
167
|
"aria-disabled": disabled
|
|
142
168
|
}, roleAreaProps), _ref2))), addonLeft ? /* @__PURE__ */ React.createElement(Pills.Item.Addon, {
|
|
@@ -145,29 +171,30 @@ function Pill(props) {
|
|
|
145
171
|
tag: addonRight
|
|
146
172
|
}) : null);
|
|
147
173
|
}
|
|
174
|
+
Pill.enhance = [keyboardFocusEnhance()];
|
|
148
175
|
function Text(props) {
|
|
149
176
|
var _ref3 = arguments[0], _ref7;
|
|
150
177
|
var SText = Box;
|
|
151
|
-
return _ref7 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SText, _ref7.cn("SText", _objectSpread({}, assignProps({
|
|
178
|
+
return _ref7 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(SText, _ref7.cn("SText", _objectSpread({}, assignProps({
|
|
152
179
|
"tag": "span"
|
|
153
180
|
}, _ref3))));
|
|
154
181
|
}
|
|
155
182
|
function Addon(props) {
|
|
156
183
|
var _ref4 = arguments[0], _ref8;
|
|
157
184
|
var SAddon = Box;
|
|
158
|
-
return _ref8 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SAddon, _ref8.cn("SAddon", _objectSpread({}, assignProps({
|
|
185
|
+
return _ref8 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(SAddon, _ref8.cn("SAddon", _objectSpread({}, assignProps({
|
|
159
186
|
"tag": "span"
|
|
160
187
|
}, _ref4))));
|
|
161
188
|
}
|
|
162
|
-
var wrapPills = function wrapPills2(wrapper) {
|
|
163
|
-
return wrapper;
|
|
164
|
-
};
|
|
165
189
|
var Pills = createComponent(RootPills, {
|
|
166
190
|
Item: [Pill, {
|
|
167
191
|
Text,
|
|
168
192
|
Addon
|
|
169
193
|
}]
|
|
170
194
|
});
|
|
195
|
+
var wrapPills = function wrapPills2(wrapper) {
|
|
196
|
+
return wrapper;
|
|
197
|
+
};
|
|
171
198
|
export {
|
|
172
199
|
Pills as default,
|
|
173
200
|
wrapPills
|
package/lib/esm/index.mjs
CHANGED
|
@@ -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;
|
package/lib/types/index.d.ts
CHANGED
|
@@ -1,2 +1,105 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
|
|
3
|
+
import { Box, BoxProps } from '@semcore/flex-box';
|
|
4
|
+
import { NeighborItemProps, NeighborLocationProps } from '@semcore/neighbor-location';
|
|
5
|
+
import { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
6
|
+
|
|
7
|
+
export type PillsValue = string | number | boolean | null;
|
|
8
|
+
|
|
9
|
+
/** @deprecated */
|
|
10
|
+
export interface IPillsProps<T extends PillsValue = PillsValue>
|
|
11
|
+
extends PillsProps<T>,
|
|
12
|
+
UnknownProperties {}
|
|
13
|
+
export type PillsProps<T extends PillsValue = PillsValue> = NeighborLocationProps &
|
|
14
|
+
KeyboardFocusProps &
|
|
15
|
+
BoxProps & {
|
|
16
|
+
/** Pills size */
|
|
17
|
+
size?: 'l' | 'm';
|
|
18
|
+
/** Disabled state */
|
|
19
|
+
disabled?: boolean;
|
|
20
|
+
/** Called when the selection is changed */
|
|
21
|
+
onChange?:
|
|
22
|
+
| ((value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void)
|
|
23
|
+
| React.Dispatch<React.SetStateAction<T>>;
|
|
24
|
+
/** Value for the selected pill */
|
|
25
|
+
value?: T;
|
|
26
|
+
/** Default value for the selected pill */
|
|
27
|
+
defaultValue?: T;
|
|
28
|
+
/** Sets semantic role for corresponding behavior,
|
|
29
|
+
* when set to `auto` pressing left and right arrows
|
|
30
|
+
* selects corresponding sibling pill.
|
|
31
|
+
*
|
|
32
|
+
* It's recommended to use `auto` behavior in forms
|
|
33
|
+
* while `manual` behavior for navigation and layout.
|
|
34
|
+
* @default tabs
|
|
35
|
+
*/
|
|
36
|
+
behavior?: /** @deprecated use `manual` */
|
|
37
|
+
| 'tabs'
|
|
38
|
+
/** @deprecated use `auto` */
|
|
39
|
+
| 'radio'
|
|
40
|
+
| 'auto'
|
|
41
|
+
| 'manual';
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
/** @deprecated */
|
|
45
|
+
export interface IPillProps extends PillProps, UnknownProperties {}
|
|
46
|
+
export type PillProps = BoxProps &
|
|
47
|
+
NeighborItemProps &
|
|
48
|
+
KeyboardFocusProps & {
|
|
49
|
+
/** Pill value */
|
|
50
|
+
value?: PillsValue;
|
|
51
|
+
/** Disabled state */
|
|
52
|
+
disabled?: boolean;
|
|
53
|
+
/** Selected state */
|
|
54
|
+
selected?: boolean;
|
|
55
|
+
/** Left addon text */
|
|
56
|
+
addonLeft?: React.ElementType;
|
|
57
|
+
/** Right addon tag */
|
|
58
|
+
addonRight?: React.ElementType;
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
/** @deprecated */
|
|
62
|
+
export interface IPillsContext extends PillsContext, UnknownProperties {}
|
|
63
|
+
export type PillsContext = {
|
|
64
|
+
getItemProps: PropGetterFn;
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
/** @deprecated */
|
|
68
|
+
export interface IPillsHandlers extends PillsHandlers, UnknownProperties {}
|
|
69
|
+
export type PillsHandlers = {
|
|
70
|
+
value: (value: PillsValue) => void;
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
type IntergalacticPillsComponent<PropsExtending = {}> = (<
|
|
74
|
+
Value extends PillsValue,
|
|
75
|
+
Tag extends Intergalactic.Tag = 'div',
|
|
76
|
+
>(
|
|
77
|
+
props: Intergalactic.InternalTypings.ComponentProps<
|
|
78
|
+
Tag,
|
|
79
|
+
'div',
|
|
80
|
+
PillsProps<Value>,
|
|
81
|
+
PillsContext,
|
|
82
|
+
[handlers: PillsHandlers]
|
|
83
|
+
> &
|
|
84
|
+
PropsExtending,
|
|
85
|
+
) => Intergalactic.InternalTypings.ComponentRenderingResults) &
|
|
86
|
+
Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', PillsProps>;
|
|
87
|
+
|
|
88
|
+
declare const Pills: IntergalacticPillsComponent & {
|
|
89
|
+
Item: Intergalactic.Component<'button', PillProps, [handlers: PillsHandlers]> & {
|
|
90
|
+
Text: typeof Box;
|
|
91
|
+
Addon: typeof Box;
|
|
92
|
+
};
|
|
93
|
+
};
|
|
94
|
+
|
|
95
|
+
declare const wrapPills: <PropsExtending extends {}>(
|
|
96
|
+
wrapper: (
|
|
97
|
+
props: Intergalactic.InternalTypings.UntypeRefAndTag<
|
|
98
|
+
Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticPillsComponent>
|
|
99
|
+
> &
|
|
100
|
+
PropsExtending,
|
|
101
|
+
) => React.ReactNode,
|
|
102
|
+
) => IntergalacticPillsComponent<PropsExtending>;
|
|
103
|
+
export { wrapPills };
|
|
104
|
+
|
|
105
|
+
export default Pills;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/pills",
|
|
3
3
|
"description": "Semrush Pills Component",
|
|
4
|
-
"version": "5.44.0-prerelease.
|
|
4
|
+
"version": "5.44.0-prerelease.6",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -14,12 +14,12 @@
|
|
|
14
14
|
"types": "./lib/types/index.d.ts"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@semcore/flex-box": "5.42.0-prerelease.
|
|
18
|
-
"@semcore/neighbor-location": "4.41.0-prerelease.
|
|
19
|
-
"@semcore/utils": "4.49.0-prerelease.
|
|
17
|
+
"@semcore/flex-box": "5.42.0-prerelease.6",
|
|
18
|
+
"@semcore/neighbor-location": "4.41.0-prerelease.6",
|
|
19
|
+
"@semcore/utils": "4.49.0-prerelease.6"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
|
-
"@semcore/core": "^2.40.0-prerelease.
|
|
22
|
+
"@semcore/core": "^2.40.0-prerelease.6",
|
|
23
23
|
"react": "16.8 - 18",
|
|
24
24
|
"react-dom": "16.8 - 18"
|
|
25
25
|
},
|
package/lib/cjs/Pills.type.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
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/es6/Pills.type.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
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/esm/Pills.type.mjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
package/lib/types/Pills.d.ts
DELETED
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { Intergalactic } from '@semcore/core';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import type { NSPills } from './Pills.type';
|
|
4
|
-
export declare const wrapPills: <PropsExtending extends {}>(wrapper: (props: Intergalactic.InternalTypings.UntypeRefAndTag<Intergalactic.InternalTypings.ComponentPropsNesting<NSPills.WrapComponent>> & PropsExtending) => React.ReactNode) => NSPills.WrapComponent<PropsExtending>;
|
|
5
|
-
declare const Pills: NSPills.Component;
|
|
6
|
-
export default Pills;
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
import type { Box, BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';
|
|
2
|
-
import type { PropGetterFn, Intergalactic } from '@semcore/core';
|
|
3
|
-
import type React from 'react';
|
|
4
|
-
declare namespace NSPills {
|
|
5
|
-
type Value = string | number | boolean | null;
|
|
6
|
-
type Props<T extends NSPills.Value = NSPills.Value> = NeighborLocationProps & BoxProps & {
|
|
7
|
-
/** Pills size */
|
|
8
|
-
size?: 'l' | 'm';
|
|
9
|
-
/** Disabled state */
|
|
10
|
-
disabled?: boolean;
|
|
11
|
-
/** Called when the selection is changed */
|
|
12
|
-
onChange?: ((value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void) | React.Dispatch<React.SetStateAction<T>>;
|
|
13
|
-
/** Value for the selected pill */
|
|
14
|
-
value?: T;
|
|
15
|
-
/** Default value for the selected pill */
|
|
16
|
-
defaultValue?: T;
|
|
17
|
-
/** Sets semantic role for corresponding behavior,
|
|
18
|
-
* when set to `auto` pressing left and right arrows
|
|
19
|
-
* selects corresponding sibling pill.
|
|
20
|
-
*
|
|
21
|
-
* It's recommended to use `auto` behavior in forms
|
|
22
|
-
* while `manual` behavior for navigation and layout.
|
|
23
|
-
* @default tabs
|
|
24
|
-
*/
|
|
25
|
-
behavior?: 'auto' | 'manual';
|
|
26
|
-
};
|
|
27
|
-
type Ctx = {
|
|
28
|
-
getItemProps: PropGetterFn;
|
|
29
|
-
};
|
|
30
|
-
type Handlers = {
|
|
31
|
-
value: (value: Props['value'], event: React.SyntheticEvent) => Props['value'];
|
|
32
|
-
};
|
|
33
|
-
namespace Pill {
|
|
34
|
-
type Props = BoxProps & NeighborItemProps & {
|
|
35
|
-
/** Pill value */
|
|
36
|
-
value?: NSPills.Value;
|
|
37
|
-
/** Disabled state */
|
|
38
|
-
disabled?: boolean;
|
|
39
|
-
/** Selected state */
|
|
40
|
-
selected?: boolean;
|
|
41
|
-
/** Left addon text */
|
|
42
|
-
addonLeft?: React.ElementType;
|
|
43
|
-
/** Right addon tag */
|
|
44
|
-
addonRight?: React.ElementType;
|
|
45
|
-
};
|
|
46
|
-
namespace Text {
|
|
47
|
-
type Component = typeof Box;
|
|
48
|
-
}
|
|
49
|
-
namespace Addon {
|
|
50
|
-
type Component = typeof Box;
|
|
51
|
-
}
|
|
52
|
-
type Component = Intergalactic.Component<'button', Props, [handlers: Handlers]>;
|
|
53
|
-
}
|
|
54
|
-
type WrapComponent<PropsExtending = {}> = (<V extends Value, Tag extends Intergalactic.Tag = 'div'>(props: Intergalactic.InternalTypings.ComponentProps<Tag, 'div', Props<V>, Ctx, [
|
|
55
|
-
handlers: Handlers
|
|
56
|
-
]> & PropsExtending) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', Props>;
|
|
57
|
-
type Component = WrapComponent & {
|
|
58
|
-
Item: Pill.Component & {
|
|
59
|
-
Text: Pill.Text.Component;
|
|
60
|
-
Addon: Pill.Addon.Component;
|
|
61
|
-
};
|
|
62
|
-
};
|
|
63
|
-
}
|
|
64
|
-
/** @deprecated It will be removed in v18. */
|
|
65
|
-
export type PillsValue = NSPills.Value;
|
|
66
|
-
/** @deprecated It will be removed in v18. */
|
|
67
|
-
export type PillsProps<T extends PillsValue = PillsValue> = NSPills.Props<T>;
|
|
68
|
-
/** @deprecated It will be removed in v18. */
|
|
69
|
-
export type PillProps = NSPills.Pill.Props;
|
|
70
|
-
/** @deprecated It will be removed in v18. */
|
|
71
|
-
export type PillsContext = NSPills.Ctx;
|
|
72
|
-
/** @deprecated It will be removed in v18. */
|
|
73
|
-
export type PillsHandlers = NSPills.Handlers;
|
|
74
|
-
export type { NSPills };
|