@semcore/link 17.0.0-prerelease.30 → 17.0.0-prerelease.31
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 +1 -1
- package/lib/cjs/Link.js +19 -27
- package/lib/cjs/Link.js.map +1 -1
- package/lib/cjs/Link.types.js.map +1 -1
- package/lib/cjs/style/link.shadow.css +11 -16
- package/lib/es6/Link.js +19 -27
- package/lib/es6/Link.js.map +1 -1
- package/lib/es6/Link.types.js.map +1 -1
- package/lib/es6/style/link.shadow.css +11 -16
- package/lib/esm/Link.mjs +21 -29
- package/lib/esm/style/link.shadow.css +11 -16
- package/lib/types/Link.d.ts +2 -11
- package/lib/types/Link.types.d.ts +3 -4
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
package/lib/cjs/Link.js
CHANGED
|
@@ -15,21 +15,20 @@ var _logger = _interopRequireDefault(require("@semcore/core/lib/utils/logger"));
|
|
|
15
15
|
var _typography = require("@semcore/typography");
|
|
16
16
|
var _react = _interopRequireDefault(require("react"));
|
|
17
17
|
/*!__reshadow-styles__:"./style/link.shadow.css"*/
|
|
18
|
-
const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".
|
|
18
|
+
const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SLink_10jj4_gg_{display:inline;align-items:center;color:var(--intergalactic-text-link, #006dca);position:relative;cursor:pointer;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;background:0 0;transition:color .15s ease-in-out}.___SLink_10jj4_gg_::-moz-focus-inner{border:0;padding:0}.___SLink_10jj4_gg_.__active_10jj4_gg_,.___SLink_10jj4_gg_:active{color:var(--intergalactic-text-link-hover-active, #044792)}@media (hover:hover){.___SLink_10jj4_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___SLink_10jj4_gg_.__active_10jj4_gg_ .___SText_10jj4_gg_,.___SLink_10jj4_gg_:active .___SText_10jj4_gg_{text-decoration-color:currentColor}@media (hover:hover){.___SLink_10jj4_gg_:hover .___SText_10jj4_gg_{text-decoration-color:currentColor}}.___SLink_10jj4_gg_.__enableVisited_10jj4_gg_:visited{color:var(--intergalactic-text-link-visited, #8649e1)}@media (hover:hover){.___SLink_10jj4_gg_.__enableVisited_10jj4_gg_:visited:hover{color:var(--intergalactic-text-link-visited, #8649e1)}}.___SLink_10jj4_gg_.__visually-disabled_10jj4_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SLink_10jj4_gg_.__noWrap_10jj4_gg_{white-space:nowrap}.___SLink_10jj4_gg_.__inline_10jj4_gg_{display:inline}.___SInner_10jj4_gg_{align-items:baseline;height:100%;width:100%}.___SAddon_10jj4_gg_{pointer-events:none;vertical-align:middle;display:inline-flex;margin-top:-2.5px}.___SLink_10jj4_gg_ .___SAddon_10jj4_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-1x, 4px)}.___SLink_10jj4_gg_ .___SAddon_10jj4_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SText_10jj4_gg_{-webkit-text-decoration:underline;text-decoration:underline;text-decoration-style:solid;text-decoration-thickness:1px;text-decoration-color:transparent;text-underline-offset:17%;transition:text-decoration-color .15s ease-in-out}.___SLink_10jj4_gg_.__text-color_10jj4_gg_{color:var(--text-color_10jj4)}.___SLink_10jj4_gg_.__text-color_10jj4_gg_.__active_10jj4_gg_,.___SLink_10jj4_gg_.__text-color_10jj4_gg_:active{color:var(--text-color_10jj4);filter:brightness(.8)}@media (hover:hover){.___SLink_10jj4_gg_.__text-color_10jj4_gg_:hover{color:var(--text-color_10jj4);filter:brightness(.8)}}@media (prefers-reduced-motion){.___SLink_10jj4_gg_,.___SText_10jj4_gg_{transition:none}}", /*__inner_css_end__*/"10jj4_gg_"),
|
|
19
19
|
/*__reshadow_css_end__*/
|
|
20
20
|
{
|
|
21
|
-
"__SLink": "
|
|
22
|
-
"_visually-disabled": "__visually-
|
|
23
|
-
"_noWrap": "
|
|
24
|
-
"_inline": "
|
|
25
|
-
"__SInner": "
|
|
26
|
-
"__SAddon": "
|
|
27
|
-
"__SText": "
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"--text-color": "--text-color_1dx8e"
|
|
21
|
+
"__SLink": "___SLink_10jj4_gg_",
|
|
22
|
+
"_visually-disabled": "__visually-disabled_10jj4_gg_",
|
|
23
|
+
"_noWrap": "__noWrap_10jj4_gg_",
|
|
24
|
+
"_inline": "__inline_10jj4_gg_",
|
|
25
|
+
"__SInner": "___SInner_10jj4_gg_",
|
|
26
|
+
"__SAddon": "___SAddon_10jj4_gg_",
|
|
27
|
+
"__SText": "___SText_10jj4_gg_",
|
|
28
|
+
"_active": "__active_10jj4_gg_",
|
|
29
|
+
"_enableVisited": "__enableVisited_10jj4_gg_",
|
|
30
|
+
"_text-color": "__text-color_10jj4_gg_",
|
|
31
|
+
"--text-color": "--text-color_10jj4"
|
|
33
32
|
});
|
|
34
33
|
class RootLink extends _core.Component {
|
|
35
34
|
constructor(...args) {
|
|
@@ -51,19 +50,9 @@ class RootLink extends _core.Component {
|
|
|
51
50
|
}, 0);
|
|
52
51
|
}
|
|
53
52
|
}
|
|
54
|
-
getTextProps(
|
|
55
|
-
if ('hintProps' in props) {
|
|
56
|
-
return {
|
|
57
|
-
'use:hintProps': {
|
|
58
|
-
triggerRef: this.containerRef,
|
|
59
|
-
...props.hintProps
|
|
60
|
-
}
|
|
61
|
-
};
|
|
62
|
-
}
|
|
53
|
+
getTextProps() {
|
|
63
54
|
return {
|
|
64
|
-
'
|
|
65
|
-
triggerRef: this.containerRef
|
|
66
|
-
}
|
|
55
|
+
'hint:triggerRef': this.containerRef
|
|
67
56
|
};
|
|
68
57
|
}
|
|
69
58
|
render() {
|
|
@@ -89,16 +78,19 @@ class RootLink extends _core.Component {
|
|
|
89
78
|
const SInner = _baseComponents.Box;
|
|
90
79
|
const hintContent = title ?? ariaLabel ?? this.state.ariaLabelledByContent ?? '';
|
|
91
80
|
const showHint = children === undefined || title;
|
|
81
|
+
const excludeProps = ['title', 'aria-disabled'];
|
|
82
|
+
if (!this.asProps['use:disabled']) {
|
|
83
|
+
excludeProps.push('disabled');
|
|
84
|
+
}
|
|
92
85
|
return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(SLink, _ref4.cn("SLink", {
|
|
93
86
|
...(0, _core.assignProps)({
|
|
94
|
-
"role": 'link',
|
|
95
87
|
"tabIndex": disabled ? -1 : 0,
|
|
96
88
|
"use:href": disabled ? undefined : href,
|
|
97
89
|
"visually-disabled": disabled,
|
|
98
90
|
"text-color": resolveColor(color),
|
|
99
91
|
"tag": 'a',
|
|
100
92
|
"ref": this.containerRef,
|
|
101
|
-
"__excludeProps":
|
|
93
|
+
"__excludeProps": excludeProps,
|
|
102
94
|
"aria-label": showHint ? hintContent : undefined
|
|
103
95
|
}, _ref)
|
|
104
96
|
}), /*#__PURE__*/_react.default.createElement(SInner, _ref4.cn("SInner", {
|
package/lib/cjs/Link.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","names":["_core","require","_baseComponents","_addonTextChildren","_interopRequireDefault","_resolveColorEnhance","_hasLabels","_logger","_typography","_react","style","sstyled","insert","RootLink","Component","constructor","args","_defineProperty2","default","React","createRef","ariaLabelledByContent","componentDidMount","process","env","NODE_ENV","logger","warn","containerRef","current","hasLabels","asProps","displayName","setTimeout","setState","document","getElementById","textContent","getTextProps","
|
|
1
|
+
{"version":3,"file":"Link.js","names":["_core","require","_baseComponents","_addonTextChildren","_interopRequireDefault","_resolveColorEnhance","_hasLabels","_logger","_typography","_react","style","sstyled","insert","RootLink","Component","constructor","args","_defineProperty2","default","React","createRef","ariaLabelledByContent","componentDidMount","process","env","NODE_ENV","logger","warn","containerRef","current","hasLabels","asProps","displayName","setTimeout","setState","document","getElementById","textContent","getTextProps","render","_ref","_ref4","styles","color","resolveColor","disabled","href","children","addonLeft","AddonLeft","addonRight","AddonRight","Children","title","ariaLabel","hintPlacement","Link","CORE_INSTANCE","SLink","Text","SInner","Box","hintContent","state","showHint","undefined","excludeProps","push","createElement","Fragment","cn","assignProps","Addon","addonTextChildren","Hint","resolveColorEnhance","LinkText","props","_ref2","arguments[0]","_ref5","SText","_ref3","_ref6","SAddon","createComponent","_default","exports"],"sources":["../../src/Link.tsx"],"sourcesContent":["import type { BoxProps } from '@semcore/base-components';\nimport { Box, Hint } from '@semcore/base-components';\nimport type { Intergalactic, IRootComponentProps } from '@semcore/core';\nimport { createComponent, Component, Root, sstyled, CORE_INSTANCE } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport hasLabels from '@semcore/core/lib/utils/hasLabels';\nimport logger from '@semcore/core/lib/utils/logger';\nimport type { TextProps, TextHintProps } from '@semcore/typography';\nimport { Text } from '@semcore/typography';\nimport React from 'react';\n\nimport type { LinkProps } from './Link.types';\nimport style from './style/link.shadow.css';\n\ntype State = {\n ariaLabelledByContent: string;\n};\n\nclass RootLink extends Component<LinkProps, typeof RootLink.enhance, never, {}, State> {\n static displayName = 'Link';\n\n static style = style;\n static enhance = [resolveColorEnhance()] as const;\n containerRef = React.createRef<HTMLElement | null>();\n\n state: State = {\n ariaLabelledByContent: '',\n };\n\n componentDidMount() {\n if (process.env.NODE_ENV !== 'production') {\n logger.warn(\n this.containerRef.current && !hasLabels(this.containerRef.current),\n `'title' or 'aria-label' or 'aria-labelledby' are required props for links without text content`,\n this.asProps['data-ui-name'] || RootLink.displayName,\n );\n }\n\n if (this.asProps['aria-labelledby']) {\n setTimeout(() => {\n this.setState({\n ariaLabelledByContent:\n document.getElementById(this.asProps['aria-labelledby'])?.textContent ?? '',\n });\n }, 0);\n }\n }\n\n getTextProps(): TextHintProps {\n return {\n 'hint:triggerRef': this.containerRef,\n };\n }\n\n render() {\n const {\n styles,\n color,\n resolveColor,\n disabled,\n href,\n children,\n addonLeft: AddonLeft,\n addonRight: AddonRight,\n Children,\n title,\n 'aria-label': ariaLabel,\n hintPlacement,\n } = this.asProps;\n // @ts-ignore\n const Link = this[CORE_INSTANCE];\n const SLink = Root;\n const SInner = Box;\n const hintContent = title ?? ariaLabel ?? this.state.ariaLabelledByContent ?? '';\n const showHint = children === undefined || title;\n\n const excludeProps = ['title', 'aria-disabled'];\n if (!this.asProps['use:disabled']) {\n excludeProps.push('disabled');\n }\n\n return sstyled(styles)(\n <>\n <SLink\n tabIndex={disabled ? -1 : 0}\n use:href={disabled ? undefined : href}\n visually-disabled={disabled}\n render={Text}\n text-color={resolveColor(color)}\n tag='a'\n ref={this.containerRef}\n __excludeProps={excludeProps}\n aria-label={showHint ? hintContent : undefined}\n >\n <SInner\n tag='span'\n data-ui-name={`${this.asProps['data-ui-name']}.InnerWrapper`}\n >\n {AddonLeft\n ? (\n <Link.Addon>\n <AddonLeft />\n </Link.Addon>\n )\n : null}\n {addonTextChildren(Children, Link.Text, Link.Addon)}\n {AddonRight\n ? (\n <Link.Addon>\n <AddonRight />\n </Link.Addon>\n )\n : null}\n </SInner>\n </SLink>\n {showHint && (\n <Hint\n triggerRef={this.containerRef}\n timeout={[250, 50]}\n placement={hintPlacement}\n >\n {hintContent}\n </Hint>\n )}\n </>,\n );\n }\n}\n\nfunction LinkText(props: IRootComponentProps) {\n const SText = Root;\n const { styles } = props;\n return sstyled(styles)(<SText render={Text} />);\n}\n\nfunction Addon(props: IRootComponentProps) {\n const SAddon = Root;\n const { styles } = props;\n return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\nconst Link = createComponent(RootLink, {\n Text: LinkText,\n Addon,\n}) as Intergalactic.Component<'a', LinkProps, {}, typeof RootLink.enhance> & {\n Text: Intergalactic.Component<'span', TextProps>;\n Addon: Intergalactic.Component<'span', BoxProps>;\n};\n\nexport default Link;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.types.js","names":[],"sources":["../../src/Link.types.ts"],"sourcesContent":["import type { SimpleHintPopperProps } from '@semcore/base-components';\nimport type {
|
|
1
|
+
{"version":3,"file":"Link.types.js","names":[],"sources":["../../src/Link.types.ts"],"sourcesContent":["import type { BoxProps, SimpleHintPopperProps } from '@semcore/base-components';\nimport type { BaseTextProps } from '@semcore/typography';\nimport type React from 'react';\n\nexport type LinkProps = BoxProps & BaseTextProps & {\n /**\n * CSS property of the display link (inline|inline-block)\n * @default false\n * @deprecated. You should use default inline-flex for all cases.\n */\n inline?: boolean;\n /**\n * Sets the link to the disabled state\n */\n disabled?: boolean;\n /**\n * Sets the link to the active state\n */\n active?: boolean;\n /** This flag enables highlighting of the visited link\n */\n enableVisited?: boolean;\n /** The text will not be moved to a new line\n * @default false\n */\n noWrap?: boolean;\n /** Left addon tag */\n addonLeft?: React.ElementType;\n /** Right addon tag */\n addonRight?: React.ElementType;\n /**\n * The position of the popper relative to the trigger that called it.\n * @default top\n */\n hintPlacement?: SimpleHintPopperProps['placement'];\n};\n"],"mappings":"","ignoreList":[]}
|
|
@@ -9,11 +9,6 @@ SLink {
|
|
|
9
9
|
background: none;
|
|
10
10
|
transition: color 0.15s ease-in-out;
|
|
11
11
|
|
|
12
|
-
&:active,
|
|
13
|
-
&:hover {
|
|
14
|
-
text-decoration: none;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
12
|
&::-moz-focus-inner {
|
|
18
13
|
border: none;
|
|
19
14
|
padding: 0;
|
|
@@ -25,7 +20,7 @@ SLink {
|
|
|
25
20
|
color: var(--intergalactic-text-link-hover-active, #044792);
|
|
26
21
|
|
|
27
22
|
& SText {
|
|
28
|
-
|
|
23
|
+
text-decoration-color: currentColor;
|
|
29
24
|
}
|
|
30
25
|
}
|
|
31
26
|
|
|
@@ -57,10 +52,10 @@ SInner {
|
|
|
57
52
|
}
|
|
58
53
|
|
|
59
54
|
SAddon {
|
|
60
|
-
align-items: baseline;
|
|
61
|
-
vertical-align: -2px;
|
|
62
55
|
pointer-events: none;
|
|
63
|
-
align
|
|
56
|
+
vertical-align: middle;
|
|
57
|
+
display: inline-flex;
|
|
58
|
+
margin-top: -2.5px;
|
|
64
59
|
}
|
|
65
60
|
|
|
66
61
|
SLink SAddon {
|
|
@@ -74,13 +69,13 @@ SLink SAddon {
|
|
|
74
69
|
}
|
|
75
70
|
|
|
76
71
|
SText {
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
72
|
+
text-decoration: underline;
|
|
73
|
+
text-decoration-style: solid;
|
|
74
|
+
text-decoration-thickness: 1px;
|
|
75
|
+
text-decoration-color: transparent;
|
|
76
|
+
text-underline-offset: 17%;
|
|
77
|
+
|
|
78
|
+
transition: text-decoration-color 0.15s ease-in-out;
|
|
84
79
|
}
|
|
85
80
|
|
|
86
81
|
SLink[text-color] {
|
package/lib/es6/Link.js
CHANGED
|
@@ -12,21 +12,20 @@ import logger from '@semcore/core/lib/utils/logger';
|
|
|
12
12
|
import { Text } from '@semcore/typography';
|
|
13
13
|
import React from 'react';
|
|
14
14
|
/*!__reshadow-styles__:"./style/link.shadow.css"*/
|
|
15
|
-
const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".
|
|
15
|
+
const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SLink_10jj4_gg_{display:inline;align-items:center;color:var(--intergalactic-text-link, #006dca);position:relative;cursor:pointer;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;background:0 0;transition:color .15s ease-in-out}.___SLink_10jj4_gg_::-moz-focus-inner{border:0;padding:0}.___SLink_10jj4_gg_.__active_10jj4_gg_,.___SLink_10jj4_gg_:active{color:var(--intergalactic-text-link-hover-active, #044792)}@media (hover:hover){.___SLink_10jj4_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___SLink_10jj4_gg_.__active_10jj4_gg_ .___SText_10jj4_gg_,.___SLink_10jj4_gg_:active .___SText_10jj4_gg_{text-decoration-color:currentColor}@media (hover:hover){.___SLink_10jj4_gg_:hover .___SText_10jj4_gg_{text-decoration-color:currentColor}}.___SLink_10jj4_gg_.__enableVisited_10jj4_gg_:visited{color:var(--intergalactic-text-link-visited, #8649e1)}@media (hover:hover){.___SLink_10jj4_gg_.__enableVisited_10jj4_gg_:visited:hover{color:var(--intergalactic-text-link-visited, #8649e1)}}.___SLink_10jj4_gg_.__visually-disabled_10jj4_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SLink_10jj4_gg_.__noWrap_10jj4_gg_{white-space:nowrap}.___SLink_10jj4_gg_.__inline_10jj4_gg_{display:inline}.___SInner_10jj4_gg_{align-items:baseline;height:100%;width:100%}.___SAddon_10jj4_gg_{pointer-events:none;vertical-align:middle;display:inline-flex;margin-top:-2.5px}.___SLink_10jj4_gg_ .___SAddon_10jj4_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-1x, 4px)}.___SLink_10jj4_gg_ .___SAddon_10jj4_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SText_10jj4_gg_{-webkit-text-decoration:underline;text-decoration:underline;text-decoration-style:solid;text-decoration-thickness:1px;text-decoration-color:transparent;text-underline-offset:17%;transition:text-decoration-color .15s ease-in-out}.___SLink_10jj4_gg_.__text-color_10jj4_gg_{color:var(--text-color_10jj4)}.___SLink_10jj4_gg_.__text-color_10jj4_gg_.__active_10jj4_gg_,.___SLink_10jj4_gg_.__text-color_10jj4_gg_:active{color:var(--text-color_10jj4);filter:brightness(.8)}@media (hover:hover){.___SLink_10jj4_gg_.__text-color_10jj4_gg_:hover{color:var(--text-color_10jj4);filter:brightness(.8)}}@media (prefers-reduced-motion){.___SLink_10jj4_gg_,.___SText_10jj4_gg_{transition:none}}", /*__inner_css_end__*/"10jj4_gg_"),
|
|
16
16
|
/*__reshadow_css_end__*/
|
|
17
17
|
{
|
|
18
|
-
"__SLink": "
|
|
19
|
-
"_visually-disabled": "__visually-
|
|
20
|
-
"_noWrap": "
|
|
21
|
-
"_inline": "
|
|
22
|
-
"__SInner": "
|
|
23
|
-
"__SAddon": "
|
|
24
|
-
"__SText": "
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"--text-color": "--text-color_1dx8e"
|
|
18
|
+
"__SLink": "___SLink_10jj4_gg_",
|
|
19
|
+
"_visually-disabled": "__visually-disabled_10jj4_gg_",
|
|
20
|
+
"_noWrap": "__noWrap_10jj4_gg_",
|
|
21
|
+
"_inline": "__inline_10jj4_gg_",
|
|
22
|
+
"__SInner": "___SInner_10jj4_gg_",
|
|
23
|
+
"__SAddon": "___SAddon_10jj4_gg_",
|
|
24
|
+
"__SText": "___SText_10jj4_gg_",
|
|
25
|
+
"_active": "__active_10jj4_gg_",
|
|
26
|
+
"_enableVisited": "__enableVisited_10jj4_gg_",
|
|
27
|
+
"_text-color": "__text-color_10jj4_gg_",
|
|
28
|
+
"--text-color": "--text-color_10jj4"
|
|
30
29
|
});
|
|
31
30
|
class RootLink extends Component {
|
|
32
31
|
constructor(...args) {
|
|
@@ -48,19 +47,9 @@ class RootLink extends Component {
|
|
|
48
47
|
}, 0);
|
|
49
48
|
}
|
|
50
49
|
}
|
|
51
|
-
getTextProps(
|
|
52
|
-
if ('hintProps' in props) {
|
|
53
|
-
return {
|
|
54
|
-
'use:hintProps': {
|
|
55
|
-
triggerRef: this.containerRef,
|
|
56
|
-
...props.hintProps
|
|
57
|
-
}
|
|
58
|
-
};
|
|
59
|
-
}
|
|
50
|
+
getTextProps() {
|
|
60
51
|
return {
|
|
61
|
-
'
|
|
62
|
-
triggerRef: this.containerRef
|
|
63
|
-
}
|
|
52
|
+
'hint:triggerRef': this.containerRef
|
|
64
53
|
};
|
|
65
54
|
}
|
|
66
55
|
render() {
|
|
@@ -86,16 +75,19 @@ class RootLink extends Component {
|
|
|
86
75
|
const SInner = Box;
|
|
87
76
|
const hintContent = title ?? ariaLabel ?? this.state.ariaLabelledByContent ?? '';
|
|
88
77
|
const showHint = children === undefined || title;
|
|
78
|
+
const excludeProps = ['title', 'aria-disabled'];
|
|
79
|
+
if (!this.asProps['use:disabled']) {
|
|
80
|
+
excludeProps.push('disabled');
|
|
81
|
+
}
|
|
89
82
|
return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SLink, _ref4.cn("SLink", {
|
|
90
83
|
..._assignProps({
|
|
91
|
-
"role": 'link',
|
|
92
84
|
"tabIndex": disabled ? -1 : 0,
|
|
93
85
|
"use:href": disabled ? undefined : href,
|
|
94
86
|
"visually-disabled": disabled,
|
|
95
87
|
"text-color": resolveColor(color),
|
|
96
88
|
"tag": 'a',
|
|
97
89
|
"ref": this.containerRef,
|
|
98
|
-
"__excludeProps":
|
|
90
|
+
"__excludeProps": excludeProps,
|
|
99
91
|
"aria-label": showHint ? hintContent : undefined
|
|
100
92
|
}, _ref)
|
|
101
93
|
}), /*#__PURE__*/React.createElement(SInner, _ref4.cn("SInner", {
|
package/lib/es6/Link.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","names":["Box","Hint","createComponent","Component","Root","sstyled","CORE_INSTANCE","addonTextChildren","resolveColorEnhance","hasLabels","logger","Text","React","style","_sstyled","insert","RootLink","constructor","args","_defineProperty","createRef","ariaLabelledByContent","componentDidMount","process","env","NODE_ENV","warn","containerRef","current","asProps","displayName","setTimeout","setState","document","getElementById","textContent","getTextProps","
|
|
1
|
+
{"version":3,"file":"Link.js","names":["Box","Hint","createComponent","Component","Root","sstyled","CORE_INSTANCE","addonTextChildren","resolveColorEnhance","hasLabels","logger","Text","React","style","_sstyled","insert","RootLink","constructor","args","_defineProperty","createRef","ariaLabelledByContent","componentDidMount","process","env","NODE_ENV","warn","containerRef","current","asProps","displayName","setTimeout","setState","document","getElementById","textContent","getTextProps","render","_ref","_ref4","styles","color","resolveColor","disabled","href","children","addonLeft","AddonLeft","addonRight","AddonRight","Children","title","ariaLabel","hintPlacement","Link","SLink","SInner","hintContent","state","showHint","undefined","excludeProps","push","createElement","Fragment","cn","_assignProps","Addon","LinkText","props","_ref2","arguments[0]","_ref5","SText","_assignProps2","_ref3","_ref6","SAddon","_assignProps3"],"sources":["../../src/Link.tsx"],"sourcesContent":["import type { BoxProps } from '@semcore/base-components';\nimport { Box, Hint } from '@semcore/base-components';\nimport type { Intergalactic, IRootComponentProps } from '@semcore/core';\nimport { createComponent, Component, Root, sstyled, CORE_INSTANCE } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport hasLabels from '@semcore/core/lib/utils/hasLabels';\nimport logger from '@semcore/core/lib/utils/logger';\nimport type { TextProps, TextHintProps } from '@semcore/typography';\nimport { Text } from '@semcore/typography';\nimport React from 'react';\n\nimport type { LinkProps } from './Link.types';\nimport style from './style/link.shadow.css';\n\ntype State = {\n ariaLabelledByContent: string;\n};\n\nclass RootLink extends Component<LinkProps, typeof RootLink.enhance, never, {}, State> {\n static displayName = 'Link';\n\n static style = style;\n static enhance = [resolveColorEnhance()] as const;\n containerRef = React.createRef<HTMLElement | null>();\n\n state: State = {\n ariaLabelledByContent: '',\n };\n\n componentDidMount() {\n if (process.env.NODE_ENV !== 'production') {\n logger.warn(\n this.containerRef.current && !hasLabels(this.containerRef.current),\n `'title' or 'aria-label' or 'aria-labelledby' are required props for links without text content`,\n this.asProps['data-ui-name'] || RootLink.displayName,\n );\n }\n\n if (this.asProps['aria-labelledby']) {\n setTimeout(() => {\n this.setState({\n ariaLabelledByContent:\n document.getElementById(this.asProps['aria-labelledby'])?.textContent ?? '',\n });\n }, 0);\n }\n }\n\n getTextProps(): TextHintProps {\n return {\n 'hint:triggerRef': this.containerRef,\n };\n }\n\n render() {\n const {\n styles,\n color,\n resolveColor,\n disabled,\n href,\n children,\n addonLeft: AddonLeft,\n addonRight: AddonRight,\n Children,\n title,\n 'aria-label': ariaLabel,\n hintPlacement,\n } = this.asProps;\n // @ts-ignore\n const Link = this[CORE_INSTANCE];\n const SLink = Root;\n const SInner = Box;\n const hintContent = title ?? ariaLabel ?? this.state.ariaLabelledByContent ?? '';\n const showHint = children === undefined || title;\n\n const excludeProps = ['title', 'aria-disabled'];\n if (!this.asProps['use:disabled']) {\n excludeProps.push('disabled');\n }\n\n return sstyled(styles)(\n <>\n <SLink\n tabIndex={disabled ? -1 : 0}\n use:href={disabled ? undefined : href}\n visually-disabled={disabled}\n render={Text}\n text-color={resolveColor(color)}\n tag='a'\n ref={this.containerRef}\n __excludeProps={excludeProps}\n aria-label={showHint ? hintContent : undefined}\n >\n <SInner\n tag='span'\n data-ui-name={`${this.asProps['data-ui-name']}.InnerWrapper`}\n >\n {AddonLeft\n ? (\n <Link.Addon>\n <AddonLeft />\n </Link.Addon>\n )\n : null}\n {addonTextChildren(Children, Link.Text, Link.Addon)}\n {AddonRight\n ? (\n <Link.Addon>\n <AddonRight />\n </Link.Addon>\n )\n : null}\n </SInner>\n </SLink>\n {showHint && (\n <Hint\n triggerRef={this.containerRef}\n timeout={[250, 50]}\n placement={hintPlacement}\n >\n {hintContent}\n </Hint>\n )}\n </>,\n );\n }\n}\n\nfunction LinkText(props: IRootComponentProps) {\n const SText = Root;\n const { styles } = props;\n return sstyled(styles)(<SText render={Text} />);\n}\n\nfunction Addon(props: IRootComponentProps) {\n const SAddon = Root;\n const { styles } = props;\n return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\nconst Link = createComponent(RootLink, {\n Text: LinkText,\n Addon,\n}) as Intergalactic.Component<'a', LinkProps, {}, typeof RootLink.enhance> & {\n Text: Intergalactic.Component<'span', TextProps>;\n Addon: Intergalactic.Component<'span', BoxProps>;\n};\n\nexport default Link;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.types.js","names":[],"sources":["../../src/Link.types.ts"],"sourcesContent":["import type { SimpleHintPopperProps } from '@semcore/base-components';\nimport type {
|
|
1
|
+
{"version":3,"file":"Link.types.js","names":[],"sources":["../../src/Link.types.ts"],"sourcesContent":["import type { BoxProps, SimpleHintPopperProps } from '@semcore/base-components';\nimport type { BaseTextProps } from '@semcore/typography';\nimport type React from 'react';\n\nexport type LinkProps = BoxProps & BaseTextProps & {\n /**\n * CSS property of the display link (inline|inline-block)\n * @default false\n * @deprecated. You should use default inline-flex for all cases.\n */\n inline?: boolean;\n /**\n * Sets the link to the disabled state\n */\n disabled?: boolean;\n /**\n * Sets the link to the active state\n */\n active?: boolean;\n /** This flag enables highlighting of the visited link\n */\n enableVisited?: boolean;\n /** The text will not be moved to a new line\n * @default false\n */\n noWrap?: boolean;\n /** Left addon tag */\n addonLeft?: React.ElementType;\n /** Right addon tag */\n addonRight?: React.ElementType;\n /**\n * The position of the popper relative to the trigger that called it.\n * @default top\n */\n hintPlacement?: SimpleHintPopperProps['placement'];\n};\n"],"mappings":"","ignoreList":[]}
|
|
@@ -9,11 +9,6 @@ SLink {
|
|
|
9
9
|
background: none;
|
|
10
10
|
transition: color 0.15s ease-in-out;
|
|
11
11
|
|
|
12
|
-
&:active,
|
|
13
|
-
&:hover {
|
|
14
|
-
text-decoration: none;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
12
|
&::-moz-focus-inner {
|
|
18
13
|
border: none;
|
|
19
14
|
padding: 0;
|
|
@@ -25,7 +20,7 @@ SLink {
|
|
|
25
20
|
color: var(--intergalactic-text-link-hover-active, #044792);
|
|
26
21
|
|
|
27
22
|
& SText {
|
|
28
|
-
|
|
23
|
+
text-decoration-color: currentColor;
|
|
29
24
|
}
|
|
30
25
|
}
|
|
31
26
|
|
|
@@ -57,10 +52,10 @@ SInner {
|
|
|
57
52
|
}
|
|
58
53
|
|
|
59
54
|
SAddon {
|
|
60
|
-
align-items: baseline;
|
|
61
|
-
vertical-align: -2px;
|
|
62
55
|
pointer-events: none;
|
|
63
|
-
align
|
|
56
|
+
vertical-align: middle;
|
|
57
|
+
display: inline-flex;
|
|
58
|
+
margin-top: -2.5px;
|
|
64
59
|
}
|
|
65
60
|
|
|
66
61
|
SLink SAddon {
|
|
@@ -74,13 +69,13 @@ SLink SAddon {
|
|
|
74
69
|
}
|
|
75
70
|
|
|
76
71
|
SText {
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
72
|
+
text-decoration: underline;
|
|
73
|
+
text-decoration-style: solid;
|
|
74
|
+
text-decoration-thickness: 1px;
|
|
75
|
+
text-decoration-color: transparent;
|
|
76
|
+
text-underline-offset: 17%;
|
|
77
|
+
|
|
78
|
+
transition: text-decoration-color 0.15s ease-in-out;
|
|
84
79
|
}
|
|
85
80
|
|
|
86
81
|
SLink[text-color] {
|
package/lib/esm/Link.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
-
import {
|
|
2
|
+
import { sstyled, createComponent, Component, CORE_INSTANCE, assignProps } from "@semcore/core";
|
|
3
3
|
import { Box, Hint } from "@semcore/base-components";
|
|
4
4
|
import addonTextChildren from "@semcore/core/lib/utils/addonTextChildren";
|
|
5
5
|
import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
|
|
@@ -12,23 +12,22 @@ const style = (
|
|
|
12
12
|
/*__reshadow_css_start__*/
|
|
13
13
|
(sstyled.insert(
|
|
14
14
|
/*__inner_css_start__*/
|
|
15
|
-
".
|
|
15
|
+
".___SLink_10jj4_gg_{display:inline;align-items:center;color:var(--intergalactic-text-link, #006dca);position:relative;cursor:pointer;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;background:0 0;transition:color .15s ease-in-out}.___SLink_10jj4_gg_::-moz-focus-inner{border:0;padding:0}.___SLink_10jj4_gg_.__active_10jj4_gg_,.___SLink_10jj4_gg_:active{color:var(--intergalactic-text-link-hover-active, #044792)}@media (hover:hover){.___SLink_10jj4_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___SLink_10jj4_gg_.__active_10jj4_gg_ .___SText_10jj4_gg_,.___SLink_10jj4_gg_:active .___SText_10jj4_gg_{text-decoration-color:currentColor}@media (hover:hover){.___SLink_10jj4_gg_:hover .___SText_10jj4_gg_{text-decoration-color:currentColor}}.___SLink_10jj4_gg_.__enableVisited_10jj4_gg_:visited{color:var(--intergalactic-text-link-visited, #8649e1)}@media (hover:hover){.___SLink_10jj4_gg_.__enableVisited_10jj4_gg_:visited:hover{color:var(--intergalactic-text-link-visited, #8649e1)}}.___SLink_10jj4_gg_.__visually-disabled_10jj4_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SLink_10jj4_gg_.__noWrap_10jj4_gg_{white-space:nowrap}.___SLink_10jj4_gg_.__inline_10jj4_gg_{display:inline}.___SInner_10jj4_gg_{align-items:baseline;height:100%;width:100%}.___SAddon_10jj4_gg_{pointer-events:none;vertical-align:middle;display:inline-flex;margin-top:-2.5px}.___SLink_10jj4_gg_ .___SAddon_10jj4_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-1x, 4px)}.___SLink_10jj4_gg_ .___SAddon_10jj4_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SText_10jj4_gg_{-webkit-text-decoration:underline;text-decoration:underline;text-decoration-style:solid;text-decoration-thickness:1px;text-decoration-color:transparent;text-underline-offset:17%;transition:text-decoration-color .15s ease-in-out}.___SLink_10jj4_gg_.__text-color_10jj4_gg_{color:var(--text-color_10jj4)}.___SLink_10jj4_gg_.__text-color_10jj4_gg_.__active_10jj4_gg_,.___SLink_10jj4_gg_.__text-color_10jj4_gg_:active{color:var(--text-color_10jj4);filter:brightness(.8)}@media (hover:hover){.___SLink_10jj4_gg_.__text-color_10jj4_gg_:hover{color:var(--text-color_10jj4);filter:brightness(.8)}}@media (prefers-reduced-motion){.___SLink_10jj4_gg_,.___SText_10jj4_gg_{transition:none}}",
|
|
16
16
|
/*__inner_css_end__*/
|
|
17
|
-
"
|
|
17
|
+
"10jj4_gg_"
|
|
18
18
|
), /*__reshadow_css_end__*/
|
|
19
19
|
{
|
|
20
|
-
"__SLink": "
|
|
21
|
-
"_visually-disabled": "__visually-
|
|
22
|
-
"_noWrap": "
|
|
23
|
-
"_inline": "
|
|
24
|
-
"__SInner": "
|
|
25
|
-
"__SAddon": "
|
|
26
|
-
"__SText": "
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"--text-color": "--text-color_1dx8e"
|
|
20
|
+
"__SLink": "___SLink_10jj4_gg_",
|
|
21
|
+
"_visually-disabled": "__visually-disabled_10jj4_gg_",
|
|
22
|
+
"_noWrap": "__noWrap_10jj4_gg_",
|
|
23
|
+
"_inline": "__inline_10jj4_gg_",
|
|
24
|
+
"__SInner": "___SInner_10jj4_gg_",
|
|
25
|
+
"__SAddon": "___SAddon_10jj4_gg_",
|
|
26
|
+
"__SText": "___SText_10jj4_gg_",
|
|
27
|
+
"_active": "__active_10jj4_gg_",
|
|
28
|
+
"_enableVisited": "__enableVisited_10jj4_gg_",
|
|
29
|
+
"_text-color": "__text-color_10jj4_gg_",
|
|
30
|
+
"--text-color": "--text-color_10jj4"
|
|
32
31
|
})
|
|
33
32
|
);
|
|
34
33
|
class RootLink extends Component {
|
|
@@ -52,19 +51,9 @@ class RootLink extends Component {
|
|
|
52
51
|
}, 0);
|
|
53
52
|
}
|
|
54
53
|
}
|
|
55
|
-
getTextProps(
|
|
56
|
-
if ("hintProps" in props) {
|
|
57
|
-
return {
|
|
58
|
-
"use:hintProps": {
|
|
59
|
-
triggerRef: this.containerRef,
|
|
60
|
-
...props.hintProps
|
|
61
|
-
}
|
|
62
|
-
};
|
|
63
|
-
}
|
|
54
|
+
getTextProps() {
|
|
64
55
|
return {
|
|
65
|
-
"
|
|
66
|
-
triggerRef: this.containerRef
|
|
67
|
-
}
|
|
56
|
+
"hint:triggerRef": this.containerRef
|
|
68
57
|
};
|
|
69
58
|
}
|
|
70
59
|
render() {
|
|
@@ -88,16 +77,19 @@ class RootLink extends Component {
|
|
|
88
77
|
const SInner = Box;
|
|
89
78
|
const hintContent = title ?? ariaLabel ?? this.state.ariaLabelledByContent ?? "";
|
|
90
79
|
const showHint = children === void 0 || title;
|
|
80
|
+
const excludeProps = ["title", "aria-disabled"];
|
|
81
|
+
if (!this.asProps["use:disabled"]) {
|
|
82
|
+
excludeProps.push("disabled");
|
|
83
|
+
}
|
|
91
84
|
return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SLink, _ref4.cn("SLink", {
|
|
92
85
|
...assignProps({
|
|
93
|
-
"role": "link",
|
|
94
86
|
"tabIndex": disabled ? -1 : 0,
|
|
95
87
|
"use:href": disabled ? void 0 : href,
|
|
96
88
|
"visually-disabled": disabled,
|
|
97
89
|
"text-color": resolveColor(color),
|
|
98
90
|
"tag": "a",
|
|
99
91
|
"ref": this.containerRef,
|
|
100
|
-
"__excludeProps":
|
|
92
|
+
"__excludeProps": excludeProps,
|
|
101
93
|
"aria-label": showHint ? hintContent : void 0
|
|
102
94
|
}, _ref)
|
|
103
95
|
}), /* @__PURE__ */ React.createElement(SInner, _ref4.cn("SInner", {
|
|
@@ -9,11 +9,6 @@ SLink {
|
|
|
9
9
|
background: none;
|
|
10
10
|
transition: color 0.15s ease-in-out;
|
|
11
11
|
|
|
12
|
-
&:active,
|
|
13
|
-
&:hover {
|
|
14
|
-
text-decoration: none;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
12
|
&::-moz-focus-inner {
|
|
18
13
|
border: none;
|
|
19
14
|
padding: 0;
|
|
@@ -25,7 +20,7 @@ SLink {
|
|
|
25
20
|
color: var(--intergalactic-text-link-hover-active, #044792);
|
|
26
21
|
|
|
27
22
|
& SText {
|
|
28
|
-
|
|
23
|
+
text-decoration-color: currentColor;
|
|
29
24
|
}
|
|
30
25
|
}
|
|
31
26
|
|
|
@@ -57,10 +52,10 @@ SInner {
|
|
|
57
52
|
}
|
|
58
53
|
|
|
59
54
|
SAddon {
|
|
60
|
-
align-items: baseline;
|
|
61
|
-
vertical-align: -2px;
|
|
62
55
|
pointer-events: none;
|
|
63
|
-
align
|
|
56
|
+
vertical-align: middle;
|
|
57
|
+
display: inline-flex;
|
|
58
|
+
margin-top: -2.5px;
|
|
64
59
|
}
|
|
65
60
|
|
|
66
61
|
SLink SAddon {
|
|
@@ -74,13 +69,13 @@ SLink SAddon {
|
|
|
74
69
|
}
|
|
75
70
|
|
|
76
71
|
SText {
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
72
|
+
text-decoration: underline;
|
|
73
|
+
text-decoration-style: solid;
|
|
74
|
+
text-decoration-thickness: 1px;
|
|
75
|
+
text-decoration-color: transparent;
|
|
76
|
+
text-underline-offset: 17%;
|
|
77
|
+
|
|
78
|
+
transition: text-decoration-color 0.15s ease-in-out;
|
|
84
79
|
}
|
|
85
80
|
|
|
86
81
|
SLink[text-color] {
|
package/lib/types/Link.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { BoxProps } from '@semcore/base-components';
|
|
2
2
|
import type { Intergalactic } from '@semcore/core';
|
|
3
3
|
import { Component } from '@semcore/core';
|
|
4
|
-
import type { TextProps } from '@semcore/typography';
|
|
4
|
+
import type { TextProps, TextHintProps } from '@semcore/typography';
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import type { LinkProps } from './Link.types';
|
|
7
7
|
type State = {
|
|
@@ -16,16 +16,7 @@ declare class RootLink extends Component<LinkProps, typeof RootLink.enhance, nev
|
|
|
16
16
|
containerRef: React.RefObject<HTMLElement | null>;
|
|
17
17
|
state: State;
|
|
18
18
|
componentDidMount(): void;
|
|
19
|
-
getTextProps(
|
|
20
|
-
'use:hintProps': {
|
|
21
|
-
placement?: import("@floating-ui/dom").Placement;
|
|
22
|
-
triggerRef: React.RefObject<HTMLElement | null>;
|
|
23
|
-
timeout?: number | [number, number];
|
|
24
|
-
visible?: boolean;
|
|
25
|
-
defaultVisible?: boolean;
|
|
26
|
-
onVisibleChange?: (visible: boolean, e?: Event) => boolean | void;
|
|
27
|
-
};
|
|
28
|
-
};
|
|
19
|
+
getTextProps(): TextHintProps;
|
|
29
20
|
render(): React.ReactNode;
|
|
30
21
|
}
|
|
31
22
|
declare const Link: Intergalactic.Component<"a", LinkProps, {}, typeof RootLink.enhance> & {
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import type { SimpleHintPopperProps } from '@semcore/base-components';
|
|
2
|
-
import type {
|
|
3
|
-
import type { TextProps } from '@semcore/typography';
|
|
1
|
+
import type { BoxProps, SimpleHintPopperProps } from '@semcore/base-components';
|
|
2
|
+
import type { BaseTextProps } from '@semcore/typography';
|
|
4
3
|
import type React from 'react';
|
|
5
|
-
export type LinkProps =
|
|
4
|
+
export type LinkProps = BoxProps & BaseTextProps & {
|
|
6
5
|
/**
|
|
7
6
|
* CSS property of the display link (inline|inline-block)
|
|
8
7
|
* @default false
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/link",
|
|
3
3
|
"description": "Semrush Link Component",
|
|
4
|
-
"version": "17.0.0-prerelease.
|
|
4
|
+
"version": "17.0.0-prerelease.31",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -14,8 +14,7 @@
|
|
|
14
14
|
"types": "./lib/types/index.d.ts"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@semcore/
|
|
18
|
-
"@semcore/typography": "^17.0.0-prerelease.30"
|
|
17
|
+
"@semcore/typography": "^17.0.0-prerelease.31"
|
|
19
18
|
},
|
|
20
19
|
"peerDependencies": {
|
|
21
20
|
"@semcore/base-components": "^17.0.0 || ^17.0.0-0"
|
|
@@ -26,10 +25,11 @@
|
|
|
26
25
|
"directory": "semcore/link"
|
|
27
26
|
},
|
|
28
27
|
"devDependencies": {
|
|
29
|
-
"@
|
|
30
|
-
"@semcore/
|
|
31
|
-
"@semcore/
|
|
32
|
-
"@semcore/testing-utils": "1.0.0"
|
|
28
|
+
"@floating-ui/dom": "1.7.2",
|
|
29
|
+
"@semcore/core": "17.0.0-prerelease.31",
|
|
30
|
+
"@semcore/base-components": "17.0.0-prerelease.31",
|
|
31
|
+
"@semcore/testing-utils": "1.0.0",
|
|
32
|
+
"@semcore/icon": "16.7.2-prerelease.31"
|
|
33
33
|
},
|
|
34
34
|
"scripts": {
|
|
35
35
|
"build": "pnpm semcore-builder && pnpm vite build"
|