npm - @semcore/pills - Versions diffs - 17.1.0-prerelease.3 → 17.2.0-prerelease.3 - Mend

@semcore/pills 17.1.0-prerelease.3 → 17.2.0-prerelease.3

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.

Files changed (11) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -2,6 +2,12 @@
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
+## [17.2.0] - 2026-06-05
+### Added
+- Links to the API and examples in the docs.
 ## [17.1.0] - 2026-05-13
 ### Added

package/lib/cjs/Pills.js CHANGED Viewed

@@ -12,20 +12,20 @@ var _addonTextChildren = _interopRequireDefault(require("@semcore/core/lib/utils
 var _a11yEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/a11yEnhance"));
 var _react = _interopRequireDefault(require("react"));
 /*!__reshadow-styles__:"./style/pills.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SPills_yzcp2_gg_{display:inline-flex;align-items:center;justify-content:center;isolation:isolate;border-radius:var(--intergalactic-control-rounded, 6px)}.___SPills_yzcp2_gg_ .___SPill_yzcp2_gg_.__selected_yzcp2_gg_{background:var(--intergalactic-control-secondary-info, rgba(0, 81, 255, 0.039));border-color:var(--intergalactic-border-info-active, rgb(135, 150, 239));z-index:3}@supports (color:color(display-p3 0 0 0%)){.___SPills_yzcp2_gg_ .___SPill_yzcp2_gg_.__selected_yzcp2_gg_{background:var(--intergalactic-control-secondary-info, rgba(0, 81, 255, 0.039))}@media (color-gamut:p3){.___SPills_yzcp2_gg_ .___SPill_yzcp2_gg_.__selected_yzcp2_gg_{background:var(--intergalactic-control-secondary-info, color(display-p3 0.12567 0.31309 0.96324 / 0.039))}}}.___SPills_yzcp2_gg_ .___SPill_yzcp2_gg_.__selected_yzcp2_gg_,.___SPills_yzcp2_gg_ .___SPill_yzcp2_gg_:focus-visible{z-index:3}.___SPills_yzcp2_gg_ .___SPill_yzcp2_gg_:active{z-index:2}@media (hover:hover){.___SPills_yzcp2_gg_ .___SPill_yzcp2_gg_:hover{z-index:2}}.___SPill_yzcp2_gg_{display:inline-flex;align-items:center;justify-content:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;background:var(--intergalactic-bg-primary-neutral, rgb(255, 255, 255));border:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161));border-radius:var(--intergalactic-control-rounded, 6px)}@supports (color:color(display-p3 0 0 0%)){.___SPill_yzcp2_gg_{border:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___SPill_yzcp2_gg_{border:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___SPill_yzcp2_gg_::-moz-focus-inner{border:0;padding:0}.___SPill_yzcp2_gg_:active{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPill_yzcp2_gg_:hover{background:var(--intergalactic-bg-primary-neutral-hover, rgb(248, 249, 248))}}.___SPill_yzcp2_gg_.__disabled_yzcp2_gg_{cursor:default;pointer-events:none}.___SPill_yzcp2_gg_.__disabled_yzcp2_gg_>*{opacity:var(--intergalactic-disabled-opacity, 0.4)}.___SText_yzcp2_gg_{color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));display:inline-flex}.___SAddon_yzcp2_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));display:inline-flex;align-items:center;justify-content:center}@supports (color:color(display-p3 0 0 0%)){.___SAddon_yzcp2_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SAddon_yzcp2_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SPill_yzcp2_gg_._size_m_yzcp2_gg_{height:var(--intergalactic-form-control-m, 28px);min-width:var(--intergalactic-form-control-m, 28px);font-size:var(--intergalactic-fs-200, 14px)}.___SPill_yzcp2_gg_._size_l_yzcp2_gg_ .___SText_yzcp2_gg_,.___SPill_yzcp2_gg_._size_m_yzcp2_gg_ .___SText_yzcp2_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_yzcp2_gg_._size_m_yzcp2_gg_ .___SAddon_yzcp2_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SPill_yzcp2_gg_._size_m_yzcp2_gg_ .___SAddon_yzcp2_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_yzcp2_gg_._size_m_yzcp2_gg_ .___SAddon_yzcp2_gg_:only-child{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_yzcp2_gg_._size_l_yzcp2_gg_{height:var(--intergalactic-form-control-l, 40px);min-width:var(--intergalactic-form-control-l, 40px);font-size:var(--intergalactic-fs-300, 16px)}.___SPill_yzcp2_gg_._size_l_yzcp2_gg_ .___SAddon_yzcp2_gg_:only-child,.___SPill_yzcp2_gg_._size_l_yzcp2_gg_ .___SText_yzcp2_gg_:only-child{margin-left:var(--intergalactic-spacing-3x, 12px);margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_yzcp2_gg_._size_l_yzcp2_gg_ .___SAddon_yzcp2_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SPill_yzcp2_gg_._size_l_yzcp2_gg_ .___SAddon_yzcp2_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_yzcp2_gg_._neighborLocation_right_yzcp2_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_yzcp2_gg_._neighborLocation_both_yzcp2_gg_{border-radius:0;margin-left:-1px}.___SPill_yzcp2_gg_._neighborLocation_left_yzcp2_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}", /*__inner_css_end__*/"yzcp2_gg_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SPills_167np_gg_{display:inline-flex;align-items:center;justify-content:center;isolation:isolate;border-radius:var(--intergalactic-control-rounded,6px)}.___SPills_167np_gg_ .___SPill_167np_gg_.__selected_167np_gg_{background:var(--intergalactic-control-secondary-info,#0051ff0a);border-color:var(--intergalactic-border-info-active,#8796ef);z-index:3}@supports (color:color(display-p3 0 0 0%)){.___SPills_167np_gg_ .___SPill_167np_gg_.__selected_167np_gg_{background:var(--intergalactic-control-secondary-info,#0051ff0a)}@media (color-gamut:p3){.___SPills_167np_gg_ .___SPill_167np_gg_.__selected_167np_gg_{background:var(--intergalactic-control-secondary-info,color(display-p3 .12567 .31309 .96324/.039))}}}.___SPills_167np_gg_ .___SPill_167np_gg_.__selected_167np_gg_,.___SPills_167np_gg_ .___SPill_167np_gg_:focus-visible{z-index:3}.___SPills_167np_gg_ .___SPill_167np_gg_:active{z-index:2}@media (hover:hover){.___SPills_167np_gg_ .___SPill_167np_gg_:hover{z-index:2}}.___SPill_167np_gg_{display:inline-flex;align-items:center;justify-content:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;background:var(--intergalactic-bg-primary-neutral,#fff);border:1px solid var(--intergalactic-border-primary,#000c0829);border-radius:var(--intergalactic-control-rounded,6px)}@supports (color:color(display-p3 0 0 0%)){.___SPill_167np_gg_{border:1px solid var(--intergalactic-border-primary,#000c0829)}@media (color-gamut:p3){.___SPill_167np_gg_{border:1px solid var(--intergalactic-border-primary,color(display-p3 .00798 .04498 .03219/.161))}}}.___SPill_167np_gg_::-moz-focus-inner{border:none;padding:0}.___SPill_167np_gg_:active{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPill_167np_gg_:hover{background:var(--intergalactic-bg-primary-neutral-hover,#f8f9f8)}}.___SPill_167np_gg_.__disabled_167np_gg_{cursor:default;pointer-events:none}.___SPill_167np_gg_.__disabled_167np_gg_>*{opacity:var(--intergalactic-disabled-opacity,.4)}.___SText_167np_gg_{color:var(--intergalactic-text-primary,#010500e5);display:inline-flex}.___SAddon_167np_gg_{color:var(--intergalactic-text-secondary,#00030095);display:inline-flex;align-items:center;justify-content:center}@supports (color:color(display-p3 0 0 0%)){.___SAddon_167np_gg_{color:var(--intergalactic-text-secondary,#00030095)}@media (color-gamut:p3){.___SAddon_167np_gg_{color:var(--intergalactic-text-secondary,color(display-p3 .00228 .01289 .00252/.583))}}}.___SPill_167np_gg_._size_m_167np_gg_{height:var(--intergalactic-form-control-m,28px);min-width:var(--intergalactic-form-control-m,28px);font-size:var(--intergalactic-fs-200,14px)}.___SPill_167np_gg_._size_m_167np_gg_ .___SText_167np_gg_{margin-left:var(--intergalactic-spacing-2x,8px);margin-right:var(--intergalactic-spacing-2x,8px)}.___SPill_167np_gg_._size_m_167np_gg_ .___SAddon_167np_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x,8px)}.___SPill_167np_gg_._size_m_167np_gg_ .___SAddon_167np_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x,8px)}.___SPill_167np_gg_._size_m_167np_gg_ .___SAddon_167np_gg_:only-child{margin-left:var(--intergalactic-spacing-2x,8px);margin-right:var(--intergalactic-spacing-2x,8px)}.___SPill_167np_gg_._size_l_167np_gg_{height:var(--intergalactic-form-control-l,40px);min-width:var(--intergalactic-form-control-l,40px);font-size:var(--intergalactic-fs-300,16px)}.___SPill_167np_gg_._size_l_167np_gg_ .___SText_167np_gg_{margin-left:var(--intergalactic-spacing-2x,8px);margin-right:var(--intergalactic-spacing-2x,8px)}.___SPill_167np_gg_._size_l_167np_gg_ .___SText_167np_gg_:only-child{margin-left:var(--intergalactic-spacing-3x,12px);margin-right:var(--intergalactic-spacing-3x,12px)}.___SPill_167np_gg_._size_l_167np_gg_ .___SAddon_167np_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-3x,12px)}.___SPill_167np_gg_._size_l_167np_gg_ .___SAddon_167np_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-3x,12px)}.___SPill_167np_gg_._size_l_167np_gg_ .___SAddon_167np_gg_:only-child{margin-left:var(--intergalactic-spacing-3x,12px);margin-right:var(--intergalactic-spacing-3x,12px)}.___SPill_167np_gg_._neighborLocation_right_167np_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_167np_gg_._neighborLocation_both_167np_gg_{border-radius:0;margin-left:-1px}.___SPill_167np_gg_._neighborLocation_left_167np_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}", /*__inner_css_end__*/"167np_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SText": "___SText_yzcp2_gg_",
-  "__SAddon": "___SAddon_yzcp2_gg_",
-  "__SPill": "___SPill_yzcp2_gg_",
-  "_neighborLocation_right": "_neighborLocation_right_yzcp2_gg_",
-  "_neighborLocation_both": "_neighborLocation_both_yzcp2_gg_",
-  "_neighborLocation_left": "_neighborLocation_left_yzcp2_gg_",
-  "__SPills": "___SPills_yzcp2_gg_",
-  "_selected": "__selected_yzcp2_gg_",
-  "_disabled": "__disabled_yzcp2_gg_",
-  "_size_m": "_size_m_yzcp2_gg_",
-  "_size_l": "_size_l_yzcp2_gg_"
+  "__SText": "___SText_167np_gg_",
+  "__SAddon": "___SAddon_167np_gg_",
+  "__SPill": "___SPill_167np_gg_",
+  "_neighborLocation_right": "_neighborLocation_right_167np_gg_",
+  "_neighborLocation_both": "_neighborLocation_both_167np_gg_",
+  "_neighborLocation_left": "_neighborLocation_left_167np_gg_",
+  "__SPills": "___SPills_167np_gg_",
+  "_selected": "__selected_167np_gg_",
+  "_disabled": "__disabled_167np_gg_",
+  "_size_m": "_size_m_167np_gg_",
+  "_size_l": "_size_l_167np_gg_"
 });
 class RootPills extends _core.Component {
   constructor(...args) {
@@ -43,7 +43,7 @@ class RootPills extends _core.Component {
   }
   uncontrolledProps() {
     return {
-      value: (value, e) => value
+      value: null
     };
   }
   getItemProps(props, index) {
@@ -168,6 +168,12 @@ function Addon(props) {
   }));
 }
 const wrapPills = wrapper => wrapper;
+/**
+ * Pills
+ *
+ * {@link https://developer.semrush.com/intergalactic/components/pills/pills-api/|API} | {@link https://developer.semrush.com/intergalactic/components/pills/pills-code/|Examples}
+ */
 exports.wrapPills = wrapPills;
 const Pills = (0, _core.createComponent)(RootPills, {
   Item: [Pill, {

package/lib/cjs/Pills.js.map CHANGED Viewed

	@@ -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 static displayName = 'Pills';\n static style = style;\n static defaultProps = ({ behavior }: NSPills.Props) => ({\n size: 'm',\n defaultValue: null,\n behavior: behavior ?? 'auto',\n });\n\n itemValues: Array<NSPills.Pill.Props['value']> = [];\n\n static enhance = [a11yEnhance({\n onNeighborChange: (neighborElement, props) => {\n if (neighborElement) {\n neighborElement.focus();\n if (props.behavior === 'auto') {\n neighborElement.click();\n }\n }\n },\n childSelector: (props) => {\n const selector = props.behavior === 'auto' ? ['role', 'radio'] : ['role', 'tab'];\n\n return selector as [string, string];\n },\n })] as const;\n\n uncontrolledProps() {\n return {\n value: (value: NSPills.Pill.Props['value'], e: React.SyntheticEvent) => value,\n };\n }\n\n bindHandlerClick = (value: NSPills.Pill.Props['value']) => (e: React.MouseEvent) => {\n this.handlers.value(value, e);\n };\n\n bindHandleKeyDown = (value: NSPills.Pill.Props['value']) => (e: React.KeyboardEvent) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n this.handlers.value(value, e);\n }\n };\n\n getItemProps(props: NSPills.Pill.Props, index: number) {\n const { value, size, disabled, behavior } = this.asProps;\n const isSelected = value === props.value;\n\n this.itemValues[index] = props.value;\n\n return {\n index: index,\n size,\n disabled,\n selected: isSelected,\n behavior,\n tabIndex: isSelected ? 0 : -1,\n onClick: this.bindHandlerClick(props.value),\n onKeyDown: this.bindHandleKeyDown(props.value),\n };\n }\n\n render() {\n const SPills = Root;\n const { Children, styles, controlsLength, disabled, behavior, value } = this.asProps;\n\n return sstyled(styles)(\n <SPills\n render={Box}\n role={behavior === 'auto' ? 'radiogroup' : 'tablist'}\n aria-disabled={disabled}\n use:tabIndex={value !== null ? -1 : 0}\n >\n <NeighborLocation controlsLength={controlsLength}>\n <Children />\n </NeighborLocation>\n </SPills>,\n );\n }\n}\n\nfunction Pill(props: Intergalactic.InternalTypings.InferChildComponentProps<NSPills.Pill.Component, typeof RootPills, 'Item'>) {\n const SPill = Root;\n const { Children, styles, addonLeft, addonRight, selected, disabled, index, behavior } = props;\n const neighborLocation = useNeighborLocationDetect(index);\n\n const roleAreaProps = {\n 'role': behavior === 'auto' ? 'radio' : 'tab',\n 'aria-checked': behavior === 'auto' ? selected : undefined,\n 'aria-selected': behavior !== 'auto' ? selected : undefined,\n };\n\n return sstyled(styles)(\n <SPill\n render={Box}\n tag='button'\n type='button'\n tabIndex={0}\n neighborLocation={neighborLocation}\n aria-disabled={disabled}\n {...roleAreaProps}\n >\n {addonLeft ? <Pills.Item.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, Pills.Item.Text, Pills.Item.Addon)}\n {addonRight ? <Pills.Item.Addon tag={addonRight} /> : null}\n </SPill>,\n );\n}\n\nfunction Text(props: Intergalactic.InternalTypings.InferComponentProps<NSPills.Pill.Text.Component>) {\n const SText = Root;\n return sstyled(props.styles)(<SText render={Box} tag='span' />);\n}\n\nfunction Addon(props: Intergalactic.InternalTypings.InferComponentProps<NSPills.Pill.Addon.Component>) {\n const SAddon = Root;\n return sstyled(props.styles)(<SAddon render={Box} tag='span' />);\n}\n\nexport const wrapPills = <PropsExtending extends {}>(wrapper: (\n props: Intergalactic.InternalTypings.UntypeRefAndTag<\n Intergalactic.InternalTypings.ComponentPropsNesting<NSPills.WrapComponent>\n > &\n PropsExtending,\n) => React.ReactNode) => wrapper as NSPills.WrapComponent<PropsExtending>;\n\nconst Pills = createComponent(RootPills, {\n Item: [Pill, { Text, Addon }],\n}) as unknown as NSPills.Component;\n\nexport default Pills;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"Pills.js","names":["_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":[]}

package/lib/cjs/Pills.type.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Pills.type.js","names":[],"sources":["../../src/Pills.type.ts"],"sourcesContent":["import type { Box, BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type React from 'react';\n\ndeclare namespace NSPills {\n // TODO: It looks like the value isn't accurate. Revise and align it with the component's logic.\n type Value = string \| number \| boolean \| null;\n type Props<T extends NSPills.Value = NSPills.Value> = NeighborLocationProps & BoxProps & {\n /** Pills size /\n size?: 'l' \| 'm';\n /* Disabled state /\n disabled?: boolean;\n /* Called when the selection is changed /\n onChange?:\n \| ((value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void)\n \| React.Dispatch<React.SetStateAction<T>>;\n /* Value for the selected pill /\n value?: T;\n /* Default value for the selected pill /\n defaultValue?: T;\n /* Sets semantic role for corresponding behavior,\n * when set to `auto` pressing left and right arrows\n * selects corresponding sibling pill.\n \n It's recommended to use `auto` behavior in forms\n * while `manual` behavior for navigation and layout.\n * @default tabs\n /\n behavior?:\n \| 'auto'\n \| 'manual';\n };\n type Ctx = {\n getItemProps: PropGetterFn;\n };\n type Handlers = {\n value: ~~(value~~: ~~Props[~~'~~value~~'], ~~event~~: ~~React.SyntheticEvent) =>~~ Props['~~value~~'];\n };\n namespace Pill {\n type Props = BoxProps & NeighborItemProps & {\n /* Pill value /\n value?: NSPills.Value;\n /* Disabled state /\n disabled?: boolean;\n /* Selected state /\n selected?: boolean;\n /* Left addon text /\n addonLeft?: React.ElementType;\n /* Right addon tag /\n addonRight?: React.ElementType;\n };\n namespace Text {\n type Component = typeof Box;\n }\n namespace Addon {\n type Component = typeof Box;\n }\n\n type Component = Intergalactic.Component<'button', Props, [handlers: Handlers]>;\n }\n\n type WrapComponent<PropsExtending = {}> = (<\n V extends Value,\n Tag extends Intergalactic.Tag = 'div',\n >(\n props: Intergalactic.InternalTypings.ComponentProps<\n Tag,\n 'div',\n Props<V>,\n Ctx,\n [handlers: Handlers]\n > &\n PropsExtending,\n ) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', Props>;\n\n type Component = WrapComponent & {\n Item: Pill.Component & {\n Text: Pill.Text.Component;\n Addon: Pill.Addon.Component;\n };\n };\n}\n\n/* @deprecated It will be removed in v18. /\nexport type PillsValue = NSPills.Value;\n/* @deprecated It will be removed in v18. /\nexport type PillsProps<T extends PillsValue = PillsValue> = NSPills.Props<T>;\n/* @deprecated It will be removed in v18. /\nexport type PillProps = NSPills.Pill.Props;\n/* @deprecated It will be removed in v18. /\nexport type PillsContext = NSPills.Ctx;\n/* @deprecated It will be removed in v18. */\nexport type PillsHandlers = NSPills.Handlers;\n\nexport type { NSPills };\n"],"mappings":"","ignoreList":[]}
1	+ {"version":3,"file":"Pills.type.js","names":[],"sources":["../../src/Pills.type.ts"],"sourcesContent":["import type { Box, BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type React from 'react';\n\ndeclare namespace NSPills {\n // TODO: It looks like the value isn't accurate. Revise and align it with the component's logic.\n type Value = string \| number \| boolean \| null;\n type Props<T extends NSPills.Value = NSPills.Value> = NeighborLocationProps & BoxProps & {\n /** Pills size /\n size?: 'l' \| 'm';\n /* Disabled state /\n disabled?: boolean;\n /* Called when the selection is changed /\n onChange?:\n \| ((value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void)\n \| React.Dispatch<React.SetStateAction<T>>;\n /* Value for the selected pill /\n value?: T;\n /* Default value for the selected pill /\n defaultValue?: T;\n /* Sets semantic role for corresponding behavior,\n * when set to `auto` pressing left and right arrows\n * selects corresponding sibling pill.\n \n It's recommended to use `auto` behavior in forms\n * while `manual` behavior for navigation and layout.\n * @default tabs\n /\n behavior?:\n \| 'auto'\n \| 'manual';\n };\n type Ctx = {\n getItemProps: PropGetterFn;\n };\n type Handlers = {\n value: null;\n };\n type DefaultProps = {\n size: 'm';\n defaultValue: null;\n behavior: Props['behavior'];\n };\n namespace Pill {\n type Props = BoxProps & NeighborItemProps & {\n /* Pill value /\n value?: NSPills.Value;\n /* Disabled state /\n disabled?: boolean;\n /* Selected state /\n selected?: boolean;\n /* Left addon text /\n addonLeft?: React.ElementType;\n /* Right addon tag /\n addonRight?: React.ElementType;\n };\n namespace Text {\n type Component = typeof Box;\n }\n namespace Addon {\n type Component = typeof Box;\n }\n\n type Component = Intergalactic.Component<'button', Props, [handlers: Handlers]>;\n }\n\n type WrapComponent<PropsExtending = {}> = (<\n V extends Value,\n Tag extends Intergalactic.Tag = 'div',\n >(\n props: Intergalactic.InternalTypings.ComponentProps<\n Tag,\n 'div',\n Props<V>,\n Ctx,\n [handlers: Handlers]\n > &\n PropsExtending,\n ) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', Props>;\n\n type Component = WrapComponent & {\n Item: Pill.Component & {\n Text: Pill.Text.Component;\n Addon: Pill.Addon.Component;\n };\n };\n}\n\n/* @deprecated It will be removed in v18. /\nexport type PillsValue = NSPills.Value;\n/* @deprecated It will be removed in v18. /\nexport type PillsProps<T extends PillsValue = PillsValue> = NSPills.Props<T>;\n/* @deprecated It will be removed in v18. /\nexport type PillProps = NSPills.Pill.Props;\n/* @deprecated It will be removed in v18. /\nexport type PillsContext = NSPills.Ctx;\n/* @deprecated It will be removed in v18. */\nexport type PillsHandlers = NSPills.Handlers;\n\nexport type { NSPills };\n"],"mappings":"","ignoreList":[]}

package/lib/es6/Pills.js CHANGED Viewed

@@ -10,20 +10,20 @@ import addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';
 import a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';
 import React from 'react';
 /*!__reshadow-styles__:"./style/pills.shadow.css"*/
-const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SPills_yzcp2_gg_{display:inline-flex;align-items:center;justify-content:center;isolation:isolate;border-radius:var(--intergalactic-control-rounded, 6px)}.___SPills_yzcp2_gg_ .___SPill_yzcp2_gg_.__selected_yzcp2_gg_{background:var(--intergalactic-control-secondary-info, rgba(0, 81, 255, 0.039));border-color:var(--intergalactic-border-info-active, rgb(135, 150, 239));z-index:3}@supports (color:color(display-p3 0 0 0%)){.___SPills_yzcp2_gg_ .___SPill_yzcp2_gg_.__selected_yzcp2_gg_{background:var(--intergalactic-control-secondary-info, rgba(0, 81, 255, 0.039))}@media (color-gamut:p3){.___SPills_yzcp2_gg_ .___SPill_yzcp2_gg_.__selected_yzcp2_gg_{background:var(--intergalactic-control-secondary-info, color(display-p3 0.12567 0.31309 0.96324 / 0.039))}}}.___SPills_yzcp2_gg_ .___SPill_yzcp2_gg_.__selected_yzcp2_gg_,.___SPills_yzcp2_gg_ .___SPill_yzcp2_gg_:focus-visible{z-index:3}.___SPills_yzcp2_gg_ .___SPill_yzcp2_gg_:active{z-index:2}@media (hover:hover){.___SPills_yzcp2_gg_ .___SPill_yzcp2_gg_:hover{z-index:2}}.___SPill_yzcp2_gg_{display:inline-flex;align-items:center;justify-content:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;background:var(--intergalactic-bg-primary-neutral, rgb(255, 255, 255));border:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161));border-radius:var(--intergalactic-control-rounded, 6px)}@supports (color:color(display-p3 0 0 0%)){.___SPill_yzcp2_gg_{border:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___SPill_yzcp2_gg_{border:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___SPill_yzcp2_gg_::-moz-focus-inner{border:0;padding:0}.___SPill_yzcp2_gg_:active{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPill_yzcp2_gg_:hover{background:var(--intergalactic-bg-primary-neutral-hover, rgb(248, 249, 248))}}.___SPill_yzcp2_gg_.__disabled_yzcp2_gg_{cursor:default;pointer-events:none}.___SPill_yzcp2_gg_.__disabled_yzcp2_gg_>*{opacity:var(--intergalactic-disabled-opacity, 0.4)}.___SText_yzcp2_gg_{color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));display:inline-flex}.___SAddon_yzcp2_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));display:inline-flex;align-items:center;justify-content:center}@supports (color:color(display-p3 0 0 0%)){.___SAddon_yzcp2_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SAddon_yzcp2_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SPill_yzcp2_gg_._size_m_yzcp2_gg_{height:var(--intergalactic-form-control-m, 28px);min-width:var(--intergalactic-form-control-m, 28px);font-size:var(--intergalactic-fs-200, 14px)}.___SPill_yzcp2_gg_._size_l_yzcp2_gg_ .___SText_yzcp2_gg_,.___SPill_yzcp2_gg_._size_m_yzcp2_gg_ .___SText_yzcp2_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_yzcp2_gg_._size_m_yzcp2_gg_ .___SAddon_yzcp2_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SPill_yzcp2_gg_._size_m_yzcp2_gg_ .___SAddon_yzcp2_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_yzcp2_gg_._size_m_yzcp2_gg_ .___SAddon_yzcp2_gg_:only-child{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_yzcp2_gg_._size_l_yzcp2_gg_{height:var(--intergalactic-form-control-l, 40px);min-width:var(--intergalactic-form-control-l, 40px);font-size:var(--intergalactic-fs-300, 16px)}.___SPill_yzcp2_gg_._size_l_yzcp2_gg_ .___SAddon_yzcp2_gg_:only-child,.___SPill_yzcp2_gg_._size_l_yzcp2_gg_ .___SText_yzcp2_gg_:only-child{margin-left:var(--intergalactic-spacing-3x, 12px);margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_yzcp2_gg_._size_l_yzcp2_gg_ .___SAddon_yzcp2_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SPill_yzcp2_gg_._size_l_yzcp2_gg_ .___SAddon_yzcp2_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_yzcp2_gg_._neighborLocation_right_yzcp2_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_yzcp2_gg_._neighborLocation_both_yzcp2_gg_{border-radius:0;margin-left:-1px}.___SPill_yzcp2_gg_._neighborLocation_left_yzcp2_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}", /*__inner_css_end__*/"yzcp2_gg_"),
+const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SPills_167np_gg_{display:inline-flex;align-items:center;justify-content:center;isolation:isolate;border-radius:var(--intergalactic-control-rounded,6px)}.___SPills_167np_gg_ .___SPill_167np_gg_.__selected_167np_gg_{background:var(--intergalactic-control-secondary-info,#0051ff0a);border-color:var(--intergalactic-border-info-active,#8796ef);z-index:3}@supports (color:color(display-p3 0 0 0%)){.___SPills_167np_gg_ .___SPill_167np_gg_.__selected_167np_gg_{background:var(--intergalactic-control-secondary-info,#0051ff0a)}@media (color-gamut:p3){.___SPills_167np_gg_ .___SPill_167np_gg_.__selected_167np_gg_{background:var(--intergalactic-control-secondary-info,color(display-p3 .12567 .31309 .96324/.039))}}}.___SPills_167np_gg_ .___SPill_167np_gg_.__selected_167np_gg_,.___SPills_167np_gg_ .___SPill_167np_gg_:focus-visible{z-index:3}.___SPills_167np_gg_ .___SPill_167np_gg_:active{z-index:2}@media (hover:hover){.___SPills_167np_gg_ .___SPill_167np_gg_:hover{z-index:2}}.___SPill_167np_gg_{display:inline-flex;align-items:center;justify-content:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;background:var(--intergalactic-bg-primary-neutral,#fff);border:1px solid var(--intergalactic-border-primary,#000c0829);border-radius:var(--intergalactic-control-rounded,6px)}@supports (color:color(display-p3 0 0 0%)){.___SPill_167np_gg_{border:1px solid var(--intergalactic-border-primary,#000c0829)}@media (color-gamut:p3){.___SPill_167np_gg_{border:1px solid var(--intergalactic-border-primary,color(display-p3 .00798 .04498 .03219/.161))}}}.___SPill_167np_gg_::-moz-focus-inner{border:none;padding:0}.___SPill_167np_gg_:active{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPill_167np_gg_:hover{background:var(--intergalactic-bg-primary-neutral-hover,#f8f9f8)}}.___SPill_167np_gg_.__disabled_167np_gg_{cursor:default;pointer-events:none}.___SPill_167np_gg_.__disabled_167np_gg_>*{opacity:var(--intergalactic-disabled-opacity,.4)}.___SText_167np_gg_{color:var(--intergalactic-text-primary,#010500e5);display:inline-flex}.___SAddon_167np_gg_{color:var(--intergalactic-text-secondary,#00030095);display:inline-flex;align-items:center;justify-content:center}@supports (color:color(display-p3 0 0 0%)){.___SAddon_167np_gg_{color:var(--intergalactic-text-secondary,#00030095)}@media (color-gamut:p3){.___SAddon_167np_gg_{color:var(--intergalactic-text-secondary,color(display-p3 .00228 .01289 .00252/.583))}}}.___SPill_167np_gg_._size_m_167np_gg_{height:var(--intergalactic-form-control-m,28px);min-width:var(--intergalactic-form-control-m,28px);font-size:var(--intergalactic-fs-200,14px)}.___SPill_167np_gg_._size_m_167np_gg_ .___SText_167np_gg_{margin-left:var(--intergalactic-spacing-2x,8px);margin-right:var(--intergalactic-spacing-2x,8px)}.___SPill_167np_gg_._size_m_167np_gg_ .___SAddon_167np_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x,8px)}.___SPill_167np_gg_._size_m_167np_gg_ .___SAddon_167np_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x,8px)}.___SPill_167np_gg_._size_m_167np_gg_ .___SAddon_167np_gg_:only-child{margin-left:var(--intergalactic-spacing-2x,8px);margin-right:var(--intergalactic-spacing-2x,8px)}.___SPill_167np_gg_._size_l_167np_gg_{height:var(--intergalactic-form-control-l,40px);min-width:var(--intergalactic-form-control-l,40px);font-size:var(--intergalactic-fs-300,16px)}.___SPill_167np_gg_._size_l_167np_gg_ .___SText_167np_gg_{margin-left:var(--intergalactic-spacing-2x,8px);margin-right:var(--intergalactic-spacing-2x,8px)}.___SPill_167np_gg_._size_l_167np_gg_ .___SText_167np_gg_:only-child{margin-left:var(--intergalactic-spacing-3x,12px);margin-right:var(--intergalactic-spacing-3x,12px)}.___SPill_167np_gg_._size_l_167np_gg_ .___SAddon_167np_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-3x,12px)}.___SPill_167np_gg_._size_l_167np_gg_ .___SAddon_167np_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-3x,12px)}.___SPill_167np_gg_._size_l_167np_gg_ .___SAddon_167np_gg_:only-child{margin-left:var(--intergalactic-spacing-3x,12px);margin-right:var(--intergalactic-spacing-3x,12px)}.___SPill_167np_gg_._neighborLocation_right_167np_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_167np_gg_._neighborLocation_both_167np_gg_{border-radius:0;margin-left:-1px}.___SPill_167np_gg_._neighborLocation_left_167np_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}", /*__inner_css_end__*/"167np_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SText": "___SText_yzcp2_gg_",
-  "__SAddon": "___SAddon_yzcp2_gg_",
-  "__SPill": "___SPill_yzcp2_gg_",
-  "_neighborLocation_right": "_neighborLocation_right_yzcp2_gg_",
-  "_neighborLocation_both": "_neighborLocation_both_yzcp2_gg_",
-  "_neighborLocation_left": "_neighborLocation_left_yzcp2_gg_",
-  "__SPills": "___SPills_yzcp2_gg_",
-  "_selected": "__selected_yzcp2_gg_",
-  "_disabled": "__disabled_yzcp2_gg_",
-  "_size_m": "_size_m_yzcp2_gg_",
-  "_size_l": "_size_l_yzcp2_gg_"
+  "__SText": "___SText_167np_gg_",
+  "__SAddon": "___SAddon_167np_gg_",
+  "__SPill": "___SPill_167np_gg_",
+  "_neighborLocation_right": "_neighborLocation_right_167np_gg_",
+  "_neighborLocation_both": "_neighborLocation_both_167np_gg_",
+  "_neighborLocation_left": "_neighborLocation_left_167np_gg_",
+  "__SPills": "___SPills_167np_gg_",
+  "_selected": "__selected_167np_gg_",
+  "_disabled": "__disabled_167np_gg_",
+  "_size_m": "_size_m_167np_gg_",
+  "_size_l": "_size_l_167np_gg_"
 });
 class RootPills extends Component {
   constructor(...args) {
@@ -41,7 +41,7 @@ class RootPills extends Component {
   }
   uncontrolledProps() {
     return {
-      value: (value, e) => value
+      value: null
     };
   }
   getItemProps(props, index) {
@@ -166,6 +166,12 @@ function Addon(props) {
   }));
 }
 export const wrapPills = wrapper => wrapper;
+/**
+ * Pills
+ *
+ * {@link https://developer.semrush.com/intergalactic/components/pills/pills-api/|API} | {@link https://developer.semrush.com/intergalactic/components/pills/pills-code/|Examples}
+ */
 const Pills = createComponent(RootPills, {
   Item: [Pill, {
     Text,

package/lib/es6/Pills.js.map CHANGED Viewed

	@@ -1 +1 @@
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 } from '@semcore/core';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\nimport React from 'react';\n\nimport type { NSPills } from './Pills.type';\nimport style from './style/pills.shadow.css';\n\nclass RootPills extends Component<\n Intergalactic.InternalTypings.InferComponentProps<NSPills.Component>,\n typeof RootPills.enhance,\n NSPills.Handlers\n> {\n static displayName = 'Pills';\n static style = style;\n static defaultProps = ({ behavior }: NSPills.Props) => ({\n size: 'm',\n defaultValue: null,\n behavior: behavior ?? 'auto',\n });\n\n itemValues: Array<NSPills.Pill.Props['value']> = [];\n\n static enhance = [a11yEnhance({\n onNeighborChange: (neighborElement, props) => {\n if (neighborElement) {\n neighborElement.focus();\n if (props.behavior === 'auto') {\n neighborElement.click();\n }\n }\n },\n childSelector: (props) => {\n const selector = props.behavior === 'auto' ? ['role', 'radio'] : ['role', 'tab'];\n\n return selector as [string, string];\n },\n })] as const;\n\n uncontrolledProps() {\n return {\n value: (value: NSPills.Pill.Props['value'], e: React.SyntheticEvent) => value,\n };\n }\n\n bindHandlerClick = (value: NSPills.Pill.Props['value']) => (e: React.MouseEvent) => {\n this.handlers.value(value, e);\n };\n\n bindHandleKeyDown = (value: NSPills.Pill.Props['value']) => (e: React.KeyboardEvent) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n this.handlers.value(value, e);\n }\n };\n\n getItemProps(props: NSPills.Pill.Props, index: number) {\n const { value, size, disabled, behavior } = this.asProps;\n const isSelected = value === props.value;\n\n this.itemValues[index] = props.value;\n\n return {\n index: index,\n size,\n disabled,\n selected: isSelected,\n behavior,\n tabIndex: isSelected ? 0 : -1,\n onClick: this.bindHandlerClick(props.value),\n onKeyDown: this.bindHandleKeyDown(props.value),\n };\n }\n\n render() {\n const SPills = Root;\n const { Children, styles, controlsLength, disabled, behavior, value } = this.asProps;\n\n return sstyled(styles)(\n <SPills\n render={Box}\n role={behavior === 'auto' ? 'radiogroup' : 'tablist'}\n aria-disabled={disabled}\n use:tabIndex={value !== null ? -1 : 0}\n >\n <NeighborLocation controlsLength={controlsLength}>\n <Children />\n </NeighborLocation>\n </SPills>,\n );\n }\n}\n\nfunction Pill(props: Intergalactic.InternalTypings.InferChildComponentProps<NSPills.Pill.Component, typeof RootPills, 'Item'>) {\n const SPill = Root;\n const { Children, styles, addonLeft, addonRight, selected, disabled, index, behavior } = props;\n const neighborLocation = useNeighborLocationDetect(index);\n\n const roleAreaProps = {\n 'role': behavior === 'auto' ? 'radio' : 'tab',\n 'aria-checked': behavior === 'auto' ? selected : undefined,\n 'aria-selected': behavior !== 'auto' ? selected : undefined,\n };\n\n return sstyled(styles)(\n <SPill\n render={Box}\n tag='button'\n type='button'\n tabIndex={0}\n neighborLocation={neighborLocation}\n aria-disabled={disabled}\n {...roleAreaProps}\n >\n {addonLeft ? <Pills.Item.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, Pills.Item.Text, Pills.Item.Addon)}\n {addonRight ? <Pills.Item.Addon tag={addonRight} /> : null}\n </SPill>,\n );\n}\n\nfunction Text(props: Intergalactic.InternalTypings.InferComponentProps<NSPills.Pill.Text.Component>) {\n const SText = Root;\n return sstyled(props.styles)(<SText render={Box} tag='span' />);\n}\n\nfunction Addon(props: Intergalactic.InternalTypings.InferComponentProps<NSPills.Pill.Addon.Component>) {\n const SAddon = Root;\n return sstyled(props.styles)(<SAddon render={Box} tag='span' />);\n}\n\nexport const wrapPills = <PropsExtending extends {}>(wrapper: (\n props: Intergalactic.InternalTypings.UntypeRefAndTag<\n Intergalactic.InternalTypings.ComponentPropsNesting<NSPills.WrapComponent>\n > &\n PropsExtending,\n) => React.ReactNode) => wrapper as NSPills.WrapComponent<PropsExtending>;\n\nconst Pills = createComponent(RootPills, {\n Item: [Pill, { Text, Addon }],\n}) as unknown as NSPills.Component;\n\nexport default Pills;\n"],"mappings":";;;;;;AAAA,SAASA,gBAAgB,EAAEC,GAAG,EAAEC,yBAAyB,QAAQ,0BAA0B;AAE3F,SAASC,eAAe,EAAEC,SAAS,EAAEC,OAAO,EAAEC,IAAI,QAAQ,eAAe;AACzE,OAAOC,iBAAiB,MAAM,2CAA2C;AACzE,OAAOC,WAAW,MAAM,8CAA8C;AACtE,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA,MAAAC,KAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAK1B,MAAMC,SAAS,SAAST,SAAS,CAI/B;EAAAU,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,qBASiD,EAAE;IAAAA,eAAA,2BAwB/BC,KAAkC,IAAMC,CAAmB,IAAK;MAClF,IAAI,CAACC,QAAQ,CAACF,KAAK,CAACA,KAAK,EAAEC,CAAC,CAAC;IAC/B,CAAC;IAAAF,eAAA,4BAEoBC,KAAkC,IAAMC,CAAsB,IAAK;MACtF,IAAIA,CAAC,CAACE,GAAG,KAAK,OAAO,IAAIF,CAAC,CAACE,GAAG,KAAK,GAAG,EAAE;QACtCF,CAAC,CAACG,cAAc,CAAC,CAAC;QAClB,IAAI,CAACF,QAAQ,CAACF,KAAK,CAACA,KAAK,EAAEC,CAAC,CAAC;MAC/B;IACF,CAAC;EAAA;EAfDI,iBAAiBA,CAAA,EAAG;IAClB,OAAO;MACLL,KAAK,EAAEA,CAACA,KAAkC,EAAEC,CAAuB,KAAKD;IAC1E,CAAC;EACH;EAaAM,YAAYA,CAACC,KAAyB,EAAEC,KAAa,EAAE;IACrD,MAAM;MAAER,KAAK;MAAES,IAAI;MAAEC,QAAQ;MAAEC;IAAS,CAAC,GAAG,IAAI,CAACC,OAAO;IACxD,MAAMC,UAAU,GAAGb,KAAK,KAAKO,KAAK,CAACP,KAAK;IAExC,IAAI,CAACc,UAAU,CAACN,KAAK,CAAC,GAAGD,KAAK,CAACP,KAAK;IAEpC,OAAO;MACLQ,KAAK,EAAEA,KAAK;MACZC,IAAI;MACJC,QAAQ;MACRK,QAAQ,EAAEF,UAAU;MACpBF,QAAQ;MACRK,QAAQ,EAAEH,UAAU,GAAG,CAAC,GAAG,CAAC,CAAC;MAC7BI,OAAO,EAAE,IAAI,CAACC,gBAAgB,CAACX,KAAK,CAACP,KAAK,CAAC;MAC3CmB,SAAS,EAAE,IAAI,CAACC,iBAAiB,CAACb,KAAK,CAACP,KAAK;IAC/C,CAAC;EACH;EAEAqB,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAV,OAAA;MAAAW,KAAA;IACP,MAAMC,MAAM,GAKAxC,GAAG;IAJf,MAAM;MAAEyC,QAAQ;MAAEC,MAAM;MAAEC,cAAc;MAAEjB,QAAQ;MAAEC,QAAQ;MAAEX;IAAM,CAAC,GAAG,IAAI,CAACY,OAAO;IAEpF,OAAAW,KAAA,GAAOnC,OAAO,CAACsC,MAAM,CAAC,eACpBlC,KAAA,CAAAoC,aAAA,CAACJ,MAAM,EAAAD,KAAA,CAAAM,EAAA;MAAA,GAAAC,YAAA;QAAA,QAECnB,QAAQ,KAAK,MAAM,GAAG,YAAY,GAAG,SAAS;QAAA,iBACrCD,QAAQ;QAAA,gBACTV,KAAK,KAAK,IAAI,GAAG,CAAC,CAAC,GAAG;MAAC,GAAAsB,IAAA;IAAA,iBAErC9B,KAAA,CAAAoC,aAAA,CAAC7C,gBAAgB,EAAAwC,KAAA,CAAAM,EAAA;MAAA,kBAAiBF;IAAc,iBAC9CnC,KAAA,CAAAoC,aAAA,CAACH,QAAQ,EAAAF,KAAA,CAAAM,EAAA,gBAAE,CACK,CACZ,CAAC;EAEb;AACF;AAAC9B,eAAA,CAnFKH,SAAS,iBAKQ,OAAO;AAAAG,eAAA,CALxBH,SAAS,WAMEH,KAAK;AAAAM,eAAA,CANhBH,SAAS,kBAOS,CAAC;EAAEe;AAAwB,CAAC,MAAM;EACtDF,IAAI,EAAE,GAAG;EACTsB,YAAY,EAAE,IAAI;EAClBpB,QAAQ,EAAEA,QAAQ,IAAI;AACxB,CAAC,CAAC;AAAAZ,eAAA,CAXEH,SAAS,aAeI,CAACL,WAAW,CAAC;EAC5ByC,gBAAgB,EAAEA,CAACC,eAAe,EAAE1B,KAAK,KAAK;IAC5C,IAAI0B,eAAe,EAAE;MACnBA,eAAe,CAACC,KAAK,CAAC,CAAC;MACvB,IAAI3B,KAAK,CAACI,QAAQ,KAAK,MAAM,EAAE;QAC7BsB,eAAe,CAACE,KAAK,CAAC,CAAC;MACzB;IACF;EACF,CAAC;EACDC,aAAa,EAAG7B,KAAK,IAAK;IACxB,MAAM8B,QAAQ,GAAG9B,KAAK,CAACI,QAAQ,KAAK,MAAM,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC;IAEhF,OAAO0B,QAAQ;EACjB;AACF,CAAC,CAAC,CAAC;AAwDL,SAASC,IAAIA,CAAC/B,KAA+G,EAAE;EAAA,IAAAgC,KAAA,GAAAC,YAAA;IAAAC,KAAA;EAC7H,MAAMC,KAAK,GAYC1D,GAAG;EAXf,MAAM;IAAEyC,QAAQ;IAAEC,MAAM;IAAEiB,SAAS;IAAEC,UAAU;IAAE7B,QAAQ;IAAEL,QAAQ;IAAEF,KAAK;IAAEG;EAAS,CAAC,GAAGJ,KAAK;EAC9F,MAAMsC,gBAAgB,GAAG5D,yBAAyB,CAACuB,KAAK,CAAC;EAEzD,MAAMsC,aAAa,GAAG;IACpB,MAAM,EAAEnC,QAAQ,KAAK,MAAM,GAAG,OAAO,GAAG,KAAK;IAC7C,cAAc,EAAEA,QAAQ,KAAK,MAAM,GAAGI,QAAQ,GAAGgC,SAAS;IAC1D,eAAe,EAAEpC,QAAQ,KAAK,MAAM,GAAGI,QAAQ,GAAGgC;EACpD,CAAC;EAED,OAAAN,KAAA,GAAOrD,OAAO,CAACsC,MAAM,CAAC,eACpBlC,KAAA,CAAAoC,aAAA,CAACc,KAAK,EAAAD,KAAA,CAAAZ,EAAA;IAAA,GAAAmB,aAAA;MAAA,OAEA,QAAQ;MAAA,QACP,QAAQ;MAAA,YACH,CAAC;MAAA,oBACOH,gBAAgB;MAAA,iBACnBnC,QAAQ;MAAA,GACnBoC;IAAa,GAAAP,KAAA;EAAA,IAEhBI,SAAS,gBAAGnD,KAAA,CAAAoC,aAAA,CAACqB,KAAK,CAACC,IAAI,CAACC,KAAK;IAACC,GAAG,EAAET;EAAU,CAAE,CAAC,GAAG,IAAI,EACvDrD,iBAAiB,CAACmC,QAAQ,EAAEwB,KAAK,CAACC,IAAI,CAACG,IAAI,EAAEJ,KAAK,CAACC,IAAI,CAACC,KAAK,CAAC,EAC9DP,UAAU,gBAAGpD,KAAA,CAAAoC,aAAA,CAACqB,KAAK,CAACC,IAAI,CAACC,KAAK;IAACC,GAAG,EAAER;EAAW,CAAE,CAAC,GAAG,IACjD,CAAC;AAEZ;AAEA,SAASS,IAAIA,CAAC9C,KAAqF,EAAE;EAAA,IAAA+C,KAAA,GAAAd,YAAA;IAAAe,KAAA;EACnG,MAAMC,KAAK,GACiCxE,GAAG;EAA/C,OAAAuE,KAAA,GAAOnE,OAAO,CAACmB,KAAK,CAACmB,MAAM,CAAC,eAAClC,KAAA,CAAAoC,aAAA,CAAC4B,KAAK,EAAAD,KAAA,CAAA1B,EAAA;IAAA,GAAA4B,aAAA;MAAA,OAAkB;IAAM,GAAAH,KAAA;EAAA,EAAE,CAAC;AAChE;AAEA,SAASH,KAAKA,CAAC5C,KAAsF,EAAE;EAAA,IAAAmD,KAAA,GAAAlB,YAAA;IAAAmB,KAAA;EACrG,MAAMC,MAAM,GACiC5E,GAAG;EAAhD,OAAA2E,KAAA,GAAOvE,OAAO,CAACmB,KAAK,CAACmB,MAAM,CAAC,eAAClC,KAAA,CAAAoC,aAAA,CAACgC,MAAM,EAAAD,KAAA,CAAA9B,EAAA;IAAA,GAAAgC,aAAA;MAAA,OAAkB;IAAM,GAAAH,KAAA;EAAA,EAAE,CAAC;AACjE;AAEA,OAAO,MAAMI,SAAS,GAA+BC,OAKjC,IAAKA,OAAgD;AAEzE,MAAMd,KAAK,GAAG/D,eAAe,CAACU,SAAS,EAAE;EACvCsD,IAAI,EAAE,CAACZ,IAAI,EAAE;IAAEe,IAAI;IAAEF;EAAM,CAAC;AAC9B,CAAC,CAAiC;AAElC,eAAeF,KAAK","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 } 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":[]}

package/lib/es6/Pills.type.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Pills.type.js","names":[],"sources":["../../src/Pills.type.ts"],"sourcesContent":["import type { Box, BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type React from 'react';\n\ndeclare namespace NSPills {\n // TODO: It looks like the value isn't accurate. Revise and align it with the component's logic.\n type Value = string \| number \| boolean \| null;\n type Props<T extends NSPills.Value = NSPills.Value> = NeighborLocationProps & BoxProps & {\n /** Pills size /\n size?: 'l' \| 'm';\n /* Disabled state /\n disabled?: boolean;\n /* Called when the selection is changed /\n onChange?:\n \| ((value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void)\n \| React.Dispatch<React.SetStateAction<T>>;\n /* Value for the selected pill /\n value?: T;\n /* Default value for the selected pill /\n defaultValue?: T;\n /* Sets semantic role for corresponding behavior,\n * when set to `auto` pressing left and right arrows\n * selects corresponding sibling pill.\n \n It's recommended to use `auto` behavior in forms\n * while `manual` behavior for navigation and layout.\n * @default tabs\n /\n behavior?:\n \| 'auto'\n \| 'manual';\n };\n type Ctx = {\n getItemProps: PropGetterFn;\n };\n type Handlers = {\n value: ~~(value~~: ~~Props[~~'~~value~~'], ~~event~~: ~~React.SyntheticEvent) =>~~ Props['~~value~~'];\n };\n namespace Pill {\n type Props = BoxProps & NeighborItemProps & {\n /* Pill value /\n value?: NSPills.Value;\n /* Disabled state /\n disabled?: boolean;\n /* Selected state /\n selected?: boolean;\n /* Left addon text /\n addonLeft?: React.ElementType;\n /* Right addon tag /\n addonRight?: React.ElementType;\n };\n namespace Text {\n type Component = typeof Box;\n }\n namespace Addon {\n type Component = typeof Box;\n }\n\n type Component = Intergalactic.Component<'button', Props, [handlers: Handlers]>;\n }\n\n type WrapComponent<PropsExtending = {}> = (<\n V extends Value,\n Tag extends Intergalactic.Tag = 'div',\n >(\n props: Intergalactic.InternalTypings.ComponentProps<\n Tag,\n 'div',\n Props<V>,\n Ctx,\n [handlers: Handlers]\n > &\n PropsExtending,\n ) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', Props>;\n\n type Component = WrapComponent & {\n Item: Pill.Component & {\n Text: Pill.Text.Component;\n Addon: Pill.Addon.Component;\n };\n };\n}\n\n/* @deprecated It will be removed in v18. /\nexport type PillsValue = NSPills.Value;\n/* @deprecated It will be removed in v18. /\nexport type PillsProps<T extends PillsValue = PillsValue> = NSPills.Props<T>;\n/* @deprecated It will be removed in v18. /\nexport type PillProps = NSPills.Pill.Props;\n/* @deprecated It will be removed in v18. /\nexport type PillsContext = NSPills.Ctx;\n/* @deprecated It will be removed in v18. */\nexport type PillsHandlers = NSPills.Handlers;\n\nexport type { NSPills };\n"],"mappings":"","ignoreList":[]}
1	+ {"version":3,"file":"Pills.type.js","names":[],"sources":["../../src/Pills.type.ts"],"sourcesContent":["import type { Box, BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type React from 'react';\n\ndeclare namespace NSPills {\n // TODO: It looks like the value isn't accurate. Revise and align it with the component's logic.\n type Value = string \| number \| boolean \| null;\n type Props<T extends NSPills.Value = NSPills.Value> = NeighborLocationProps & BoxProps & {\n /** Pills size /\n size?: 'l' \| 'm';\n /* Disabled state /\n disabled?: boolean;\n /* Called when the selection is changed /\n onChange?:\n \| ((value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void)\n \| React.Dispatch<React.SetStateAction<T>>;\n /* Value for the selected pill /\n value?: T;\n /* Default value for the selected pill /\n defaultValue?: T;\n /* Sets semantic role for corresponding behavior,\n * when set to `auto` pressing left and right arrows\n * selects corresponding sibling pill.\n \n It's recommended to use `auto` behavior in forms\n * while `manual` behavior for navigation and layout.\n * @default tabs\n /\n behavior?:\n \| 'auto'\n \| 'manual';\n };\n type Ctx = {\n getItemProps: PropGetterFn;\n };\n type Handlers = {\n value: null;\n };\n type DefaultProps = {\n size: 'm';\n defaultValue: null;\n behavior: Props['behavior'];\n };\n namespace Pill {\n type Props = BoxProps & NeighborItemProps & {\n /* Pill value /\n value?: NSPills.Value;\n /* Disabled state /\n disabled?: boolean;\n /* Selected state /\n selected?: boolean;\n /* Left addon text /\n addonLeft?: React.ElementType;\n /* Right addon tag /\n addonRight?: React.ElementType;\n };\n namespace Text {\n type Component = typeof Box;\n }\n namespace Addon {\n type Component = typeof Box;\n }\n\n type Component = Intergalactic.Component<'button', Props, [handlers: Handlers]>;\n }\n\n type WrapComponent<PropsExtending = {}> = (<\n V extends Value,\n Tag extends Intergalactic.Tag = 'div',\n >(\n props: Intergalactic.InternalTypings.ComponentProps<\n Tag,\n 'div',\n Props<V>,\n Ctx,\n [handlers: Handlers]\n > &\n PropsExtending,\n ) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', Props>;\n\n type Component = WrapComponent & {\n Item: Pill.Component & {\n Text: Pill.Text.Component;\n Addon: Pill.Addon.Component;\n };\n };\n}\n\n/* @deprecated It will be removed in v18. /\nexport type PillsValue = NSPills.Value;\n/* @deprecated It will be removed in v18. /\nexport type PillsProps<T extends PillsValue = PillsValue> = NSPills.Props<T>;\n/* @deprecated It will be removed in v18. /\nexport type PillProps = NSPills.Pill.Props;\n/* @deprecated It will be removed in v18. /\nexport type PillsContext = NSPills.Ctx;\n/* @deprecated It will be removed in v18. */\nexport type PillsHandlers = NSPills.Handlers;\n\nexport type { NSPills };\n"],"mappings":"","ignoreList":[]}

package/lib/esm/Pills.mjs CHANGED Viewed

@@ -1,4 +1,4 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { sstyled, Component, assignProps, createComponent } from "@semcore/core";
 import { Box, NeighborLocation, useNeighborLocationDetect } from "@semcore/base-components";
 import addonTextChildren from "@semcore/core/lib/utils/addonTextChildren";
@@ -9,22 +9,22 @@ const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SPills_yzcp2_gg_{display:inline-flex;align-items:center;justify-content:center;isolation:isolate;border-radius:var(--intergalactic-control-rounded, 6px)}.___SPills_yzcp2_gg_ .___SPill_yzcp2_gg_.__selected_yzcp2_gg_{background:var(--intergalactic-control-secondary-info, rgba(0, 81, 255, 0.039));border-color:var(--intergalactic-border-info-active, rgb(135, 150, 239));z-index:3}@supports (color:color(display-p3 0 0 0%)){.___SPills_yzcp2_gg_ .___SPill_yzcp2_gg_.__selected_yzcp2_gg_{background:var(--intergalactic-control-secondary-info, rgba(0, 81, 255, 0.039))}@media (color-gamut:p3){.___SPills_yzcp2_gg_ .___SPill_yzcp2_gg_.__selected_yzcp2_gg_{background:var(--intergalactic-control-secondary-info, color(display-p3 0.12567 0.31309 0.96324 / 0.039))}}}.___SPills_yzcp2_gg_ .___SPill_yzcp2_gg_.__selected_yzcp2_gg_,.___SPills_yzcp2_gg_ .___SPill_yzcp2_gg_:focus-visible{z-index:3}.___SPills_yzcp2_gg_ .___SPill_yzcp2_gg_:active{z-index:2}@media (hover:hover){.___SPills_yzcp2_gg_ .___SPill_yzcp2_gg_:hover{z-index:2}}.___SPill_yzcp2_gg_{display:inline-flex;align-items:center;justify-content:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;background:var(--intergalactic-bg-primary-neutral, rgb(255, 255, 255));border:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161));border-radius:var(--intergalactic-control-rounded, 6px)}@supports (color:color(display-p3 0 0 0%)){.___SPill_yzcp2_gg_{border:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___SPill_yzcp2_gg_{border:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___SPill_yzcp2_gg_::-moz-focus-inner{border:0;padding:0}.___SPill_yzcp2_gg_:active{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPill_yzcp2_gg_:hover{background:var(--intergalactic-bg-primary-neutral-hover, rgb(248, 249, 248))}}.___SPill_yzcp2_gg_.__disabled_yzcp2_gg_{cursor:default;pointer-events:none}.___SPill_yzcp2_gg_.__disabled_yzcp2_gg_>*{opacity:var(--intergalactic-disabled-opacity, 0.4)}.___SText_yzcp2_gg_{color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));display:inline-flex}.___SAddon_yzcp2_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));display:inline-flex;align-items:center;justify-content:center}@supports (color:color(display-p3 0 0 0%)){.___SAddon_yzcp2_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SAddon_yzcp2_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SPill_yzcp2_gg_._size_m_yzcp2_gg_{height:var(--intergalactic-form-control-m, 28px);min-width:var(--intergalactic-form-control-m, 28px);font-size:var(--intergalactic-fs-200, 14px)}.___SPill_yzcp2_gg_._size_l_yzcp2_gg_ .___SText_yzcp2_gg_,.___SPill_yzcp2_gg_._size_m_yzcp2_gg_ .___SText_yzcp2_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_yzcp2_gg_._size_m_yzcp2_gg_ .___SAddon_yzcp2_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SPill_yzcp2_gg_._size_m_yzcp2_gg_ .___SAddon_yzcp2_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_yzcp2_gg_._size_m_yzcp2_gg_ .___SAddon_yzcp2_gg_:only-child{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_yzcp2_gg_._size_l_yzcp2_gg_{height:var(--intergalactic-form-control-l, 40px);min-width:var(--intergalactic-form-control-l, 40px);font-size:var(--intergalactic-fs-300, 16px)}.___SPill_yzcp2_gg_._size_l_yzcp2_gg_ .___SAddon_yzcp2_gg_:only-child,.___SPill_yzcp2_gg_._size_l_yzcp2_gg_ .___SText_yzcp2_gg_:only-child{margin-left:var(--intergalactic-spacing-3x, 12px);margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_yzcp2_gg_._size_l_yzcp2_gg_ .___SAddon_yzcp2_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SPill_yzcp2_gg_._size_l_yzcp2_gg_ .___SAddon_yzcp2_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_yzcp2_gg_._neighborLocation_right_yzcp2_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_yzcp2_gg_._neighborLocation_both_yzcp2_gg_{border-radius:0;margin-left:-1px}.___SPill_yzcp2_gg_._neighborLocation_left_yzcp2_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}",
+    ".___SPills_167np_gg_{display:inline-flex;align-items:center;justify-content:center;isolation:isolate;border-radius:var(--intergalactic-control-rounded,6px)}.___SPills_167np_gg_ .___SPill_167np_gg_.__selected_167np_gg_{background:var(--intergalactic-control-secondary-info,#0051ff0a);border-color:var(--intergalactic-border-info-active,#8796ef);z-index:3}@supports (color:color(display-p3 0 0 0%)){.___SPills_167np_gg_ .___SPill_167np_gg_.__selected_167np_gg_{background:var(--intergalactic-control-secondary-info,#0051ff0a)}@media (color-gamut:p3){.___SPills_167np_gg_ .___SPill_167np_gg_.__selected_167np_gg_{background:var(--intergalactic-control-secondary-info,color(display-p3 .12567 .31309 .96324/.039))}}}.___SPills_167np_gg_ .___SPill_167np_gg_.__selected_167np_gg_,.___SPills_167np_gg_ .___SPill_167np_gg_:focus-visible{z-index:3}.___SPills_167np_gg_ .___SPill_167np_gg_:active{z-index:2}@media (hover:hover){.___SPills_167np_gg_ .___SPill_167np_gg_:hover{z-index:2}}.___SPill_167np_gg_{display:inline-flex;align-items:center;justify-content:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;background:var(--intergalactic-bg-primary-neutral,#fff);border:1px solid var(--intergalactic-border-primary,#000c0829);border-radius:var(--intergalactic-control-rounded,6px)}@supports (color:color(display-p3 0 0 0%)){.___SPill_167np_gg_{border:1px solid var(--intergalactic-border-primary,#000c0829)}@media (color-gamut:p3){.___SPill_167np_gg_{border:1px solid var(--intergalactic-border-primary,color(display-p3 .00798 .04498 .03219/.161))}}}.___SPill_167np_gg_::-moz-focus-inner{border:none;padding:0}.___SPill_167np_gg_:active{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPill_167np_gg_:hover{background:var(--intergalactic-bg-primary-neutral-hover,#f8f9f8)}}.___SPill_167np_gg_.__disabled_167np_gg_{cursor:default;pointer-events:none}.___SPill_167np_gg_.__disabled_167np_gg_>*{opacity:var(--intergalactic-disabled-opacity,.4)}.___SText_167np_gg_{color:var(--intergalactic-text-primary,#010500e5);display:inline-flex}.___SAddon_167np_gg_{color:var(--intergalactic-text-secondary,#00030095);display:inline-flex;align-items:center;justify-content:center}@supports (color:color(display-p3 0 0 0%)){.___SAddon_167np_gg_{color:var(--intergalactic-text-secondary,#00030095)}@media (color-gamut:p3){.___SAddon_167np_gg_{color:var(--intergalactic-text-secondary,color(display-p3 .00228 .01289 .00252/.583))}}}.___SPill_167np_gg_._size_m_167np_gg_{height:var(--intergalactic-form-control-m,28px);min-width:var(--intergalactic-form-control-m,28px);font-size:var(--intergalactic-fs-200,14px)}.___SPill_167np_gg_._size_m_167np_gg_ .___SText_167np_gg_{margin-left:var(--intergalactic-spacing-2x,8px);margin-right:var(--intergalactic-spacing-2x,8px)}.___SPill_167np_gg_._size_m_167np_gg_ .___SAddon_167np_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x,8px)}.___SPill_167np_gg_._size_m_167np_gg_ .___SAddon_167np_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x,8px)}.___SPill_167np_gg_._size_m_167np_gg_ .___SAddon_167np_gg_:only-child{margin-left:var(--intergalactic-spacing-2x,8px);margin-right:var(--intergalactic-spacing-2x,8px)}.___SPill_167np_gg_._size_l_167np_gg_{height:var(--intergalactic-form-control-l,40px);min-width:var(--intergalactic-form-control-l,40px);font-size:var(--intergalactic-fs-300,16px)}.___SPill_167np_gg_._size_l_167np_gg_ .___SText_167np_gg_{margin-left:var(--intergalactic-spacing-2x,8px);margin-right:var(--intergalactic-spacing-2x,8px)}.___SPill_167np_gg_._size_l_167np_gg_ .___SText_167np_gg_:only-child{margin-left:var(--intergalactic-spacing-3x,12px);margin-right:var(--intergalactic-spacing-3x,12px)}.___SPill_167np_gg_._size_l_167np_gg_ .___SAddon_167np_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-3x,12px)}.___SPill_167np_gg_._size_l_167np_gg_ .___SAddon_167np_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-3x,12px)}.___SPill_167np_gg_._size_l_167np_gg_ .___SAddon_167np_gg_:only-child{margin-left:var(--intergalactic-spacing-3x,12px);margin-right:var(--intergalactic-spacing-3x,12px)}.___SPill_167np_gg_._neighborLocation_right_167np_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_167np_gg_._neighborLocation_both_167np_gg_{border-radius:0;margin-left:-1px}.___SPill_167np_gg_._neighborLocation_left_167np_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}",
     /*__inner_css_end__*/
-    "yzcp2_gg_"
+    "167np_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SText": "___SText_yzcp2_gg_",
-    "__SAddon": "___SAddon_yzcp2_gg_",
-    "__SPill": "___SPill_yzcp2_gg_",
-    "_neighborLocation_right": "_neighborLocation_right_yzcp2_gg_",
-    "_neighborLocation_both": "_neighborLocation_both_yzcp2_gg_",
-    "_neighborLocation_left": "_neighborLocation_left_yzcp2_gg_",
-    "__SPills": "___SPills_yzcp2_gg_",
-    "_selected": "__selected_yzcp2_gg_",
-    "_disabled": "__disabled_yzcp2_gg_",
-    "_size_m": "_size_m_yzcp2_gg_",
-    "_size_l": "_size_l_yzcp2_gg_"
+    "__SText": "___SText_167np_gg_",
+    "__SAddon": "___SAddon_167np_gg_",
+    "__SPill": "___SPill_167np_gg_",
+    "_neighborLocation_right": "_neighborLocation_right_167np_gg_",
+    "_neighborLocation_both": "_neighborLocation_both_167np_gg_",
+    "_neighborLocation_left": "_neighborLocation_left_167np_gg_",
+    "__SPills": "___SPills_167np_gg_",
+    "_selected": "__selected_167np_gg_",
+    "_disabled": "__disabled_167np_gg_",
+    "_size_m": "_size_m_167np_gg_",
+    "_size_l": "_size_l_167np_gg_"
   })
 );
 class RootPills extends Component {
@@ -43,7 +43,7 @@ class RootPills extends Component {
   }
   uncontrolledProps() {
     return {
-      value: (value, e) => value
+      value: null
     };
   }
   getItemProps(props, index) {

package/lib/types/Pills.d.ts CHANGED Viewed

@@ -2,5 +2,10 @@ import type { Intergalactic } from '@semcore/core';
 import React from 'react';
 import type { NSPills } from './Pills.type';
 export declare const wrapPills: <PropsExtending extends {}>(wrapper: (props: Intergalactic.InternalTypings.UntypeRefAndTag<Intergalactic.InternalTypings.ComponentPropsNesting<NSPills.WrapComponent>> & PropsExtending) => React.ReactNode) => NSPills.WrapComponent<PropsExtending>;
+/**
+ * Pills
+ *
+ * {@link https://developer.semrush.com/intergalactic/components/pills/pills-api/|API} | {@link https://developer.semrush.com/intergalactic/components/pills/pills-code/|Examples}
+ */
 declare const Pills: NSPills.Component;
 export default Pills;

package/lib/types/Pills.type.d.ts CHANGED Viewed

@@ -28,7 +28,12 @@ declare namespace NSPills {
         getItemProps: PropGetterFn;
     };
     type Handlers = {
-        value: (value: Props['value'], event: React.SyntheticEvent) => Props['value'];
+        value: null;
+    };
+    type DefaultProps = {
+        size: 'm';
+        defaultValue: null;
+        behavior: Props['behavior'];
     };
     namespace Pill {
         type Props = BoxProps & NeighborItemProps & {

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/pills",
   "description": "Semrush Pills Component",
-  "version": "17.1.0-prerelease.3",
+  "version": "17.2.0-prerelease.3",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,7 +14,7 @@
     "require": "./lib/cjs/index.js"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.0.2"
+    "@semcore/base-components": "^17.2.0"
   },
   "repository": {
     "type": "git",
@@ -22,9 +22,9 @@
     "directory": "semcore/pills"
   },
   "devDependencies": {
-    "@semcore/base-components": "17.0.2-prerelease.3",
-    "@semcore/badge": "17.1.0-prerelease.3",
-    "@semcore/core": "17.1.0-prerelease.3",
+    "@semcore/core": "17.2.0-prerelease.3",
+    "@semcore/base-components": "17.2.0-prerelease.3",
+    "@semcore/badge": "17.2.0-prerelease.3",
     "@semcore/testing-utils": "1.0.0",
     "@semcore/icon": "17.1.0"
   },