@semcore/select 4.9.1 → 4.10.0-prerelease.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/CHANGELOG.md +7 -1
- package/lib/cjs/InputSearch.js +86 -50
- package/lib/cjs/InputSearch.js.map +1 -1
- package/lib/cjs/Select.js +7 -7
- package/lib/cjs/index.d.js.map +1 -1
- package/lib/cjs/style/input-search.shadow.css +3 -4
- package/lib/es6/InputSearch.js +89 -50
- package/lib/es6/InputSearch.js.map +1 -1
- package/lib/es6/Select.js +7 -7
- package/lib/es6/index.d.js.map +1 -1
- package/lib/es6/style/input-search.shadow.css +3 -4
- package/lib/types/index.d.ts +6 -2
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -2,7 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
-
## [4.
|
|
5
|
+
## [4.10.0-prerelease.0] - 2023-09-05
|
|
6
|
+
|
|
7
|
+
### Added
|
|
8
|
+
|
|
9
|
+
- `InputSearch` advanced usage with `InputSearch.SearchIcon`, `InputSearch.Value` and `InputSearch.Clear` components.
|
|
10
|
+
|
|
11
|
+
## [4.9.1] - 2023-09-05
|
|
6
12
|
|
|
7
13
|
### Changed
|
|
8
14
|
|
package/lib/cjs/InputSearch.js
CHANGED
|
@@ -22,23 +22,19 @@ var _context = require("./context");
|
|
|
22
22
|
var _i18nEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/i18nEnhance"));
|
|
23
23
|
var _intergalacticDynamicLocales = require("./translations/__intergalactic-dynamic-locales");
|
|
24
24
|
/*__reshadow-styles__:"./style/input-search.shadow.css"*/
|
|
25
|
-
var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".
|
|
26
|
-
"__SInputSearch": "
|
|
27
|
-
"_size_m": "
|
|
28
|
-
"
|
|
29
|
-
"_hide": "
|
|
30
|
-
"__SOutline": "
|
|
25
|
+
var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SInputSearch_1s16h_gg_._size_m_1s16h_gg_{height:32px}.___SSearchClear_1s16h_gg_.__hide_1s16h_gg_{visibility:hidden}.___SOutline_1s16h_gg_{top:-1px;left:-1px;width:100%;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0}" /*__inner_css_end__*/, "1s16h_gg_") /*__reshadow_css_end__*/, {
|
|
26
|
+
"__SInputSearch": "___SInputSearch_1s16h_gg_",
|
|
27
|
+
"_size_m": "_size_m_1s16h_gg_",
|
|
28
|
+
"__SSearchClear": "___SSearchClear_1s16h_gg_",
|
|
29
|
+
"_hide": "__hide_1s16h_gg_",
|
|
30
|
+
"__SOutline": "___SOutline_1s16h_gg_"
|
|
31
31
|
});
|
|
32
|
-
var
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
var InputSearch = /*#__PURE__*/function (_Component) {
|
|
37
|
-
(0, _inherits2["default"])(InputSearch, _Component);
|
|
38
|
-
var _super = (0, _createSuper2["default"])(InputSearch);
|
|
39
|
-
function InputSearch() {
|
|
32
|
+
var InputSearchRoot = /*#__PURE__*/function (_Component) {
|
|
33
|
+
(0, _inherits2["default"])(InputSearchRoot, _Component);
|
|
34
|
+
var _super = (0, _createSuper2["default"])(InputSearchRoot);
|
|
35
|
+
function InputSearchRoot() {
|
|
40
36
|
var _this;
|
|
41
|
-
(0, _classCallCheck2["default"])(this,
|
|
37
|
+
(0, _classCallCheck2["default"])(this, InputSearchRoot);
|
|
42
38
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
43
39
|
args[_key] = arguments[_key];
|
|
44
40
|
}
|
|
@@ -56,59 +52,99 @@ var InputSearch = /*#__PURE__*/function (_Component) {
|
|
|
56
52
|
});
|
|
57
53
|
return _this;
|
|
58
54
|
}
|
|
59
|
-
(0, _createClass2["default"])(
|
|
55
|
+
(0, _createClass2["default"])(InputSearchRoot, [{
|
|
60
56
|
key: "uncontrolledProps",
|
|
61
57
|
value: function uncontrolledProps() {
|
|
62
58
|
return {
|
|
63
59
|
value: null
|
|
64
60
|
};
|
|
65
61
|
}
|
|
62
|
+
}, {
|
|
63
|
+
key: "getValueProps",
|
|
64
|
+
value: function getValueProps() {
|
|
65
|
+
var value = this.asProps.value;
|
|
66
|
+
return {
|
|
67
|
+
value: value,
|
|
68
|
+
onChange: this.handlers.value,
|
|
69
|
+
autoFocus: true,
|
|
70
|
+
ref: this.inputRef
|
|
71
|
+
};
|
|
72
|
+
}
|
|
73
|
+
}, {
|
|
74
|
+
key: "getClearProps",
|
|
75
|
+
value: function getClearProps() {
|
|
76
|
+
var _this$asProps = this.asProps,
|
|
77
|
+
value = _this$asProps.value,
|
|
78
|
+
getI18nText = _this$asProps.getI18nText;
|
|
79
|
+
return {
|
|
80
|
+
role: 'button',
|
|
81
|
+
ref: this.closeIconRef,
|
|
82
|
+
/* hide through css because the width of the input changes */
|
|
83
|
+
hide: !value,
|
|
84
|
+
'aria-hidden': !value,
|
|
85
|
+
interactive: true,
|
|
86
|
+
'aria-label': getI18nText('clearSearch'),
|
|
87
|
+
onClick: this.handleClear
|
|
88
|
+
};
|
|
89
|
+
}
|
|
66
90
|
}, {
|
|
67
91
|
key: "render",
|
|
68
92
|
value: function render() {
|
|
69
93
|
var _ref = this.asProps,
|
|
70
|
-
|
|
71
|
-
var Value =
|
|
94
|
+
_ref5;
|
|
95
|
+
var Value = InputSearch.Value;
|
|
72
96
|
var SInputSearch = _input["default"];
|
|
73
|
-
var
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
var hideClose = !value;
|
|
81
|
-
var IconClose = sizeToIcon[finalSize][1];
|
|
82
|
-
var IconSearch = sizeToIcon[finalSize][0];
|
|
83
|
-
return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SInputSearch, _ref2.cn("SInputSearch", {
|
|
84
|
-
"size": finalSize,
|
|
97
|
+
var _this$asProps2 = this.asProps,
|
|
98
|
+
size = _this$asProps2.size,
|
|
99
|
+
styles = _this$asProps2.styles,
|
|
100
|
+
hasChildren = _this$asProps2.children,
|
|
101
|
+
Children = _this$asProps2.Children;
|
|
102
|
+
return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SInputSearch, _ref5.cn("SInputSearch", {
|
|
103
|
+
"size": size || this.context.size || 'm',
|
|
85
104
|
"styles": styles
|
|
86
|
-
}), /*#__PURE__*/_react["default"].createElement(
|
|
87
|
-
"autoFocus": true,
|
|
88
|
-
"ref": this.inputRef
|
|
89
|
-
}, _ref)))), /*#__PURE__*/_react["default"].createElement(SClose, _ref2.cn("SClose", {
|
|
90
|
-
"role": 'button',
|
|
91
|
-
"tag": IconClose,
|
|
92
|
-
"ref": this.closeIconRef,
|
|
93
|
-
"hide": hideClose,
|
|
94
|
-
"aria-hidden": hideClose,
|
|
95
|
-
"interactive": true,
|
|
96
|
-
"aria-label": getI18nText('clearSearch'),
|
|
97
|
-
"onClick": this.handleClear
|
|
98
|
-
})));
|
|
105
|
+
}), hasChildren ? /*#__PURE__*/_react["default"].createElement(Children, _ref5.cn("Children", {})) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(InputSearch.SearchIcon, null), /*#__PURE__*/_react["default"].createElement(Value, _ref5.cn("Value", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref)))), /*#__PURE__*/_react["default"].createElement(InputSearch.Clear, null)));
|
|
99
106
|
}
|
|
100
107
|
}]);
|
|
101
|
-
return
|
|
108
|
+
return InputSearchRoot;
|
|
102
109
|
}(_core.Component);
|
|
103
|
-
(0, _defineProperty2["default"])(
|
|
104
|
-
(0, _defineProperty2["default"])(
|
|
105
|
-
(0, _defineProperty2["default"])(
|
|
106
|
-
(0, _defineProperty2["default"])(
|
|
110
|
+
(0, _defineProperty2["default"])(InputSearchRoot, "displayName", 'InputSearch');
|
|
111
|
+
(0, _defineProperty2["default"])(InputSearchRoot, "style", style);
|
|
112
|
+
(0, _defineProperty2["default"])(InputSearchRoot, "enhance", [(0, _i18nEnhance["default"])(_intergalacticDynamicLocales.localizedMessages)]);
|
|
113
|
+
(0, _defineProperty2["default"])(InputSearchRoot, "defaultProps", {
|
|
107
114
|
defaultValue: '',
|
|
108
115
|
i18n: _intergalacticDynamicLocales.localizedMessages,
|
|
109
116
|
locale: 'en'
|
|
110
117
|
});
|
|
111
|
-
(0, _defineProperty2["default"])(
|
|
112
|
-
var
|
|
118
|
+
(0, _defineProperty2["default"])(InputSearchRoot, "contextType", _context.selectContext);
|
|
119
|
+
var SearchIcon = function SearchIcon(props) {
|
|
120
|
+
var _ref2 = arguments[0],
|
|
121
|
+
_ref6;
|
|
122
|
+
var SSearchIcon = _input["default"].Addon;
|
|
123
|
+
var styles = props.styles;
|
|
124
|
+
return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SSearchIcon, _ref6.cn("SSearchIcon", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref2))), /*#__PURE__*/_react["default"].createElement(_m["default"], _ref6.cn("SearchM", {})));
|
|
125
|
+
};
|
|
126
|
+
var SearchValue = function SearchValue(props) {
|
|
127
|
+
var _ref3 = arguments[0],
|
|
128
|
+
_ref7;
|
|
129
|
+
var SSearchValue = _input["default"].Value;
|
|
130
|
+
var styles = props.styles;
|
|
131
|
+
return _ref7 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SSearchValue, _ref7.cn("SSearchValue", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref3))));
|
|
132
|
+
};
|
|
133
|
+
var SearchClear = function SearchClear(props) {
|
|
134
|
+
var _ref4 = arguments[0],
|
|
135
|
+
_ref8;
|
|
136
|
+
var SSearchClear = _input["default"].Addon;
|
|
137
|
+
var styles = props.styles,
|
|
138
|
+
Children = props.Children;
|
|
139
|
+
return _ref8 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SSearchClear, _ref8.cn("SSearchClear", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
140
|
+
"tag": _m2["default"]
|
|
141
|
+
}, _ref4))), /*#__PURE__*/_react["default"].createElement(Children, _ref8.cn("Children", {})));
|
|
142
|
+
};
|
|
143
|
+
var InputSearch = (0, _core["default"])(InputSearchRoot, {
|
|
144
|
+
SearchIcon: SearchIcon,
|
|
145
|
+
Value: SearchValue,
|
|
146
|
+
Clear: SearchClear
|
|
147
|
+
});
|
|
148
|
+
var _default = InputSearch;
|
|
113
149
|
exports["default"] = _default;
|
|
114
150
|
//# sourceMappingURL=InputSearch.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputSearch.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_m","_m2","_input","_context","_i18nEnhance","_intergalacticDynamicLocales","style","sstyled","insert","
|
|
1
|
+
{"version":3,"file":"InputSearch.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_m","_m2","_input","_context","_i18nEnhance","_intergalacticDynamicLocales","style","sstyled","insert","InputSearchRoot","_Component","_inherits2","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","React","createRef","e","handlers","value","setTimeout","document","activeElement","body","closeIconRef","current","_this$inputRef$curren","inputRef","focus","_createClass2","key","uncontrolledProps","getValueProps","asProps","onChange","autoFocus","ref","getClearProps","_this$asProps","getI18nText","role","hide","interactive","onClick","handleClear","render","_ref","_ref5","Value","InputSearch","SInputSearch","Input","_this$asProps2","size","styles","hasChildren","children","Children","createElement","cn","context","Fragment","SearchIcon","_objectSpread2","assignProps","Clear","Component","i18nEnhance","localizedMessages","defaultValue","i18n","locale","selectContext","props","_ref2","arguments[0]","_ref6","SSearchIcon","Addon","SearchValue","_ref3","_ref7","SSearchValue","SearchClear","_ref4","_ref8","SSearchClear","CloseM","createComponent","_default","exports"],"sources":["../../src/InputSearch.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport SearchM from '@semcore/icon/Search/m';\nimport CloseM from '@semcore/icon/Close/m';\nimport Input from '@semcore/input';\nimport { selectContext } from './context';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\n\nimport style from './style/input-search.shadow.css';\n\nclass InputSearchRoot extends Component {\n static displayName = 'InputSearch';\n\n static style = style;\n static enhance = [i18nEnhance(localizedMessages)];\n static defaultProps = {\n defaultValue: '',\n i18n: localizedMessages,\n locale: 'en',\n };\n inputRef = React.createRef();\n closeIconRef = React.createRef();\n\n static contextType = selectContext;\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n handleClear = (e) => {\n this.handlers.value('', e);\n setTimeout(() => {\n if (\n document.activeElement === document.body ||\n document.activeElement === this.closeIconRef.current\n ) {\n this.inputRef.current?.focus();\n }\n }, 0);\n };\n\n getValueProps() {\n const { value } = this.asProps;\n return {\n value,\n onChange: this.handlers.value,\n autoFocus: true,\n ref: this.inputRef,\n };\n }\n getClearProps() {\n const { value, getI18nText } = this.asProps;\n return {\n role: 'button',\n ref: this.closeIconRef,\n /* hide through css because the width of the input changes */\n hide: !value,\n 'aria-hidden': !value,\n interactive: true,\n 'aria-label': getI18nText('clearSearch'),\n onClick: this.handleClear,\n };\n }\n\n render() {\n const Value = Root;\n const SInputSearch = Input;\n const { size, styles, children: hasChildren, Children } = this.asProps;\n\n return sstyled(styles)(\n <SInputSearch size={size || this.context.size || 'm'} styles={styles}>\n {hasChildren ? (\n <Children />\n ) : (\n <>\n <InputSearch.SearchIcon />\n <Value render={InputSearch.Value} />\n <InputSearch.Clear />\n </>\n )}\n </SInputSearch>,\n );\n }\n}\n\nconst SearchIcon = (props) => {\n const SSearchIcon = Root;\n const { styles } = props;\n return sstyled(styles)(\n <SSearchIcon render={Input.Addon}>\n <SearchM />\n </SSearchIcon>,\n );\n};\nconst SearchValue = (props) => {\n const SSearchValue = Root;\n const { styles } = props;\n return sstyled(styles)(<SSearchValue render={Input.Value} />);\n};\nconst SearchClear = (props) => {\n const SSearchClear = Root;\n const { styles, Children } = props;\n return sstyled(styles)(\n <SSearchClear render={Input.Addon} tag={CloseM}>\n <Children />\n </SSearchClear>,\n );\n};\n\nconst InputSearch = createComponent(InputSearchRoot, {\n SearchIcon: SearchIcon,\n Value: SearchValue,\n Clear: SearchClear,\n});\n\nexport default InputSearch;\n"],"mappings":"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"}
|
package/lib/cjs/Select.js
CHANGED
|
@@ -36,13 +36,13 @@ var _intergalacticDynamicLocales = require("./translations/__intergalactic-dynam
|
|
|
36
36
|
var _useFocusLock = require("@semcore/utils/lib/use/useFocusLock");
|
|
37
37
|
var _excluded = ["Children", "options", "multiselect", "value", "uid", "forcedAdvancedMode"];
|
|
38
38
|
/*__reshadow-styles__:"./style/select.shadow.css"*/
|
|
39
|
-
var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".
|
|
40
|
-
"__SOptionCheckbox": "
|
|
41
|
-
"_size_l": "
|
|
42
|
-
"_checked": "
|
|
43
|
-
"_theme": "
|
|
44
|
-
"--theme": "--
|
|
45
|
-
"_selected": "
|
|
39
|
+
var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SOptionCheckbox_5aq5m_gg_{margin-top:var(--intergalactic-spacing-05x, 2px);margin-right:var(--intergalactic-spacing-2x, 8px);margin-bottom:auto;position:relative;flex-shrink:0;width:16px;height:16px}.___SOptionCheckbox_5aq5m_gg_::before{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;background:var(--intergalactic-bg-primary-neutral, #ffffff);border:1px solid;border-radius:var(--intergalactic-addon-rounded, 4px);border-color:var(--intergalactic-border-primary, #c4c7cf)}.___SOptionCheckbox_5aq5m_gg_::after{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;margin:0 var(--intergalactic-spacing-05x, 2px);background-repeat:no-repeat;background-position:center center;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjI1IDFMNCA1LjI1TDEuNzUgMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_5aq5m_gg_._size_l_5aq5m_gg_{width:20px;height:20px}.___SOptionCheckbox_5aq5m_gg_._size_l_5aq5m_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMSAxLjVMNC43NSA3Ljc1TDEgNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_5aq5m_gg_.__checked_5aq5m_gg_:before{background-color:var(--intergalactic-control-primary-info, #008ff8);border-color:var(--intergalactic-control-primary-info, #008ff8)}.___SOptionCheckbox_5aq5m_gg_.__theme_5aq5m_gg_:before{border-color:var(--theme_5aq5m)}.___SOptionCheckbox_5aq5m_gg_.__theme_5aq5m_gg_.__checked_5aq5m_gg_:before{background-color:var(--theme_5aq5m);border-color:var(--theme_5aq5m)}.___SOptionCheckbox_5aq5m_gg_.__selected_5aq5m_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(196, 229, 254, 0.7))}@media (hover:hover){.___SOptionCheckbox_5aq5m_gg_.__selected_5aq5m_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}" /*__inner_css_end__*/, "5aq5m_gg_") /*__reshadow_css_end__*/, {
|
|
40
|
+
"__SOptionCheckbox": "___SOptionCheckbox_5aq5m_gg_",
|
|
41
|
+
"_size_l": "_size_l_5aq5m_gg_",
|
|
42
|
+
"_checked": "__checked_5aq5m_gg_",
|
|
43
|
+
"_theme": "__theme_5aq5m_gg_",
|
|
44
|
+
"--theme": "--theme_5aq5m",
|
|
45
|
+
"_selected": "__selected_5aq5m_gg_"
|
|
46
46
|
});
|
|
47
47
|
function isSelectedOption(value, valueOption) {
|
|
48
48
|
return Array.isArray(value) ? value.includes(valueOption) : valueOption === value;
|
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 React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport DropdownMenu, {\n DropdownMenuContext,\n DropdownMenuItemProps,\n DropdownMenuProps,\n DropdownMenuHandlers,\n DropdownMenuTriggerProps,\n} from '@semcore/dropdown-menu';\nimport { ButtonTrigger, BaseTriggerProps, ButtonTriggerProps } from '@semcore/base-trigger';\nimport Divider from '@semcore/divider';\nimport { InputValueProps } from '@semcore/input';\nimport { BoxProps } from '@semcore/flex-box';\n\n/** @deprecated */\nexport interface ISelectInputSearch extends SelectInputSearch, UnknownProperties {}\nexport type SelectInputSearch = InputValueProps & {};\n\nexport type OptionValue = string | number;\nexport type SelectValue = string | number | Array<string | number> | null;\n\nexport type SelectOption = {\n value: OptionValue;\n children?: React.ReactNode;\n label?: React.ReactNode;\n};\n\n/** @deprecated */\nexport interface ISelectProps<T extends SelectValue = SelectValue> extends SelectProps<T> {}\nexport type SelectProps<T extends SelectValue = SelectValue> = DropdownMenuProps &\n BaseTriggerProps & {\n /**\n * Multiple select\n */\n multiselect?: boolean;\n /**\n * Options array\n */\n options?: SelectOption[];\n /**\n * The value or values array selected by default when using multiselect\n * @type SelectValue\n */\n defaultValue?: T;\n /**\n * The selected value or values array when using multiselect\n * @type SelectValue\n */\n value?: T;\n /**\n * Callback on value change\n * @type (value: SelectValue, e: React.SyntheticEvent) => boolean | void\n */\n onChange?:\n | ((value: T, e: React.SyntheticEvent) => boolean | void)\n | React.Dispatch<React.SetStateAction<T>>;\n /**\n * Trigger placeholder at not selected value\n */\n placeholder?: React.ReactNode;\n /**\n * Trigger state\n */\n state?: 'normal' | 'valid' | 'invalid';\n /**\n * Disables select\n */\n disabled?: boolean;\n /**\n * Input name\n */\n name?: string;\n locale?: string;\n /**\n * If enabled, after opening select popper view will be scrolled to selected option or, if there are multiple selected options, to the first selected option.\n * @default true\n */\n scrollToSelected?: boolean;\n };\n\n/** @deprecated */\nexport interface ISelectOption extends SelectOption, UnknownProperties {}\n\n/** @deprecated */\nexport interface ISelectOptionProps extends SelectOptionProps, UnknownProperties {}\nexport type SelectOptionProps = DropdownMenuItemProps & {\n /** Value of the option */\n value: string | number;\n};\n\n/** @deprecated */\nexport interface ISelectOptionCheckboxProps extends SelectOptionCheckboxProps, UnknownProperties {}\nexport type SelectOptionCheckboxProps = SelectOptionProps & {\n /** Checkbox theme */\n theme?: string;\n};\n\ndeclare const InputSearch: Intergalactic.Component<'div', SelectInputSearch
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport DropdownMenu, {\n DropdownMenuContext,\n DropdownMenuItemProps,\n DropdownMenuProps,\n DropdownMenuHandlers,\n DropdownMenuTriggerProps,\n} from '@semcore/dropdown-menu';\nimport { ButtonTrigger, BaseTriggerProps, ButtonTriggerProps } from '@semcore/base-trigger';\nimport Divider from '@semcore/divider';\nimport Input, { InputValueProps } from '@semcore/input';\nimport { BoxProps } from '@semcore/flex-box';\n\n/** @deprecated */\nexport interface ISelectInputSearch extends SelectInputSearch, UnknownProperties {}\nexport type SelectInputSearch = InputValueProps & {};\n\nexport type OptionValue = string | number;\nexport type SelectValue = string | number | Array<string | number> | null;\n\nexport type SelectOption = {\n value: OptionValue;\n children?: React.ReactNode;\n label?: React.ReactNode;\n};\n\n/** @deprecated */\nexport interface ISelectProps<T extends SelectValue = SelectValue> extends SelectProps<T> {}\nexport type SelectProps<T extends SelectValue = SelectValue> = DropdownMenuProps &\n BaseTriggerProps & {\n /**\n * Multiple select\n */\n multiselect?: boolean;\n /**\n * Options array\n */\n options?: SelectOption[];\n /**\n * The value or values array selected by default when using multiselect\n * @type SelectValue\n */\n defaultValue?: T;\n /**\n * The selected value or values array when using multiselect\n * @type SelectValue\n */\n value?: T;\n /**\n * Callback on value change\n * @type (value: SelectValue, e: React.SyntheticEvent) => boolean | void\n */\n onChange?:\n | ((value: T, e: React.SyntheticEvent) => boolean | void)\n | React.Dispatch<React.SetStateAction<T>>;\n /**\n * Trigger placeholder at not selected value\n */\n placeholder?: React.ReactNode;\n /**\n * Trigger state\n */\n state?: 'normal' | 'valid' | 'invalid';\n /**\n * Disables select\n */\n disabled?: boolean;\n /**\n * Input name\n */\n name?: string;\n locale?: string;\n /**\n * If enabled, after opening select popper view will be scrolled to selected option or, if there are multiple selected options, to the first selected option.\n * @default true\n */\n scrollToSelected?: boolean;\n };\n\n/** @deprecated */\nexport interface ISelectOption extends SelectOption, UnknownProperties {}\n\n/** @deprecated */\nexport interface ISelectOptionProps extends SelectOptionProps, UnknownProperties {}\nexport type SelectOptionProps = DropdownMenuItemProps & {\n /** Value of the option */\n value: string | number;\n};\n\n/** @deprecated */\nexport interface ISelectOptionCheckboxProps extends SelectOptionCheckboxProps, UnknownProperties {}\nexport type SelectOptionCheckboxProps = SelectOptionProps & {\n /** Checkbox theme */\n theme?: string;\n};\n\ndeclare const InputSearch: Intergalactic.Component<'div', SelectInputSearch> & {\n SearchIcon: typeof Input.Addon;\n Value: typeof Input.Value;\n Clear: typeof Input.Addon;\n};\n\n/** @deprecated */\nexport interface ISelectContext extends SelectContext, UnknownProperties {}\nexport type SelectContext = DropdownMenuContext & {\n getOptionProps: PropGetterFn;\n getOptionCheckboxProps: PropGetterFn;\n getDividerProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface ISelectHandlers extends SelectHandlers, UnknownProperties {}\nexport type SelectHandlers = DropdownMenuHandlers & {\n value: (index: SelectValue) => void;\n};\n\ntype IntergalacticSelectComponent = (<\n Value extends SelectValue,\n Tag extends Intergalactic.Tag = 'div',\n>(\n props: Intergalactic.InternalTypings.ComponentProps<\n Tag,\n 'div',\n SelectProps<Value>,\n SelectContext,\n [handlers: SelectHandlers]\n >,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n Intergalactic.InternalTypings.ComponentAdditive<'div'>;\n\ndeclare const Select: IntergalacticSelectComponent & {\n Trigger: Intergalactic.Component<\n 'div',\n DropdownMenuTriggerProps & ButtonTriggerProps,\n {},\n [handlers: SelectHandlers]\n > & {\n Addon: typeof ButtonTrigger.Addon;\n Text: typeof ButtonTrigger.Text;\n };\n Popper: typeof DropdownMenu.Popper;\n List: typeof DropdownMenu.List;\n Menu: typeof DropdownMenu.Menu;\n Option: Intergalactic.Component<\n 'option',\n SelectOptionProps,\n SelectContext,\n [handlers: SelectHandlers]\n > & {\n Addon: typeof DropdownMenu.Item.Addon;\n Checkbox: Intergalactic.Component<'div', BoxProps & { theme?: string; selected?: boolean }>;\n };\n OptionTitle: typeof DropdownMenu.ItemTitle;\n OptionHint: typeof DropdownMenu.ItemHint;\n Divider: typeof Divider;\n InputSearch: typeof InputSearch;\n Input: typeof InputSearch;\n};\n\nexport { InputSearch };\nexport default Select;\n"],"mappings":""}
|
|
@@ -2,7 +2,7 @@ SInputSearch[size='m'] {
|
|
|
2
2
|
height: 32px;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
SSearchClear[hide] {
|
|
6
6
|
visibility: hidden;
|
|
7
7
|
}
|
|
8
8
|
|
|
@@ -11,6 +11,5 @@ SOutline {
|
|
|
11
11
|
top: -1px;
|
|
12
12
|
left: -1px;
|
|
13
13
|
width: 100%;
|
|
14
|
-
border-radius: var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)
|
|
15
|
-
|
|
16
|
-
}
|
|
14
|
+
border-radius: var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px) 0 0;
|
|
15
|
+
}
|
package/lib/es6/InputSearch.js
CHANGED
|
@@ -6,6 +6,9 @@ import _inherits from "@babel/runtime/helpers/inherits";
|
|
|
6
6
|
import _createSuper from "@babel/runtime/helpers/createSuper";
|
|
7
7
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
8
8
|
import { sstyled as _sstyled } from "@semcore/core";
|
|
9
|
+
import { assignProps as _assignProps4 } from "@semcore/core";
|
|
10
|
+
import { assignProps as _assignProps3 } from "@semcore/core";
|
|
11
|
+
import { assignProps as _assignProps2 } from "@semcore/core";
|
|
9
12
|
import { assignProps as _assignProps } from "@semcore/core";
|
|
10
13
|
import React from 'react';
|
|
11
14
|
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
@@ -16,23 +19,19 @@ import { selectContext } from './context';
|
|
|
16
19
|
import i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';
|
|
17
20
|
import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
|
|
18
21
|
/*__reshadow-styles__:"./style/input-search.shadow.css"*/
|
|
19
|
-
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".
|
|
20
|
-
"__SInputSearch": "
|
|
21
|
-
"_size_m": "
|
|
22
|
-
"
|
|
23
|
-
"_hide": "
|
|
24
|
-
"__SOutline": "
|
|
22
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SInputSearch_1s16h_gg_._size_m_1s16h_gg_{height:32px}.___SSearchClear_1s16h_gg_.__hide_1s16h_gg_{visibility:hidden}.___SOutline_1s16h_gg_{top:-1px;left:-1px;width:100%;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0}" /*__inner_css_end__*/, "1s16h_gg_") /*__reshadow_css_end__*/, {
|
|
23
|
+
"__SInputSearch": "___SInputSearch_1s16h_gg_",
|
|
24
|
+
"_size_m": "_size_m_1s16h_gg_",
|
|
25
|
+
"__SSearchClear": "___SSearchClear_1s16h_gg_",
|
|
26
|
+
"_hide": "__hide_1s16h_gg_",
|
|
27
|
+
"__SOutline": "___SOutline_1s16h_gg_"
|
|
25
28
|
});
|
|
26
|
-
var
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
var InputSearch = /*#__PURE__*/function (_Component) {
|
|
31
|
-
_inherits(InputSearch, _Component);
|
|
32
|
-
var _super = _createSuper(InputSearch);
|
|
33
|
-
function InputSearch() {
|
|
29
|
+
var InputSearchRoot = /*#__PURE__*/function (_Component) {
|
|
30
|
+
_inherits(InputSearchRoot, _Component);
|
|
31
|
+
var _super = _createSuper(InputSearchRoot);
|
|
32
|
+
function InputSearchRoot() {
|
|
34
33
|
var _this;
|
|
35
|
-
_classCallCheck(this,
|
|
34
|
+
_classCallCheck(this, InputSearchRoot);
|
|
36
35
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
37
36
|
args[_key] = arguments[_key];
|
|
38
37
|
}
|
|
@@ -50,58 +49,98 @@ var InputSearch = /*#__PURE__*/function (_Component) {
|
|
|
50
49
|
});
|
|
51
50
|
return _this;
|
|
52
51
|
}
|
|
53
|
-
_createClass(
|
|
52
|
+
_createClass(InputSearchRoot, [{
|
|
54
53
|
key: "uncontrolledProps",
|
|
55
54
|
value: function uncontrolledProps() {
|
|
56
55
|
return {
|
|
57
56
|
value: null
|
|
58
57
|
};
|
|
59
58
|
}
|
|
59
|
+
}, {
|
|
60
|
+
key: "getValueProps",
|
|
61
|
+
value: function getValueProps() {
|
|
62
|
+
var value = this.asProps.value;
|
|
63
|
+
return {
|
|
64
|
+
value: value,
|
|
65
|
+
onChange: this.handlers.value,
|
|
66
|
+
autoFocus: true,
|
|
67
|
+
ref: this.inputRef
|
|
68
|
+
};
|
|
69
|
+
}
|
|
70
|
+
}, {
|
|
71
|
+
key: "getClearProps",
|
|
72
|
+
value: function getClearProps() {
|
|
73
|
+
var _this$asProps = this.asProps,
|
|
74
|
+
value = _this$asProps.value,
|
|
75
|
+
getI18nText = _this$asProps.getI18nText;
|
|
76
|
+
return {
|
|
77
|
+
role: 'button',
|
|
78
|
+
ref: this.closeIconRef,
|
|
79
|
+
/* hide through css because the width of the input changes */
|
|
80
|
+
hide: !value,
|
|
81
|
+
'aria-hidden': !value,
|
|
82
|
+
interactive: true,
|
|
83
|
+
'aria-label': getI18nText('clearSearch'),
|
|
84
|
+
onClick: this.handleClear
|
|
85
|
+
};
|
|
86
|
+
}
|
|
60
87
|
}, {
|
|
61
88
|
key: "render",
|
|
62
89
|
value: function render() {
|
|
63
90
|
var _ref = this.asProps,
|
|
64
|
-
|
|
65
|
-
var Value =
|
|
91
|
+
_ref5;
|
|
92
|
+
var Value = InputSearch.Value;
|
|
66
93
|
var SInputSearch = Input;
|
|
67
|
-
var
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
var hideClose = !value;
|
|
75
|
-
var IconClose = sizeToIcon[finalSize][1];
|
|
76
|
-
var IconSearch = sizeToIcon[finalSize][0];
|
|
77
|
-
return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SInputSearch, _ref2.cn("SInputSearch", {
|
|
78
|
-
"size": finalSize,
|
|
94
|
+
var _this$asProps2 = this.asProps,
|
|
95
|
+
size = _this$asProps2.size,
|
|
96
|
+
styles = _this$asProps2.styles,
|
|
97
|
+
hasChildren = _this$asProps2.children,
|
|
98
|
+
Children = _this$asProps2.Children;
|
|
99
|
+
return _ref5 = sstyled(styles), /*#__PURE__*/React.createElement(SInputSearch, _ref5.cn("SInputSearch", {
|
|
100
|
+
"size": size || this.context.size || 'm',
|
|
79
101
|
"styles": styles
|
|
80
|
-
}), /*#__PURE__*/React.createElement(
|
|
81
|
-
"autoFocus": true,
|
|
82
|
-
"ref": this.inputRef
|
|
83
|
-
}, _ref)))), /*#__PURE__*/React.createElement(SClose, _ref2.cn("SClose", {
|
|
84
|
-
"role": 'button',
|
|
85
|
-
"tag": IconClose,
|
|
86
|
-
"ref": this.closeIconRef,
|
|
87
|
-
"hide": hideClose,
|
|
88
|
-
"aria-hidden": hideClose,
|
|
89
|
-
"interactive": true,
|
|
90
|
-
"aria-label": getI18nText('clearSearch'),
|
|
91
|
-
"onClick": this.handleClear
|
|
92
|
-
})));
|
|
102
|
+
}), hasChildren ? /*#__PURE__*/React.createElement(Children, _ref5.cn("Children", {})) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputSearch.SearchIcon, null), /*#__PURE__*/React.createElement(Value, _ref5.cn("Value", _objectSpread({}, _assignProps({}, _ref)))), /*#__PURE__*/React.createElement(InputSearch.Clear, null)));
|
|
93
103
|
}
|
|
94
104
|
}]);
|
|
95
|
-
return
|
|
105
|
+
return InputSearchRoot;
|
|
96
106
|
}(Component);
|
|
97
|
-
_defineProperty(
|
|
98
|
-
_defineProperty(
|
|
99
|
-
_defineProperty(
|
|
100
|
-
_defineProperty(
|
|
107
|
+
_defineProperty(InputSearchRoot, "displayName", 'InputSearch');
|
|
108
|
+
_defineProperty(InputSearchRoot, "style", style);
|
|
109
|
+
_defineProperty(InputSearchRoot, "enhance", [i18nEnhance(localizedMessages)]);
|
|
110
|
+
_defineProperty(InputSearchRoot, "defaultProps", {
|
|
101
111
|
defaultValue: '',
|
|
102
112
|
i18n: localizedMessages,
|
|
103
113
|
locale: 'en'
|
|
104
114
|
});
|
|
105
|
-
_defineProperty(
|
|
106
|
-
|
|
115
|
+
_defineProperty(InputSearchRoot, "contextType", selectContext);
|
|
116
|
+
var SearchIcon = function SearchIcon(props) {
|
|
117
|
+
var _ref2 = arguments[0],
|
|
118
|
+
_ref6;
|
|
119
|
+
var SSearchIcon = Input.Addon;
|
|
120
|
+
var styles = props.styles;
|
|
121
|
+
return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SSearchIcon, _ref6.cn("SSearchIcon", _objectSpread({}, _assignProps2({}, _ref2))), /*#__PURE__*/React.createElement(SearchM, _ref6.cn("SearchM", {})));
|
|
122
|
+
};
|
|
123
|
+
var SearchValue = function SearchValue(props) {
|
|
124
|
+
var _ref3 = arguments[0],
|
|
125
|
+
_ref7;
|
|
126
|
+
var SSearchValue = Input.Value;
|
|
127
|
+
var styles = props.styles;
|
|
128
|
+
return _ref7 = sstyled(styles), /*#__PURE__*/React.createElement(SSearchValue, _ref7.cn("SSearchValue", _objectSpread({}, _assignProps3({}, _ref3))));
|
|
129
|
+
};
|
|
130
|
+
var SearchClear = function SearchClear(props) {
|
|
131
|
+
var _ref4 = arguments[0],
|
|
132
|
+
_ref8;
|
|
133
|
+
var SSearchClear = Input.Addon;
|
|
134
|
+
var styles = props.styles,
|
|
135
|
+
Children = props.Children;
|
|
136
|
+
return _ref8 = sstyled(styles), /*#__PURE__*/React.createElement(SSearchClear, _ref8.cn("SSearchClear", _objectSpread({}, _assignProps4({
|
|
137
|
+
"tag": CloseM
|
|
138
|
+
}, _ref4))), /*#__PURE__*/React.createElement(Children, _ref8.cn("Children", {})));
|
|
139
|
+
};
|
|
140
|
+
var InputSearch = createComponent(InputSearchRoot, {
|
|
141
|
+
SearchIcon: SearchIcon,
|
|
142
|
+
Value: SearchValue,
|
|
143
|
+
Clear: SearchClear
|
|
144
|
+
});
|
|
145
|
+
export default InputSearch;
|
|
107
146
|
//# sourceMappingURL=InputSearch.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputSearch.js","names":["React","createComponent","Component","sstyled","Root","SearchM","CloseM","Input","selectContext","i18nEnhance","localizedMessages","style","_sstyled","insert","
|
|
1
|
+
{"version":3,"file":"InputSearch.js","names":["React","createComponent","Component","sstyled","Root","SearchM","CloseM","Input","selectContext","i18nEnhance","localizedMessages","style","_sstyled","insert","InputSearchRoot","_Component","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty","_assertThisInitialized","createRef","e","handlers","value","setTimeout","document","activeElement","body","closeIconRef","current","_this$inputRef$curren","inputRef","focus","_createClass","key","uncontrolledProps","getValueProps","asProps","onChange","autoFocus","ref","getClearProps","_this$asProps","getI18nText","role","hide","interactive","onClick","handleClear","render","_ref","_ref5","Value","InputSearch","SInputSearch","_this$asProps2","size","styles","hasChildren","children","Children","createElement","cn","context","Fragment","SearchIcon","_objectSpread","_assignProps","Clear","defaultValue","i18n","locale","props","_ref2","arguments[0]","_ref6","SSearchIcon","Addon","_assignProps2","SearchValue","_ref3","_ref7","SSearchValue","_assignProps3","SearchClear","_ref4","_ref8","SSearchClear","_assignProps4"],"sources":["../../src/InputSearch.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport SearchM from '@semcore/icon/Search/m';\nimport CloseM from '@semcore/icon/Close/m';\nimport Input from '@semcore/input';\nimport { selectContext } from './context';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\n\nimport style from './style/input-search.shadow.css';\n\nclass InputSearchRoot extends Component {\n static displayName = 'InputSearch';\n\n static style = style;\n static enhance = [i18nEnhance(localizedMessages)];\n static defaultProps = {\n defaultValue: '',\n i18n: localizedMessages,\n locale: 'en',\n };\n inputRef = React.createRef();\n closeIconRef = React.createRef();\n\n static contextType = selectContext;\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n handleClear = (e) => {\n this.handlers.value('', e);\n setTimeout(() => {\n if (\n document.activeElement === document.body ||\n document.activeElement === this.closeIconRef.current\n ) {\n this.inputRef.current?.focus();\n }\n }, 0);\n };\n\n getValueProps() {\n const { value } = this.asProps;\n return {\n value,\n onChange: this.handlers.value,\n autoFocus: true,\n ref: this.inputRef,\n };\n }\n getClearProps() {\n const { value, getI18nText } = this.asProps;\n return {\n role: 'button',\n ref: this.closeIconRef,\n /* hide through css because the width of the input changes */\n hide: !value,\n 'aria-hidden': !value,\n interactive: true,\n 'aria-label': getI18nText('clearSearch'),\n onClick: this.handleClear,\n };\n }\n\n render() {\n const Value = Root;\n const SInputSearch = Input;\n const { size, styles, children: hasChildren, Children } = this.asProps;\n\n return sstyled(styles)(\n <SInputSearch size={size || this.context.size || 'm'} styles={styles}>\n {hasChildren ? (\n <Children />\n ) : (\n <>\n <InputSearch.SearchIcon />\n <Value render={InputSearch.Value} />\n <InputSearch.Clear />\n </>\n )}\n </SInputSearch>,\n );\n }\n}\n\nconst SearchIcon = (props) => {\n const SSearchIcon = Root;\n const { styles } = props;\n return sstyled(styles)(\n <SSearchIcon render={Input.Addon}>\n <SearchM />\n </SSearchIcon>,\n );\n};\nconst SearchValue = (props) => {\n const SSearchValue = Root;\n const { styles } = props;\n return sstyled(styles)(<SSearchValue render={Input.Value} />);\n};\nconst SearchClear = (props) => {\n const SSearchClear = Root;\n const { styles, Children } = props;\n return sstyled(styles)(\n <SSearchClear render={Input.Addon} tag={CloseM}>\n <Children />\n </SSearchClear>,\n );\n};\n\nconst InputSearch = createComponent(InputSearchRoot, {\n SearchIcon: SearchIcon,\n Value: SearchValue,\n Clear: SearchClear,\n});\n\nexport default InputSearch;\n"],"mappings":"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"}
|
package/lib/es6/Select.js
CHANGED
|
@@ -33,13 +33,13 @@ import i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';
|
|
|
33
33
|
import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
|
|
34
34
|
import { setFocus } from '@semcore/utils/lib/use/useFocusLock';
|
|
35
35
|
/*__reshadow-styles__:"./style/select.shadow.css"*/
|
|
36
|
-
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".
|
|
37
|
-
"__SOptionCheckbox": "
|
|
38
|
-
"_size_l": "
|
|
39
|
-
"_checked": "
|
|
40
|
-
"_theme": "
|
|
41
|
-
"--theme": "--
|
|
42
|
-
"_selected": "
|
|
36
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SOptionCheckbox_5aq5m_gg_{margin-top:var(--intergalactic-spacing-05x, 2px);margin-right:var(--intergalactic-spacing-2x, 8px);margin-bottom:auto;position:relative;flex-shrink:0;width:16px;height:16px}.___SOptionCheckbox_5aq5m_gg_::before{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;background:var(--intergalactic-bg-primary-neutral, #ffffff);border:1px solid;border-radius:var(--intergalactic-addon-rounded, 4px);border-color:var(--intergalactic-border-primary, #c4c7cf)}.___SOptionCheckbox_5aq5m_gg_::after{content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;margin:0 var(--intergalactic-spacing-05x, 2px);background-repeat:no-repeat;background-position:center center;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjI1IDFMNCA1LjI1TDEuNzUgMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_5aq5m_gg_._size_l_5aq5m_gg_{width:20px;height:20px}.___SOptionCheckbox_5aq5m_gg_._size_l_5aq5m_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMSAxLjVMNC43NSA3Ljc1TDEgNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_5aq5m_gg_.__checked_5aq5m_gg_:before{background-color:var(--intergalactic-control-primary-info, #008ff8);border-color:var(--intergalactic-control-primary-info, #008ff8)}.___SOptionCheckbox_5aq5m_gg_.__theme_5aq5m_gg_:before{border-color:var(--theme_5aq5m)}.___SOptionCheckbox_5aq5m_gg_.__theme_5aq5m_gg_.__checked_5aq5m_gg_:before{background-color:var(--theme_5aq5m);border-color:var(--theme_5aq5m)}.___SOptionCheckbox_5aq5m_gg_.__selected_5aq5m_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(196, 229, 254, 0.7))}@media (hover:hover){.___SOptionCheckbox_5aq5m_gg_.__selected_5aq5m_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}" /*__inner_css_end__*/, "5aq5m_gg_") /*__reshadow_css_end__*/, {
|
|
37
|
+
"__SOptionCheckbox": "___SOptionCheckbox_5aq5m_gg_",
|
|
38
|
+
"_size_l": "_size_l_5aq5m_gg_",
|
|
39
|
+
"_checked": "__checked_5aq5m_gg_",
|
|
40
|
+
"_theme": "__theme_5aq5m_gg_",
|
|
41
|
+
"--theme": "--theme_5aq5m",
|
|
42
|
+
"_selected": "__selected_5aq5m_gg_"
|
|
43
43
|
});
|
|
44
44
|
function isSelectedOption(value, valueOption) {
|
|
45
45
|
return Array.isArray(value) ? value.includes(valueOption) : valueOption === value;
|
package/lib/es6/index.d.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport DropdownMenu, {\n DropdownMenuContext,\n DropdownMenuItemProps,\n DropdownMenuProps,\n DropdownMenuHandlers,\n DropdownMenuTriggerProps,\n} from '@semcore/dropdown-menu';\nimport { ButtonTrigger, BaseTriggerProps, ButtonTriggerProps } from '@semcore/base-trigger';\nimport Divider from '@semcore/divider';\nimport { InputValueProps } from '@semcore/input';\nimport { BoxProps } from '@semcore/flex-box';\n\n/** @deprecated */\nexport interface ISelectInputSearch extends SelectInputSearch, UnknownProperties {}\nexport type SelectInputSearch = InputValueProps & {};\n\nexport type OptionValue = string | number;\nexport type SelectValue = string | number | Array<string | number> | null;\n\nexport type SelectOption = {\n value: OptionValue;\n children?: React.ReactNode;\n label?: React.ReactNode;\n};\n\n/** @deprecated */\nexport interface ISelectProps<T extends SelectValue = SelectValue> extends SelectProps<T> {}\nexport type SelectProps<T extends SelectValue = SelectValue> = DropdownMenuProps &\n BaseTriggerProps & {\n /**\n * Multiple select\n */\n multiselect?: boolean;\n /**\n * Options array\n */\n options?: SelectOption[];\n /**\n * The value or values array selected by default when using multiselect\n * @type SelectValue\n */\n defaultValue?: T;\n /**\n * The selected value or values array when using multiselect\n * @type SelectValue\n */\n value?: T;\n /**\n * Callback on value change\n * @type (value: SelectValue, e: React.SyntheticEvent) => boolean | void\n */\n onChange?:\n | ((value: T, e: React.SyntheticEvent) => boolean | void)\n | React.Dispatch<React.SetStateAction<T>>;\n /**\n * Trigger placeholder at not selected value\n */\n placeholder?: React.ReactNode;\n /**\n * Trigger state\n */\n state?: 'normal' | 'valid' | 'invalid';\n /**\n * Disables select\n */\n disabled?: boolean;\n /**\n * Input name\n */\n name?: string;\n locale?: string;\n /**\n * If enabled, after opening select popper view will be scrolled to selected option or, if there are multiple selected options, to the first selected option.\n * @default true\n */\n scrollToSelected?: boolean;\n };\n\n/** @deprecated */\nexport interface ISelectOption extends SelectOption, UnknownProperties {}\n\n/** @deprecated */\nexport interface ISelectOptionProps extends SelectOptionProps, UnknownProperties {}\nexport type SelectOptionProps = DropdownMenuItemProps & {\n /** Value of the option */\n value: string | number;\n};\n\n/** @deprecated */\nexport interface ISelectOptionCheckboxProps extends SelectOptionCheckboxProps, UnknownProperties {}\nexport type SelectOptionCheckboxProps = SelectOptionProps & {\n /** Checkbox theme */\n theme?: string;\n};\n\ndeclare const InputSearch: Intergalactic.Component<'div', SelectInputSearch
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport DropdownMenu, {\n DropdownMenuContext,\n DropdownMenuItemProps,\n DropdownMenuProps,\n DropdownMenuHandlers,\n DropdownMenuTriggerProps,\n} from '@semcore/dropdown-menu';\nimport { ButtonTrigger, BaseTriggerProps, ButtonTriggerProps } from '@semcore/base-trigger';\nimport Divider from '@semcore/divider';\nimport Input, { InputValueProps } from '@semcore/input';\nimport { BoxProps } from '@semcore/flex-box';\n\n/** @deprecated */\nexport interface ISelectInputSearch extends SelectInputSearch, UnknownProperties {}\nexport type SelectInputSearch = InputValueProps & {};\n\nexport type OptionValue = string | number;\nexport type SelectValue = string | number | Array<string | number> | null;\n\nexport type SelectOption = {\n value: OptionValue;\n children?: React.ReactNode;\n label?: React.ReactNode;\n};\n\n/** @deprecated */\nexport interface ISelectProps<T extends SelectValue = SelectValue> extends SelectProps<T> {}\nexport type SelectProps<T extends SelectValue = SelectValue> = DropdownMenuProps &\n BaseTriggerProps & {\n /**\n * Multiple select\n */\n multiselect?: boolean;\n /**\n * Options array\n */\n options?: SelectOption[];\n /**\n * The value or values array selected by default when using multiselect\n * @type SelectValue\n */\n defaultValue?: T;\n /**\n * The selected value or values array when using multiselect\n * @type SelectValue\n */\n value?: T;\n /**\n * Callback on value change\n * @type (value: SelectValue, e: React.SyntheticEvent) => boolean | void\n */\n onChange?:\n | ((value: T, e: React.SyntheticEvent) => boolean | void)\n | React.Dispatch<React.SetStateAction<T>>;\n /**\n * Trigger placeholder at not selected value\n */\n placeholder?: React.ReactNode;\n /**\n * Trigger state\n */\n state?: 'normal' | 'valid' | 'invalid';\n /**\n * Disables select\n */\n disabled?: boolean;\n /**\n * Input name\n */\n name?: string;\n locale?: string;\n /**\n * If enabled, after opening select popper view will be scrolled to selected option or, if there are multiple selected options, to the first selected option.\n * @default true\n */\n scrollToSelected?: boolean;\n };\n\n/** @deprecated */\nexport interface ISelectOption extends SelectOption, UnknownProperties {}\n\n/** @deprecated */\nexport interface ISelectOptionProps extends SelectOptionProps, UnknownProperties {}\nexport type SelectOptionProps = DropdownMenuItemProps & {\n /** Value of the option */\n value: string | number;\n};\n\n/** @deprecated */\nexport interface ISelectOptionCheckboxProps extends SelectOptionCheckboxProps, UnknownProperties {}\nexport type SelectOptionCheckboxProps = SelectOptionProps & {\n /** Checkbox theme */\n theme?: string;\n};\n\ndeclare const InputSearch: Intergalactic.Component<'div', SelectInputSearch> & {\n SearchIcon: typeof Input.Addon;\n Value: typeof Input.Value;\n Clear: typeof Input.Addon;\n};\n\n/** @deprecated */\nexport interface ISelectContext extends SelectContext, UnknownProperties {}\nexport type SelectContext = DropdownMenuContext & {\n getOptionProps: PropGetterFn;\n getOptionCheckboxProps: PropGetterFn;\n getDividerProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface ISelectHandlers extends SelectHandlers, UnknownProperties {}\nexport type SelectHandlers = DropdownMenuHandlers & {\n value: (index: SelectValue) => void;\n};\n\ntype IntergalacticSelectComponent = (<\n Value extends SelectValue,\n Tag extends Intergalactic.Tag = 'div',\n>(\n props: Intergalactic.InternalTypings.ComponentProps<\n Tag,\n 'div',\n SelectProps<Value>,\n SelectContext,\n [handlers: SelectHandlers]\n >,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n Intergalactic.InternalTypings.ComponentAdditive<'div'>;\n\ndeclare const Select: IntergalacticSelectComponent & {\n Trigger: Intergalactic.Component<\n 'div',\n DropdownMenuTriggerProps & ButtonTriggerProps,\n {},\n [handlers: SelectHandlers]\n > & {\n Addon: typeof ButtonTrigger.Addon;\n Text: typeof ButtonTrigger.Text;\n };\n Popper: typeof DropdownMenu.Popper;\n List: typeof DropdownMenu.List;\n Menu: typeof DropdownMenu.Menu;\n Option: Intergalactic.Component<\n 'option',\n SelectOptionProps,\n SelectContext,\n [handlers: SelectHandlers]\n > & {\n Addon: typeof DropdownMenu.Item.Addon;\n Checkbox: Intergalactic.Component<'div', BoxProps & { theme?: string; selected?: boolean }>;\n };\n OptionTitle: typeof DropdownMenu.ItemTitle;\n OptionHint: typeof DropdownMenu.ItemHint;\n Divider: typeof Divider;\n InputSearch: typeof InputSearch;\n Input: typeof InputSearch;\n};\n\nexport { InputSearch };\nexport default Select;\n"],"mappings":""}
|
|
@@ -2,7 +2,7 @@ SInputSearch[size='m'] {
|
|
|
2
2
|
height: 32px;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
SSearchClear[hide] {
|
|
6
6
|
visibility: hidden;
|
|
7
7
|
}
|
|
8
8
|
|
|
@@ -11,6 +11,5 @@ SOutline {
|
|
|
11
11
|
top: -1px;
|
|
12
12
|
left: -1px;
|
|
13
13
|
width: 100%;
|
|
14
|
-
border-radius: var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)
|
|
15
|
-
|
|
16
|
-
}
|
|
14
|
+
border-radius: var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px) 0 0;
|
|
15
|
+
}
|
package/lib/types/index.d.ts
CHANGED
|
@@ -9,7 +9,7 @@ import DropdownMenu, {
|
|
|
9
9
|
} from '@semcore/dropdown-menu';
|
|
10
10
|
import { ButtonTrigger, BaseTriggerProps, ButtonTriggerProps } from '@semcore/base-trigger';
|
|
11
11
|
import Divider from '@semcore/divider';
|
|
12
|
-
import { InputValueProps } from '@semcore/input';
|
|
12
|
+
import Input, { InputValueProps } from '@semcore/input';
|
|
13
13
|
import { BoxProps } from '@semcore/flex-box';
|
|
14
14
|
|
|
15
15
|
/** @deprecated */
|
|
@@ -95,7 +95,11 @@ export type SelectOptionCheckboxProps = SelectOptionProps & {
|
|
|
95
95
|
theme?: string;
|
|
96
96
|
};
|
|
97
97
|
|
|
98
|
-
declare const InputSearch: Intergalactic.Component<'div', SelectInputSearch
|
|
98
|
+
declare const InputSearch: Intergalactic.Component<'div', SelectInputSearch> & {
|
|
99
|
+
SearchIcon: typeof Input.Addon;
|
|
100
|
+
Value: typeof Input.Value;
|
|
101
|
+
Clear: typeof Input.Addon;
|
|
102
|
+
};
|
|
99
103
|
|
|
100
104
|
/** @deprecated */
|
|
101
105
|
export interface ISelectContext extends SelectContext, UnknownProperties {}
|
package/package.json
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/select",
|
|
3
3
|
"description": "Semrush Select Component",
|
|
4
|
-
"version": "4.
|
|
4
|
+
"version": "4.10.0-prerelease.0",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
8
8
|
"author": "UI-kit team <ui-kit-team@semrush.com>",
|
|
9
9
|
"license": "MIT",
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@semcore/base-trigger": "4.
|
|
12
|
-
"@semcore/checkbox": "7.
|
|
11
|
+
"@semcore/base-trigger": "4.8.0-prerelease.0",
|
|
12
|
+
"@semcore/checkbox": "7.7.0-prerelease.0",
|
|
13
13
|
"@semcore/divider": "4.6.1",
|
|
14
14
|
"@semcore/dropdown-menu": "4.8.1",
|
|
15
15
|
"@semcore/flex-box": "5.6.1",
|
|
16
|
-
"@semcore/icon": "4.
|
|
16
|
+
"@semcore/icon": "4.8.0-prerelease.0",
|
|
17
17
|
"@semcore/input": "4.8.1",
|
|
18
18
|
"@semcore/utils": "4.6.1",
|
|
19
19
|
"classnames": "2.2.6"
|