@semcore/feature-highlight 16.3.0 → 17.0.0-prerelease.17
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/components/badge/Badge.js +31 -27
- package/lib/cjs/components/badge/Badge.js.map +1 -1
- package/lib/cjs/components/badge/badge.shadow.css +6 -0
- package/lib/cjs/components/button/Button.js +59 -69
- package/lib/cjs/components/button/Button.js.map +1 -1
- package/lib/cjs/components/checkbox/Checkbox.js +48 -64
- package/lib/cjs/components/checkbox/Checkbox.js.map +1 -1
- package/lib/cjs/components/input/Input.js +27 -36
- package/lib/cjs/components/input/Input.js.map +1 -1
- package/lib/cjs/components/notice/Notice.js +64 -77
- package/lib/cjs/components/notice/Notice.js.map +1 -1
- package/lib/cjs/components/pills/Pills.js +59 -81
- package/lib/cjs/components/pills/Pills.js.map +1 -1
- package/lib/cjs/components/radio/Radio.js +55 -70
- package/lib/cjs/components/radio/Radio.js.map +1 -1
- package/lib/cjs/components/select/Select.js +18 -28
- package/lib/cjs/components/select/Select.js.map +1 -1
- package/lib/cjs/components/switch/Switch.js +52 -67
- package/lib/cjs/components/switch/Switch.js.map +1 -1
- package/lib/cjs/components/tab-line/TabLine.js +58 -80
- package/lib/cjs/components/tab-line/TabLine.js.map +1 -1
- package/lib/cjs/index.js +10 -10
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/inner-components/button-trigger/ButtonTrigger.js +33 -38
- package/lib/cjs/inner-components/button-trigger/ButtonTrigger.js.map +1 -1
- package/lib/cjs/inner-components/sparkle/AnimatedSparkles.js +10 -9
- package/lib/cjs/inner-components/sparkle/AnimatedSparkles.js.map +1 -1
- package/lib/cjs/inner-components/sparkle/Sparkle.js +45 -42
- package/lib/cjs/inner-components/sparkle/Sparkle.js.map +1 -1
- package/lib/cjs/inner-components/sparkle/index.js +3 -3
- package/lib/es6/components/badge/Badge.js +28 -24
- package/lib/es6/components/badge/Badge.js.map +1 -1
- package/lib/es6/components/badge/badge.shadow.css +6 -0
- package/lib/es6/components/button/Button.js +54 -64
- package/lib/es6/components/button/Button.js.map +1 -1
- package/lib/es6/components/checkbox/Checkbox.js +44 -60
- package/lib/es6/components/checkbox/Checkbox.js.map +1 -1
- package/lib/es6/components/input/Input.js +22 -31
- package/lib/es6/components/input/Input.js.map +1 -1
- package/lib/es6/components/notice/Notice.js +56 -69
- package/lib/es6/components/notice/Notice.js.map +1 -1
- package/lib/es6/components/pills/Pills.js +50 -72
- package/lib/es6/components/pills/Pills.js.map +1 -1
- package/lib/es6/components/radio/Radio.js +49 -64
- package/lib/es6/components/radio/Radio.js.map +1 -1
- package/lib/es6/components/select/Select.js +10 -20
- package/lib/es6/components/select/Select.js.map +1 -1
- package/lib/es6/components/switch/Switch.js +49 -64
- package/lib/es6/components/switch/Switch.js.map +1 -1
- package/lib/es6/components/tab-line/TabLine.js +47 -69
- package/lib/es6/components/tab-line/TabLine.js.map +1 -1
- package/lib/es6/inner-components/button-trigger/ButtonTrigger.js +30 -35
- package/lib/es6/inner-components/button-trigger/ButtonTrigger.js.map +1 -1
- package/lib/es6/inner-components/sparkle/AnimatedSparkles.js +8 -7
- package/lib/es6/inner-components/sparkle/AnimatedSparkles.js.map +1 -1
- package/lib/es6/inner-components/sparkle/Sparkle.js +42 -39
- package/lib/es6/inner-components/sparkle/Sparkle.js.map +1 -1
- package/lib/esm/components/badge/Badge.mjs +30 -26
- package/lib/esm/components/badge/badge.shadow.css +6 -0
- package/lib/esm/components/button/Button.mjs +56 -63
- package/lib/esm/components/checkbox/Checkbox.mjs +46 -58
- package/lib/esm/components/input/Input.mjs +24 -32
- package/lib/esm/components/notice/Notice.mjs +58 -59
- package/lib/esm/components/pills/Pills.mjs +52 -71
- package/lib/esm/components/radio/Radio.mjs +51 -62
- package/lib/esm/components/select/Select.mjs +11 -20
- package/lib/esm/components/switch/Switch.mjs +51 -65
- package/lib/esm/components/tab-line/TabLine.mjs +49 -68
- package/lib/esm/inner-components/button-trigger/ButtonTrigger.mjs +31 -35
- package/lib/esm/inner-components/sparkle/AnimatedSparkles.mjs +8 -3
- package/lib/esm/inner-components/sparkle/Sparkle.mjs +44 -38
- package/lib/types/components/badge/Badge.d.ts +11 -3
- package/lib/types/inner-components/sparkle/Sparkle.d.ts +1 -2
- package/package.json +17 -16
|
@@ -1,8 +1,3 @@
|
|
|
1
|
-
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
|
2
|
-
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
3
|
-
import _createClass from "@babel/runtime/helpers/createClass";
|
|
4
|
-
import _callSuper from "@babel/runtime/helpers/callSuper";
|
|
5
|
-
import _inherits from "@babel/runtime/helpers/inherits";
|
|
6
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
7
2
|
import { sstyled as _sstyled } from "@semcore/core";
|
|
8
3
|
import { assignProps as _assignProps } from "@semcore/core";
|
|
@@ -10,82 +5,72 @@ import { Component, createComponent, Root, sstyled, CONTEXT_COMPONENT } from '@s
|
|
|
10
5
|
import Radio, { RadioGroup } from '@semcore/radio';
|
|
11
6
|
import React from 'react';
|
|
12
7
|
/*!__reshadow-styles__:"./radio.shadow.css"*/
|
|
13
|
-
|
|
8
|
+
const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SHighlightedRadio_lds44_gg_{position:relative}.___SHighlightedRadio_lds44_gg_:not(._state_invalid_lds44_gg_) [data-ui-name=\"Value.RadioMark\"]{border-radius:50%;background:var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff))}.___SHighlightedRadio_lds44_gg_:not(._state_invalid_lds44_gg_) [data-ui-name=\"Value.RadioMark\"]::before{content:\"\";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:0;padding:2px;border-radius:50%;border-width:0;pointer-events:none;background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, #ab6cfe, #008ff8));-webkit-mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transform:scale(.9);transition:margin calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,opacity calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,transform calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SHighlightedRadio_lds44_gg_:not(._state_invalid_lds44_gg_) [data-ui-name=\"Value.RadioMark\"]::after{content:\"\";position:absolute;right:0;bottom:0;border-radius:50%;background:var(--intergalactic-bg-primary-neutral, #ffffff);top:50%;left:50%;width:calc(100% - 2px);height:calc(100% - 2px);transition:width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,height calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SHighlightedRadio_lds44_gg_:not(._state_invalid_lds44_gg_) input[data-ui-name=\"RadioFH.Value\"]:focus-visible+[data-ui-name=\"Value.RadioMark\"]::before{margin:-4px;opacity:1;transform:scale(1);transition:inherit}@supports not (-webkit-mask-composite:xor){.___SHighlightedRadio_lds44_gg_:not(._state_invalid_lds44_gg_) input[data-ui-name=\"RadioFH.Value\"]:focus-visible+[data-ui-name=\"Value.RadioMark\"]{outline:0;box-shadow:0 0 0 2px #fff,0 0 0 4px #7078fc}.___SHighlightedRadio_lds44_gg_:not(._state_invalid_lds44_gg_) input[data-ui-name=\"RadioFH.Value\"]:focus-visible+[data-ui-name=\"Value.RadioMark\"]::before{display:none}.___SHighlightedRadio_lds44_gg_:not(._state_invalid_lds44_gg_) input[data-ui-name=\"RadioFH.Value\"]:checked:focus-visible+[data-ui-name=\"Value.RadioMark\"]::before{display:none}}", /*__inner_css_end__*/"lds44_gg_"),
|
|
14
9
|
/*__reshadow_css_end__*/
|
|
15
10
|
{
|
|
16
|
-
"__SHighlightedRadio": "
|
|
17
|
-
"_state_invalid": "
|
|
11
|
+
"__SHighlightedRadio": "___SHighlightedRadio_lds44_gg_",
|
|
12
|
+
"_state_invalid": "_state_invalid_lds44_gg_"
|
|
18
13
|
});
|
|
19
14
|
import { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
args[_key] = arguments[_key];
|
|
26
|
-
}
|
|
27
|
-
_this = _callSuper(this, RadioFHRoot, [].concat(args));
|
|
28
|
-
_defineProperty(_this, "inputRef", /*#__PURE__*/React.createRef());
|
|
29
|
-
_defineProperty(_this, "state", {
|
|
15
|
+
class RadioFHRoot extends Component {
|
|
16
|
+
constructor(...args) {
|
|
17
|
+
super(...args);
|
|
18
|
+
_defineProperty(this, "inputRef", /*#__PURE__*/React.createRef());
|
|
19
|
+
_defineProperty(this, "state", {
|
|
30
20
|
checked: false
|
|
31
21
|
});
|
|
32
|
-
_defineProperty(
|
|
33
|
-
|
|
22
|
+
_defineProperty(this, "setChecked", () => {
|
|
23
|
+
this.setState({
|
|
34
24
|
checked: false
|
|
35
25
|
});
|
|
36
|
-
setTimeout(
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
checked: (_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.checked
|
|
26
|
+
setTimeout(() => {
|
|
27
|
+
this.setState({
|
|
28
|
+
checked: this.inputRef.current?.checked
|
|
40
29
|
});
|
|
41
30
|
});
|
|
42
31
|
});
|
|
43
|
-
return _this;
|
|
44
32
|
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
}
|
|
80
|
-
}]);
|
|
81
|
-
}(Component);
|
|
33
|
+
getValueProps() {
|
|
34
|
+
return {
|
|
35
|
+
ref: this.inputRef,
|
|
36
|
+
onChange: this.setChecked,
|
|
37
|
+
// for click by label / programmatically changed
|
|
38
|
+
onClick: this.setChecked // for click by radio
|
|
39
|
+
};
|
|
40
|
+
}
|
|
41
|
+
getAnimatedSparklesProps() {
|
|
42
|
+
// @ts-ignore
|
|
43
|
+
const {
|
|
44
|
+
size
|
|
45
|
+
} = this.context;
|
|
46
|
+
const checked = this.state.checked;
|
|
47
|
+
return {
|
|
48
|
+
show: checked,
|
|
49
|
+
top: size === 'l' ? '7px' : '5px',
|
|
50
|
+
left: size === 'l' ? '5px' : '3px'
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
render() {
|
|
54
|
+
var _ref = this.asProps,
|
|
55
|
+
_ref2;
|
|
56
|
+
const SHighlightedRadio = Radio;
|
|
57
|
+
const {
|
|
58
|
+
styles,
|
|
59
|
+
Children,
|
|
60
|
+
children: hasChildren
|
|
61
|
+
} = this.asProps;
|
|
62
|
+
return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SHighlightedRadio, _ref2.cn("SHighlightedRadio", {
|
|
63
|
+
..._assignProps({}, _ref)
|
|
64
|
+
}), hasChildren ? /*#__PURE__*/React.createElement(Children, _ref2.cn("Children", {})) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RadioFH.Value, null), /*#__PURE__*/React.createElement(RadioFH.Text, null)));
|
|
65
|
+
}
|
|
66
|
+
}
|
|
82
67
|
_defineProperty(RadioFHRoot, "displayName", 'RadioFH');
|
|
83
68
|
_defineProperty(RadioFHRoot, "style", style);
|
|
84
69
|
// @ts-ignore
|
|
85
70
|
_defineProperty(RadioFHRoot, "contextType", RadioGroup[CONTEXT_COMPONENT]);
|
|
86
|
-
export
|
|
71
|
+
export const RadioFH = createComponent(RadioFHRoot, {
|
|
87
72
|
Text: Radio.Text,
|
|
88
73
|
Value: Radio.Value,
|
|
89
|
-
AnimatedSparkles
|
|
74
|
+
AnimatedSparkles
|
|
90
75
|
});
|
|
91
76
|
//# sourceMappingURL=Radio.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.js","names":["Component","createComponent","Root","sstyled","CONTEXT_COMPONENT","Radio","RadioGroup","React","style","_sstyled","insert","AnimatedSparkles","RadioFHRoot","
|
|
1
|
+
{"version":3,"file":"Radio.js","names":["Component","createComponent","Root","sstyled","CONTEXT_COMPONENT","Radio","RadioGroup","React","style","_sstyled","insert","AnimatedSparkles","RadioFHRoot","constructor","args","_defineProperty","createRef","checked","setState","setTimeout","inputRef","current","getValueProps","ref","onChange","setChecked","onClick","getAnimatedSparklesProps","size","context","state","show","top","left","render","_ref","asProps","_ref2","SHighlightedRadio","styles","Children","children","hasChildren","createElement","cn","_assignProps","Fragment","RadioFH","Value","Text"],"sources":["../../../../src/components/radio/Radio.tsx"],"sourcesContent":["import { Component, createComponent, Root, sstyled, CONTEXT_COMPONENT } from '@semcore/core';\nimport type { RadioProps } from '@semcore/radio';\nimport Radio, { RadioGroup } from '@semcore/radio';\nimport React from 'react';\n\nimport style from './radio.shadow.css';\nimport type { HighlightedRadioComponent } from './Radio.type';\nimport { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';\n\nclass RadioFHRoot extends Component<RadioProps> {\n static displayName = 'RadioFH';\n static style = style;\n // @ts-ignore\n static contextType = RadioGroup[CONTEXT_COMPONENT];\n\n inputRef = React.createRef<HTMLInputElement>();\n\n state = {\n checked: false,\n };\n\n getValueProps() {\n return {\n ref: this.inputRef,\n onChange: this.setChecked, // for click by label / programmatically changed\n onClick: this.setChecked, // for click by radio\n };\n }\n\n getAnimatedSparklesProps() {\n // @ts-ignore\n const { size } = this.context;\n const checked = this.state.checked;\n\n return {\n show: checked,\n top: size === 'l' ? '7px' : '5px',\n left: size === 'l' ? '5px' : '3px',\n };\n }\n\n setChecked = () => {\n this.setState({ checked: false });\n setTimeout(() => {\n this.setState({ checked: this.inputRef.current?.checked });\n });\n };\n\n render() {\n const SHighlightedRadio = Root;\n const { styles, Children, children: hasChildren } = this.asProps;\n\n return sstyled(styles)(\n <SHighlightedRadio render={Radio}>\n {hasChildren\n ? <Children />\n : (\n <>\n <RadioFH.Value />\n <RadioFH.Text />\n </>\n )}\n </SHighlightedRadio>,\n );\n }\n}\n\nexport const RadioFH = createComponent(RadioFHRoot, {\n Text: Radio.Text,\n Value: Radio.Value,\n AnimatedSparkles,\n}) as HighlightedRadioComponent;\n"],"mappings":";;;AAAA,SAASA,SAAS,EAAEC,eAAe,EAAEC,IAAI,EAAEC,OAAO,EAAEC,iBAAiB,QAAQ,eAAe;AAE5F,OAAOC,KAAK,IAAIC,UAAU,QAAQ,gBAAgB;AAClD,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA,MAAAC,KAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;AAAA;AAI1B,SAASC,gBAAgB,QAAQ,iDAAiD;AAElF,MAAMC,WAAW,SAASZ,SAAS,CAAa;EAAAa,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,gCAMnCR,KAAK,CAACS,SAAS,CAAmB,CAAC;IAAAD,eAAA,gBAEtC;MACNE,OAAO,EAAE;IACX,CAAC;IAAAF,eAAA,qBAsBY,MAAM;MACjB,IAAI,CAACG,QAAQ,CAAC;QAAED,OAAO,EAAE;MAAM,CAAC,CAAC;MACjCE,UAAU,CAAC,MAAM;QACf,IAAI,CAACD,QAAQ,CAAC;UAAED,OAAO,EAAE,IAAI,CAACG,QAAQ,CAACC,OAAO,EAAEJ;QAAQ,CAAC,CAAC;MAC5D,CAAC,CAAC;IACJ,CAAC;EAAA;EAzBDK,aAAaA,CAAA,EAAG;IACd,OAAO;MACLC,GAAG,EAAE,IAAI,CAACH,QAAQ;MAClBI,QAAQ,EAAE,IAAI,CAACC,UAAU;MAAE;MAC3BC,OAAO,EAAE,IAAI,CAACD,UAAU,CAAE;IAC5B,CAAC;EACH;EAEAE,wBAAwBA,CAAA,EAAG;IACzB;IACA,MAAM;MAAEC;IAAK,CAAC,GAAG,IAAI,CAACC,OAAO;IAC7B,MAAMZ,OAAO,GAAG,IAAI,CAACa,KAAK,CAACb,OAAO;IAElC,OAAO;MACLc,IAAI,EAAEd,OAAO;MACbe,GAAG,EAAEJ,IAAI,KAAK,GAAG,GAAG,KAAK,GAAG,KAAK;MACjCK,IAAI,EAAEL,IAAI,KAAK,GAAG,GAAG,KAAK,GAAG;IAC/B,CAAC;EACH;EASAM,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAC,OAAA;MAAAC,KAAA;IACP,MAAMC,iBAAiB,GAIMjC,KAAK;IAHlC,MAAM;MAAEkC,MAAM;MAAEC,QAAQ;MAAEC,QAAQ,EAAEC;IAAY,CAAC,GAAG,IAAI,CAACN,OAAO;IAEhE,OAAAC,KAAA,GAAOlC,OAAO,CAACoC,MAAM,CAAC,eACpBhC,KAAA,CAAAoC,aAAA,CAACL,iBAAiB,EAAAD,KAAA,CAAAO,EAAA;MAAA,GAAAC,YAAA,KAAAV,IAAA;IAAA,IACfO,WAAW,gBACRnC,KAAA,CAAAoC,aAAA,CAACH,QAAQ,EAAAH,KAAA,CAAAO,EAAA,gBAAE,CAAC,gBAEVrC,KAAA,CAAAoC,aAAA,CAAApC,KAAA,CAAAuC,QAAA,qBACEvC,KAAA,CAAAoC,aAAA,CAACI,OAAO,CAACC,KAAK,MAAE,CAAC,eACjBzC,KAAA,CAAAoC,aAAA,CAACI,OAAO,CAACE,IAAI,MAAE,CACf,CAES,CAAC;EAExB;AACF;AAAClC,eAAA,CAxDKH,WAAW,iBACM,SAAS;AAAAG,eAAA,CAD1BH,WAAW,WAEAJ,KAAK;AACpB;AAAAO,eAAA,CAHIH,WAAW,iBAIMN,UAAU,CAACF,iBAAiB,CAAC;AAsDpD,OAAO,MAAM2C,OAAO,GAAG9C,eAAe,CAACW,WAAW,EAAE;EAClDqC,IAAI,EAAE5C,KAAK,CAAC4C,IAAI;EAChBD,KAAK,EAAE3C,KAAK,CAAC2C,KAAK;EAClBrC;AACF,CAAC,CAA8B","ignoreList":[]}
|
|
@@ -1,7 +1,3 @@
|
|
|
1
|
-
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
2
|
-
import _createClass from "@babel/runtime/helpers/createClass";
|
|
3
|
-
import _callSuper from "@babel/runtime/helpers/callSuper";
|
|
4
|
-
import _inherits from "@babel/runtime/helpers/inherits";
|
|
5
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
6
2
|
import { assignProps as _assignProps2 } from "@semcore/core";
|
|
7
3
|
import { assignProps as _assignProps } from "@semcore/core";
|
|
@@ -9,30 +5,24 @@ import { createComponent, Root, Component } from '@semcore/core';
|
|
|
9
5
|
import Select from '@semcore/select';
|
|
10
6
|
import React from 'react';
|
|
11
7
|
import { ButtonTriggerFH } from '../../inner-components/button-trigger/ButtonTrigger';
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
return
|
|
8
|
+
class SelectFHRoot extends Component {
|
|
9
|
+
render() {
|
|
10
|
+
var _ref = this.asProps;
|
|
11
|
+
return /*#__PURE__*/React.createElement(Select, _assignProps({}, _ref));
|
|
16
12
|
}
|
|
17
|
-
|
|
18
|
-
return _createClass(SelectFHRoot, [{
|
|
19
|
-
key: "render",
|
|
20
|
-
value: function render() {
|
|
21
|
-
var _ref = this.asProps;
|
|
22
|
-
return /*#__PURE__*/React.createElement(Select, _assignProps({}, _ref));
|
|
23
|
-
}
|
|
24
|
-
}]);
|
|
25
|
-
}(Component);
|
|
13
|
+
}
|
|
26
14
|
_defineProperty(SelectFHRoot, "displayName", 'SelectFH');
|
|
27
15
|
function Trigger(props) {
|
|
28
16
|
var _ref2 = arguments[0];
|
|
29
|
-
|
|
30
|
-
|
|
17
|
+
const {
|
|
18
|
+
Children,
|
|
19
|
+
children: hasChildren
|
|
20
|
+
} = props;
|
|
31
21
|
return /*#__PURE__*/React.createElement(Select.Trigger, _assignProps2({
|
|
32
22
|
"tag": ButtonTriggerFH
|
|
33
23
|
}, _ref2), hasChildren ? /*#__PURE__*/React.createElement(Children, null) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectFH.Trigger.Addon, null), /*#__PURE__*/React.createElement(SelectFH.Trigger.Text, null)));
|
|
34
24
|
}
|
|
35
|
-
export
|
|
25
|
+
export const SelectFH = createComponent(SelectFHRoot, {
|
|
36
26
|
Trigger: [Trigger, {
|
|
37
27
|
Text: ButtonTriggerFH.Text,
|
|
38
28
|
Addon: ButtonTriggerFH.Addon
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","names":["createComponent","Root","Component","Select","React","ButtonTriggerFH","SelectFHRoot","
|
|
1
|
+
{"version":3,"file":"Select.js","names":["createComponent","Root","Component","Select","React","ButtonTriggerFH","SelectFHRoot","render","_ref","asProps","createElement","_assignProps","_defineProperty","Trigger","props","_ref2","arguments[0]","Children","children","hasChildren","_assignProps2","Fragment","SelectFH","Addon","Text","Popper","Menu","Option","List"],"sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import type { IRootComponentProps } from '@semcore/core';\nimport { createComponent, Root, Component } from '@semcore/core';\nimport Select from '@semcore/select';\nimport React from 'react';\n\nimport { ButtonTriggerFH } from '../../inner-components/button-trigger/ButtonTrigger';\n\nclass SelectFHRoot extends Component {\n static displayName = 'SelectFH';\n\n render() {\n return (\n <Root render={Select} />\n );\n }\n}\n\nfunction Trigger(props: IRootComponentProps) {\n const { Children, children: hasChildren } = props;\n\n return (\n <Root render={Select.Trigger} tag={ButtonTriggerFH}>\n {hasChildren\n ? <Children />\n : (\n <>\n <SelectFH.Trigger.Addon />\n <SelectFH.Trigger.Text />\n </>\n )}\n </Root>\n );\n}\n\nexport const SelectFH = createComponent(SelectFHRoot, {\n Trigger: [Trigger, {\n Text: ButtonTriggerFH.Text,\n Addon: ButtonTriggerFH.Addon,\n }],\n Popper: Select.Popper,\n Menu: Select.Menu,\n Option: Select.Option,\n List: Select.List,\n}) as unknown as typeof Select;\n"],"mappings":";;;AACA,SAASA,eAAe,EAAEC,IAAI,EAAEC,SAAS,QAAQ,eAAe;AAChE,OAAOC,MAAM,MAAM,iBAAiB;AACpC,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,eAAe,QAAQ,qDAAqD;AAErF,MAAMC,YAAY,SAASJ,SAAS,CAAC;EAGnCK,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAC,OAAA;IACP,oBACEL,KAAA,CAAAM,aAAA,CAAcP,MAAM,EAAAQ,YAAA,KAAAH,IAAA,CAAG,CAAC;EAE5B;AACF;AAACI,eAAA,CARKN,YAAY,iBACK,UAAU;AASjC,SAASO,OAAOA,CAACC,KAA0B,EAAE;EAAA,IAAAC,KAAA,GAAAC,YAAA;EAC3C,MAAM;IAAEC,QAAQ;IAAEC,QAAQ,EAAEC;EAAY,CAAC,GAAGL,KAAK;EAEjD,oBACEV,KAAA,CAAAM,aAAA,CAAcP,MAAM,CAACU,OAAO,EAAAO,aAAA;IAAA,OAAOf;EAAe,GAAAU,KAAA,GAC/CI,WAAW,gBACRf,KAAA,CAAAM,aAAA,CAACO,QAAQ,MAAE,CAAC,gBAEVb,KAAA,CAAAM,aAAA,CAAAN,KAAA,CAAAiB,QAAA,qBACEjB,KAAA,CAAAM,aAAA,CAACY,QAAQ,CAACT,OAAO,CAACU,KAAK,MAAE,CAAC,eAC1BnB,KAAA,CAAAM,aAAA,CAACY,QAAQ,CAACT,OAAO,CAACW,IAAI,MAAE,CACxB,CAEJ,CAAC;AAEX;AAEA,OAAO,MAAMF,QAAQ,GAAGtB,eAAe,CAACM,YAAY,EAAE;EACpDO,OAAO,EAAE,CAACA,OAAO,EAAE;IACjBW,IAAI,EAAEnB,eAAe,CAACmB,IAAI;IAC1BD,KAAK,EAAElB,eAAe,CAACkB;EACzB,CAAC,CAAC;EACFE,MAAM,EAAEtB,MAAM,CAACsB,MAAM;EACrBC,IAAI,EAAEvB,MAAM,CAACuB,IAAI;EACjBC,MAAM,EAAExB,MAAM,CAACwB,MAAM;EACrBC,IAAI,EAAEzB,MAAM,CAACyB;AACf,CAAC,CAA6B","ignoreList":[]}
|
|
@@ -1,8 +1,3 @@
|
|
|
1
|
-
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
|
2
|
-
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
3
|
-
import _createClass from "@babel/runtime/helpers/createClass";
|
|
4
|
-
import _callSuper from "@babel/runtime/helpers/callSuper";
|
|
5
|
-
import _inherits from "@babel/runtime/helpers/inherits";
|
|
6
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
7
2
|
import { sstyled as _sstyled } from "@semcore/core";
|
|
8
3
|
import { assignProps as _assignProps2 } from "@semcore/core";
|
|
@@ -11,77 +6,67 @@ import { Component, createComponent, Root, sstyled } from '@semcore/core';
|
|
|
11
6
|
import Switch from '@semcore/switch';
|
|
12
7
|
import React from 'react';
|
|
13
8
|
/*!__reshadow-styles__:"./switch.shadow.css"*/
|
|
14
|
-
|
|
9
|
+
const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SToggle_12wh3_gg_{position:relative}.___SToggle_12wh3_gg_::before{content:\"\";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:0;padding:2px;border-radius:inherit;background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, #ab6cfe, #008ff8));-webkit-mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transform:scale(.96);pointer-events:none;transition:opacity calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,transform calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SToggle_12wh3_gg_.__checked_12wh3_gg_{color:var(--intergalactic-control-primary-info, #008ff8);background-image:var(--intergalactic-control-primary-feature-highlight, linear-gradient(90deg, #ab6cfe, #008ff8))}.___SToggle_12wh3_gg_:has(.___SInput_12wh3_gg_:focus-visible){box-shadow:none;outline:0}.___SToggle_12wh3_gg_:has(.___SInput_12wh3_gg_:focus-visible)::before{margin:-4px;opacity:1;transform:scale(1)}@supports not (-webkit-mask-composite:xor){.___SToggle_12wh3_gg_:has(.___SInput_12wh3_gg_:focus-visible){outline:0;box-shadow:0 0 0 2px #fff,0 0 0 4px #7078fc}.___SToggle_12wh3_gg_:has(.___SInput_12wh3_gg_:focus-visible)::before{display:none}}", /*__inner_css_end__*/"12wh3_gg_"),
|
|
15
10
|
/*__reshadow_css_end__*/
|
|
16
11
|
{
|
|
17
|
-
"__SToggle": "
|
|
18
|
-
"_checked": "
|
|
19
|
-
"__SInput": "
|
|
12
|
+
"__SToggle": "___SToggle_12wh3_gg_",
|
|
13
|
+
"_checked": "__checked_12wh3_gg_",
|
|
14
|
+
"__SInput": "___SInput_12wh3_gg_"
|
|
20
15
|
});
|
|
21
16
|
import { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
27
|
-
args[_key] = arguments[_key];
|
|
28
|
-
}
|
|
29
|
-
_this = _callSuper(this, SwitchFHRoot, [].concat(args));
|
|
30
|
-
_defineProperty(_this, "inputRef", /*#__PURE__*/React.createRef());
|
|
31
|
-
return _this;
|
|
17
|
+
class SwitchFHRoot extends Component {
|
|
18
|
+
constructor(...args) {
|
|
19
|
+
super(...args);
|
|
20
|
+
_defineProperty(this, "inputRef", /*#__PURE__*/React.createRef());
|
|
32
21
|
}
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
_ref3;
|
|
67
|
-
var SInput = Switch;
|
|
68
|
-
return _ref3 = sstyled(this.asProps.styles), /*#__PURE__*/React.createElement(SInput, _ref3.cn("SInput", _objectSpread({}, _assignProps({}, _ref))));
|
|
69
|
-
}
|
|
70
|
-
}]);
|
|
71
|
-
}(Component);
|
|
22
|
+
getValueProps() {
|
|
23
|
+
return {
|
|
24
|
+
ref: this.inputRef,
|
|
25
|
+
onChange: () => {
|
|
26
|
+
setTimeout(() => {
|
|
27
|
+
this.forceUpdate();
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
getAnimatedSparklesProps() {
|
|
33
|
+
const {
|
|
34
|
+
size
|
|
35
|
+
} = this.asProps;
|
|
36
|
+
const checked = this.inputRef.current?.checked;
|
|
37
|
+
let left = '4px';
|
|
38
|
+
if (size === 'l') left = '12px';
|
|
39
|
+
if (size === 'xl') left = '14px';
|
|
40
|
+
return {
|
|
41
|
+
show: checked,
|
|
42
|
+
curve: size === 'l' || size === 'xl' ? 9 : undefined,
|
|
43
|
+
left
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
render() {
|
|
47
|
+
var _ref = this.asProps,
|
|
48
|
+
_ref3;
|
|
49
|
+
const SInput = Switch;
|
|
50
|
+
return _ref3 = sstyled(this.asProps.styles), /*#__PURE__*/React.createElement(SInput, _ref3.cn("SInput", {
|
|
51
|
+
..._assignProps({}, _ref)
|
|
52
|
+
}));
|
|
53
|
+
}
|
|
54
|
+
}
|
|
72
55
|
_defineProperty(SwitchFHRoot, "displayName", 'SwitchFH');
|
|
73
56
|
_defineProperty(SwitchFHRoot, "style", style);
|
|
74
57
|
function Value(props) {
|
|
75
58
|
var _ref2 = arguments[0],
|
|
76
59
|
_ref4;
|
|
77
|
-
|
|
78
|
-
return _ref4 = sstyled(props.styles), /*#__PURE__*/React.createElement(SToggle, _ref4.cn("SToggle",
|
|
79
|
-
|
|
80
|
-
|
|
60
|
+
const SToggle = Switch.Value;
|
|
61
|
+
return _ref4 = sstyled(props.styles), /*#__PURE__*/React.createElement(SToggle, _ref4.cn("SToggle", {
|
|
62
|
+
..._assignProps2({
|
|
63
|
+
"onChange": props.onChange
|
|
64
|
+
}, _ref2)
|
|
65
|
+
}));
|
|
81
66
|
}
|
|
82
|
-
export
|
|
67
|
+
export const SwitchFH = createComponent(SwitchFHRoot, {
|
|
83
68
|
Addon: Switch.Addon,
|
|
84
69
|
Value: Value,
|
|
85
|
-
AnimatedSparkles
|
|
70
|
+
AnimatedSparkles
|
|
86
71
|
});
|
|
87
72
|
//# sourceMappingURL=Switch.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.js","names":["Component","createComponent","Root","sstyled","Switch","React","style","_sstyled","insert","AnimatedSparkles","SwitchFHRoot","
|
|
1
|
+
{"version":3,"file":"Switch.js","names":["Component","createComponent","Root","sstyled","Switch","React","style","_sstyled","insert","AnimatedSparkles","SwitchFHRoot","constructor","args","_defineProperty","createRef","getValueProps","ref","inputRef","onChange","setTimeout","forceUpdate","getAnimatedSparklesProps","size","asProps","checked","current","left","show","curve","undefined","render","_ref","_ref3","SInput","styles","createElement","cn","_assignProps","Value","props","_ref2","arguments[0]","_ref4","SToggle","_assignProps2","SwitchFH","Addon"],"sources":["../../../../src/components/switch/Switch.tsx"],"sourcesContent":["import type { IRootComponentProps } from '@semcore/core';\nimport { Component, createComponent, Root, sstyled } from '@semcore/core';\nimport type { SwitchProps } from '@semcore/switch';\nimport Switch from '@semcore/switch';\nimport React from 'react';\n\nimport style from './switch.shadow.css';\nimport type { HighlightedSwitchComponent } from './Switch.type';\nimport { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';\n\nclass SwitchFHRoot extends Component<SwitchProps> {\n static displayName = 'SwitchFH';\n static style = style;\n\n inputRef = React.createRef<HTMLInputElement>();\n\n getValueProps() {\n return {\n ref: this.inputRef,\n onChange: () => {\n setTimeout(() => {\n this.forceUpdate();\n });\n },\n };\n }\n\n getAnimatedSparklesProps() {\n const { size } = this.asProps;\n const checked = this.inputRef.current?.checked;\n let left = '4px';\n if (size === 'l') left = '12px';\n if (size === 'xl') left = '14px';\n\n return {\n show: checked,\n curve: size === 'l' || size === 'xl' ? 9 : undefined,\n left,\n };\n }\n\n render() {\n const SInput = Root;\n return sstyled(this.asProps.styles)(\n <SInput render={Switch} />,\n );\n }\n}\n\nfunction Value(props: IRootComponentProps & { onChange: () => void }) {\n const SToggle = Root;\n\n return sstyled(props.styles)(<SToggle render={Switch.Value} onChange={props.onChange} />);\n}\n\nexport const SwitchFH = createComponent(SwitchFHRoot, {\n Addon: Switch.Addon,\n Value: Value,\n AnimatedSparkles,\n}) as HighlightedSwitchComponent;\n"],"mappings":";;;;AACA,SAASA,SAAS,EAAEC,eAAe,EAAEC,IAAI,EAAEC,OAAO,QAAQ,eAAe;AAEzE,OAAOC,MAAM,MAAM,iBAAiB;AACpC,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA,MAAAC,KAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;AAAA;AAI1B,SAASC,gBAAgB,QAAQ,iDAAiD;AAElF,MAAMC,YAAY,SAASV,SAAS,CAAc;EAAAW,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,gCAIrCR,KAAK,CAACS,SAAS,CAAmB,CAAC;EAAA;EAE9CC,aAAaA,CAAA,EAAG;IACd,OAAO;MACLC,GAAG,EAAE,IAAI,CAACC,QAAQ;MAClBC,QAAQ,EAAEA,CAAA,KAAM;QACdC,UAAU,CAAC,MAAM;UACf,IAAI,CAACC,WAAW,CAAC,CAAC;QACpB,CAAC,CAAC;MACJ;IACF,CAAC;EACH;EAEAC,wBAAwBA,CAAA,EAAG;IACzB,MAAM;MAAEC;IAAK,CAAC,GAAG,IAAI,CAACC,OAAO;IAC7B,MAAMC,OAAO,GAAG,IAAI,CAACP,QAAQ,CAACQ,OAAO,EAAED,OAAO;IAC9C,IAAIE,IAAI,GAAG,KAAK;IAChB,IAAIJ,IAAI,KAAK,GAAG,EAAEI,IAAI,GAAG,MAAM;IAC/B,IAAIJ,IAAI,KAAK,IAAI,EAAEI,IAAI,GAAG,MAAM;IAEhC,OAAO;MACLC,IAAI,EAAEH,OAAO;MACbI,KAAK,EAAEN,IAAI,KAAK,GAAG,IAAIA,IAAI,KAAK,IAAI,GAAG,CAAC,GAAGO,SAAS;MACpDH;IACF,CAAC;EACH;EAEAI,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAR,OAAA;MAAAS,KAAA;IACP,MAAMC,MAAM,GAEM7B,MAAM;IADxB,OAAA4B,KAAA,GAAO7B,OAAO,CAAC,IAAI,CAACoB,OAAO,CAACW,MAAM,CAAC,eACjC7B,KAAA,CAAA8B,aAAA,CAACF,MAAM,EAAAD,KAAA,CAAAI,EAAA;MAAA,GAAAC,YAAA,KAAAN,IAAA;IAAA,EAAkB,CAAC;EAE9B;AACF;AAAClB,eAAA,CArCKH,YAAY,iBACK,UAAU;AAAAG,eAAA,CAD3BH,YAAY,WAEDJ,KAAK;AAqCtB,SAASgC,KAAKA,CAACC,KAAqD,EAAE;EAAA,IAAAC,KAAA,GAAAC,YAAA;IAAAC,KAAA;EACpE,MAAMC,OAAO,GAEiCvC,MAAM,CAACkC,KAAK;EAA1D,OAAAI,KAAA,GAAOvC,OAAO,CAACoC,KAAK,CAACL,MAAM,CAAC,eAAC7B,KAAA,CAAA8B,aAAA,CAACQ,OAAO,EAAAD,KAAA,CAAAN,EAAA;IAAA,GAAAQ,aAAA;MAAA,YAAiCL,KAAK,CAACrB;IAAQ,GAAAsB,KAAA;EAAA,EAAG,CAAC;AAC1F;AAEA,OAAO,MAAMK,QAAQ,GAAG5C,eAAe,CAACS,YAAY,EAAE;EACpDoC,KAAK,EAAE1C,MAAM,CAAC0C,KAAK;EACnBR,KAAK,EAAEA,KAAK;EACZ7B;AACF,CAAC,CAA+B","ignoreList":[]}
|
|
@@ -1,8 +1,3 @@
|
|
|
1
|
-
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
|
2
|
-
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
3
|
-
import _createClass from "@babel/runtime/helpers/createClass";
|
|
4
|
-
import _callSuper from "@babel/runtime/helpers/callSuper";
|
|
5
|
-
import _inherits from "@babel/runtime/helpers/inherits";
|
|
6
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
7
2
|
import { sstyled as _sstyled } from "@semcore/core";
|
|
8
3
|
import { assignProps as _assignProps3 } from "@semcore/core";
|
|
@@ -13,86 +8,69 @@ import SummaryAI from '@semcore/icon/SummaryAI/m';
|
|
|
13
8
|
import TabLine from '@semcore/tab-line';
|
|
14
9
|
import React from 'react';
|
|
15
10
|
/*!__reshadow-styles__:"./tabLine.shadow.css"*/
|
|
16
|
-
|
|
11
|
+
const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SHighlightedItem_1tazm_gg_:focus-visible{outline:0}.___SHighlightedItem_1tazm_gg_:focus-visible::before{opacity:1;transform:scale(1)}.___SHighlightedItem_1tazm_gg_::after{opacity:0;transition:opacity calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}.___SHighlightedItem_1tazm_gg_.__selected_1tazm_gg_::after{opacity:1}@media (hover:hover){.___SHighlightedItem_1tazm_gg_:hover:not(:focus-visible)::after{opacity:1;background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8))}}.___SHighlightedItem_1tazm_gg_::before{content:\"\";position:absolute;z-index:0;top:0;right:0;bottom:0;left:0;height:auto;width:calc(100% + 4px);margin:-4px;padding:2px;box-sizing:content-box;background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, #ab6cfe, #008ff8));-webkit-mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transform:scale(.96);transition:opacity calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,transform calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SHighlightedCaret_1tazm_gg_,.___SHighlightedItem_1tazm_gg_.__selected_1tazm_gg_::after{background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8))}", /*__inner_css_end__*/"1tazm_gg_"),
|
|
17
12
|
/*__reshadow_css_end__*/
|
|
18
13
|
{
|
|
19
|
-
"__SHighlightedCaret": "
|
|
20
|
-
"__SHighlightedItem": "
|
|
21
|
-
"_selected": "
|
|
14
|
+
"__SHighlightedCaret": "___SHighlightedCaret_1tazm_gg_",
|
|
15
|
+
"__SHighlightedItem": "___SHighlightedItem_1tazm_gg_",
|
|
16
|
+
"_selected": "__selected_1tazm_gg_"
|
|
22
17
|
});
|
|
23
18
|
import { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
return
|
|
19
|
+
class TabLineFHRoot extends Component {
|
|
20
|
+
render() {
|
|
21
|
+
var _ref = this.asProps;
|
|
22
|
+
return /*#__PURE__*/React.createElement(TabLine, _assignProps({}, _ref));
|
|
28
23
|
}
|
|
29
|
-
|
|
30
|
-
return _createClass(TabLineFHRoot, [{
|
|
31
|
-
key: "render",
|
|
32
|
-
value: function render() {
|
|
33
|
-
var _ref = this.asProps;
|
|
34
|
-
return /*#__PURE__*/React.createElement(TabLine, _assignProps({}, _ref));
|
|
35
|
-
}
|
|
36
|
-
}]);
|
|
37
|
-
}(Component);
|
|
24
|
+
}
|
|
38
25
|
_defineProperty(TabLineFHRoot, "displayName", 'TabLineFH');
|
|
39
26
|
_defineProperty(TabLineFHRoot, "style", style);
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
45
|
-
args[_key] = arguments[_key];
|
|
46
|
-
}
|
|
47
|
-
_this = _callSuper(this, HighlightedItemRoot, [].concat(args));
|
|
48
|
-
_defineProperty(_this, "state", {
|
|
27
|
+
class HighlightedItemRoot extends Component {
|
|
28
|
+
constructor(...args) {
|
|
29
|
+
super(...args);
|
|
30
|
+
_defineProperty(this, "state", {
|
|
49
31
|
clicked: false
|
|
50
32
|
});
|
|
51
|
-
return _this;
|
|
52
33
|
}
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
34
|
+
handleClick(e) {
|
|
35
|
+
const {
|
|
36
|
+
onClick
|
|
37
|
+
} = this.asProps;
|
|
38
|
+
onClick?.(e);
|
|
39
|
+
this.setState({
|
|
40
|
+
clicked: false
|
|
41
|
+
});
|
|
42
|
+
setTimeout(() => {
|
|
60
43
|
this.setState({
|
|
61
|
-
clicked:
|
|
44
|
+
clicked: true
|
|
62
45
|
});
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
}, {
|
|
77
|
-
key: "render",
|
|
78
|
-
value: function render() {
|
|
79
|
-
var _ref2 = this.asProps,
|
|
80
|
-
_ref4;
|
|
81
|
-
var SHighlightedItem = TabLine.Item;
|
|
82
|
-
return _ref4 = sstyled(this.asProps.styles), /*#__PURE__*/React.createElement(SHighlightedItem, _ref4.cn("SHighlightedItem", _objectSpread({}, _assignProps2({
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
getAddonProps() {
|
|
49
|
+
return {
|
|
50
|
+
clicked: this.state.clicked
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
render() {
|
|
54
|
+
var _ref2 = this.asProps,
|
|
55
|
+
_ref4;
|
|
56
|
+
const SHighlightedItem = TabLine.Item;
|
|
57
|
+
return _ref4 = sstyled(this.asProps.styles), /*#__PURE__*/React.createElement(SHighlightedItem, _ref4.cn("SHighlightedItem", {
|
|
58
|
+
..._assignProps2({
|
|
83
59
|
"onClick": this.handleClick.bind(this)
|
|
84
|
-
}, _ref2)
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
}
|
|
60
|
+
}, _ref2)
|
|
61
|
+
}));
|
|
62
|
+
}
|
|
63
|
+
}
|
|
88
64
|
_defineProperty(HighlightedItemRoot, "displayName", 'HighlightedItem');
|
|
89
65
|
_defineProperty(HighlightedItemRoot, "style", style);
|
|
90
66
|
function HighlightedAddon(props) {
|
|
91
67
|
var _ref3 = arguments[0];
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
68
|
+
const {
|
|
69
|
+
clicked,
|
|
70
|
+
animatedSparkleCount,
|
|
71
|
+
Children,
|
|
72
|
+
children: hasChildren
|
|
73
|
+
} = props;
|
|
96
74
|
return /*#__PURE__*/React.createElement(TabLine.Item.Addon, _assignProps3({}, _ref3), hasChildren ? /*#__PURE__*/React.createElement(Children, null) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SummaryAI, {
|
|
97
75
|
color: "--intergalactic-icon-primary-feature-highlight"
|
|
98
76
|
}), /*#__PURE__*/React.createElement(AnimatedSparkles, {
|
|
@@ -100,7 +78,7 @@ function HighlightedAddon(props) {
|
|
|
100
78
|
count: animatedSparkleCount
|
|
101
79
|
})));
|
|
102
80
|
}
|
|
103
|
-
export
|
|
81
|
+
export const TabLineFH = createComponent(TabLineFHRoot, {
|
|
104
82
|
Item: [TabLine.Item, {
|
|
105
83
|
Text: TabLine.Item.Text,
|
|
106
84
|
Addon: TabLine.Item.Addon
|