@semcore/dropdown-menu 3.1.2 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -2,6 +2,12 @@
2
2
 
3
3
  CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
4
4
 
5
+ ## [3.2.0] - 2022-10-10
6
+
7
+ ### Changed
8
+
9
+ - Added support for React 18 🔥
10
+
5
11
  ## [3.1.2] - 2022-10-10
6
12
 
7
13
  ### Changed
@@ -63,23 +63,23 @@ var style = (
63
63
  /*__reshadow_css_start__*/
64
64
  _core.sstyled.insert(
65
65
  /*__inner_css_start__*/
66
- ":root {\n\n /* DEPRECATED START\n Deprecated variables should never be used in\n components styles but preserved for backward\n compatibility if they used in projects\n like `<Badge bg=\"red\">alpha</Badge>`\n */\n /* DEPRECATED END */\n}\n\n.___SDropdownMenuList_12g84_gg_ {\n max-height: 240px;\n margin: 4px 0;\n padding: 0;\n position: relative;\n min-height: 26px;\n min-width: 32px;\n}\n\n.___SDropdownMenuItem_12g84_gg_ {\n display: flex;\n align-items: center;\n position: relative;\n text-decoration: none;\n box-sizing: border-box;\n cursor: pointer;\n width: 100%;\n text-align: left;\n line-height: normal\n}\n\n.___SDropdownMenuItem_12g84_gg_:hover {\n background-color: #f4f5f9;\n }\n\n.___SDropdownMenuItem_12g84_gg_:focus {\n outline: none;\n }\n\n.___SDropdownMenuItem_12g84_gg_.__highlighted_12g84_gg_ {\n z-index: 1;\n box-shadow: 0 0 0 3px rgba(0, 143, 248, 0.2) inset;\n}\n\n.___SDropdownMenuItem_12g84_gg_.__selected_12g84_gg_ {\n background-color: rgba(196, 229, 254, 0.7)\n}\n\n.___SDropdownMenuItem_12g84_gg_.__selected_12g84_gg_:hover {\n background-color: #c4e5fe;\n }\n\n.___SDropdownMenuItem_12g84_gg_.__disabled_12g84_gg_ {\n opacity: 0.3;\n cursor: default;\n pointer-events: none;\n}\n\n.___SDropdownMenuItem_12g84_gg_._size_l_12g84_gg_ {\n font-size: 16px;\n line-height: 1.5;\n padding: 8px 12px;\n min-height: 40px;\n}\n\n.___SDropdownMenuItem_12g84_gg_._size_m_12g84_gg_ {\n font-size: 14px;\n line-height: 1.42;\n padding: 6px 8px;\n min-height: 32px;\n}\n\n.___SDropdownMenuItem_12g84_gg_.__notInteractive_12g84_gg_ {\n cursor: default\n}\n\n.___SDropdownMenuItem_12g84_gg_.__notInteractive_12g84_gg_:hover {\n background: none;\n }\n\n.___SDropdownMenuItem_12g84_gg_._variant_hint_12g84_gg_ {\n color: #6c6e79;\n cursor: default\n}\n\n.___SDropdownMenuItem_12g84_gg_._variant_hint_12g84_gg_:hover {\n background: none;\n }\n\n.___SDropdownMenuItem_12g84_gg_._variant_title_12g84_gg_ {\n font-weight: bold;\n cursor: default\n}\n\n.___SDropdownMenuItem_12g84_gg_._variant_title_12g84_gg_:hover {\n background: none;\n }\n\n.___SDropdownMenuItemAddon_12g84_gg_ {\n display: inline-flex;\n margin-left: 8px;\n margin-right: 8px\n}\n\n.___SDropdownMenuItemAddon_12g84_gg_:first-child {\n margin-left: 0;\n }\n\n.___SDropdownMenuItemAddon_12g84_gg_:last-child {\n margin-right: 0;\n }\n\n.___SPopper_12g84_gg_:focus {\n box-shadow: 0 0 0 3px rgba(0, 143, 248, 0.2);\n }\n"
66
+ ":root {\n\n /* DEPRECATED START\n Deprecated variables should never be used in\n components styles but preserved for backward\n compatibility if they used in projects\n like `<Badge bg=\"red\">alpha</Badge>`\n */\n /* DEPRECATED END */\n}\n\n.___SDropdownMenuList_1nxof_gg_ {\n max-height: 240px;\n margin: 4px 0;\n padding: 0;\n position: relative;\n min-height: 26px;\n min-width: 32px;\n}\n\n.___SDropdownMenuItem_1nxof_gg_ {\n display: flex;\n align-items: center;\n position: relative;\n text-decoration: none;\n box-sizing: border-box;\n cursor: pointer;\n width: 100%;\n text-align: left;\n line-height: normal\n}\n\n.___SDropdownMenuItem_1nxof_gg_:hover {\n background-color: #f4f5f9;\n }\n\n.___SDropdownMenuItem_1nxof_gg_:focus {\n outline: none;\n }\n\n.___SDropdownMenuItem_1nxof_gg_.__highlighted_1nxof_gg_ {\n z-index: 1;\n box-shadow: 0 0 0 3px rgba(0, 143, 248, 0.2) inset;\n}\n\n.___SDropdownMenuItem_1nxof_gg_.__selected_1nxof_gg_ {\n background-color: rgba(196, 229, 254, 0.7)\n}\n\n.___SDropdownMenuItem_1nxof_gg_.__selected_1nxof_gg_:hover {\n background-color: #c4e5fe;\n }\n\n.___SDropdownMenuItem_1nxof_gg_.__disabled_1nxof_gg_ {\n opacity: 0.3;\n cursor: default;\n pointer-events: none;\n}\n\n.___SDropdownMenuItem_1nxof_gg_._size_l_1nxof_gg_ {\n font-size: 16px;\n line-height: 1.5;\n padding: 8px 12px;\n min-height: 40px;\n}\n\n.___SDropdownMenuItem_1nxof_gg_._size_m_1nxof_gg_ {\n font-size: 14px;\n line-height: 1.42;\n padding: 6px 8px;\n min-height: 32px;\n}\n\n.___SDropdownMenuItem_1nxof_gg_.__notInteractive_1nxof_gg_ {\n cursor: default\n}\n\n.___SDropdownMenuItem_1nxof_gg_.__notInteractive_1nxof_gg_:hover {\n background: none;\n }\n\n.___SDropdownMenuItem_1nxof_gg_._variant_hint_1nxof_gg_ {\n color: #6c6e79;\n cursor: default\n}\n\n.___SDropdownMenuItem_1nxof_gg_._variant_hint_1nxof_gg_:hover {\n background: none;\n }\n\n.___SDropdownMenuItem_1nxof_gg_._variant_title_1nxof_gg_ {\n font-weight: bold;\n cursor: default\n}\n\n.___SDropdownMenuItem_1nxof_gg_._variant_title_1nxof_gg_:hover {\n background: none;\n }\n\n.___SDropdownMenuItemAddon_1nxof_gg_ {\n display: inline-flex;\n margin-left: 8px;\n margin-right: 8px\n}\n\n.___SDropdownMenuItemAddon_1nxof_gg_:first-child {\n margin-left: 0;\n }\n\n.___SDropdownMenuItemAddon_1nxof_gg_:last-child {\n margin-right: 0;\n }\n\n.___SPopper_1nxof_gg_:focus {\n box-shadow: 0 0 0 3px rgba(0, 143, 248, 0.2);\n }\n"
67
67
  /*__inner_css_end__*/
68
- , "12g84_gg_")
68
+ , "1nxof_gg_")
69
69
  /*__reshadow_css_end__*/
70
70
  , {
71
- "__SDropdownMenuList": "___SDropdownMenuList_12g84_gg_",
72
- "__SDropdownMenuItem": "___SDropdownMenuItem_12g84_gg_",
73
- "_highlighted": "__highlighted_12g84_gg_",
74
- "_selected": "__selected_12g84_gg_",
75
- "_disabled": "__disabled_12g84_gg_",
76
- "_size_l": "_size_l_12g84_gg_",
77
- "_size_m": "_size_m_12g84_gg_",
78
- "_notInteractive": "__notInteractive_12g84_gg_",
79
- "_variant_hint": "_variant_hint_12g84_gg_",
80
- "_variant_title": "_variant_title_12g84_gg_",
81
- "__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_12g84_gg_",
82
- "__SPopper": "___SPopper_12g84_gg_"
71
+ "__SDropdownMenuList": "___SDropdownMenuList_1nxof_gg_",
72
+ "__SDropdownMenuItem": "___SDropdownMenuItem_1nxof_gg_",
73
+ "_highlighted": "__highlighted_1nxof_gg_",
74
+ "_selected": "__selected_1nxof_gg_",
75
+ "_disabled": "__disabled_1nxof_gg_",
76
+ "_size_l": "_size_l_1nxof_gg_",
77
+ "_size_m": "_size_m_1nxof_gg_",
78
+ "_notInteractive": "__notInteractive_1nxof_gg_",
79
+ "_variant_hint": "_variant_hint_1nxof_gg_",
80
+ "_variant_title": "_variant_title_1nxof_gg_",
81
+ "__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_1nxof_gg_",
82
+ "__SPopper": "___SPopper_1nxof_gg_"
83
83
  });
84
84
  var KEYS = ['ArrowDown', 'ArrowUp', 'Enter', ' '];
85
85
  var INTERACTION_TAGS = ['INPUT', 'TEXTAREA'];
@@ -39,23 +39,23 @@ var style = (
39
39
  /*__reshadow_css_start__*/
40
40
  _sstyled.insert(
41
41
  /*__inner_css_start__*/
42
- ":root {\n\n /* DEPRECATED START\n Deprecated variables should never be used in\n components styles but preserved for backward\n compatibility if they used in projects\n like `<Badge bg=\"red\">alpha</Badge>`\n */\n /* DEPRECATED END */\n}\n\n.___SDropdownMenuList_12g84_gg_ {\n max-height: 240px;\n margin: 4px 0;\n padding: 0;\n position: relative;\n min-height: 26px;\n min-width: 32px;\n}\n\n.___SDropdownMenuItem_12g84_gg_ {\n display: flex;\n align-items: center;\n position: relative;\n text-decoration: none;\n box-sizing: border-box;\n cursor: pointer;\n width: 100%;\n text-align: left;\n line-height: normal\n}\n\n.___SDropdownMenuItem_12g84_gg_:hover {\n background-color: #f4f5f9;\n }\n\n.___SDropdownMenuItem_12g84_gg_:focus {\n outline: none;\n }\n\n.___SDropdownMenuItem_12g84_gg_.__highlighted_12g84_gg_ {\n z-index: 1;\n box-shadow: 0 0 0 3px rgba(0, 143, 248, 0.2) inset;\n}\n\n.___SDropdownMenuItem_12g84_gg_.__selected_12g84_gg_ {\n background-color: rgba(196, 229, 254, 0.7)\n}\n\n.___SDropdownMenuItem_12g84_gg_.__selected_12g84_gg_:hover {\n background-color: #c4e5fe;\n }\n\n.___SDropdownMenuItem_12g84_gg_.__disabled_12g84_gg_ {\n opacity: 0.3;\n cursor: default;\n pointer-events: none;\n}\n\n.___SDropdownMenuItem_12g84_gg_._size_l_12g84_gg_ {\n font-size: 16px;\n line-height: 1.5;\n padding: 8px 12px;\n min-height: 40px;\n}\n\n.___SDropdownMenuItem_12g84_gg_._size_m_12g84_gg_ {\n font-size: 14px;\n line-height: 1.42;\n padding: 6px 8px;\n min-height: 32px;\n}\n\n.___SDropdownMenuItem_12g84_gg_.__notInteractive_12g84_gg_ {\n cursor: default\n}\n\n.___SDropdownMenuItem_12g84_gg_.__notInteractive_12g84_gg_:hover {\n background: none;\n }\n\n.___SDropdownMenuItem_12g84_gg_._variant_hint_12g84_gg_ {\n color: #6c6e79;\n cursor: default\n}\n\n.___SDropdownMenuItem_12g84_gg_._variant_hint_12g84_gg_:hover {\n background: none;\n }\n\n.___SDropdownMenuItem_12g84_gg_._variant_title_12g84_gg_ {\n font-weight: bold;\n cursor: default\n}\n\n.___SDropdownMenuItem_12g84_gg_._variant_title_12g84_gg_:hover {\n background: none;\n }\n\n.___SDropdownMenuItemAddon_12g84_gg_ {\n display: inline-flex;\n margin-left: 8px;\n margin-right: 8px\n}\n\n.___SDropdownMenuItemAddon_12g84_gg_:first-child {\n margin-left: 0;\n }\n\n.___SDropdownMenuItemAddon_12g84_gg_:last-child {\n margin-right: 0;\n }\n\n.___SPopper_12g84_gg_:focus {\n box-shadow: 0 0 0 3px rgba(0, 143, 248, 0.2);\n }\n"
42
+ ":root {\n\n /* DEPRECATED START\n Deprecated variables should never be used in\n components styles but preserved for backward\n compatibility if they used in projects\n like `<Badge bg=\"red\">alpha</Badge>`\n */\n /* DEPRECATED END */\n}\n\n.___SDropdownMenuList_1nxof_gg_ {\n max-height: 240px;\n margin: 4px 0;\n padding: 0;\n position: relative;\n min-height: 26px;\n min-width: 32px;\n}\n\n.___SDropdownMenuItem_1nxof_gg_ {\n display: flex;\n align-items: center;\n position: relative;\n text-decoration: none;\n box-sizing: border-box;\n cursor: pointer;\n width: 100%;\n text-align: left;\n line-height: normal\n}\n\n.___SDropdownMenuItem_1nxof_gg_:hover {\n background-color: #f4f5f9;\n }\n\n.___SDropdownMenuItem_1nxof_gg_:focus {\n outline: none;\n }\n\n.___SDropdownMenuItem_1nxof_gg_.__highlighted_1nxof_gg_ {\n z-index: 1;\n box-shadow: 0 0 0 3px rgba(0, 143, 248, 0.2) inset;\n}\n\n.___SDropdownMenuItem_1nxof_gg_.__selected_1nxof_gg_ {\n background-color: rgba(196, 229, 254, 0.7)\n}\n\n.___SDropdownMenuItem_1nxof_gg_.__selected_1nxof_gg_:hover {\n background-color: #c4e5fe;\n }\n\n.___SDropdownMenuItem_1nxof_gg_.__disabled_1nxof_gg_ {\n opacity: 0.3;\n cursor: default;\n pointer-events: none;\n}\n\n.___SDropdownMenuItem_1nxof_gg_._size_l_1nxof_gg_ {\n font-size: 16px;\n line-height: 1.5;\n padding: 8px 12px;\n min-height: 40px;\n}\n\n.___SDropdownMenuItem_1nxof_gg_._size_m_1nxof_gg_ {\n font-size: 14px;\n line-height: 1.42;\n padding: 6px 8px;\n min-height: 32px;\n}\n\n.___SDropdownMenuItem_1nxof_gg_.__notInteractive_1nxof_gg_ {\n cursor: default\n}\n\n.___SDropdownMenuItem_1nxof_gg_.__notInteractive_1nxof_gg_:hover {\n background: none;\n }\n\n.___SDropdownMenuItem_1nxof_gg_._variant_hint_1nxof_gg_ {\n color: #6c6e79;\n cursor: default\n}\n\n.___SDropdownMenuItem_1nxof_gg_._variant_hint_1nxof_gg_:hover {\n background: none;\n }\n\n.___SDropdownMenuItem_1nxof_gg_._variant_title_1nxof_gg_ {\n font-weight: bold;\n cursor: default\n}\n\n.___SDropdownMenuItem_1nxof_gg_._variant_title_1nxof_gg_:hover {\n background: none;\n }\n\n.___SDropdownMenuItemAddon_1nxof_gg_ {\n display: inline-flex;\n margin-left: 8px;\n margin-right: 8px\n}\n\n.___SDropdownMenuItemAddon_1nxof_gg_:first-child {\n margin-left: 0;\n }\n\n.___SDropdownMenuItemAddon_1nxof_gg_:last-child {\n margin-right: 0;\n }\n\n.___SPopper_1nxof_gg_:focus {\n box-shadow: 0 0 0 3px rgba(0, 143, 248, 0.2);\n }\n"
43
43
  /*__inner_css_end__*/
44
- , "12g84_gg_")
44
+ , "1nxof_gg_")
45
45
  /*__reshadow_css_end__*/
46
46
  , {
47
- "__SDropdownMenuList": "___SDropdownMenuList_12g84_gg_",
48
- "__SDropdownMenuItem": "___SDropdownMenuItem_12g84_gg_",
49
- "_highlighted": "__highlighted_12g84_gg_",
50
- "_selected": "__selected_12g84_gg_",
51
- "_disabled": "__disabled_12g84_gg_",
52
- "_size_l": "_size_l_12g84_gg_",
53
- "_size_m": "_size_m_12g84_gg_",
54
- "_notInteractive": "__notInteractive_12g84_gg_",
55
- "_variant_hint": "_variant_hint_12g84_gg_",
56
- "_variant_title": "_variant_title_12g84_gg_",
57
- "__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_12g84_gg_",
58
- "__SPopper": "___SPopper_12g84_gg_"
47
+ "__SDropdownMenuList": "___SDropdownMenuList_1nxof_gg_",
48
+ "__SDropdownMenuItem": "___SDropdownMenuItem_1nxof_gg_",
49
+ "_highlighted": "__highlighted_1nxof_gg_",
50
+ "_selected": "__selected_1nxof_gg_",
51
+ "_disabled": "__disabled_1nxof_gg_",
52
+ "_size_l": "_size_l_1nxof_gg_",
53
+ "_size_m": "_size_m_1nxof_gg_",
54
+ "_notInteractive": "__notInteractive_1nxof_gg_",
55
+ "_variant_hint": "_variant_hint_1nxof_gg_",
56
+ "_variant_title": "_variant_title_1nxof_gg_",
57
+ "__SDropdownMenuItemAddon": "___SDropdownMenuItemAddon_1nxof_gg_",
58
+ "__SPopper": "___SPopper_1nxof_gg_"
59
59
  });
60
60
  var KEYS = ['ArrowDown', 'ArrowUp', 'Enter', ' '];
61
61
  var INTERACTION_TAGS = ['INPUT', 'TEXTAREA'];
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/dropdown-menu",
3
3
  "description": "Semrush DropdownMenu Component",
4
- "version": "3.1.2",
4
+ "version": "3.2.0",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",
@@ -16,8 +16,8 @@
16
16
  "classnames": "2.2.6"
17
17
  },
18
18
  "peerDependencies": {
19
- "@semcore/core": "^1.11",
20
- "react": "16.8 - 17"
19
+ "@semcore/core": "^1.12",
20
+ "react": "16.8 - 18"
21
21
  },
22
22
  "jest": {
23
23
  "preset": "@semcore/jest-preset-ui"
@@ -28,7 +28,7 @@
28
28
  "directory": "semcore/dropdown-menu"
29
29
  },
30
30
  "devDependencies": {
31
- "@types/react": "16.8 - 17",
31
+ "@types/react": "18.0.21",
32
32
  "@guidepup/playwright": "0.6.1",
33
33
  "@playwright/test": "1.25.1",
34
34
  "@semcore/jest-preset-ui": "1.0.0"