@semcore/pills 17.0.0-prerelease.30 → 17.0.0-prerelease.34
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 +5 -1
- package/lib/cjs/Pills.js +26 -39
- 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 +13 -4
- package/lib/cjs/index.js.map +1 -1
- package/lib/es6/Pills.js +25 -38
- 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/esm/Pills.mjs +26 -39
- package/lib/types/Pills.d.ts +6 -0
- package/lib/types/Pills.type.d.ts +55 -0
- package/lib/types/index.d.ts +2 -88
- package/package.json +6 -6
- package/vite.config.ts +1 -1
- 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/CHANGELOG.md
CHANGED
|
@@ -2,12 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
-
## [17.0.0] - 2026-
|
|
5
|
+
## [17.0.0] - 2026-04-08
|
|
6
6
|
|
|
7
7
|
### BREAK
|
|
8
8
|
|
|
9
9
|
- **ellipsis**: New major version.
|
|
10
10
|
|
|
11
|
+
### Fixed
|
|
12
|
+
|
|
13
|
+
- Rewrite component to TS.
|
|
14
|
+
|
|
11
15
|
## [16.0.11] - 2025-10-29
|
|
12
16
|
|
|
13
17
|
### Changed
|
package/lib/cjs/Pills.js
CHANGED
|
@@ -27,17 +27,6 @@ const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_star
|
|
|
27
27
|
"_size_m": "_size_m_1x82a_gg_",
|
|
28
28
|
"_size_l": "_size_l_1x82a_gg_"
|
|
29
29
|
});
|
|
30
|
-
const optionsA11yEnhance = {
|
|
31
|
-
onNeighborChange: (neighborElement, props) => {
|
|
32
|
-
if (neighborElement) {
|
|
33
|
-
neighborElement.focus();
|
|
34
|
-
if (props.behavior === 'auto') {
|
|
35
|
-
neighborElement.click();
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
},
|
|
39
|
-
childSelector: props => props.behavior === 'auto' ? ['role', 'radio'] : ['role', 'tab']
|
|
40
|
-
};
|
|
41
30
|
class RootPills extends _core.Component {
|
|
42
31
|
constructor(...args) {
|
|
43
32
|
super(...args);
|
|
@@ -45,28 +34,16 @@ class RootPills extends _core.Component {
|
|
|
45
34
|
(0, _defineProperty2.default)(this, "bindHandlerClick", value => e => {
|
|
46
35
|
this.handlers.value(value, e);
|
|
47
36
|
});
|
|
48
|
-
(0, _defineProperty2.default)(this, "bindHandleKeyDown", value =>
|
|
49
|
-
if (
|
|
50
|
-
|
|
51
|
-
this.handlers.value(value,
|
|
52
|
-
}
|
|
53
|
-
});
|
|
54
|
-
(0, _defineProperty2.default)(this, "changeIndex", (startIndex, type) => {
|
|
55
|
-
let selectable = false;
|
|
56
|
-
while (!selectable && startIndex >= 0 && startIndex < this.itemValues.length) {
|
|
57
|
-
if (type === 'increment') startIndex++;
|
|
58
|
-
if (type === 'decrement') startIndex--;
|
|
59
|
-
const element = this.itemRefs[startIndex];
|
|
60
|
-
if (element?.disabled === false) {
|
|
61
|
-
selectable = true;
|
|
62
|
-
}
|
|
37
|
+
(0, _defineProperty2.default)(this, "bindHandleKeyDown", value => e => {
|
|
38
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
39
|
+
e.preventDefault();
|
|
40
|
+
this.handlers.value(value, e);
|
|
63
41
|
}
|
|
64
|
-
return startIndex >= 0 && startIndex < this.itemValues.length ? startIndex : undefined;
|
|
65
42
|
});
|
|
66
43
|
}
|
|
67
44
|
uncontrolledProps() {
|
|
68
45
|
return {
|
|
69
|
-
value:
|
|
46
|
+
value: (value, e) => value
|
|
70
47
|
};
|
|
71
48
|
}
|
|
72
49
|
getItemProps(props, index) {
|
|
@@ -121,7 +98,20 @@ class RootPills extends _core.Component {
|
|
|
121
98
|
defaultValue: null,
|
|
122
99
|
behavior: behavior ?? 'auto'
|
|
123
100
|
}));
|
|
124
|
-
(0, _defineProperty2.default)(RootPills, "enhance", [(0, _a11yEnhance.default)(
|
|
101
|
+
(0, _defineProperty2.default)(RootPills, "enhance", [(0, _a11yEnhance.default)({
|
|
102
|
+
onNeighborChange: (neighborElement, props) => {
|
|
103
|
+
if (neighborElement) {
|
|
104
|
+
neighborElement.focus();
|
|
105
|
+
if (props.behavior === 'auto') {
|
|
106
|
+
neighborElement.click();
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
},
|
|
110
|
+
childSelector: props => {
|
|
111
|
+
const selector = props.behavior === 'auto' ? ['role', 'radio'] : ['role', 'tab'];
|
|
112
|
+
return selector;
|
|
113
|
+
}
|
|
114
|
+
})]);
|
|
125
115
|
function Pill(props) {
|
|
126
116
|
var _ref2 = arguments[0],
|
|
127
117
|
_ref6;
|
|
@@ -137,14 +127,11 @@ function Pill(props) {
|
|
|
137
127
|
behavior
|
|
138
128
|
} = props;
|
|
139
129
|
const neighborLocation = (0, _baseComponents.useNeighborLocationDetect)(index);
|
|
140
|
-
const roleAreaProps = {
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
}
|
|
145
|
-
roleAreaProps.role = 'tab';
|
|
146
|
-
roleAreaProps['aria-selected'] = selected;
|
|
147
|
-
}
|
|
130
|
+
const roleAreaProps = {
|
|
131
|
+
'role': behavior === 'auto' ? 'radio' : 'tab',
|
|
132
|
+
'aria-checked': behavior === 'auto' ? selected : undefined,
|
|
133
|
+
'aria-selected': behavior !== 'auto' ? selected : undefined
|
|
134
|
+
};
|
|
148
135
|
return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SPill, _ref6.cn("SPill", {
|
|
149
136
|
...(0, _core.assignProps)({
|
|
150
137
|
"tag": 'button',
|
|
@@ -180,13 +167,13 @@ function Addon(props) {
|
|
|
180
167
|
}, _ref4)
|
|
181
168
|
}));
|
|
182
169
|
}
|
|
170
|
+
const wrapPills = wrapper => wrapper;
|
|
171
|
+
exports.wrapPills = wrapPills;
|
|
183
172
|
const Pills = (0, _core.createComponent)(RootPills, {
|
|
184
173
|
Item: [Pill, {
|
|
185
174
|
Text,
|
|
186
175
|
Addon
|
|
187
176
|
}]
|
|
188
177
|
});
|
|
189
|
-
const wrapPills = wrapper => wrapper;
|
|
190
|
-
exports.wrapPills = wrapPills;
|
|
191
178
|
var _default = exports.default = Pills;
|
|
192
179
|
//# sourceMappingURL=Pills.js.map
|
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","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","RootPills","Component","constructor","args","_defineProperty2","default","value","e","handlers","event","key","preventDefault","startIndex","type","selectable","itemValues","length","element","itemRefs","disabled","undefined","uncontrolledProps","getItemProps","index","size","asProps","isSelected","selected","tabIndex","onClick","bindHandlerClick","onKeyDown","bindHandleKeyDown","render","_ref","_ref5","SPills","Box","Children","styles","controlsLength","createElement","cn","assignProps","NeighborLocation","defaultValue","a11yEnhance","Pill","_ref2","arguments[0]","_ref6","SPill","addonLeft","addonRight","neighborLocation","useNeighborLocationDetect","roleAreaProps","role","Pills","Item","Addon","tag","addonTextChildren","Text","_ref3","_ref7","SText","_ref4","_ref8","SAddon","createComponent","wrapPills","wrapper","exports","_default"],"sources":["../../src/Pills.jsx"],"sourcesContent":["import { NeighborLocation, Box, useNeighborLocationDetect } from '@semcore/base-components';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\nimport React from 'react';\n\nimport style from './style/pills.shadow.css';\n\nconst optionsA11yEnhance = {\n onNeighborChange: (neighborElement, props) => {\n if (neighborElement) {\n neighborElement.focus();\n if (props.behavior === 'auto') {\n neighborElement.click();\n }\n }\n },\n childSelector: (props) =>\n props.behavior === 'auto' ? ['role', 'radio'] : ['role', 'tab'],\n};\n\nclass RootPills extends Component {\n static displayName = 'Pills';\n static style = style;\n static defaultProps = ({ behavior }) => ({\n size: 'm',\n defaultValue: null,\n behavior: behavior ?? 'auto',\n });\n\n itemValues = [];\n static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n bindHandlerClick = (value) => (e) => {\n this.handlers.value(value, e);\n };\n\n bindHandleKeyDown = (value) => (event) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.handlers.value(value, event);\n }\n };\n\n getItemProps(props, index) {\n const { value, size, disabled, behavior } = this.asProps;\n const isSelected = value === props.value;\n\n this.itemValues[index] = props.value;\n return {\n index: index,\n size,\n disabled,\n selected: isSelected,\n behavior,\n tabIndex: isSelected ? 0 : -1,\n onClick: this.bindHandlerClick(props.value),\n onKeyDown: this.bindHandleKeyDown(props.value),\n };\n }\n\n changeIndex = (startIndex, type) => {\n let selectable = false;\n\n while (!selectable && startIndex >= 0 && startIndex < this.itemValues.length) {\n if (type === 'increment') startIndex++;\n if (type === 'decrement') startIndex--;\n\n const element = this.itemRefs[startIndex];\n\n if (element?.disabled === false) {\n selectable = true;\n }\n }\n\n return startIndex >= 0 && startIndex < this.itemValues.length ? startIndex : undefined;\n };\n\n render() {\n const SPills = Root;\n const { Children, styles, controlsLength, disabled, behavior, value } = this.asProps;\n\n return sstyled(styles)(\n <SPills\n render={Box}\n role={behavior === 'auto' ? 'radiogroup' : 'tablist'}\n aria-disabled={disabled}\n use:tabIndex={value !== null ? -1 : 0}\n >\n <NeighborLocation controlsLength={controlsLength}>\n <Children />\n </NeighborLocation>\n </SPills>,\n );\n }\n}\n\nfunction Pill(props) {\n const SPill = Root;\n const { Children, styles, addonLeft, addonRight, selected, disabled, index, behavior } = props;\n const neighborLocation = useNeighborLocationDetect(index);\n const roleAreaProps = {};\n if (behavior === 'auto') {\n roleAreaProps.role = 'radio';\n roleAreaProps['aria-checked'] = selected;\n } else {\n roleAreaProps.role = 'tab';\n roleAreaProps['aria-selected'] = selected;\n }\n return sstyled(styles)(\n <SPill\n render={Box}\n tag='button'\n type='button'\n tabIndex={0}\n neighborLocation={neighborLocation}\n aria-disabled={disabled}\n {...roleAreaProps}\n >\n {addonLeft ? <Pills.Item.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, Pills.Item.Text, Pills.Item.Addon)}\n {addonRight ? <Pills.Item.Addon tag={addonRight} /> : null}\n </SPill>,\n );\n}\n\nfunction Text(props) {\n const SText = Root;\n return sstyled(props.styles)(<SText render={Box} tag='span' />);\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n return sstyled(props.styles)(<SAddon render={Box} tag='span' />);\n}\n\nconst Pills = createComponent(RootPills, {\n Item: [Pill, { Text, Addon }],\n});\n\nexport const wrapPills = (wrapper) => wrapper;\n\nexport default Pills;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"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, IRootComponentProps } 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 { IntergalacticPillsComponent, PillProps, PillsComponent, PillsHandlers, PillsItemAddonComponent, PillsItemComponent, PillsItemTextComponent, PillsProps, PillsValue } from './Pills.type';\nimport style from './style/pills.shadow.css';\n\nclass RootPills extends Component<\n Intergalactic.InternalTypings.InferComponentProps<IntergalacticPillsComponent>,\n typeof RootPills.enhance,\n PillsHandlers\n> {\n static displayName = 'Pills';\n static style = style;\n static defaultProps = ({ behavior }: PillsProps) => ({\n size: 'm',\n defaultValue: null,\n behavior: behavior ?? 'auto',\n });\n\n itemValues: Array<PillProps['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: PillProps['value'], e: React.SyntheticEvent) => value,\n };\n }\n\n bindHandlerClick = (value: PillProps['value']) => (e: React.MouseEvent) => {\n this.handlers.value(value, e);\n };\n\n bindHandleKeyDown = (value: PillProps['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: PillProps, 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<PillsItemComponent, 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<PillsItemTextComponent>) {\n const SText = Root;\n return sstyled(props.styles)(<SText render={Box} tag='span' />);\n}\n\nfunction Addon(props: Intergalactic.InternalTypings.InferComponentProps<PillsItemAddonComponent>) {\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<IntergalacticPillsComponent>\n > &\n PropsExtending,\n) => React.ReactNode) => wrapper as IntergalacticPillsComponent<PropsExtending>;\n\nconst Pills = createComponent(RootPills, {\n Item: [Pill, { Text, Addon }],\n}) as unknown as PillsComponent;\n\nexport default Pills;\n"],"mappings":"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","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\nexport type PillsValue = string | number | boolean | null;\n\nexport type PillsProps<T extends PillsValue = PillsValue> = NeighborLocationProps &\n BoxProps & {\n /** Pills size */\n size?: 'l' | 'm';\n /** Disabled state */\n disabled?: boolean;\n /** Called when the selection is changed */\n onChange?:\n | ((value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void)\n | React.Dispatch<React.SetStateAction<T>>;\n /** Value for the selected pill */\n value?: T;\n /** Default value for the selected pill */\n defaultValue?: T;\n /** Sets semantic role for corresponding behavior,\n * when set to `auto` pressing left and right arrows\n * selects corresponding sibling pill.\n *\n * It's recommended to use `auto` behavior in forms\n * while `manual` behavior for navigation and layout.\n * @default tabs\n */\n behavior?:\n | 'auto'\n | 'manual';\n };\n\nexport type PillProps = BoxProps &\n NeighborItemProps & {\n /** Pill value */\n value?: PillsValue;\n /** Disabled state */\n disabled?: boolean;\n /** Selected state */\n selected?: boolean;\n /** Left addon text */\n addonLeft?: React.ElementType;\n /** Right addon tag */\n addonRight?: React.ElementType;\n };\n\nexport type PillsContext = {\n getItemProps: PropGetterFn;\n};\n\nexport type PillsHandlers = {\n value: (value: PillProps['value'], event: React.SyntheticEvent) => PillProps['value'];\n};\n\nexport type IntergalacticPillsComponent<PropsExtending = {}> = (<\n Value extends PillsValue,\n Tag extends Intergalactic.Tag = 'div',\n>(\n props: Intergalactic.InternalTypings.ComponentProps<\n Tag,\n 'div',\n PillsProps<Value>,\n PillsContext,\n [handlers: PillsHandlers]\n > &\n PropsExtending,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\nIntergalactic.InternalTypings.ComponentAdditive<'div', 'div', PillsProps>;\n\nexport type PillsItemComponent = Intergalactic.Component<'button', PillProps, [handlers: PillsHandlers]>;\nexport type PillsItemTextComponent = typeof Box;\nexport type PillsItemAddonComponent = typeof Box;\n\nexport type PillsComponent = IntergalacticPillsComponent & {\n Item: PillsItemComponent & {\n Text: PillsItemTextComponent;\n Addon: PillsItemAddonComponent;\n };\n};\n"],"mappings":"","ignoreList":[]}
|
package/lib/cjs/index.js
CHANGED
|
@@ -4,22 +4,31 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
|
|
|
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 () {
|
|
11
13
|
return _Pills.default;
|
|
12
14
|
}
|
|
13
15
|
});
|
|
16
|
+
Object.defineProperty(exports, "wrapPills", {
|
|
17
|
+
enumerable: true,
|
|
18
|
+
get: function () {
|
|
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 () {
|
|
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,CAAA;MAAA,OAAAZ,OAAA,CAAAI,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
|
package/lib/es6/Pills.js
CHANGED
|
@@ -25,17 +25,6 @@ const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/
|
|
|
25
25
|
"_size_m": "_size_m_1x82a_gg_",
|
|
26
26
|
"_size_l": "_size_l_1x82a_gg_"
|
|
27
27
|
});
|
|
28
|
-
const optionsA11yEnhance = {
|
|
29
|
-
onNeighborChange: (neighborElement, props) => {
|
|
30
|
-
if (neighborElement) {
|
|
31
|
-
neighborElement.focus();
|
|
32
|
-
if (props.behavior === 'auto') {
|
|
33
|
-
neighborElement.click();
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
},
|
|
37
|
-
childSelector: props => props.behavior === 'auto' ? ['role', 'radio'] : ['role', 'tab']
|
|
38
|
-
};
|
|
39
28
|
class RootPills extends Component {
|
|
40
29
|
constructor(...args) {
|
|
41
30
|
super(...args);
|
|
@@ -43,28 +32,16 @@ class RootPills extends Component {
|
|
|
43
32
|
_defineProperty(this, "bindHandlerClick", value => e => {
|
|
44
33
|
this.handlers.value(value, e);
|
|
45
34
|
});
|
|
46
|
-
_defineProperty(this, "bindHandleKeyDown", value =>
|
|
47
|
-
if (
|
|
48
|
-
|
|
49
|
-
this.handlers.value(value,
|
|
35
|
+
_defineProperty(this, "bindHandleKeyDown", value => e => {
|
|
36
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
37
|
+
e.preventDefault();
|
|
38
|
+
this.handlers.value(value, e);
|
|
50
39
|
}
|
|
51
40
|
});
|
|
52
|
-
_defineProperty(this, "changeIndex", (startIndex, type) => {
|
|
53
|
-
let selectable = false;
|
|
54
|
-
while (!selectable && startIndex >= 0 && startIndex < this.itemValues.length) {
|
|
55
|
-
if (type === 'increment') startIndex++;
|
|
56
|
-
if (type === 'decrement') startIndex--;
|
|
57
|
-
const element = this.itemRefs[startIndex];
|
|
58
|
-
if (element?.disabled === false) {
|
|
59
|
-
selectable = true;
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
return startIndex >= 0 && startIndex < this.itemValues.length ? startIndex : undefined;
|
|
63
|
-
});
|
|
64
41
|
}
|
|
65
42
|
uncontrolledProps() {
|
|
66
43
|
return {
|
|
67
|
-
value:
|
|
44
|
+
value: (value, e) => value
|
|
68
45
|
};
|
|
69
46
|
}
|
|
70
47
|
getItemProps(props, index) {
|
|
@@ -119,7 +96,20 @@ _defineProperty(RootPills, "defaultProps", ({
|
|
|
119
96
|
defaultValue: null,
|
|
120
97
|
behavior: behavior ?? 'auto'
|
|
121
98
|
}));
|
|
122
|
-
_defineProperty(RootPills, "enhance", [a11yEnhance(
|
|
99
|
+
_defineProperty(RootPills, "enhance", [a11yEnhance({
|
|
100
|
+
onNeighborChange: (neighborElement, props) => {
|
|
101
|
+
if (neighborElement) {
|
|
102
|
+
neighborElement.focus();
|
|
103
|
+
if (props.behavior === 'auto') {
|
|
104
|
+
neighborElement.click();
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
childSelector: props => {
|
|
109
|
+
const selector = props.behavior === 'auto' ? ['role', 'radio'] : ['role', 'tab'];
|
|
110
|
+
return selector;
|
|
111
|
+
}
|
|
112
|
+
})]);
|
|
123
113
|
function Pill(props) {
|
|
124
114
|
var _ref2 = arguments[0],
|
|
125
115
|
_ref6;
|
|
@@ -135,14 +125,11 @@ function Pill(props) {
|
|
|
135
125
|
behavior
|
|
136
126
|
} = props;
|
|
137
127
|
const neighborLocation = useNeighborLocationDetect(index);
|
|
138
|
-
const roleAreaProps = {
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
}
|
|
143
|
-
roleAreaProps.role = 'tab';
|
|
144
|
-
roleAreaProps['aria-selected'] = selected;
|
|
145
|
-
}
|
|
128
|
+
const roleAreaProps = {
|
|
129
|
+
'role': behavior === 'auto' ? 'radio' : 'tab',
|
|
130
|
+
'aria-checked': behavior === 'auto' ? selected : undefined,
|
|
131
|
+
'aria-selected': behavior !== 'auto' ? selected : undefined
|
|
132
|
+
};
|
|
146
133
|
return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SPill, _ref6.cn("SPill", {
|
|
147
134
|
..._assignProps2({
|
|
148
135
|
"tag": 'button',
|
|
@@ -178,12 +165,12 @@ function Addon(props) {
|
|
|
178
165
|
}, _ref4)
|
|
179
166
|
}));
|
|
180
167
|
}
|
|
168
|
+
export const wrapPills = wrapper => wrapper;
|
|
181
169
|
const Pills = createComponent(RootPills, {
|
|
182
170
|
Item: [Pill, {
|
|
183
171
|
Text,
|
|
184
172
|
Addon
|
|
185
173
|
}]
|
|
186
174
|
});
|
|
187
|
-
export const wrapPills = wrapper => wrapper;
|
|
188
175
|
export default Pills;
|
|
189
176
|
//# sourceMappingURL=Pills.js.map
|
package/lib/es6/Pills.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pills.js","names":["NeighborLocation","Box","useNeighborLocationDetect","createComponent","Component","sstyled","Root","addonTextChildren","a11yEnhance","React","style","_sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","RootPills","constructor","args","_defineProperty","value","e","handlers","event","key","preventDefault","startIndex","type","selectable","itemValues","length","element","itemRefs","disabled","undefined","uncontrolledProps","getItemProps","index","size","asProps","isSelected","selected","tabIndex","onClick","bindHandlerClick","onKeyDown","bindHandleKeyDown","render","_ref","_ref5","SPills","Children","styles","controlsLength","createElement","cn","_assignProps","defaultValue","Pill","_ref2","arguments[0]","_ref6","SPill","addonLeft","addonRight","neighborLocation","roleAreaProps","role","_assignProps2","Pills","Item","Addon","tag","Text","_ref3","_ref7","SText","_assignProps3","_ref4","_ref8","SAddon","_assignProps4","wrapPills","wrapper"],"sources":["../../src/Pills.jsx"],"sourcesContent":["import { NeighborLocation, Box, useNeighborLocationDetect } from '@semcore/base-components';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\nimport React from 'react';\n\nimport style from './style/pills.shadow.css';\n\nconst optionsA11yEnhance = {\n onNeighborChange: (neighborElement, props) => {\n if (neighborElement) {\n neighborElement.focus();\n if (props.behavior === 'auto') {\n neighborElement.click();\n }\n }\n },\n childSelector: (props) =>\n props.behavior === 'auto' ? ['role', 'radio'] : ['role', 'tab'],\n};\n\nclass RootPills extends Component {\n static displayName = 'Pills';\n static style = style;\n static defaultProps = ({ behavior }) => ({\n size: 'm',\n defaultValue: null,\n behavior: behavior ?? 'auto',\n });\n\n itemValues = [];\n static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n bindHandlerClick = (value) => (e) => {\n this.handlers.value(value, e);\n };\n\n bindHandleKeyDown = (value) => (event) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.handlers.value(value, event);\n }\n };\n\n getItemProps(props, index) {\n const { value, size, disabled, behavior } = this.asProps;\n const isSelected = value === props.value;\n\n this.itemValues[index] = props.value;\n return {\n index: index,\n size,\n disabled,\n selected: isSelected,\n behavior,\n tabIndex: isSelected ? 0 : -1,\n onClick: this.bindHandlerClick(props.value),\n onKeyDown: this.bindHandleKeyDown(props.value),\n };\n }\n\n changeIndex = (startIndex, type) => {\n let selectable = false;\n\n while (!selectable && startIndex >= 0 && startIndex < this.itemValues.length) {\n if (type === 'increment') startIndex++;\n if (type === 'decrement') startIndex--;\n\n const element = this.itemRefs[startIndex];\n\n if (element?.disabled === false) {\n selectable = true;\n }\n }\n\n return startIndex >= 0 && startIndex < this.itemValues.length ? startIndex : undefined;\n };\n\n render() {\n const SPills = Root;\n const { Children, styles, controlsLength, disabled, behavior, value } = this.asProps;\n\n return sstyled(styles)(\n <SPills\n render={Box}\n role={behavior === 'auto' ? 'radiogroup' : 'tablist'}\n aria-disabled={disabled}\n use:tabIndex={value !== null ? -1 : 0}\n >\n <NeighborLocation controlsLength={controlsLength}>\n <Children />\n </NeighborLocation>\n </SPills>,\n );\n }\n}\n\nfunction Pill(props) {\n const SPill = Root;\n const { Children, styles, addonLeft, addonRight, selected, disabled, index, behavior } = props;\n const neighborLocation = useNeighborLocationDetect(index);\n const roleAreaProps = {};\n if (behavior === 'auto') {\n roleAreaProps.role = 'radio';\n roleAreaProps['aria-checked'] = selected;\n } else {\n roleAreaProps.role = 'tab';\n roleAreaProps['aria-selected'] = selected;\n }\n return sstyled(styles)(\n <SPill\n render={Box}\n tag='button'\n type='button'\n tabIndex={0}\n neighborLocation={neighborLocation}\n aria-disabled={disabled}\n {...roleAreaProps}\n >\n {addonLeft ? <Pills.Item.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, Pills.Item.Text, Pills.Item.Addon)}\n {addonRight ? <Pills.Item.Addon tag={addonRight} /> : null}\n </SPill>,\n );\n}\n\nfunction Text(props) {\n const SText = Root;\n return sstyled(props.styles)(<SText render={Box} tag='span' />);\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n return sstyled(props.styles)(<SAddon render={Box} tag='span' />);\n}\n\nconst Pills = createComponent(RootPills, {\n Item: [Pill, { Text, Addon }],\n});\n\nexport const wrapPills = (wrapper) => wrapper;\n\nexport default Pills;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"Pills.js","names":["NeighborLocation","Box","useNeighborLocationDetect","createComponent","Component","sstyled","Root","addonTextChildren","a11yEnhance","React","style","_sstyled","insert","RootPills","constructor","args","_defineProperty","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","Children","styles","controlsLength","createElement","cn","_assignProps","defaultValue","onNeighborChange","neighborElement","focus","click","childSelector","selector","Pill","_ref2","arguments[0]","_ref6","SPill","addonLeft","addonRight","neighborLocation","roleAreaProps","undefined","_assignProps2","Pills","Item","Addon","tag","Text","_ref3","_ref7","SText","_assignProps3","_ref4","_ref8","SAddon","_assignProps4","wrapPills","wrapper"],"sources":["../../src/Pills.tsx"],"sourcesContent":["import { NeighborLocation, Box, useNeighborLocationDetect } from '@semcore/base-components';\nimport type { Intergalactic, IRootComponentProps } 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 { IntergalacticPillsComponent, PillProps, PillsComponent, PillsHandlers, PillsItemAddonComponent, PillsItemComponent, PillsItemTextComponent, PillsProps, PillsValue } from './Pills.type';\nimport style from './style/pills.shadow.css';\n\nclass RootPills extends Component<\n Intergalactic.InternalTypings.InferComponentProps<IntergalacticPillsComponent>,\n typeof RootPills.enhance,\n PillsHandlers\n> {\n static displayName = 'Pills';\n static style = style;\n static defaultProps = ({ behavior }: PillsProps) => ({\n size: 'm',\n defaultValue: null,\n behavior: behavior ?? 'auto',\n });\n\n itemValues: Array<PillProps['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: PillProps['value'], e: React.SyntheticEvent) => value,\n };\n }\n\n bindHandlerClick = (value: PillProps['value']) => (e: React.MouseEvent) => {\n this.handlers.value(value, e);\n };\n\n bindHandleKeyDown = (value: PillProps['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: PillProps, 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<PillsItemComponent, 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<PillsItemTextComponent>) {\n const SText = Root;\n return sstyled(props.styles)(<SText render={Box} tag='span' />);\n}\n\nfunction Addon(props: Intergalactic.InternalTypings.InferComponentProps<PillsItemAddonComponent>) {\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<IntergalacticPillsComponent>\n > &\n PropsExtending,\n) => React.ReactNode) => wrapper as IntergalacticPillsComponent<PropsExtending>;\n\nconst Pills = createComponent(RootPills, {\n Item: [Pill, { Text, Addon }],\n}) as unknown as PillsComponent;\n\nexport default Pills;\n"],"mappings":"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","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\nexport type PillsValue = string | number | boolean | null;\n\nexport type PillsProps<T extends PillsValue = PillsValue> = NeighborLocationProps &\n BoxProps & {\n /** Pills size */\n size?: 'l' | 'm';\n /** Disabled state */\n disabled?: boolean;\n /** Called when the selection is changed */\n onChange?:\n | ((value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void)\n | React.Dispatch<React.SetStateAction<T>>;\n /** Value for the selected pill */\n value?: T;\n /** Default value for the selected pill */\n defaultValue?: T;\n /** Sets semantic role for corresponding behavior,\n * when set to `auto` pressing left and right arrows\n * selects corresponding sibling pill.\n *\n * It's recommended to use `auto` behavior in forms\n * while `manual` behavior for navigation and layout.\n * @default tabs\n */\n behavior?:\n | 'auto'\n | 'manual';\n };\n\nexport type PillProps = BoxProps &\n NeighborItemProps & {\n /** Pill value */\n value?: PillsValue;\n /** Disabled state */\n disabled?: boolean;\n /** Selected state */\n selected?: boolean;\n /** Left addon text */\n addonLeft?: React.ElementType;\n /** Right addon tag */\n addonRight?: React.ElementType;\n };\n\nexport type PillsContext = {\n getItemProps: PropGetterFn;\n};\n\nexport type PillsHandlers = {\n value: (value: PillProps['value'], event: React.SyntheticEvent) => PillProps['value'];\n};\n\nexport type IntergalacticPillsComponent<PropsExtending = {}> = (<\n Value extends PillsValue,\n Tag extends Intergalactic.Tag = 'div',\n>(\n props: Intergalactic.InternalTypings.ComponentProps<\n Tag,\n 'div',\n PillsProps<Value>,\n PillsContext,\n [handlers: PillsHandlers]\n > &\n PropsExtending,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\nIntergalactic.InternalTypings.ComponentAdditive<'div', 'div', PillsProps>;\n\nexport type PillsItemComponent = Intergalactic.Component<'button', PillProps, [handlers: PillsHandlers]>;\nexport type PillsItemTextComponent = typeof Box;\nexport type PillsItemAddonComponent = typeof Box;\n\nexport type PillsComponent = IntergalacticPillsComponent & {\n Item: PillsItemComponent & {\n Text: PillsItemTextComponent;\n Addon: PillsItemAddonComponent;\n };\n};\n"],"mappings":"","ignoreList":[]}
|
package/lib/es6/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { default } from './Pills';
|
|
2
|
-
export * from './Pills';
|
|
1
|
+
export { default, wrapPills } from './Pills';
|
|
2
|
+
export * from './Pills.type';
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
package/lib/es6/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.
|
|
1
|
+
{"version":3,"file":"index.js","names":["default","wrapPills"],"sources":["../../src/index.ts"],"sourcesContent":["export { default, wrapPills } from './Pills';\nexport * from './Pills.type';\n"],"mappings":"AAAA,SAASA,OAAO,EAAEC,SAAS,QAAQ,SAAS;AAC5C,cAAc,cAAc","ignoreList":[]}
|
package/lib/esm/Pills.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
-
import {
|
|
2
|
+
import { sstyled, createComponent, Component, assignProps } from "@semcore/core";
|
|
3
3
|
import { Box, NeighborLocation, useNeighborLocationDetect } from "@semcore/base-components";
|
|
4
4
|
import addonTextChildren from "@semcore/core/lib/utils/addonTextChildren";
|
|
5
5
|
import a11yEnhance from "@semcore/core/lib/utils/enhances/a11yEnhance";
|
|
@@ -27,17 +27,6 @@ const style = (
|
|
|
27
27
|
"_size_l": "_size_l_1x82a_gg_"
|
|
28
28
|
})
|
|
29
29
|
);
|
|
30
|
-
const optionsA11yEnhance = {
|
|
31
|
-
onNeighborChange: (neighborElement, props) => {
|
|
32
|
-
if (neighborElement) {
|
|
33
|
-
neighborElement.focus();
|
|
34
|
-
if (props.behavior === "auto") {
|
|
35
|
-
neighborElement.click();
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
},
|
|
39
|
-
childSelector: (props) => props.behavior === "auto" ? ["role", "radio"] : ["role", "tab"]
|
|
40
|
-
};
|
|
41
30
|
class RootPills extends Component {
|
|
42
31
|
constructor(...args) {
|
|
43
32
|
super(...args);
|
|
@@ -45,28 +34,16 @@ class RootPills extends Component {
|
|
|
45
34
|
_defineProperty(this, "bindHandlerClick", (value) => (e) => {
|
|
46
35
|
this.handlers.value(value, e);
|
|
47
36
|
});
|
|
48
|
-
_defineProperty(this, "bindHandleKeyDown", (value) => (
|
|
49
|
-
if (
|
|
50
|
-
|
|
51
|
-
this.handlers.value(value,
|
|
37
|
+
_defineProperty(this, "bindHandleKeyDown", (value) => (e) => {
|
|
38
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
39
|
+
e.preventDefault();
|
|
40
|
+
this.handlers.value(value, e);
|
|
52
41
|
}
|
|
53
42
|
});
|
|
54
|
-
_defineProperty(this, "changeIndex", (startIndex, type) => {
|
|
55
|
-
let selectable = false;
|
|
56
|
-
while (!selectable && startIndex >= 0 && startIndex < this.itemValues.length) {
|
|
57
|
-
if (type === "increment") startIndex++;
|
|
58
|
-
if (type === "decrement") startIndex--;
|
|
59
|
-
const element = this.itemRefs[startIndex];
|
|
60
|
-
if ((element == null ? void 0 : element.disabled) === false) {
|
|
61
|
-
selectable = true;
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
return startIndex >= 0 && startIndex < this.itemValues.length ? startIndex : void 0;
|
|
65
|
-
});
|
|
66
43
|
}
|
|
67
44
|
uncontrolledProps() {
|
|
68
45
|
return {
|
|
69
|
-
value:
|
|
46
|
+
value: (value, e) => value
|
|
70
47
|
};
|
|
71
48
|
}
|
|
72
49
|
getItemProps(props, index) {
|
|
@@ -120,7 +97,20 @@ _defineProperty(RootPills, "defaultProps", ({
|
|
|
120
97
|
defaultValue: null,
|
|
121
98
|
behavior: behavior ?? "auto"
|
|
122
99
|
}));
|
|
123
|
-
_defineProperty(RootPills, "enhance", [a11yEnhance(
|
|
100
|
+
_defineProperty(RootPills, "enhance", [a11yEnhance({
|
|
101
|
+
onNeighborChange: (neighborElement, props) => {
|
|
102
|
+
if (neighborElement) {
|
|
103
|
+
neighborElement.focus();
|
|
104
|
+
if (props.behavior === "auto") {
|
|
105
|
+
neighborElement.click();
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
},
|
|
109
|
+
childSelector: (props) => {
|
|
110
|
+
const selector = props.behavior === "auto" ? ["role", "radio"] : ["role", "tab"];
|
|
111
|
+
return selector;
|
|
112
|
+
}
|
|
113
|
+
})]);
|
|
124
114
|
function Pill(props) {
|
|
125
115
|
var _ref2 = arguments[0], _ref6;
|
|
126
116
|
const SPill = Box;
|
|
@@ -135,14 +125,11 @@ function Pill(props) {
|
|
|
135
125
|
behavior
|
|
136
126
|
} = props;
|
|
137
127
|
const neighborLocation = useNeighborLocationDetect(index);
|
|
138
|
-
const roleAreaProps = {
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
}
|
|
143
|
-
roleAreaProps.role = "tab";
|
|
144
|
-
roleAreaProps["aria-selected"] = selected;
|
|
145
|
-
}
|
|
128
|
+
const roleAreaProps = {
|
|
129
|
+
"role": behavior === "auto" ? "radio" : "tab",
|
|
130
|
+
"aria-checked": behavior === "auto" ? selected : void 0,
|
|
131
|
+
"aria-selected": behavior !== "auto" ? selected : void 0
|
|
132
|
+
};
|
|
146
133
|
return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SPill, _ref6.cn("SPill", {
|
|
147
134
|
...assignProps({
|
|
148
135
|
"tag": "button",
|
|
@@ -176,13 +163,13 @@ function Addon(props) {
|
|
|
176
163
|
}, _ref4)
|
|
177
164
|
}));
|
|
178
165
|
}
|
|
166
|
+
const wrapPills = (wrapper) => wrapper;
|
|
179
167
|
const Pills = createComponent(RootPills, {
|
|
180
168
|
Item: [Pill, {
|
|
181
169
|
Text,
|
|
182
170
|
Addon
|
|
183
171
|
}]
|
|
184
172
|
});
|
|
185
|
-
const wrapPills = (wrapper) => wrapper;
|
|
186
173
|
export {
|
|
187
174
|
Pills as default,
|
|
188
175
|
wrapPills
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { Intergalactic } from '@semcore/core';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import type { IntergalacticPillsComponent, PillsComponent } from './Pills.type';
|
|
4
|
+
export declare const wrapPills: <PropsExtending extends {}>(wrapper: (props: Intergalactic.InternalTypings.UntypeRefAndTag<Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticPillsComponent>> & PropsExtending) => React.ReactNode) => IntergalacticPillsComponent<PropsExtending>;
|
|
5
|
+
declare const Pills: PillsComponent;
|
|
6
|
+
export default Pills;
|
|
@@ -0,0 +1,55 @@
|
|
|
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
|
+
export type PillsValue = string | number | boolean | null;
|
|
5
|
+
export type PillsProps<T extends PillsValue = PillsValue> = NeighborLocationProps & BoxProps & {
|
|
6
|
+
/** Pills size */
|
|
7
|
+
size?: 'l' | 'm';
|
|
8
|
+
/** Disabled state */
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
/** Called when the selection is changed */
|
|
11
|
+
onChange?: ((value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void) | React.Dispatch<React.SetStateAction<T>>;
|
|
12
|
+
/** Value for the selected pill */
|
|
13
|
+
value?: T;
|
|
14
|
+
/** Default value for the selected pill */
|
|
15
|
+
defaultValue?: T;
|
|
16
|
+
/** Sets semantic role for corresponding behavior,
|
|
17
|
+
* when set to `auto` pressing left and right arrows
|
|
18
|
+
* selects corresponding sibling pill.
|
|
19
|
+
*
|
|
20
|
+
* It's recommended to use `auto` behavior in forms
|
|
21
|
+
* while `manual` behavior for navigation and layout.
|
|
22
|
+
* @default tabs
|
|
23
|
+
*/
|
|
24
|
+
behavior?: 'auto' | 'manual';
|
|
25
|
+
};
|
|
26
|
+
export type PillProps = BoxProps & NeighborItemProps & {
|
|
27
|
+
/** Pill value */
|
|
28
|
+
value?: PillsValue;
|
|
29
|
+
/** Disabled state */
|
|
30
|
+
disabled?: boolean;
|
|
31
|
+
/** Selected state */
|
|
32
|
+
selected?: boolean;
|
|
33
|
+
/** Left addon text */
|
|
34
|
+
addonLeft?: React.ElementType;
|
|
35
|
+
/** Right addon tag */
|
|
36
|
+
addonRight?: React.ElementType;
|
|
37
|
+
};
|
|
38
|
+
export type PillsContext = {
|
|
39
|
+
getItemProps: PropGetterFn;
|
|
40
|
+
};
|
|
41
|
+
export type PillsHandlers = {
|
|
42
|
+
value: (value: PillProps['value'], event: React.SyntheticEvent) => PillProps['value'];
|
|
43
|
+
};
|
|
44
|
+
export type IntergalacticPillsComponent<PropsExtending = {}> = (<Value extends PillsValue, Tag extends Intergalactic.Tag = 'div'>(props: Intergalactic.InternalTypings.ComponentProps<Tag, 'div', PillsProps<Value>, PillsContext, [
|
|
45
|
+
handlers: PillsHandlers
|
|
46
|
+
]> & PropsExtending) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', PillsProps>;
|
|
47
|
+
export type PillsItemComponent = Intergalactic.Component<'button', PillProps, [handlers: PillsHandlers]>;
|
|
48
|
+
export type PillsItemTextComponent = typeof Box;
|
|
49
|
+
export type PillsItemAddonComponent = typeof Box;
|
|
50
|
+
export type PillsComponent = IntergalacticPillsComponent & {
|
|
51
|
+
Item: PillsItemComponent & {
|
|
52
|
+
Text: PillsItemTextComponent;
|
|
53
|
+
Addon: PillsItemAddonComponent;
|
|
54
|
+
};
|
|
55
|
+
};
|
package/lib/types/index.d.ts
CHANGED
|
@@ -1,88 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import type React from 'react';
|
|
4
|
-
|
|
5
|
-
export type PillsValue = string | number | boolean | null;
|
|
6
|
-
|
|
7
|
-
export type PillsProps<T extends PillsValue = PillsValue> = NeighborLocationProps &
|
|
8
|
-
BoxProps & {
|
|
9
|
-
/** Pills size */
|
|
10
|
-
size?: 'l' | 'm';
|
|
11
|
-
/** Disabled state */
|
|
12
|
-
disabled?: boolean;
|
|
13
|
-
/** Called when the selection is changed */
|
|
14
|
-
onChange?:
|
|
15
|
-
| ((value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void)
|
|
16
|
-
| React.Dispatch<React.SetStateAction<T>>;
|
|
17
|
-
/** Value for the selected pill */
|
|
18
|
-
value?: T;
|
|
19
|
-
/** Default value for the selected pill */
|
|
20
|
-
defaultValue?: T;
|
|
21
|
-
/** Sets semantic role for corresponding behavior,
|
|
22
|
-
* when set to `auto` pressing left and right arrows
|
|
23
|
-
* selects corresponding sibling pill.
|
|
24
|
-
*
|
|
25
|
-
* It's recommended to use `auto` behavior in forms
|
|
26
|
-
* while `manual` behavior for navigation and layout.
|
|
27
|
-
* @default tabs
|
|
28
|
-
*/
|
|
29
|
-
behavior?:
|
|
30
|
-
| 'auto'
|
|
31
|
-
| 'manual';
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
export type PillProps = BoxProps &
|
|
35
|
-
NeighborItemProps & {
|
|
36
|
-
/** Pill value */
|
|
37
|
-
value?: PillsValue;
|
|
38
|
-
/** Disabled state */
|
|
39
|
-
disabled?: boolean;
|
|
40
|
-
/** Selected state */
|
|
41
|
-
selected?: boolean;
|
|
42
|
-
/** Left addon text */
|
|
43
|
-
addonLeft?: React.ElementType;
|
|
44
|
-
/** Right addon tag */
|
|
45
|
-
addonRight?: React.ElementType;
|
|
46
|
-
};
|
|
47
|
-
|
|
48
|
-
export type PillsContext = {
|
|
49
|
-
getItemProps: PropGetterFn;
|
|
50
|
-
};
|
|
51
|
-
|
|
52
|
-
export type PillsHandlers = {
|
|
53
|
-
value: (value: PillsValue) => void;
|
|
54
|
-
};
|
|
55
|
-
|
|
56
|
-
type IntergalacticPillsComponent<PropsExtending = {}> = (<
|
|
57
|
-
Value extends PillsValue,
|
|
58
|
-
Tag extends Intergalactic.Tag = 'div',
|
|
59
|
-
>(
|
|
60
|
-
props: Intergalactic.InternalTypings.ComponentProps<
|
|
61
|
-
Tag,
|
|
62
|
-
'div',
|
|
63
|
-
PillsProps<Value>,
|
|
64
|
-
PillsContext,
|
|
65
|
-
[handlers: PillsHandlers]
|
|
66
|
-
> &
|
|
67
|
-
PropsExtending,
|
|
68
|
-
) => Intergalactic.InternalTypings.ComponentRenderingResults) &
|
|
69
|
-
Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', PillsProps>;
|
|
70
|
-
|
|
71
|
-
declare const Pills: IntergalacticPillsComponent & {
|
|
72
|
-
Item: Intergalactic.Component<'button', PillProps, [handlers: PillsHandlers]> & {
|
|
73
|
-
Text: typeof Box;
|
|
74
|
-
Addon: typeof Box;
|
|
75
|
-
};
|
|
76
|
-
};
|
|
77
|
-
|
|
78
|
-
declare const wrapPills: <PropsExtending extends {}>(
|
|
79
|
-
wrapper: (
|
|
80
|
-
props: Intergalactic.InternalTypings.UntypeRefAndTag<
|
|
81
|
-
Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticPillsComponent>
|
|
82
|
-
> &
|
|
83
|
-
PropsExtending,
|
|
84
|
-
) => React.ReactNode,
|
|
85
|
-
) => IntergalacticPillsComponent<PropsExtending>;
|
|
86
|
-
export { wrapPills };
|
|
87
|
-
|
|
88
|
-
export default Pills;
|
|
1
|
+
export { default, wrapPills } from './Pills';
|
|
2
|
+
export * from './Pills.type';
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/pills",
|
|
3
3
|
"description": "Semrush Pills Component",
|
|
4
|
-
"version": "17.0.0-prerelease.
|
|
4
|
+
"version": "17.0.0-prerelease.34",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -22,13 +22,13 @@
|
|
|
22
22
|
"directory": "semcore/pills"
|
|
23
23
|
},
|
|
24
24
|
"devDependencies": {
|
|
25
|
-
"@semcore/core": "17.0.0-prerelease.
|
|
26
|
-
"@semcore/
|
|
27
|
-
"@semcore/
|
|
25
|
+
"@semcore/core": "17.0.0-prerelease.34",
|
|
26
|
+
"@semcore/base-components": "17.0.0-prerelease.34",
|
|
27
|
+
"@semcore/badge": "17.0.0-prerelease.34",
|
|
28
28
|
"@semcore/testing-utils": "1.0.0",
|
|
29
|
-
"@semcore/icon": "16.7.2-prerelease.
|
|
29
|
+
"@semcore/icon": "16.7.2-prerelease.34"
|
|
30
30
|
},
|
|
31
31
|
"scripts": {
|
|
32
|
-
"build": "pnpm semcore-builder
|
|
32
|
+
"build": "pnpm semcore-builder && pnpm vite build"
|
|
33
33
|
}
|
|
34
34
|
}
|
package/vite.config.ts
CHANGED
package/lib/cjs/index.d.js
DELETED
package/lib/cjs/index.d.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { Box, BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type React from 'react';\n\nexport type PillsValue = string | number | boolean | null;\n\nexport type PillsProps<T extends PillsValue = PillsValue> = NeighborLocationProps &\n BoxProps & {\n /** Pills size */\n size?: 'l' | 'm';\n /** Disabled state */\n disabled?: boolean;\n /** Called when the selection is changed */\n onChange?:\n | ((value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void)\n | React.Dispatch<React.SetStateAction<T>>;\n /** Value for the selected pill */\n value?: T;\n /** Default value for the selected pill */\n defaultValue?: T;\n /** Sets semantic role for corresponding behavior,\n * when set to `auto` pressing left and right arrows\n * selects corresponding sibling pill.\n *\n * It's recommended to use `auto` behavior in forms\n * while `manual` behavior for navigation and layout.\n * @default tabs\n */\n behavior?:\n | 'auto'\n | 'manual';\n };\n\nexport type PillProps = BoxProps &\n NeighborItemProps & {\n /** Pill value */\n value?: PillsValue;\n /** Disabled state */\n disabled?: boolean;\n /** Selected state */\n selected?: boolean;\n /** Left addon text */\n addonLeft?: React.ElementType;\n /** Right addon tag */\n addonRight?: React.ElementType;\n };\n\nexport type PillsContext = {\n getItemProps: PropGetterFn;\n};\n\nexport type PillsHandlers = {\n value: (value: PillsValue) => void;\n};\n\ntype IntergalacticPillsComponent<PropsExtending = {}> = (<\n Value extends PillsValue,\n Tag extends Intergalactic.Tag = 'div',\n>(\n props: Intergalactic.InternalTypings.ComponentProps<\n Tag,\n 'div',\n PillsProps<Value>,\n PillsContext,\n [handlers: PillsHandlers]\n > &\n PropsExtending,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\nIntergalactic.InternalTypings.ComponentAdditive<'div', 'div', PillsProps>;\n\ndeclare const Pills: IntergalacticPillsComponent & {\n Item: Intergalactic.Component<'button', PillProps, [handlers: PillsHandlers]> & {\n Text: typeof Box;\n Addon: typeof Box;\n };\n};\n\ndeclare const wrapPills: <PropsExtending extends {}>(\n wrapper: (\n props: Intergalactic.InternalTypings.UntypeRefAndTag<\n Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticPillsComponent>\n > &\n PropsExtending,\n ) => React.ReactNode,\n) => IntergalacticPillsComponent<PropsExtending>;\nexport { wrapPills };\n\nexport default Pills;\n"],"mappings":"","ignoreList":[]}
|
package/lib/es6/index.d.js
DELETED
package/lib/es6/index.d.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { Box, BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type React from 'react';\n\nexport type PillsValue = string | number | boolean | null;\n\nexport type PillsProps<T extends PillsValue = PillsValue> = NeighborLocationProps &\n BoxProps & {\n /** Pills size */\n size?: 'l' | 'm';\n /** Disabled state */\n disabled?: boolean;\n /** Called when the selection is changed */\n onChange?:\n | ((value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void)\n | React.Dispatch<React.SetStateAction<T>>;\n /** Value for the selected pill */\n value?: T;\n /** Default value for the selected pill */\n defaultValue?: T;\n /** Sets semantic role for corresponding behavior,\n * when set to `auto` pressing left and right arrows\n * selects corresponding sibling pill.\n *\n * It's recommended to use `auto` behavior in forms\n * while `manual` behavior for navigation and layout.\n * @default tabs\n */\n behavior?:\n | 'auto'\n | 'manual';\n };\n\nexport type PillProps = BoxProps &\n NeighborItemProps & {\n /** Pill value */\n value?: PillsValue;\n /** Disabled state */\n disabled?: boolean;\n /** Selected state */\n selected?: boolean;\n /** Left addon text */\n addonLeft?: React.ElementType;\n /** Right addon tag */\n addonRight?: React.ElementType;\n };\n\nexport type PillsContext = {\n getItemProps: PropGetterFn;\n};\n\nexport type PillsHandlers = {\n value: (value: PillsValue) => void;\n};\n\ntype IntergalacticPillsComponent<PropsExtending = {}> = (<\n Value extends PillsValue,\n Tag extends Intergalactic.Tag = 'div',\n>(\n props: Intergalactic.InternalTypings.ComponentProps<\n Tag,\n 'div',\n PillsProps<Value>,\n PillsContext,\n [handlers: PillsHandlers]\n > &\n PropsExtending,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\nIntergalactic.InternalTypings.ComponentAdditive<'div', 'div', PillsProps>;\n\ndeclare const Pills: IntergalacticPillsComponent & {\n Item: Intergalactic.Component<'button', PillProps, [handlers: PillsHandlers]> & {\n Text: typeof Box;\n Addon: typeof Box;\n };\n};\n\ndeclare const wrapPills: <PropsExtending extends {}>(\n wrapper: (\n props: Intergalactic.InternalTypings.UntypeRefAndTag<\n Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticPillsComponent>\n > &\n PropsExtending,\n ) => React.ReactNode,\n) => IntergalacticPillsComponent<PropsExtending>;\nexport { wrapPills };\n\nexport default Pills;\n"],"mappings":"","ignoreList":[]}
|