@semcore/dropdown-menu 4.34.1 → 4.34.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/lib/cjs/DropdownMenu.js +16 -16
- package/lib/cjs/index.d.js.map +1 -1
- package/lib/cjs/styleScrollArea.js +6 -6
- package/lib/es6/DropdownMenu.js +16 -16
- package/lib/es6/index.d.js.map +1 -1
- package/lib/es6/styleScrollArea.js +6 -6
- package/lib/types/index.d.ts +3 -3
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
package/lib/cjs/DropdownMenu.js
CHANGED
|
@@ -35,22 +35,22 @@ var _getFocusableIn = require("@semcore/utils/lib/focus-lock/getFocusableIn");
|
|
|
35
35
|
var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
|
|
36
36
|
var _excluded = ["className"];
|
|
37
37
|
/*__reshadow-styles__:"./style/dropdown-menu.shadow.css"*/
|
|
38
|
-
var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".
|
|
39
|
-
"__SDropdownMenuList": "
|
|
40
|
-
"__SDropdownMenuItem": "
|
|
41
|
-
"_highlighted": "
|
|
42
|
-
"_disabled": "
|
|
43
|
-
"_size_l": "
|
|
44
|
-
"_size_m": "
|
|
45
|
-
"_visible": "
|
|
46
|
-
"_nesting-trigger": "__nesting-
|
|
47
|
-
"__SDropdownMenuNesting": "
|
|
48
|
-
"__SDropdownNestingItem": "
|
|
49
|
-
"_selected": "
|
|
50
|
-
"_notInteractive": "
|
|
51
|
-
"_variant_hint": "
|
|
52
|
-
"_variant_title": "
|
|
53
|
-
"__SDropdownMenuItemAddon": "
|
|
38
|
+
var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SDropdownMenuItem_1lqs6_gg_,.___SDropdownMenuList_1lqs6_gg_{position:relative;color:var(--intergalactic-text-primary, #191b23)}.___SDropdownMenuList_1lqs6_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_1lqs6_gg_{display:flex;align-items:center;-webkit-text-decoration:none;text-decoration:none;box-sizing:border-box;cursor:pointer;width:100%;text-align:left;line-height:normal}@media (hover:hover){.___SDropdownMenuItem_1lqs6_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-hover, #f4f5f9)}}.___SDropdownMenuItem_1lqs6_gg_:focus{outline:0}.___SDropdownMenuItem_1lqs6_gg_.__selected_1lqs6_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_1lqs6_gg_.__selected_1lqs6_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}.___SDropdownMenuItem_1lqs6_gg_.__highlighted_1lqs6_gg_:not(:focus-within){z-index:1;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset}.___SDropdownMenuItem_1lqs6_gg_.__disabled_1lqs6_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SDropdownMenuItem_1lqs6_gg_._size_l_1lqs6_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_1lqs6_gg_._size_m_1lqs6_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_1lqs6_gg_.__notInteractive_1lqs6_gg_{cursor:default}@media (hover:hover){.___SDropdownMenuItem_1lqs6_gg_.__notInteractive_1lqs6_gg_:hover{background:0 0}}.___SDropdownMenuItem_1lqs6_gg_._variant_hint_1lqs6_gg_{color:var(--intergalactic-text-secondary, #6c6e79);cursor:default}@media (hover:hover){.___SDropdownMenuItem_1lqs6_gg_._variant_hint_1lqs6_gg_:hover{background:0 0}}.___SDropdownMenuItem_1lqs6_gg_._variant_title_1lqs6_gg_{font-weight:var(--intergalactic-bold, 700);cursor:default}@media (hover:hover){.___SDropdownMenuItem_1lqs6_gg_._variant_title_1lqs6_gg_:hover{background:0 0}}.___SDropdownMenuItem_1lqs6_gg_.__visible_1lqs6_gg_{background-color:var(--intergalactic-dropdown-menu-item-hover, #f4f5f9)}.___SDropdownMenuItem_1lqs6_gg_.__nesting-trigger_1lqs6_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_1lqs6_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SDropdownMenuItemAddon_1lqs6_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_1lqs6_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_1lqs6_gg_,.___SDropdownMenuNesting_1lqs6_gg_._size_l_1lqs6_gg_,.___SDropdownMenuNesting_1lqs6_gg_._size_m_1lqs6_gg_{padding:0}.___SDropdownMenuNesting_1lqs6_gg_.__highlighted_1lqs6_gg_{z-index:1;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset}.___SDropdownNestingItem_1lqs6_gg_._size_l_1lqs6_gg_,.___SDropdownNestingItem_1lqs6_gg_._size_m_1lqs6_gg_{padding-right:0}.___SDropdownNestingItem_1lqs6_gg_ .___SDropdownMenuItem_1lqs6_gg_{width:auto;padding-top:0;padding-bottom:0;padding-left:0;min-height:auto}" /*__inner_css_end__*/, "1lqs6_gg_") /*__reshadow_css_end__*/, {
|
|
39
|
+
"__SDropdownMenuList": "___SDropdownMenuList_1lqs6_gg_",
|
|
40
|
+
"__SDropdownMenuItem": "___SDropdownMenuItem_1lqs6_gg_",
|
|
41
|
+
"_highlighted": "__highlighted_1lqs6_gg_",
|
|
42
|
+
"_disabled": "__disabled_1lqs6_gg_",
|
|
43
|
+
"_size_l": "_size_l_1lqs6_gg_",
|
|
44
|
+
"_size_m": "_size_m_1lqs6_gg_",
|
|
45
|
+
"_visible": "__visible_1lqs6_gg_",
|
|
46
|
+
"_nesting-trigger": "__nesting-trigger_1lqs6_gg_",
|
|
47
|
+
"__SDropdownMenuNesting": "___SDropdownMenuNesting_1lqs6_gg_",
|
|
48
|
+
"__SDropdownNestingItem": "___SDropdownNestingItem_1lqs6_gg_",
|
|
49
|
+
"_selected": "__selected_1lqs6_gg_",
|
|
50
|
+
"_notInteractive": "__notInteractive_1lqs6_gg_",
|
|
51
|
+
"_variant_hint": "_variant_hint_1lqs6_gg_",
|
|
52
|
+
"_variant_title": "_variant_title_1lqs6_gg_",
|
|
53
|
+
"__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_1lqs6_gg_"
|
|
54
54
|
});
|
|
55
55
|
var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
|
|
56
56
|
(0, _inherits2["default"])(DropdownMenuRoot, _Component);
|
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 item\n */\n disabled?: boolean;\n /**\n * Adds focus styles around\n */\n highlighted?: boolean;\n /**\n * Disables hover state\n * @deprecated use `disabled` instead\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 Nesting: Intergalactic.Component<\n 'div',\n DropdownMenuItemProps,\n DropdownMenuContext,\n [handlers: DropdownMenuHandlers]\n > & {\n Trigger: Intergalactic.Component<'div', DropdownMenuItemProps>;\n Item: Intergalactic.Component<'div', DropdownMenuItemProps>;\n Addon: typeof Box;\n };\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 | null;\n /**\n * Index of the selected item\n */\n highlightedIndex?: number | null;\n /**\n * Callback for highlightedIndex change\n * highlightedIndex - Index of the selected item\n */\n onHighlightedIndexChange?: (highlightedIndex: number | null) => 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 item\n */\n disabled?: boolean;\n /**\n * Adds focus styles around\n */\n highlighted?: boolean;\n /**\n * Disables hover state\n * @deprecated use `disabled` instead\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 Nesting: Intergalactic.Component<\n 'div',\n DropdownMenuItemProps,\n DropdownMenuContext,\n [handlers: DropdownMenuHandlers]\n > & {\n Trigger: Intergalactic.Component<'div', DropdownMenuItemProps>;\n Item: Intergalactic.Component<'div', DropdownMenuItemProps>;\n Addon: typeof Box;\n };\n};\n\nexport default DropdownMenu;\n"],"mappings":""}
|
|
@@ -11,12 +11,12 @@ var _index = require("@semcore/utils/lib/core/index");
|
|
|
11
11
|
*
|
|
12
12
|
* We will figure out what to do with it and remove it.
|
|
13
13
|
* */
|
|
14
|
-
var scrollStyles = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".
|
|
15
|
-
"__SShadowHorizontal": "
|
|
16
|
-
"_position_median": "
|
|
17
|
-
"_position_start": "
|
|
18
|
-
"_position_end": "
|
|
19
|
-
"__SShadowVertical": "
|
|
14
|
+
var scrollStyles = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SShadowHorizontal_1dp4w_gg_:after,.___SShadowHorizontal_1dp4w_gg_:before{width:16px;height:100%;border-radius:var(--intergalactic-control-rounded, 6px)}.___SShadowHorizontal_1dp4w_gg_._position_median_1dp4w_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_1dp4w_gg_._position_median_1dp4w_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_1dp4w_gg_._position_start_1dp4w_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_1dp4w_gg_._position_end_1dp4w_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_1dp4w_gg_:after,.___SShadowVertical_1dp4w_gg_:before{width:100%;height:16px;border-radius:var(--intergalactic-control-rounded, 6px)}.___SShadowVertical_1dp4w_gg_._position_median_1dp4w_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_1dp4w_gg_._position_median_1dp4w_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_1dp4w_gg_._position_start_1dp4w_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_1dp4w_gg_._position_end_1dp4w_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__*/, "1dp4w_gg_") /*__reshadow_css_end__*/, {
|
|
15
|
+
"__SShadowHorizontal": "___SShadowHorizontal_1dp4w_gg_",
|
|
16
|
+
"_position_median": "_position_median_1dp4w_gg_",
|
|
17
|
+
"_position_start": "_position_start_1dp4w_gg_",
|
|
18
|
+
"_position_end": "_position_end_1dp4w_gg_",
|
|
19
|
+
"__SShadowVertical": "___SShadowVertical_1dp4w_gg_"
|
|
20
20
|
});
|
|
21
21
|
var _default = scrollStyles;
|
|
22
22
|
exports["default"] = _default;
|
package/lib/es6/DropdownMenu.js
CHANGED
|
@@ -33,22 +33,22 @@ import { useFocusLock } from '@semcore/utils/lib/use/useFocusLock';
|
|
|
33
33
|
import { hasParent } from '@semcore/utils/lib/hasParent';
|
|
34
34
|
import scrollStyles from './styleScrollArea';
|
|
35
35
|
/*__reshadow-styles__:"./style/dropdown-menu.shadow.css"*/
|
|
36
|
-
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".
|
|
37
|
-
"__SDropdownMenuList": "
|
|
38
|
-
"__SDropdownMenuItem": "
|
|
39
|
-
"_highlighted": "
|
|
40
|
-
"_disabled": "
|
|
41
|
-
"_size_l": "
|
|
42
|
-
"_size_m": "
|
|
43
|
-
"_visible": "
|
|
44
|
-
"_nesting-trigger": "__nesting-
|
|
45
|
-
"__SDropdownMenuNesting": "
|
|
46
|
-
"__SDropdownNestingItem": "
|
|
47
|
-
"_selected": "
|
|
48
|
-
"_notInteractive": "
|
|
49
|
-
"_variant_hint": "
|
|
50
|
-
"_variant_title": "
|
|
51
|
-
"__SDropdownMenuItemAddon": "
|
|
36
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SDropdownMenuItem_1lqs6_gg_,.___SDropdownMenuList_1lqs6_gg_{position:relative;color:var(--intergalactic-text-primary, #191b23)}.___SDropdownMenuList_1lqs6_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_1lqs6_gg_{display:flex;align-items:center;-webkit-text-decoration:none;text-decoration:none;box-sizing:border-box;cursor:pointer;width:100%;text-align:left;line-height:normal}@media (hover:hover){.___SDropdownMenuItem_1lqs6_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-hover, #f4f5f9)}}.___SDropdownMenuItem_1lqs6_gg_:focus{outline:0}.___SDropdownMenuItem_1lqs6_gg_.__selected_1lqs6_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_1lqs6_gg_.__selected_1lqs6_gg_:hover{background-color:var(--intergalactic-dropdown-menu-item-selected-hover, #c4e5fe)}}.___SDropdownMenuItem_1lqs6_gg_.__highlighted_1lqs6_gg_:not(:focus-within){z-index:1;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset}.___SDropdownMenuItem_1lqs6_gg_.__disabled_1lqs6_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SDropdownMenuItem_1lqs6_gg_._size_l_1lqs6_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_1lqs6_gg_._size_m_1lqs6_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_1lqs6_gg_.__notInteractive_1lqs6_gg_{cursor:default}@media (hover:hover){.___SDropdownMenuItem_1lqs6_gg_.__notInteractive_1lqs6_gg_:hover{background:0 0}}.___SDropdownMenuItem_1lqs6_gg_._variant_hint_1lqs6_gg_{color:var(--intergalactic-text-secondary, #6c6e79);cursor:default}@media (hover:hover){.___SDropdownMenuItem_1lqs6_gg_._variant_hint_1lqs6_gg_:hover{background:0 0}}.___SDropdownMenuItem_1lqs6_gg_._variant_title_1lqs6_gg_{font-weight:var(--intergalactic-bold, 700);cursor:default}@media (hover:hover){.___SDropdownMenuItem_1lqs6_gg_._variant_title_1lqs6_gg_:hover{background:0 0}}.___SDropdownMenuItem_1lqs6_gg_.__visible_1lqs6_gg_{background-color:var(--intergalactic-dropdown-menu-item-hover, #f4f5f9)}.___SDropdownMenuItem_1lqs6_gg_.__nesting-trigger_1lqs6_gg_{justify-content:space-between}.___SDropdownMenuItemAddon_1lqs6_gg_{display:inline-flex;margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SDropdownMenuItemAddon_1lqs6_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_1lqs6_gg_:last-child{margin-right:0}.___SDropdownMenuNesting_1lqs6_gg_,.___SDropdownMenuNesting_1lqs6_gg_._size_l_1lqs6_gg_,.___SDropdownMenuNesting_1lqs6_gg_._size_m_1lqs6_gg_{padding:0}.___SDropdownMenuNesting_1lqs6_gg_.__highlighted_1lqs6_gg_{z-index:1;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5)) inset}.___SDropdownNestingItem_1lqs6_gg_._size_l_1lqs6_gg_,.___SDropdownNestingItem_1lqs6_gg_._size_m_1lqs6_gg_{padding-right:0}.___SDropdownNestingItem_1lqs6_gg_ .___SDropdownMenuItem_1lqs6_gg_{width:auto;padding-top:0;padding-bottom:0;padding-left:0;min-height:auto}" /*__inner_css_end__*/, "1lqs6_gg_") /*__reshadow_css_end__*/, {
|
|
37
|
+
"__SDropdownMenuList": "___SDropdownMenuList_1lqs6_gg_",
|
|
38
|
+
"__SDropdownMenuItem": "___SDropdownMenuItem_1lqs6_gg_",
|
|
39
|
+
"_highlighted": "__highlighted_1lqs6_gg_",
|
|
40
|
+
"_disabled": "__disabled_1lqs6_gg_",
|
|
41
|
+
"_size_l": "_size_l_1lqs6_gg_",
|
|
42
|
+
"_size_m": "_size_m_1lqs6_gg_",
|
|
43
|
+
"_visible": "__visible_1lqs6_gg_",
|
|
44
|
+
"_nesting-trigger": "__nesting-trigger_1lqs6_gg_",
|
|
45
|
+
"__SDropdownMenuNesting": "___SDropdownMenuNesting_1lqs6_gg_",
|
|
46
|
+
"__SDropdownNestingItem": "___SDropdownNestingItem_1lqs6_gg_",
|
|
47
|
+
"_selected": "__selected_1lqs6_gg_",
|
|
48
|
+
"_notInteractive": "__notInteractive_1lqs6_gg_",
|
|
49
|
+
"_variant_hint": "_variant_hint_1lqs6_gg_",
|
|
50
|
+
"_variant_title": "_variant_title_1lqs6_gg_",
|
|
51
|
+
"__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_1lqs6_gg_"
|
|
52
52
|
});
|
|
53
53
|
import { setFocus } from '@semcore/utils/lib/focus-lock/setFocus';
|
|
54
54
|
import { isFocusInside } from '@semcore/utils/lib/focus-lock/isFocusInside';
|
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 item\n */\n disabled?: boolean;\n /**\n * Adds focus styles around\n */\n highlighted?: boolean;\n /**\n * Disables hover state\n * @deprecated use `disabled` instead\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 Nesting: Intergalactic.Component<\n 'div',\n DropdownMenuItemProps,\n DropdownMenuContext,\n [handlers: DropdownMenuHandlers]\n > & {\n Trigger: Intergalactic.Component<'div', DropdownMenuItemProps>;\n Item: Intergalactic.Component<'div', DropdownMenuItemProps>;\n Addon: typeof Box;\n };\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 | null;\n /**\n * Index of the selected item\n */\n highlightedIndex?: number | null;\n /**\n * Callback for highlightedIndex change\n * highlightedIndex - Index of the selected item\n */\n onHighlightedIndexChange?: (highlightedIndex: number | null) => 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 item\n */\n disabled?: boolean;\n /**\n * Adds focus styles around\n */\n highlighted?: boolean;\n /**\n * Disables hover state\n * @deprecated use `disabled` instead\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 Nesting: Intergalactic.Component<\n 'div',\n DropdownMenuItemProps,\n DropdownMenuContext,\n [handlers: DropdownMenuHandlers]\n > & {\n Trigger: Intergalactic.Component<'div', DropdownMenuItemProps>;\n Item: Intergalactic.Component<'div', DropdownMenuItemProps>;\n Addon: typeof Box;\n };\n};\n\nexport default DropdownMenu;\n"],"mappings":""}
|
|
@@ -5,12 +5,12 @@ import { sstyled as _sstyled } from "@semcore/utils/lib/core/index";
|
|
|
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_1dp4w_gg_:after,.___SShadowHorizontal_1dp4w_gg_:before{width:16px;height:100%;border-radius:var(--intergalactic-control-rounded, 6px)}.___SShadowHorizontal_1dp4w_gg_._position_median_1dp4w_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_1dp4w_gg_._position_median_1dp4w_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_1dp4w_gg_._position_start_1dp4w_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_1dp4w_gg_._position_end_1dp4w_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_1dp4w_gg_:after,.___SShadowVertical_1dp4w_gg_:before{width:100%;height:16px;border-radius:var(--intergalactic-control-rounded, 6px)}.___SShadowVertical_1dp4w_gg_._position_median_1dp4w_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_1dp4w_gg_._position_median_1dp4w_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_1dp4w_gg_._position_start_1dp4w_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_1dp4w_gg_._position_end_1dp4w_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__*/, "1dp4w_gg_") /*__reshadow_css_end__*/, {
|
|
9
|
+
"__SShadowHorizontal": "___SShadowHorizontal_1dp4w_gg_",
|
|
10
|
+
"_position_median": "_position_median_1dp4w_gg_",
|
|
11
|
+
"_position_start": "_position_start_1dp4w_gg_",
|
|
12
|
+
"_position_end": "_position_end_1dp4w_gg_",
|
|
13
|
+
"__SShadowVertical": "___SShadowVertical_1dp4w_gg_"
|
|
14
14
|
});
|
|
15
15
|
export default scrollStyles;
|
|
16
16
|
//# sourceMappingURL=styleScrollArea.js.map
|
package/lib/types/index.d.ts
CHANGED
|
@@ -21,16 +21,16 @@ export type DropdownMenuProps = DropdownProps & {
|
|
|
21
21
|
/**
|
|
22
22
|
* Index of the element selected by default
|
|
23
23
|
*/
|
|
24
|
-
defaultHighlightedIndex?: number;
|
|
24
|
+
defaultHighlightedIndex?: number | null;
|
|
25
25
|
/**
|
|
26
26
|
* Index of the selected item
|
|
27
27
|
*/
|
|
28
|
-
highlightedIndex?: number;
|
|
28
|
+
highlightedIndex?: number | null;
|
|
29
29
|
/**
|
|
30
30
|
* Callback for highlightedIndex change
|
|
31
31
|
* highlightedIndex - Index of the selected item
|
|
32
32
|
*/
|
|
33
|
-
onHighlightedIndexChange?: (highlightedIndex: number) => void;
|
|
33
|
+
onHighlightedIndexChange?: (highlightedIndex: number | null) => void;
|
|
34
34
|
locale?: string;
|
|
35
35
|
};
|
|
36
36
|
|
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.34.
|
|
4
|
+
"version": "4.34.2",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -9,10 +9,10 @@
|
|
|
9
9
|
"author": "UI-kit team <ui-kit-team@semrush.com>",
|
|
10
10
|
"license": "MIT",
|
|
11
11
|
"dependencies": {
|
|
12
|
-
"@semcore/dropdown": "4.
|
|
13
|
-
"@semcore/flex-box": "5.
|
|
14
|
-
"@semcore/scroll-area": "5.
|
|
15
|
-
"@semcore/utils": "4.
|
|
12
|
+
"@semcore/dropdown": "4.33.0",
|
|
13
|
+
"@semcore/flex-box": "5.29.0",
|
|
14
|
+
"@semcore/scroll-area": "5.32.0",
|
|
15
|
+
"@semcore/utils": "4.30.0",
|
|
16
16
|
"classnames": "2.2.6"
|
|
17
17
|
},
|
|
18
18
|
"peerDependencies": {
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"@semcore/testing-utils": "1.0.0",
|
|
32
32
|
"@semcore/base-trigger": "4.26.1",
|
|
33
33
|
"@semcore/icon": "4.26.0",
|
|
34
|
-
"@semcore/button": "5.
|
|
34
|
+
"@semcore/button": "5.31.0"
|
|
35
35
|
},
|
|
36
36
|
"scripts": {
|
|
37
37
|
"build": "pnpm semcore-builder --source=js"
|