@semcore/dropdown-menu 3.0.6 → 3.0.9
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 +19 -1
- package/lib/cjs/DropdownMenu.js +14 -14
- package/lib/cjs/DropdownMenu.js.map +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/es6/DropdownMenu.js +14 -14
- package/lib/es6/DropdownMenu.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/package.json +1 -1
- package/src/DropdownMenu.jsx +0 -250
- package/src/index.d.ts +0 -110
- package/src/index.js +0 -1
- package/src/style/dropdown-menu.shadow.css +0 -109
package/CHANGELOG.md
CHANGED
|
@@ -2,11 +2,29 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [3.0.9] - 2022-08-01
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.35.0 ~> 3.35.1], `@semcore/dropdown` [3.0.7 ~> 3.0.8]).
|
|
10
|
+
|
|
11
|
+
## [3.0.8] - 2022-07-22
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.34.0 ~> 3.35.0], `@semcore/dropdown` [3.0.6 ~> 3.0.7]).
|
|
16
|
+
|
|
17
|
+
## [3.0.7] - 2022-07-18
|
|
18
|
+
|
|
19
|
+
### Changed
|
|
20
|
+
|
|
21
|
+
- Version patch update due to children dependencies update (`@semcore/dropdown` [3.0.5 ~> 3.0.6]).
|
|
22
|
+
|
|
5
23
|
## [3.0.6] - 2022-07-12
|
|
6
24
|
|
|
7
25
|
### Fixed
|
|
8
26
|
|
|
9
|
-
- Remove deprecated size(xl) type.
|
|
27
|
+
- Remove deprecated size (`xl`) type.
|
|
10
28
|
|
|
11
29
|
## [3.0.5] - 2022-07-07
|
|
12
30
|
|
package/lib/cjs/DropdownMenu.js
CHANGED
|
@@ -61,23 +61,23 @@ var style = (
|
|
|
61
61
|
/*__reshadow_css_start__*/
|
|
62
62
|
_core.sstyled.insert(
|
|
63
63
|
/*__inner_css_start__*/
|
|
64
|
-
".
|
|
64
|
+
".___SDropdownMenuList_z7858_gg_{max-height:240px;margin:4px 0;padding:0;position:relative;min-height:26px;min-width:32px}.___SDropdownMenuItem_z7858_gg_{display:flex;align-items:center;position:relative;text-decoration:none;box-sizing:border-box;cursor:pointer;width:100%;text-align:left;line-height:normal}.___SDropdownMenuItem_z7858_gg_:hover{background-color:#f4f5f9}.___SDropdownMenuItem_z7858_gg_:focus{outline:none}.___SDropdownMenuItem_z7858_gg_.__highlighted_z7858_gg_{z-index:1;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2) inset}.___SDropdownMenuItem_z7858_gg_.__selected_z7858_gg_{background-color:rgba(196,229,254,.7)}.___SDropdownMenuItem_z7858_gg_.__selected_z7858_gg_:hover{background-color:#c4e5fe}.___SDropdownMenuItem_z7858_gg_.__disabled_z7858_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SDropdownMenuItem_z7858_gg_._size_l_z7858_gg_{font-size:16px;line-height:1.5;padding:8px 12px;min-height:40px}.___SDropdownMenuItem_z7858_gg_._size_m_z7858_gg_{font-size:14px;line-height:1.42;padding:6px 8px;min-height:32px}.___SDropdownMenuItem_z7858_gg_.__notInteractive_z7858_gg_{cursor:default}.___SDropdownMenuItem_z7858_gg_.__notInteractive_z7858_gg_:hover{background:none}.___SDropdownMenuItem_z7858_gg_._variant_hint_z7858_gg_{color:#6c6e79;cursor:default}.___SDropdownMenuItem_z7858_gg_._variant_hint_z7858_gg_:hover{background:none}.___SDropdownMenuItem_z7858_gg_._variant_title_z7858_gg_{font-weight:700;cursor:default}.___SDropdownMenuItem_z7858_gg_._variant_title_z7858_gg_:hover{background:none}.___SDropdownMenuItemAddon_z7858_gg_{display:inline-flex;margin-left:8px;margin-right:8px}.___SDropdownMenuItemAddon_z7858_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_z7858_gg_:last-child{margin-right:0}.___SPopper_z7858_gg_:focus{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}"
|
|
65
65
|
/*__inner_css_end__*/
|
|
66
|
-
, "
|
|
66
|
+
, "z7858_gg_")
|
|
67
67
|
/*__reshadow_css_end__*/
|
|
68
68
|
, {
|
|
69
|
-
"__SDropdownMenuList": "
|
|
70
|
-
"__SDropdownMenuItem": "
|
|
71
|
-
"_highlighted": "
|
|
72
|
-
"_selected": "
|
|
73
|
-
"_disabled": "
|
|
74
|
-
"_size_l": "
|
|
75
|
-
"_size_m": "
|
|
76
|
-
"_notInteractive": "
|
|
77
|
-
"_variant_hint": "
|
|
78
|
-
"_variant_title": "
|
|
79
|
-
"__SDropdownMenuItemAddon": "
|
|
80
|
-
"__SPopper": "
|
|
69
|
+
"__SDropdownMenuList": "___SDropdownMenuList_z7858_gg_",
|
|
70
|
+
"__SDropdownMenuItem": "___SDropdownMenuItem_z7858_gg_",
|
|
71
|
+
"_highlighted": "__highlighted_z7858_gg_",
|
|
72
|
+
"_selected": "__selected_z7858_gg_",
|
|
73
|
+
"_disabled": "__disabled_z7858_gg_",
|
|
74
|
+
"_size_l": "_size_l_z7858_gg_",
|
|
75
|
+
"_size_m": "_size_m_z7858_gg_",
|
|
76
|
+
"_notInteractive": "__notInteractive_z7858_gg_",
|
|
77
|
+
"_variant_hint": "_variant_hint_z7858_gg_",
|
|
78
|
+
"_variant_title": "_variant_title_z7858_gg_",
|
|
79
|
+
"__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_z7858_gg_",
|
|
80
|
+
"__SPopper": "___SPopper_z7858_gg_"
|
|
81
81
|
});
|
|
82
82
|
var KEYS = ['ArrowDown', 'ArrowUp', 'Enter', ' '];
|
|
83
83
|
var INTERACTION_TAGS = ['INPUT', 'TEXTAREA'];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/DropdownMenu.jsx"],"names":["KEYS","INTERACTION_TAGS","DropdownMenuRoot","e","amount","shiftKey","key","includes","target","tagName","preventDefault","handlers","visible","moveHighlightedIndex","_highlightedItem","click","node","scrollIntoView","asProps","highlightedIndex","prevHighlightedIndex","block","inline","size","onKeyDown","handlerKeyDown","tabIndex","props","index","highlighted","extraProps","_items","push","ref","scrollToNode","itemsLastIndex","length","selectedIndex","findIndex","item","selected","newIndex","disabled","Children","Dropdown","Component","style","defaultVisible","defaultHighlightedIndex","List","SDropdownMenuList","Box","styles","ScrollAreaComponent","Menu","DropdownMenu","Item","forwardRef","SDropdownMenuItem","className","other","cn","undefined","Addon","SDropdownMenuItemAddon","Hint","Flex","Title","Trigger","Popper","ItemTitle","ItemHint","parent"],"mappings":"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","sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport Dropdown from '@semcore/dropdown';\nimport { Box, Flex, useBox, useFlex } from '@semcore/flex-box';\nimport ScrollAreaComponent from '@semcore/scroll-area';\n\nimport style from './style/dropdown-menu.shadow.css';\n\nconst KEYS = ['ArrowDown', 'ArrowUp', 'Enter', ' '];\nconst INTERACTION_TAGS = ['INPUT', 'TEXTAREA'];\n\nclass DropdownMenuRoot extends Component {\n static displayName = 'DropdownMenu';\n static style = style;\n\n static defaultProps = {\n size: 'm',\n defaultVisible: false,\n defaultHighlightedIndex: null,\n };\n\n _items = [];\n\n _highlightedItem = null;\n\n prevHighlightedIndex = null;\n\n uncontrolledProps() {\n return {\n highlightedIndex: null,\n visible: null,\n };\n }\n\n handlerKeyDown = (e) => {\n const amount = e.shiftKey ? 5 : 1;\n\n if (e.key === ' ' && INTERACTION_TAGS.includes(e.target.tagName)) return;\n if (!KEYS.includes(e.key)) return;\n\n e.preventDefault();\n\n this.handlers.visible(true);\n\n switch (e.key) {\n case 'ArrowDown':\n this.moveHighlightedIndex(amount, e);\n break;\n case 'ArrowUp':\n this.moveHighlightedIndex(-amount, e);\n break;\n case ' ':\n case 'Enter':\n if (this._highlightedItem) this._highlightedItem.click();\n break;\n }\n };\n\n getTriggerProps() {\n const { size } = this.asProps;\n return {\n size,\n onKeyDown: this.handlerKeyDown,\n };\n }\n\n getListProps() {\n const { size } = this.asProps;\n return {\n size,\n };\n }\n\n getPopperProps() {\n return {\n tabIndex: 0,\n onKeyDown: this.handlerKeyDown,\n };\n }\n\n getItemProps(props, index) {\n const { size, highlightedIndex } = this.asProps;\n const highlighted = index === highlightedIndex;\n const extraProps = {};\n\n this._items.push(props);\n if (highlighted) {\n extraProps.ref = this.scrollToNode;\n }\n\n return {\n size,\n highlighted,\n ...extraProps,\n };\n }\n\n getItemHintProps() {\n const { size } = this.asProps;\n return {\n size,\n };\n }\n\n getItemTitleProps() {\n const { size } = this.asProps;\n return {\n size,\n };\n }\n\n scrollToNode = (node) => {\n this._highlightedItem = node;\n if (node && node.scrollIntoView) {\n if (this.asProps.highlightedIndex !== this.prevHighlightedIndex) {\n this.prevHighlightedIndex = this.asProps.highlightedIndex;\n node.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n });\n }\n }\n };\n\n moveHighlightedIndex(amount, e) {\n let { highlightedIndex } = this.asProps;\n const itemsLastIndex = this._items.length - 1;\n const selectedIndex = this._items.findIndex((item) => item.selected);\n\n if (itemsLastIndex < 0) return;\n\n if (highlightedIndex == null) {\n if (selectedIndex !== -1) {\n highlightedIndex = selectedIndex;\n } else {\n highlightedIndex = amount < 0 ? 0 : itemsLastIndex;\n }\n }\n\n let newIndex = highlightedIndex + amount;\n if (newIndex < 0) {\n newIndex = amount + itemsLastIndex + 1;\n } else if (newIndex > itemsLastIndex) {\n newIndex = newIndex - itemsLastIndex - 1;\n }\n\n if (this._items[newIndex] && this._items[newIndex].disabled) {\n this.moveHighlightedIndex(amount < 0 ? amount - 1 : amount + 1, e);\n } else {\n this.handlers.highlightedIndex(newIndex, e);\n }\n }\n\n componentDidUpdate() {\n const { visible } = this.asProps;\n\n if (!visible) {\n this.handlers.highlightedIndex(null);\n }\n }\n\n render() {\n const { Children } = this.asProps;\n const props = {};\n\n this._items = [];\n\n return (\n <Root render={Dropdown} {...props}>\n <Children />\n </Root>\n );\n }\n}\n\nfunction List(props) {\n const SDropdownMenuList = Root;\n return sstyled(props.styles)(\n <SDropdownMenuList render={Box} tag={ScrollAreaComponent} role=\"menu\" />,\n );\n}\n\nfunction Menu() {\n return (\n <DropdownMenu.Popper>\n <Root render={DropdownMenu.List} />\n </DropdownMenu.Popper>\n );\n}\n\nfunction Item(props) {\n const [SDropdownMenuItem, { className, ...other }] = useFlex(props, props.forwardRef);\n const styles = sstyled(props.styles);\n return (\n <SDropdownMenuItem\n role=\"menuitem\"\n tabIndex={-1}\n className={\n cn(\n styles.cn('SDropdownMenuItem', {\n ...props,\n highlighted: !props.disabled && props.highlighted,\n }).className,\n className,\n ) || undefined\n }\n {...other}\n />\n );\n}\n\nfunction Addon(props) {\n const [SDropdownMenuItemAddon, { className, ...other }] = useBox(props, props.forwardRef);\n const styles = sstyled(props.styles);\n return (\n <SDropdownMenuItemAddon\n className={cn(styles.cn('SDropdownMenuItemAddon', props).className, className) || undefined}\n {...other}\n />\n );\n}\n\nfunction Hint(props) {\n const SDropdownMenuItem = Root;\n return sstyled(props.styles)(<SDropdownMenuItem render={Flex} variant=\"hint\" />);\n}\n\nfunction Title(props) {\n const SDropdownMenuItem = Root;\n return sstyled(props.styles)(<SDropdownMenuItem render={Flex} variant=\"title\" />);\n}\n\nconst DropdownMenu = createComponent(\n DropdownMenuRoot,\n {\n Trigger: Dropdown.Trigger,\n Popper: Dropdown.Popper,\n List,\n Menu,\n Item: [Item, { Addon }],\n ItemTitle: Title,\n ItemHint: Hint,\n },\n {\n parent: [Dropdown],\n },\n);\n\nexport default DropdownMenu;\n"],"file":"DropdownMenu.js"}
|
|
1
|
+
{"version":3,"file":"DropdownMenu.js","names":["KEYS","INTERACTION_TAGS","DropdownMenuRoot","e","amount","shiftKey","key","includes","target","tagName","preventDefault","handlers","visible","moveHighlightedIndex","_highlightedItem","click","node","scrollIntoView","asProps","highlightedIndex","prevHighlightedIndex","block","inline","size","onKeyDown","handlerKeyDown","tabIndex","props","index","highlighted","extraProps","_items","push","ref","scrollToNode","itemsLastIndex","length","selectedIndex","findIndex","item","selected","newIndex","disabled","Children","Dropdown","Component","style","defaultVisible","defaultHighlightedIndex","List","SDropdownMenuList","Box","sstyled","styles","ScrollAreaComponent","Menu","DropdownMenu","Item","useFlex","forwardRef","SDropdownMenuItem","className","other","cn","undefined","Addon","useBox","SDropdownMenuItemAddon","Hint","Flex","Title","createComponent","Trigger","Popper","ItemTitle","ItemHint","parent"],"sources":["../../src/DropdownMenu.jsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport Dropdown from '@semcore/dropdown';\nimport { Box, Flex, useBox, useFlex } from '@semcore/flex-box';\nimport ScrollAreaComponent from '@semcore/scroll-area';\n\nimport style from './style/dropdown-menu.shadow.css';\n\nconst KEYS = ['ArrowDown', 'ArrowUp', 'Enter', ' '];\nconst INTERACTION_TAGS = ['INPUT', 'TEXTAREA'];\n\nclass DropdownMenuRoot extends Component {\n static displayName = 'DropdownMenu';\n static style = style;\n\n static defaultProps = {\n size: 'm',\n defaultVisible: false,\n defaultHighlightedIndex: null,\n };\n\n _items = [];\n\n _highlightedItem = null;\n\n prevHighlightedIndex = null;\n\n uncontrolledProps() {\n return {\n highlightedIndex: null,\n visible: null,\n };\n }\n\n handlerKeyDown = (e) => {\n const amount = e.shiftKey ? 5 : 1;\n\n if (e.key === ' ' && INTERACTION_TAGS.includes(e.target.tagName)) return;\n if (!KEYS.includes(e.key)) return;\n\n e.preventDefault();\n\n this.handlers.visible(true);\n\n switch (e.key) {\n case 'ArrowDown':\n this.moveHighlightedIndex(amount, e);\n break;\n case 'ArrowUp':\n this.moveHighlightedIndex(-amount, e);\n break;\n case ' ':\n case 'Enter':\n if (this._highlightedItem) this._highlightedItem.click();\n break;\n }\n };\n\n getTriggerProps() {\n const { size } = this.asProps;\n return {\n size,\n onKeyDown: this.handlerKeyDown,\n };\n }\n\n getListProps() {\n const { size } = this.asProps;\n return {\n size,\n };\n }\n\n getPopperProps() {\n return {\n tabIndex: 0,\n onKeyDown: this.handlerKeyDown,\n };\n }\n\n getItemProps(props, index) {\n const { size, highlightedIndex } = this.asProps;\n const highlighted = index === highlightedIndex;\n const extraProps = {};\n\n this._items.push(props);\n if (highlighted) {\n extraProps.ref = this.scrollToNode;\n }\n\n return {\n size,\n highlighted,\n ...extraProps,\n };\n }\n\n getItemHintProps() {\n const { size } = this.asProps;\n return {\n size,\n };\n }\n\n getItemTitleProps() {\n const { size } = this.asProps;\n return {\n size,\n };\n }\n\n scrollToNode = (node) => {\n this._highlightedItem = node;\n if (node && node.scrollIntoView) {\n if (this.asProps.highlightedIndex !== this.prevHighlightedIndex) {\n this.prevHighlightedIndex = this.asProps.highlightedIndex;\n node.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n });\n }\n }\n };\n\n moveHighlightedIndex(amount, e) {\n let { highlightedIndex } = this.asProps;\n const itemsLastIndex = this._items.length - 1;\n const selectedIndex = this._items.findIndex((item) => item.selected);\n\n if (itemsLastIndex < 0) return;\n\n if (highlightedIndex == null) {\n if (selectedIndex !== -1) {\n highlightedIndex = selectedIndex;\n } else {\n highlightedIndex = amount < 0 ? 0 : itemsLastIndex;\n }\n }\n\n let newIndex = highlightedIndex + amount;\n if (newIndex < 0) {\n newIndex = amount + itemsLastIndex + 1;\n } else if (newIndex > itemsLastIndex) {\n newIndex = newIndex - itemsLastIndex - 1;\n }\n\n if (this._items[newIndex] && this._items[newIndex].disabled) {\n this.moveHighlightedIndex(amount < 0 ? amount - 1 : amount + 1, e);\n } else {\n this.handlers.highlightedIndex(newIndex, e);\n }\n }\n\n componentDidUpdate() {\n const { visible } = this.asProps;\n\n if (!visible) {\n this.handlers.highlightedIndex(null);\n }\n }\n\n render() {\n const { Children } = this.asProps;\n const props = {};\n\n this._items = [];\n\n return (\n <Root render={Dropdown} {...props}>\n <Children />\n </Root>\n );\n }\n}\n\nfunction List(props) {\n const SDropdownMenuList = Root;\n return sstyled(props.styles)(\n <SDropdownMenuList render={Box} tag={ScrollAreaComponent} role=\"menu\" />,\n );\n}\n\nfunction Menu() {\n return (\n <DropdownMenu.Popper>\n <Root render={DropdownMenu.List} />\n </DropdownMenu.Popper>\n );\n}\n\nfunction Item(props) {\n const [SDropdownMenuItem, { className, ...other }] = useFlex(props, props.forwardRef);\n const styles = sstyled(props.styles);\n return (\n <SDropdownMenuItem\n role=\"menuitem\"\n tabIndex={-1}\n className={\n cn(\n styles.cn('SDropdownMenuItem', {\n ...props,\n highlighted: !props.disabled && props.highlighted,\n }).className,\n className,\n ) || undefined\n }\n {...other}\n />\n );\n}\n\nfunction Addon(props) {\n const [SDropdownMenuItemAddon, { className, ...other }] = useBox(props, props.forwardRef);\n const styles = sstyled(props.styles);\n return (\n <SDropdownMenuItemAddon\n className={cn(styles.cn('SDropdownMenuItemAddon', props).className, className) || undefined}\n {...other}\n />\n );\n}\n\nfunction Hint(props) {\n const SDropdownMenuItem = Root;\n return sstyled(props.styles)(<SDropdownMenuItem render={Flex} variant=\"hint\" />);\n}\n\nfunction Title(props) {\n const SDropdownMenuItem = Root;\n return sstyled(props.styles)(<SDropdownMenuItem render={Flex} variant=\"title\" />);\n}\n\nconst DropdownMenu = createComponent(\n DropdownMenuRoot,\n {\n Trigger: Dropdown.Trigger,\n Popper: Dropdown.Popper,\n List,\n Menu,\n Item: [Item, { Addon }],\n ItemTitle: Title,\n ItemHint: Hint,\n },\n {\n parent: [Dropdown],\n },\n);\n\nexport default DropdownMenu;\n"],"mappings":"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"}
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './DropdownMenu';\n"],"mappings":";;;;;;;;;;;;;;AAAA"}
|
package/lib/es6/DropdownMenu.js
CHANGED
|
@@ -37,23 +37,23 @@ var style = (
|
|
|
37
37
|
/*__reshadow_css_start__*/
|
|
38
38
|
_sstyled.insert(
|
|
39
39
|
/*__inner_css_start__*/
|
|
40
|
-
".
|
|
40
|
+
".___SDropdownMenuList_z7858_gg_{max-height:240px;margin:4px 0;padding:0;position:relative;min-height:26px;min-width:32px}.___SDropdownMenuItem_z7858_gg_{display:flex;align-items:center;position:relative;text-decoration:none;box-sizing:border-box;cursor:pointer;width:100%;text-align:left;line-height:normal}.___SDropdownMenuItem_z7858_gg_:hover{background-color:#f4f5f9}.___SDropdownMenuItem_z7858_gg_:focus{outline:none}.___SDropdownMenuItem_z7858_gg_.__highlighted_z7858_gg_{z-index:1;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2) inset}.___SDropdownMenuItem_z7858_gg_.__selected_z7858_gg_{background-color:rgba(196,229,254,.7)}.___SDropdownMenuItem_z7858_gg_.__selected_z7858_gg_:hover{background-color:#c4e5fe}.___SDropdownMenuItem_z7858_gg_.__disabled_z7858_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SDropdownMenuItem_z7858_gg_._size_l_z7858_gg_{font-size:16px;line-height:1.5;padding:8px 12px;min-height:40px}.___SDropdownMenuItem_z7858_gg_._size_m_z7858_gg_{font-size:14px;line-height:1.42;padding:6px 8px;min-height:32px}.___SDropdownMenuItem_z7858_gg_.__notInteractive_z7858_gg_{cursor:default}.___SDropdownMenuItem_z7858_gg_.__notInteractive_z7858_gg_:hover{background:none}.___SDropdownMenuItem_z7858_gg_._variant_hint_z7858_gg_{color:#6c6e79;cursor:default}.___SDropdownMenuItem_z7858_gg_._variant_hint_z7858_gg_:hover{background:none}.___SDropdownMenuItem_z7858_gg_._variant_title_z7858_gg_{font-weight:700;cursor:default}.___SDropdownMenuItem_z7858_gg_._variant_title_z7858_gg_:hover{background:none}.___SDropdownMenuItemAddon_z7858_gg_{display:inline-flex;margin-left:8px;margin-right:8px}.___SDropdownMenuItemAddon_z7858_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_z7858_gg_:last-child{margin-right:0}.___SPopper_z7858_gg_:focus{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}"
|
|
41
41
|
/*__inner_css_end__*/
|
|
42
|
-
, "
|
|
42
|
+
, "z7858_gg_")
|
|
43
43
|
/*__reshadow_css_end__*/
|
|
44
44
|
, {
|
|
45
|
-
"__SDropdownMenuList": "
|
|
46
|
-
"__SDropdownMenuItem": "
|
|
47
|
-
"_highlighted": "
|
|
48
|
-
"_selected": "
|
|
49
|
-
"_disabled": "
|
|
50
|
-
"_size_l": "
|
|
51
|
-
"_size_m": "
|
|
52
|
-
"_notInteractive": "
|
|
53
|
-
"_variant_hint": "
|
|
54
|
-
"_variant_title": "
|
|
55
|
-
"__SDropdownMenuItemAddon": "
|
|
56
|
-
"__SPopper": "
|
|
45
|
+
"__SDropdownMenuList": "___SDropdownMenuList_z7858_gg_",
|
|
46
|
+
"__SDropdownMenuItem": "___SDropdownMenuItem_z7858_gg_",
|
|
47
|
+
"_highlighted": "__highlighted_z7858_gg_",
|
|
48
|
+
"_selected": "__selected_z7858_gg_",
|
|
49
|
+
"_disabled": "__disabled_z7858_gg_",
|
|
50
|
+
"_size_l": "_size_l_z7858_gg_",
|
|
51
|
+
"_size_m": "_size_m_z7858_gg_",
|
|
52
|
+
"_notInteractive": "__notInteractive_z7858_gg_",
|
|
53
|
+
"_variant_hint": "_variant_hint_z7858_gg_",
|
|
54
|
+
"_variant_title": "_variant_title_z7858_gg_",
|
|
55
|
+
"__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_z7858_gg_",
|
|
56
|
+
"__SPopper": "___SPopper_z7858_gg_"
|
|
57
57
|
});
|
|
58
58
|
var KEYS = ['ArrowDown', 'ArrowUp', 'Enter', ' '];
|
|
59
59
|
var INTERACTION_TAGS = ['INPUT', 'TEXTAREA'];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/DropdownMenu.jsx"],"names":["React","cn","createComponent","Component","sstyled","Root","Dropdown","Box","Flex","useBox","useFlex","ScrollAreaComponent","KEYS","INTERACTION_TAGS","DropdownMenuRoot","e","amount","shiftKey","key","includes","target","tagName","preventDefault","handlers","visible","moveHighlightedIndex","_highlightedItem","click","node","scrollIntoView","asProps","highlightedIndex","prevHighlightedIndex","block","inline","size","onKeyDown","handlerKeyDown","tabIndex","props","index","highlighted","extraProps","_items","push","ref","scrollToNode","itemsLastIndex","length","selectedIndex","findIndex","item","selected","newIndex","disabled","Children","style","defaultVisible","defaultHighlightedIndex","List","SDropdownMenuList","styles","Menu","DropdownMenu","Item","forwardRef","SDropdownMenuItem","className","other","undefined","Addon","SDropdownMenuItemAddon","Hint","Title","Trigger","Popper","ItemTitle","ItemHint","parent"],"mappings":"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","sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport Dropdown from '@semcore/dropdown';\nimport { Box, Flex, useBox, useFlex } from '@semcore/flex-box';\nimport ScrollAreaComponent from '@semcore/scroll-area';\n\nimport style from './style/dropdown-menu.shadow.css';\n\nconst KEYS = ['ArrowDown', 'ArrowUp', 'Enter', ' '];\nconst INTERACTION_TAGS = ['INPUT', 'TEXTAREA'];\n\nclass DropdownMenuRoot extends Component {\n static displayName = 'DropdownMenu';\n static style = style;\n\n static defaultProps = {\n size: 'm',\n defaultVisible: false,\n defaultHighlightedIndex: null,\n };\n\n _items = [];\n\n _highlightedItem = null;\n\n prevHighlightedIndex = null;\n\n uncontrolledProps() {\n return {\n highlightedIndex: null,\n visible: null,\n };\n }\n\n handlerKeyDown = (e) => {\n const amount = e.shiftKey ? 5 : 1;\n\n if (e.key === ' ' && INTERACTION_TAGS.includes(e.target.tagName)) return;\n if (!KEYS.includes(e.key)) return;\n\n e.preventDefault();\n\n this.handlers.visible(true);\n\n switch (e.key) {\n case 'ArrowDown':\n this.moveHighlightedIndex(amount, e);\n break;\n case 'ArrowUp':\n this.moveHighlightedIndex(-amount, e);\n break;\n case ' ':\n case 'Enter':\n if (this._highlightedItem) this._highlightedItem.click();\n break;\n }\n };\n\n getTriggerProps() {\n const { size } = this.asProps;\n return {\n size,\n onKeyDown: this.handlerKeyDown,\n };\n }\n\n getListProps() {\n const { size } = this.asProps;\n return {\n size,\n };\n }\n\n getPopperProps() {\n return {\n tabIndex: 0,\n onKeyDown: this.handlerKeyDown,\n };\n }\n\n getItemProps(props, index) {\n const { size, highlightedIndex } = this.asProps;\n const highlighted = index === highlightedIndex;\n const extraProps = {};\n\n this._items.push(props);\n if (highlighted) {\n extraProps.ref = this.scrollToNode;\n }\n\n return {\n size,\n highlighted,\n ...extraProps,\n };\n }\n\n getItemHintProps() {\n const { size } = this.asProps;\n return {\n size,\n };\n }\n\n getItemTitleProps() {\n const { size } = this.asProps;\n return {\n size,\n };\n }\n\n scrollToNode = (node) => {\n this._highlightedItem = node;\n if (node && node.scrollIntoView) {\n if (this.asProps.highlightedIndex !== this.prevHighlightedIndex) {\n this.prevHighlightedIndex = this.asProps.highlightedIndex;\n node.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n });\n }\n }\n };\n\n moveHighlightedIndex(amount, e) {\n let { highlightedIndex } = this.asProps;\n const itemsLastIndex = this._items.length - 1;\n const selectedIndex = this._items.findIndex((item) => item.selected);\n\n if (itemsLastIndex < 0) return;\n\n if (highlightedIndex == null) {\n if (selectedIndex !== -1) {\n highlightedIndex = selectedIndex;\n } else {\n highlightedIndex = amount < 0 ? 0 : itemsLastIndex;\n }\n }\n\n let newIndex = highlightedIndex + amount;\n if (newIndex < 0) {\n newIndex = amount + itemsLastIndex + 1;\n } else if (newIndex > itemsLastIndex) {\n newIndex = newIndex - itemsLastIndex - 1;\n }\n\n if (this._items[newIndex] && this._items[newIndex].disabled) {\n this.moveHighlightedIndex(amount < 0 ? amount - 1 : amount + 1, e);\n } else {\n this.handlers.highlightedIndex(newIndex, e);\n }\n }\n\n componentDidUpdate() {\n const { visible } = this.asProps;\n\n if (!visible) {\n this.handlers.highlightedIndex(null);\n }\n }\n\n render() {\n const { Children } = this.asProps;\n const props = {};\n\n this._items = [];\n\n return (\n <Root render={Dropdown} {...props}>\n <Children />\n </Root>\n );\n }\n}\n\nfunction List(props) {\n const SDropdownMenuList = Root;\n return sstyled(props.styles)(\n <SDropdownMenuList render={Box} tag={ScrollAreaComponent} role=\"menu\" />,\n );\n}\n\nfunction Menu() {\n return (\n <DropdownMenu.Popper>\n <Root render={DropdownMenu.List} />\n </DropdownMenu.Popper>\n );\n}\n\nfunction Item(props) {\n const [SDropdownMenuItem, { className, ...other }] = useFlex(props, props.forwardRef);\n const styles = sstyled(props.styles);\n return (\n <SDropdownMenuItem\n role=\"menuitem\"\n tabIndex={-1}\n className={\n cn(\n styles.cn('SDropdownMenuItem', {\n ...props,\n highlighted: !props.disabled && props.highlighted,\n }).className,\n className,\n ) || undefined\n }\n {...other}\n />\n );\n}\n\nfunction Addon(props) {\n const [SDropdownMenuItemAddon, { className, ...other }] = useBox(props, props.forwardRef);\n const styles = sstyled(props.styles);\n return (\n <SDropdownMenuItemAddon\n className={cn(styles.cn('SDropdownMenuItemAddon', props).className, className) || undefined}\n {...other}\n />\n );\n}\n\nfunction Hint(props) {\n const SDropdownMenuItem = Root;\n return sstyled(props.styles)(<SDropdownMenuItem render={Flex} variant=\"hint\" />);\n}\n\nfunction Title(props) {\n const SDropdownMenuItem = Root;\n return sstyled(props.styles)(<SDropdownMenuItem render={Flex} variant=\"title\" />);\n}\n\nconst DropdownMenu = createComponent(\n DropdownMenuRoot,\n {\n Trigger: Dropdown.Trigger,\n Popper: Dropdown.Popper,\n List,\n Menu,\n Item: [Item, { Addon }],\n ItemTitle: Title,\n ItemHint: Hint,\n },\n {\n parent: [Dropdown],\n },\n);\n\nexport default DropdownMenu;\n"],"file":"DropdownMenu.js"}
|
|
1
|
+
{"version":3,"file":"DropdownMenu.js","names":["React","cn","createComponent","Component","sstyled","Root","Dropdown","Box","Flex","useBox","useFlex","ScrollAreaComponent","KEYS","INTERACTION_TAGS","DropdownMenuRoot","e","amount","shiftKey","key","includes","target","tagName","preventDefault","handlers","visible","moveHighlightedIndex","_highlightedItem","click","node","scrollIntoView","asProps","highlightedIndex","prevHighlightedIndex","block","inline","size","onKeyDown","handlerKeyDown","tabIndex","props","index","highlighted","extraProps","_items","push","ref","scrollToNode","itemsLastIndex","length","selectedIndex","findIndex","item","selected","newIndex","disabled","Children","style","defaultVisible","defaultHighlightedIndex","List","SDropdownMenuList","styles","Menu","DropdownMenu","Item","forwardRef","SDropdownMenuItem","className","other","undefined","Addon","SDropdownMenuItemAddon","Hint","Title","Trigger","Popper","ItemTitle","ItemHint","parent"],"sources":["../../src/DropdownMenu.jsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport Dropdown from '@semcore/dropdown';\nimport { Box, Flex, useBox, useFlex } from '@semcore/flex-box';\nimport ScrollAreaComponent from '@semcore/scroll-area';\n\nimport style from './style/dropdown-menu.shadow.css';\n\nconst KEYS = ['ArrowDown', 'ArrowUp', 'Enter', ' '];\nconst INTERACTION_TAGS = ['INPUT', 'TEXTAREA'];\n\nclass DropdownMenuRoot extends Component {\n static displayName = 'DropdownMenu';\n static style = style;\n\n static defaultProps = {\n size: 'm',\n defaultVisible: false,\n defaultHighlightedIndex: null,\n };\n\n _items = [];\n\n _highlightedItem = null;\n\n prevHighlightedIndex = null;\n\n uncontrolledProps() {\n return {\n highlightedIndex: null,\n visible: null,\n };\n }\n\n handlerKeyDown = (e) => {\n const amount = e.shiftKey ? 5 : 1;\n\n if (e.key === ' ' && INTERACTION_TAGS.includes(e.target.tagName)) return;\n if (!KEYS.includes(e.key)) return;\n\n e.preventDefault();\n\n this.handlers.visible(true);\n\n switch (e.key) {\n case 'ArrowDown':\n this.moveHighlightedIndex(amount, e);\n break;\n case 'ArrowUp':\n this.moveHighlightedIndex(-amount, e);\n break;\n case ' ':\n case 'Enter':\n if (this._highlightedItem) this._highlightedItem.click();\n break;\n }\n };\n\n getTriggerProps() {\n const { size } = this.asProps;\n return {\n size,\n onKeyDown: this.handlerKeyDown,\n };\n }\n\n getListProps() {\n const { size } = this.asProps;\n return {\n size,\n };\n }\n\n getPopperProps() {\n return {\n tabIndex: 0,\n onKeyDown: this.handlerKeyDown,\n };\n }\n\n getItemProps(props, index) {\n const { size, highlightedIndex } = this.asProps;\n const highlighted = index === highlightedIndex;\n const extraProps = {};\n\n this._items.push(props);\n if (highlighted) {\n extraProps.ref = this.scrollToNode;\n }\n\n return {\n size,\n highlighted,\n ...extraProps,\n };\n }\n\n getItemHintProps() {\n const { size } = this.asProps;\n return {\n size,\n };\n }\n\n getItemTitleProps() {\n const { size } = this.asProps;\n return {\n size,\n };\n }\n\n scrollToNode = (node) => {\n this._highlightedItem = node;\n if (node && node.scrollIntoView) {\n if (this.asProps.highlightedIndex !== this.prevHighlightedIndex) {\n this.prevHighlightedIndex = this.asProps.highlightedIndex;\n node.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n });\n }\n }\n };\n\n moveHighlightedIndex(amount, e) {\n let { highlightedIndex } = this.asProps;\n const itemsLastIndex = this._items.length - 1;\n const selectedIndex = this._items.findIndex((item) => item.selected);\n\n if (itemsLastIndex < 0) return;\n\n if (highlightedIndex == null) {\n if (selectedIndex !== -1) {\n highlightedIndex = selectedIndex;\n } else {\n highlightedIndex = amount < 0 ? 0 : itemsLastIndex;\n }\n }\n\n let newIndex = highlightedIndex + amount;\n if (newIndex < 0) {\n newIndex = amount + itemsLastIndex + 1;\n } else if (newIndex > itemsLastIndex) {\n newIndex = newIndex - itemsLastIndex - 1;\n }\n\n if (this._items[newIndex] && this._items[newIndex].disabled) {\n this.moveHighlightedIndex(amount < 0 ? amount - 1 : amount + 1, e);\n } else {\n this.handlers.highlightedIndex(newIndex, e);\n }\n }\n\n componentDidUpdate() {\n const { visible } = this.asProps;\n\n if (!visible) {\n this.handlers.highlightedIndex(null);\n }\n }\n\n render() {\n const { Children } = this.asProps;\n const props = {};\n\n this._items = [];\n\n return (\n <Root render={Dropdown} {...props}>\n <Children />\n </Root>\n );\n }\n}\n\nfunction List(props) {\n const SDropdownMenuList = Root;\n return sstyled(props.styles)(\n <SDropdownMenuList render={Box} tag={ScrollAreaComponent} role=\"menu\" />,\n );\n}\n\nfunction Menu() {\n return (\n <DropdownMenu.Popper>\n <Root render={DropdownMenu.List} />\n </DropdownMenu.Popper>\n );\n}\n\nfunction Item(props) {\n const [SDropdownMenuItem, { className, ...other }] = useFlex(props, props.forwardRef);\n const styles = sstyled(props.styles);\n return (\n <SDropdownMenuItem\n role=\"menuitem\"\n tabIndex={-1}\n className={\n cn(\n styles.cn('SDropdownMenuItem', {\n ...props,\n highlighted: !props.disabled && props.highlighted,\n }).className,\n className,\n ) || undefined\n }\n {...other}\n />\n );\n}\n\nfunction Addon(props) {\n const [SDropdownMenuItemAddon, { className, ...other }] = useBox(props, props.forwardRef);\n const styles = sstyled(props.styles);\n return (\n <SDropdownMenuItemAddon\n className={cn(styles.cn('SDropdownMenuItemAddon', props).className, className) || undefined}\n {...other}\n />\n );\n}\n\nfunction Hint(props) {\n const SDropdownMenuItem = Root;\n return sstyled(props.styles)(<SDropdownMenuItem render={Flex} variant=\"hint\" />);\n}\n\nfunction Title(props) {\n const SDropdownMenuItem = Root;\n return sstyled(props.styles)(<SDropdownMenuItem render={Flex} variant=\"title\" />);\n}\n\nconst DropdownMenu = createComponent(\n DropdownMenuRoot,\n {\n Trigger: Dropdown.Trigger,\n Popper: Dropdown.Popper,\n List,\n Menu,\n Item: [Item, { Addon }],\n ItemTitle: Title,\n ItemHint: Hint,\n },\n {\n parent: [Dropdown],\n },\n);\n\nexport default DropdownMenu;\n"],"mappings":"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"}
|
package/lib/es6/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './DropdownMenu';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,gBAAxB"}
|
package/package.json
CHANGED
package/src/DropdownMenu.jsx
DELETED
|
@@ -1,250 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import cn from 'classnames';
|
|
3
|
-
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
4
|
-
import Dropdown from '@semcore/dropdown';
|
|
5
|
-
import { Box, Flex, useBox, useFlex } from '@semcore/flex-box';
|
|
6
|
-
import ScrollAreaComponent from '@semcore/scroll-area';
|
|
7
|
-
|
|
8
|
-
import style from './style/dropdown-menu.shadow.css';
|
|
9
|
-
|
|
10
|
-
const KEYS = ['ArrowDown', 'ArrowUp', 'Enter', ' '];
|
|
11
|
-
const INTERACTION_TAGS = ['INPUT', 'TEXTAREA'];
|
|
12
|
-
|
|
13
|
-
class DropdownMenuRoot extends Component {
|
|
14
|
-
static displayName = 'DropdownMenu';
|
|
15
|
-
static style = style;
|
|
16
|
-
|
|
17
|
-
static defaultProps = {
|
|
18
|
-
size: 'm',
|
|
19
|
-
defaultVisible: false,
|
|
20
|
-
defaultHighlightedIndex: null,
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
_items = [];
|
|
24
|
-
|
|
25
|
-
_highlightedItem = null;
|
|
26
|
-
|
|
27
|
-
prevHighlightedIndex = null;
|
|
28
|
-
|
|
29
|
-
uncontrolledProps() {
|
|
30
|
-
return {
|
|
31
|
-
highlightedIndex: null,
|
|
32
|
-
visible: null,
|
|
33
|
-
};
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
handlerKeyDown = (e) => {
|
|
37
|
-
const amount = e.shiftKey ? 5 : 1;
|
|
38
|
-
|
|
39
|
-
if (e.key === ' ' && INTERACTION_TAGS.includes(e.target.tagName)) return;
|
|
40
|
-
if (!KEYS.includes(e.key)) return;
|
|
41
|
-
|
|
42
|
-
e.preventDefault();
|
|
43
|
-
|
|
44
|
-
this.handlers.visible(true);
|
|
45
|
-
|
|
46
|
-
switch (e.key) {
|
|
47
|
-
case 'ArrowDown':
|
|
48
|
-
this.moveHighlightedIndex(amount, e);
|
|
49
|
-
break;
|
|
50
|
-
case 'ArrowUp':
|
|
51
|
-
this.moveHighlightedIndex(-amount, e);
|
|
52
|
-
break;
|
|
53
|
-
case ' ':
|
|
54
|
-
case 'Enter':
|
|
55
|
-
if (this._highlightedItem) this._highlightedItem.click();
|
|
56
|
-
break;
|
|
57
|
-
}
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
getTriggerProps() {
|
|
61
|
-
const { size } = this.asProps;
|
|
62
|
-
return {
|
|
63
|
-
size,
|
|
64
|
-
onKeyDown: this.handlerKeyDown,
|
|
65
|
-
};
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
getListProps() {
|
|
69
|
-
const { size } = this.asProps;
|
|
70
|
-
return {
|
|
71
|
-
size,
|
|
72
|
-
};
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
getPopperProps() {
|
|
76
|
-
return {
|
|
77
|
-
tabIndex: 0,
|
|
78
|
-
onKeyDown: this.handlerKeyDown,
|
|
79
|
-
};
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
getItemProps(props, index) {
|
|
83
|
-
const { size, highlightedIndex } = this.asProps;
|
|
84
|
-
const highlighted = index === highlightedIndex;
|
|
85
|
-
const extraProps = {};
|
|
86
|
-
|
|
87
|
-
this._items.push(props);
|
|
88
|
-
if (highlighted) {
|
|
89
|
-
extraProps.ref = this.scrollToNode;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
return {
|
|
93
|
-
size,
|
|
94
|
-
highlighted,
|
|
95
|
-
...extraProps,
|
|
96
|
-
};
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
getItemHintProps() {
|
|
100
|
-
const { size } = this.asProps;
|
|
101
|
-
return {
|
|
102
|
-
size,
|
|
103
|
-
};
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
getItemTitleProps() {
|
|
107
|
-
const { size } = this.asProps;
|
|
108
|
-
return {
|
|
109
|
-
size,
|
|
110
|
-
};
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
scrollToNode = (node) => {
|
|
114
|
-
this._highlightedItem = node;
|
|
115
|
-
if (node && node.scrollIntoView) {
|
|
116
|
-
if (this.asProps.highlightedIndex !== this.prevHighlightedIndex) {
|
|
117
|
-
this.prevHighlightedIndex = this.asProps.highlightedIndex;
|
|
118
|
-
node.scrollIntoView({
|
|
119
|
-
block: 'nearest',
|
|
120
|
-
inline: 'nearest',
|
|
121
|
-
});
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
};
|
|
125
|
-
|
|
126
|
-
moveHighlightedIndex(amount, e) {
|
|
127
|
-
let { highlightedIndex } = this.asProps;
|
|
128
|
-
const itemsLastIndex = this._items.length - 1;
|
|
129
|
-
const selectedIndex = this._items.findIndex((item) => item.selected);
|
|
130
|
-
|
|
131
|
-
if (itemsLastIndex < 0) return;
|
|
132
|
-
|
|
133
|
-
if (highlightedIndex == null) {
|
|
134
|
-
if (selectedIndex !== -1) {
|
|
135
|
-
highlightedIndex = selectedIndex;
|
|
136
|
-
} else {
|
|
137
|
-
highlightedIndex = amount < 0 ? 0 : itemsLastIndex;
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
let newIndex = highlightedIndex + amount;
|
|
142
|
-
if (newIndex < 0) {
|
|
143
|
-
newIndex = amount + itemsLastIndex + 1;
|
|
144
|
-
} else if (newIndex > itemsLastIndex) {
|
|
145
|
-
newIndex = newIndex - itemsLastIndex - 1;
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
if (this._items[newIndex] && this._items[newIndex].disabled) {
|
|
149
|
-
this.moveHighlightedIndex(amount < 0 ? amount - 1 : amount + 1, e);
|
|
150
|
-
} else {
|
|
151
|
-
this.handlers.highlightedIndex(newIndex, e);
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
componentDidUpdate() {
|
|
156
|
-
const { visible } = this.asProps;
|
|
157
|
-
|
|
158
|
-
if (!visible) {
|
|
159
|
-
this.handlers.highlightedIndex(null);
|
|
160
|
-
}
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
render() {
|
|
164
|
-
const { Children } = this.asProps;
|
|
165
|
-
const props = {};
|
|
166
|
-
|
|
167
|
-
this._items = [];
|
|
168
|
-
|
|
169
|
-
return (
|
|
170
|
-
<Root render={Dropdown} {...props}>
|
|
171
|
-
<Children />
|
|
172
|
-
</Root>
|
|
173
|
-
);
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
function List(props) {
|
|
178
|
-
const SDropdownMenuList = Root;
|
|
179
|
-
return sstyled(props.styles)(
|
|
180
|
-
<SDropdownMenuList render={Box} tag={ScrollAreaComponent} role="menu" />,
|
|
181
|
-
);
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
function Menu() {
|
|
185
|
-
return (
|
|
186
|
-
<DropdownMenu.Popper>
|
|
187
|
-
<Root render={DropdownMenu.List} />
|
|
188
|
-
</DropdownMenu.Popper>
|
|
189
|
-
);
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
function Item(props) {
|
|
193
|
-
const [SDropdownMenuItem, { className, ...other }] = useFlex(props, props.forwardRef);
|
|
194
|
-
const styles = sstyled(props.styles);
|
|
195
|
-
return (
|
|
196
|
-
<SDropdownMenuItem
|
|
197
|
-
role="menuitem"
|
|
198
|
-
tabIndex={-1}
|
|
199
|
-
className={
|
|
200
|
-
cn(
|
|
201
|
-
styles.cn('SDropdownMenuItem', {
|
|
202
|
-
...props,
|
|
203
|
-
highlighted: !props.disabled && props.highlighted,
|
|
204
|
-
}).className,
|
|
205
|
-
className,
|
|
206
|
-
) || undefined
|
|
207
|
-
}
|
|
208
|
-
{...other}
|
|
209
|
-
/>
|
|
210
|
-
);
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
function Addon(props) {
|
|
214
|
-
const [SDropdownMenuItemAddon, { className, ...other }] = useBox(props, props.forwardRef);
|
|
215
|
-
const styles = sstyled(props.styles);
|
|
216
|
-
return (
|
|
217
|
-
<SDropdownMenuItemAddon
|
|
218
|
-
className={cn(styles.cn('SDropdownMenuItemAddon', props).className, className) || undefined}
|
|
219
|
-
{...other}
|
|
220
|
-
/>
|
|
221
|
-
);
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
function Hint(props) {
|
|
225
|
-
const SDropdownMenuItem = Root;
|
|
226
|
-
return sstyled(props.styles)(<SDropdownMenuItem render={Flex} variant="hint" />);
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
function Title(props) {
|
|
230
|
-
const SDropdownMenuItem = Root;
|
|
231
|
-
return sstyled(props.styles)(<SDropdownMenuItem render={Flex} variant="title" />);
|
|
232
|
-
}
|
|
233
|
-
|
|
234
|
-
const DropdownMenu = createComponent(
|
|
235
|
-
DropdownMenuRoot,
|
|
236
|
-
{
|
|
237
|
-
Trigger: Dropdown.Trigger,
|
|
238
|
-
Popper: Dropdown.Popper,
|
|
239
|
-
List,
|
|
240
|
-
Menu,
|
|
241
|
-
Item: [Item, { Addon }],
|
|
242
|
-
ItemTitle: Title,
|
|
243
|
-
ItemHint: Hint,
|
|
244
|
-
},
|
|
245
|
-
{
|
|
246
|
-
parent: [Dropdown],
|
|
247
|
-
},
|
|
248
|
-
);
|
|
249
|
-
|
|
250
|
-
export default DropdownMenu;
|
package/src/index.d.ts
DELETED
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
|
|
2
|
-
import Dropdown, { IDropdownContext, IDropdownProps, IDropdownHandlers } from '@semcore/dropdown';
|
|
3
|
-
import { Box, IBoxProps, IFlexProps } from '@semcore/flex-box';
|
|
4
|
-
import { IScrollAreaProps } from '@semcore/scroll-area';
|
|
5
|
-
|
|
6
|
-
export type DropdownMenuSize = 'm' | 'l';
|
|
7
|
-
|
|
8
|
-
export interface IDropdownMenuProps extends IDropdownProps {
|
|
9
|
-
/**
|
|
10
|
-
* Size of the menu
|
|
11
|
-
* @default m
|
|
12
|
-
*/
|
|
13
|
-
size?: DropdownMenuSize;
|
|
14
|
-
/**
|
|
15
|
-
* Index of the element selected by default
|
|
16
|
-
*/
|
|
17
|
-
defaultHighlightedIndex?: number;
|
|
18
|
-
/**
|
|
19
|
-
* Index of the selected item
|
|
20
|
-
*/
|
|
21
|
-
highlightedIndex?: number;
|
|
22
|
-
/**
|
|
23
|
-
* Callback for highlightedIndex change
|
|
24
|
-
* highlightedIndex - Index of the selected item
|
|
25
|
-
*/
|
|
26
|
-
onHighlightedIndexChange?: (highlightedIndex: number) => void;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
export interface IDropdownMenuListProps extends IBoxProps, IScrollAreaProps {
|
|
30
|
-
/**
|
|
31
|
-
* Size of the menu
|
|
32
|
-
* @default m
|
|
33
|
-
*/
|
|
34
|
-
size?: DropdownMenuSize;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
export interface IDropdownMenuMenuProps extends IDropdownMenuListProps {}
|
|
38
|
-
|
|
39
|
-
export interface IDropdownMenuItemProps extends IFlexProps {
|
|
40
|
-
/**
|
|
41
|
-
* Enables selected state
|
|
42
|
-
*/
|
|
43
|
-
selected?: boolean;
|
|
44
|
-
/**
|
|
45
|
-
* Disables the component
|
|
46
|
-
*/
|
|
47
|
-
disabled?: boolean;
|
|
48
|
-
/**
|
|
49
|
-
* Adds focus styles around
|
|
50
|
-
*/
|
|
51
|
-
highlighted?: boolean;
|
|
52
|
-
/**
|
|
53
|
-
* Makes the element non-interactive
|
|
54
|
-
*/
|
|
55
|
-
notInteractive?: boolean;
|
|
56
|
-
/**
|
|
57
|
-
* Size of the component
|
|
58
|
-
* @default m
|
|
59
|
-
*/
|
|
60
|
-
size?: DropdownMenuSize;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
export interface IDropdownMenuItemHintProps extends IFlexProps {
|
|
64
|
-
/**
|
|
65
|
-
* Size of the component
|
|
66
|
-
* @default m
|
|
67
|
-
*/
|
|
68
|
-
size?: DropdownMenuSize;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
export interface IDropdownMenuItemTitleProps extends IFlexProps {
|
|
72
|
-
/**
|
|
73
|
-
* Size of the component
|
|
74
|
-
* @default m
|
|
75
|
-
*/
|
|
76
|
-
size?: DropdownMenuSize;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
export interface IDropdownMenuContext extends IDropdownContext {
|
|
80
|
-
getListProps: PropGetterFn;
|
|
81
|
-
getItemProps: PropGetterFn;
|
|
82
|
-
getItemHintProps: PropGetterFn;
|
|
83
|
-
getItemTitleProps: PropGetterFn;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
export interface IDropdownMenuHandlers extends IDropdownHandlers {
|
|
87
|
-
highlightedIndex: (index: number) => void;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
declare const DropdownMenu: (<T>(
|
|
91
|
-
props: CProps<IDropdownMenuProps & T, IDropdownMenuContext, IDropdownMenuHandlers>,
|
|
92
|
-
) => ReturnEl) & {
|
|
93
|
-
Trigger: typeof Dropdown.Trigger;
|
|
94
|
-
Popper: typeof Dropdown.Popper;
|
|
95
|
-
List: <T>(
|
|
96
|
-
props: CProps<IDropdownMenuListProps & T, IDropdownMenuContext, IDropdownMenuHandlers>,
|
|
97
|
-
) => ReturnEl;
|
|
98
|
-
Menu: <T>(
|
|
99
|
-
props: CProps<IDropdownMenuMenuProps & T, IDropdownMenuContext, IDropdownMenuHandlers>,
|
|
100
|
-
) => ReturnEl;
|
|
101
|
-
Item: (<T>(
|
|
102
|
-
props: CProps<IDropdownMenuItemProps & T, IDropdownMenuContext, IDropdownMenuHandlers>,
|
|
103
|
-
) => ReturnEl) & {
|
|
104
|
-
Addon: typeof Box;
|
|
105
|
-
};
|
|
106
|
-
ItemTitle: <T>(props: IDropdownMenuItemTitleProps & T) => ReturnEl;
|
|
107
|
-
ItemHint: <T>(props: IDropdownMenuItemHintProps & T) => ReturnEl;
|
|
108
|
-
};
|
|
109
|
-
|
|
110
|
-
export default DropdownMenu;
|
package/src/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './DropdownMenu';
|
|
@@ -1,109 +0,0 @@
|
|
|
1
|
-
@import '@semcore/utils/style/var.css';
|
|
2
|
-
|
|
3
|
-
SDropdownMenuList {
|
|
4
|
-
max-height: 240px;
|
|
5
|
-
margin: 4px 0;
|
|
6
|
-
padding: 0;
|
|
7
|
-
position: relative;
|
|
8
|
-
min-height: 26px;
|
|
9
|
-
min-width: 32px;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
SDropdownMenuItem {
|
|
13
|
-
display: flex;
|
|
14
|
-
align-items: center;
|
|
15
|
-
position: relative;
|
|
16
|
-
text-decoration: none;
|
|
17
|
-
box-sizing: border-box;
|
|
18
|
-
cursor: pointer;
|
|
19
|
-
width: 100%;
|
|
20
|
-
text-align: left;
|
|
21
|
-
line-height: normal;
|
|
22
|
-
|
|
23
|
-
&:hover {
|
|
24
|
-
background-color: var(--gray-50);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
&:focus {
|
|
28
|
-
outline: none;
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
SDropdownMenuItem[highlighted] {
|
|
33
|
-
z-index: 1;
|
|
34
|
-
box-shadow: var(--keyboard-focus) inset;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
SDropdownMenuItem[selected] {
|
|
38
|
-
background-color: color-mod(var(--blue-100) a(70%));
|
|
39
|
-
|
|
40
|
-
&:hover {
|
|
41
|
-
background-color: var(--blue-100);
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
SDropdownMenuItem[disabled] {
|
|
46
|
-
opacity: var(--disabled-opacity);
|
|
47
|
-
cursor: default;
|
|
48
|
-
pointer-events: none;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
SDropdownMenuItem[size='l'] {
|
|
52
|
-
font-size: var(--fs-300);
|
|
53
|
-
line-height: var(--lh-300);
|
|
54
|
-
padding: 8px 12px;
|
|
55
|
-
min-height: 40px;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
SDropdownMenuItem[size='m'] {
|
|
59
|
-
font-size: var(--fs-200);
|
|
60
|
-
line-height: var(--lh-200);
|
|
61
|
-
padding: 6px 8px;
|
|
62
|
-
min-height: 32px;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
SDropdownMenuItem[notInteractive] {
|
|
66
|
-
cursor: default;
|
|
67
|
-
|
|
68
|
-
&:hover {
|
|
69
|
-
background: none;
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
SDropdownMenuItem[variant='hint'] {
|
|
74
|
-
color: var(--gray-500);
|
|
75
|
-
cursor: default;
|
|
76
|
-
|
|
77
|
-
&:hover {
|
|
78
|
-
background: none;
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
SDropdownMenuItem[variant='title'] {
|
|
83
|
-
font-weight: bold;
|
|
84
|
-
cursor: default;
|
|
85
|
-
|
|
86
|
-
&:hover {
|
|
87
|
-
background: none;
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
SDropdownMenuItemAddon {
|
|
92
|
-
display: inline-flex;
|
|
93
|
-
margin-left: 8px;
|
|
94
|
-
margin-right: 8px;
|
|
95
|
-
|
|
96
|
-
&:first-child {
|
|
97
|
-
margin-left: 0;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
&:last-child {
|
|
101
|
-
margin-right: 0;
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
SPopper {
|
|
106
|
-
&:focus {
|
|
107
|
-
box-shadow: var(--keyboard-focus);
|
|
108
|
-
}
|
|
109
|
-
}
|