@semcore/dropdown-menu 2.3.9 → 2.3.12
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 +18 -0
- package/lib/cjs/DropdownMenu.js +5 -7
- package/lib/cjs/DropdownMenu.js.map +1 -1
- package/lib/cjs/index.d.ts +121 -0
- package/lib/cjs/index.js +2 -19
- package/lib/cjs/index.js.map +1 -1
- package/lib/es6/DropdownMenu.js +5 -6
- package/lib/es6/DropdownMenu.js.map +1 -1
- package/lib/es6/index.d.ts +121 -0
- package/lib/es6/index.js +0 -1
- package/lib/es6/index.js.map +1 -1
- package/package.json +6 -2
- package/src/index.js +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,24 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [2.3.12] - 2022-04-25
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/scroll-area` [3.7.0 ~> 3.7.1]).
|
|
10
|
+
|
|
11
|
+
## [2.3.11] - 2022-04-21
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- Version patch update due to children dependencies update (`@semcore/scroll-area` [3.6.4 ~> 3.7.0]).
|
|
16
|
+
|
|
17
|
+
## [2.3.10] - 2022-03-14
|
|
18
|
+
|
|
19
|
+
### Changed
|
|
20
|
+
|
|
21
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.31.2 ~> 3.31.2], `@semcore/dropdown` [2.3.2 ~> 2.3.3]).
|
|
22
|
+
|
|
5
23
|
## [2.3.9] - 2022-03-09
|
|
6
24
|
|
|
7
25
|
### Fixed
|
package/lib/cjs/DropdownMenu.js
CHANGED
|
@@ -279,8 +279,7 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
|
|
|
279
279
|
}, {
|
|
280
280
|
key: "render",
|
|
281
281
|
value: function render() {
|
|
282
|
-
var _ref = this
|
|
283
|
-
|
|
282
|
+
var _ref = this.asProps;
|
|
284
283
|
var _this$asProps3 = this.asProps,
|
|
285
284
|
Children = _this$asProps3.Children,
|
|
286
285
|
optionCount = _this$asProps3.optionCount,
|
|
@@ -315,7 +314,7 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
|
|
|
315
314
|
});
|
|
316
315
|
|
|
317
316
|
function List(props) {
|
|
318
|
-
var _ref2 =
|
|
317
|
+
var _ref2 = arguments[0],
|
|
319
318
|
_ref6;
|
|
320
319
|
|
|
321
320
|
var SDropdownMenuList = _flexBox.Box;
|
|
@@ -326,8 +325,7 @@ function List(props) {
|
|
|
326
325
|
}
|
|
327
326
|
|
|
328
327
|
function Menu() {
|
|
329
|
-
var _ref3 =
|
|
330
|
-
|
|
328
|
+
var _ref3 = arguments[0];
|
|
331
329
|
return /*#__PURE__*/_react["default"].createElement(DropdownMenu.Popper, null, /*#__PURE__*/_react["default"].createElement(DropdownMenu.List, (0, _core.assignProps)({}, _ref3)));
|
|
332
330
|
}
|
|
333
331
|
|
|
@@ -364,7 +362,7 @@ function Addon(props) {
|
|
|
364
362
|
}
|
|
365
363
|
|
|
366
364
|
function Hint(props) {
|
|
367
|
-
var _ref4 =
|
|
365
|
+
var _ref4 = arguments[0],
|
|
368
366
|
_ref7;
|
|
369
367
|
|
|
370
368
|
var SDropdownMenuItem = _flexBox.Flex;
|
|
@@ -374,7 +372,7 @@ function Hint(props) {
|
|
|
374
372
|
}
|
|
375
373
|
|
|
376
374
|
function Title(props) {
|
|
377
|
-
var _ref5 =
|
|
375
|
+
var _ref5 = arguments[0],
|
|
378
376
|
_ref8;
|
|
379
377
|
|
|
380
378
|
var SDropdownMenuItem = _flexBox.Flex;
|
|
@@ -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","props","index","asProps","onSelect","multiselect","result","node","scrollIntoView","highlightedIndex","prevHighlightedIndex","block","inline","size","onKeyDown","handlerKeyDown","tabIndex","highlighted","extraProps","undefined","onClick","bindHandlerFallbackSelect","_items","push","ref","scrollToNode","itemsLastIndex","length","selectedIndex","findIndex","item","selected","newIndex","disabled","Children","optionCount","triggerType","other","logger","warn","DropdownMenu","displayName","interaction","Dropdown","Component","style","defaultVisible","defaultHighlightedIndex","List","SDropdownMenuList","Box","styles","ScrollAreaComponent","Menu","Item","forwardRef","SDropdownMenuItem","className","cn","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';\nimport logger from '@semcore/utils/lib/logger';\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 bindHandlerFallbackSelect = (props, index) => () => {\n const { onSelect, multiselect } = this.asProps;\n const result = onSelect({\n index,\n ...props,\n });\n\n if (!multiselect && result !== false) {\n this.handlers.visible(false);\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, onSelect } = this.asProps;\n const highlighted = index === highlightedIndex;\n const extraProps = {};\n\n if (onSelect !== undefined) {\n extraProps.onClick = this.bindHandlerFallbackSelect(props, index);\n }\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, optionCount, triggerType, onSelect, ...other } = this.asProps;\n const props = {};\n\n this._items = [];\n\n logger.warn(\n onSelect !== undefined,\n \"Property 'onSelect' is deprecated, subscribe to the 'onClick' of the needed 'Item'\",\n other['data-ui-name'] || DropdownMenu.displayName,\n );\n logger.warn(\n optionCount !== undefined,\n \"The 'optionCount' property is deprecated and is now automatically determined from the number of Item\",\n other['data-ui-name'] || DropdownMenu.displayName,\n );\n logger.warn(\n triggerType !== undefined,\n \"The 'triggerType' property is deprecated, use 'interaction=\\\"focus\\\"'\",\n other['data-ui-name'] || DropdownMenu.displayName,\n );\n if (triggerType === 'input') {\n props.interaction = 'focus';\n }\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,"sources":["../../src/DropdownMenu.jsx"],"names":["KEYS","INTERACTION_TAGS","DropdownMenuRoot","e","amount","shiftKey","key","includes","target","tagName","preventDefault","handlers","visible","moveHighlightedIndex","_highlightedItem","click","props","index","asProps","onSelect","multiselect","result","node","scrollIntoView","highlightedIndex","prevHighlightedIndex","block","inline","size","onKeyDown","handlerKeyDown","tabIndex","highlighted","extraProps","undefined","onClick","bindHandlerFallbackSelect","_items","push","ref","scrollToNode","itemsLastIndex","length","selectedIndex","findIndex","item","selected","newIndex","disabled","Children","optionCount","triggerType","other","logger","warn","DropdownMenu","displayName","interaction","Dropdown","Component","style","defaultVisible","defaultHighlightedIndex","List","SDropdownMenuList","Box","styles","ScrollAreaComponent","Menu","Item","forwardRef","SDropdownMenuItem","className","cn","Addon","SDropdownMenuItemAddon","Hint","Flex","Title","Trigger","Popper","ItemTitle","ItemHint","parent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;;AAFA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,IAAMA,IAAI,GAAG,CAAC,WAAD,EAAc,SAAd,EAAyB,OAAzB,EAAkC,GAAlC,CAAb;AACA,IAAMC,gBAAgB,GAAG,CAAC,OAAD,EAAU,UAAV,CAAzB;;IAEMC,gB;;;;;;;;;;;;;;;+FAUK,E;yGAEU,I;6GAEI,I;uGASN,UAACC,CAAD,EAAO;AACtB,UAAMC,MAAM,GAAGD,CAAC,CAACE,QAAF,GAAa,CAAb,GAAiB,CAAhC;AAEA,UAAIF,CAAC,CAACG,GAAF,KAAU,GAAV,IAAiBL,gBAAgB,CAACM,QAAjB,CAA0BJ,CAAC,CAACK,MAAF,CAASC,OAAnC,CAArB,EAAkE;AAClE,UAAI,CAACT,IAAI,CAACO,QAAL,CAAcJ,CAAC,CAACG,GAAhB,CAAL,EAA2B;AAE3BH,MAAAA,CAAC,CAACO,cAAF;;AAEA,YAAKC,QAAL,CAAcC,OAAd,CAAsB,IAAtB;;AAEA,cAAQT,CAAC,CAACG,GAAV;AACE,aAAK,WAAL;AACE,gBAAKO,oBAAL,CAA0BT,MAA1B,EAAkCD,CAAlC;;AACA;;AACF,aAAK,SAAL;AACE,gBAAKU,oBAAL,CAA0B,CAACT,MAA3B,EAAmCD,CAAnC;;AACA;;AACF,aAAK,GAAL;AACA,aAAK,OAAL;AACE,cAAI,MAAKW,gBAAT,EAA2B,MAAKA,gBAAL,CAAsBC,KAAtB;AAC3B;AAVJ;AAYD,K;kHAE2B,UAACC,KAAD,EAAQC,KAAR;AAAA,aAAkB,YAAM;AAClD,4BAAkC,MAAKC,OAAvC;AAAA,YAAQC,QAAR,iBAAQA,QAAR;AAAA,YAAkBC,WAAlB,iBAAkBA,WAAlB;AACA,YAAMC,MAAM,GAAGF,QAAQ;AACrBF,UAAAA,KAAK,EAALA;AADqB,WAElBD,KAFkB,EAAvB;;AAKA,YAAI,CAACI,WAAD,IAAgBC,MAAM,KAAK,KAA/B,EAAsC;AACpC,gBAAKV,QAAL,CAAcC,OAAd,CAAsB,KAAtB;AACD;AACF,OAV2B;AAAA,K;qGAqEb,UAACU,IAAD,EAAU;AACvB,YAAKR,gBAAL,GAAwBQ,IAAxB;;AACA,UAAIA,IAAI,IAAIA,IAAI,CAACC,cAAjB,EAAiC;AAC/B,YAAI,MAAKL,OAAL,CAAaM,gBAAb,KAAkC,MAAKC,oBAA3C,EAAiE;AAC/D,gBAAKA,oBAAL,GAA4B,MAAKP,OAAL,CAAaM,gBAAzC;AACAF,UAAAA,IAAI,CAACC,cAAL,CAAoB;AAClBG,YAAAA,KAAK,EAAE,SADW;AAElBC,YAAAA,MAAM,EAAE;AAFU,WAApB;AAID;AACF;AACF,K;;;;;;WA/GD,6BAAoB;AAClB,aAAO;AACLH,QAAAA,gBAAgB,EAAE,IADb;AAELZ,QAAAA,OAAO,EAAE;AAFJ,OAAP;AAID;;;WAsCD,2BAAkB;AAChB,UAAQgB,IAAR,GAAiB,KAAKV,OAAtB,CAAQU,IAAR;AACA,aAAO;AACLA,QAAAA,IAAI,EAAJA,IADK;AAELC,QAAAA,SAAS,EAAE,KAAKC;AAFX,OAAP;AAID;;;WAED,wBAAe;AACb,UAAQF,IAAR,GAAiB,KAAKV,OAAtB,CAAQU,IAAR;AACA,aAAO;AACLA,QAAAA,IAAI,EAAJA;AADK,OAAP;AAGD;;;WAED,0BAAiB;AACf,aAAO;AACLG,QAAAA,QAAQ,EAAE,CADL;AAELF,QAAAA,SAAS,EAAE,KAAKC;AAFX,OAAP;AAID;;;WAED,sBAAad,KAAb,EAAoBC,KAApB,EAA2B;AACzB,2BAA6C,KAAKC,OAAlD;AAAA,UAAQU,IAAR,kBAAQA,IAAR;AAAA,UAAcJ,gBAAd,kBAAcA,gBAAd;AAAA,UAAgCL,QAAhC,kBAAgCA,QAAhC;AACA,UAAMa,WAAW,GAAGf,KAAK,KAAKO,gBAA9B;AACA,UAAMS,UAAU,GAAG,EAAnB;;AAEA,UAAId,QAAQ,KAAKe,SAAjB,EAA4B;AAC1BD,QAAAA,UAAU,CAACE,OAAX,GAAqB,KAAKC,yBAAL,CAA+BpB,KAA/B,EAAsCC,KAAtC,CAArB;AACD;;AAED,WAAKoB,MAAL,CAAYC,IAAZ,CAAiBtB,KAAjB;;AACA,UAAIgB,WAAJ,EAAiB;AACfC,QAAAA,UAAU,CAACM,GAAX,GAAiB,KAAKC,YAAtB;AACD;;AAED;AACEZ,QAAAA,IAAI,EAAJA,IADF;AAEEI,QAAAA,WAAW,EAAXA;AAFF,SAGKC,UAHL;AAKD;;;WAED,4BAAmB;AACjB,UAAQL,IAAR,GAAiB,KAAKV,OAAtB,CAAQU,IAAR;AACA,aAAO;AACLA,QAAAA,IAAI,EAAJA;AADK,OAAP;AAGD;;;WAED,6BAAoB;AAClB,UAAQA,IAAR,GAAiB,KAAKV,OAAtB,CAAQU,IAAR;AACA,aAAO;AACLA,QAAAA,IAAI,EAAJA;AADK,OAAP;AAGD;;;WAeD,8BAAqBxB,MAArB,EAA6BD,CAA7B,EAAgC;AAC9B,UAAMqB,gBAAN,GAA2B,KAAKN,OAAhC,CAAMM,gBAAN;AACA,UAAMiB,cAAc,GAAG,KAAKJ,MAAL,CAAYK,MAAZ,GAAqB,CAA5C;;AACA,UAAMC,aAAa,GAAG,KAAKN,MAAL,CAAYO,SAAZ,CAAsB,UAACC,IAAD;AAAA,eAAUA,IAAI,CAACC,QAAf;AAAA,OAAtB,CAAtB;;AAEA,UAAIL,cAAc,GAAG,CAArB,EAAwB;;AAExB,UAAIjB,gBAAgB,IAAI,IAAxB,EAA8B;AAC5B,YAAImB,aAAa,KAAK,CAAC,CAAvB,EAA0B;AACxBnB,UAAAA,gBAAgB,GAAGmB,aAAnB;AACD,SAFD,MAEO;AACLnB,UAAAA,gBAAgB,GAAGpB,MAAM,GAAG,CAAT,GAAa,CAAb,GAAiBqC,cAApC;AACD;AACF;;AAED,UAAIM,QAAQ,GAAGvB,gBAAgB,GAAGpB,MAAlC;;AACA,UAAI2C,QAAQ,GAAG,CAAf,EAAkB;AAChBA,QAAAA,QAAQ,GAAG3C,MAAM,GAAGqC,cAAT,GAA0B,CAArC;AACD,OAFD,MAEO,IAAIM,QAAQ,GAAGN,cAAf,EAA+B;AACpCM,QAAAA,QAAQ,GAAGA,QAAQ,GAAGN,cAAX,GAA4B,CAAvC;AACD;;AAED,UAAI,KAAKJ,MAAL,CAAYU,QAAZ,KAAyB,KAAKV,MAAL,CAAYU,QAAZ,EAAsBC,QAAnD,EAA6D;AAC3D,aAAKnC,oBAAL,CAA0BT,MAAM,GAAG,CAAT,GAAaA,MAAM,GAAG,CAAtB,GAA0BA,MAAM,GAAG,CAA7D,EAAgED,CAAhE;AACD,OAFD,MAEO;AACL,aAAKQ,QAAL,CAAca,gBAAd,CAA+BuB,QAA/B,EAAyC5C,CAAzC;AACD;AACF;;;WAED,8BAAqB;AACnB,UAAQS,OAAR,GAAoB,KAAKM,OAAzB,CAAQN,OAAR;;AAEA,UAAI,CAACA,OAAL,EAAc;AACZ,aAAKD,QAAL,CAAca,gBAAd,CAA+B,IAA/B;AACD;AACF;;;WAED,kBAAS;AAAA;AACP,2BAAmE,KAAKN,OAAxE;AAAA,UAAQ+B,QAAR,kBAAQA,QAAR;AAAA,UAAkBC,WAAlB,kBAAkBA,WAAlB;AAAA,UAA+BC,WAA/B,kBAA+BA,WAA/B;AAAA,UAA4ChC,QAA5C,kBAA4CA,QAA5C;AAAA,UAAyDiC,KAAzD;AACA,UAAMpC,KAAK,GAAG,EAAd;AAEA,WAAKqB,MAAL,GAAc,EAAd;;AAEAgB,yBAAOC,IAAP,CACEnC,QAAQ,KAAKe,SADf,EAEE,oFAFF,EAGEkB,KAAK,CAAC,cAAD,CAAL,IAAyBG,YAAY,CAACC,WAHxC;;AAKAH,yBAAOC,IAAP,CACEJ,WAAW,KAAKhB,SADlB,EAEE,sGAFF,EAGEkB,KAAK,CAAC,cAAD,CAAL,IAAyBG,YAAY,CAACC,WAHxC;;AAKAH,yBAAOC,IAAP,CACEH,WAAW,KAAKjB,SADlB,EAEE,uEAFF,EAGEkB,KAAK,CAAC,cAAD,CAAL,IAAyBG,YAAY,CAACC,WAHxC;;AAKA,UAAIL,WAAW,KAAK,OAApB,EAA6B;AAC3BnC,QAAAA,KAAK,CAACyC,WAAN,GAAoB,OAApB;AACD;;AAED,0BACE,gCAAcC,oBAAd,2CAA4B1C,KAA5B,uBACE,gCAAC,QAAD,OADF,CADF;AAKD;;;EApM4B2C,e;;iCAAzBzD,gB,iBACiB,c;iCADjBA,gB,WAEW0D,K;iCAFX1D,gB,kBAIkB;AACpB0B,EAAAA,IAAI,EAAE,GADc;AAEpBiC,EAAAA,cAAc,EAAE,KAFI;AAGpBC,EAAAA,uBAAuB,EAAE;AAHL,C;;AAmMxB,SAASC,IAAT,CAAc/C,KAAd,EAAqB;AAAA;AAAA;;AACnB,MAAMgD,iBAAiB,GAEMC,YAF7B;AACA,iBAAO,mBAAQjD,KAAK,CAACkD,MAAd,CAAP,eACE,gCAAC,iBAAD;AAAA,WAAqCC,sBAArC;AAAA,YAA+D;AAA/D,cADF;AAGD;;AAED,SAASC,IAAT,GAAgB;AAAA;AACd,sBACE,gCAAC,YAAD,CAAc,MAAd,qBACE,gCAAcb,YAAY,CAACQ,IAA3B,oCADF,CADF;AAKD;;AAED,SAASM,IAAT,CAAcrD,KAAd,EAAqB;AACnB,iBAAqD,sBAAQA,KAAR,EAAeA,KAAK,CAACsD,UAArB,CAArD;AAAA;AAAA,MAAOC,iBAAP;AAAA;AAAA,MAA4BC,SAA5B,cAA4BA,SAA5B;AAAA,MAA0CpB,KAA1C;;AACA,MAAMc,MAAM,GAAG,mBAAQlD,KAAK,CAACkD,MAAd,CAAf;AACA,sBACE,gCAAC,iBAAD;AACE,IAAA,IAAI,EAAC,UADP;AAEE,IAAA,QAAQ,EAAE,CAAC,CAFb;AAGE,IAAA,SAAS,EACP,4BACEA,MAAM,CAACO,EAAP,CAAU,mBAAV,kCACKzD,KADL;AAEEgB,MAAAA,WAAW,EAAE,CAAChB,KAAK,CAACgC,QAAP,IAAmBhC,KAAK,CAACgB;AAFxC,QAGGwC,SAJL,EAKEA,SALF,KAMKtC;AAVT,KAYMkB,KAZN,EADF;AAgBD;;AAED,SAASsB,KAAT,CAAe1D,KAAf,EAAsB;AACpB,gBAA0D,qBAAOA,KAAP,EAAcA,KAAK,CAACsD,UAApB,CAA1D;AAAA;AAAA,MAAOK,sBAAP;AAAA;AAAA,MAAiCH,SAAjC,aAAiCA,SAAjC;AAAA,MAA+CpB,KAA/C;;AACA,MAAMc,MAAM,GAAG,mBAAQlD,KAAK,CAACkD,MAAd,CAAf;AACA,sBACE,gCAAC,sBAAD;AACE,IAAA,SAAS,EAAE,4BAAGA,MAAM,CAACO,EAAP,CAAU,wBAAV,EAAoCzD,KAApC,EAA2CwD,SAA9C,EAAyDA,SAAzD,KAAuEtC;AADpF,KAEMkB,KAFN,EADF;AAMD;;AAED,SAASwB,IAAT,CAAc5D,KAAd,EAAqB;AAAA;AAAA;;AACnB,MAAMuD,iBAAiB,GACiCM,aADxD;AACA,iBAAO,mBAAQ7D,KAAK,CAACkD,MAAd,CAAP,eAA6B,gCAAC,iBAAD;AAAA,eAAyC;AAAzC,cAA7B;AACD;;AAED,SAASY,KAAT,CAAe9D,KAAf,EAAsB;AAAA;AAAA;;AACpB,MAAMuD,iBAAiB,GACiCM,aADxD;AACA,iBAAO,mBAAQ7D,KAAK,CAACkD,MAAd,CAAP,eAA6B,gCAAC,iBAAD;AAAA,eAAyC;AAAzC,cAA7B;AACD;;AAED,IAAMX,YAAY,GAAG,sBACnBrD,gBADmB,EAEnB;AACE6E,EAAAA,OAAO,EAAErB,qBAASqB,OADpB;AAEEC,EAAAA,MAAM,EAAEtB,qBAASsB,MAFnB;AAGEjB,EAAAA,IAAI,EAAJA,IAHF;AAIEK,EAAAA,IAAI,EAAJA,IAJF;AAKEC,EAAAA,IAAI,EAAE,CAACA,IAAD,EAAO;AAAEK,IAAAA,KAAK,EAALA;AAAF,GAAP,CALR;AAMEO,EAAAA,SAAS,EAAEH,KANb;AAOEI,EAAAA,QAAQ,EAAEN;AAPZ,CAFmB,EAWnB;AACEO,EAAAA,MAAM,EAAE,CAACzB,oBAAD;AADV,CAXmB,CAArB;eAgBeH,Y","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 logger from '@semcore/utils/lib/logger';\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 bindHandlerFallbackSelect = (props, index) => () => {\n const { onSelect, multiselect } = this.asProps;\n const result = onSelect({\n index,\n ...props,\n });\n\n if (!multiselect && result !== false) {\n this.handlers.visible(false);\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, onSelect } = this.asProps;\n const highlighted = index === highlightedIndex;\n const extraProps = {};\n\n if (onSelect !== undefined) {\n extraProps.onClick = this.bindHandlerFallbackSelect(props, index);\n }\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, optionCount, triggerType, onSelect, ...other } = this.asProps;\n const props = {};\n\n this._items = [];\n\n logger.warn(\n onSelect !== undefined,\n \"Property 'onSelect' is deprecated, subscribe to the 'onClick' of the needed 'Item'\",\n other['data-ui-name'] || DropdownMenu.displayName,\n );\n logger.warn(\n optionCount !== undefined,\n \"The 'optionCount' property is deprecated and is now automatically determined from the number of Item\",\n other['data-ui-name'] || DropdownMenu.displayName,\n );\n logger.warn(\n triggerType !== undefined,\n \"The 'triggerType' property is deprecated, use 'interaction=\\\"focus\\\"'\",\n other['data-ui-name'] || DropdownMenu.displayName,\n );\n if (triggerType === 'input') {\n props.interaction = 'focus';\n }\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"}
|
|
@@ -0,0 +1,121 @@
|
|
|
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' | 'xl';
|
|
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
|
+
/** @deprecated v2.0.0 */
|
|
28
|
+
optionCount?: number;
|
|
29
|
+
/** Trigger type selection
|
|
30
|
+
* @deprecated v2.0.0 */
|
|
31
|
+
triggerType?: 'button' | 'input';
|
|
32
|
+
/** Handler in option selection
|
|
33
|
+
* @deprecated v2.0.0 */
|
|
34
|
+
onSelect?: (item: any) => void;
|
|
35
|
+
/** Multiple choice of options
|
|
36
|
+
* @deprecated v2.0.0 {@link ISelectProps.multiselect} */
|
|
37
|
+
multiselect?: boolean;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
export interface IDropdownMenuListProps extends IBoxProps, IScrollAreaProps {
|
|
41
|
+
/**
|
|
42
|
+
* Size of the menu
|
|
43
|
+
* @default m
|
|
44
|
+
*/
|
|
45
|
+
size?: DropdownMenuSize;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
export interface IDropdownMenuMenuProps extends IDropdownMenuListProps {}
|
|
49
|
+
|
|
50
|
+
export interface IDropdownMenuItemProps extends IFlexProps {
|
|
51
|
+
/**
|
|
52
|
+
* Enables selected state
|
|
53
|
+
*/
|
|
54
|
+
selected?: boolean;
|
|
55
|
+
/**
|
|
56
|
+
* Disables the component
|
|
57
|
+
*/
|
|
58
|
+
disabled?: boolean;
|
|
59
|
+
/**
|
|
60
|
+
* Adds focus styles around
|
|
61
|
+
*/
|
|
62
|
+
highlighted?: boolean;
|
|
63
|
+
/**
|
|
64
|
+
* Makes the element non-interactive
|
|
65
|
+
*/
|
|
66
|
+
notInteractive?: boolean;
|
|
67
|
+
/**
|
|
68
|
+
* Size of the component
|
|
69
|
+
* @default m
|
|
70
|
+
*/
|
|
71
|
+
size?: DropdownMenuSize;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
export interface IDropdownMenuItemHintProps extends IFlexProps {
|
|
75
|
+
/**
|
|
76
|
+
* Size of the component
|
|
77
|
+
* @default m
|
|
78
|
+
*/
|
|
79
|
+
size?: DropdownMenuSize;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
export interface IDropdownMenuItemTitleProps extends IFlexProps {
|
|
83
|
+
/**
|
|
84
|
+
* Size of the component
|
|
85
|
+
* @default m
|
|
86
|
+
*/
|
|
87
|
+
size?: DropdownMenuSize;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
export interface IDropdownMenuContext extends IDropdownContext {
|
|
91
|
+
getListProps: PropGetterFn;
|
|
92
|
+
getItemProps: PropGetterFn;
|
|
93
|
+
getItemHintProps: PropGetterFn;
|
|
94
|
+
getItemTitleProps: PropGetterFn;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
export interface IDropdownMenuHandlers extends IDropdownHandlers {
|
|
98
|
+
highlightedIndex: (index: number) => void;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
declare const DropdownMenu: (<T>(
|
|
102
|
+
props: CProps<IDropdownMenuProps & T, IDropdownMenuContext, IDropdownMenuHandlers>,
|
|
103
|
+
) => ReturnEl) & {
|
|
104
|
+
Trigger: typeof Dropdown.Trigger;
|
|
105
|
+
Popper: typeof Dropdown.Popper;
|
|
106
|
+
List: <T>(
|
|
107
|
+
props: CProps<IDropdownMenuListProps & T, IDropdownMenuContext, IDropdownMenuHandlers>,
|
|
108
|
+
) => ReturnEl;
|
|
109
|
+
Menu: <T>(
|
|
110
|
+
props: CProps<IDropdownMenuMenuProps & T, IDropdownMenuContext, IDropdownMenuHandlers>,
|
|
111
|
+
) => ReturnEl;
|
|
112
|
+
Item: (<T>(
|
|
113
|
+
props: CProps<IDropdownMenuItemProps & T, IDropdownMenuContext, IDropdownMenuHandlers>,
|
|
114
|
+
) => ReturnEl) & {
|
|
115
|
+
Addon: typeof Box;
|
|
116
|
+
};
|
|
117
|
+
ItemTitle: <T>(props: IDropdownMenuItemTitleProps & T) => ReturnEl;
|
|
118
|
+
ItemHint: <T>(props: IDropdownMenuItemHintProps & T) => ReturnEl;
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
export default DropdownMenu;
|
package/lib/cjs/index.js
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
var _exportNames = {};
|
|
9
8
|
Object.defineProperty(exports, "default", {
|
|
10
9
|
enumerable: true,
|
|
11
10
|
get: function get() {
|
|
@@ -13,21 +12,5 @@ Object.defineProperty(exports, "default", {
|
|
|
13
12
|
}
|
|
14
13
|
});
|
|
15
14
|
|
|
16
|
-
var _DropdownMenu =
|
|
17
|
-
|
|
18
|
-
Object.keys(_DropdownMenu).forEach(function (key) {
|
|
19
|
-
if (key === "default" || key === "__esModule") return;
|
|
20
|
-
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
21
|
-
if (key in exports && exports[key] === _DropdownMenu[key]) return;
|
|
22
|
-
Object.defineProperty(exports, key, {
|
|
23
|
-
enumerable: true,
|
|
24
|
-
get: function get() {
|
|
25
|
-
return _DropdownMenu[key];
|
|
26
|
-
}
|
|
27
|
-
});
|
|
28
|
-
});
|
|
29
|
-
|
|
30
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
31
|
-
|
|
32
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
15
|
+
var _DropdownMenu = _interopRequireDefault(require("./DropdownMenu"));
|
|
33
16
|
//# sourceMappingURL=index.js.map
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default } from './DropdownMenu';\n"],"file":"index.js"}
|
package/lib/es6/DropdownMenu.js
CHANGED
|
@@ -261,7 +261,7 @@ var DropdownMenuRoot = /*#__PURE__*/function (_Component) {
|
|
|
261
261
|
}, {
|
|
262
262
|
key: "render",
|
|
263
263
|
value: function render() {
|
|
264
|
-
var _ref = this
|
|
264
|
+
var _ref = this.asProps;
|
|
265
265
|
|
|
266
266
|
var _this$asProps3 = this.asProps,
|
|
267
267
|
Children = _this$asProps3.Children,
|
|
@@ -298,7 +298,7 @@ _defineProperty(DropdownMenuRoot, "defaultProps", {
|
|
|
298
298
|
});
|
|
299
299
|
|
|
300
300
|
function List(props) {
|
|
301
|
-
var _ref2 =
|
|
301
|
+
var _ref2 = arguments[0],
|
|
302
302
|
_ref6;
|
|
303
303
|
|
|
304
304
|
var SDropdownMenuList = Box;
|
|
@@ -309,8 +309,7 @@ function List(props) {
|
|
|
309
309
|
}
|
|
310
310
|
|
|
311
311
|
function Menu() {
|
|
312
|
-
var _ref3 =
|
|
313
|
-
|
|
312
|
+
var _ref3 = arguments[0];
|
|
314
313
|
return /*#__PURE__*/React.createElement(DropdownMenu.Popper, null, /*#__PURE__*/React.createElement(DropdownMenu.List, _assignProps3({}, _ref3)));
|
|
315
314
|
}
|
|
316
315
|
|
|
@@ -347,7 +346,7 @@ function Addon(props) {
|
|
|
347
346
|
}
|
|
348
347
|
|
|
349
348
|
function Hint(props) {
|
|
350
|
-
var _ref4 =
|
|
349
|
+
var _ref4 = arguments[0],
|
|
351
350
|
_ref7;
|
|
352
351
|
|
|
353
352
|
var SDropdownMenuItem = Flex;
|
|
@@ -357,7 +356,7 @@ function Hint(props) {
|
|
|
357
356
|
}
|
|
358
357
|
|
|
359
358
|
function Title(props) {
|
|
360
|
-
var _ref5 =
|
|
359
|
+
var _ref5 = arguments[0],
|
|
361
360
|
_ref8;
|
|
362
361
|
|
|
363
362
|
var SDropdownMenuItem = Flex;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/DropdownMenu.jsx"],"names":["React","cn","createComponent","Component","sstyled","Root","Dropdown","Box","Flex","useBox","useFlex","ScrollAreaComponent","logger","KEYS","INTERACTION_TAGS","DropdownMenuRoot","e","amount","shiftKey","key","includes","target","tagName","preventDefault","handlers","visible","moveHighlightedIndex","_highlightedItem","click","props","index","asProps","onSelect","multiselect","result","node","scrollIntoView","highlightedIndex","prevHighlightedIndex","block","inline","size","onKeyDown","handlerKeyDown","tabIndex","highlighted","extraProps","undefined","onClick","bindHandlerFallbackSelect","_items","push","ref","scrollToNode","itemsLastIndex","length","selectedIndex","findIndex","item","selected","newIndex","disabled","Children","optionCount","triggerType","other","warn","DropdownMenu","displayName","interaction","style","defaultVisible","defaultHighlightedIndex","List","SDropdownMenuList","styles","Menu","Item","forwardRef","SDropdownMenuItem","className","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';\nimport logger from '@semcore/utils/lib/logger';\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 bindHandlerFallbackSelect = (props, index) => () => {\n const { onSelect, multiselect } = this.asProps;\n const result = onSelect({\n index,\n ...props,\n });\n\n if (!multiselect && result !== false) {\n this.handlers.visible(false);\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, onSelect } = this.asProps;\n const highlighted = index === highlightedIndex;\n const extraProps = {};\n\n if (onSelect !== undefined) {\n extraProps.onClick = this.bindHandlerFallbackSelect(props, index);\n }\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, optionCount, triggerType, onSelect, ...other } = this.asProps;\n const props = {};\n\n this._items = [];\n\n logger.warn(\n onSelect !== undefined,\n \"Property 'onSelect' is deprecated, subscribe to the 'onClick' of the needed 'Item'\",\n other['data-ui-name'] || DropdownMenu.displayName,\n );\n logger.warn(\n optionCount !== undefined,\n \"The 'optionCount' property is deprecated and is now automatically determined from the number of Item\",\n other['data-ui-name'] || DropdownMenu.displayName,\n );\n logger.warn(\n triggerType !== undefined,\n \"The 'triggerType' property is deprecated, use 'interaction=\\\"focus\\\"'\",\n other['data-ui-name'] || DropdownMenu.displayName,\n );\n if (triggerType === 'input') {\n props.interaction = 'focus';\n }\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,"sources":["../../src/DropdownMenu.jsx"],"names":["React","cn","createComponent","Component","sstyled","Root","Dropdown","Box","Flex","useBox","useFlex","ScrollAreaComponent","logger","KEYS","INTERACTION_TAGS","DropdownMenuRoot","e","amount","shiftKey","key","includes","target","tagName","preventDefault","handlers","visible","moveHighlightedIndex","_highlightedItem","click","props","index","asProps","onSelect","multiselect","result","node","scrollIntoView","highlightedIndex","prevHighlightedIndex","block","inline","size","onKeyDown","handlerKeyDown","tabIndex","highlighted","extraProps","undefined","onClick","bindHandlerFallbackSelect","_items","push","ref","scrollToNode","itemsLastIndex","length","selectedIndex","findIndex","item","selected","newIndex","disabled","Children","optionCount","triggerType","other","warn","DropdownMenu","displayName","interaction","style","defaultVisible","defaultHighlightedIndex","List","SDropdownMenuList","styles","Menu","Item","forwardRef","SDropdownMenuItem","className","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';\nimport logger from '@semcore/utils/lib/logger';\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 bindHandlerFallbackSelect = (props, index) => () => {\n const { onSelect, multiselect } = this.asProps;\n const result = onSelect({\n index,\n ...props,\n });\n\n if (!multiselect && result !== false) {\n this.handlers.visible(false);\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, onSelect } = this.asProps;\n const highlighted = index === highlightedIndex;\n const extraProps = {};\n\n if (onSelect !== undefined) {\n extraProps.onClick = this.bindHandlerFallbackSelect(props, index);\n }\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, optionCount, triggerType, onSelect, ...other } = this.asProps;\n const props = {};\n\n this._items = [];\n\n logger.warn(\n onSelect !== undefined,\n \"Property 'onSelect' is deprecated, subscribe to the 'onClick' of the needed 'Item'\",\n other['data-ui-name'] || DropdownMenu.displayName,\n );\n logger.warn(\n optionCount !== undefined,\n \"The 'optionCount' property is deprecated and is now automatically determined from the number of Item\",\n other['data-ui-name'] || DropdownMenu.displayName,\n );\n logger.warn(\n triggerType !== undefined,\n \"The 'triggerType' property is deprecated, use 'interaction=\\\"focus\\\"'\",\n other['data-ui-name'] || DropdownMenu.displayName,\n );\n if (triggerType === 'input') {\n props.interaction = 'focus';\n }\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"}
|
|
@@ -0,0 +1,121 @@
|
|
|
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' | 'xl';
|
|
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
|
+
/** @deprecated v2.0.0 */
|
|
28
|
+
optionCount?: number;
|
|
29
|
+
/** Trigger type selection
|
|
30
|
+
* @deprecated v2.0.0 */
|
|
31
|
+
triggerType?: 'button' | 'input';
|
|
32
|
+
/** Handler in option selection
|
|
33
|
+
* @deprecated v2.0.0 */
|
|
34
|
+
onSelect?: (item: any) => void;
|
|
35
|
+
/** Multiple choice of options
|
|
36
|
+
* @deprecated v2.0.0 {@link ISelectProps.multiselect} */
|
|
37
|
+
multiselect?: boolean;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
export interface IDropdownMenuListProps extends IBoxProps, IScrollAreaProps {
|
|
41
|
+
/**
|
|
42
|
+
* Size of the menu
|
|
43
|
+
* @default m
|
|
44
|
+
*/
|
|
45
|
+
size?: DropdownMenuSize;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
export interface IDropdownMenuMenuProps extends IDropdownMenuListProps {}
|
|
49
|
+
|
|
50
|
+
export interface IDropdownMenuItemProps extends IFlexProps {
|
|
51
|
+
/**
|
|
52
|
+
* Enables selected state
|
|
53
|
+
*/
|
|
54
|
+
selected?: boolean;
|
|
55
|
+
/**
|
|
56
|
+
* Disables the component
|
|
57
|
+
*/
|
|
58
|
+
disabled?: boolean;
|
|
59
|
+
/**
|
|
60
|
+
* Adds focus styles around
|
|
61
|
+
*/
|
|
62
|
+
highlighted?: boolean;
|
|
63
|
+
/**
|
|
64
|
+
* Makes the element non-interactive
|
|
65
|
+
*/
|
|
66
|
+
notInteractive?: boolean;
|
|
67
|
+
/**
|
|
68
|
+
* Size of the component
|
|
69
|
+
* @default m
|
|
70
|
+
*/
|
|
71
|
+
size?: DropdownMenuSize;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
export interface IDropdownMenuItemHintProps extends IFlexProps {
|
|
75
|
+
/**
|
|
76
|
+
* Size of the component
|
|
77
|
+
* @default m
|
|
78
|
+
*/
|
|
79
|
+
size?: DropdownMenuSize;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
export interface IDropdownMenuItemTitleProps extends IFlexProps {
|
|
83
|
+
/**
|
|
84
|
+
* Size of the component
|
|
85
|
+
* @default m
|
|
86
|
+
*/
|
|
87
|
+
size?: DropdownMenuSize;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
export interface IDropdownMenuContext extends IDropdownContext {
|
|
91
|
+
getListProps: PropGetterFn;
|
|
92
|
+
getItemProps: PropGetterFn;
|
|
93
|
+
getItemHintProps: PropGetterFn;
|
|
94
|
+
getItemTitleProps: PropGetterFn;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
export interface IDropdownMenuHandlers extends IDropdownHandlers {
|
|
98
|
+
highlightedIndex: (index: number) => void;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
declare const DropdownMenu: (<T>(
|
|
102
|
+
props: CProps<IDropdownMenuProps & T, IDropdownMenuContext, IDropdownMenuHandlers>,
|
|
103
|
+
) => ReturnEl) & {
|
|
104
|
+
Trigger: typeof Dropdown.Trigger;
|
|
105
|
+
Popper: typeof Dropdown.Popper;
|
|
106
|
+
List: <T>(
|
|
107
|
+
props: CProps<IDropdownMenuListProps & T, IDropdownMenuContext, IDropdownMenuHandlers>,
|
|
108
|
+
) => ReturnEl;
|
|
109
|
+
Menu: <T>(
|
|
110
|
+
props: CProps<IDropdownMenuMenuProps & T, IDropdownMenuContext, IDropdownMenuHandlers>,
|
|
111
|
+
) => ReturnEl;
|
|
112
|
+
Item: (<T>(
|
|
113
|
+
props: CProps<IDropdownMenuItemProps & T, IDropdownMenuContext, IDropdownMenuHandlers>,
|
|
114
|
+
) => ReturnEl) & {
|
|
115
|
+
Addon: typeof Box;
|
|
116
|
+
};
|
|
117
|
+
ItemTitle: <T>(props: IDropdownMenuItemTitleProps & T) => ReturnEl;
|
|
118
|
+
ItemHint: <T>(props: IDropdownMenuItemHintProps & T) => ReturnEl;
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
export default DropdownMenu;
|
package/lib/es6/index.js
CHANGED
package/lib/es6/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,gBAAxB
|
|
1
|
+
{"version":3,"sources":["../../src/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,gBAAxB","sourcesContent":["export { default } from './DropdownMenu';\n"],"file":"index.js"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/dropdown-menu",
|
|
3
3
|
"description": "SEMRush DropdownMenu Component",
|
|
4
|
-
"version": "2.3.
|
|
4
|
+
"version": "2.3.12",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -16,7 +16,8 @@
|
|
|
16
16
|
"@semcore/utils": "^3.15",
|
|
17
17
|
"@semcore/dropdown": "^2",
|
|
18
18
|
"@semcore/flex-box": "^4",
|
|
19
|
-
"@semcore/scroll-area": "^3"
|
|
19
|
+
"@semcore/scroll-area": "^3",
|
|
20
|
+
"classnames": "2.2.6"
|
|
20
21
|
},
|
|
21
22
|
"peerDependencies": {
|
|
22
23
|
"@semcore/core": "^1.11",
|
|
@@ -29,5 +30,8 @@
|
|
|
29
30
|
"type": "git",
|
|
30
31
|
"url": "https://github.com/semrush/intergalactic.git",
|
|
31
32
|
"directory": "semcore/dropdown-menu"
|
|
33
|
+
},
|
|
34
|
+
"devDependencies": {
|
|
35
|
+
"@semcore/jest-preset-ui": "1.0.0"
|
|
32
36
|
}
|
|
33
37
|
}
|
package/src/index.js
CHANGED