@semcore/select 4.48.3 → 4.48.4
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 +6 -6
- package/lib/cjs/Select.js +8 -8
- package/lib/es6/InputSearch.js +6 -6
- package/lib/es6/Select.js +8 -8
- package/package.json +2 -2
- package/__stories/Select-Test.stories.tsx +0 -48
- package/__stories/Select.stories.tsx +0 -61
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [4.48.4] - 2024-11-18
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/button` [5.39.2 ~> 5.39.3]).
|
|
10
|
+
|
|
5
11
|
## [4.48.3] - 2024-11-04
|
|
6
12
|
|
|
7
13
|
### Fixed
|
package/lib/cjs/InputSearch.js
CHANGED
|
@@ -24,12 +24,12 @@ var _context = require("./context");
|
|
|
24
24
|
var _i18nEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/i18nEnhance"));
|
|
25
25
|
var _intergalacticDynamicLocales = require("./translations/__intergalactic-dynamic-locales");
|
|
26
26
|
/*__reshadow-styles__:"./style/input-search.shadow.css"*/
|
|
27
|
-
var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".
|
|
28
|
-
"__SInputSearch": "
|
|
29
|
-
"_size_m": "
|
|
30
|
-
"__SSearchClear": "
|
|
31
|
-
"_hide": "
|
|
32
|
-
"__SOutline": "
|
|
27
|
+
var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SInputSearch_zti6w_gg_._size_m_zti6w_gg_{height:32px}.___SSearchClear_zti6w_gg_{padding:0 var(--intergalactic-spacing-2x, 8px)}.___SSearchClear_zti6w_gg_.__hide_zti6w_gg_{visibility:hidden}.___SOutline_zti6w_gg_{top:-1px;left:-1px;width:100%;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0;box-sizing:content-box}" /*__inner_css_end__*/, "zti6w_gg_") /*__reshadow_css_end__*/, {
|
|
28
|
+
"__SInputSearch": "___SInputSearch_zti6w_gg_",
|
|
29
|
+
"_size_m": "_size_m_zti6w_gg_",
|
|
30
|
+
"__SSearchClear": "___SSearchClear_zti6w_gg_",
|
|
31
|
+
"_hide": "__hide_zti6w_gg_",
|
|
32
|
+
"__SOutline": "___SOutline_zti6w_gg_"
|
|
33
33
|
});
|
|
34
34
|
var InputSearchRoot = /*#__PURE__*/function (_Component) {
|
|
35
35
|
(0, _inherits2["default"])(InputSearchRoot, _Component);
|
package/lib/cjs/Select.js
CHANGED
|
@@ -38,14 +38,14 @@ var _popper = require("@semcore/popper");
|
|
|
38
38
|
var _assignProps6 = require("@semcore/utils/lib/assignProps");
|
|
39
39
|
var _excluded = ["Children", "options", "multiselect", "value", "uid", "forcedAdvancedMode"];
|
|
40
40
|
/*__reshadow-styles__:"./style/select.shadow.css"*/
|
|
41
|
-
var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".
|
|
42
|
-
"__SOptionCheckbox": "
|
|
43
|
-
"_selected": "
|
|
44
|
-
"_size_l": "
|
|
45
|
-
"_indeterminate": "
|
|
46
|
-
"_theme": "
|
|
47
|
-
"--theme": "--
|
|
48
|
-
"_size_m": "
|
|
41
|
+
var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SOptionCheckbox_1i4n7_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_1i4n7_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_1i4n7_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}.___SOptionCheckbox_1i4n7_gg_.__selected_1i4n7_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjI1IDFMNCA1LjI1TDEuNzUgMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_1i4n7_gg_._size_l_1i4n7_gg_{width:20px;height:20px}.___SOptionCheckbox_1i4n7_gg_._size_l_1i4n7_gg_.__selected_1i4n7_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMSAxLjVMNC43NSA3Ljc1TDEgNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_1i4n7_gg_.__indeterminate_1i4n7_gg_:before,.___SOptionCheckbox_1i4n7_gg_.__selected_1i4n7_gg_:before{background-color:var(--intergalactic-control-primary-info, #008ff8);border-color:var(--intergalactic-control-primary-info, #008ff8)}.___SOptionCheckbox_1i4n7_gg_.__theme_1i4n7_gg_:before{border-color:var(--theme_1i4n7)}.___SOptionCheckbox_1i4n7_gg_.__theme_1i4n7_gg_.__indeterminate_1i4n7_gg_:before,.___SOptionCheckbox_1i4n7_gg_.__theme_1i4n7_gg_.__selected_1i4n7_gg_:before{background-color:var(--theme_1i4n7);border-color:var(--theme_1i4n7)}.___SOptionCheckbox_1i4n7_gg_.__selected_1i4n7_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(196, 229, 254, 0.7))}@media (hover:hover){.___SOptionCheckbox_1i4n7_gg_.__selected_1i4n7_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}.___SOptionCheckbox_1i4n7_gg_.__indeterminate_1i4n7_gg_:after{background-color:#fff;background-image:none;margin:auto;border-radius:1px}.___SOptionCheckbox_1i4n7_gg_.__indeterminate_1i4n7_gg_._size_l_1i4n7_gg_:after{width:12px;height:2px}.___SOptionCheckbox_1i4n7_gg_.__indeterminate_1i4n7_gg_._size_m_1i4n7_gg_:after{width:8px;height:2px}" /*__inner_css_end__*/, "1i4n7_gg_") /*__reshadow_css_end__*/, {
|
|
42
|
+
"__SOptionCheckbox": "___SOptionCheckbox_1i4n7_gg_",
|
|
43
|
+
"_selected": "__selected_1i4n7_gg_",
|
|
44
|
+
"_size_l": "_size_l_1i4n7_gg_",
|
|
45
|
+
"_indeterminate": "__indeterminate_1i4n7_gg_",
|
|
46
|
+
"_theme": "__theme_1i4n7_gg_",
|
|
47
|
+
"--theme": "--theme_1i4n7",
|
|
48
|
+
"_size_m": "_size_m_1i4n7_gg_"
|
|
49
49
|
});
|
|
50
50
|
function isSelectedOption(value, valueOption) {
|
|
51
51
|
return Array.isArray(value) ? value.includes(valueOption) : valueOption === value;
|
package/lib/es6/InputSearch.js
CHANGED
|
@@ -20,12 +20,12 @@ import { selectContext } from './context';
|
|
|
20
20
|
import i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';
|
|
21
21
|
import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
|
|
22
22
|
/*__reshadow-styles__:"./style/input-search.shadow.css"*/
|
|
23
|
-
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".
|
|
24
|
-
"__SInputSearch": "
|
|
25
|
-
"_size_m": "
|
|
26
|
-
"__SSearchClear": "
|
|
27
|
-
"_hide": "
|
|
28
|
-
"__SOutline": "
|
|
23
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SInputSearch_zti6w_gg_._size_m_zti6w_gg_{height:32px}.___SSearchClear_zti6w_gg_{padding:0 var(--intergalactic-spacing-2x, 8px)}.___SSearchClear_zti6w_gg_.__hide_zti6w_gg_{visibility:hidden}.___SOutline_zti6w_gg_{top:-1px;left:-1px;width:100%;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0;box-sizing:content-box}" /*__inner_css_end__*/, "zti6w_gg_") /*__reshadow_css_end__*/, {
|
|
24
|
+
"__SInputSearch": "___SInputSearch_zti6w_gg_",
|
|
25
|
+
"_size_m": "_size_m_zti6w_gg_",
|
|
26
|
+
"__SSearchClear": "___SSearchClear_zti6w_gg_",
|
|
27
|
+
"_hide": "__hide_zti6w_gg_",
|
|
28
|
+
"__SOutline": "___SOutline_zti6w_gg_"
|
|
29
29
|
});
|
|
30
30
|
var InputSearchRoot = /*#__PURE__*/function (_Component) {
|
|
31
31
|
_inherits(InputSearchRoot, _Component);
|
package/lib/es6/Select.js
CHANGED
|
@@ -34,14 +34,14 @@ import { selectContext } from './context';
|
|
|
34
34
|
import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
|
|
35
35
|
import { isInputTriggerTag } from '@semcore/popper';
|
|
36
36
|
/*__reshadow-styles__:"./style/select.shadow.css"*/
|
|
37
|
-
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".
|
|
38
|
-
"__SOptionCheckbox": "
|
|
39
|
-
"_selected": "
|
|
40
|
-
"_size_l": "
|
|
41
|
-
"_indeterminate": "
|
|
42
|
-
"_theme": "
|
|
43
|
-
"--theme": "--
|
|
44
|
-
"_size_m": "
|
|
37
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SOptionCheckbox_1i4n7_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_1i4n7_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_1i4n7_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}.___SOptionCheckbox_1i4n7_gg_.__selected_1i4n7_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjI1IDFMNCA1LjI1TDEuNzUgMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_1i4n7_gg_._size_l_1i4n7_gg_{width:20px;height:20px}.___SOptionCheckbox_1i4n7_gg_._size_l_1i4n7_gg_.__selected_1i4n7_gg_::after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMSAxLjVMNC43NSA3Ljc1TDEgNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}.___SOptionCheckbox_1i4n7_gg_.__indeterminate_1i4n7_gg_:before,.___SOptionCheckbox_1i4n7_gg_.__selected_1i4n7_gg_:before{background-color:var(--intergalactic-control-primary-info, #008ff8);border-color:var(--intergalactic-control-primary-info, #008ff8)}.___SOptionCheckbox_1i4n7_gg_.__theme_1i4n7_gg_:before{border-color:var(--theme_1i4n7)}.___SOptionCheckbox_1i4n7_gg_.__theme_1i4n7_gg_.__indeterminate_1i4n7_gg_:before,.___SOptionCheckbox_1i4n7_gg_.__theme_1i4n7_gg_.__selected_1i4n7_gg_:before{background-color:var(--theme_1i4n7);border-color:var(--theme_1i4n7)}.___SOptionCheckbox_1i4n7_gg_.__selected_1i4n7_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(196, 229, 254, 0.7))}@media (hover:hover){.___SOptionCheckbox_1i4n7_gg_.__selected_1i4n7_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}.___SOptionCheckbox_1i4n7_gg_.__indeterminate_1i4n7_gg_:after{background-color:#fff;background-image:none;margin:auto;border-radius:1px}.___SOptionCheckbox_1i4n7_gg_.__indeterminate_1i4n7_gg_._size_l_1i4n7_gg_:after{width:12px;height:2px}.___SOptionCheckbox_1i4n7_gg_.__indeterminate_1i4n7_gg_._size_m_1i4n7_gg_:after{width:8px;height:2px}" /*__inner_css_end__*/, "1i4n7_gg_") /*__reshadow_css_end__*/, {
|
|
38
|
+
"__SOptionCheckbox": "___SOptionCheckbox_1i4n7_gg_",
|
|
39
|
+
"_selected": "__selected_1i4n7_gg_",
|
|
40
|
+
"_size_l": "_size_l_1i4n7_gg_",
|
|
41
|
+
"_indeterminate": "__indeterminate_1i4n7_gg_",
|
|
42
|
+
"_theme": "__theme_1i4n7_gg_",
|
|
43
|
+
"--theme": "--theme_1i4n7",
|
|
44
|
+
"_size_m": "_size_m_1i4n7_gg_"
|
|
45
45
|
});
|
|
46
46
|
import { callAllEventHandlers } from '@semcore/utils/lib/assignProps';
|
|
47
47
|
import { isAdvanceMode } from '@semcore/utils/lib/findComponent';
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/select",
|
|
3
3
|
"description": "Semrush Select Component",
|
|
4
|
-
"version": "4.48.
|
|
4
|
+
"version": "4.48.4",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"license": "MIT",
|
|
10
10
|
"dependencies": {
|
|
11
11
|
"@semcore/base-trigger": "4.48.1",
|
|
12
|
-
"@semcore/button": "5.39.
|
|
12
|
+
"@semcore/button": "5.39.3",
|
|
13
13
|
"@semcore/checkbox": "7.41.1",
|
|
14
14
|
"@semcore/divider": "4.37.1",
|
|
15
15
|
"@semcore/dropdown-menu": "4.43.2",
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
|
3
|
-
import { fn } from '@storybook/test';
|
|
4
|
-
|
|
5
|
-
import { Flex } from '@semcore/flex-box';
|
|
6
|
-
import Select from '@semcore/select';
|
|
7
|
-
import Button from '@semcore/button';
|
|
8
|
-
import { Text } from '@semcore/typography';
|
|
9
|
-
|
|
10
|
-
const meta: Meta<typeof Select> = {
|
|
11
|
-
title: 'Components/Select/Test',
|
|
12
|
-
component: Select,
|
|
13
|
-
};
|
|
14
|
-
|
|
15
|
-
export default meta;
|
|
16
|
-
type Story = StoryObj<typeof Select>;
|
|
17
|
-
|
|
18
|
-
const options: { value: number; label: string; children: string }[] = Array(6)
|
|
19
|
-
.fill('')
|
|
20
|
-
.map((_, index) => ({
|
|
21
|
-
value: index,
|
|
22
|
-
label: `Option ${index}`,
|
|
23
|
-
children: `Option ${index}`,
|
|
24
|
-
}));
|
|
25
|
-
|
|
26
|
-
export const BasicSelectFocusIteracrion: Story = {
|
|
27
|
-
render: () => {
|
|
28
|
-
return (
|
|
29
|
-
<>
|
|
30
|
-
<Button>Focus start</Button>
|
|
31
|
-
<Flex direction='column'>
|
|
32
|
-
<Text tag='label' size={200} htmlFor='basic-select'>
|
|
33
|
-
Basic select
|
|
34
|
-
</Text>
|
|
35
|
-
<Select
|
|
36
|
-
mt={2}
|
|
37
|
-
mr='auto'
|
|
38
|
-
options={options}
|
|
39
|
-
placeholder='Select option'
|
|
40
|
-
id='basic-select'
|
|
41
|
-
interaction='focus'
|
|
42
|
-
/>
|
|
43
|
-
</Flex>
|
|
44
|
-
<Button size={'m'}>Focus end</Button>
|
|
45
|
-
</>
|
|
46
|
-
);
|
|
47
|
-
},
|
|
48
|
-
};
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
|
3
|
-
|
|
4
|
-
import Select from '@semcore/select';
|
|
5
|
-
import { Flex } from '@semcore/flex-box';
|
|
6
|
-
import { Text } from '@semcore/typography';
|
|
7
|
-
|
|
8
|
-
const meta: Meta<typeof Select> = {
|
|
9
|
-
title: 'Components/Select',
|
|
10
|
-
component: Select,
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
type Story = StoryObj<typeof Select>;
|
|
14
|
-
|
|
15
|
-
export const options: Story = {
|
|
16
|
-
render: () => {
|
|
17
|
-
return (
|
|
18
|
-
<Flex direction='column'>
|
|
19
|
-
<Text tag='label' size={200} htmlFor='options-select'>
|
|
20
|
-
Options
|
|
21
|
-
</Text>
|
|
22
|
-
<Select>
|
|
23
|
-
<Select.Trigger
|
|
24
|
-
placeholder='There are several option types'
|
|
25
|
-
mr='auto'
|
|
26
|
-
mt={2}
|
|
27
|
-
id='options-select'
|
|
28
|
-
/>
|
|
29
|
-
<Select.Menu>
|
|
30
|
-
<Select.Option value={1}>Default option</Select.Option>
|
|
31
|
-
<Select.Option value={2}>
|
|
32
|
-
<Select.Option.Checkbox />
|
|
33
|
-
Checkbox option
|
|
34
|
-
</Select.Option>
|
|
35
|
-
<Select.Option value={3} disabled>
|
|
36
|
-
<Select.Option.Checkbox />
|
|
37
|
-
Disabled checkbox option
|
|
38
|
-
</Select.Option>
|
|
39
|
-
<Select.Option value={3}>
|
|
40
|
-
<Select.Option.Content>
|
|
41
|
-
<Select.Option.Checkbox indeterminate />
|
|
42
|
-
Indeterminate checkbox option
|
|
43
|
-
</Select.Option.Content>
|
|
44
|
-
<Select.Option.Hint>Hint for the option</Select.Option.Hint>
|
|
45
|
-
</Select.Option>
|
|
46
|
-
|
|
47
|
-
<Select.Group title={'Group title'} subTitle={'Hint for the title'}>
|
|
48
|
-
<Select.Option value={4} selected>
|
|
49
|
-
1st option in group
|
|
50
|
-
</Select.Option>
|
|
51
|
-
<Select.Option value={5}>2nd option in group</Select.Option>
|
|
52
|
-
<Select.Option value={6}>3rd option in group</Select.Option>
|
|
53
|
-
</Select.Group>
|
|
54
|
-
</Select.Menu>
|
|
55
|
-
</Select>
|
|
56
|
-
</Flex>
|
|
57
|
-
);
|
|
58
|
-
},
|
|
59
|
-
};
|
|
60
|
-
|
|
61
|
-
export default meta;
|