@semcore/pills 17.2.1-prerelease.9 → 18.0.0-prerelease.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/lib/cjs/Pills.js +114 -30
- package/lib/cjs/Pills.js.map +1 -1
- package/lib/cjs/Pills.type.js.map +1 -1
- package/lib/cjs/style/pills.shadow.css +124 -116
- package/lib/es6/Pills.js +115 -31
- package/lib/es6/Pills.js.map +1 -1
- package/lib/es6/Pills.type.js.map +1 -1
- package/lib/es6/style/pills.shadow.css +124 -116
- package/lib/esm/Pills.mjs +117 -32
- package/lib/esm/style/pills.shadow.css +124 -116
- package/lib/types/Pills.d.ts.map +1 -1
- package/lib/types/Pills.type.d.ts +3 -2
- package/lib/types/Pills.type.d.ts.map +1 -1
- package/package.json +9 -6
package/CHANGELOG.md
CHANGED
package/lib/cjs/Pills.js
CHANGED
|
@@ -9,28 +9,37 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
9
9
|
var _core = require("@semcore/core");
|
|
10
10
|
var _baseComponents = require("@semcore/base-components");
|
|
11
11
|
var _addonTextChildren = _interopRequireDefault(require("@semcore/core/lib/utils/addonTextChildren"));
|
|
12
|
+
var _canUseDOM = _interopRequireDefault(require("@semcore/core/lib/utils/canUseDOM"));
|
|
12
13
|
var _a11yEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/a11yEnhance"));
|
|
14
|
+
var _rafTrottle = _interopRequireDefault(require("@semcore/core/lib/utils/rafTrottle"));
|
|
15
|
+
var _typography = require("@semcore/typography");
|
|
13
16
|
var _react = _interopRequireDefault(require("react"));
|
|
14
17
|
/*!__reshadow-styles__:"./style/pills.shadow.css"*/
|
|
15
|
-
const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".
|
|
18
|
+
const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SPills_1jzu3_gg_{position:relative;display:inline-flex;padding:var(--intergalactic-spacing-content-padding-xxsmall,2px);min-height:var(--intergalactic-form-control-m,32px);border-radius:var(--intergalactic-pills-rounded,6px);background:var(--intergalactic-control-pills-bg-normal,oklch(.166 .031 175.8/.097));box-sizing:border-box;--transition-fast:left calc(var(--intergalactic-duration-fast, 200)*1ms) var(--intergalactic-easings-fast,cubic-bezier(0.5,0,0,1.12)),width calc(var(--intergalactic-duration-fast, 200)*1ms) var(--intergalactic-easings-fast,cubic-bezier(0.5,0,0,1.12)),top calc(var(--intergalactic-duration-fast, 200)*1ms) var(--intergalactic-easings-fast,cubic-bezier(0.5,0,0,1.12)),height calc(var(--intergalactic-duration-fast, 200)*1ms) var(--intergalactic-easings-fast,cubic-bezier(0.5,0,0,1.12));--transition-slow:left calc(var(--intergalactic-duration-medium, 300)*1ms) var(--intergalactic-easings-medium,cubic-bezier(0.5,0,0,1.09)),width calc(var(--intergalactic-duration-medium, 300)*1ms) var(--intergalactic-easings-medium,cubic-bezier(0.5,0,0,1.09)),top calc(var(--intergalactic-duration-medium, 300)*1ms) var(--intergalactic-easings-medium,cubic-bezier(0.5,0,0,1.09)),height calc(var(--intergalactic-duration-medium, 300)*1ms) var(--intergalactic-easings-medium,cubic-bezier(0.5,0,0,1.09))}.___SPills_1jzu3_gg_._size_l_1jzu3_gg_{min-height:var(--intergalactic-form-control-l,44px)}.___SPills_1jzu3_gg_ .___SPillContainer_1jzu3_gg_:last-of-type .___SPillSeparator_1jzu3_gg_{display:none}.___SPill_1jzu3_gg_{position:relative;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;gap:var(--intergalactic-spacing-content-gap-medium,6px);padding:0 var(--intergalactic-spacing-content-padding-medium,12px);border-style:solid;border-color:#0000;border-radius:var(--intergalactic-rounded-small,4px);background-color:initial}@media (hover:hover){.___SPill_1jzu3_gg_[aria-checked=false]:hover:after,.___SPill_1jzu3_gg_[aria-selected=false]:hover:after{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:var(--intergalactic-rounded-small,4px);background:var(--intergalactic-control-pills-bg-hover,oklch(.151 .028 176.1/.123))}}.___SPill_1jzu3_gg_.__disabled_1jzu3_gg_{cursor:default;pointer-events:none}.___SPill_1jzu3_gg_.__disabled_1jzu3_gg_>*{opacity:var(--intergalactic-disabled-opacity,.4)}.___SPill_1jzu3_gg_._size_m_1jzu3_gg_{min-width:calc(var(--intergalactic-form-control-m, 32px) - var(--intergalactic-spacing-content-padding-xsmall, 4px));border-width:2px 3px}.___SPill_1jzu3_gg_._size_l_1jzu3_gg_{min-width:calc(var(--intergalactic-form-control-l, 44px) - var(--intergalactic-spacing-content-padding-xsmall, 4px));border-width:3px}.___SPillContainer_1jzu3_gg_{display:inline-flex}.___SPillContainer_1jzu3_gg_:has(+.___SPillContainer_1jzu3_gg_ .___SPill_1jzu3_gg_[aria-checked=true],+.___SPillContainer_1jzu3_gg_ .___SPill_1jzu3_gg_[aria-selected=true]) .___SPillSeparator_1jzu3_gg_,.___SPillContainer_1jzu3_gg_:has(.___SPill_1jzu3_gg_[aria-checked=true],.___SPill_1jzu3_gg_[aria-selected=true]) .___SPillSeparator_1jzu3_gg_{background-color:initial}.___SPillSeparator_1jzu3_gg_{align-self:center;width:1px;height:calc(100% - var(--intergalactic-spacing-content-padding-xsmall-extended, 6px)*2);background-color:var(--intergalactic-control-pills-border,#000c0829)}@media (color-gamut:p3){.___SPillSeparator_1jzu3_gg_{background-color:var(--intergalactic-control-pills-border,oklch(.137 .026 175.7/.161))}}.___SPillSeparator_1jzu3_gg_._size_l_1jzu3_gg_{height:calc(100% - var(--intergalactic-spacing-content-padding-small, 8px)*2)}.___SSegmentIndicator_1jzu3_gg_{position:absolute;left:var(--global-left);width:var(--global-width);height:var(--global-height);transition:var(--global-speed);background:var(--intergalactic-control-pills-bg-selected,oklch(1 0 0));box-shadow:var(--intergalactic-box-shadow-control-elevated,0 0 1px 0 #00151012,0 1px 3px 0 #00151012);border-radius:var(--intergalactic-rounded-small,4px)}@media (color-gamut:p3){.___SSegmentIndicator_1jzu3_gg_{box-shadow:var(--intergalactic-box-shadow-control-elevated,0 0 1px 0 oklch(.176 .033 175.7/.07),0 1px 3px 0 oklch(.176 .033 175.7/.07))}}.___SText_1jzu3_gg_{color:var(--intergalactic-text-primary,oklch(.1 .03 137/.899));min-width:.8em}.___SAddon_1jzu3_gg_{color:var(--intergalactic-text-secondary,oklch(.097 .023 156.5/.468));display:inline-flex;align-items:center;justify-content:center}@media (prefers-reduced-motion){.___SSegmentIndicator_1jzu3_gg_{transition:none}}", /*__inner_css_end__*/"1jzu3_gg_"),
|
|
16
19
|
/*__reshadow_css_end__*/
|
|
17
20
|
{
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
"_disabled": "
|
|
27
|
-
"_size_m": "
|
|
28
|
-
"_size_l": "_size_l_1o2wa_gg_"
|
|
21
|
+
"__SSegmentIndicator": "___SSegmentIndicator_1jzu3_gg_",
|
|
22
|
+
"__SText": "___SText_1jzu3_gg_",
|
|
23
|
+
"__SAddon": "___SAddon_1jzu3_gg_",
|
|
24
|
+
"__SPills": "___SPills_1jzu3_gg_",
|
|
25
|
+
"_size_l": "_size_l_1jzu3_gg_",
|
|
26
|
+
"__SPillContainer": "___SPillContainer_1jzu3_gg_",
|
|
27
|
+
"__SPillSeparator": "___SPillSeparator_1jzu3_gg_",
|
|
28
|
+
"__SPill": "___SPill_1jzu3_gg_",
|
|
29
|
+
"_disabled": "__disabled_1jzu3_gg_",
|
|
30
|
+
"_size_m": "_size_m_1jzu3_gg_"
|
|
29
31
|
});
|
|
32
|
+
const TRANSITION_SLOW_THRESHOLD = 1;
|
|
30
33
|
class RootPills extends _core.Component {
|
|
31
|
-
constructor(
|
|
32
|
-
super(
|
|
34
|
+
constructor(props) {
|
|
35
|
+
super(props);
|
|
33
36
|
(0, _defineProperty2.default)(this, "itemValues", []);
|
|
37
|
+
(0, _defineProperty2.default)(this, "lastSelectedIndex", null);
|
|
38
|
+
(0, _defineProperty2.default)(this, "currentSelectedIndex", null);
|
|
39
|
+
(0, _defineProperty2.default)(this, "rootRef", /*#__PURE__*/_react.default.createRef());
|
|
40
|
+
(0, _defineProperty2.default)(this, "pills", []);
|
|
41
|
+
(0, _defineProperty2.default)(this, "segmentIndicatorRef", /*#__PURE__*/_react.default.createRef());
|
|
42
|
+
(0, _defineProperty2.default)(this, "ro", null);
|
|
34
43
|
(0, _defineProperty2.default)(this, "bindHandlerClick", value => e => {
|
|
35
44
|
this.handlers.value(value, e);
|
|
36
45
|
});
|
|
@@ -40,12 +49,56 @@ class RootPills extends _core.Component {
|
|
|
40
49
|
this.handlers.value(value, e);
|
|
41
50
|
}
|
|
42
51
|
});
|
|
52
|
+
if ((0, _canUseDOM.default)()) {
|
|
53
|
+
this.ro = new ResizeObserver((0, _rafTrottle.default)(() => this.updateSegmentIndicator()));
|
|
54
|
+
}
|
|
43
55
|
}
|
|
44
56
|
uncontrolledProps() {
|
|
45
57
|
return {
|
|
46
58
|
value: null
|
|
47
59
|
};
|
|
48
60
|
}
|
|
61
|
+
componentDidUpdate() {
|
|
62
|
+
this.updateSelectedIndexes();
|
|
63
|
+
this.updateSegmentIndicator();
|
|
64
|
+
}
|
|
65
|
+
componentDidMount() {
|
|
66
|
+
this.updateSegmentIndicator();
|
|
67
|
+
}
|
|
68
|
+
componentWillUnmount() {
|
|
69
|
+
this.ro?.disconnect();
|
|
70
|
+
}
|
|
71
|
+
updateSelectedIndexes() {
|
|
72
|
+
if (this.currentSelectedIndex === null) return;
|
|
73
|
+
if (this.currentSelectedIndex <= this.pills.length - 1) return;
|
|
74
|
+
this.currentSelectedIndex = null;
|
|
75
|
+
this.lastSelectedIndex = null;
|
|
76
|
+
}
|
|
77
|
+
updateSegmentIndicator() {
|
|
78
|
+
const indicator = this.segmentIndicatorRef?.current;
|
|
79
|
+
if (!indicator) return;
|
|
80
|
+
if (this.currentSelectedIndex === null) {
|
|
81
|
+
indicator.style.removeProperty('--global-speed');
|
|
82
|
+
indicator.style.removeProperty('--global-left');
|
|
83
|
+
indicator.style.removeProperty('--global-width');
|
|
84
|
+
indicator.style.removeProperty('--global-height');
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
;
|
|
88
|
+
const root = this.rootRef?.current;
|
|
89
|
+
const pill = this.pills[this.currentSelectedIndex];
|
|
90
|
+
if (!pill || !root) return;
|
|
91
|
+
const pillRect = pill.getBoundingClientRect();
|
|
92
|
+
const rootRect = root.getBoundingClientRect();
|
|
93
|
+
const speed = this.lastSelectedIndex === null ? '--transition-slow' : Math.abs(this.currentSelectedIndex - this.lastSelectedIndex) > TRANSITION_SLOW_THRESHOLD ? '--transition-slow' : '--transition-fast';
|
|
94
|
+
const left = pillRect.left - rootRect.left;
|
|
95
|
+
const width = pillRect.width;
|
|
96
|
+
const height = pillRect.height;
|
|
97
|
+
indicator.style.setProperty('--global-speed', `var(${speed})`);
|
|
98
|
+
indicator.style.setProperty('--global-left', `${left}px`);
|
|
99
|
+
indicator.style.setProperty('--global-width', `${width}px`);
|
|
100
|
+
indicator.style.setProperty('--global-height', `${height}px`);
|
|
101
|
+
}
|
|
49
102
|
getItemProps(props, index) {
|
|
50
103
|
const {
|
|
51
104
|
value,
|
|
@@ -55,6 +108,10 @@ class RootPills extends _core.Component {
|
|
|
55
108
|
} = this.asProps;
|
|
56
109
|
const isSelected = value === props.value;
|
|
57
110
|
this.itemValues[index] = props.value;
|
|
111
|
+
if (isSelected) {
|
|
112
|
+
this.lastSelectedIndex = this.currentSelectedIndex;
|
|
113
|
+
this.currentSelectedIndex = index;
|
|
114
|
+
}
|
|
58
115
|
return {
|
|
59
116
|
index: index,
|
|
60
117
|
size,
|
|
@@ -63,17 +120,38 @@ class RootPills extends _core.Component {
|
|
|
63
120
|
behavior,
|
|
64
121
|
tabIndex: isSelected ? 0 : -1,
|
|
65
122
|
onClick: this.bindHandlerClick(props.value),
|
|
66
|
-
onKeyDown: this.bindHandleKeyDown(props.value)
|
|
123
|
+
onKeyDown: this.bindHandleKeyDown(props.value),
|
|
124
|
+
ref: node => {
|
|
125
|
+
const prevPill = this.pills[index];
|
|
126
|
+
if (prevPill) {
|
|
127
|
+
this.ro?.unobserve(prevPill);
|
|
128
|
+
}
|
|
129
|
+
if (node === null) {
|
|
130
|
+
this.pills = this.pills.filter((_, pillIndex) => pillIndex !== index);
|
|
131
|
+
return;
|
|
132
|
+
}
|
|
133
|
+
;
|
|
134
|
+
this.pills[index] = node;
|
|
135
|
+
this.ro?.observe(node);
|
|
136
|
+
}
|
|
137
|
+
};
|
|
138
|
+
}
|
|
139
|
+
getItemTextProps() {
|
|
140
|
+
const {
|
|
141
|
+
size
|
|
142
|
+
} = this.asProps;
|
|
143
|
+
return {
|
|
144
|
+
size: size === 'm' ? 200 : 300
|
|
67
145
|
};
|
|
68
146
|
}
|
|
69
147
|
render() {
|
|
70
148
|
var _ref = this.asProps,
|
|
71
149
|
_ref5;
|
|
72
150
|
const SPills = _baseComponents.Box;
|
|
151
|
+
const SSegmentIndicator = _baseComponents.Box;
|
|
73
152
|
const {
|
|
74
153
|
Children,
|
|
75
154
|
styles,
|
|
76
|
-
controlsLength,
|
|
77
155
|
disabled,
|
|
78
156
|
behavior,
|
|
79
157
|
value
|
|
@@ -82,11 +160,14 @@ class RootPills extends _core.Component {
|
|
|
82
160
|
...(0, _core.assignProps)({
|
|
83
161
|
"role": behavior === 'auto' ? 'radiogroup' : 'tablist',
|
|
84
162
|
"aria-disabled": disabled,
|
|
85
|
-
"use:tabIndex": value !== null ? -1 : 0
|
|
163
|
+
"use:tabIndex": value !== null ? -1 : 0,
|
|
164
|
+
"ref": this.rootRef
|
|
86
165
|
}, _ref)
|
|
87
|
-
}), /*#__PURE__*/_react.default.createElement(
|
|
88
|
-
"
|
|
89
|
-
|
|
166
|
+
}), /*#__PURE__*/_react.default.createElement(SSegmentIndicator, _ref5.cn("SSegmentIndicator", {
|
|
167
|
+
"tag": 'span',
|
|
168
|
+
"ref": this.segmentIndicatorRef,
|
|
169
|
+
"aria-hidden": true
|
|
170
|
+
})), /*#__PURE__*/_react.default.createElement(Children, _ref5.cn("Children", {})));
|
|
90
171
|
}
|
|
91
172
|
}
|
|
92
173
|
(0, _defineProperty2.default)(RootPills, "displayName", 'Pills');
|
|
@@ -116,6 +197,8 @@ function Pill(props) {
|
|
|
116
197
|
var _ref2 = arguments[0],
|
|
117
198
|
_ref6;
|
|
118
199
|
const SPill = _baseComponents.Box;
|
|
200
|
+
const SPillContainer = _baseComponents.Box;
|
|
201
|
+
const SPillSeparator = _baseComponents.Box;
|
|
119
202
|
const {
|
|
120
203
|
Children,
|
|
121
204
|
styles,
|
|
@@ -123,21 +206,19 @@ function Pill(props) {
|
|
|
123
206
|
addonRight,
|
|
124
207
|
selected,
|
|
125
208
|
disabled,
|
|
126
|
-
|
|
127
|
-
|
|
209
|
+
behavior,
|
|
210
|
+
size
|
|
128
211
|
} = props;
|
|
129
|
-
const neighborLocation = (0, _baseComponents.useNeighborLocationDetect)(index);
|
|
130
212
|
const roleAreaProps = {
|
|
131
213
|
'role': behavior === 'auto' ? 'radio' : 'tab',
|
|
132
214
|
'aria-checked': behavior === 'auto' ? selected : undefined,
|
|
133
215
|
'aria-selected': behavior !== 'auto' ? selected : undefined
|
|
134
216
|
};
|
|
135
|
-
return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SPill, _ref6.cn("SPill", {
|
|
217
|
+
return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SPillContainer, _ref6.cn("SPillContainer", {}), /*#__PURE__*/_react.default.createElement(SPill, _ref6.cn("SPill", {
|
|
136
218
|
...(0, _core.assignProps)({
|
|
137
219
|
"tag": 'button',
|
|
138
220
|
"type": 'button',
|
|
139
221
|
"tabIndex": 0,
|
|
140
|
-
"neighborLocation": neighborLocation,
|
|
141
222
|
"aria-disabled": disabled,
|
|
142
223
|
...roleAreaProps
|
|
143
224
|
}, _ref2)
|
|
@@ -145,16 +226,19 @@ function Pill(props) {
|
|
|
145
226
|
tag: addonLeft
|
|
146
227
|
}) : null, (0, _addonTextChildren.default)(Children, Pills.Item.Text, Pills.Item.Addon), addonRight ? /*#__PURE__*/_react.default.createElement(Pills.Item.Addon, {
|
|
147
228
|
tag: addonRight
|
|
148
|
-
}) : null)
|
|
229
|
+
}) : null), /*#__PURE__*/_react.default.createElement(SPillSeparator
|
|
230
|
+
// @ts-ignore
|
|
231
|
+
, _ref6.cn("SPillSeparator", {
|
|
232
|
+
"size": size,
|
|
233
|
+
"aria-hidden": true
|
|
234
|
+
})));
|
|
149
235
|
}
|
|
150
236
|
function Text(props) {
|
|
151
237
|
var _ref3 = arguments[0],
|
|
152
238
|
_ref7;
|
|
153
|
-
const SText =
|
|
239
|
+
const SText = _typography.Text;
|
|
154
240
|
return _ref7 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react.default.createElement(SText, _ref7.cn("SText", {
|
|
155
|
-
...(0, _core.assignProps)({
|
|
156
|
-
"tag": 'span'
|
|
157
|
-
}, _ref3)
|
|
241
|
+
...(0, _core.assignProps)({}, _ref3)
|
|
158
242
|
}));
|
|
159
243
|
}
|
|
160
244
|
function Addon(props) {
|
package/lib/cjs/Pills.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pills.js","names":["_core","require","_baseComponents","_addonTextChildren","_interopRequireDefault","_a11yEnhance","_react","style","sstyled","insert","RootPills","Component","constructor","args","_defineProperty2","default","value","e","handlers","key","preventDefault","uncontrolledProps","getItemProps","props","index","size","disabled","behavior","asProps","isSelected","itemValues","selected","tabIndex","onClick","bindHandlerClick","onKeyDown","bindHandleKeyDown","render","_ref","_ref5","SPills","Box","Children","styles","controlsLength","createElement","cn","assignProps","NeighborLocation","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","wrapper","exports","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 {},\n NSPills.DefaultProps\n> {\n static displayName = 'Pills';\n static style = style;\n static defaultProps = ({ behavior }: Intergalactic.InternalTypings.InferComponentProps<NSPills.Component>) => ({\n size: 'm',\n defaultValue: null,\n behavior: behavior ?? 'auto',\n } as const);\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: null,\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\n/**\n * Pills\n *\n * {@link https://developer.semrush.com/intergalactic/components/pills/pills-api/|API} | {@link https://developer.semrush.com/intergalactic/components/pills/pills-code/|Examples}\n */\nconst Pills = createComponent<\n NSPills.Component,\n typeof RootPills\n>(RootPills, {\n Item: [Pill, { Text, Addon }],\n});\n\nexport default Pills;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"Pills.js","names":["_core","require","_baseComponents","_addonTextChildren","_interopRequireDefault","_canUseDOM","_a11yEnhance","_rafTrottle","_typography","_react","style","sstyled","insert","TRANSITION_SLOW_THRESHOLD","RootPills","Component","constructor","props","_defineProperty2","default","React","createRef","value","e","handlers","key","preventDefault","canUseDOM","ro","ResizeObserver","trottle","updateSegmentIndicator","uncontrolledProps","componentDidUpdate","updateSelectedIndexes","componentDidMount","componentWillUnmount","disconnect","currentSelectedIndex","pills","length","lastSelectedIndex","indicator","segmentIndicatorRef","current","removeProperty","root","rootRef","pill","pillRect","getBoundingClientRect","rootRect","speed","Math","abs","left","width","height","setProperty","getItemProps","index","size","disabled","behavior","asProps","isSelected","itemValues","selected","tabIndex","onClick","bindHandlerClick","onKeyDown","bindHandleKeyDown","ref","node","prevPill","unobserve","filter","_","pillIndex","observe","getItemTextProps","render","_ref","_ref5","SPills","Box","SSegmentIndicator","Children","styles","createElement","cn","assignProps","defaultValue","a11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","selector","Pill","_ref2","arguments[0]","_ref6","SPill","SPillContainer","SPillSeparator","addonLeft","addonRight","roleAreaProps","undefined","Pills","Item","Addon","tag","addonTextChildren","Text","_ref3","_ref7","SText","SemcoreText","_ref4","_ref8","SAddon","wrapPills","wrapper","exports","createComponent","_default"],"sources":["../../src/Pills.tsx"],"sourcesContent":["import { Box } 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 canUseDOM from '@semcore/core/lib/utils/canUseDOM';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\nimport trottle from '@semcore/core/lib/utils/rafTrottle';\nimport { Text as SemcoreText } from '@semcore/typography';\nimport React from 'react';\n\nimport type { NSPills } from './Pills.type';\nimport style from './style/pills.shadow.css';\n\nconst TRANSITION_SLOW_THRESHOLD = 1;\n\ntype RootProps = Intergalactic.InternalTypings.InferComponentProps<NSPills.Component>;\nclass RootPills extends Component<\n RootProps,\n typeof RootPills.enhance,\n NSPills.Handlers,\n {},\n {},\n NSPills.DefaultProps\n> {\n static displayName = 'Pills';\n static style = style;\n static defaultProps = ({ behavior }: RootProps) => ({\n size: 'm',\n defaultValue: null,\n behavior: behavior ?? 'auto',\n } as const);\n\n itemValues: Array<NSPills.Pill.Props['value']> = [];\n\n lastSelectedIndex: number | null = null;\n currentSelectedIndex: number | null = null;\n\n rootRef: React.MutableRefObject<HTMLDivElement | null> = React.createRef();\n pills: Array<HTMLButtonElement> = [];\n segmentIndicatorRef: React.MutableRefObject<HTMLSpanElement | null> = React.createRef();\n\n ro: ResizeObserver | null = null;\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 constructor(props: RootProps) {\n super(props);\n if (canUseDOM()) {\n this.ro = new ResizeObserver(trottle(() => this.updateSegmentIndicator()));\n }\n }\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n componentDidUpdate() {\n this.updateSelectedIndexes();\n this.updateSegmentIndicator();\n }\n\n componentDidMount() {\n this.updateSegmentIndicator();\n }\n\n componentWillUnmount() {\n this.ro?.disconnect();\n }\n\n updateSelectedIndexes() {\n if (this.currentSelectedIndex === null) return;\n if (this.currentSelectedIndex <= this.pills.length - 1) return;\n\n this.currentSelectedIndex = null;\n this.lastSelectedIndex = null;\n }\n\n updateSegmentIndicator() {\n const indicator = this.segmentIndicatorRef?.current;\n\n if (!indicator) return;\n\n if (this.currentSelectedIndex === null) {\n indicator.style.removeProperty('--global-speed');\n indicator.style.removeProperty('--global-left');\n indicator.style.removeProperty('--global-width');\n indicator.style.removeProperty('--global-height');\n\n return;\n };\n\n const root = this.rootRef?.current;\n const pill = this.pills[this.currentSelectedIndex];\n\n if (!pill || !root) return;\n\n const pillRect = pill.getBoundingClientRect();\n const rootRect = root.getBoundingClientRect();\n\n const speed = this.lastSelectedIndex === null\n ? '--transition-slow'\n : Math.abs(this.currentSelectedIndex - this.lastSelectedIndex) > TRANSITION_SLOW_THRESHOLD\n ? '--transition-slow'\n : '--transition-fast';\n const left = pillRect.left - rootRect.left;\n const width = pillRect.width;\n const height = pillRect.height;\n\n indicator.style.setProperty('--global-speed', `var(${speed})`);\n indicator.style.setProperty('--global-left', `${left}px`);\n indicator.style.setProperty('--global-width', `${width}px`);\n indicator.style.setProperty('--global-height', `${height}px`);\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 if (isSelected) {\n this.lastSelectedIndex = this.currentSelectedIndex;\n this.currentSelectedIndex = index;\n }\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 ref: (node: HTMLButtonElement | null) => {\n const prevPill = this.pills[index];\n\n if (prevPill) {\n this.ro?.unobserve(prevPill);\n }\n\n if (node === null) {\n this.pills = this.pills.filter((_, pillIndex) => pillIndex !== index);\n return;\n };\n\n this.pills[index] = node;\n\n this.ro?.observe(node);\n },\n };\n }\n\n getItemTextProps() {\n const { size } = this.asProps;\n\n return {\n size: size === 'm' ? 200 : 300,\n };\n }\n\n render() {\n const SPills = Root;\n const SSegmentIndicator = Box;\n const { Children, styles, 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 ref={this.rootRef}\n >\n <SSegmentIndicator\n tag='span'\n ref={this.segmentIndicatorRef}\n aria-hidden\n />\n <Children />\n </SPills>,\n );\n }\n}\n\nfunction Pill(props: Intergalactic.InternalTypings.InferChildComponentProps<NSPills.Pill.Component, typeof RootPills, 'Item'>) {\n const SPill = Root;\n const SPillContainer = Box;\n const SPillSeparator = Box;\n const { Children, styles, addonLeft, addonRight, selected, disabled, behavior, size } = props;\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 <SPillContainer>\n <SPill\n render={Box}\n tag='button'\n type='button'\n tabIndex={0}\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 <SPillSeparator\n // @ts-ignore\n size={size}\n aria-hidden\n />\n </SPillContainer>,\n );\n}\n\nfunction Text(props: Intergalactic.InternalTypings.InferComponentProps<NSPills.Pill.Text.Component>) {\n const SText = Root;\n return sstyled(props.styles)(<SText render={SemcoreText} />);\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\n/**\n * Pills\n *\n * {@link https://developer.semrush.com/intergalactic/components/pills/pills-api/|API} | {@link https://developer.semrush.com/intergalactic/components/pills/pills-code/|Examples}\n */\nconst Pills = createComponent<\n NSPills.Component,\n typeof RootPills\n>(RootPills, {\n Item: [Pill, { Text, Addon }],\n});\n\nexport default Pills;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pills.type.js","names":[],"sources":["../../src/Pills.type.ts"],"sourcesContent":["import type { NSBox, NSNeighborLocation } 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> =
|
|
1
|
+
{"version":3,"file":"Pills.type.js","names":[],"sources":["../../src/Pills.type.ts"],"sourcesContent":["import type { NSBox, NSNeighborLocation } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type { NSText } from '@semcore/typography';\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> = NSBox.Props & {\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: null;\n };\n type DefaultProps = {\n size: 'm';\n defaultValue: null;\n behavior: Props['behavior'];\n };\n namespace Pill {\n type Props = NSBox.Props & NSNeighborLocation.Detect.Props & {\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 = NSText.Component;\n }\n namespace Addon {\n type Component = NSBox.Component;\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 v19. */\nexport type PillsValue = NSPills.Value;\n/** @deprecated It will be removed in v19. */\nexport type PillsProps<T extends PillsValue = PillsValue> = NSPills.Props<T>;\n/** @deprecated It will be removed in v19. */\nexport type PillProps = NSPills.Pill.Props;\n/** @deprecated It will be removed in v19. */\nexport type PillsContext = NSPills.Ctx;\n/** @deprecated It will be removed in v19. */\nexport type PillsHandlers = NSPills.Handlers;\n\nexport type { NSPills };\n"],"mappings":"","ignoreList":[]}
|