@semcore/dropdown-menu 4.0.1 → 4.2.0-beta.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 +12 -0
- 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 +1 -1
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [4.2.0-beta.0] - 2023-08-07
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version preminor update due to children dependencies update (`@semcore/dropdown` [4.1.0 ~> 4.2.0], `@semcore/utils` [4.0.0 ~> 4.1.0]).
|
|
10
|
+
|
|
11
|
+
## [4.1.0] - 2023-08-01
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- Version minor update due to children dependencies update (`@semcore/dropdown` [4.0.1 ~> 4.1.0], `@semcore/flex-box` [5.0.0 ~> 5.1.0]).
|
|
16
|
+
|
|
5
17
|
## [4.0.1] - 2023-07-18
|
|
6
18
|
|
|
7
19
|
### Changed
|
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_6g7ey_gg_,.___SDropdownMenuList_6g7ey_gg_{position:relative;color:var(--intergalactic-text-primary, #191b23)}.___SDropdownMenuList_6g7ey_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_6g7ey_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_6g7ey_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-hover, #f4f5f9)}}.___SDropdownMenuItem_6g7ey_gg_:focus{outline:0}.___SDropdownMenuItem_6g7ey_gg_.__highlighted_6g7ey_gg_{z-index:1;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset}.___SDropdownMenuItem_6g7ey_gg_.__selected_6g7ey_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_6g7ey_gg_.__selected_6g7ey_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}.___SDropdownMenuItem_6g7ey_gg_.__disabled_6g7ey_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SDropdownMenuItem_6g7ey_gg_._size_l_6g7ey_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_6g7ey_gg_._size_m_6g7ey_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_6g7ey_gg_.__notInteractive_6g7ey_gg_{cursor:default}@media (hover:hover){.___SDropdownMenuItem_6g7ey_gg_.__notInteractive_6g7ey_gg_:hover{background:0 0}}.___SDropdownMenuItem_6g7ey_gg_._variant_hint_6g7ey_gg_{color:var(--intergalactic-text-secondary, #6c6e79);cursor:default}@media (hover:hover){.___SDropdownMenuItem_6g7ey_gg_._variant_hint_6g7ey_gg_:hover{background:0 0}}.___SDropdownMenuItem_6g7ey_gg_._variant_title_6g7ey_gg_{font-weight:var(--intergalactic-bold, 700);cursor:default}@media (hover:hover){.___SDropdownMenuItem_6g7ey_gg_._variant_title_6g7ey_gg_:hover{background:0 0}}.___SDropdownMenuItemAddon_6g7ey_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SDropdownMenuItemAddon_6g7ey_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_6g7ey_gg_:last-child{margin-right:0}.___SPopper_6g7ey_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}" /*__inner_css_end__*/, "6g7ey_gg_") /*__reshadow_css_end__*/, {
|
|
33
|
+
"__SDropdownMenuList": "___SDropdownMenuList_6g7ey_gg_",
|
|
34
|
+
"__SDropdownMenuItem": "___SDropdownMenuItem_6g7ey_gg_",
|
|
35
|
+
"_highlighted": "__highlighted_6g7ey_gg_",
|
|
36
|
+
"_selected": "__selected_6g7ey_gg_",
|
|
37
|
+
"_disabled": "__disabled_6g7ey_gg_",
|
|
38
|
+
"_size_l": "_size_l_6g7ey_gg_",
|
|
39
|
+
"_size_m": "_size_m_6g7ey_gg_",
|
|
40
|
+
"_notInteractive": "__notInteractive_6g7ey_gg_",
|
|
41
|
+
"_variant_hint": "_variant_hint_6g7ey_gg_",
|
|
42
|
+
"_variant_title": "_variant_title_6g7ey_gg_",
|
|
43
|
+
"__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_6g7ey_gg_",
|
|
44
|
+
"__SPopper": "___SPopper_6g7ey_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
|
|
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":""}
|
|
@@ -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_17hj5_gg_:after,.___SShadowHorizontal_17hj5_gg_:before{width:16px;height:100%;border-radius:var(--intergalactic-control-rounded, 6px)}.___SShadowHorizontal_17hj5_gg_._position_median_17hj5_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_17hj5_gg_._position_median_17hj5_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_17hj5_gg_._position_start_17hj5_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_17hj5_gg_._position_end_17hj5_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_17hj5_gg_:after,.___SShadowVertical_17hj5_gg_:before{width:100%;height:16px;border-radius:var(--intergalactic-control-rounded, 6px)}.___SShadowVertical_17hj5_gg_._position_median_17hj5_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_17hj5_gg_._position_median_17hj5_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_17hj5_gg_._position_start_17hj5_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_17hj5_gg_._position_end_17hj5_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__*/, "17hj5_gg_") /*__reshadow_css_end__*/, {
|
|
15
|
+
"__SShadowHorizontal": "___SShadowHorizontal_17hj5_gg_",
|
|
16
|
+
"_position_median": "_position_median_17hj5_gg_",
|
|
17
|
+
"_position_start": "_position_start_17hj5_gg_",
|
|
18
|
+
"_position_end": "_position_end_17hj5_gg_",
|
|
19
|
+
"__SShadowVertical": "___SShadowVertical_17hj5_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_6g7ey_gg_,.___SDropdownMenuList_6g7ey_gg_{position:relative;color:var(--intergalactic-text-primary, #191b23)}.___SDropdownMenuList_6g7ey_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_6g7ey_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_6g7ey_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-hover, #f4f5f9)}}.___SDropdownMenuItem_6g7ey_gg_:focus{outline:0}.___SDropdownMenuItem_6g7ey_gg_.__highlighted_6g7ey_gg_{z-index:1;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset}.___SDropdownMenuItem_6g7ey_gg_.__selected_6g7ey_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_6g7ey_gg_.__selected_6g7ey_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}.___SDropdownMenuItem_6g7ey_gg_.__disabled_6g7ey_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SDropdownMenuItem_6g7ey_gg_._size_l_6g7ey_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_6g7ey_gg_._size_m_6g7ey_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_6g7ey_gg_.__notInteractive_6g7ey_gg_{cursor:default}@media (hover:hover){.___SDropdownMenuItem_6g7ey_gg_.__notInteractive_6g7ey_gg_:hover{background:0 0}}.___SDropdownMenuItem_6g7ey_gg_._variant_hint_6g7ey_gg_{color:var(--intergalactic-text-secondary, #6c6e79);cursor:default}@media (hover:hover){.___SDropdownMenuItem_6g7ey_gg_._variant_hint_6g7ey_gg_:hover{background:0 0}}.___SDropdownMenuItem_6g7ey_gg_._variant_title_6g7ey_gg_{font-weight:var(--intergalactic-bold, 700);cursor:default}@media (hover:hover){.___SDropdownMenuItem_6g7ey_gg_._variant_title_6g7ey_gg_:hover{background:0 0}}.___SDropdownMenuItemAddon_6g7ey_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SDropdownMenuItemAddon_6g7ey_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_6g7ey_gg_:last-child{margin-right:0}.___SPopper_6g7ey_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}" /*__inner_css_end__*/, "6g7ey_gg_") /*__reshadow_css_end__*/, {
|
|
32
|
+
"__SDropdownMenuList": "___SDropdownMenuList_6g7ey_gg_",
|
|
33
|
+
"__SDropdownMenuItem": "___SDropdownMenuItem_6g7ey_gg_",
|
|
34
|
+
"_highlighted": "__highlighted_6g7ey_gg_",
|
|
35
|
+
"_selected": "__selected_6g7ey_gg_",
|
|
36
|
+
"_disabled": "__disabled_6g7ey_gg_",
|
|
37
|
+
"_size_l": "_size_l_6g7ey_gg_",
|
|
38
|
+
"_size_m": "_size_m_6g7ey_gg_",
|
|
39
|
+
"_notInteractive": "__notInteractive_6g7ey_gg_",
|
|
40
|
+
"_variant_hint": "_variant_hint_6g7ey_gg_",
|
|
41
|
+
"_variant_title": "_variant_title_6g7ey_gg_",
|
|
42
|
+
"__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_6g7ey_gg_",
|
|
43
|
+
"__SPopper": "___SPopper_6g7ey_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
|
|
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":""}
|
|
@@ -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_17hj5_gg_:after,.___SShadowHorizontal_17hj5_gg_:before{width:16px;height:100%;border-radius:var(--intergalactic-control-rounded, 6px)}.___SShadowHorizontal_17hj5_gg_._position_median_17hj5_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_17hj5_gg_._position_median_17hj5_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_17hj5_gg_._position_start_17hj5_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_17hj5_gg_._position_end_17hj5_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_17hj5_gg_:after,.___SShadowVertical_17hj5_gg_:before{width:100%;height:16px;border-radius:var(--intergalactic-control-rounded, 6px)}.___SShadowVertical_17hj5_gg_._position_median_17hj5_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_17hj5_gg_._position_median_17hj5_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_17hj5_gg_._position_start_17hj5_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_17hj5_gg_._position_end_17hj5_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__*/, "17hj5_gg_") /*__reshadow_css_end__*/, {
|
|
9
|
+
"__SShadowHorizontal": "___SShadowHorizontal_17hj5_gg_",
|
|
10
|
+
"_position_median": "_position_median_17hj5_gg_",
|
|
11
|
+
"_position_start": "_position_start_17hj5_gg_",
|
|
12
|
+
"_position_end": "_position_end_17hj5_gg_",
|
|
13
|
+
"__SShadowVertical": "___SShadowVertical_17hj5_gg_"
|
|
14
14
|
});
|
|
15
15
|
export default scrollStyles;
|
|
16
16
|
//# sourceMappingURL=styleScrollArea.js.map
|
package/lib/types/index.d.ts
CHANGED
|
@@ -117,7 +117,7 @@ export type DropdownMenuTriggerProps = DropdownTriggerProps;
|
|
|
117
117
|
declare const DropdownMenu: Intergalactic.Component<
|
|
118
118
|
'div',
|
|
119
119
|
DropdownMenuProps,
|
|
120
|
-
|
|
120
|
+
DropdownMenuContext,
|
|
121
121
|
[handlers: DropdownMenuHandlers]
|
|
122
122
|
> & {
|
|
123
123
|
Trigger: typeof Dropdown.Trigger;
|
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.0.
|
|
4
|
+
"version": "4.2.0-beta.0",
|
|
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.0.
|
|
13
|
-
"@semcore/flex-box": "5.0.0",
|
|
14
|
-
"@semcore/scroll-area": "5.0.0",
|
|
15
|
-
"@semcore/utils": "4.0.0",
|
|
12
|
+
"@semcore/dropdown": "4.2.0-beta.0",
|
|
13
|
+
"@semcore/flex-box": "5.2.0-beta.0",
|
|
14
|
+
"@semcore/scroll-area": "5.2.0-beta.0",
|
|
15
|
+
"@semcore/utils": "4.1.0-beta.0",
|
|
16
16
|
"classnames": "2.2.6"
|
|
17
17
|
},
|
|
18
18
|
"peerDependencies": {
|
|
19
|
-
"@semcore/core": "2
|
|
19
|
+
"@semcore/core": "^2",
|
|
20
20
|
"react": "16.8 - 18",
|
|
21
21
|
"react-dom": "16.8 - 18"
|
|
22
22
|
},
|