@semcore/dropdown-menu 3.3.4 → 3.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/lib/cjs/DropdownMenu.js +35 -17
- package/lib/cjs/DropdownMenu.js.map +1 -1
- package/lib/cjs/style/dropdown-menu.shadow.css +1 -2
- package/lib/cjs/style/scroll-area.shadow.css +61 -0
- package/lib/es6/DropdownMenu.js +37 -18
- package/lib/es6/DropdownMenu.js.map +1 -1
- package/lib/es6/style/dropdown-menu.shadow.css +1 -2
- package/lib/es6/style/scroll-area.shadow.css +61 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [3.4.1] - 2022-11-30
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/dropdown` [3.2.5 ~> 3.2.6], `@semcore/flex-box` [4.6.4 ~> 4.6.5], `@semcore/utils` [3.41.0 ~> 3.42.0]).
|
|
10
|
+
|
|
11
|
+
## [3.4.0] - 2022-11-30
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- Due to the effect of cutting off the last line, it was decided to add a shadow to the container (`DropdownMenu.List`) when scrolling.
|
|
16
|
+
- Changed `margin` to `padding` to make the scrollbar look better.
|
|
17
|
+
|
|
5
18
|
## [3.3.4] - 2022-11-28
|
|
6
19
|
|
|
7
20
|
### Changed
|
package/lib/cjs/DropdownMenu.js
CHANGED
|
@@ -63,23 +63,40 @@ var style = (
|
|
|
63
63
|
/*__reshadow_css_start__*/
|
|
64
64
|
_core.sstyled.insert(
|
|
65
65
|
/*__inner_css_start__*/
|
|
66
|
-
".
|
|
66
|
+
".___SDropdownMenuList_kv7q5_gg_{max-height:240px;padding:4px 0;position:relative;min-height:26px;min-width:32px}.___SDropdownMenuItem_kv7q5_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_kv7q5_gg_:hover{background-color:#f4f5f9}.___SDropdownMenuItem_kv7q5_gg_:focus{outline:none}.___SDropdownMenuItem_kv7q5_gg_.__highlighted_kv7q5_gg_{z-index:1;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.3) inset}.___SDropdownMenuItem_kv7q5_gg_.__selected_kv7q5_gg_{background-color:rgba(196,229,254,.7)}.___SDropdownMenuItem_kv7q5_gg_.__selected_kv7q5_gg_:hover{background-color:#c4e5fe}.___SDropdownMenuItem_kv7q5_gg_.__disabled_kv7q5_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SDropdownMenuItem_kv7q5_gg_._size_l_kv7q5_gg_{font-size:16px;line-height:1.5;padding:8px 12px;min-height:40px}.___SDropdownMenuItem_kv7q5_gg_._size_m_kv7q5_gg_{font-size:14px;line-height:1.42;padding:6px 8px;min-height:32px}.___SDropdownMenuItem_kv7q5_gg_.__notInteractive_kv7q5_gg_{cursor:default}.___SDropdownMenuItem_kv7q5_gg_.__notInteractive_kv7q5_gg_:hover{background:none}.___SDropdownMenuItem_kv7q5_gg_._variant_hint_kv7q5_gg_{color:#6c6e79;cursor:default}.___SDropdownMenuItem_kv7q5_gg_._variant_hint_kv7q5_gg_:hover{background:none}.___SDropdownMenuItem_kv7q5_gg_._variant_title_kv7q5_gg_{font-weight:700;cursor:default}.___SDropdownMenuItem_kv7q5_gg_._variant_title_kv7q5_gg_:hover{background:none}.___SDropdownMenuItemAddon_kv7q5_gg_{display:inline-flex;margin-left:8px;margin-right:8px}.___SDropdownMenuItemAddon_kv7q5_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_kv7q5_gg_:last-child{margin-right:0}.___SPopper_kv7q5_gg_:focus{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.3)}"
|
|
67
67
|
/*__inner_css_end__*/
|
|
68
|
-
, "
|
|
68
|
+
, "kv7q5_gg_")
|
|
69
69
|
/*__reshadow_css_end__*/
|
|
70
70
|
, {
|
|
71
|
-
"__SDropdownMenuList": "
|
|
72
|
-
"__SDropdownMenuItem": "
|
|
73
|
-
"_highlighted": "
|
|
74
|
-
"_selected": "
|
|
75
|
-
"_disabled": "
|
|
76
|
-
"_size_l": "
|
|
77
|
-
"_size_m": "
|
|
78
|
-
"_notInteractive": "
|
|
79
|
-
"_variant_hint": "
|
|
80
|
-
"_variant_title": "
|
|
81
|
-
"__SDropdownMenuItemAddon": "
|
|
82
|
-
"__SPopper": "
|
|
71
|
+
"__SDropdownMenuList": "___SDropdownMenuList_kv7q5_gg_",
|
|
72
|
+
"__SDropdownMenuItem": "___SDropdownMenuItem_kv7q5_gg_",
|
|
73
|
+
"_highlighted": "__highlighted_kv7q5_gg_",
|
|
74
|
+
"_selected": "__selected_kv7q5_gg_",
|
|
75
|
+
"_disabled": "__disabled_kv7q5_gg_",
|
|
76
|
+
"_size_l": "_size_l_kv7q5_gg_",
|
|
77
|
+
"_size_m": "_size_m_kv7q5_gg_",
|
|
78
|
+
"_notInteractive": "__notInteractive_kv7q5_gg_",
|
|
79
|
+
"_variant_hint": "_variant_hint_kv7q5_gg_",
|
|
80
|
+
"_variant_title": "_variant_title_kv7q5_gg_",
|
|
81
|
+
"__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_kv7q5_gg_",
|
|
82
|
+
"__SPopper": "___SPopper_kv7q5_gg_"
|
|
83
|
+
});
|
|
84
|
+
|
|
85
|
+
/*__reshadow-styles__:"./style/scroll-area.shadow.css"*/
|
|
86
|
+
var scrollStyles = (
|
|
87
|
+
/*__reshadow_css_start__*/
|
|
88
|
+
_core.sstyled.insert(
|
|
89
|
+
/*__inner_css_start__*/
|
|
90
|
+
".___SShadowHorizontal_1lt5z_gg_:after,.___SShadowHorizontal_1lt5z_gg_:before{width:9px;height:100%;border-radius:6px}.___SShadowHorizontal_1lt5z_gg_._position_median_1lt5z_gg_:before{background:linear-gradient(90deg,#fff 34.38%,hsla(0,0%,100%,0))}.___SShadowHorizontal_1lt5z_gg_._position_median_1lt5z_gg_:after{background:linear-gradient(270deg,#fff 34.38%,hsla(0,0%,100%,0))}.___SShadowHorizontal_1lt5z_gg_._position_start_1lt5z_gg_:before{background:linear-gradient(90deg,#fff 34.38%,hsla(0,0%,100%,0))}.___SShadowHorizontal_1lt5z_gg_._position_end_1lt5z_gg_:after{background:linear-gradient(270deg,#fff 34.38%,hsla(0,0%,100%,0))}.___SShadowVertical_1lt5z_gg_:after,.___SShadowVertical_1lt5z_gg_:before{width:100%;height:9px;border-radius:6px}.___SShadowVertical_1lt5z_gg_._position_median_1lt5z_gg_:before{background:linear-gradient(180deg,#fff 34.38%,hsla(0,0%,100%,0))}.___SShadowVertical_1lt5z_gg_._position_median_1lt5z_gg_:after{background:linear-gradient(0deg,#fff 34.38%,hsla(0,0%,100%,0))}.___SShadowVertical_1lt5z_gg_._position_start_1lt5z_gg_:before{background:linear-gradient(180deg,#fff 34.38%,hsla(0,0%,100%,0))}.___SShadowVertical_1lt5z_gg_._position_end_1lt5z_gg_:after{background:linear-gradient(0deg,#fff 34.38%,hsla(0,0%,100%,0))}"
|
|
91
|
+
/*__inner_css_end__*/
|
|
92
|
+
, "1lt5z_gg_")
|
|
93
|
+
/*__reshadow_css_end__*/
|
|
94
|
+
, {
|
|
95
|
+
"__SShadowHorizontal": "___SShadowHorizontal_1lt5z_gg_",
|
|
96
|
+
"_position_median": "_position_median_1lt5z_gg_",
|
|
97
|
+
"_position_start": "_position_start_1lt5z_gg_",
|
|
98
|
+
"_position_end": "_position_end_1lt5z_gg_",
|
|
99
|
+
"__SShadowVertical": "___SShadowVertical_1lt5z_gg_"
|
|
83
100
|
});
|
|
84
101
|
var KEYS = ['ArrowDown', 'ArrowUp', 'Enter', ' '];
|
|
85
102
|
var INTERACTION_TAGS = ['INPUT', 'TEXTAREA'];
|
|
@@ -299,11 +316,12 @@ function List(props) {
|
|
|
299
316
|
var _ref2 = arguments[0],
|
|
300
317
|
_ref7;
|
|
301
318
|
|
|
302
|
-
var SDropdownMenuList =
|
|
319
|
+
var SDropdownMenuList = _scrollArea["default"];
|
|
303
320
|
return _ref7 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SDropdownMenuList, _ref7.cn("SDropdownMenuList", _objectSpread({}, (0, _core.assignProps)({
|
|
304
|
-
"tag": _scrollArea["default"],
|
|
305
321
|
"role": "menu",
|
|
306
|
-
"aria-activedescendant": props.index
|
|
322
|
+
"aria-activedescendant": props.index,
|
|
323
|
+
"shadow": true,
|
|
324
|
+
"styles": scrollStyles
|
|
307
325
|
}, _ref2))));
|
|
308
326
|
}
|
|
309
327
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenu.js","names":["KEYS","INTERACTION_TAGS","DropdownMenuRoot","React","createRef","e","amount","shiftKey","key","includes","target","tagName","preventDefault","handlers","visible","moveHighlightedIndex","highlightedItemRef","current","click","node","scrollIntoView","asProps","highlightedIndex","prevHighlightedIndex","block","inline","size","uid","disablePortal","id","undefined","onKeyDown","handlerKeyDown","index","tabIndex","props","highlighted","extraProps","itemProps","push","ref","scrollToNode","itemsLastIndex","length","selectedIndex","findIndex","item","selected","newIndex","disabled","setTimeout","focus","Children","Dropdown","Component","style","uniqueIDEnhancement","defaultVisible","defaultHighlightedIndex","List","SDropdownMenuList","Box","sstyled","styles","ScrollAreaComponent","Menu","DropdownMenu","Item","useFlex","forwardRef","SDropdownMenuItem","className","other","label","cn","Addon","useBox","SDropdownMenuItemAddon","Hint","Flex","Title","Trigger","createComponent","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';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\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 static enhance = [uniqueIDEnhancement()];\n\n static defaultProps = {\n size: 'm',\n defaultVisible: false,\n defaultHighlightedIndex: null,\n };\n\n itemProps = [];\n\n highlightedItemRef = React.createRef();\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.highlightedItemRef.current) this.highlightedItemRef.current.click();\n break;\n }\n };\n\n getTriggerProps() {\n const { size, uid, disablePortal, visible } = this.asProps;\n\n return {\n size,\n id: `igc-${uid}-trigger`,\n 'aria-controls': visible ? `igc-${uid}-popper` : undefined,\n 'aria-flowto': visible && !disablePortal ? `igc-${uid}-popper` : undefined,\n 'aria-label': visible && !disablePortal ? `Press Tab to go to popover` : undefined,\n onKeyDown: this.handlerKeyDown,\n };\n }\n\n getListProps() {\n const { size } = this.asProps;\n return {\n size,\n index: this.asProps.highlightedIndex,\n };\n }\n\n getPopperProps() {\n const { uid, disablePortal } = this.asProps;\n\n return {\n tabIndex: 0,\n onKeyDown: this.handlerKeyDown,\n id: `igc-${uid}-popper`,\n 'aria-flowto': !disablePortal ? `igc-${uid}-trigger` : undefined,\n };\n }\n\n getItemProps(props, index) {\n const { size, highlightedIndex } = this.asProps;\n const highlighted = index === highlightedIndex;\n const extraProps = {};\n\n this.itemProps.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.highlightedItemRef.current = 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.itemProps.length - 1;\n const selectedIndex = this.itemProps.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.itemProps[newIndex] && this.itemProps[newIndex].disabled) {\n this.moveHighlightedIndex(amount < 0 ? amount - 1 : amount + 1, e);\n } else {\n this.handlers.highlightedIndex(newIndex, e);\n setTimeout(() => {\n this.highlightedItemRef.current?.focus();\n }, 0);\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.itemProps = [];\n\n return (\n <Root render={Dropdown} {...props}>\n <Children />\n </Root>\n );\n }\n}\n\nfunction List(props) {\n const SDropdownMenuList = Root;\n\n return sstyled(props.styles)(\n <SDropdownMenuList\n render={Box}\n tag={ScrollAreaComponent}\n role=\"menu\"\n aria-activedescendant={props.index}\n />,\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={0}\n id={props.label}\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)(\n <SDropdownMenuItem render={Flex} variant=\"hint\" role=\"menuitem\" tabIndex={0} />,\n );\n}\n\nfunction Title(props) {\n const SDropdownMenuItem = Root;\n return sstyled(props.styles)(\n <SDropdownMenuItem render={Flex} variant=\"title\" role=\"menuitem\" tabIndex={0} />,\n );\n}\n\nfunction Trigger() {\n return <Root render={Dropdown.Trigger} aria-haspopup=\"true\" />;\n}\n\nconst DropdownMenu = createComponent(\n DropdownMenuRoot,\n {\n 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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"}
|
|
1
|
+
{"version":3,"file":"DropdownMenu.js","names":["KEYS","INTERACTION_TAGS","DropdownMenuRoot","React","createRef","e","amount","shiftKey","key","includes","target","tagName","preventDefault","handlers","visible","moveHighlightedIndex","highlightedItemRef","current","click","node","scrollIntoView","asProps","highlightedIndex","prevHighlightedIndex","block","inline","size","uid","disablePortal","id","undefined","onKeyDown","handlerKeyDown","index","tabIndex","props","highlighted","extraProps","itemProps","push","ref","scrollToNode","itemsLastIndex","length","selectedIndex","findIndex","item","selected","newIndex","disabled","setTimeout","focus","Children","Dropdown","Component","style","uniqueIDEnhancement","defaultVisible","defaultHighlightedIndex","List","SDropdownMenuList","ScrollAreaComponent","sstyled","styles","scrollStyles","Menu","DropdownMenu","Item","useFlex","forwardRef","SDropdownMenuItem","className","other","label","cn","Addon","useBox","SDropdownMenuItemAddon","Hint","Flex","Title","Trigger","createComponent","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 { Flex, useBox, useFlex } from '@semcore/flex-box';\nimport ScrollAreaComponent from '@semcore/scroll-area';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\n\nimport style from './style/dropdown-menu.shadow.css';\nimport scrollStyles from './style/scroll-area.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 static enhance = [uniqueIDEnhancement()];\n\n static defaultProps = {\n size: 'm',\n defaultVisible: false,\n defaultHighlightedIndex: null,\n };\n\n itemProps = [];\n\n highlightedItemRef = React.createRef();\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.highlightedItemRef.current) this.highlightedItemRef.current.click();\n break;\n }\n };\n\n getTriggerProps() {\n const { size, uid, disablePortal, visible } = this.asProps;\n\n return {\n size,\n id: `igc-${uid}-trigger`,\n 'aria-controls': visible ? `igc-${uid}-popper` : undefined,\n 'aria-flowto': visible && !disablePortal ? `igc-${uid}-popper` : undefined,\n 'aria-label': visible && !disablePortal ? `Press Tab to go to popover` : undefined,\n onKeyDown: this.handlerKeyDown,\n };\n }\n\n getListProps() {\n const { size } = this.asProps;\n return {\n size,\n index: this.asProps.highlightedIndex,\n };\n }\n\n getPopperProps() {\n const { uid, disablePortal } = this.asProps;\n\n return {\n tabIndex: 0,\n onKeyDown: this.handlerKeyDown,\n id: `igc-${uid}-popper`,\n 'aria-flowto': !disablePortal ? `igc-${uid}-trigger` : undefined,\n };\n }\n\n getItemProps(props, index) {\n const { size, highlightedIndex } = this.asProps;\n const highlighted = index === highlightedIndex;\n const extraProps = {};\n\n this.itemProps.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.highlightedItemRef.current = 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.itemProps.length - 1;\n const selectedIndex = this.itemProps.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.itemProps[newIndex] && this.itemProps[newIndex].disabled) {\n this.moveHighlightedIndex(amount < 0 ? amount - 1 : amount + 1, e);\n } else {\n this.handlers.highlightedIndex(newIndex, e);\n setTimeout(() => {\n this.highlightedItemRef.current?.focus();\n }, 0);\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.itemProps = [];\n\n return (\n <Root render={Dropdown} {...props}>\n <Children />\n </Root>\n );\n }\n}\n\nfunction List(props) {\n const SDropdownMenuList = Root;\n\n return sstyled(props.styles)(\n <SDropdownMenuList\n render={ScrollAreaComponent}\n role=\"menu\"\n aria-activedescendant={props.index}\n shadow={true}\n styles={scrollStyles}\n />,\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={0}\n id={props.label}\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)(\n <SDropdownMenuItem render={Flex} variant=\"hint\" role=\"menuitem\" tabIndex={0} />,\n );\n}\n\nfunction Title(props) {\n const SDropdownMenuItem = Root;\n return sstyled(props.styles)(\n <SDropdownMenuItem render={Flex} variant=\"title\" role=\"menuitem\" tabIndex={0} />,\n );\n}\n\nfunction Trigger() {\n return <Root render={Dropdown.Trigger} aria-haspopup=\"true\" />;\n}\n\nconst DropdownMenu = createComponent(\n DropdownMenuRoot,\n {\n 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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"}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
SShadowHorizontal {
|
|
2
|
+
&:before,
|
|
3
|
+
&:after {
|
|
4
|
+
width: 9px;
|
|
5
|
+
height: 100%;
|
|
6
|
+
border-radius: 6px;
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
SShadowHorizontal[position='median'] {
|
|
11
|
+
&:before {
|
|
12
|
+
background: linear-gradient(to right, #ffffff 34.38%, rgba(255, 255, 255, 0) 100%);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
&:after {
|
|
16
|
+
background: linear-gradient(to left, #ffffff 34.38%, rgba(255, 255, 255, 0) 100%);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
SShadowHorizontal[position='start'] {
|
|
21
|
+
&:before {
|
|
22
|
+
background: linear-gradient(to right, #ffffff 34.38%, rgba(255, 255, 255, 0) 100%);
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
SShadowHorizontal[position='end'] {
|
|
27
|
+
&:after {
|
|
28
|
+
background: linear-gradient(to left, #ffffff 34.38%, rgba(255, 255, 255, 0) 100%);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
SShadowVertical {
|
|
33
|
+
&:before,
|
|
34
|
+
&:after {
|
|
35
|
+
width: 100%;
|
|
36
|
+
height: 9px;
|
|
37
|
+
border-radius: 6px;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
SShadowVertical[position='median'] {
|
|
42
|
+
&:before {
|
|
43
|
+
background: linear-gradient(to bottom, #ffffff 34.38%, rgba(255, 255, 255, 0) 100%);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
&:after {
|
|
47
|
+
background: linear-gradient(to top, #ffffff 34.38%, rgba(255, 255, 255, 0) 100%);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
SShadowVertical[position='start'] {
|
|
52
|
+
&:before {
|
|
53
|
+
background: linear-gradient(to bottom, #ffffff 34.38%, rgba(255, 255, 255, 0) 100%);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
SShadowVertical[position='end'] {
|
|
58
|
+
&:after {
|
|
59
|
+
background: linear-gradient(to top, #ffffff 34.38%, rgba(255, 255, 255, 0) 100%);
|
|
60
|
+
}
|
|
61
|
+
}
|
package/lib/es6/DropdownMenu.js
CHANGED
|
@@ -8,6 +8,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
|
|
|
8
8
|
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
9
9
|
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
10
10
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
11
|
+
import { sstyled as _sstyled2 } from "@semcore/core";
|
|
11
12
|
import { sstyled as _sstyled } from "@semcore/core";
|
|
12
13
|
import { assignProps as _assignProps6 } from "@semcore/core";
|
|
13
14
|
import { assignProps as _assignProps5 } from "@semcore/core";
|
|
@@ -30,7 +31,7 @@ import React from 'react';
|
|
|
30
31
|
import cn from 'classnames';
|
|
31
32
|
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
32
33
|
import Dropdown from '@semcore/dropdown';
|
|
33
|
-
import {
|
|
34
|
+
import { Flex, useBox, useFlex } from '@semcore/flex-box';
|
|
34
35
|
import ScrollAreaComponent from '@semcore/scroll-area';
|
|
35
36
|
import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
|
|
36
37
|
|
|
@@ -39,23 +40,40 @@ var style = (
|
|
|
39
40
|
/*__reshadow_css_start__*/
|
|
40
41
|
_sstyled.insert(
|
|
41
42
|
/*__inner_css_start__*/
|
|
42
|
-
".
|
|
43
|
+
".___SDropdownMenuList_kv7q5_gg_{max-height:240px;padding:4px 0;position:relative;min-height:26px;min-width:32px}.___SDropdownMenuItem_kv7q5_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_kv7q5_gg_:hover{background-color:#f4f5f9}.___SDropdownMenuItem_kv7q5_gg_:focus{outline:none}.___SDropdownMenuItem_kv7q5_gg_.__highlighted_kv7q5_gg_{z-index:1;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.3) inset}.___SDropdownMenuItem_kv7q5_gg_.__selected_kv7q5_gg_{background-color:rgba(196,229,254,.7)}.___SDropdownMenuItem_kv7q5_gg_.__selected_kv7q5_gg_:hover{background-color:#c4e5fe}.___SDropdownMenuItem_kv7q5_gg_.__disabled_kv7q5_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SDropdownMenuItem_kv7q5_gg_._size_l_kv7q5_gg_{font-size:16px;line-height:1.5;padding:8px 12px;min-height:40px}.___SDropdownMenuItem_kv7q5_gg_._size_m_kv7q5_gg_{font-size:14px;line-height:1.42;padding:6px 8px;min-height:32px}.___SDropdownMenuItem_kv7q5_gg_.__notInteractive_kv7q5_gg_{cursor:default}.___SDropdownMenuItem_kv7q5_gg_.__notInteractive_kv7q5_gg_:hover{background:none}.___SDropdownMenuItem_kv7q5_gg_._variant_hint_kv7q5_gg_{color:#6c6e79;cursor:default}.___SDropdownMenuItem_kv7q5_gg_._variant_hint_kv7q5_gg_:hover{background:none}.___SDropdownMenuItem_kv7q5_gg_._variant_title_kv7q5_gg_{font-weight:700;cursor:default}.___SDropdownMenuItem_kv7q5_gg_._variant_title_kv7q5_gg_:hover{background:none}.___SDropdownMenuItemAddon_kv7q5_gg_{display:inline-flex;margin-left:8px;margin-right:8px}.___SDropdownMenuItemAddon_kv7q5_gg_:first-child{margin-left:0}.___SDropdownMenuItemAddon_kv7q5_gg_:last-child{margin-right:0}.___SPopper_kv7q5_gg_:focus{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.3)}"
|
|
43
44
|
/*__inner_css_end__*/
|
|
44
|
-
, "
|
|
45
|
+
, "kv7q5_gg_")
|
|
45
46
|
/*__reshadow_css_end__*/
|
|
46
47
|
, {
|
|
47
|
-
"__SDropdownMenuList": "
|
|
48
|
-
"__SDropdownMenuItem": "
|
|
49
|
-
"_highlighted": "
|
|
50
|
-
"_selected": "
|
|
51
|
-
"_disabled": "
|
|
52
|
-
"_size_l": "
|
|
53
|
-
"_size_m": "
|
|
54
|
-
"_notInteractive": "
|
|
55
|
-
"_variant_hint": "
|
|
56
|
-
"_variant_title": "
|
|
57
|
-
"__SDropdownMenuItemAddon": "
|
|
58
|
-
"__SPopper": "
|
|
48
|
+
"__SDropdownMenuList": "___SDropdownMenuList_kv7q5_gg_",
|
|
49
|
+
"__SDropdownMenuItem": "___SDropdownMenuItem_kv7q5_gg_",
|
|
50
|
+
"_highlighted": "__highlighted_kv7q5_gg_",
|
|
51
|
+
"_selected": "__selected_kv7q5_gg_",
|
|
52
|
+
"_disabled": "__disabled_kv7q5_gg_",
|
|
53
|
+
"_size_l": "_size_l_kv7q5_gg_",
|
|
54
|
+
"_size_m": "_size_m_kv7q5_gg_",
|
|
55
|
+
"_notInteractive": "__notInteractive_kv7q5_gg_",
|
|
56
|
+
"_variant_hint": "_variant_hint_kv7q5_gg_",
|
|
57
|
+
"_variant_title": "_variant_title_kv7q5_gg_",
|
|
58
|
+
"__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_kv7q5_gg_",
|
|
59
|
+
"__SPopper": "___SPopper_kv7q5_gg_"
|
|
60
|
+
});
|
|
61
|
+
|
|
62
|
+
/*__reshadow-styles__:"./style/scroll-area.shadow.css"*/
|
|
63
|
+
var scrollStyles = (
|
|
64
|
+
/*__reshadow_css_start__*/
|
|
65
|
+
_sstyled2.insert(
|
|
66
|
+
/*__inner_css_start__*/
|
|
67
|
+
".___SShadowHorizontal_1lt5z_gg_:after,.___SShadowHorizontal_1lt5z_gg_:before{width:9px;height:100%;border-radius:6px}.___SShadowHorizontal_1lt5z_gg_._position_median_1lt5z_gg_:before{background:linear-gradient(90deg,#fff 34.38%,hsla(0,0%,100%,0))}.___SShadowHorizontal_1lt5z_gg_._position_median_1lt5z_gg_:after{background:linear-gradient(270deg,#fff 34.38%,hsla(0,0%,100%,0))}.___SShadowHorizontal_1lt5z_gg_._position_start_1lt5z_gg_:before{background:linear-gradient(90deg,#fff 34.38%,hsla(0,0%,100%,0))}.___SShadowHorizontal_1lt5z_gg_._position_end_1lt5z_gg_:after{background:linear-gradient(270deg,#fff 34.38%,hsla(0,0%,100%,0))}.___SShadowVertical_1lt5z_gg_:after,.___SShadowVertical_1lt5z_gg_:before{width:100%;height:9px;border-radius:6px}.___SShadowVertical_1lt5z_gg_._position_median_1lt5z_gg_:before{background:linear-gradient(180deg,#fff 34.38%,hsla(0,0%,100%,0))}.___SShadowVertical_1lt5z_gg_._position_median_1lt5z_gg_:after{background:linear-gradient(0deg,#fff 34.38%,hsla(0,0%,100%,0))}.___SShadowVertical_1lt5z_gg_._position_start_1lt5z_gg_:before{background:linear-gradient(180deg,#fff 34.38%,hsla(0,0%,100%,0))}.___SShadowVertical_1lt5z_gg_._position_end_1lt5z_gg_:after{background:linear-gradient(0deg,#fff 34.38%,hsla(0,0%,100%,0))}"
|
|
68
|
+
/*__inner_css_end__*/
|
|
69
|
+
, "1lt5z_gg_")
|
|
70
|
+
/*__reshadow_css_end__*/
|
|
71
|
+
, {
|
|
72
|
+
"__SShadowHorizontal": "___SShadowHorizontal_1lt5z_gg_",
|
|
73
|
+
"_position_median": "_position_median_1lt5z_gg_",
|
|
74
|
+
"_position_start": "_position_start_1lt5z_gg_",
|
|
75
|
+
"_position_end": "_position_end_1lt5z_gg_",
|
|
76
|
+
"__SShadowVertical": "___SShadowVertical_1lt5z_gg_"
|
|
59
77
|
});
|
|
60
78
|
var KEYS = ['ArrowDown', 'ArrowUp', 'Enter', ' '];
|
|
61
79
|
var INTERACTION_TAGS = ['INPUT', 'TEXTAREA'];
|
|
@@ -285,11 +303,12 @@ function List(props) {
|
|
|
285
303
|
var _ref2 = arguments[0],
|
|
286
304
|
_ref7;
|
|
287
305
|
|
|
288
|
-
var SDropdownMenuList =
|
|
306
|
+
var SDropdownMenuList = ScrollAreaComponent;
|
|
289
307
|
return _ref7 = sstyled(props.styles), /*#__PURE__*/React.createElement(SDropdownMenuList, _ref7.cn("SDropdownMenuList", _objectSpread({}, _assignProps2({
|
|
290
|
-
"tag": ScrollAreaComponent,
|
|
291
308
|
"role": "menu",
|
|
292
|
-
"aria-activedescendant": props.index
|
|
309
|
+
"aria-activedescendant": props.index,
|
|
310
|
+
"shadow": true,
|
|
311
|
+
"styles": scrollStyles
|
|
293
312
|
}, _ref2))));
|
|
294
313
|
}
|
|
295
314
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenu.js","names":["React","cn","createComponent","Component","sstyled","Root","Dropdown","Box","Flex","useBox","useFlex","ScrollAreaComponent","uniqueIDEnhancement","KEYS","INTERACTION_TAGS","DropdownMenuRoot","createRef","e","amount","shiftKey","key","includes","target","tagName","preventDefault","handlers","visible","moveHighlightedIndex","highlightedItemRef","current","click","node","scrollIntoView","asProps","highlightedIndex","prevHighlightedIndex","block","inline","size","uid","disablePortal","id","undefined","onKeyDown","handlerKeyDown","index","tabIndex","props","highlighted","extraProps","itemProps","push","ref","scrollToNode","itemsLastIndex","length","selectedIndex","findIndex","item","selected","newIndex","disabled","setTimeout","focus","Children","style","defaultVisible","defaultHighlightedIndex","List","SDropdownMenuList","styles","Menu","DropdownMenu","Item","forwardRef","SDropdownMenuItem","className","other","label","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';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\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 static enhance = [uniqueIDEnhancement()];\n\n static defaultProps = {\n size: 'm',\n defaultVisible: false,\n defaultHighlightedIndex: null,\n };\n\n itemProps = [];\n\n highlightedItemRef = React.createRef();\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.highlightedItemRef.current) this.highlightedItemRef.current.click();\n break;\n }\n };\n\n getTriggerProps() {\n const { size, uid, disablePortal, visible } = this.asProps;\n\n return {\n size,\n id: `igc-${uid}-trigger`,\n 'aria-controls': visible ? `igc-${uid}-popper` : undefined,\n 'aria-flowto': visible && !disablePortal ? `igc-${uid}-popper` : undefined,\n 'aria-label': visible && !disablePortal ? `Press Tab to go to popover` : undefined,\n onKeyDown: this.handlerKeyDown,\n };\n }\n\n getListProps() {\n const { size } = this.asProps;\n return {\n size,\n index: this.asProps.highlightedIndex,\n };\n }\n\n getPopperProps() {\n const { uid, disablePortal } = this.asProps;\n\n return {\n tabIndex: 0,\n onKeyDown: this.handlerKeyDown,\n id: `igc-${uid}-popper`,\n 'aria-flowto': !disablePortal ? `igc-${uid}-trigger` : undefined,\n };\n }\n\n getItemProps(props, index) {\n const { size, highlightedIndex } = this.asProps;\n const highlighted = index === highlightedIndex;\n const extraProps = {};\n\n this.itemProps.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.highlightedItemRef.current = 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.itemProps.length - 1;\n const selectedIndex = this.itemProps.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.itemProps[newIndex] && this.itemProps[newIndex].disabled) {\n this.moveHighlightedIndex(amount < 0 ? amount - 1 : amount + 1, e);\n } else {\n this.handlers.highlightedIndex(newIndex, e);\n setTimeout(() => {\n this.highlightedItemRef.current?.focus();\n }, 0);\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.itemProps = [];\n\n return (\n <Root render={Dropdown} {...props}>\n <Children />\n </Root>\n );\n }\n}\n\nfunction List(props) {\n const SDropdownMenuList = Root;\n\n return sstyled(props.styles)(\n <SDropdownMenuList\n render={Box}\n tag={ScrollAreaComponent}\n role=\"menu\"\n aria-activedescendant={props.index}\n />,\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={0}\n id={props.label}\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)(\n <SDropdownMenuItem render={Flex} variant=\"hint\" role=\"menuitem\" tabIndex={0} />,\n );\n}\n\nfunction Title(props) {\n const SDropdownMenuItem = Root;\n return sstyled(props.styles)(\n <SDropdownMenuItem render={Flex} variant=\"title\" role=\"menuitem\" tabIndex={0} />,\n );\n}\n\nfunction Trigger() {\n return <Root render={Dropdown.Trigger} aria-haspopup=\"true\" />;\n}\n\nconst DropdownMenu = createComponent(\n DropdownMenuRoot,\n {\n 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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"}
|
|
1
|
+
{"version":3,"file":"DropdownMenu.js","names":["React","cn","createComponent","Component","sstyled","Root","Dropdown","Flex","useBox","useFlex","ScrollAreaComponent","uniqueIDEnhancement","KEYS","INTERACTION_TAGS","DropdownMenuRoot","createRef","e","amount","shiftKey","key","includes","target","tagName","preventDefault","handlers","visible","moveHighlightedIndex","highlightedItemRef","current","click","node","scrollIntoView","asProps","highlightedIndex","prevHighlightedIndex","block","inline","size","uid","disablePortal","id","undefined","onKeyDown","handlerKeyDown","index","tabIndex","props","highlighted","extraProps","itemProps","push","ref","scrollToNode","itemsLastIndex","length","selectedIndex","findIndex","item","selected","newIndex","disabled","setTimeout","focus","Children","style","defaultVisible","defaultHighlightedIndex","List","SDropdownMenuList","styles","scrollStyles","Menu","DropdownMenu","Item","forwardRef","SDropdownMenuItem","className","other","label","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 { Flex, useBox, useFlex } from '@semcore/flex-box';\nimport ScrollAreaComponent from '@semcore/scroll-area';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\n\nimport style from './style/dropdown-menu.shadow.css';\nimport scrollStyles from './style/scroll-area.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 static enhance = [uniqueIDEnhancement()];\n\n static defaultProps = {\n size: 'm',\n defaultVisible: false,\n defaultHighlightedIndex: null,\n };\n\n itemProps = [];\n\n highlightedItemRef = React.createRef();\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.highlightedItemRef.current) this.highlightedItemRef.current.click();\n break;\n }\n };\n\n getTriggerProps() {\n const { size, uid, disablePortal, visible } = this.asProps;\n\n return {\n size,\n id: `igc-${uid}-trigger`,\n 'aria-controls': visible ? `igc-${uid}-popper` : undefined,\n 'aria-flowto': visible && !disablePortal ? `igc-${uid}-popper` : undefined,\n 'aria-label': visible && !disablePortal ? `Press Tab to go to popover` : undefined,\n onKeyDown: this.handlerKeyDown,\n };\n }\n\n getListProps() {\n const { size } = this.asProps;\n return {\n size,\n index: this.asProps.highlightedIndex,\n };\n }\n\n getPopperProps() {\n const { uid, disablePortal } = this.asProps;\n\n return {\n tabIndex: 0,\n onKeyDown: this.handlerKeyDown,\n id: `igc-${uid}-popper`,\n 'aria-flowto': !disablePortal ? `igc-${uid}-trigger` : undefined,\n };\n }\n\n getItemProps(props, index) {\n const { size, highlightedIndex } = this.asProps;\n const highlighted = index === highlightedIndex;\n const extraProps = {};\n\n this.itemProps.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.highlightedItemRef.current = 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.itemProps.length - 1;\n const selectedIndex = this.itemProps.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.itemProps[newIndex] && this.itemProps[newIndex].disabled) {\n this.moveHighlightedIndex(amount < 0 ? amount - 1 : amount + 1, e);\n } else {\n this.handlers.highlightedIndex(newIndex, e);\n setTimeout(() => {\n this.highlightedItemRef.current?.focus();\n }, 0);\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.itemProps = [];\n\n return (\n <Root render={Dropdown} {...props}>\n <Children />\n </Root>\n );\n }\n}\n\nfunction List(props) {\n const SDropdownMenuList = Root;\n\n return sstyled(props.styles)(\n <SDropdownMenuList\n render={ScrollAreaComponent}\n role=\"menu\"\n aria-activedescendant={props.index}\n shadow={true}\n styles={scrollStyles}\n />,\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={0}\n id={props.label}\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)(\n <SDropdownMenuItem render={Flex} variant=\"hint\" role=\"menuitem\" tabIndex={0} />,\n );\n}\n\nfunction Title(props) {\n const SDropdownMenuItem = Root;\n return sstyled(props.styles)(\n <SDropdownMenuItem render={Flex} variant=\"title\" role=\"menuitem\" tabIndex={0} />,\n );\n}\n\nfunction Trigger() {\n return <Root render={Dropdown.Trigger} aria-haspopup=\"true\" />;\n}\n\nconst DropdownMenu = createComponent(\n DropdownMenuRoot,\n {\n 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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"}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
SShadowHorizontal {
|
|
2
|
+
&:before,
|
|
3
|
+
&:after {
|
|
4
|
+
width: 9px;
|
|
5
|
+
height: 100%;
|
|
6
|
+
border-radius: 6px;
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
SShadowHorizontal[position='median'] {
|
|
11
|
+
&:before {
|
|
12
|
+
background: linear-gradient(to right, #ffffff 34.38%, rgba(255, 255, 255, 0) 100%);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
&:after {
|
|
16
|
+
background: linear-gradient(to left, #ffffff 34.38%, rgba(255, 255, 255, 0) 100%);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
SShadowHorizontal[position='start'] {
|
|
21
|
+
&:before {
|
|
22
|
+
background: linear-gradient(to right, #ffffff 34.38%, rgba(255, 255, 255, 0) 100%);
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
SShadowHorizontal[position='end'] {
|
|
27
|
+
&:after {
|
|
28
|
+
background: linear-gradient(to left, #ffffff 34.38%, rgba(255, 255, 255, 0) 100%);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
SShadowVertical {
|
|
33
|
+
&:before,
|
|
34
|
+
&:after {
|
|
35
|
+
width: 100%;
|
|
36
|
+
height: 9px;
|
|
37
|
+
border-radius: 6px;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
SShadowVertical[position='median'] {
|
|
42
|
+
&:before {
|
|
43
|
+
background: linear-gradient(to bottom, #ffffff 34.38%, rgba(255, 255, 255, 0) 100%);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
&:after {
|
|
47
|
+
background: linear-gradient(to top, #ffffff 34.38%, rgba(255, 255, 255, 0) 100%);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
SShadowVertical[position='start'] {
|
|
52
|
+
&:before {
|
|
53
|
+
background: linear-gradient(to bottom, #ffffff 34.38%, rgba(255, 255, 255, 0) 100%);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
SShadowVertical[position='end'] {
|
|
58
|
+
&:after {
|
|
59
|
+
background: linear-gradient(to top, #ffffff 34.38%, rgba(255, 255, 255, 0) 100%);
|
|
60
|
+
}
|
|
61
|
+
}
|