@semcore/select 3.10.2 → 3.11.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 +6 -0
- package/lib/cjs/InputSearch.js +19 -8
- package/lib/cjs/InputSearch.js.map +1 -1
- package/lib/cjs/Select.js +7 -7
- package/lib/es6/InputSearch.js +19 -8
- package/lib/es6/InputSearch.js.map +1 -1
- package/lib/es6/Select.js +7 -7
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/lib/cjs/InputSearch.js
CHANGED
|
@@ -22,12 +22,12 @@ 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
|
-
"__SClose": "
|
|
29
|
-
"_hide": "
|
|
30
|
-
"__SOutline": "
|
|
25
|
+
var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SInputSearch_xzfti_gg_._size_m_xzfti_gg_{height:32px}.___SClose_xzfti_gg_.__hide_xzfti_gg_{visibility:hidden}.___SOutline_xzfti_gg_{top:-1px;left:-1px;width:100%;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0}" /*__inner_css_end__*/, "xzfti_gg_") /*__reshadow_css_end__*/, {
|
|
26
|
+
"__SInputSearch": "___SInputSearch_xzfti_gg_",
|
|
27
|
+
"_size_m": "_size_m_xzfti_gg_",
|
|
28
|
+
"__SClose": "___SClose_xzfti_gg_",
|
|
29
|
+
"_hide": "__hide_xzfti_gg_",
|
|
30
|
+
"__SOutline": "___SOutline_xzfti_gg_"
|
|
31
31
|
});
|
|
32
32
|
var sizeToIcon = {
|
|
33
33
|
m: [_m["default"], _m2["default"]],
|
|
@@ -43,8 +43,16 @@ var InputSearch = /*#__PURE__*/function (_Component) {
|
|
|
43
43
|
args[_key] = arguments[_key];
|
|
44
44
|
}
|
|
45
45
|
_this = _super.call.apply(_super, [this].concat(args));
|
|
46
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "inputRef", /*#__PURE__*/_react["default"].createRef());
|
|
47
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "closeIconRef", /*#__PURE__*/_react["default"].createRef());
|
|
46
48
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClear", function (e) {
|
|
47
49
|
_this.handlers.value('', e);
|
|
50
|
+
setTimeout(function () {
|
|
51
|
+
if (document.activeElement === document.body || document.activeElement === _this.closeIconRef.current) {
|
|
52
|
+
var _this$inputRef$curren;
|
|
53
|
+
(_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.focus();
|
|
54
|
+
}
|
|
55
|
+
}, 0);
|
|
48
56
|
});
|
|
49
57
|
return _this;
|
|
50
58
|
}
|
|
@@ -76,15 +84,18 @@ var InputSearch = /*#__PURE__*/function (_Component) {
|
|
|
76
84
|
"size": finalSize,
|
|
77
85
|
"styles": styles
|
|
78
86
|
}), /*#__PURE__*/_react["default"].createElement(_input["default"].Addon, null, /*#__PURE__*/_react["default"].createElement(IconSearch, _ref2.cn("IconSearch", {}))), /*#__PURE__*/_react["default"].createElement(Value, _ref2.cn("Value", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
79
|
-
"autoFocus": true
|
|
87
|
+
"autoFocus": true,
|
|
88
|
+
"ref": this.inputRef
|
|
80
89
|
}, _ref)))), /*#__PURE__*/_react["default"].createElement(SClose, _ref2.cn("SClose", {
|
|
81
90
|
"role": 'button',
|
|
91
|
+
"tag": IconClose,
|
|
92
|
+
"ref": this.closeIconRef,
|
|
82
93
|
"hide": hideClose,
|
|
83
94
|
"aria-hidden": hideClose,
|
|
84
95
|
"interactive": true,
|
|
85
96
|
"aria-label": getI18nText('clearSearch'),
|
|
86
97
|
"onClick": this.handleClear
|
|
87
|
-
})
|
|
98
|
+
})));
|
|
88
99
|
}
|
|
89
100
|
}]);
|
|
90
101
|
return InputSearch;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputSearch.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_m","_m2","_input","_context","_i18nEnhance","_intergalacticDynamicLocales","style","sstyled","insert","sizeToIcon","m","SearchM","CloseM","l","InputSearch","_Component","_inherits2","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","e","handlers","value","_createClass2","key","uncontrolledProps","render","_ref","asProps","_ref2","Value","Input","SInputSearch","SClose","Addon","_this$asProps","size","styles","getI18nText","finalSize","context","hideClose","IconClose","IconSearch","createElement","cn","_objectSpread2","assignProps","handleClear","Component","i18nEnhance","localizedMessages","defaultValue","i18n","locale","selectContext","_default","createComponent","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\nconst sizeToIcon = {\n m: [SearchM, CloseM],\n l: [SearchM, CloseM],\n};\n\nclass InputSearch 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\n static contextType = selectContext;\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n handleClear = (e) => {\n this.handlers.value('', e);\n };\n\n render() {\n const Value = Root;\n const SInputSearch = Input;\n const SClose = Input.Addon;\n const { size, value, styles, getI18nText } = this.asProps;\n const finalSize = size || this.context.size || 'm';\n const hideClose = !value;\n const IconClose = sizeToIcon[finalSize][1];\n const IconSearch = sizeToIcon[finalSize][0];\n\n return sstyled(styles)(\n <SInputSearch size={finalSize} styles={styles}>\n <Input.Addon>\n <IconSearch />\n </Input.Addon>\n <Value render={Input.Value} autoFocus />\n <SClose\n role='button'\n /* hide through css because the width of the input changes */\n hide={hideClose}\n aria-hidden={hideClose}\n interactive\n aria-label={getI18nText('clearSearch')}\n onClick={this.handleClear}\n
|
|
1
|
+
{"version":3,"file":"InputSearch.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_m","_m2","_input","_context","_i18nEnhance","_intergalacticDynamicLocales","style","sstyled","insert","sizeToIcon","m","SearchM","CloseM","l","InputSearch","_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","render","_ref","asProps","_ref2","Value","Input","SInputSearch","SClose","Addon","_this$asProps","size","styles","getI18nText","finalSize","context","hideClose","IconClose","IconSearch","createElement","cn","_objectSpread2","assignProps","handleClear","Component","i18nEnhance","localizedMessages","defaultValue","i18n","locale","selectContext","_default","createComponent","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\nconst sizeToIcon = {\n m: [SearchM, CloseM],\n l: [SearchM, CloseM],\n};\n\nclass InputSearch 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 render() {\n const Value = Root;\n const SInputSearch = Input;\n const SClose = Input.Addon;\n const { size, value, styles, getI18nText } = this.asProps;\n const finalSize = size || this.context.size || 'm';\n const hideClose = !value;\n const IconClose = sizeToIcon[finalSize][1];\n const IconSearch = sizeToIcon[finalSize][0];\n\n return sstyled(styles)(\n <SInputSearch size={finalSize} styles={styles}>\n <Input.Addon>\n <IconSearch />\n </Input.Addon>\n <Value render={Input.Value} autoFocus ref={this.inputRef} />\n <SClose\n role='button'\n tag={IconClose}\n ref={this.closeIconRef}\n /* hide through css because the width of the input changes */\n hide={hideClose}\n aria-hidden={hideClose}\n interactive\n aria-label={getI18nText('clearSearch')}\n onClick={this.handleClear}\n />\n </SInputSearch>,\n );\n }\n}\n\nexport default createComponent(InputSearch);\n"],"mappings":";;;;;;;;;;;;;;;AACA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AADA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,EAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,GAAA,GAAAF,sBAAA,CAAAF,OAAA;AACA,IAAAK,MAAA,GAAAH,sBAAA,CAAAF,OAAA;AACA,IAAAM,QAAA,GAAAN,OAAA;AACA,IAAAO,YAAA,GAAAL,sBAAA,CAAAF,OAAA;AACA,IAAAQ,4BAAA,GAAAR,OAAA;AAAmF;AAAA,IAAAS,KAAA,+BAAAX,KAAA,CAAAY,OAAA,CAAAC,MAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAInF,IAAMC,UAAU,GAAG;EACjBC,CAAC,EAAE,CAACC,aAAO,EAAEC,cAAM,CAAC;EACpBC,CAAC,EAAE,CAACF,aAAO,EAAEC,cAAM;AACrB,CAAC;AAAC,IAEIE,WAAW,0BAAAC,UAAA;EAAA,IAAAC,UAAA,aAAAF,WAAA,EAAAC,UAAA;EAAA,IAAAE,MAAA,OAAAC,aAAA,aAAAJ,WAAA;EAAA,SAAAA,YAAA;IAAA,IAAAK,KAAA;IAAA,IAAAC,gBAAA,mBAAAN,WAAA;IAAA,SAAAO,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,GAAAF,MAAA,CAAAU,IAAA,CAAAC,KAAA,CAAAX,MAAA,SAAAY,MAAA,CAAAL,IAAA;IAAA,IAAAM,gBAAA,iBAAAC,uBAAA,aAAAZ,KAAA,4BAUJa,iBAAK,CAACC,SAAS,EAAE;IAAA,IAAAH,gBAAA,iBAAAC,uBAAA,aAAAZ,KAAA,gCACba,iBAAK,CAACC,SAAS,EAAE;IAAA,IAAAH,gBAAA,iBAAAC,uBAAA,aAAAZ,KAAA,kBAUlB,UAACe,CAAC,EAAK;MACnBf,KAAA,CAAKgB,QAAQ,CAACC,KAAK,CAAC,EAAE,EAAEF,CAAC,CAAC;MAC1BG,UAAU,CAAC,YAAM;QACf,IACEC,QAAQ,CAACC,aAAa,KAAKD,QAAQ,CAACE,IAAI,IACxCF,QAAQ,CAACC,aAAa,KAAKpB,KAAA,CAAKsB,YAAY,CAACC,OAAO,EACpD;UAAA,IAAAC,qBAAA;UACA,CAAAA,qBAAA,GAAAxB,KAAA,CAAKyB,QAAQ,CAACF,OAAO,cAAAC,qBAAA,uBAArBA,qBAAA,CAAuBE,KAAK,EAAE;QAChC;MACF,CAAC,EAAE,CAAC,CAAC;IACP,CAAC;IAAA,OAAA1B,KAAA;EAAA;EAAA,IAAA2B,aAAA,aAAAhC,WAAA;IAAAiC,GAAA;IAAAX,KAAA,EAhBD,SAAAY,kBAAA,EAAoB;MAClB,OAAO;QACLZ,KAAK,EAAE;MACT,CAAC;IACH;EAAC;IAAAW,GAAA;IAAAX,KAAA,EAcD,SAAAa,OAAA,EAAS;MAAA,IAAAC,IAAA,QAAAC,OAAA;QAAAC,KAAA;MACP,IAAMC,KAAK,GAcQC,iBAAK,CAACD,KAAK;MAb9B,IAAME,YAAY,GAAGD,iBAAK;MAC1B,IAAME,MAAM,GAAGF,iBAAK,CAACG,KAAK;MAC1B,IAAAC,aAAA,GAA6C,IAAI,CAACP,OAAO;QAAjDQ,IAAI,GAAAD,aAAA,CAAJC,IAAI;QAAEvB,KAAK,GAAAsB,aAAA,CAALtB,KAAK;QAAEwB,MAAM,GAAAF,aAAA,CAANE,MAAM;QAAEC,WAAW,GAAAH,aAAA,CAAXG,WAAW;MACxC,IAAMC,SAAS,GAAGH,IAAI,IAAI,IAAI,CAACI,OAAO,CAACJ,IAAI,IAAI,GAAG;MAClD,IAAMK,SAAS,GAAG,CAAC5B,KAAK;MACxB,IAAM6B,SAAS,GAAGxD,UAAU,CAACqD,SAAS,CAAC,CAAC,CAAC,CAAC;MAC1C,IAAMI,UAAU,GAAGzD,UAAU,CAACqD,SAAS,CAAC,CAAC,CAAC,CAAC;MAE3C,OAAAV,KAAA,GAAO,IAAA7C,aAAO,EAACqD,MAAM,CAAC,eACpB9D,MAAA,YAAAqE,aAAA,CAACZ,YAAY,EAAAH,KAAA,CAAAgB,EAAA;QAAA,QAAON,SAAS;QAAA,UAAUF;MAAM,iBAC3C9D,MAAA,YAAAqE,aAAA,CAACjE,MAAA,WAAK,CAACuD,KAAK,qBACV3D,MAAA,YAAAqE,aAAA,CAACD,UAAU,EAAAd,KAAA,CAAAgB,EAAA,mBAAG,CACF,eACdtE,MAAA,YAAAqE,aAAA,CAACd,KAAK,EAAAD,KAAA,CAAAgB,EAAA,cAAAC,cAAA,qBAAA1E,KAAA,CAAA2E,WAAA;QAAA;QAAA,OAAqC,IAAI,CAAC1B;MAAQ,GAAAM,IAAA,IAAI,eAC5DpD,MAAA,YAAAqE,aAAA,CAACX,MAAM,EAAAJ,KAAA,CAAAgB,EAAA;QAAA,QACA,QAAQ;QAAA,OACRH,SAAS;QAAA,OACT,IAAI,CAACxB,YAAY;QAAA,QAEhBuB,SAAS;QAAA,eACFA,SAAS;QAAA;QAAA,cAEVH,WAAW,CAAC,aAAa,CAAC;QAAA,WAC7B,IAAI,CAACU;MAAW,GACzB,CACW;IAEnB;EAAC;EAAA,OAAAzD,WAAA;AAAA,EA9DuB0D,eAAS;AAAA,IAAA1C,gBAAA,aAA7BhB,WAAW,iBACM,aAAa;AAAA,IAAAgB,gBAAA,aAD9BhB,WAAW,WAGAR,KAAK;AAAA,IAAAwB,gBAAA,aAHhBhB,WAAW,aAIE,CAAC,IAAA2D,uBAAW,EAACC,8CAAiB,CAAC,CAAC;AAAA,IAAA5C,gBAAA,aAJ7ChB,WAAW,kBAKO;EACpB6D,YAAY,EAAE,EAAE;EAChBC,IAAI,EAAEF,8CAAiB;EACvBG,MAAM,EAAE;AACV,CAAC;AAAA,IAAA/C,gBAAA,aATGhB,WAAW,iBAaMgE,sBAAa;AAAA,IAAAC,QAAA,GAoDrB,IAAAC,gBAAe,EAAClE,WAAW,CAAC;AAAAmE,OAAA,cAAAF,QAAA"}
|
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"];
|
|
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_1kmm8_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_1kmm8_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_1kmm8_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_1kmm8_gg_._size_l_1kmm8_gg_{width:20px;height:20px}.___SOptionCheckbox_1kmm8_gg_._size_l_1kmm8_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMSAxLjVMNC43NSA3Ljc1TDEgNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_1kmm8_gg_.__checked_1kmm8_gg_:before{background-color:var(--intergalactic-control-primary-info, #008ff8);border-color:var(--intergalactic-control-primary-info, #008ff8)}.___SOptionCheckbox_1kmm8_gg_.__theme_1kmm8_gg_:before{border-color:var(--theme_1kmm8)}.___SOptionCheckbox_1kmm8_gg_.__theme_1kmm8_gg_.__checked_1kmm8_gg_:before{background-color:var(--theme_1kmm8);border-color:var(--theme_1kmm8)}.___SOptionCheckbox_1kmm8_gg_.__selected_1kmm8_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(196, 229, 254, 0.7))}@media (hover:hover){.___SOptionCheckbox_1kmm8_gg_.__selected_1kmm8_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}" /*__inner_css_end__*/, "1kmm8_gg_") /*__reshadow_css_end__*/, {
|
|
40
|
+
"__SOptionCheckbox": "___SOptionCheckbox_1kmm8_gg_",
|
|
41
|
+
"_size_l": "_size_l_1kmm8_gg_",
|
|
42
|
+
"_checked": "__checked_1kmm8_gg_",
|
|
43
|
+
"_theme": "__theme_1kmm8_gg_",
|
|
44
|
+
"--theme": "--theme_1kmm8",
|
|
45
|
+
"_selected": "__selected_1kmm8_gg_"
|
|
46
46
|
});
|
|
47
47
|
function isSelectedOption(value, valueOption) {
|
|
48
48
|
return Array.isArray(value) ? value.includes(valueOption) : valueOption === value;
|
package/lib/es6/InputSearch.js
CHANGED
|
@@ -16,12 +16,12 @@ import { selectContext } from './context';
|
|
|
16
16
|
import i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';
|
|
17
17
|
import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
|
|
18
18
|
/*__reshadow-styles__:"./style/input-search.shadow.css"*/
|
|
19
|
-
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".
|
|
20
|
-
"__SInputSearch": "
|
|
21
|
-
"_size_m": "
|
|
22
|
-
"__SClose": "
|
|
23
|
-
"_hide": "
|
|
24
|
-
"__SOutline": "
|
|
19
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SInputSearch_xzfti_gg_._size_m_xzfti_gg_{height:32px}.___SClose_xzfti_gg_.__hide_xzfti_gg_{visibility:hidden}.___SOutline_xzfti_gg_{top:-1px;left:-1px;width:100%;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0}" /*__inner_css_end__*/, "xzfti_gg_") /*__reshadow_css_end__*/, {
|
|
20
|
+
"__SInputSearch": "___SInputSearch_xzfti_gg_",
|
|
21
|
+
"_size_m": "_size_m_xzfti_gg_",
|
|
22
|
+
"__SClose": "___SClose_xzfti_gg_",
|
|
23
|
+
"_hide": "__hide_xzfti_gg_",
|
|
24
|
+
"__SOutline": "___SOutline_xzfti_gg_"
|
|
25
25
|
});
|
|
26
26
|
var sizeToIcon = {
|
|
27
27
|
m: [SearchM, CloseM],
|
|
@@ -37,8 +37,16 @@ var InputSearch = /*#__PURE__*/function (_Component) {
|
|
|
37
37
|
args[_key] = arguments[_key];
|
|
38
38
|
}
|
|
39
39
|
_this = _super.call.apply(_super, [this].concat(args));
|
|
40
|
+
_defineProperty(_assertThisInitialized(_this), "inputRef", /*#__PURE__*/React.createRef());
|
|
41
|
+
_defineProperty(_assertThisInitialized(_this), "closeIconRef", /*#__PURE__*/React.createRef());
|
|
40
42
|
_defineProperty(_assertThisInitialized(_this), "handleClear", function (e) {
|
|
41
43
|
_this.handlers.value('', e);
|
|
44
|
+
setTimeout(function () {
|
|
45
|
+
if (document.activeElement === document.body || document.activeElement === _this.closeIconRef.current) {
|
|
46
|
+
var _this$inputRef$curren;
|
|
47
|
+
(_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.focus();
|
|
48
|
+
}
|
|
49
|
+
}, 0);
|
|
42
50
|
});
|
|
43
51
|
return _this;
|
|
44
52
|
}
|
|
@@ -70,15 +78,18 @@ var InputSearch = /*#__PURE__*/function (_Component) {
|
|
|
70
78
|
"size": finalSize,
|
|
71
79
|
"styles": styles
|
|
72
80
|
}), /*#__PURE__*/React.createElement(Input.Addon, null, /*#__PURE__*/React.createElement(IconSearch, _ref2.cn("IconSearch", {}))), /*#__PURE__*/React.createElement(Value, _ref2.cn("Value", _objectSpread({}, _assignProps({
|
|
73
|
-
"autoFocus": true
|
|
81
|
+
"autoFocus": true,
|
|
82
|
+
"ref": this.inputRef
|
|
74
83
|
}, _ref)))), /*#__PURE__*/React.createElement(SClose, _ref2.cn("SClose", {
|
|
75
84
|
"role": 'button',
|
|
85
|
+
"tag": IconClose,
|
|
86
|
+
"ref": this.closeIconRef,
|
|
76
87
|
"hide": hideClose,
|
|
77
88
|
"aria-hidden": hideClose,
|
|
78
89
|
"interactive": true,
|
|
79
90
|
"aria-label": getI18nText('clearSearch'),
|
|
80
91
|
"onClick": this.handleClear
|
|
81
|
-
})
|
|
92
|
+
})));
|
|
82
93
|
}
|
|
83
94
|
}]);
|
|
84
95
|
return InputSearch;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputSearch.js","names":["React","createComponent","Component","sstyled","Root","SearchM","CloseM","Input","selectContext","i18nEnhance","localizedMessages","style","_sstyled","insert","sizeToIcon","m","l","InputSearch","_Component","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty","_assertThisInitialized","e","handlers","value","_createClass","key","uncontrolledProps","render","_ref","asProps","_ref2","Value","SInputSearch","SClose","Addon","_this$asProps","size","styles","getI18nText","finalSize","context","hideClose","IconClose","IconSearch","createElement","cn","_objectSpread","_assignProps","handleClear","defaultValue","i18n","locale"],"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\nconst sizeToIcon = {\n m: [SearchM, CloseM],\n l: [SearchM, CloseM],\n};\n\nclass InputSearch 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\n static contextType = selectContext;\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n handleClear = (e) => {\n this.handlers.value('', e);\n };\n\n render() {\n const Value = Root;\n const SInputSearch = Input;\n const SClose = Input.Addon;\n const { size, value, styles, getI18nText } = this.asProps;\n const finalSize = size || this.context.size || 'm';\n const hideClose = !value;\n const IconClose = sizeToIcon[finalSize][1];\n const IconSearch = sizeToIcon[finalSize][0];\n\n return sstyled(styles)(\n <SInputSearch size={finalSize} styles={styles}>\n <Input.Addon>\n <IconSearch />\n </Input.Addon>\n <Value render={Input.Value} autoFocus />\n <SClose\n role='button'\n /* hide through css because the width of the input changes */\n hide={hideClose}\n aria-hidden={hideClose}\n interactive\n aria-label={getI18nText('clearSearch')}\n onClick={this.handleClear}\n
|
|
1
|
+
{"version":3,"file":"InputSearch.js","names":["React","createComponent","Component","sstyled","Root","SearchM","CloseM","Input","selectContext","i18nEnhance","localizedMessages","style","_sstyled","insert","sizeToIcon","m","l","InputSearch","_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","render","_ref","asProps","_ref2","Value","SInputSearch","SClose","Addon","_this$asProps","size","styles","getI18nText","finalSize","context","hideClose","IconClose","IconSearch","createElement","cn","_objectSpread","_assignProps","handleClear","defaultValue","i18n","locale"],"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\nconst sizeToIcon = {\n m: [SearchM, CloseM],\n l: [SearchM, CloseM],\n};\n\nclass InputSearch 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 render() {\n const Value = Root;\n const SInputSearch = Input;\n const SClose = Input.Addon;\n const { size, value, styles, getI18nText } = this.asProps;\n const finalSize = size || this.context.size || 'm';\n const hideClose = !value;\n const IconClose = sizeToIcon[finalSize][1];\n const IconSearch = sizeToIcon[finalSize][0];\n\n return sstyled(styles)(\n <SInputSearch size={finalSize} styles={styles}>\n <Input.Addon>\n <IconSearch />\n </Input.Addon>\n <Value render={Input.Value} autoFocus ref={this.inputRef} />\n <SClose\n role='button'\n tag={IconClose}\n ref={this.closeIconRef}\n /* hide through css because the width of the input changes */\n hide={hideClose}\n aria-hidden={hideClose}\n interactive\n aria-label={getI18nText('clearSearch')}\n onClick={this.handleClear}\n />\n </SInputSearch>,\n );\n }\n}\n\nexport default createComponent(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_1kmm8_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_1kmm8_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_1kmm8_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_1kmm8_gg_._size_l_1kmm8_gg_{width:20px;height:20px}.___SOptionCheckbox_1kmm8_gg_._size_l_1kmm8_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMSAxLjVMNC43NSA3Ljc1TDEgNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_1kmm8_gg_.__checked_1kmm8_gg_:before{background-color:var(--intergalactic-control-primary-info, #008ff8);border-color:var(--intergalactic-control-primary-info, #008ff8)}.___SOptionCheckbox_1kmm8_gg_.__theme_1kmm8_gg_:before{border-color:var(--theme_1kmm8)}.___SOptionCheckbox_1kmm8_gg_.__theme_1kmm8_gg_.__checked_1kmm8_gg_:before{background-color:var(--theme_1kmm8);border-color:var(--theme_1kmm8)}.___SOptionCheckbox_1kmm8_gg_.__selected_1kmm8_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(196, 229, 254, 0.7))}@media (hover:hover){.___SOptionCheckbox_1kmm8_gg_.__selected_1kmm8_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}" /*__inner_css_end__*/, "1kmm8_gg_") /*__reshadow_css_end__*/, {
|
|
37
|
+
"__SOptionCheckbox": "___SOptionCheckbox_1kmm8_gg_",
|
|
38
|
+
"_size_l": "_size_l_1kmm8_gg_",
|
|
39
|
+
"_checked": "__checked_1kmm8_gg_",
|
|
40
|
+
"_theme": "__theme_1kmm8_gg_",
|
|
41
|
+
"--theme": "--theme_1kmm8",
|
|
42
|
+
"_selected": "__selected_1kmm8_gg_"
|
|
43
43
|
});
|
|
44
44
|
function isSelectedOption(value, valueOption) {
|
|
45
45
|
return Array.isArray(value) ? value.includes(valueOption) : valueOption === value;
|