@semcore/pills 17.0.1 → 17.0.2-prerelease.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/lib/cjs/Pills.js +12 -12
- package/lib/cjs/Pills.js.map +1 -1
- package/lib/cjs/Pills.type.js.map +1 -1
- package/lib/es6/Pills.js +12 -12
- package/lib/es6/Pills.js.map +1 -1
- package/lib/es6/Pills.type.js.map +1 -1
- package/lib/esm/Pills.mjs +13 -13
- package/lib/types/Pills.d.ts +3 -3
- package/lib/types/Pills.type.d.ts +70 -51
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [17.0.2] - 2026-04-30
|
|
6
|
+
|
|
7
|
+
### Fixed
|
|
8
|
+
|
|
9
|
+
- Deprecated atomic types. Atomic parts are part of `NSPills` namespace.
|
|
10
|
+
|
|
5
11
|
## [17.0.1] - 2026-04-16
|
|
6
12
|
|
|
7
13
|
### Fixed
|
package/lib/cjs/Pills.js
CHANGED
|
@@ -12,20 +12,20 @@ var _addonTextChildren = _interopRequireDefault(require("@semcore/core/lib/utils
|
|
|
12
12
|
var _a11yEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/a11yEnhance"));
|
|
13
13
|
var _react = _interopRequireDefault(require("react"));
|
|
14
14
|
/*!__reshadow-styles__:"./style/pills.shadow.css"*/
|
|
15
|
-
const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".
|
|
15
|
+
const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SPills_1v2no_gg_{display:inline-flex;align-items:center;justify-content:center;isolation:isolate;border-radius:var(--intergalactic-control-rounded, 6px)}.___SPills_1v2no_gg_ .___SPill_1v2no_gg_.__selected_1v2no_gg_{background:var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));border-color:var(--intergalactic-border-info-active, #006dca);z-index:3}.___SPills_1v2no_gg_ .___SPill_1v2no_gg_.__selected_1v2no_gg_,.___SPills_1v2no_gg_ .___SPill_1v2no_gg_:focus-visible{z-index:3}.___SPills_1v2no_gg_ .___SPill_1v2no_gg_:active{z-index:2}@media (hover:hover){.___SPills_1v2no_gg_ .___SPill_1v2no_gg_:hover{z-index:2}}.___SPill_1v2no_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, #ffffff);border:1px solid var(--intergalactic-border-primary, #c4c7cf);border-radius:var(--intergalactic-control-rounded, 6px)}.___SPill_1v2no_gg_::-moz-focus-inner{border:0;padding:0}.___SPill_1v2no_gg_:active{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPill_1v2no_gg_:hover{background:var(--intergalactic-bg-primary-neutral-hover, #f4f5f9)}}.___SPill_1v2no_gg_.__disabled_1v2no_gg_{cursor:default;pointer-events:none}.___SPill_1v2no_gg_.__disabled_1v2no_gg_>*{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SText_1v2no_gg_{color:var(--intergalactic-text-primary, #191b23);display:inline-flex}.___SAddon_1v2no_gg_{color:var(--intergalactic-text-secondary, #6c6e79);display:inline-flex;align-items:center;justify-content:center}.___SPill_1v2no_gg_._size_m_1v2no_gg_{height:var(--intergalactic-form-control-m, 28px);min-width:var(--intergalactic-form-control-m, 28px);font-size:var(--intergalactic-fs-200, 14px)}.___SPill_1v2no_gg_._size_l_1v2no_gg_ .___SText_1v2no_gg_,.___SPill_1v2no_gg_._size_m_1v2no_gg_ .___SText_1v2no_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_1v2no_gg_._size_m_1v2no_gg_ .___SAddon_1v2no_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SPill_1v2no_gg_._size_m_1v2no_gg_ .___SAddon_1v2no_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_1v2no_gg_._size_m_1v2no_gg_ .___SAddon_1v2no_gg_:only-child{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_1v2no_gg_._size_l_1v2no_gg_{height:var(--intergalactic-form-control-l, 40px);min-width:var(--intergalactic-form-control-l, 40px);font-size:var(--intergalactic-fs-300, 16px)}.___SPill_1v2no_gg_._size_l_1v2no_gg_ .___SAddon_1v2no_gg_:only-child,.___SPill_1v2no_gg_._size_l_1v2no_gg_ .___SText_1v2no_gg_:only-child{margin-left:var(--intergalactic-spacing-3x, 12px);margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_1v2no_gg_._size_l_1v2no_gg_ .___SAddon_1v2no_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SPill_1v2no_gg_._size_l_1v2no_gg_ .___SAddon_1v2no_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_1v2no_gg_._neighborLocation_right_1v2no_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_1v2no_gg_._neighborLocation_both_1v2no_gg_{border-radius:0;margin-left:-1px}.___SPill_1v2no_gg_._neighborLocation_left_1v2no_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}", /*__inner_css_end__*/"1v2no_gg_"),
|
|
16
16
|
/*__reshadow_css_end__*/
|
|
17
17
|
{
|
|
18
|
-
"__SText": "
|
|
19
|
-
"__SAddon": "
|
|
20
|
-
"__SPill": "
|
|
21
|
-
"_neighborLocation_right": "
|
|
22
|
-
"_neighborLocation_both": "
|
|
23
|
-
"_neighborLocation_left": "
|
|
24
|
-
"__SPills": "
|
|
25
|
-
"_selected": "
|
|
26
|
-
"_disabled": "
|
|
27
|
-
"_size_m": "
|
|
28
|
-
"_size_l": "
|
|
18
|
+
"__SText": "___SText_1v2no_gg_",
|
|
19
|
+
"__SAddon": "___SAddon_1v2no_gg_",
|
|
20
|
+
"__SPill": "___SPill_1v2no_gg_",
|
|
21
|
+
"_neighborLocation_right": "_neighborLocation_right_1v2no_gg_",
|
|
22
|
+
"_neighborLocation_both": "_neighborLocation_both_1v2no_gg_",
|
|
23
|
+
"_neighborLocation_left": "_neighborLocation_left_1v2no_gg_",
|
|
24
|
+
"__SPills": "___SPills_1v2no_gg_",
|
|
25
|
+
"_selected": "__selected_1v2no_gg_",
|
|
26
|
+
"_disabled": "__disabled_1v2no_gg_",
|
|
27
|
+
"_size_m": "_size_m_1v2no_gg_",
|
|
28
|
+
"_size_l": "_size_l_1v2no_gg_"
|
|
29
29
|
});
|
|
30
30
|
class RootPills extends _core.Component {
|
|
31
31
|
constructor(...args) {
|
package/lib/cjs/Pills.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pills.js","names":["_core","require","_baseComponents","_addonTextChildren","_interopRequireDefault","_a11yEnhance","_react","style","sstyled","insert","RootPills","Component","constructor","args","_defineProperty2","default","value","e","handlers","key","preventDefault","uncontrolledProps","getItemProps","props","index","size","disabled","behavior","asProps","isSelected","itemValues","selected","tabIndex","onClick","bindHandlerClick","onKeyDown","bindHandleKeyDown","render","_ref","_ref5","SPills","Box","Children","styles","controlsLength","createElement","cn","assignProps","NeighborLocation","defaultValue","a11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","selector","Pill","_ref2","arguments[0]","_ref6","SPill","addonLeft","addonRight","neighborLocation","useNeighborLocationDetect","roleAreaProps","undefined","Pills","Item","Addon","tag","addonTextChildren","Text","_ref3","_ref7","SText","_ref4","_ref8","SAddon","wrapPills","wrapper","exports","createComponent","_default"],"sources":["../../src/Pills.tsx"],"sourcesContent":["import { NeighborLocation, Box, useNeighborLocationDetect } from '@semcore/base-components';\nimport type { Intergalactic, 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":[]}
|
|
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 +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\
|
|
1
|
+
{"version":3,"file":"Pills.type.js","names":[],"sources":["../../src/Pills.type.ts"],"sourcesContent":["import type { Box, BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type React from 'react';\n\ndeclare namespace NSPills {\n // TODO: It looks like the value isn't accurate. Revise and align it with the component's logic.\n type Value = string | number | boolean | null;\n type Props<T extends NSPills.Value = NSPills.Value> = NeighborLocationProps & BoxProps & {\n /** Pills size */\n size?: 'l' | 'm';\n /** Disabled state */\n disabled?: boolean;\n /** Called when the selection is changed */\n onChange?:\n | ((value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void)\n | React.Dispatch<React.SetStateAction<T>>;\n /** Value for the selected pill */\n value?: T;\n /** Default value for the selected pill */\n defaultValue?: T;\n /** Sets semantic role for corresponding behavior,\n * when set to `auto` pressing left and right arrows\n * selects corresponding sibling pill.\n *\n * It's recommended to use `auto` behavior in forms\n * while `manual` behavior for navigation and layout.\n * @default tabs\n */\n behavior?:\n | 'auto'\n | 'manual';\n };\n type Ctx = {\n getItemProps: PropGetterFn;\n };\n type Handlers = {\n value: (value: Props['value'], event: React.SyntheticEvent) => Props['value'];\n };\n namespace Pill {\n type Props = BoxProps & NeighborItemProps & {\n /** Pill value */\n value?: NSPills.Value;\n /** Disabled state */\n disabled?: boolean;\n /** Selected state */\n selected?: boolean;\n /** Left addon text */\n addonLeft?: React.ElementType;\n /** Right addon tag */\n addonRight?: React.ElementType;\n };\n namespace Text {\n type Component = typeof Box;\n }\n namespace Addon {\n type Component = typeof Box;\n }\n\n type Component = Intergalactic.Component<'button', Props, [handlers: Handlers]>;\n }\n\n type WrapComponent<PropsExtending = {}> = (<\n V extends Value,\n Tag extends Intergalactic.Tag = 'div',\n >(\n props: Intergalactic.InternalTypings.ComponentProps<\n Tag,\n 'div',\n Props<V>,\n Ctx,\n [handlers: Handlers]\n > &\n PropsExtending,\n ) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', Props>;\n\n type Component = WrapComponent & {\n Item: Pill.Component & {\n Text: Pill.Text.Component;\n Addon: Pill.Addon.Component;\n };\n };\n}\n\n/** @deprecated It will be removed in v18. */\nexport type PillsValue = NSPills.Value;\n/** @deprecated It will be removed in v18. */\nexport type PillsProps<T extends PillsValue = PillsValue> = NSPills.Props<T>;\n/** @deprecated It will be removed in v18. */\nexport type PillProps = NSPills.Pill.Props;\n/** @deprecated It will be removed in v18. */\nexport type PillsContext = NSPills.Ctx;\n/** @deprecated It will be removed in v18. */\nexport type PillsHandlers = NSPills.Handlers;\n\nexport type { NSPills };\n"],"mappings":"","ignoreList":[]}
|
package/lib/es6/Pills.js
CHANGED
|
@@ -10,20 +10,20 @@ import addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';
|
|
|
10
10
|
import a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';
|
|
11
11
|
import React from 'react';
|
|
12
12
|
/*!__reshadow-styles__:"./style/pills.shadow.css"*/
|
|
13
|
-
const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".
|
|
13
|
+
const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SPills_1v2no_gg_{display:inline-flex;align-items:center;justify-content:center;isolation:isolate;border-radius:var(--intergalactic-control-rounded, 6px)}.___SPills_1v2no_gg_ .___SPill_1v2no_gg_.__selected_1v2no_gg_{background:var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));border-color:var(--intergalactic-border-info-active, #006dca);z-index:3}.___SPills_1v2no_gg_ .___SPill_1v2no_gg_.__selected_1v2no_gg_,.___SPills_1v2no_gg_ .___SPill_1v2no_gg_:focus-visible{z-index:3}.___SPills_1v2no_gg_ .___SPill_1v2no_gg_:active{z-index:2}@media (hover:hover){.___SPills_1v2no_gg_ .___SPill_1v2no_gg_:hover{z-index:2}}.___SPill_1v2no_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, #ffffff);border:1px solid var(--intergalactic-border-primary, #c4c7cf);border-radius:var(--intergalactic-control-rounded, 6px)}.___SPill_1v2no_gg_::-moz-focus-inner{border:0;padding:0}.___SPill_1v2no_gg_:active{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPill_1v2no_gg_:hover{background:var(--intergalactic-bg-primary-neutral-hover, #f4f5f9)}}.___SPill_1v2no_gg_.__disabled_1v2no_gg_{cursor:default;pointer-events:none}.___SPill_1v2no_gg_.__disabled_1v2no_gg_>*{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SText_1v2no_gg_{color:var(--intergalactic-text-primary, #191b23);display:inline-flex}.___SAddon_1v2no_gg_{color:var(--intergalactic-text-secondary, #6c6e79);display:inline-flex;align-items:center;justify-content:center}.___SPill_1v2no_gg_._size_m_1v2no_gg_{height:var(--intergalactic-form-control-m, 28px);min-width:var(--intergalactic-form-control-m, 28px);font-size:var(--intergalactic-fs-200, 14px)}.___SPill_1v2no_gg_._size_l_1v2no_gg_ .___SText_1v2no_gg_,.___SPill_1v2no_gg_._size_m_1v2no_gg_ .___SText_1v2no_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_1v2no_gg_._size_m_1v2no_gg_ .___SAddon_1v2no_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SPill_1v2no_gg_._size_m_1v2no_gg_ .___SAddon_1v2no_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_1v2no_gg_._size_m_1v2no_gg_ .___SAddon_1v2no_gg_:only-child{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_1v2no_gg_._size_l_1v2no_gg_{height:var(--intergalactic-form-control-l, 40px);min-width:var(--intergalactic-form-control-l, 40px);font-size:var(--intergalactic-fs-300, 16px)}.___SPill_1v2no_gg_._size_l_1v2no_gg_ .___SAddon_1v2no_gg_:only-child,.___SPill_1v2no_gg_._size_l_1v2no_gg_ .___SText_1v2no_gg_:only-child{margin-left:var(--intergalactic-spacing-3x, 12px);margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_1v2no_gg_._size_l_1v2no_gg_ .___SAddon_1v2no_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SPill_1v2no_gg_._size_l_1v2no_gg_ .___SAddon_1v2no_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_1v2no_gg_._neighborLocation_right_1v2no_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_1v2no_gg_._neighborLocation_both_1v2no_gg_{border-radius:0;margin-left:-1px}.___SPill_1v2no_gg_._neighborLocation_left_1v2no_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}", /*__inner_css_end__*/"1v2no_gg_"),
|
|
14
14
|
/*__reshadow_css_end__*/
|
|
15
15
|
{
|
|
16
|
-
"__SText": "
|
|
17
|
-
"__SAddon": "
|
|
18
|
-
"__SPill": "
|
|
19
|
-
"_neighborLocation_right": "
|
|
20
|
-
"_neighborLocation_both": "
|
|
21
|
-
"_neighborLocation_left": "
|
|
22
|
-
"__SPills": "
|
|
23
|
-
"_selected": "
|
|
24
|
-
"_disabled": "
|
|
25
|
-
"_size_m": "
|
|
26
|
-
"_size_l": "
|
|
16
|
+
"__SText": "___SText_1v2no_gg_",
|
|
17
|
+
"__SAddon": "___SAddon_1v2no_gg_",
|
|
18
|
+
"__SPill": "___SPill_1v2no_gg_",
|
|
19
|
+
"_neighborLocation_right": "_neighborLocation_right_1v2no_gg_",
|
|
20
|
+
"_neighborLocation_both": "_neighborLocation_both_1v2no_gg_",
|
|
21
|
+
"_neighborLocation_left": "_neighborLocation_left_1v2no_gg_",
|
|
22
|
+
"__SPills": "___SPills_1v2no_gg_",
|
|
23
|
+
"_selected": "__selected_1v2no_gg_",
|
|
24
|
+
"_disabled": "__disabled_1v2no_gg_",
|
|
25
|
+
"_size_m": "_size_m_1v2no_gg_",
|
|
26
|
+
"_size_l": "_size_l_1v2no_gg_"
|
|
27
27
|
});
|
|
28
28
|
class RootPills extends Component {
|
|
29
29
|
constructor(...args) {
|
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","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":[]}
|
|
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":"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","ignoreList":[]}
|
|
@@ -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\
|
|
1
|
+
{"version":3,"file":"Pills.type.js","names":[],"sources":["../../src/Pills.type.ts"],"sourcesContent":["import type { Box, BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type React from 'react';\n\ndeclare namespace NSPills {\n // TODO: It looks like the value isn't accurate. Revise and align it with the component's logic.\n type Value = string | number | boolean | null;\n type Props<T extends NSPills.Value = NSPills.Value> = NeighborLocationProps & BoxProps & {\n /** Pills size */\n size?: 'l' | 'm';\n /** Disabled state */\n disabled?: boolean;\n /** Called when the selection is changed */\n onChange?:\n | ((value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void)\n | React.Dispatch<React.SetStateAction<T>>;\n /** Value for the selected pill */\n value?: T;\n /** Default value for the selected pill */\n defaultValue?: T;\n /** Sets semantic role for corresponding behavior,\n * when set to `auto` pressing left and right arrows\n * selects corresponding sibling pill.\n *\n * It's recommended to use `auto` behavior in forms\n * while `manual` behavior for navigation and layout.\n * @default tabs\n */\n behavior?:\n | 'auto'\n | 'manual';\n };\n type Ctx = {\n getItemProps: PropGetterFn;\n };\n type Handlers = {\n value: (value: Props['value'], event: React.SyntheticEvent) => Props['value'];\n };\n namespace Pill {\n type Props = BoxProps & NeighborItemProps & {\n /** Pill value */\n value?: NSPills.Value;\n /** Disabled state */\n disabled?: boolean;\n /** Selected state */\n selected?: boolean;\n /** Left addon text */\n addonLeft?: React.ElementType;\n /** Right addon tag */\n addonRight?: React.ElementType;\n };\n namespace Text {\n type Component = typeof Box;\n }\n namespace Addon {\n type Component = typeof Box;\n }\n\n type Component = Intergalactic.Component<'button', Props, [handlers: Handlers]>;\n }\n\n type WrapComponent<PropsExtending = {}> = (<\n V extends Value,\n Tag extends Intergalactic.Tag = 'div',\n >(\n props: Intergalactic.InternalTypings.ComponentProps<\n Tag,\n 'div',\n Props<V>,\n Ctx,\n [handlers: Handlers]\n > &\n PropsExtending,\n ) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', Props>;\n\n type Component = WrapComponent & {\n Item: Pill.Component & {\n Text: Pill.Text.Component;\n Addon: Pill.Addon.Component;\n };\n };\n}\n\n/** @deprecated It will be removed in v18. */\nexport type PillsValue = NSPills.Value;\n/** @deprecated It will be removed in v18. */\nexport type PillsProps<T extends PillsValue = PillsValue> = NSPills.Props<T>;\n/** @deprecated It will be removed in v18. */\nexport type PillProps = NSPills.Pill.Props;\n/** @deprecated It will be removed in v18. */\nexport type PillsContext = NSPills.Ctx;\n/** @deprecated It will be removed in v18. */\nexport type PillsHandlers = NSPills.Handlers;\n\nexport type { NSPills };\n"],"mappings":"","ignoreList":[]}
|
package/lib/esm/Pills.mjs
CHANGED
|
@@ -9,22 +9,22 @@ const style = (
|
|
|
9
9
|
/*__reshadow_css_start__*/
|
|
10
10
|
(sstyled.insert(
|
|
11
11
|
/*__inner_css_start__*/
|
|
12
|
-
".
|
|
12
|
+
".___SPills_1v2no_gg_{display:inline-flex;align-items:center;justify-content:center;isolation:isolate;border-radius:var(--intergalactic-control-rounded, 6px)}.___SPills_1v2no_gg_ .___SPill_1v2no_gg_.__selected_1v2no_gg_{background:var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));border-color:var(--intergalactic-border-info-active, #006dca);z-index:3}.___SPills_1v2no_gg_ .___SPill_1v2no_gg_.__selected_1v2no_gg_,.___SPills_1v2no_gg_ .___SPill_1v2no_gg_:focus-visible{z-index:3}.___SPills_1v2no_gg_ .___SPill_1v2no_gg_:active{z-index:2}@media (hover:hover){.___SPills_1v2no_gg_ .___SPill_1v2no_gg_:hover{z-index:2}}.___SPill_1v2no_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, #ffffff);border:1px solid var(--intergalactic-border-primary, #c4c7cf);border-radius:var(--intergalactic-control-rounded, 6px)}.___SPill_1v2no_gg_::-moz-focus-inner{border:0;padding:0}.___SPill_1v2no_gg_:active{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPill_1v2no_gg_:hover{background:var(--intergalactic-bg-primary-neutral-hover, #f4f5f9)}}.___SPill_1v2no_gg_.__disabled_1v2no_gg_{cursor:default;pointer-events:none}.___SPill_1v2no_gg_.__disabled_1v2no_gg_>*{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SText_1v2no_gg_{color:var(--intergalactic-text-primary, #191b23);display:inline-flex}.___SAddon_1v2no_gg_{color:var(--intergalactic-text-secondary, #6c6e79);display:inline-flex;align-items:center;justify-content:center}.___SPill_1v2no_gg_._size_m_1v2no_gg_{height:var(--intergalactic-form-control-m, 28px);min-width:var(--intergalactic-form-control-m, 28px);font-size:var(--intergalactic-fs-200, 14px)}.___SPill_1v2no_gg_._size_l_1v2no_gg_ .___SText_1v2no_gg_,.___SPill_1v2no_gg_._size_m_1v2no_gg_ .___SText_1v2no_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_1v2no_gg_._size_m_1v2no_gg_ .___SAddon_1v2no_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SPill_1v2no_gg_._size_m_1v2no_gg_ .___SAddon_1v2no_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_1v2no_gg_._size_m_1v2no_gg_ .___SAddon_1v2no_gg_:only-child{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_1v2no_gg_._size_l_1v2no_gg_{height:var(--intergalactic-form-control-l, 40px);min-width:var(--intergalactic-form-control-l, 40px);font-size:var(--intergalactic-fs-300, 16px)}.___SPill_1v2no_gg_._size_l_1v2no_gg_ .___SAddon_1v2no_gg_:only-child,.___SPill_1v2no_gg_._size_l_1v2no_gg_ .___SText_1v2no_gg_:only-child{margin-left:var(--intergalactic-spacing-3x, 12px);margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_1v2no_gg_._size_l_1v2no_gg_ .___SAddon_1v2no_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SPill_1v2no_gg_._size_l_1v2no_gg_ .___SAddon_1v2no_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_1v2no_gg_._neighborLocation_right_1v2no_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_1v2no_gg_._neighborLocation_both_1v2no_gg_{border-radius:0;margin-left:-1px}.___SPill_1v2no_gg_._neighborLocation_left_1v2no_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}",
|
|
13
13
|
/*__inner_css_end__*/
|
|
14
|
-
"
|
|
14
|
+
"1v2no_gg_"
|
|
15
15
|
), /*__reshadow_css_end__*/
|
|
16
16
|
{
|
|
17
|
-
"__SText": "
|
|
18
|
-
"__SAddon": "
|
|
19
|
-
"__SPill": "
|
|
20
|
-
"_neighborLocation_right": "
|
|
21
|
-
"_neighborLocation_both": "
|
|
22
|
-
"_neighborLocation_left": "
|
|
23
|
-
"__SPills": "
|
|
24
|
-
"_selected": "
|
|
25
|
-
"_disabled": "
|
|
26
|
-
"_size_m": "
|
|
27
|
-
"_size_l": "
|
|
17
|
+
"__SText": "___SText_1v2no_gg_",
|
|
18
|
+
"__SAddon": "___SAddon_1v2no_gg_",
|
|
19
|
+
"__SPill": "___SPill_1v2no_gg_",
|
|
20
|
+
"_neighborLocation_right": "_neighborLocation_right_1v2no_gg_",
|
|
21
|
+
"_neighborLocation_both": "_neighborLocation_both_1v2no_gg_",
|
|
22
|
+
"_neighborLocation_left": "_neighborLocation_left_1v2no_gg_",
|
|
23
|
+
"__SPills": "___SPills_1v2no_gg_",
|
|
24
|
+
"_selected": "__selected_1v2no_gg_",
|
|
25
|
+
"_disabled": "__disabled_1v2no_gg_",
|
|
26
|
+
"_size_m": "_size_m_1v2no_gg_",
|
|
27
|
+
"_size_l": "_size_l_1v2no_gg_"
|
|
28
28
|
})
|
|
29
29
|
);
|
|
30
30
|
class RootPills extends Component {
|
package/lib/types/Pills.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { Intergalactic } from '@semcore/core';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import type {
|
|
4
|
-
export declare const wrapPills: <PropsExtending extends {}>(wrapper: (props: Intergalactic.InternalTypings.UntypeRefAndTag<Intergalactic.InternalTypings.ComponentPropsNesting<
|
|
5
|
-
declare const Pills:
|
|
3
|
+
import type { NSPills } from './Pills.type';
|
|
4
|
+
export declare const wrapPills: <PropsExtending extends {}>(wrapper: (props: Intergalactic.InternalTypings.UntypeRefAndTag<Intergalactic.InternalTypings.ComponentPropsNesting<NSPills.WrapComponent>> & PropsExtending) => React.ReactNode) => NSPills.WrapComponent<PropsExtending>;
|
|
5
|
+
declare const Pills: NSPills.Component;
|
|
6
6
|
export default Pills;
|
|
@@ -1,55 +1,74 @@
|
|
|
1
1
|
import type { Box, BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';
|
|
2
2
|
import type { PropGetterFn, Intergalactic } from '@semcore/core';
|
|
3
3
|
import type React from 'react';
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
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;
|
|
4
|
+
declare namespace NSPills {
|
|
5
|
+
type Value = string | number | boolean | null;
|
|
6
|
+
type Props<T extends NSPills.Value = NSPills.Value> = NeighborLocationProps & BoxProps & {
|
|
7
|
+
/** Pills size */
|
|
8
|
+
size?: 'l' | 'm';
|
|
9
|
+
/** Disabled state */
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
/** Called when the selection is changed */
|
|
12
|
+
onChange?: ((value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void) | React.Dispatch<React.SetStateAction<T>>;
|
|
13
|
+
/** Value for the selected pill */
|
|
14
|
+
value?: T;
|
|
15
|
+
/** Default value for the selected pill */
|
|
16
|
+
defaultValue?: T;
|
|
17
|
+
/** Sets semantic role for corresponding behavior,
|
|
18
|
+
* when set to `auto` pressing left and right arrows
|
|
19
|
+
* selects corresponding sibling pill.
|
|
20
|
+
*
|
|
21
|
+
* It's recommended to use `auto` behavior in forms
|
|
22
|
+
* while `manual` behavior for navigation and layout.
|
|
23
|
+
* @default tabs
|
|
24
|
+
*/
|
|
25
|
+
behavior?: 'auto' | 'manual';
|
|
54
26
|
};
|
|
55
|
-
|
|
27
|
+
type Ctx = {
|
|
28
|
+
getItemProps: PropGetterFn;
|
|
29
|
+
};
|
|
30
|
+
type Handlers = {
|
|
31
|
+
value: (value: Props['value'], event: React.SyntheticEvent) => Props['value'];
|
|
32
|
+
};
|
|
33
|
+
namespace Pill {
|
|
34
|
+
type Props = BoxProps & NeighborItemProps & {
|
|
35
|
+
/** Pill value */
|
|
36
|
+
value?: NSPills.Value;
|
|
37
|
+
/** Disabled state */
|
|
38
|
+
disabled?: boolean;
|
|
39
|
+
/** Selected state */
|
|
40
|
+
selected?: boolean;
|
|
41
|
+
/** Left addon text */
|
|
42
|
+
addonLeft?: React.ElementType;
|
|
43
|
+
/** Right addon tag */
|
|
44
|
+
addonRight?: React.ElementType;
|
|
45
|
+
};
|
|
46
|
+
namespace Text {
|
|
47
|
+
type Component = typeof Box;
|
|
48
|
+
}
|
|
49
|
+
namespace Addon {
|
|
50
|
+
type Component = typeof Box;
|
|
51
|
+
}
|
|
52
|
+
type Component = Intergalactic.Component<'button', Props, [handlers: Handlers]>;
|
|
53
|
+
}
|
|
54
|
+
type WrapComponent<PropsExtending = {}> = (<V extends Value, Tag extends Intergalactic.Tag = 'div'>(props: Intergalactic.InternalTypings.ComponentProps<Tag, 'div', Props<V>, Ctx, [
|
|
55
|
+
handlers: Handlers
|
|
56
|
+
]> & PropsExtending) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', Props>;
|
|
57
|
+
type Component = WrapComponent & {
|
|
58
|
+
Item: Pill.Component & {
|
|
59
|
+
Text: Pill.Text.Component;
|
|
60
|
+
Addon: Pill.Addon.Component;
|
|
61
|
+
};
|
|
62
|
+
};
|
|
63
|
+
}
|
|
64
|
+
/** @deprecated It will be removed in v18. */
|
|
65
|
+
export type PillsValue = NSPills.Value;
|
|
66
|
+
/** @deprecated It will be removed in v18. */
|
|
67
|
+
export type PillsProps<T extends PillsValue = PillsValue> = NSPills.Props<T>;
|
|
68
|
+
/** @deprecated It will be removed in v18. */
|
|
69
|
+
export type PillProps = NSPills.Pill.Props;
|
|
70
|
+
/** @deprecated It will be removed in v18. */
|
|
71
|
+
export type PillsContext = NSPills.Ctx;
|
|
72
|
+
/** @deprecated It will be removed in v18. */
|
|
73
|
+
export type PillsHandlers = NSPills.Handlers;
|
|
74
|
+
export type { NSPills };
|
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.1",
|
|
4
|
+
"version": "17.0.2-prerelease.1",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"require": "./lib/cjs/index.js"
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
|
-
"@semcore/base-components": "^17.0.
|
|
17
|
+
"@semcore/base-components": "^17.0.2"
|
|
18
18
|
},
|
|
19
19
|
"repository": {
|
|
20
20
|
"type": "git",
|
|
@@ -23,10 +23,10 @@
|
|
|
23
23
|
},
|
|
24
24
|
"devDependencies": {
|
|
25
25
|
"@semcore/core": "17.0.1",
|
|
26
|
-
"@semcore/
|
|
27
|
-
"@semcore/
|
|
28
|
-
"@semcore/
|
|
29
|
-
"@semcore/
|
|
26
|
+
"@semcore/badge": "17.0.1-prerelease.1",
|
|
27
|
+
"@semcore/base-components": "17.0.2-prerelease.1",
|
|
28
|
+
"@semcore/testing-utils": "1.0.0",
|
|
29
|
+
"@semcore/icon": "17.0.1-prerelease.1"
|
|
30
30
|
},
|
|
31
31
|
"scripts": {
|
|
32
32
|
"build": "pnpm semcore-builder && pnpm vite build"
|