@semcore/base-trigger 16.5.0-prerelease.1 → 16.5.0
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/lib/cjs/BaseTrigger.js +49 -35
- package/lib/cjs/BaseTrigger.js.map +1 -1
- package/lib/cjs/ButtonTrigger.js +5 -4
- package/lib/cjs/ButtonTrigger.js.map +1 -1
- package/lib/cjs/FilterTrigger.js +48 -39
- package/lib/cjs/FilterTrigger.js.map +1 -1
- package/lib/cjs/LinkTrigger.js +27 -66
- package/lib/cjs/LinkTrigger.js.map +1 -1
- package/lib/cjs/index.d.js.map +1 -1
- package/lib/cjs/style/base-trigger.shadow.css +4 -4
- package/lib/cjs/style/filter-trigger.shadow.css +1 -5
- package/lib/es6/BaseTrigger.js +45 -31
- package/lib/es6/BaseTrigger.js.map +1 -1
- package/lib/es6/ButtonTrigger.js +5 -4
- package/lib/es6/ButtonTrigger.js.map +1 -1
- package/lib/es6/FilterTrigger.js +45 -36
- package/lib/es6/FilterTrigger.js.map +1 -1
- package/lib/es6/LinkTrigger.js +29 -71
- package/lib/es6/LinkTrigger.js.map +1 -1
- package/lib/es6/index.d.js.map +1 -1
- package/lib/es6/style/base-trigger.shadow.css +4 -4
- package/lib/es6/style/filter-trigger.shadow.css +1 -5
- package/lib/esm/BaseTrigger.mjs +44 -33
- package/lib/esm/ButtonTrigger.mjs +7 -7
- package/lib/esm/FilterTrigger.mjs +30 -25
- package/lib/esm/LinkTrigger.mjs +25 -64
- package/lib/esm/style/base-trigger.shadow.css +4 -4
- package/lib/esm/style/filter-trigger.shadow.css +1 -5
- package/lib/types/index.d.ts +14 -24
- package/package.json +10 -10
- package/lib/cjs/style/link-trigger.shadow.css +0 -96
- package/lib/es6/style/link-trigger.shadow.css +0 -96
- package/lib/esm/style/link-trigger.shadow.css +0 -96
package/lib/cjs/LinkTrigger.js
CHANGED
|
@@ -5,34 +5,19 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports["default"] = void 0;
|
|
8
|
-
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
9
8
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
10
9
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
11
10
|
var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
|
|
12
11
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
13
12
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
14
13
|
var _core = require("@semcore/core");
|
|
14
|
+
var _button = require("@semcore/button");
|
|
15
15
|
var _addonTextChildren = _interopRequireDefault(require("@semcore/core/lib/utils/addonTextChildren"));
|
|
16
|
-
var
|
|
17
|
-
var
|
|
16
|
+
var _findComponent = require("@semcore/core/lib/utils/findComponent");
|
|
17
|
+
var _l = _interopRequireDefault(require("@semcore/icon/ChevronDown/l"));
|
|
18
18
|
var _m = _interopRequireDefault(require("@semcore/icon/ChevronDown/m"));
|
|
19
19
|
var _spin = _interopRequireDefault(require("@semcore/spin"));
|
|
20
20
|
var _react = _interopRequireDefault(require("react"));
|
|
21
|
-
/*!__reshadow-styles__:"./style/link-trigger.shadow.css"*/
|
|
22
|
-
var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SLinkTrigger_1t5t2_gg_{display:inline-flex;align-items:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;vertical-align:middle;font-family:inherit;cursor:pointer;color:var(--intergalactic-text-link, rgb(35, 95, 226));background:0 0;transition:color .15s ease-in-out;border:0}.___SLinkTrigger_1t5t2_gg_.__active_1t5t2_gg_,.___SLinkTrigger_1t5t2_gg_:active{color:var(--intergalactic-text-link-hover-active, rgb(33, 89, 215))}@media (hover:hover){.___SLinkTrigger_1t5t2_gg_:hover{color:var(--intergalactic-text-link-hover-active, rgb(33, 89, 215))}}.___SLinkTrigger_1t5t2_gg_.__active_1t5t2_gg_ .___SText_1t5t2_gg_,.___SLinkTrigger_1t5t2_gg_:active .___SText_1t5t2_gg_{border-color:currentColor}@media (hover:hover){.___SLinkTrigger_1t5t2_gg_:hover .___SText_1t5t2_gg_{border-color:currentColor}}.___SLinkTrigger_1t5t2_gg_ .___SText_1t5t2_gg_{border-bottom-width:1px;border-bottom-style:solid;border-color:transparent;transition:border-bottom-color .15s ease-in-out;text-overflow:ellipsis;overflow:hidden}.___SLinkTrigger_1t5t2_gg_.__color_1t5t2_gg_{color:var(--color_1t5t2)}@media (hover:hover){.___SLinkTrigger_1t5t2_gg_.__color_1t5t2_gg_:hover{filter:brightness(.8)}}.___SLinkTrigger_1t5t2_gg_.__disabled_1t5t2_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);cursor:default;pointer-events:none}.___SAddon_1t5t2_gg_,.___SLinkAddon_1t5t2_gg_{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-bottom:var(--intergalactic-spacing-05x, 2px)}.___SAddon_1t5t2_gg_:not(:only-child):first-child,.___SLinkAddon_1t5t2_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-1x, 4px)}.___SAddon_1t5t2_gg_:not(:only-child):last-child,.___SLinkAddon_1t5t2_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SLinkAddon_1t5t2_gg_{width:16px;height:16px}.___SLinkTrigger_1t5t2_gg_._size_m_1t5t2_gg_{font-size:var(--intergalactic-fs-200, 14px)}.___SLinkTrigger_1t5t2_gg_._size_l_1t5t2_gg_{font-size:var(--intergalactic-fs-300, 16px)}@media (prefers-reduced-motion){.___SLinkTrigger_1t5t2_gg_,.___SLinkTrigger_1t5t2_gg_ .___SText_1t5t2_gg_{transition:none}}", /*__inner_css_end__*/"1t5t2_gg_"),
|
|
23
|
-
/*__reshadow_css_end__*/
|
|
24
|
-
{
|
|
25
|
-
"__SLinkTrigger": "___SLinkTrigger_1t5t2_gg_",
|
|
26
|
-
"_disabled": "__disabled_1t5t2_gg_",
|
|
27
|
-
"__SLinkAddon": "___SLinkAddon_1t5t2_gg_",
|
|
28
|
-
"_size_m": "_size_m_1t5t2_gg_",
|
|
29
|
-
"_size_l": "_size_l_1t5t2_gg_",
|
|
30
|
-
"_active": "__active_1t5t2_gg_",
|
|
31
|
-
"__SText": "___SText_1t5t2_gg_",
|
|
32
|
-
"_color": "__color_1t5t2_gg_",
|
|
33
|
-
"--color": "--color_1t5t2",
|
|
34
|
-
"__SAddon": "___SAddon_1t5t2_gg_"
|
|
35
|
-
});
|
|
36
21
|
var RootLinkTrigger = /*#__PURE__*/function (_Component) {
|
|
37
22
|
function RootLinkTrigger() {
|
|
38
23
|
(0, _classCallCheck2["default"])(this, RootLinkTrigger);
|
|
@@ -41,72 +26,48 @@ var RootLinkTrigger = /*#__PURE__*/function (_Component) {
|
|
|
41
26
|
(0, _inherits2["default"])(RootLinkTrigger, _Component);
|
|
42
27
|
return (0, _createClass2["default"])(RootLinkTrigger, [{
|
|
43
28
|
key: "getTextProps",
|
|
44
|
-
value: function getTextProps() {
|
|
29
|
+
value: function getTextProps(props) {
|
|
45
30
|
var _this$asProps = this.asProps,
|
|
46
31
|
placeholder = _this$asProps.placeholder,
|
|
47
|
-
empty = _this$asProps.empty
|
|
32
|
+
empty = _this$asProps.empty,
|
|
33
|
+
Children = _this$asProps.Children,
|
|
34
|
+
size = _this$asProps.size;
|
|
35
|
+
var content = empty ? placeholder : props.children;
|
|
36
|
+
var addons = (0, _findComponent.findAllComponents)(Children, [LinkTrigger.Addon.displayName]);
|
|
37
|
+
var addonWidth = size >= 600 ? 28 : 20;
|
|
48
38
|
return {
|
|
49
|
-
|
|
50
|
-
empty: empty
|
|
39
|
+
'use:children': content,
|
|
40
|
+
empty: empty,
|
|
41
|
+
'w': "calc(100% - ".concat(addonWidth * (addons.length + 1), "px)")
|
|
51
42
|
};
|
|
52
43
|
}
|
|
53
44
|
}, {
|
|
54
45
|
key: "render",
|
|
55
46
|
value: function render() {
|
|
56
|
-
var _ref = this.asProps
|
|
57
|
-
|
|
58
|
-
var SLinkTrigger = _flexBox.Box;
|
|
47
|
+
var _ref = this.asProps;
|
|
48
|
+
var SLinkTrigger = _button.ButtonLink;
|
|
59
49
|
var SLinkAddon = LinkTrigger.Addon;
|
|
60
50
|
var _this$asProps2 = this.asProps,
|
|
61
51
|
Children = _this$asProps2.Children,
|
|
62
52
|
loading = _this$asProps2.loading,
|
|
63
|
-
styles = _this$asProps2.styles,
|
|
64
53
|
empty = _this$asProps2.empty,
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
"
|
|
72
|
-
|
|
73
|
-
}, _ref))), (0, _addonTextChildren["default"])(Children, LinkTrigger.Text, LinkTrigger.Addon, empty), /*#__PURE__*/_react["default"].createElement(SLinkAddon, _ref4.cn("SLinkAddon", {}), loading ? /*#__PURE__*/_react["default"].createElement(_spin["default"], _ref4.cn("Spin", {
|
|
74
|
-
"size": 'xs',
|
|
75
|
-
"theme": 'currentColor'
|
|
76
|
-
})) : /*#__PURE__*/_react["default"].createElement(_m["default"], _ref4.cn("ChevronDown", {}))));
|
|
54
|
+
disabled = _this$asProps2.disabled,
|
|
55
|
+
size = _this$asProps2.size;
|
|
56
|
+
return /*#__PURE__*/_react["default"].createElement(SLinkTrigger, (0, _core.assignProps)({
|
|
57
|
+
"use:disabled": disabled || loading
|
|
58
|
+
}, _ref), (0, _addonTextChildren["default"])(Children, LinkTrigger.Text, LinkTrigger.Addon, empty), /*#__PURE__*/_react["default"].createElement(SLinkAddon, null, loading ? /*#__PURE__*/_react["default"].createElement(_spin["default"], {
|
|
59
|
+
size: size >= 600 ? 's' : 'xs',
|
|
60
|
+
theme: "currentColor"
|
|
61
|
+
}) : size >= 600 ? /*#__PURE__*/_react["default"].createElement(_l["default"], null) : /*#__PURE__*/_react["default"].createElement(_m["default"], null)));
|
|
77
62
|
}
|
|
78
63
|
}]);
|
|
79
64
|
}(_core.Component);
|
|
80
65
|
(0, _defineProperty2["default"])(RootLinkTrigger, "displayName", 'LinkTrigger');
|
|
81
|
-
(0, _defineProperty2["default"])(RootLinkTrigger, "style", style);
|
|
82
|
-
(0, _defineProperty2["default"])(RootLinkTrigger, "defaultProps", {
|
|
83
|
-
size: 'm'
|
|
84
|
-
});
|
|
85
|
-
(0, _defineProperty2["default"])(RootLinkTrigger, "enhance", [(0, _resolveColorEnhance["default"])()]);
|
|
86
|
-
function Text(props) {
|
|
87
|
-
var _ref2 = arguments[0],
|
|
88
|
-
_ref5;
|
|
89
|
-
var SText = _flexBox.Box;
|
|
90
|
-
var children = props.children,
|
|
91
|
-
styles = props.styles,
|
|
92
|
-
empty = props.empty,
|
|
93
|
-
placeholder = props.placeholder;
|
|
94
|
-
return _ref5 = (0, _core.sstyled)(styles),
|
|
95
|
-
/*#__PURE__*/
|
|
96
|
-
/* "use:" prefix was used for backward compatibility (by lsroman) */
|
|
97
|
-
_react["default"].createElement(SText, _ref5.cn("SText", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
98
|
-
"display-placeholder": empty
|
|
99
|
-
}, _ref2))), empty ? placeholder : children);
|
|
100
|
-
}
|
|
101
|
-
function Addon(props) {
|
|
102
|
-
var _ref3 = arguments[0],
|
|
103
|
-
_ref6;
|
|
104
|
-
var SAddon = _flexBox.Box;
|
|
105
|
-
return _ref6 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SAddon, _ref6.cn("SAddon", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref3))));
|
|
106
|
-
}
|
|
107
66
|
var LinkTrigger = (0, _core.createComponent)(RootLinkTrigger, {
|
|
108
|
-
Text: Text,
|
|
109
|
-
Addon: Addon
|
|
67
|
+
Text: _button.ButtonLink.Text,
|
|
68
|
+
Addon: _button.ButtonLink.Addon
|
|
69
|
+
}, {
|
|
70
|
+
parent: _button.ButtonLink
|
|
110
71
|
});
|
|
111
72
|
var _default = exports["default"] = LinkTrigger;
|
|
112
73
|
//# sourceMappingURL=LinkTrigger.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkTrigger.js","names":["_core","require","_addonTextChildren","_interopRequireDefault","
|
|
1
|
+
{"version":3,"file":"LinkTrigger.js","names":["_core","require","_button","_addonTextChildren","_interopRequireDefault","_findComponent","_l","_m","_spin","_react","RootLinkTrigger","_Component","_classCallCheck2","_callSuper2","arguments","_inherits2","_createClass2","key","value","getTextProps","props","_this$asProps","asProps","placeholder","empty","Children","size","content","children","addons","findAllComponents","LinkTrigger","Addon","displayName","addonWidth","concat","length","render","_ref","SLinkTrigger","ButtonLink","SLinkAddon","_this$asProps2","loading","disabled","createElement","assignProps","addonTextChildren","Text","theme","Component","_defineProperty2","createComponent","parent","_default","exports"],"sources":["../../src/LinkTrigger.jsx"],"sourcesContent":["import { ButtonLink } from '@semcore/button';\nimport { createComponent, Component, Root } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport { findAllComponents } from '@semcore/core/lib/utils/findComponent';\nimport ChevronDownL from '@semcore/icon/ChevronDown/l';\nimport ChevronDownM from '@semcore/icon/ChevronDown/m';\nimport Spin from '@semcore/spin';\nimport React from 'react';\n\nclass RootLinkTrigger extends Component {\n static displayName = 'LinkTrigger';\n\n getTextProps(props) {\n const { placeholder, empty, Children, size } = this.asProps;\n const content = empty ? placeholder : props.children;\n const addons = findAllComponents(Children, [LinkTrigger.Addon.displayName]);\n const addonWidth = size >= 600 ? 28 : 20;\n\n return {\n 'use:children': content,\n empty,\n 'w': `calc(100% - ${addonWidth * (addons.length + 1)}px)`,\n };\n }\n\n render() {\n const SLinkTrigger = Root;\n const SLinkAddon = LinkTrigger.Addon;\n const { Children, loading, empty, disabled, size } = this.asProps;\n\n return (\n <SLinkTrigger\n render={ButtonLink}\n use:disabled={disabled || loading}\n >\n {addonTextChildren(Children, LinkTrigger.Text, LinkTrigger.Addon, empty)}\n <SLinkAddon>\n {loading\n ? <Spin size={size >= 600 ? 's' : 'xs'} theme='currentColor' />\n : size >= 600 ? <ChevronDownL /> : <ChevronDownM />}\n </SLinkAddon>\n </SLinkTrigger>\n );\n }\n}\n\nconst LinkTrigger = createComponent(RootLinkTrigger, {\n Text: ButtonLink.Text,\n Addon: ButtonLink.Addon,\n}, {\n parent: ButtonLink,\n});\n\nexport default LinkTrigger;\n"],"mappings":"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","ignoreList":[]}
|
package/lib/cjs/index.d.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { Box, BoxProps, NeighborItemProps } from '@semcore/base-components';\nimport type { ButtonLinkProps, ButtonLink } from '@semcore/button';\nimport type { Intergalactic } from '@semcore/core';\nimport type { WithAnimatedSizeEnhanceProps } from '@semcore/core/lib/utils/enhances/animatedSizeEnhance';\nimport type { CounterProps } from '@semcore/counter';\nimport type { Text } from '@semcore/typography';\nimport type React from 'react';\n\nexport type BaseTriggerProps = BoxProps &\n NeighborItemProps &\n WithAnimatedSizeEnhanceProps & {\n /**\n * Trigger size\n * @default m\n */\n size?: 'm' | 'l';\n /**\n * Trigger state\n */\n state?: 'normal' | 'valid' | 'invalid';\n /**\n * Sets active state to trigger\n */\n active?: boolean;\n /**\n * Responsible for placeholder displaying\n */\n empty?: boolean;\n /**\n * Placeholder text\n */\n placeholder?: React.ReactNode;\n /**\n * Sets disabled state to trigger\n */\n disabled?: boolean;\n };\n\nexport type ButtonTriggerProps = Omit<BaseTriggerProps, 'theme'> & {\n /** Sets the loading state */\n loading?: boolean;\n /**\n * Display the dropdowns chevron icon\n * @default true\n */\n chevron?: boolean;\n};\n\nexport type LinkTriggerProps = ButtonLinkProps & {\n /** Sets the loading state */\n loading?: boolean;\n /** Placeholder text */\n placeholder?: React.ReactNode;\n /** Responsible for placeholder displaying */\n empty?: boolean;\n};\n\nexport type FilterTriggerProps = BaseTriggerProps & {\n /** Click on the filter cleaning cross */\n onClear?: (event: React.SyntheticEvent) => void;\n /** Specifies the locale for i18n support */\n locale?: string;\n /** List of props that will be added to the select inside of filter */\n includeInputProps?: string[];\n /** Normal `ref` prop refers to FilterTrigger wrapper while `triggerRef` refers explicitly to trigger button */\n triggerRef?: React.Ref<HTMLButtonElement>;\n};\n\nexport type FilterTriggerCounterProps = {\n /** Count for render */\n count?: number;\n};\n\ndeclare const BaseTrigger: Intergalactic.Component<'div', BaseTriggerProps> & {\n Text: typeof Text;\n Addon: typeof Box;\n};\n\ndeclare const ButtonTrigger: Intergalactic.Component<'div', ButtonTriggerProps> & {\n Text: typeof BaseTrigger.Text;\n Addon: typeof BaseTrigger.Addon;\n};\n\ndeclare const LinkTrigger: Intergalactic.Component<'div', LinkTriggerProps> & {\n Text: typeof ButtonLink.Text;\n Addon: typeof ButtonLink.Addon;\n};\n\ndeclare const FilterTrigger: Intergalactic.Component<'div', FilterTriggerProps> & {\n Text: typeof BaseTrigger.Text;\n Addon: typeof BaseTrigger.Addon;\n Counter: Intergalactic.Component<'div', CounterProps & FilterTriggerCounterProps>;\n TriggerButton: typeof BaseTrigger;\n ClearButton: typeof BaseTrigger;\n};\n\nexport default BaseTrigger;\nexport { ButtonTrigger, LinkTrigger, FilterTrigger };\n"],"mappings":"","ignoreList":[]}
|
|
@@ -36,7 +36,7 @@ SBaseTrigger {
|
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
&:focus-visible {
|
|
39
|
-
border: 1px solid var(--intergalactic-border-info-active, oklch(0.
|
|
39
|
+
border: 1px solid var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2));
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
&:hover {
|
|
@@ -45,7 +45,7 @@ SBaseTrigger {
|
|
|
45
45
|
|
|
46
46
|
&:active,
|
|
47
47
|
&[active] {
|
|
48
|
-
border-color: var(--intergalactic-border-info-active, oklch(0.
|
|
48
|
+
border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2));
|
|
49
49
|
background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
|
|
50
50
|
}
|
|
51
51
|
}
|
|
@@ -164,11 +164,11 @@ SText[display-placeholder] {
|
|
|
164
164
|
}
|
|
165
165
|
|
|
166
166
|
SBaseTrigger[state='valid'] {
|
|
167
|
-
border-color: var(--intergalactic-border-success-active, oklch(0.
|
|
167
|
+
border-color: var(--intergalactic-border-success-active, oklch(0.7 0.166 170));
|
|
168
168
|
}
|
|
169
169
|
|
|
170
170
|
SBaseTrigger[state='invalid'] {
|
|
171
|
-
border-color: var(--intergalactic-border-critical-active, oklch(0.
|
|
171
|
+
border-color: var(--intergalactic-border-critical-active, oklch(0.7 0.21 23));
|
|
172
172
|
|
|
173
173
|
&:focus-visible {
|
|
174
174
|
outline-color: var(--intergalactic-keyboard-focus-invalid-outline, oklch(0.628 0.257 28.9 / 0.652));
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
SFilterTrigger[selected] {
|
|
2
|
-
border-color: var(--intergalactic-border-info-active, oklch(0.
|
|
2
|
+
border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2));
|
|
3
3
|
background-color: var(--intergalactic-control-secondary-info, oklch(0.527 0.264 262.9 / 0.039));
|
|
4
4
|
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
|
|
5
5
|
|
|
@@ -20,7 +20,3 @@ SWrapper {
|
|
|
20
20
|
outline: none;
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
|
-
|
|
24
|
-
SCounter {
|
|
25
|
-
background-color: var(--intergalactic-bg-primary-info, oklch(0.64 0.152 276.7));
|
|
26
|
-
}
|
package/lib/es6/BaseTrigger.js
CHANGED
|
@@ -8,39 +8,44 @@ import { sstyled as _sstyled } from "@semcore/core";
|
|
|
8
8
|
import { assignProps as _assignProps3 } from "@semcore/core";
|
|
9
9
|
import { assignProps as _assignProps2 } from "@semcore/core";
|
|
10
10
|
import { assignProps as _assignProps } from "@semcore/core";
|
|
11
|
+
import { NeighborLocation, Box, InvalidStateBox } from '@semcore/base-components';
|
|
11
12
|
import { createComponent, Component, Root, sstyled } from '@semcore/core';
|
|
12
13
|
import addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';
|
|
13
14
|
import animatedSizeEnhance from '@semcore/core/lib/utils/enhances/animatedSizeEnhance';
|
|
14
|
-
import logger from '@semcore/core/lib/utils/logger';
|
|
15
15
|
import { cssVariableEnhance } from '@semcore/core/lib/utils/useCssVariable';
|
|
16
|
-
import {
|
|
17
|
-
import NeighborLocation from '@semcore/neighbor-location';
|
|
16
|
+
import { Text as TextKit } from '@semcore/typography';
|
|
18
17
|
import React from 'react';
|
|
19
18
|
/*!__reshadow-styles__:"./style/base-trigger.shadow.css"*/
|
|
20
|
-
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".
|
|
19
|
+
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SBaseTrigger_y9ta2_gg_{display:inline-block;align-items:center;justify-content:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;background:var(--intergalactic-bg-primary-neutral, rgb(255, 255, 255));font-weight:var(--intergalactic-regular, 400);border:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161));color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899))}@supports (color:color(display-p3 0 0 0%)){.___SBaseTrigger_y9ta2_gg_{border:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___SBaseTrigger_y9ta2_gg_{border:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___SBaseTrigger_y9ta2_gg_::-moz-focus-inner{border:0;padding:0}.___SBaseTrigger_y9ta2_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SBaseTrigger_y9ta2_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___SBaseTrigger_y9ta2_gg_:focus-visible{border:1px solid var(--intergalactic-border-info-active, rgb(135, 150, 239))}@media (hover:hover){.___SBaseTrigger_y9ta2_gg_:hover{background-color:var(--intergalactic-bg-primary-neutral-hover, rgb(248, 249, 248))}}.___SBaseTrigger_y9ta2_gg_.__active_y9ta2_gg_,.___SBaseTrigger_y9ta2_gg_:active{border-color:var(--intergalactic-border-info-active, rgb(135, 150, 239));background-color:var(--intergalactic-bg-primary-neutral, rgb(255, 255, 255))}.___SBaseTrigger_y9ta2_gg_.__disabled_y9ta2_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);cursor:default;pointer-events:none}.___SInner_y9ta2_gg_{display:inline-flex;align-items:center;justify-content:center;height:100%;width:100%}.___SText_y9ta2_gg_{display:inline;padding:1px 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:var(--intergalactic-lh-200, 142%);flex-grow:1;text-align:left}.___SAddon_y9ta2_gg_{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;pointer-events:none}.___SBaseAddon_y9ta2_gg_{width:12px;height:12px}.___SBaseTrigger_y9ta2_gg_._size_m_y9ta2_gg_{min-width:26px;height:28px;border-radius:var(--intergalactic-control-rounded, 6px);padding:0 var(--intergalactic-spacing-2x, 8px);font-size:var(--intergalactic-fs-200, 14px)}.___SBaseTrigger_y9ta2_gg_._size_m_y9ta2_gg_ .___SAddon_y9ta2_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SBaseTrigger_y9ta2_gg_._size_m_y9ta2_gg_ .___SAddon_y9ta2_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SBaseTrigger_y9ta2_gg_._size_l_y9ta2_gg_ .___SAddon_y9ta2_gg_:only-child,.___SBaseTrigger_y9ta2_gg_._size_m_y9ta2_gg_ .___SAddon_y9ta2_gg_:only-child{margin-left:calc(-1*var(--intergalactic-spacing-1x, 4px));margin-right:calc(-1*var(--intergalactic-spacing-1x, 4px))}.___SBaseTrigger_y9ta2_gg_._size_l_y9ta2_gg_{min-width:32px;height:40px;border-radius:var(--intergalactic-control-rounded, 6px);padding:0 var(--intergalactic-spacing-3x, 12px);font-size:var(--intergalactic-fs-300, 16px)}.___SBaseTrigger_y9ta2_gg_._size_l_y9ta2_gg_ .___SAddon_y9ta2_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SBaseTrigger_y9ta2_gg_._size_l_y9ta2_gg_ .___SAddon_y9ta2_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SBaseTrigger_y9ta2_gg_._neighborLocation_right_y9ta2_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SBaseTrigger_y9ta2_gg_._neighborLocation_both_y9ta2_gg_{border-radius:0;margin-left:-1px}.___SBaseTrigger_y9ta2_gg_._neighborLocation_left_y9ta2_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.___SBaseTrigger_y9ta2_gg_._neighborLocation_left_y9ta2_gg_.__disabled_y9ta2_gg_{border-left:none;margin-left:0}.___SText_y9ta2_gg_.__display-placeholder_y9ta2_gg_{color:var(--intergalactic-text-placeholder, rgba(0, 5, 2, 0.457))}.___SBaseTrigger_y9ta2_gg_._state_valid_y9ta2_gg_{border-color:var(--intergalactic-border-success-active, rgb(0, 185, 145))}@supports (color:color(display-p3 0 0 0%)){.___SBaseTrigger_y9ta2_gg_._state_valid_y9ta2_gg_{border-color:var(--intergalactic-border-success-active, rgb(0, 185, 145))}@media (color-gamut:p3){.___SBaseTrigger_y9ta2_gg_._state_valid_y9ta2_gg_{border-color:var(--intergalactic-border-success-active, color(display-p3 0.21847 0.73243 0.56937))}}}.___SBaseTrigger_y9ta2_gg_._state_invalid_y9ta2_gg_{border-color:var(--intergalactic-border-critical-active, rgb(255, 99, 100))}@supports (color:color(display-p3 0 0 0%)){.___SBaseTrigger_y9ta2_gg_._state_invalid_y9ta2_gg_{border-color:var(--intergalactic-border-critical-active, rgb(255, 99, 100))}@media (color-gamut:p3){.___SBaseTrigger_y9ta2_gg_._state_invalid_y9ta2_gg_{border-color:var(--intergalactic-border-critical-active, color(display-p3 0.95478 0.398 0.38923))}}}.___SBaseTrigger_y9ta2_gg_._state_invalid_y9ta2_gg_:focus-visible{outline-color:var(--intergalactic-keyboard-focus-invalid-outline, rgba(255, 2, 7, 0.652))}.___SInvalidPattern_y9ta2_gg_._size_m_y9ta2_gg_{margin-left:calc(-1*var(--intergalactic-spacing-2x, 8px))}.___SInvalidPattern_y9ta2_gg_._size_l_y9ta2_gg_{margin-left:calc(-1*var(--intergalactic-spacing-3x, 12px))}", /*__inner_css_end__*/"y9ta2_gg_"),
|
|
21
20
|
/*__reshadow_css_end__*/
|
|
22
21
|
{
|
|
23
|
-
"__SBaseTrigger": "
|
|
24
|
-
"_disabled": "
|
|
25
|
-
"__SInner": "
|
|
26
|
-
"__SText": "
|
|
27
|
-
"__SAddon": "
|
|
28
|
-
"__SBaseAddon": "
|
|
29
|
-
"_neighborLocation_right": "
|
|
30
|
-
"_neighborLocation_both": "
|
|
31
|
-
"_display-placeholder": "__display-
|
|
32
|
-
"_state_valid": "
|
|
33
|
-
"__SInvalidPattern": "
|
|
34
|
-
"_size_m": "
|
|
35
|
-
"_size_l": "
|
|
36
|
-
"_active": "
|
|
37
|
-
"_neighborLocation_left": "
|
|
38
|
-
"_state_invalid": "
|
|
22
|
+
"__SBaseTrigger": "___SBaseTrigger_y9ta2_gg_",
|
|
23
|
+
"_disabled": "__disabled_y9ta2_gg_",
|
|
24
|
+
"__SInner": "___SInner_y9ta2_gg_",
|
|
25
|
+
"__SText": "___SText_y9ta2_gg_",
|
|
26
|
+
"__SAddon": "___SAddon_y9ta2_gg_",
|
|
27
|
+
"__SBaseAddon": "___SBaseAddon_y9ta2_gg_",
|
|
28
|
+
"_neighborLocation_right": "_neighborLocation_right_y9ta2_gg_",
|
|
29
|
+
"_neighborLocation_both": "_neighborLocation_both_y9ta2_gg_",
|
|
30
|
+
"_display-placeholder": "__display-placeholder_y9ta2_gg_",
|
|
31
|
+
"_state_valid": "_state_valid_y9ta2_gg_",
|
|
32
|
+
"__SInvalidPattern": "___SInvalidPattern_y9ta2_gg_",
|
|
33
|
+
"_size_m": "_size_m_y9ta2_gg_",
|
|
34
|
+
"_size_l": "_size_l_y9ta2_gg_",
|
|
35
|
+
"_active": "__active_y9ta2_gg_",
|
|
36
|
+
"_neighborLocation_left": "_neighborLocation_left_y9ta2_gg_",
|
|
37
|
+
"_state_invalid": "_state_invalid_y9ta2_gg_"
|
|
39
38
|
});
|
|
40
39
|
var RootBaseTrigger = /*#__PURE__*/function (_Component) {
|
|
41
40
|
function RootBaseTrigger() {
|
|
41
|
+
var _this;
|
|
42
42
|
_classCallCheck(this, RootBaseTrigger);
|
|
43
|
-
|
|
43
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
44
|
+
args[_key] = arguments[_key];
|
|
45
|
+
}
|
|
46
|
+
_this = _callSuper(this, RootBaseTrigger, [].concat(args));
|
|
47
|
+
_defineProperty(_this, "triggerRef", /*#__PURE__*/React.createRef());
|
|
48
|
+
return _this;
|
|
44
49
|
}
|
|
45
50
|
_inherits(RootBaseTrigger, _Component);
|
|
46
51
|
return _createClass(RootBaseTrigger, [{
|
|
@@ -51,14 +56,15 @@ var RootBaseTrigger = /*#__PURE__*/function (_Component) {
|
|
|
51
56
|
empty = _this$asProps.empty;
|
|
52
57
|
return {
|
|
53
58
|
placeholder: placeholder,
|
|
54
|
-
empty: empty
|
|
59
|
+
empty: empty,
|
|
60
|
+
triggerRef: this.triggerRef
|
|
55
61
|
};
|
|
56
62
|
}
|
|
57
63
|
}, {
|
|
58
64
|
key: "render",
|
|
59
65
|
value: function render() {
|
|
60
66
|
var _ref = this.asProps,
|
|
61
|
-
|
|
67
|
+
_this2 = this;
|
|
62
68
|
var SBaseTrigger = Box;
|
|
63
69
|
var SInner = 'span';
|
|
64
70
|
var SInvalidPattern = InvalidStateBox;
|
|
@@ -70,7 +76,6 @@ var RootBaseTrigger = /*#__PURE__*/function (_Component) {
|
|
|
70
76
|
empty = _this$asProps2.empty,
|
|
71
77
|
state = _this$asProps2.state,
|
|
72
78
|
size = _this$asProps2.size;
|
|
73
|
-
logger.warn(theme !== undefined, 'The \'theme\' property is deprecated, use \'state\'', this.asProps['data-ui-name'] || BaseTrigger.displayName);
|
|
74
79
|
|
|
75
80
|
// TODO: add aria
|
|
76
81
|
return /*#__PURE__*/React.createElement(NeighborLocation.Detect, {
|
|
@@ -82,11 +87,12 @@ var RootBaseTrigger = /*#__PURE__*/function (_Component) {
|
|
|
82
87
|
"type": 'button',
|
|
83
88
|
"tabIndex": 0,
|
|
84
89
|
"neighborLocation": neighborLocation,
|
|
85
|
-
"state": theme
|
|
90
|
+
"state": theme,
|
|
91
|
+
"ref": _this2.triggerRef
|
|
86
92
|
}, _ref))), state === 'invalid' && /*#__PURE__*/React.createElement(SInvalidPattern, _ref4.cn("SInvalidPattern", {
|
|
87
93
|
"size": size
|
|
88
94
|
})), /*#__PURE__*/React.createElement(SInner, _ref4.cn("SInner", {
|
|
89
|
-
"data-ui-name": "".concat(
|
|
95
|
+
"data-ui-name": "".concat(_this2.asProps['data-ui-name'], ".InnerTriggerWrapper")
|
|
90
96
|
}), addonTextChildren(Children, BaseTrigger.Text, BaseTrigger.Addon, empty)));
|
|
91
97
|
});
|
|
92
98
|
}
|
|
@@ -110,15 +116,23 @@ _defineProperty(RootBaseTrigger, "defaultProps", {
|
|
|
110
116
|
function Text(props) {
|
|
111
117
|
var _ref2 = arguments[0],
|
|
112
118
|
_ref5;
|
|
113
|
-
var SText =
|
|
119
|
+
var SText = TextKit;
|
|
120
|
+
var textRef = React.useRef();
|
|
114
121
|
var children = props.children,
|
|
115
122
|
styles = props.styles,
|
|
116
123
|
empty = props.empty,
|
|
117
|
-
placeholder = props.placeholder
|
|
118
|
-
|
|
124
|
+
placeholder = props.placeholder,
|
|
125
|
+
triggerRef = props.triggerRef,
|
|
126
|
+
_props$ellipsis = props.ellipsis,
|
|
127
|
+
ellipsis = _props$ellipsis === void 0 ? false : _props$ellipsis;
|
|
128
|
+
var content = empty ? placeholder : children;
|
|
129
|
+
return _ref5 = sstyled(styles), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SText, _ref5.cn("SText", _objectSpread({}, _assignProps2({
|
|
119
130
|
"display-placeholder": empty,
|
|
120
|
-
"aria-hidden": empty
|
|
121
|
-
|
|
131
|
+
"aria-hidden": empty,
|
|
132
|
+
"ref": textRef,
|
|
133
|
+
"ellipsis": ellipsis,
|
|
134
|
+
"hint:triggerRef": triggerRef
|
|
135
|
+
}, _ref2))), content));
|
|
122
136
|
}
|
|
123
137
|
function Addon(props) {
|
|
124
138
|
var _ref3 = arguments[0],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseTrigger.js","names":["createComponent","Component","Root","sstyled","addonTextChildren","animatedSizeEnhance","
|
|
1
|
+
{"version":3,"file":"BaseTrigger.js","names":["NeighborLocation","Box","InvalidStateBox","createComponent","Component","Root","sstyled","addonTextChildren","animatedSizeEnhance","cssVariableEnhance","Text","TextKit","React","style","_sstyled","insert","RootBaseTrigger","_Component","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","concat","_defineProperty","createRef","_inherits","_createClass","key","value","getTextProps","_this$asProps","asProps","placeholder","empty","triggerRef","render","_ref","_this2","SBaseTrigger","SInner","SInvalidPattern","_this$asProps2","Children","styles","theme","neighborLocation","state","size","createElement","Detect","_ref4","cn","_objectSpread","_assignProps","BaseTrigger","Addon","variable","fallback","map","Number","parseInt","prop","animateProps","onChangeOf","props","_ref2","arguments[0]","_ref5","SText","textRef","useRef","children","_props$ellipsis","ellipsis","content","Fragment","_assignProps2","_ref3","_ref6","SAddon","_assignProps3"],"sources":["../../src/BaseTrigger.jsx"],"sourcesContent":["import { NeighborLocation, Box, InvalidStateBox } from '@semcore/base-components';\nimport { createComponent, Component, Root, sstyled } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport animatedSizeEnhance from '@semcore/core/lib/utils/enhances/animatedSizeEnhance';\nimport { cssVariableEnhance } from '@semcore/core/lib/utils/useCssVariable';\nimport { Text as TextKit } from '@semcore/typography';\nimport React from 'react';\n\nimport style from './style/base-trigger.shadow.css';\n\nclass RootBaseTrigger extends Component {\n static displayName = 'BaseTrigger';\n static enhance = [\n cssVariableEnhance({\n variable: '--intergalactic-duration-control',\n fallback: '200',\n map: Number.parseInt,\n prop: 'duration',\n }),\n animatedSizeEnhance({\n animateProps: ['width'],\n onChangeOf: ['value'],\n }),\n ];\n\n static style = style;\n static defaultProps = {\n size: 'm',\n empty: false,\n };\n\n triggerRef = React.createRef();\n\n getTextProps() {\n const { placeholder, empty } = this.asProps;\n return {\n placeholder,\n empty,\n triggerRef: this.triggerRef,\n };\n }\n\n render() {\n const SBaseTrigger = Root;\n const SInner = 'span';\n const SInvalidPattern = InvalidStateBox;\n const { Children, styles, theme, neighborLocation, empty, state, size } = this.asProps;\n\n // TODO: add aria\n return (\n <NeighborLocation.Detect neighborLocation={neighborLocation}>\n {(neighborLocation) =>\n sstyled(styles)(\n <SBaseTrigger\n render={Box}\n tag='button'\n type='button'\n tabIndex={0}\n neighborLocation={neighborLocation}\n state={theme}\n ref={this.triggerRef}\n >\n {state === 'invalid' && <SInvalidPattern size={size} />}\n <SInner data-ui-name={`${this.asProps['data-ui-name']}.InnerTriggerWrapper`}>\n {addonTextChildren(Children, BaseTrigger.Text, BaseTrigger.Addon, empty)}\n </SInner>\n </SBaseTrigger>,\n )}\n </NeighborLocation.Detect>\n );\n }\n}\n\nfunction Text(props) {\n const SText = Root;\n const textRef = React.useRef();\n const { children, styles, empty, placeholder, triggerRef, ellipsis = false } = props;\n const content = empty ? placeholder : children;\n\n return sstyled(styles)(\n <>\n <SText\n render={TextKit}\n display-placeholder={empty}\n aria-hidden={empty}\n ref={textRef}\n ellipsis={ellipsis}\n hint:triggerRef={triggerRef}\n >\n {content}\n </SText>\n </>,\n );\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n const { styles } = props;\n return sstyled(styles)(<SAddon render={Box} />);\n}\n\nconst BaseTrigger = createComponent(RootBaseTrigger, {\n Text,\n Addon,\n});\n\nexport default BaseTrigger;\n"],"mappings":";;;;;;;;;;AAAA,SAASA,gBAAgB,EAAEC,GAAG,EAAEC,eAAe,QAAQ,0BAA0B;AACjF,SAASC,eAAe,EAAEC,SAAS,EAAEC,IAAI,EAAEC,OAAO,QAAQ,eAAe;AACzE,OAAOC,iBAAiB,MAAM,2CAA2C;AACzE,OAAOC,mBAAmB,MAAM,sDAAsD;AACtF,SAASC,kBAAkB,QAAQ,wCAAwC;AAC3E,SAASC,IAAI,IAAIC,OAAO,QAAQ,qBAAqB;AACrD,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA,IAAAC,KAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAAA,IAIpBC,eAAe,0BAAAC,UAAA;EAAA,SAAAD,gBAAA;IAAA,IAAAE,KAAA;IAAAC,eAAA,OAAAH,eAAA;IAAA,SAAAI,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;MAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;IAAA;IAAAP,KAAA,GAAAQ,UAAA,OAAAV,eAAA,KAAAW,MAAA,CAAAJ,IAAA;IAAAK,eAAA,CAAAV,KAAA,6BAqBNN,KAAK,CAACiB,SAAS,CAAC,CAAC;IAAA,OAAAX,KAAA;EAAA;EAAAY,SAAA,CAAAd,eAAA,EAAAC,UAAA;EAAA,OAAAc,YAAA,CAAAf,eAAA;IAAAgB,GAAA;IAAAC,KAAA,EAE9B,SAAAC,YAAYA,CAAA,EAAG;MACb,IAAAC,aAAA,GAA+B,IAAI,CAACC,OAAO;QAAnCC,WAAW,GAAAF,aAAA,CAAXE,WAAW;QAAEC,KAAK,GAAAH,aAAA,CAALG,KAAK;MAC1B,OAAO;QACLD,WAAW,EAAXA,WAAW;QACXC,KAAK,EAALA,KAAK;QACLC,UAAU,EAAE,IAAI,CAACA;MACnB,CAAC;IACH;EAAC;IAAAP,GAAA;IAAAC,KAAA,EAED,SAAAO,MAAMA,CAAA,EAAG;MAAA,IAAAC,IAAA,QAAAL,OAAA;QAAAM,MAAA;MACP,IAAMC,YAAY,GAWA1C,GAAG;MAVrB,IAAM2C,MAAM,GAAG,MAAM;MACrB,IAAMC,eAAe,GAAG3C,eAAe;MACvC,IAAA4C,cAAA,GAA0E,IAAI,CAACV,OAAO;QAA9EW,QAAQ,GAAAD,cAAA,CAARC,QAAQ;QAAEC,MAAM,GAAAF,cAAA,CAANE,MAAM;QAAEC,KAAK,GAAAH,cAAA,CAALG,KAAK;QAAEC,gBAAgB,GAAAJ,cAAA,CAAhBI,gBAAgB;QAAEZ,KAAK,GAAAQ,cAAA,CAALR,KAAK;QAAEa,KAAK,GAAAL,cAAA,CAALK,KAAK;QAAEC,IAAI,GAAAN,cAAA,CAAJM,IAAI;;MAErE;MACA,oBACExC,KAAA,CAAAyC,aAAA,CAACrD,gBAAgB,CAACsD,MAAM;QAACJ,gBAAgB,EAAEA;MAAiB,GACzD,UAACA,gBAAgB;QAAA,IAAAK,KAAA;QAAA,OAAAA,KAAA,GAChBjD,OAAO,CAAC0C,MAAM,CAAC,eACbpC,KAAA,CAAAyC,aAAA,CAACV,YAAY,EAAAY,KAAA,CAAAC,EAAA,iBAAAC,aAAA,KAAAC,YAAA;UAAA,OAEP,QAAQ;UAAA,QACP,QAAQ;UAAA,YACH,CAAC;UAAA,oBACOR,gBAAgB;UAAA,SAC3BD,KAAK;UAAA,OACPP,MAAI,CAACH;QAAU,GAAAE,IAAA,KAEnBU,KAAK,KAAK,SAAS,iBAAIvC,KAAA,CAAAyC,aAAA,CAACR,eAAe,EAAAU,KAAA,CAAAC,EAAA;UAAA,QAAOJ;QAAI,EAAG,CAAC,eACvDxC,KAAA,CAAAyC,aAAA,CAACT,MAAM,EAAAW,KAAA,CAAAC,EAAA;UAAA,mBAAA7B,MAAA,CAAkBe,MAAI,CAACN,OAAO,CAAC,cAAc,CAAC;QAAA,IAClD7B,iBAAiB,CAACwC,QAAQ,EAAEY,WAAW,CAACjD,IAAI,EAAEiD,WAAW,CAACC,KAAK,EAAEtB,KAAK,CACjE,CACI,CAAC;MAAA,CAEI,CAAC;IAE9B;EAAC;AAAA,EA5D2BlC,SAAS;AAAAwB,eAAA,CAAjCZ,eAAe,iBACE,aAAa;AAAAY,eAAA,CAD9BZ,eAAe,aAEF,CACfP,kBAAkB,CAAC;EACjBoD,QAAQ,EAAE,kCAAkC;EAC5CC,QAAQ,EAAE,KAAK;EACfC,GAAG,EAAEC,MAAM,CAACC,QAAQ;EACpBC,IAAI,EAAE;AACR,CAAC,CAAC,EACF1D,mBAAmB,CAAC;EAClB2D,YAAY,EAAE,CAAC,OAAO,CAAC;EACvBC,UAAU,EAAE,CAAC,OAAO;AACtB,CAAC,CAAC,CACH;AAAAxC,eAAA,CAbGZ,eAAe,WAeJH,KAAK;AAAAe,eAAA,CAfhBZ,eAAe,kBAgBG;EACpBoC,IAAI,EAAE,GAAG;EACTd,KAAK,EAAE;AACT,CAAC;AA4CH,SAAS5B,IAAIA,CAAC2D,KAAK,EAAE;EAAA,IAAAC,KAAA,GAAAC,YAAA;IAAAC,KAAA;EACnB,IAAMC,KAAK,GAQG9D,OAAO;EAPrB,IAAM+D,OAAO,GAAG9D,KAAK,CAAC+D,MAAM,CAAC,CAAC;EAC9B,IAAQC,QAAQ,GAA+DP,KAAK,CAA5EO,QAAQ;IAAE5B,MAAM,GAAuDqB,KAAK,CAAlErB,MAAM;IAAEV,KAAK,GAAgD+B,KAAK,CAA1D/B,KAAK;IAAED,WAAW,GAAmCgC,KAAK,CAAnDhC,WAAW;IAAEE,UAAU,GAAuB8B,KAAK,CAAtC9B,UAAU;IAAAsC,eAAA,GAAuBR,KAAK,CAA1BS,QAAQ;IAARA,QAAQ,GAAAD,eAAA,cAAG,KAAK,GAAAA,eAAA;EAC1E,IAAME,OAAO,GAAGzC,KAAK,GAAGD,WAAW,GAAGuC,QAAQ;EAE9C,OAAAJ,KAAA,GAAOlE,OAAO,CAAC0C,MAAM,CAAC,eACpBpC,KAAA,CAAAyC,aAAA,CAAAzC,KAAA,CAAAoE,QAAA,qBACEpE,KAAA,CAAAyC,aAAA,CAACoB,KAAK,EAAAD,KAAA,CAAAhB,EAAA,UAAAC,aAAA,KAAAwB,aAAA;IAAA,uBAEiB3C,KAAK;IAAA,eACbA,KAAK;IAAA,OACboC,OAAO;IAAA,YACFI,QAAQ;IAAA,mBACDvC;EAAU,GAAA+B,KAAA,KAE1BS,OACI,CACP,CAAC;AAEP;AAEA,SAASnB,KAAKA,CAACS,KAAK,EAAE;EAAA,IAAAa,KAAA,GAAAX,YAAA;IAAAY,KAAA;EACpB,IAAMC,MAAM,GAE2BnF,GAAG;EAD1C,IAAQ+C,MAAM,GAAKqB,KAAK,CAAhBrB,MAAM;EACd,OAAAmC,KAAA,GAAO7E,OAAO,CAAC0C,MAAM,CAAC,eAACpC,KAAA,CAAAyC,aAAA,CAAC+B,MAAM,EAAAD,KAAA,CAAA3B,EAAA,WAAAC,aAAA,KAAA4B,aAAA,KAAAH,KAAA,GAAe,CAAC;AAChD;AAEA,IAAMvB,WAAW,GAAGxD,eAAe,CAACa,eAAe,EAAE;EACnDN,IAAI,EAAJA,IAAI;EACJkD,KAAK,EAALA;AACF,CAAC,CAAC;AAEF,eAAeD,WAAW","ignoreList":[]}
|
package/lib/es6/ButtonTrigger.js
CHANGED
|
@@ -14,11 +14,11 @@ import Spin from '@semcore/spin';
|
|
|
14
14
|
import React from 'react';
|
|
15
15
|
import BaseTrigger from './BaseTrigger';
|
|
16
16
|
/*!__reshadow-styles__:"./style/button-trigger.shadow.css"*/
|
|
17
|
-
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".
|
|
17
|
+
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SButtonAddon_rlrw5_gg_{width:12px;height:12px}.___SButtonTriggerSpin_rlrw5_gg_{fill:var(--intergalactic-icon-primary-neutral, rgba(0, 4, 1, 0.526))}", /*__inner_css_end__*/"rlrw5_gg_"),
|
|
18
18
|
/*__reshadow_css_end__*/
|
|
19
19
|
{
|
|
20
|
-
"__SButtonAddon": "
|
|
21
|
-
"__SButtonTriggerSpin": "
|
|
20
|
+
"__SButtonAddon": "___SButtonAddon_rlrw5_gg_",
|
|
21
|
+
"__SButtonTriggerSpin": "___SButtonTriggerSpin_rlrw5_gg_"
|
|
22
22
|
});
|
|
23
23
|
var RootButtonTrigger = /*#__PURE__*/function (_Component) {
|
|
24
24
|
function RootButtonTrigger() {
|
|
@@ -51,10 +51,11 @@ var RootButtonTrigger = /*#__PURE__*/function (_Component) {
|
|
|
51
51
|
Children = _this$asProps.Children,
|
|
52
52
|
styles = _this$asProps.styles,
|
|
53
53
|
loading = _this$asProps.loading,
|
|
54
|
+
disabled = _this$asProps.disabled,
|
|
54
55
|
chevron = _this$asProps.chevron,
|
|
55
56
|
empty = _this$asProps.empty;
|
|
56
57
|
return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(BaseTrigger, _assignProps({
|
|
57
|
-
"
|
|
58
|
+
"use:disabled": disabled || loading
|
|
58
59
|
}, _ref), addonTextChildren(Children, ButtonTrigger.Text, ButtonTrigger.Addon, empty), (chevron || loading) && /*#__PURE__*/React.createElement(SButtonAddon, _ref2.cn("SButtonAddon", {}), loading ? /*#__PURE__*/React.createElement(SButtonTriggerSpin, _ref2.cn("SButtonTriggerSpin", {
|
|
59
60
|
"size": 'xs',
|
|
60
61
|
"theme": false
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonTrigger.js","names":["createComponent","Component","Root","sstyled","addonTextChildren","animatedSizeEnhance","cssVariableEnhance","ChevronDown","Spin","React","BaseTrigger","style","_sstyled","insert","RootButtonTrigger","_Component","_classCallCheck","_callSuper","arguments","_inherits","_createClass","key","value","getTextProps","tag","getAddonProps","render","_ref","asProps","_ref2","SButtonAddon","ButtonTrigger","Addon","SButtonTriggerSpin","_this$asProps","Children","styles","loading","chevron","empty","createElement","_assignProps","Text","cn","_defineProperty","variable","fallback","map","Number","parseInt","prop","animateProps","onChangeOf","parent"],"sources":["../../src/ButtonTrigger.jsx"],"sourcesContent":["import { createComponent, Component, Root, sstyled } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport animatedSizeEnhance from '@semcore/core/lib/utils/enhances/animatedSizeEnhance';\nimport { cssVariableEnhance } from '@semcore/core/lib/utils/useCssVariable';\nimport ChevronDown from '@semcore/icon/ChevronDown/m';\nimport Spin from '@semcore/spin';\nimport React from 'react';\n\nimport BaseTrigger from './BaseTrigger';\nimport style from './style/button-trigger.shadow.css';\n\nclass RootButtonTrigger extends Component {\n static displayName = 'ButtonTrigger';\n static style = style;\n static enhance = [\n cssVariableEnhance({\n variable: '--intergalactic-duration-control',\n fallback: '200',\n map: Number.parseInt,\n prop: 'duration',\n }),\n animatedSizeEnhance({\n animateProps: ['width'],\n onChangeOf: ['value'],\n }),\n ];\n\n static defaultProps = {\n chevron: true,\n };\n\n getTextProps() {\n return {\n tag: 'span',\n };\n }\n\n getAddonProps() {\n return {\n tag: 'span',\n };\n }\n\n render() {\n const SButtonAddon = ButtonTrigger.Addon;\n const SButtonTriggerSpin = Spin;\n const { Children, styles, loading, chevron, empty } = this.asProps;\n\n return sstyled(styles)(\n <Root render={BaseTrigger}
|
|
1
|
+
{"version":3,"file":"ButtonTrigger.js","names":["createComponent","Component","Root","sstyled","addonTextChildren","animatedSizeEnhance","cssVariableEnhance","ChevronDown","Spin","React","BaseTrigger","style","_sstyled","insert","RootButtonTrigger","_Component","_classCallCheck","_callSuper","arguments","_inherits","_createClass","key","value","getTextProps","tag","getAddonProps","render","_ref","asProps","_ref2","SButtonAddon","ButtonTrigger","Addon","SButtonTriggerSpin","_this$asProps","Children","styles","loading","disabled","chevron","empty","createElement","_assignProps","Text","cn","_defineProperty","variable","fallback","map","Number","parseInt","prop","animateProps","onChangeOf","parent"],"sources":["../../src/ButtonTrigger.jsx"],"sourcesContent":["import { createComponent, Component, Root, sstyled } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport animatedSizeEnhance from '@semcore/core/lib/utils/enhances/animatedSizeEnhance';\nimport { cssVariableEnhance } from '@semcore/core/lib/utils/useCssVariable';\nimport ChevronDown from '@semcore/icon/ChevronDown/m';\nimport Spin from '@semcore/spin';\nimport React from 'react';\n\nimport BaseTrigger from './BaseTrigger';\nimport style from './style/button-trigger.shadow.css';\n\nclass RootButtonTrigger extends Component {\n static displayName = 'ButtonTrigger';\n static style = style;\n static enhance = [\n cssVariableEnhance({\n variable: '--intergalactic-duration-control',\n fallback: '200',\n map: Number.parseInt,\n prop: 'duration',\n }),\n animatedSizeEnhance({\n animateProps: ['width'],\n onChangeOf: ['value'],\n }),\n ];\n\n static defaultProps = {\n chevron: true,\n };\n\n getTextProps() {\n return {\n tag: 'span',\n };\n }\n\n getAddonProps() {\n return {\n tag: 'span',\n };\n }\n\n render() {\n const SButtonAddon = ButtonTrigger.Addon;\n const SButtonTriggerSpin = Spin;\n const { Children, styles, loading, disabled, chevron, empty } = this.asProps;\n\n return sstyled(styles)(\n <Root render={BaseTrigger} use:disabled={disabled || loading}>\n {addonTextChildren(Children, ButtonTrigger.Text, ButtonTrigger.Addon, empty)}\n {(chevron || loading) && (\n <SButtonAddon>\n {loading ? <SButtonTriggerSpin size='xs' theme={false} /> : <ChevronDown />}\n </SButtonAddon>\n )}\n </Root>,\n );\n }\n}\n\nconst ButtonTrigger = createComponent(\n RootButtonTrigger,\n {\n Text: BaseTrigger.Text,\n Addon: BaseTrigger.Addon,\n },\n {\n parent: BaseTrigger,\n },\n);\n\nexport default ButtonTrigger;\n"],"mappings":"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","ignoreList":[]}
|