@semcore/dropdown-menu 3.9.7 → 4.0.0-beta.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 +3 -3
- package/lib/cjs/DropdownMenu.js +13 -13
- package/lib/cjs/index.d.js.map +1 -1
- 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/styleScrollArea.js +6 -6
- package/lib/types/index.d.ts +77 -39
- package/package.json +7 -6
package/CHANGELOG.md
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
-
## [
|
|
5
|
+
## [4.0.0] - 2023-07-15
|
|
6
6
|
|
|
7
|
-
###
|
|
7
|
+
### Break
|
|
8
8
|
|
|
9
|
-
-
|
|
9
|
+
- Strict, backward incompatible typings.
|
|
10
10
|
|
|
11
11
|
## [3.9.6] - 2023-06-27
|
|
12
12
|
|
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
|
-
"_highlighted": "
|
|
36
|
-
"_selected": "
|
|
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_1qzcx_gg_,.___SDropdownMenuList_1qzcx_gg_{position:relative;color:var(--intergalactic-text-primary, #191b23)}.___SDropdownMenuList_1qzcx_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_1qzcx_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_1qzcx_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-hover, #f4f5f9)}}.___SDropdownMenuItem_1qzcx_gg_:focus{outline:0}.___SDropdownMenuItem_1qzcx_gg_.__highlighted_1qzcx_gg_{z-index:1;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset}.___SDropdownMenuItem_1qzcx_gg_.__selected_1qzcx_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_1qzcx_gg_.__selected_1qzcx_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}.___SDropdownMenuItem_1qzcx_gg_.__disabled_1qzcx_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SDropdownMenuItem_1qzcx_gg_._size_l_1qzcx_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_1qzcx_gg_._size_m_1qzcx_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_1qzcx_gg_.__notInteractive_1qzcx_gg_{cursor:default}@media (hover:hover){.___SDropdownMenuItem_1qzcx_gg_.__notInteractive_1qzcx_gg_:hover{background:0 0}}.___SDropdownMenuItem_1qzcx_gg_._variant_hint_1qzcx_gg_{color:var(--intergalactic-text-secondary, #6c6e79);cursor:default}@media (hover:hover){.___SDropdownMenuItem_1qzcx_gg_._variant_hint_1qzcx_gg_:hover{background:0 0}}.___SDropdownMenuItem_1qzcx_gg_._variant_title_1qzcx_gg_{font-weight:var(--intergalactic-bold, 700);cursor:default}@media (hover:hover){.___SDropdownMenuItem_1qzcx_gg_._variant_title_1qzcx_gg_:hover{background:0 0}}.___SDropdownMenuItemAddon_1qzcx_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SDropdownMenuItemAddon_1qzcx_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_1qzcx_gg_:last-child{margin-right:0}.___SPopper_1qzcx_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}" /*__inner_css_end__*/, "1qzcx_gg_") /*__reshadow_css_end__*/, {
|
|
33
|
+
"__SDropdownMenuList": "___SDropdownMenuList_1qzcx_gg_",
|
|
34
|
+
"__SDropdownMenuItem": "___SDropdownMenuItem_1qzcx_gg_",
|
|
35
|
+
"_highlighted": "__highlighted_1qzcx_gg_",
|
|
36
|
+
"_selected": "__selected_1qzcx_gg_",
|
|
37
|
+
"_disabled": "__disabled_1qzcx_gg_",
|
|
38
|
+
"_size_l": "_size_l_1qzcx_gg_",
|
|
39
|
+
"_size_m": "_size_m_1qzcx_gg_",
|
|
40
|
+
"_notInteractive": "__notInteractive_1qzcx_gg_",
|
|
41
|
+
"_variant_hint": "_variant_hint_1qzcx_gg_",
|
|
42
|
+
"_variant_title": "_variant_title_1qzcx_gg_",
|
|
43
|
+
"__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_1qzcx_gg_",
|
|
44
|
+
"__SPopper": "___SPopper_1qzcx_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 {
|
|
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 IDropdownMenuContext,\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":""}
|
|
@@ -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_1pgon_gg_:after,.___SShadowHorizontal_1pgon_gg_:before{width:16px;height:100%;border-radius:var(--intergalactic-control-rounded, 6px)}.___SShadowHorizontal_1pgon_gg_._position_median_1pgon_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_1pgon_gg_._position_median_1pgon_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_1pgon_gg_._position_start_1pgon_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_1pgon_gg_._position_end_1pgon_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_1pgon_gg_:after,.___SShadowVertical_1pgon_gg_:before{width:100%;height:16px;border-radius:var(--intergalactic-control-rounded, 6px)}.___SShadowVertical_1pgon_gg_._position_median_1pgon_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_1pgon_gg_._position_median_1pgon_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_1pgon_gg_._position_start_1pgon_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_1pgon_gg_._position_end_1pgon_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__*/, "1pgon_gg_") /*__reshadow_css_end__*/, {
|
|
15
|
+
"__SShadowHorizontal": "___SShadowHorizontal_1pgon_gg_",
|
|
16
|
+
"_position_median": "_position_median_1pgon_gg_",
|
|
17
|
+
"_position_start": "_position_start_1pgon_gg_",
|
|
18
|
+
"_position_end": "_position_end_1pgon_gg_",
|
|
19
|
+
"__SShadowVertical": "___SShadowVertical_1pgon_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
|
-
"_highlighted": "
|
|
35
|
-
"_selected": "
|
|
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_1qzcx_gg_,.___SDropdownMenuList_1qzcx_gg_{position:relative;color:var(--intergalactic-text-primary, #191b23)}.___SDropdownMenuList_1qzcx_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_1qzcx_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_1qzcx_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-hover, #f4f5f9)}}.___SDropdownMenuItem_1qzcx_gg_:focus{outline:0}.___SDropdownMenuItem_1qzcx_gg_.__highlighted_1qzcx_gg_{z-index:1;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset}.___SDropdownMenuItem_1qzcx_gg_.__selected_1qzcx_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_1qzcx_gg_.__selected_1qzcx_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}.___SDropdownMenuItem_1qzcx_gg_.__disabled_1qzcx_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SDropdownMenuItem_1qzcx_gg_._size_l_1qzcx_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_1qzcx_gg_._size_m_1qzcx_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_1qzcx_gg_.__notInteractive_1qzcx_gg_{cursor:default}@media (hover:hover){.___SDropdownMenuItem_1qzcx_gg_.__notInteractive_1qzcx_gg_:hover{background:0 0}}.___SDropdownMenuItem_1qzcx_gg_._variant_hint_1qzcx_gg_{color:var(--intergalactic-text-secondary, #6c6e79);cursor:default}@media (hover:hover){.___SDropdownMenuItem_1qzcx_gg_._variant_hint_1qzcx_gg_:hover{background:0 0}}.___SDropdownMenuItem_1qzcx_gg_._variant_title_1qzcx_gg_{font-weight:var(--intergalactic-bold, 700);cursor:default}@media (hover:hover){.___SDropdownMenuItem_1qzcx_gg_._variant_title_1qzcx_gg_:hover{background:0 0}}.___SDropdownMenuItemAddon_1qzcx_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SDropdownMenuItemAddon_1qzcx_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_1qzcx_gg_:last-child{margin-right:0}.___SPopper_1qzcx_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}" /*__inner_css_end__*/, "1qzcx_gg_") /*__reshadow_css_end__*/, {
|
|
32
|
+
"__SDropdownMenuList": "___SDropdownMenuList_1qzcx_gg_",
|
|
33
|
+
"__SDropdownMenuItem": "___SDropdownMenuItem_1qzcx_gg_",
|
|
34
|
+
"_highlighted": "__highlighted_1qzcx_gg_",
|
|
35
|
+
"_selected": "__selected_1qzcx_gg_",
|
|
36
|
+
"_disabled": "__disabled_1qzcx_gg_",
|
|
37
|
+
"_size_l": "_size_l_1qzcx_gg_",
|
|
38
|
+
"_size_m": "_size_m_1qzcx_gg_",
|
|
39
|
+
"_notInteractive": "__notInteractive_1qzcx_gg_",
|
|
40
|
+
"_variant_hint": "_variant_hint_1qzcx_gg_",
|
|
41
|
+
"_variant_title": "_variant_title_1qzcx_gg_",
|
|
42
|
+
"__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_1qzcx_gg_",
|
|
43
|
+
"__SPopper": "___SPopper_1qzcx_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 {
|
|
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 IDropdownMenuContext,\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":""}
|
|
@@ -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_1pgon_gg_:after,.___SShadowHorizontal_1pgon_gg_:before{width:16px;height:100%;border-radius:var(--intergalactic-control-rounded, 6px)}.___SShadowHorizontal_1pgon_gg_._position_median_1pgon_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_1pgon_gg_._position_median_1pgon_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_1pgon_gg_._position_start_1pgon_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_1pgon_gg_._position_end_1pgon_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_1pgon_gg_:after,.___SShadowVertical_1pgon_gg_:before{width:100%;height:16px;border-radius:var(--intergalactic-control-rounded, 6px)}.___SShadowVertical_1pgon_gg_._position_median_1pgon_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_1pgon_gg_._position_median_1pgon_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_1pgon_gg_._position_start_1pgon_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_1pgon_gg_._position_end_1pgon_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__*/, "1pgon_gg_") /*__reshadow_css_end__*/, {
|
|
9
|
+
"__SShadowHorizontal": "___SShadowHorizontal_1pgon_gg_",
|
|
10
|
+
"_position_median": "_position_median_1pgon_gg_",
|
|
11
|
+
"_position_start": "_position_start_1pgon_gg_",
|
|
12
|
+
"_position_end": "_position_end_1pgon_gg_",
|
|
13
|
+
"__SShadowVertical": "___SShadowVertical_1pgon_gg_"
|
|
14
14
|
});
|
|
15
15
|
export default scrollStyles;
|
|
16
16
|
//# sourceMappingURL=styleScrollArea.js.map
|
package/lib/types/index.d.ts
CHANGED
|
@@ -1,11 +1,18 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import Dropdown, {
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
|
|
2
|
+
import Dropdown, {
|
|
3
|
+
DropdownContext,
|
|
4
|
+
DropdownProps,
|
|
5
|
+
DropdownHandlers,
|
|
6
|
+
DropdownTriggerProps,
|
|
7
|
+
} from '@semcore/dropdown';
|
|
8
|
+
import { Box, BoxProps, FlexProps } from '@semcore/flex-box';
|
|
9
|
+
import { ScrollAreaProps } from '@semcore/scroll-area';
|
|
5
10
|
|
|
6
11
|
export type DropdownMenuSize = 'm' | 'l';
|
|
7
12
|
|
|
8
|
-
|
|
13
|
+
/** @deprecated */
|
|
14
|
+
export interface IDropdownMenuProps extends DropdownMenuProps, UnknownProperties {}
|
|
15
|
+
export type DropdownMenuProps = DropdownProps & {
|
|
9
16
|
/**
|
|
10
17
|
* Size of the menu
|
|
11
18
|
* @default m
|
|
@@ -25,19 +32,26 @@ export interface IDropdownMenuProps extends IDropdownProps {
|
|
|
25
32
|
*/
|
|
26
33
|
onHighlightedIndexChange?: (highlightedIndex: number) => void;
|
|
27
34
|
locale?: string;
|
|
28
|
-
}
|
|
35
|
+
};
|
|
29
36
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
+
/** @deprecated */
|
|
38
|
+
export interface IDropdownMenuListProps extends DropdownMenuListProps, UnknownProperties {}
|
|
39
|
+
export type DropdownMenuListProps = BoxProps &
|
|
40
|
+
ScrollAreaProps & {
|
|
41
|
+
/**
|
|
42
|
+
* Size of the menu
|
|
43
|
+
* @default m
|
|
44
|
+
*/
|
|
45
|
+
size?: DropdownMenuSize;
|
|
46
|
+
};
|
|
37
47
|
|
|
38
|
-
|
|
48
|
+
/** @deprecated */
|
|
49
|
+
export interface IDropdownMenuMenuProps extends DropdownMenuMenuProps, UnknownProperties {}
|
|
50
|
+
export type DropdownMenuMenuProps = DropdownMenuListProps & {};
|
|
39
51
|
|
|
40
|
-
|
|
52
|
+
/** @deprecated */
|
|
53
|
+
export interface IDropdownMenuItemProps extends DropdownMenuItemProps, UnknownProperties {}
|
|
54
|
+
export type DropdownMenuItemProps = FlexProps & {
|
|
41
55
|
/**
|
|
42
56
|
* Enables selected state
|
|
43
57
|
*/
|
|
@@ -59,53 +73,77 @@ export interface IDropdownMenuItemProps extends IFlexProps {
|
|
|
59
73
|
* @default m
|
|
60
74
|
*/
|
|
61
75
|
size?: DropdownMenuSize;
|
|
62
|
-
}
|
|
76
|
+
};
|
|
63
77
|
|
|
64
|
-
|
|
78
|
+
/** @deprecated */
|
|
79
|
+
export interface IDropdownMenuItemHintProps extends DropdownMenuItemHintProps, UnknownProperties {}
|
|
80
|
+
export type DropdownMenuItemHintProps = FlexProps & {
|
|
65
81
|
/**
|
|
66
82
|
* Size of the component
|
|
67
83
|
* @default m
|
|
68
84
|
*/
|
|
69
85
|
size?: DropdownMenuSize;
|
|
70
|
-
}
|
|
86
|
+
};
|
|
71
87
|
|
|
72
|
-
|
|
88
|
+
/** @deprecated */
|
|
89
|
+
export interface IDropdownMenuItemTitleProps
|
|
90
|
+
extends DropdownMenuItemTitleProps,
|
|
91
|
+
UnknownProperties {}
|
|
92
|
+
export type DropdownMenuItemTitleProps = FlexProps & {
|
|
73
93
|
/**
|
|
74
94
|
* Size of the component
|
|
75
95
|
* @default m
|
|
76
96
|
*/
|
|
77
97
|
size?: DropdownMenuSize;
|
|
78
|
-
}
|
|
98
|
+
};
|
|
79
99
|
|
|
80
|
-
|
|
100
|
+
/** @deprecated */
|
|
101
|
+
export interface IDropdownMenuContext extends DropdownMenuContext, UnknownProperties {}
|
|
102
|
+
export type DropdownMenuContext = DropdownContext & {
|
|
81
103
|
getListProps: PropGetterFn;
|
|
82
104
|
getItemProps: PropGetterFn;
|
|
83
105
|
getItemHintProps: PropGetterFn;
|
|
84
106
|
getItemTitleProps: PropGetterFn;
|
|
85
|
-
}
|
|
107
|
+
};
|
|
86
108
|
|
|
87
|
-
|
|
109
|
+
/** @deprecated */
|
|
110
|
+
export interface IDropdownMenuHandlers extends DropdownMenuHandlers, UnknownProperties {}
|
|
111
|
+
export type DropdownMenuHandlers = DropdownHandlers & {
|
|
88
112
|
highlightedIndex: (index: number) => void;
|
|
89
|
-
}
|
|
113
|
+
};
|
|
114
|
+
|
|
115
|
+
export type DropdownMenuTriggerProps = DropdownTriggerProps;
|
|
90
116
|
|
|
91
|
-
declare const DropdownMenu:
|
|
92
|
-
|
|
93
|
-
|
|
117
|
+
declare const DropdownMenu: Intergalactic.Component<
|
|
118
|
+
'div',
|
|
119
|
+
DropdownMenuProps,
|
|
120
|
+
IDropdownMenuContext,
|
|
121
|
+
[handlers: DropdownMenuHandlers]
|
|
122
|
+
> & {
|
|
94
123
|
Trigger: typeof Dropdown.Trigger;
|
|
95
|
-
Popper:
|
|
96
|
-
List: <
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
124
|
+
Popper: Intergalactic.Component<'div', DropdownMenuProps>;
|
|
125
|
+
List: Intergalactic.Component<
|
|
126
|
+
'div',
|
|
127
|
+
DropdownMenuListProps,
|
|
128
|
+
DropdownMenuContext,
|
|
129
|
+
[handlers: DropdownMenuHandlers]
|
|
130
|
+
>;
|
|
131
|
+
Menu: Intergalactic.Component<
|
|
132
|
+
'div',
|
|
133
|
+
DropdownMenuMenuProps,
|
|
134
|
+
DropdownMenuContext,
|
|
135
|
+
[handlers: DropdownMenuHandlers]
|
|
136
|
+
>;
|
|
137
|
+
Item: Intergalactic.Component<
|
|
138
|
+
'div',
|
|
139
|
+
DropdownMenuItemProps,
|
|
140
|
+
DropdownMenuContext,
|
|
141
|
+
[handlers: DropdownMenuHandlers]
|
|
142
|
+
> & {
|
|
105
143
|
Addon: typeof Box;
|
|
106
144
|
};
|
|
107
|
-
ItemTitle: <
|
|
108
|
-
ItemHint: <
|
|
145
|
+
ItemTitle: Intergalactic.Component<'div', DropdownMenuItemTitleProps>;
|
|
146
|
+
ItemHint: Intergalactic.Component<'div', DropdownMenuItemHintProps>;
|
|
109
147
|
};
|
|
110
148
|
|
|
111
149
|
export default DropdownMenu;
|
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
|
+
"version": "4.0.0-beta.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": "
|
|
13
|
-
"@semcore/flex-box": "
|
|
14
|
-
"@semcore/scroll-area": "
|
|
15
|
-
"@semcore/utils": "
|
|
12
|
+
"@semcore/dropdown": "4.0.0-beta.1",
|
|
13
|
+
"@semcore/flex-box": "5.0.0-beta.1",
|
|
14
|
+
"@semcore/scroll-area": "5.0.0-beta.1",
|
|
15
|
+
"@semcore/utils": "4.0.0-beta.1",
|
|
16
16
|
"classnames": "2.2.6"
|
|
17
17
|
},
|
|
18
18
|
"peerDependencies": {
|
|
19
|
-
"@semcore/core": "
|
|
19
|
+
"@semcore/core": "2.0.0-beta.1",
|
|
20
20
|
"react": "16.8 - 18",
|
|
21
21
|
"react-dom": "16.8 - 18"
|
|
22
22
|
},
|
|
@@ -27,6 +27,7 @@
|
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@types/react": "18.0.21",
|
|
30
|
+
"@types/classnames": "2.2.6",
|
|
30
31
|
"@guidepup/playwright": "0.6.1",
|
|
31
32
|
"@playwright/test": "1.25.1",
|
|
32
33
|
"@semcore/testing-utils": "1.0.0"
|