@semcore/dropdown-menu 4.8.0 → 4.8.1
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 +8 -1
- package/lib/cjs/DropdownMenu.js +13 -13
- package/lib/cjs/index.d.js.map +1 -1
- package/lib/cjs/style/dropdown-menu.shadow.css +7 -7
- package/lib/cjs/styleScrollArea.js +6 -6
- package/lib/es6/DropdownMenu.js +13 -13
- package/lib/es6/index.d.js.map +1 -1
- package/lib/es6/style/dropdown-menu.shadow.css +7 -7
- package/lib/es6/styleScrollArea.js +6 -6
- package/lib/types/index.d.ts +1 -0
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -2,7 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
-
## [4.8.
|
|
5
|
+
## [4.8.1-prerelease.0] - 2023-09-05
|
|
6
|
+
|
|
7
|
+
### Fixed
|
|
8
|
+
|
|
9
|
+
- Both highlighted and selected menu items were not visually distinguishable from selected items.
|
|
10
|
+
- `highlightedIndex` prop was added to `DropdownMenu.Menu` context type.
|
|
11
|
+
|
|
12
|
+
## [4.8.0] - 2023-09-04
|
|
6
13
|
|
|
7
14
|
### Changed
|
|
8
15
|
|
package/lib/cjs/DropdownMenu.js
CHANGED
|
@@ -29,19 +29,19 @@ var _styleScrollArea = _interopRequireDefault(require("./styleScrollArea"));
|
|
|
29
29
|
var _excluded = ["className"],
|
|
30
30
|
_excluded2 = ["className"];
|
|
31
31
|
/*__reshadow-styles__:"./style/dropdown-menu.shadow.css"*/
|
|
32
|
-
var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".
|
|
33
|
-
"__SDropdownMenuList": "
|
|
34
|
-
"__SDropdownMenuItem": "
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
"_disabled": "
|
|
38
|
-
"_size_l": "
|
|
39
|
-
"_size_m": "
|
|
40
|
-
"_notInteractive": "
|
|
41
|
-
"_variant_hint": "
|
|
42
|
-
"_variant_title": "
|
|
43
|
-
"__SDropdownMenuItemAddon": "
|
|
44
|
-
"__SPopper": "
|
|
32
|
+
var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SDropdownMenuItem_5thpm_gg_,.___SDropdownMenuList_5thpm_gg_{position:relative;color:var(--intergalactic-text-primary, #191b23)}.___SDropdownMenuList_5thpm_gg_{max-height:240px;padding:var(--intergalactic-spacing-1x, 4px)0;min-height:26px;min-width:32px;box-sizing:content-box;z-index:0}.___SDropdownMenuItem_5thpm_gg_{display:flex;align-items:center;text-decoration:none;box-sizing:border-box;cursor:pointer;width:100%;text-align:left;line-height:normal}@media (hover:hover){.___SDropdownMenuItem_5thpm_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-hover, #f4f5f9)}}.___SDropdownMenuItem_5thpm_gg_:focus{outline:0}.___SDropdownMenuItem_5thpm_gg_.__selected_5thpm_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(196, 229, 254, 0.7));box-shadow:2px 0 0 0 var(--intergalactic-control-primary-info, #008ff8) inset}@media (hover:hover){.___SDropdownMenuItem_5thpm_gg_.__selected_5thpm_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}.___SDropdownMenuItem_5thpm_gg_.__highlighted_5thpm_gg_{z-index:1;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset}.___SDropdownMenuItem_5thpm_gg_.__disabled_5thpm_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SDropdownMenuItem_5thpm_gg_._size_l_5thpm_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%);padding:var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-3x, 12px);min-height:40px}.___SDropdownMenuItem_5thpm_gg_._size_m_5thpm_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);padding:calc(var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) var(--intergalactic-spacing-2x, 8px);min-height:32px}.___SDropdownMenuItem_5thpm_gg_.__notInteractive_5thpm_gg_{cursor:default}@media (hover:hover){.___SDropdownMenuItem_5thpm_gg_.__notInteractive_5thpm_gg_:hover{background:0 0}}.___SDropdownMenuItem_5thpm_gg_._variant_hint_5thpm_gg_{color:var(--intergalactic-text-secondary, #6c6e79);cursor:default}@media (hover:hover){.___SDropdownMenuItem_5thpm_gg_._variant_hint_5thpm_gg_:hover{background:0 0}}.___SDropdownMenuItem_5thpm_gg_._variant_title_5thpm_gg_{font-weight:var(--intergalactic-bold, 700);cursor:default}@media (hover:hover){.___SDropdownMenuItem_5thpm_gg_._variant_title_5thpm_gg_:hover{background:0 0}}.___SDropdownMenuItemAddon_5thpm_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SDropdownMenuItemAddon_5thpm_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_5thpm_gg_:last-child{margin-right:0}.___SPopper_5thpm_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}" /*__inner_css_end__*/, "5thpm_gg_") /*__reshadow_css_end__*/, {
|
|
33
|
+
"__SDropdownMenuList": "___SDropdownMenuList_5thpm_gg_",
|
|
34
|
+
"__SDropdownMenuItem": "___SDropdownMenuItem_5thpm_gg_",
|
|
35
|
+
"_selected": "__selected_5thpm_gg_",
|
|
36
|
+
"_highlighted": "__highlighted_5thpm_gg_",
|
|
37
|
+
"_disabled": "__disabled_5thpm_gg_",
|
|
38
|
+
"_size_l": "_size_l_5thpm_gg_",
|
|
39
|
+
"_size_m": "_size_m_5thpm_gg_",
|
|
40
|
+
"_notInteractive": "__notInteractive_5thpm_gg_",
|
|
41
|
+
"_variant_hint": "_variant_hint_5thpm_gg_",
|
|
42
|
+
"_variant_title": "_variant_title_5thpm_gg_",
|
|
43
|
+
"__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_5thpm_gg_",
|
|
44
|
+
"__SPopper": "___SPopper_5thpm_gg_"
|
|
45
45
|
});
|
|
46
46
|
var KEYS = ['ArrowDown', 'ArrowUp', 'Enter', ' '];
|
|
47
47
|
var INTERACTION_TAGS = ['INPUT', 'TEXTAREA'];
|
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 { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport Dropdown, {\n DropdownContext,\n DropdownProps,\n DropdownHandlers,\n DropdownTriggerProps,\n} from '@semcore/dropdown';\nimport { Box, BoxProps, FlexProps } from '@semcore/flex-box';\nimport { ScrollAreaProps } from '@semcore/scroll-area';\n\nexport type DropdownMenuSize = 'm' | 'l';\n\n/** @deprecated */\nexport interface IDropdownMenuProps extends DropdownMenuProps, UnknownProperties {}\nexport type DropdownMenuProps = DropdownProps & {\n /**\n * Size of the menu\n * @default m\n */\n size?: DropdownMenuSize;\n /**\n * Index of the element selected by default\n */\n defaultHighlightedIndex?: number;\n /**\n * Index of the selected item\n */\n highlightedIndex?: number;\n /**\n * Callback for highlightedIndex change\n * highlightedIndex - Index of the selected item\n */\n onHighlightedIndexChange?: (highlightedIndex: number) => void;\n locale?: string;\n};\n\n/** @deprecated */\nexport interface IDropdownMenuListProps extends DropdownMenuListProps, UnknownProperties {}\nexport type DropdownMenuListProps = BoxProps &\n ScrollAreaProps & {\n /**\n * Size of the menu\n * @default m\n */\n size?: DropdownMenuSize;\n };\n\n/** @deprecated */\nexport interface IDropdownMenuMenuProps extends DropdownMenuMenuProps, UnknownProperties {}\nexport type DropdownMenuMenuProps = DropdownMenuListProps & {};\n\n/** @deprecated */\nexport interface IDropdownMenuItemProps extends DropdownMenuItemProps, UnknownProperties {}\nexport type DropdownMenuItemProps = FlexProps & {\n /**\n * Enables selected state\n */\n selected?: boolean;\n /**\n * Disables the component\n */\n disabled?: boolean;\n /**\n * Adds focus styles around\n */\n highlighted?: boolean;\n /**\n * Makes the element non-interactive\n */\n notInteractive?: boolean;\n /**\n * Size of the component\n * @default m\n */\n size?: DropdownMenuSize;\n};\n\n/** @deprecated */\nexport interface IDropdownMenuItemHintProps extends DropdownMenuItemHintProps, UnknownProperties {}\nexport type DropdownMenuItemHintProps = FlexProps & {\n /**\n * Size of the component\n * @default m\n */\n size?: DropdownMenuSize;\n};\n\n/** @deprecated */\nexport interface IDropdownMenuItemTitleProps\n extends DropdownMenuItemTitleProps,\n UnknownProperties {}\nexport type DropdownMenuItemTitleProps = FlexProps & {\n /**\n * Size of the component\n * @default m\n */\n size?: DropdownMenuSize;\n};\n\n/** @deprecated */\nexport interface IDropdownMenuContext extends DropdownMenuContext, UnknownProperties {}\nexport type DropdownMenuContext = DropdownContext & {\n getListProps: PropGetterFn;\n getItemProps: PropGetterFn;\n getItemHintProps: PropGetterFn;\n getItemTitleProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface IDropdownMenuHandlers extends DropdownMenuHandlers, UnknownProperties {}\nexport type DropdownMenuHandlers = DropdownHandlers & {\n highlightedIndex: (index: number) => void;\n};\n\nexport type DropdownMenuTriggerProps = DropdownTriggerProps;\n\ndeclare const DropdownMenu: Intergalactic.Component<\n 'div',\n DropdownMenuProps,\n DropdownMenuContext,\n [handlers: DropdownMenuHandlers]\n> & {\n Trigger: typeof Dropdown.Trigger;\n Popper: Intergalactic.Component<'div', DropdownMenuProps>;\n List: Intergalactic.Component<\n 'div',\n DropdownMenuListProps,\n DropdownMenuContext,\n [handlers: DropdownMenuHandlers]\n >;\n Menu: Intergalactic.Component<\n 'div',\n DropdownMenuMenuProps,\n DropdownMenuContext,\n [handlers: DropdownMenuHandlers]\n >;\n Item: Intergalactic.Component<\n 'div',\n DropdownMenuItemProps,\n DropdownMenuContext,\n [handlers: DropdownMenuHandlers]\n > & {\n Addon: typeof Box;\n };\n ItemTitle: Intergalactic.Component<'div', DropdownMenuItemTitleProps>;\n ItemHint: Intergalactic.Component<'div', DropdownMenuItemHintProps>;\n};\n\nexport default DropdownMenu;\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport Dropdown, {\n DropdownContext,\n DropdownProps,\n DropdownHandlers,\n DropdownTriggerProps,\n} from '@semcore/dropdown';\nimport { Box, BoxProps, FlexProps } from '@semcore/flex-box';\nimport { ScrollAreaProps } from '@semcore/scroll-area';\n\nexport type DropdownMenuSize = 'm' | 'l';\n\n/** @deprecated */\nexport interface IDropdownMenuProps extends DropdownMenuProps, UnknownProperties {}\nexport type DropdownMenuProps = DropdownProps & {\n /**\n * Size of the menu\n * @default m\n */\n size?: DropdownMenuSize;\n /**\n * Index of the element selected by default\n */\n defaultHighlightedIndex?: number;\n /**\n * Index of the selected item\n */\n highlightedIndex?: number;\n /**\n * Callback for highlightedIndex change\n * highlightedIndex - Index of the selected item\n */\n onHighlightedIndexChange?: (highlightedIndex: number) => void;\n locale?: string;\n};\n\n/** @deprecated */\nexport interface IDropdownMenuListProps extends DropdownMenuListProps, UnknownProperties {}\nexport type DropdownMenuListProps = BoxProps &\n ScrollAreaProps & {\n /**\n * Size of the menu\n * @default m\n */\n size?: DropdownMenuSize;\n };\n\n/** @deprecated */\nexport interface IDropdownMenuMenuProps extends DropdownMenuMenuProps, UnknownProperties {}\nexport type DropdownMenuMenuProps = DropdownMenuListProps & {};\n\n/** @deprecated */\nexport interface IDropdownMenuItemProps extends DropdownMenuItemProps, UnknownProperties {}\nexport type DropdownMenuItemProps = FlexProps & {\n /**\n * Enables selected state\n */\n selected?: boolean;\n /**\n * Disables the component\n */\n disabled?: boolean;\n /**\n * Adds focus styles around\n */\n highlighted?: boolean;\n /**\n * Makes the element non-interactive\n */\n notInteractive?: boolean;\n /**\n * Size of the component\n * @default m\n */\n size?: DropdownMenuSize;\n};\n\n/** @deprecated */\nexport interface IDropdownMenuItemHintProps extends DropdownMenuItemHintProps, UnknownProperties {}\nexport type DropdownMenuItemHintProps = FlexProps & {\n /**\n * Size of the component\n * @default m\n */\n size?: DropdownMenuSize;\n};\n\n/** @deprecated */\nexport interface IDropdownMenuItemTitleProps\n extends DropdownMenuItemTitleProps,\n UnknownProperties {}\nexport type DropdownMenuItemTitleProps = FlexProps & {\n /**\n * Size of the component\n * @default m\n */\n size?: DropdownMenuSize;\n};\n\n/** @deprecated */\nexport interface IDropdownMenuContext extends DropdownMenuContext, UnknownProperties {}\nexport type DropdownMenuContext = DropdownContext & {\n highlightedIndex?: number;\n getListProps: PropGetterFn;\n getItemProps: PropGetterFn;\n getItemHintProps: PropGetterFn;\n getItemTitleProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface IDropdownMenuHandlers extends DropdownMenuHandlers, UnknownProperties {}\nexport type DropdownMenuHandlers = DropdownHandlers & {\n highlightedIndex: (index: number) => void;\n};\n\nexport type DropdownMenuTriggerProps = DropdownTriggerProps;\n\ndeclare const DropdownMenu: Intergalactic.Component<\n 'div',\n DropdownMenuProps,\n DropdownMenuContext,\n [handlers: DropdownMenuHandlers]\n> & {\n Trigger: typeof Dropdown.Trigger;\n Popper: Intergalactic.Component<'div', DropdownMenuProps>;\n List: Intergalactic.Component<\n 'div',\n DropdownMenuListProps,\n DropdownMenuContext,\n [handlers: DropdownMenuHandlers]\n >;\n Menu: Intergalactic.Component<\n 'div',\n DropdownMenuMenuProps,\n DropdownMenuContext,\n [handlers: DropdownMenuHandlers]\n >;\n Item: Intergalactic.Component<\n 'div',\n DropdownMenuItemProps,\n DropdownMenuContext,\n [handlers: DropdownMenuHandlers]\n > & {\n Addon: typeof Box;\n };\n ItemTitle: Intergalactic.Component<'div', DropdownMenuItemTitleProps>;\n ItemHint: Intergalactic.Component<'div', DropdownMenuItemHintProps>;\n};\n\nexport default DropdownMenu;\n"],"mappings":""}
|
|
@@ -30,10 +30,6 @@ SDropdownMenuItem {
|
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
SDropdownMenuItem[highlighted] {
|
|
34
|
-
z-index: 1;
|
|
35
|
-
box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset;
|
|
36
|
-
}
|
|
37
33
|
|
|
38
34
|
SDropdownMenuItem[selected] {
|
|
39
35
|
background-color: var(--intergalactic-dropdown-menu-item-selected, rgba(196, 229, 254, 0.7));
|
|
@@ -44,6 +40,11 @@ SDropdownMenuItem[selected] {
|
|
|
44
40
|
}
|
|
45
41
|
}
|
|
46
42
|
|
|
43
|
+
SDropdownMenuItem[highlighted] {
|
|
44
|
+
z-index: 1;
|
|
45
|
+
box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset;
|
|
46
|
+
}
|
|
47
|
+
|
|
47
48
|
SDropdownMenuItem[disabled] {
|
|
48
49
|
opacity: var(--intergalactic-disabled-opacity, 0.3);
|
|
49
50
|
cursor: default;
|
|
@@ -60,8 +61,7 @@ SDropdownMenuItem[size='l'] {
|
|
|
60
61
|
SDropdownMenuItem[size='m'] {
|
|
61
62
|
font-size: var(--intergalactic-fs-200, 14px);
|
|
62
63
|
line-height: var(--intergalactic-lh-200, 142%);
|
|
63
|
-
padding: calc(var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px))
|
|
64
|
-
var(--intergalactic-spacing-2x, 8px);
|
|
64
|
+
padding: calc(var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) var(--intergalactic-spacing-2x, 8px);
|
|
65
65
|
min-height: 32px;
|
|
66
66
|
}
|
|
67
67
|
|
|
@@ -109,4 +109,4 @@ SPopper {
|
|
|
109
109
|
&:focus {
|
|
110
110
|
box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
|
|
111
111
|
}
|
|
112
|
-
}
|
|
112
|
+
}
|
|
@@ -11,12 +11,12 @@ var _core = require("@semcore/core");
|
|
|
11
11
|
*
|
|
12
12
|
* We will figure out what to do with it and remove it.
|
|
13
13
|
* */
|
|
14
|
-
var scrollStyles = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".
|
|
15
|
-
"__SShadowHorizontal": "
|
|
16
|
-
"_position_median": "
|
|
17
|
-
"_position_start": "
|
|
18
|
-
"_position_end": "
|
|
19
|
-
"__SShadowVertical": "
|
|
14
|
+
var scrollStyles = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SShadowHorizontal_u6b3g_gg_:after,.___SShadowHorizontal_u6b3g_gg_:before{width:16px;height:100%;border-radius:var(--intergalactic-control-rounded, 6px)}.___SShadowHorizontal_u6b3g_gg_._position_median_u6b3g_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-left,\n linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n )}.___SShadowHorizontal_u6b3g_gg_._position_median_u6b3g_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-right,\n linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n )}.___SShadowHorizontal_u6b3g_gg_._position_start_u6b3g_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-left,\n linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n )}.___SShadowHorizontal_u6b3g_gg_._position_end_u6b3g_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-right,\n linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n )}.___SShadowVertical_u6b3g_gg_:after,.___SShadowVertical_u6b3g_gg_:before{width:100%;height:16px;border-radius:var(--intergalactic-control-rounded, 6px)}.___SShadowVertical_u6b3g_gg_._position_median_u6b3g_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-top,\n linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n )}.___SShadowVertical_u6b3g_gg_._position_median_u6b3g_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-bottom,\n linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n )}.___SShadowVertical_u6b3g_gg_._position_start_u6b3g_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-top,\n linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n )}.___SShadowVertical_u6b3g_gg_._position_end_u6b3g_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-bottom,\n linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n )}" /*__inner_css_end__*/, "u6b3g_gg_") /*__reshadow_css_end__*/, {
|
|
15
|
+
"__SShadowHorizontal": "___SShadowHorizontal_u6b3g_gg_",
|
|
16
|
+
"_position_median": "_position_median_u6b3g_gg_",
|
|
17
|
+
"_position_start": "_position_start_u6b3g_gg_",
|
|
18
|
+
"_position_end": "_position_end_u6b3g_gg_",
|
|
19
|
+
"__SShadowVertical": "___SShadowVertical_u6b3g_gg_"
|
|
20
20
|
});
|
|
21
21
|
var _default = scrollStyles;
|
|
22
22
|
exports["default"] = _default;
|
package/lib/es6/DropdownMenu.js
CHANGED
|
@@ -28,19 +28,19 @@ import i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';
|
|
|
28
28
|
import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
|
|
29
29
|
import scrollStyles from './styleScrollArea';
|
|
30
30
|
/*__reshadow-styles__:"./style/dropdown-menu.shadow.css"*/
|
|
31
|
-
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".
|
|
32
|
-
"__SDropdownMenuList": "
|
|
33
|
-
"__SDropdownMenuItem": "
|
|
34
|
-
"
|
|
35
|
-
"
|
|
36
|
-
"_disabled": "
|
|
37
|
-
"_size_l": "
|
|
38
|
-
"_size_m": "
|
|
39
|
-
"_notInteractive": "
|
|
40
|
-
"_variant_hint": "
|
|
41
|
-
"_variant_title": "
|
|
42
|
-
"__SDropdownMenuItemAddon": "
|
|
43
|
-
"__SPopper": "
|
|
31
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SDropdownMenuItem_5thpm_gg_,.___SDropdownMenuList_5thpm_gg_{position:relative;color:var(--intergalactic-text-primary, #191b23)}.___SDropdownMenuList_5thpm_gg_{max-height:240px;padding:var(--intergalactic-spacing-1x, 4px)0;min-height:26px;min-width:32px;box-sizing:content-box;z-index:0}.___SDropdownMenuItem_5thpm_gg_{display:flex;align-items:center;text-decoration:none;box-sizing:border-box;cursor:pointer;width:100%;text-align:left;line-height:normal}@media (hover:hover){.___SDropdownMenuItem_5thpm_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-hover, #f4f5f9)}}.___SDropdownMenuItem_5thpm_gg_:focus{outline:0}.___SDropdownMenuItem_5thpm_gg_.__selected_5thpm_gg_{background-color:var(--intergalactic-dropdown-menu-item-selected, rgba(196, 229, 254, 0.7));box-shadow:2px 0 0 0 var(--intergalactic-control-primary-info, #008ff8) inset}@media (hover:hover){.___SDropdownMenuItem_5thpm_gg_.__selected_5thpm_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}.___SDropdownMenuItem_5thpm_gg_.__highlighted_5thpm_gg_{z-index:1;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset}.___SDropdownMenuItem_5thpm_gg_.__disabled_5thpm_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SDropdownMenuItem_5thpm_gg_._size_l_5thpm_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%);padding:var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-3x, 12px);min-height:40px}.___SDropdownMenuItem_5thpm_gg_._size_m_5thpm_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);padding:calc(var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) var(--intergalactic-spacing-2x, 8px);min-height:32px}.___SDropdownMenuItem_5thpm_gg_.__notInteractive_5thpm_gg_{cursor:default}@media (hover:hover){.___SDropdownMenuItem_5thpm_gg_.__notInteractive_5thpm_gg_:hover{background:0 0}}.___SDropdownMenuItem_5thpm_gg_._variant_hint_5thpm_gg_{color:var(--intergalactic-text-secondary, #6c6e79);cursor:default}@media (hover:hover){.___SDropdownMenuItem_5thpm_gg_._variant_hint_5thpm_gg_:hover{background:0 0}}.___SDropdownMenuItem_5thpm_gg_._variant_title_5thpm_gg_{font-weight:var(--intergalactic-bold, 700);cursor:default}@media (hover:hover){.___SDropdownMenuItem_5thpm_gg_._variant_title_5thpm_gg_:hover{background:0 0}}.___SDropdownMenuItemAddon_5thpm_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SDropdownMenuItemAddon_5thpm_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_5thpm_gg_:last-child{margin-right:0}.___SPopper_5thpm_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}" /*__inner_css_end__*/, "5thpm_gg_") /*__reshadow_css_end__*/, {
|
|
32
|
+
"__SDropdownMenuList": "___SDropdownMenuList_5thpm_gg_",
|
|
33
|
+
"__SDropdownMenuItem": "___SDropdownMenuItem_5thpm_gg_",
|
|
34
|
+
"_selected": "__selected_5thpm_gg_",
|
|
35
|
+
"_highlighted": "__highlighted_5thpm_gg_",
|
|
36
|
+
"_disabled": "__disabled_5thpm_gg_",
|
|
37
|
+
"_size_l": "_size_l_5thpm_gg_",
|
|
38
|
+
"_size_m": "_size_m_5thpm_gg_",
|
|
39
|
+
"_notInteractive": "__notInteractive_5thpm_gg_",
|
|
40
|
+
"_variant_hint": "_variant_hint_5thpm_gg_",
|
|
41
|
+
"_variant_title": "_variant_title_5thpm_gg_",
|
|
42
|
+
"__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_5thpm_gg_",
|
|
43
|
+
"__SPopper": "___SPopper_5thpm_gg_"
|
|
44
44
|
});
|
|
45
45
|
var KEYS = ['ArrowDown', 'ArrowUp', 'Enter', ' '];
|
|
46
46
|
var INTERACTION_TAGS = ['INPUT', 'TEXTAREA'];
|
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 { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport Dropdown, {\n DropdownContext,\n DropdownProps,\n DropdownHandlers,\n DropdownTriggerProps,\n} from '@semcore/dropdown';\nimport { Box, BoxProps, FlexProps } from '@semcore/flex-box';\nimport { ScrollAreaProps } from '@semcore/scroll-area';\n\nexport type DropdownMenuSize = 'm' | 'l';\n\n/** @deprecated */\nexport interface IDropdownMenuProps extends DropdownMenuProps, UnknownProperties {}\nexport type DropdownMenuProps = DropdownProps & {\n /**\n * Size of the menu\n * @default m\n */\n size?: DropdownMenuSize;\n /**\n * Index of the element selected by default\n */\n defaultHighlightedIndex?: number;\n /**\n * Index of the selected item\n */\n highlightedIndex?: number;\n /**\n * Callback for highlightedIndex change\n * highlightedIndex - Index of the selected item\n */\n onHighlightedIndexChange?: (highlightedIndex: number) => void;\n locale?: string;\n};\n\n/** @deprecated */\nexport interface IDropdownMenuListProps extends DropdownMenuListProps, UnknownProperties {}\nexport type DropdownMenuListProps = BoxProps &\n ScrollAreaProps & {\n /**\n * Size of the menu\n * @default m\n */\n size?: DropdownMenuSize;\n };\n\n/** @deprecated */\nexport interface IDropdownMenuMenuProps extends DropdownMenuMenuProps, UnknownProperties {}\nexport type DropdownMenuMenuProps = DropdownMenuListProps & {};\n\n/** @deprecated */\nexport interface IDropdownMenuItemProps extends DropdownMenuItemProps, UnknownProperties {}\nexport type DropdownMenuItemProps = FlexProps & {\n /**\n * Enables selected state\n */\n selected?: boolean;\n /**\n * Disables the component\n */\n disabled?: boolean;\n /**\n * Adds focus styles around\n */\n highlighted?: boolean;\n /**\n * Makes the element non-interactive\n */\n notInteractive?: boolean;\n /**\n * Size of the component\n * @default m\n */\n size?: DropdownMenuSize;\n};\n\n/** @deprecated */\nexport interface IDropdownMenuItemHintProps extends DropdownMenuItemHintProps, UnknownProperties {}\nexport type DropdownMenuItemHintProps = FlexProps & {\n /**\n * Size of the component\n * @default m\n */\n size?: DropdownMenuSize;\n};\n\n/** @deprecated */\nexport interface IDropdownMenuItemTitleProps\n extends DropdownMenuItemTitleProps,\n UnknownProperties {}\nexport type DropdownMenuItemTitleProps = FlexProps & {\n /**\n * Size of the component\n * @default m\n */\n size?: DropdownMenuSize;\n};\n\n/** @deprecated */\nexport interface IDropdownMenuContext extends DropdownMenuContext, UnknownProperties {}\nexport type DropdownMenuContext = DropdownContext & {\n getListProps: PropGetterFn;\n getItemProps: PropGetterFn;\n getItemHintProps: PropGetterFn;\n getItemTitleProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface IDropdownMenuHandlers extends DropdownMenuHandlers, UnknownProperties {}\nexport type DropdownMenuHandlers = DropdownHandlers & {\n highlightedIndex: (index: number) => void;\n};\n\nexport type DropdownMenuTriggerProps = DropdownTriggerProps;\n\ndeclare const DropdownMenu: Intergalactic.Component<\n 'div',\n DropdownMenuProps,\n DropdownMenuContext,\n [handlers: DropdownMenuHandlers]\n> & {\n Trigger: typeof Dropdown.Trigger;\n Popper: Intergalactic.Component<'div', DropdownMenuProps>;\n List: Intergalactic.Component<\n 'div',\n DropdownMenuListProps,\n DropdownMenuContext,\n [handlers: DropdownMenuHandlers]\n >;\n Menu: Intergalactic.Component<\n 'div',\n DropdownMenuMenuProps,\n DropdownMenuContext,\n [handlers: DropdownMenuHandlers]\n >;\n Item: Intergalactic.Component<\n 'div',\n DropdownMenuItemProps,\n DropdownMenuContext,\n [handlers: DropdownMenuHandlers]\n > & {\n Addon: typeof Box;\n };\n ItemTitle: Intergalactic.Component<'div', DropdownMenuItemTitleProps>;\n ItemHint: Intergalactic.Component<'div', DropdownMenuItemHintProps>;\n};\n\nexport default DropdownMenu;\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport Dropdown, {\n DropdownContext,\n DropdownProps,\n DropdownHandlers,\n DropdownTriggerProps,\n} from '@semcore/dropdown';\nimport { Box, BoxProps, FlexProps } from '@semcore/flex-box';\nimport { ScrollAreaProps } from '@semcore/scroll-area';\n\nexport type DropdownMenuSize = 'm' | 'l';\n\n/** @deprecated */\nexport interface IDropdownMenuProps extends DropdownMenuProps, UnknownProperties {}\nexport type DropdownMenuProps = DropdownProps & {\n /**\n * Size of the menu\n * @default m\n */\n size?: DropdownMenuSize;\n /**\n * Index of the element selected by default\n */\n defaultHighlightedIndex?: number;\n /**\n * Index of the selected item\n */\n highlightedIndex?: number;\n /**\n * Callback for highlightedIndex change\n * highlightedIndex - Index of the selected item\n */\n onHighlightedIndexChange?: (highlightedIndex: number) => void;\n locale?: string;\n};\n\n/** @deprecated */\nexport interface IDropdownMenuListProps extends DropdownMenuListProps, UnknownProperties {}\nexport type DropdownMenuListProps = BoxProps &\n ScrollAreaProps & {\n /**\n * Size of the menu\n * @default m\n */\n size?: DropdownMenuSize;\n };\n\n/** @deprecated */\nexport interface IDropdownMenuMenuProps extends DropdownMenuMenuProps, UnknownProperties {}\nexport type DropdownMenuMenuProps = DropdownMenuListProps & {};\n\n/** @deprecated */\nexport interface IDropdownMenuItemProps extends DropdownMenuItemProps, UnknownProperties {}\nexport type DropdownMenuItemProps = FlexProps & {\n /**\n * Enables selected state\n */\n selected?: boolean;\n /**\n * Disables the component\n */\n disabled?: boolean;\n /**\n * Adds focus styles around\n */\n highlighted?: boolean;\n /**\n * Makes the element non-interactive\n */\n notInteractive?: boolean;\n /**\n * Size of the component\n * @default m\n */\n size?: DropdownMenuSize;\n};\n\n/** @deprecated */\nexport interface IDropdownMenuItemHintProps extends DropdownMenuItemHintProps, UnknownProperties {}\nexport type DropdownMenuItemHintProps = FlexProps & {\n /**\n * Size of the component\n * @default m\n */\n size?: DropdownMenuSize;\n};\n\n/** @deprecated */\nexport interface IDropdownMenuItemTitleProps\n extends DropdownMenuItemTitleProps,\n UnknownProperties {}\nexport type DropdownMenuItemTitleProps = FlexProps & {\n /**\n * Size of the component\n * @default m\n */\n size?: DropdownMenuSize;\n};\n\n/** @deprecated */\nexport interface IDropdownMenuContext extends DropdownMenuContext, UnknownProperties {}\nexport type DropdownMenuContext = DropdownContext & {\n highlightedIndex?: number;\n getListProps: PropGetterFn;\n getItemProps: PropGetterFn;\n getItemHintProps: PropGetterFn;\n getItemTitleProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface IDropdownMenuHandlers extends DropdownMenuHandlers, UnknownProperties {}\nexport type DropdownMenuHandlers = DropdownHandlers & {\n highlightedIndex: (index: number) => void;\n};\n\nexport type DropdownMenuTriggerProps = DropdownTriggerProps;\n\ndeclare const DropdownMenu: Intergalactic.Component<\n 'div',\n DropdownMenuProps,\n DropdownMenuContext,\n [handlers: DropdownMenuHandlers]\n> & {\n Trigger: typeof Dropdown.Trigger;\n Popper: Intergalactic.Component<'div', DropdownMenuProps>;\n List: Intergalactic.Component<\n 'div',\n DropdownMenuListProps,\n DropdownMenuContext,\n [handlers: DropdownMenuHandlers]\n >;\n Menu: Intergalactic.Component<\n 'div',\n DropdownMenuMenuProps,\n DropdownMenuContext,\n [handlers: DropdownMenuHandlers]\n >;\n Item: Intergalactic.Component<\n 'div',\n DropdownMenuItemProps,\n DropdownMenuContext,\n [handlers: DropdownMenuHandlers]\n > & {\n Addon: typeof Box;\n };\n ItemTitle: Intergalactic.Component<'div', DropdownMenuItemTitleProps>;\n ItemHint: Intergalactic.Component<'div', DropdownMenuItemHintProps>;\n};\n\nexport default DropdownMenu;\n"],"mappings":""}
|
|
@@ -30,10 +30,6 @@ SDropdownMenuItem {
|
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
SDropdownMenuItem[highlighted] {
|
|
34
|
-
z-index: 1;
|
|
35
|
-
box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset;
|
|
36
|
-
}
|
|
37
33
|
|
|
38
34
|
SDropdownMenuItem[selected] {
|
|
39
35
|
background-color: var(--intergalactic-dropdown-menu-item-selected, rgba(196, 229, 254, 0.7));
|
|
@@ -44,6 +40,11 @@ SDropdownMenuItem[selected] {
|
|
|
44
40
|
}
|
|
45
41
|
}
|
|
46
42
|
|
|
43
|
+
SDropdownMenuItem[highlighted] {
|
|
44
|
+
z-index: 1;
|
|
45
|
+
box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset;
|
|
46
|
+
}
|
|
47
|
+
|
|
47
48
|
SDropdownMenuItem[disabled] {
|
|
48
49
|
opacity: var(--intergalactic-disabled-opacity, 0.3);
|
|
49
50
|
cursor: default;
|
|
@@ -60,8 +61,7 @@ SDropdownMenuItem[size='l'] {
|
|
|
60
61
|
SDropdownMenuItem[size='m'] {
|
|
61
62
|
font-size: var(--intergalactic-fs-200, 14px);
|
|
62
63
|
line-height: var(--intergalactic-lh-200, 142%);
|
|
63
|
-
padding: calc(var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px))
|
|
64
|
-
var(--intergalactic-spacing-2x, 8px);
|
|
64
|
+
padding: calc(var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) var(--intergalactic-spacing-2x, 8px);
|
|
65
65
|
min-height: 32px;
|
|
66
66
|
}
|
|
67
67
|
|
|
@@ -109,4 +109,4 @@ SPopper {
|
|
|
109
109
|
&:focus {
|
|
110
110
|
box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
|
|
111
111
|
}
|
|
112
|
-
}
|
|
112
|
+
}
|
|
@@ -5,12 +5,12 @@ import { sstyled as _sstyled } from "@semcore/core";
|
|
|
5
5
|
*
|
|
6
6
|
* We will figure out what to do with it and remove it.
|
|
7
7
|
* */
|
|
8
|
-
var scrollStyles = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".
|
|
9
|
-
"__SShadowHorizontal": "
|
|
10
|
-
"_position_median": "
|
|
11
|
-
"_position_start": "
|
|
12
|
-
"_position_end": "
|
|
13
|
-
"__SShadowVertical": "
|
|
8
|
+
var scrollStyles = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SShadowHorizontal_u6b3g_gg_:after,.___SShadowHorizontal_u6b3g_gg_:before{width:16px;height:100%;border-radius:var(--intergalactic-control-rounded, 6px)}.___SShadowHorizontal_u6b3g_gg_._position_median_u6b3g_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-left,\n linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n )}.___SShadowHorizontal_u6b3g_gg_._position_median_u6b3g_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-right,\n linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n )}.___SShadowHorizontal_u6b3g_gg_._position_start_u6b3g_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-left,\n linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n )}.___SShadowHorizontal_u6b3g_gg_._position_end_u6b3g_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-right,\n linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n )}.___SShadowVertical_u6b3g_gg_:after,.___SShadowVertical_u6b3g_gg_:before{width:100%;height:16px;border-radius:var(--intergalactic-control-rounded, 6px)}.___SShadowVertical_u6b3g_gg_._position_median_u6b3g_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-top,\n linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n )}.___SShadowVertical_u6b3g_gg_._position_median_u6b3g_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-bottom,\n linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n )}.___SShadowVertical_u6b3g_gg_._position_start_u6b3g_gg_:before{background:var(--intergalactic-scroll-area-dropdown-menu-top,\n linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n )}.___SShadowVertical_u6b3g_gg_._position_end_u6b3g_gg_:after{background:var(--intergalactic-scroll-area-dropdown-menu-bottom,\n linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%)\n )}" /*__inner_css_end__*/, "u6b3g_gg_") /*__reshadow_css_end__*/, {
|
|
9
|
+
"__SShadowHorizontal": "___SShadowHorizontal_u6b3g_gg_",
|
|
10
|
+
"_position_median": "_position_median_u6b3g_gg_",
|
|
11
|
+
"_position_start": "_position_start_u6b3g_gg_",
|
|
12
|
+
"_position_end": "_position_end_u6b3g_gg_",
|
|
13
|
+
"__SShadowVertical": "___SShadowVertical_u6b3g_gg_"
|
|
14
14
|
});
|
|
15
15
|
export default scrollStyles;
|
|
16
16
|
//# sourceMappingURL=styleScrollArea.js.map
|
package/lib/types/index.d.ts
CHANGED
|
@@ -100,6 +100,7 @@ export type DropdownMenuItemTitleProps = FlexProps & {
|
|
|
100
100
|
/** @deprecated */
|
|
101
101
|
export interface IDropdownMenuContext extends DropdownMenuContext, UnknownProperties {}
|
|
102
102
|
export type DropdownMenuContext = DropdownContext & {
|
|
103
|
+
highlightedIndex?: number;
|
|
103
104
|
getListProps: PropGetterFn;
|
|
104
105
|
getItemProps: PropGetterFn;
|
|
105
106
|
getItemHintProps: PropGetterFn;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/dropdown-menu",
|
|
3
3
|
"description": "Semrush DropdownMenu Component",
|
|
4
|
-
"version": "4.8.
|
|
4
|
+
"version": "4.8.1",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -9,14 +9,14 @@
|
|
|
9
9
|
"author": "UI-kit team <ui-kit-team@semrush.com>",
|
|
10
10
|
"license": "MIT",
|
|
11
11
|
"dependencies": {
|
|
12
|
-
"@semcore/dropdown": "4.6.
|
|
13
|
-
"@semcore/flex-box": "5.6.
|
|
14
|
-
"@semcore/scroll-area": "5.8.
|
|
15
|
-
"@semcore/utils": "4.6.
|
|
12
|
+
"@semcore/dropdown": "4.6.1",
|
|
13
|
+
"@semcore/flex-box": "5.6.1",
|
|
14
|
+
"@semcore/scroll-area": "5.8.1",
|
|
15
|
+
"@semcore/utils": "4.6.1",
|
|
16
16
|
"classnames": "2.2.6"
|
|
17
17
|
},
|
|
18
18
|
"peerDependencies": {
|
|
19
|
-
"@semcore/core": "^2.6.
|
|
19
|
+
"@semcore/core": "^2.6.1-prerelease.0",
|
|
20
20
|
"react": "16.8 - 18",
|
|
21
21
|
"react-dom": "16.8 - 18"
|
|
22
22
|
},
|