@neo4j-ndl/react 4.18.9 → 4.18.10
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/lib/cjs/menu/Menu.js +10 -1
- package/lib/cjs/menu/Menu.js.map +1 -1
- package/lib/cjs/menu/stories/menu-custom-items.story.js +1 -1
- package/lib/cjs/menu/stories/menu-custom-items.story.js.map +1 -1
- package/lib/cjs/menu/stories/menu-default.story.js +1 -1
- package/lib/cjs/menu/stories/menu-default.story.js.map +1 -1
- package/lib/cjs/menu/stories/menu-in-dialog.story.js +1 -1
- package/lib/cjs/menu/stories/menu-in-dialog.story.js.map +1 -1
- package/lib/cjs/menu/stories/menu-in-popover.story.js +1 -1
- package/lib/cjs/menu/stories/menu-in-popover.story.js.map +1 -1
- package/lib/cjs/menu/stories/menu-nested.story.js +1 -1
- package/lib/cjs/menu/stories/menu-nested.story.js.map +1 -1
- package/lib/cjs/menu/stories/menu-placements.story.js +1 -1
- package/lib/cjs/menu/stories/menu-placements.story.js.map +1 -1
- package/lib/cjs/menu/stories/menu-with-category.story.js +1 -1
- package/lib/cjs/menu/stories/menu-with-category.story.js.map +1 -1
- package/lib/cjs/menu/stories/menu-with-disabled-item.story.js +1 -1
- package/lib/cjs/menu/stories/menu-with-disabled-item.story.js.map +1 -1
- package/lib/cjs/menu/stories/menu-with-divider.story.js +1 -1
- package/lib/cjs/menu/stories/menu-with-divider.story.js.map +1 -1
- package/lib/cjs/menu/stories/menu-with-icon.story.js +1 -1
- package/lib/cjs/menu/stories/menu-with-icon.story.js.map +1 -1
- package/lib/cjs/menu/stories/menu-with-keyboard-shortcuts.story.js +1 -1
- package/lib/cjs/menu/stories/menu-with-keyboard-shortcuts.story.js.map +1 -1
- package/lib/esm/menu/Menu.js +11 -2
- package/lib/esm/menu/Menu.js.map +1 -1
- package/lib/esm/menu/stories/menu-custom-items.story.js +2 -2
- package/lib/esm/menu/stories/menu-custom-items.story.js.map +1 -1
- package/lib/esm/menu/stories/menu-default.story.js +2 -2
- package/lib/esm/menu/stories/menu-default.story.js.map +1 -1
- package/lib/esm/menu/stories/menu-in-dialog.story.js +2 -2
- package/lib/esm/menu/stories/menu-in-dialog.story.js.map +1 -1
- package/lib/esm/menu/stories/menu-in-popover.story.js +2 -2
- package/lib/esm/menu/stories/menu-in-popover.story.js.map +1 -1
- package/lib/esm/menu/stories/menu-nested.story.js +2 -2
- package/lib/esm/menu/stories/menu-nested.story.js.map +1 -1
- package/lib/esm/menu/stories/menu-placements.story.js +2 -2
- package/lib/esm/menu/stories/menu-placements.story.js.map +1 -1
- package/lib/esm/menu/stories/menu-with-category.story.js +2 -2
- package/lib/esm/menu/stories/menu-with-category.story.js.map +1 -1
- package/lib/esm/menu/stories/menu-with-disabled-item.story.js +2 -2
- package/lib/esm/menu/stories/menu-with-disabled-item.story.js.map +1 -1
- package/lib/esm/menu/stories/menu-with-divider.story.js +2 -2
- package/lib/esm/menu/stories/menu-with-divider.story.js.map +1 -1
- package/lib/esm/menu/stories/menu-with-icon.story.js +2 -2
- package/lib/esm/menu/stories/menu-with-icon.story.js.map +1 -1
- package/lib/esm/menu/stories/menu-with-keyboard-shortcuts.story.js +2 -2
- package/lib/esm/menu/stories/menu-with-keyboard-shortcuts.story.js.map +1 -1
- package/lib/types/menu/Menu.d.ts.map +1 -1
- package/package.json +1 -1
- package/skills/ndl-react/components/data-grid.md +22 -0
- package/skills/ndl-react/components/menu.md +46 -46
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-placements.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-placements.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"menu-placements.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-placements.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,8BACE,MAAC,IAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,SAAS,EAAC,yBAAyB,EACnC,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBACzB,SAAS,CAAC,KAAK,CAAC,CAAC;gBACnB,CAAC,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,iBAAiB,EAAE,aAEzC,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,sBAAsB,EAClC,UAAU,EAAE,IAAI,EAChB,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,qBAAqB,EACjC,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,EAAE,EAAC,UAAU,EACb,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,kCAAkC,GAC9C,IACG,EAEP,KAAC,cAAc,IACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,mBACC,MAAM,0BAGL,IAChB,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DropdownButton, Menu } from '@neo4j-ndl/react';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n const anchorEl = useRef<HTMLButtonElement | null>(null);\n const [isOpen, setIsOpen] = useState(false);\n\n return (\n <>\n <Menu\n isOpen={isOpen}\n anchorRef={anchorEl}\n placement=\"middle-end-middle-start\"\n onClose={(_event, _data) => {\n setIsOpen(false);\n }}\n htmlAttributes={{ id: 'placements-menu' }}\n >\n <Menu.Item\n title=\"Action 1\"\n onClick={() => {\n alert('Action1');\n setIsOpen(false);\n }}\n />\n <Menu.Item\n title=\"Action 2\"\n onClick={() => {\n alert('Action2');\n setIsOpen(false);\n }}\n />\n <Menu.Item\n title=\"Action 3\"\n description=\"Action 3 is disabled\"\n isDisabled={true}\n onClick={() => {\n alert('Action3');\n setIsOpen(false);\n }}\n />\n <Menu.Item\n title=\"Action 4\"\n description=\"Action 4 is awesome\"\n onClick={() => {\n alert('Action4');\n setIsOpen(false);\n }}\n />\n <Menu.Item\n id=\"action_5\"\n title=\"Action 5\"\n description=\"Action 5 does not close the menu\"\n />\n </Menu>\n\n <DropdownButton\n isOpen={isOpen}\n onClick={() => setIsOpen(true)}\n ref={anchorEl}\n aria-haspopup=\"menu\"\n >\n Open Menu\n </DropdownButton>\n </>\n );\n};\n\nexport default Component;\n"]}
|
|
@@ -20,14 +20,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
20
20
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
21
21
|
*/
|
|
22
22
|
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
|
|
23
|
-
import {
|
|
23
|
+
import { DropdownButton, Menu } from '@neo4j-ndl/react';
|
|
24
24
|
import { useRef, useState } from 'react';
|
|
25
25
|
const Component = () => {
|
|
26
26
|
const anchorEl = useRef(null);
|
|
27
27
|
const [isOpen, setIsOpen] = useState(false);
|
|
28
28
|
return (_jsxs(_Fragment, { children: [_jsxs(Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: (_event, _data) => {
|
|
29
29
|
setIsOpen(false);
|
|
30
|
-
}, htmlAttributes: { id: 'category-menu' }, children: [_jsxs(Menu.Group, { children: [_jsx(Menu.CategoryItem, { children: "Category 1" }), _jsx(Menu.Item, { title: "Action 1", onClick: () => alert('Action1') }), _jsx(Menu.Item, { title: "Action 2", onClick: () => alert('Action2') })] }), _jsx(Menu.Divider, {}), _jsxs(Menu.Group, { children: [_jsx(Menu.Item, { title: "Action 3", description: "Action 3 is disabled", isDisabled: true, onClick: () => alert('Action3') }), _jsx(Menu.Item, { title: "Action 4", description: "Action 4 is awesome", onClick: () => alert('Action4') })] })] }), _jsx(
|
|
30
|
+
}, htmlAttributes: { id: 'category-menu' }, children: [_jsxs(Menu.Group, { children: [_jsx(Menu.CategoryItem, { children: "Category 1" }), _jsx(Menu.Item, { title: "Action 1", onClick: () => alert('Action1') }), _jsx(Menu.Item, { title: "Action 2", onClick: () => alert('Action2') })] }), _jsx(Menu.Divider, {}), _jsxs(Menu.Group, { children: [_jsx(Menu.Item, { title: "Action 3", description: "Action 3 is disabled", isDisabled: true, onClick: () => alert('Action3') }), _jsx(Menu.Item, { title: "Action 4", description: "Action 4 is awesome", onClick: () => alert('Action4') })] })] }), _jsx(DropdownButton, { isOpen: isOpen, onClick: () => setIsOpen(true), ref: anchorEl, "aria-haspopup": "menu", children: "Open Menu" })] }));
|
|
31
31
|
};
|
|
32
32
|
export default Component;
|
|
33
33
|
//# sourceMappingURL=menu-with-category.story.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-with-category.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-with-category.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"menu-with-category.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-with-category.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,8BACE,MAAC,IAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBACzB,SAAS,CAAC,KAAK,CAAC,CAAC;gBACnB,CAAC,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,eAAe,EAAE,aAEvC,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,YAAY,6BAA+B,EACjD,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAAI,EAC/D,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAAI,IACpD,EACb,KAAC,IAAI,CAAC,OAAO,KAAG,EAChB,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,sBAAsB,EAClC,UAAU,EAAE,IAAI,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,EACF,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,qBAAqB,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,IACS,IACR,EACP,KAAC,cAAc,IACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,mBACC,MAAM,0BAGL,IAChB,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DropdownButton, Menu } from '@neo4j-ndl/react';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n const anchorEl = useRef<HTMLButtonElement | null>(null);\n const [isOpen, setIsOpen] = useState(false);\n\n return (\n <>\n <Menu\n isOpen={isOpen}\n anchorRef={anchorEl}\n onClose={(_event, _data) => {\n setIsOpen(false);\n }}\n htmlAttributes={{ id: 'category-menu' }}\n >\n <Menu.Group>\n <Menu.CategoryItem>Category 1</Menu.CategoryItem>\n <Menu.Item title=\"Action 1\" onClick={() => alert('Action1')} />\n <Menu.Item title=\"Action 2\" onClick={() => alert('Action2')} />\n </Menu.Group>\n <Menu.Divider />\n <Menu.Group>\n <Menu.Item\n title=\"Action 3\"\n description=\"Action 3 is disabled\"\n isDisabled={true}\n onClick={() => alert('Action3')}\n />\n <Menu.Item\n title=\"Action 4\"\n description=\"Action 4 is awesome\"\n onClick={() => alert('Action4')}\n />\n </Menu.Group>\n </Menu>\n <DropdownButton\n isOpen={isOpen}\n onClick={() => setIsOpen(true)}\n ref={anchorEl}\n aria-haspopup=\"menu\"\n >\n Open Menu\n </DropdownButton>\n </>\n );\n};\n\nexport default Component;\n"]}
|
|
@@ -20,14 +20,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
20
20
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
21
21
|
*/
|
|
22
22
|
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
|
|
23
|
-
import {
|
|
23
|
+
import { DropdownButton, Menu } from '@neo4j-ndl/react';
|
|
24
24
|
import { useRef, useState } from 'react';
|
|
25
25
|
const Component = () => {
|
|
26
26
|
const anchorEl = useRef(null);
|
|
27
27
|
const [isOpen, setIsOpen] = useState(false);
|
|
28
28
|
return (_jsxs(_Fragment, { children: [_jsxs(Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: (_event, _data) => {
|
|
29
29
|
setIsOpen(false);
|
|
30
|
-
}, htmlAttributes: { id: 'disabled-item-menu' }, children: [_jsx(Menu.Item, { title: "Action 1", description: "Action 1 is disabled", isDisabled: true }), _jsx(Menu.Item, { title: "Action 2", onClick: () => alert('Action2') })] }), _jsx(
|
|
30
|
+
}, htmlAttributes: { id: 'disabled-item-menu' }, children: [_jsx(Menu.Item, { title: "Action 1", description: "Action 1 is disabled", isDisabled: true }), _jsx(Menu.Item, { title: "Action 2", onClick: () => alert('Action2') })] }), _jsx(DropdownButton, { isOpen: isOpen, onClick: () => setIsOpen(true), ref: anchorEl, "aria-haspopup": "menu", children: "Open Menu" })] }));
|
|
31
31
|
};
|
|
32
32
|
export default Component;
|
|
33
33
|
//# sourceMappingURL=menu-with-disabled-item.story.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-with-disabled-item.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-with-disabled-item.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"menu-with-disabled-item.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-with-disabled-item.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,8BACE,MAAC,IAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBACzB,SAAS,CAAC,KAAK,CAAC,CAAC;gBACnB,CAAC,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,oBAAoB,EAAE,aAE5C,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,sBAAsB,EAClC,UAAU,EAAE,IAAI,GAChB,EACF,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAAI,IAC1D,EACP,KAAC,cAAc,IACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,mBACC,MAAM,0BAGL,IAChB,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DropdownButton, Menu } from '@neo4j-ndl/react';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n const anchorEl = useRef<HTMLButtonElement | null>(null);\n const [isOpen, setIsOpen] = useState(false);\n\n return (\n <>\n <Menu\n isOpen={isOpen}\n anchorRef={anchorEl}\n onClose={(_event, _data) => {\n setIsOpen(false);\n }}\n htmlAttributes={{ id: 'disabled-item-menu' }}\n >\n <Menu.Item\n title=\"Action 1\"\n description=\"Action 1 is disabled\"\n isDisabled={true}\n />\n <Menu.Item title=\"Action 2\" onClick={() => alert('Action2')} />\n </Menu>\n <DropdownButton\n isOpen={isOpen}\n onClick={() => setIsOpen(true)}\n ref={anchorEl}\n aria-haspopup=\"menu\"\n >\n Open Menu\n </DropdownButton>\n </>\n );\n};\n\nexport default Component;\n"]}
|
|
@@ -20,14 +20,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
20
20
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
21
21
|
*/
|
|
22
22
|
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
|
|
23
|
-
import {
|
|
23
|
+
import { DropdownButton, Menu } from '@neo4j-ndl/react';
|
|
24
24
|
import { useRef, useState } from 'react';
|
|
25
25
|
const Component = () => {
|
|
26
26
|
const anchorEl = useRef(null);
|
|
27
27
|
const [isOpen, setIsOpen] = useState(false);
|
|
28
28
|
return (_jsxs(_Fragment, { children: [_jsxs(Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: (_event, _data) => {
|
|
29
29
|
setIsOpen(false);
|
|
30
|
-
}, htmlAttributes: { id: 'divider-menu' }, children: [_jsx(Menu.Item, { title: "Action 1" }), _jsx(Menu.Divider, {}), _jsx(Menu.Item, { title: "Action 2" }), _jsx(Menu.Divider, {}), _jsx(Menu.Item, { title: "Action 3" }), _jsx(Menu.Divider, {}), _jsx(Menu.Item, { title: "Action 4" })] }), _jsx(
|
|
30
|
+
}, htmlAttributes: { id: 'divider-menu' }, children: [_jsx(Menu.Item, { title: "Action 1" }), _jsx(Menu.Divider, {}), _jsx(Menu.Item, { title: "Action 2" }), _jsx(Menu.Divider, {}), _jsx(Menu.Item, { title: "Action 3" }), _jsx(Menu.Divider, {}), _jsx(Menu.Item, { title: "Action 4" })] }), _jsx(DropdownButton, { isOpen: isOpen, onClick: () => setIsOpen(true), ref: anchorEl, "aria-haspopup": "menu", children: "Open Menu" })] }));
|
|
31
31
|
};
|
|
32
32
|
export default Component;
|
|
33
33
|
//# sourceMappingURL=menu-with-divider.story.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-with-divider.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-with-divider.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"menu-with-divider.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-with-divider.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,8BACE,MAAC,IAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBACzB,SAAS,CAAC,KAAK,CAAC,CAAC;gBACnB,CAAC,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,aAEtC,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,GAAG,EAC9B,KAAC,IAAI,CAAC,OAAO,KAAG,EAChB,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,GAAG,EAC9B,KAAC,IAAI,CAAC,OAAO,KAAG,EAChB,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,GAAG,EAC9B,KAAC,IAAI,CAAC,OAAO,KAAG,EAChB,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,GAAG,IACzB,EACP,KAAC,cAAc,IACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,mBACC,MAAM,0BAGL,IAChB,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DropdownButton, Menu } from '@neo4j-ndl/react';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n const anchorEl = useRef<HTMLButtonElement | null>(null);\n const [isOpen, setIsOpen] = useState(false);\n\n return (\n <>\n <Menu\n isOpen={isOpen}\n anchorRef={anchorEl}\n onClose={(_event, _data) => {\n setIsOpen(false);\n }}\n htmlAttributes={{ id: 'divider-menu' }}\n >\n <Menu.Item title=\"Action 1\" />\n <Menu.Divider />\n <Menu.Item title=\"Action 2\" />\n <Menu.Divider />\n <Menu.Item title=\"Action 3\" />\n <Menu.Divider />\n <Menu.Item title=\"Action 4\" />\n </Menu>\n <DropdownButton\n isOpen={isOpen}\n onClick={() => setIsOpen(true)}\n ref={anchorEl}\n aria-haspopup=\"menu\"\n >\n Open Menu\n </DropdownButton>\n </>\n );\n};\n\nexport default Component;\n"]}
|
|
@@ -20,7 +20,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
20
20
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
21
21
|
*/
|
|
22
22
|
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
|
|
23
|
-
import {
|
|
23
|
+
import { DropdownButton, Menu } from '@neo4j-ndl/react';
|
|
24
24
|
import { PhotoIconOutline, PlusIconOutline } from '@neo4j-ndl/react/icons';
|
|
25
25
|
import { useRef, useState } from 'react';
|
|
26
26
|
const Component = () => {
|
|
@@ -28,7 +28,7 @@ const Component = () => {
|
|
|
28
28
|
const [isOpen, setIsOpen] = useState(false);
|
|
29
29
|
return (_jsxs(_Fragment, { children: [_jsxs(Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: (_event, _data) => {
|
|
30
30
|
setIsOpen(false);
|
|
31
|
-
}, htmlAttributes: { id: 'icon-menu' }, children: [_jsx(Menu.Item, { leadingVisual: _jsx(PlusIconOutline, {}), title: "Action 1", onClick: () => alert('Action1') }), _jsx(Menu.Item, { leadingVisual: _jsx(PlusIconOutline, {}), title: "Action 2", onClick: () => alert('Action2') }), _jsx(Menu.Item, { leadingVisual: _jsx(PlusIconOutline, {}), title: "Action 3", description: "Action 3 is disabled", isDisabled: true, onClick: () => alert('Action3') }), _jsxs(Menu, { title: "Action 3.1", description: "Action with sub menu", icon: _jsx(PlusIconOutline, {}), children: [_jsx(Menu.Item, { title: "Text" }), _jsx(Menu.Item, { title: "Video" }), _jsxs(Menu, { title: "Image", icon: _jsx(PhotoIconOutline, {}), children: [_jsx(Menu.Item, { title: ".png" }), _jsx(Menu.Item, { title: ".jpg" })] }), _jsx(Menu.Item, { title: "Audio" })] }), _jsx(Menu.Item, { leadingVisual: _jsx(PlusIconOutline, {}), title: "Action 4", description: "Action 4 is awesome", onClick: () => alert('Action4') })] }), _jsx(
|
|
31
|
+
}, htmlAttributes: { id: 'icon-menu' }, children: [_jsx(Menu.Item, { leadingVisual: _jsx(PlusIconOutline, {}), title: "Action 1", onClick: () => alert('Action1') }), _jsx(Menu.Item, { leadingVisual: _jsx(PlusIconOutline, {}), title: "Action 2", onClick: () => alert('Action2') }), _jsx(Menu.Item, { leadingVisual: _jsx(PlusIconOutline, {}), title: "Action 3", description: "Action 3 is disabled", isDisabled: true, onClick: () => alert('Action3') }), _jsxs(Menu, { title: "Action 3.1", description: "Action with sub menu", icon: _jsx(PlusIconOutline, {}), children: [_jsx(Menu.Item, { title: "Text" }), _jsx(Menu.Item, { title: "Video" }), _jsxs(Menu, { title: "Image", icon: _jsx(PhotoIconOutline, {}), children: [_jsx(Menu.Item, { title: ".png" }), _jsx(Menu.Item, { title: ".jpg" })] }), _jsx(Menu.Item, { title: "Audio" })] }), _jsx(Menu.Item, { leadingVisual: _jsx(PlusIconOutline, {}), title: "Action 4", description: "Action 4 is awesome", onClick: () => alert('Action4') })] }), _jsx(DropdownButton, { isOpen: isOpen, onClick: () => setIsOpen(true), ref: anchorEl, "aria-haspopup": "menu", children: "Open Menu" })] }));
|
|
32
32
|
};
|
|
33
33
|
export default Component;
|
|
34
34
|
//# sourceMappingURL=menu-with-icon.story.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-with-icon.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-with-icon.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"menu-with-icon.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-with-icon.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,8BACE,MAAC,IAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBACzB,SAAS,CAAC,KAAK,CAAC,CAAC;gBACnB,CAAC,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,WAAW,EAAE,aAEnC,KAAC,IAAI,CAAC,IAAI,IACR,aAAa,EAAE,KAAC,eAAe,KAAG,EAClC,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,EACF,KAAC,IAAI,CAAC,IAAI,IACR,aAAa,EAAE,KAAC,eAAe,KAAG,EAClC,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,EACF,KAAC,IAAI,CAAC,IAAI,IACR,aAAa,EAAE,KAAC,eAAe,KAAG,EAClC,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,sBAAsB,EAClC,UAAU,EAAE,IAAI,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,EACF,MAAC,IAAI,IACH,KAAK,EAAC,YAAY,EAClB,WAAW,EAAC,sBAAsB,EAClC,IAAI,EAAE,KAAC,eAAe,KAAG,aAEzB,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,OAAO,GAAG,EAC3B,MAAC,IAAI,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,KAAC,gBAAgB,KAAG,aAC5C,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,IACrB,EACP,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,OAAO,GAAG,IACtB,EACP,KAAC,IAAI,CAAC,IAAI,IACR,aAAa,EAAE,KAAC,eAAe,KAAG,EAClC,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,qBAAqB,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,IACG,EACP,KAAC,cAAc,IACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,mBACC,MAAM,0BAGL,IAChB,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DropdownButton, Menu } from '@neo4j-ndl/react';\nimport { PhotoIconOutline, PlusIconOutline } from '@neo4j-ndl/react/icons';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n const anchorEl = useRef<HTMLButtonElement | null>(null);\n const [isOpen, setIsOpen] = useState(false);\n\n return (\n <>\n <Menu\n isOpen={isOpen}\n anchorRef={anchorEl}\n onClose={(_event, _data) => {\n setIsOpen(false);\n }}\n htmlAttributes={{ id: 'icon-menu' }}\n >\n <Menu.Item\n leadingVisual={<PlusIconOutline />}\n title=\"Action 1\"\n onClick={() => alert('Action1')}\n />\n <Menu.Item\n leadingVisual={<PlusIconOutline />}\n title=\"Action 2\"\n onClick={() => alert('Action2')}\n />\n <Menu.Item\n leadingVisual={<PlusIconOutline />}\n title=\"Action 3\"\n description=\"Action 3 is disabled\"\n isDisabled={true}\n onClick={() => alert('Action3')}\n />\n <Menu\n title=\"Action 3.1\"\n description=\"Action with sub menu\"\n icon={<PlusIconOutline />}\n >\n <Menu.Item title=\"Text\" />\n <Menu.Item title=\"Video\" />\n <Menu title=\"Image\" icon={<PhotoIconOutline />}>\n <Menu.Item title=\".png\" />\n <Menu.Item title=\".jpg\" />\n </Menu>\n <Menu.Item title=\"Audio\" />\n </Menu>\n <Menu.Item\n leadingVisual={<PlusIconOutline />}\n title=\"Action 4\"\n description=\"Action 4 is awesome\"\n onClick={() => alert('Action4')}\n />\n </Menu>\n <DropdownButton\n isOpen={isOpen}\n onClick={() => setIsOpen(true)}\n ref={anchorEl}\n aria-haspopup=\"menu\"\n >\n Open Menu\n </DropdownButton>\n </>\n );\n};\n\nexport default Component;\n"]}
|
|
@@ -20,7 +20,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
20
20
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
21
21
|
*/
|
|
22
22
|
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
|
|
23
|
-
import {
|
|
23
|
+
import { DropdownButton, Kbd, Menu } from '@neo4j-ndl/react';
|
|
24
24
|
import { PlusIconOutline } from '@neo4j-ndl/react/icons';
|
|
25
25
|
import { useRef, useState } from 'react';
|
|
26
26
|
const Component = () => {
|
|
@@ -28,7 +28,7 @@ const Component = () => {
|
|
|
28
28
|
const [isOpen, setIsOpen] = useState(false);
|
|
29
29
|
return (_jsxs(_Fragment, { children: [_jsxs(Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: (_event, _data) => {
|
|
30
30
|
setIsOpen(false);
|
|
31
|
-
}, htmlAttributes: { id: 'keyboard-shortcuts-menu' }, children: [_jsx(Menu.Item, { leadingVisual: _jsx(PlusIconOutline, {}), title: "Action 1", onClick: () => alert('Action1') }), _jsx(Menu.Item, { leadingVisual: _jsx(PlusIconOutline, {}), trailingContent: _jsx(Kbd, { keys: ['A', ['B']] }), title: "Action 2", description: "Action 4 has a keyboard shortcut", onClick: () => alert('Action4') })] }), _jsx(
|
|
31
|
+
}, htmlAttributes: { id: 'keyboard-shortcuts-menu' }, children: [_jsx(Menu.Item, { leadingVisual: _jsx(PlusIconOutline, {}), title: "Action 1", onClick: () => alert('Action1') }), _jsx(Menu.Item, { leadingVisual: _jsx(PlusIconOutline, {}), trailingContent: _jsx(Kbd, { keys: ['A', ['B']] }), title: "Action 2", description: "Action 4 has a keyboard shortcut", onClick: () => alert('Action4') })] }), _jsx(DropdownButton, { isOpen: isOpen, onClick: () => setIsOpen(true), ref: anchorEl, "aria-haspopup": "menu", children: "Open Menu" })] }));
|
|
32
32
|
};
|
|
33
33
|
export default Component;
|
|
34
34
|
//# sourceMappingURL=menu-with-keyboard-shortcuts.story.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-with-keyboard-shortcuts.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-with-keyboard-shortcuts.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"menu-with-keyboard-shortcuts.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-with-keyboard-shortcuts.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,cAAc,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,8BACE,MAAC,IAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBACzB,SAAS,CAAC,KAAK,CAAC,CAAC;gBACnB,CAAC,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,yBAAyB,EAAE,aAEjD,KAAC,IAAI,CAAC,IAAI,IACR,aAAa,EAAE,KAAC,eAAe,KAAG,EAClC,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,EACF,KAAC,IAAI,CAAC,IAAI,IACR,aAAa,EAAE,KAAC,eAAe,KAAG,EAClC,eAAe,EAAE,KAAC,GAAG,IAAC,IAAI,EAAE,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC,GAAI,EAC5C,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,kCAAkC,EAC9C,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,IACG,EACP,KAAC,cAAc,IACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,mBACC,MAAM,0BAGL,IAChB,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DropdownButton, Kbd, Menu } from '@neo4j-ndl/react';\nimport { PlusIconOutline } from '@neo4j-ndl/react/icons';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n const anchorEl = useRef<HTMLButtonElement | null>(null);\n const [isOpen, setIsOpen] = useState(false);\n\n return (\n <>\n <Menu\n isOpen={isOpen}\n anchorRef={anchorEl}\n onClose={(_event, _data) => {\n setIsOpen(false);\n }}\n htmlAttributes={{ id: 'keyboard-shortcuts-menu' }}\n >\n <Menu.Item\n leadingVisual={<PlusIconOutline />}\n title=\"Action 1\"\n onClick={() => alert('Action1')}\n />\n <Menu.Item\n leadingVisual={<PlusIconOutline />}\n trailingContent={<Kbd keys={['A', ['B']]} />}\n title=\"Action 2\"\n description=\"Action 4 has a keyboard shortcut\"\n onClick={() => alert('Action4')}\n />\n </Menu>\n <DropdownButton\n isOpen={isOpen}\n onClick={() => setIsOpen(true)}\n ref={anchorEl}\n aria-haspopup=\"menu\"\n >\n Open Menu\n </DropdownButton>\n </>\n );\n};\n\nexport default Component;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/menu/Menu.tsx"],"names":[],"mappings":"AA+CA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/menu/Menu.tsx"],"names":[],"mappings":"AA+CA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,sBAAsB,EAC5B,MAAM,kBAAkB,CAAC;AAQ1B,OAAO,KAAK,EACV,iBAAiB,EACjB,cAAc,EAEd,aAAa,EACb,cAAc,EACd,SAAS,EAET,cAAc,EACf,MAAM,cAAc,CAAC;AAoDtB,QAAA,MAAM,aAAa,GAAI,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EAAE,2NAoBzD,sBAAsB,CAAC,CAAC,EAAE,SAAS,CAAC,4CA8RtC,CAAC;AAsVF;;;;;;;;;GASG;AACH,QAAA,MAAM,IAAI,WAhqBkB,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC;mBAsfhD,CAAC,SAAS,KAAK,CAAC,WAAW,oFAQ9C,sBAAsB,CAAC,CAAC,EAAE,iBAAiB,CAAC;;;;+EAkI5C,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC;WAjQnB,CAAC,SAAS,KAAK,CAAC,WAAW,gKAe1C,sBAAsB,CAAC,CAAC,EAAE,aAAa,CAAC;IAuRzC;;OAEG;YAtEc,CAAC,SAAS,KAAK,CAAC,WAAW,iFAQ3C,sBAAsB,CAAC,CAAC,EAAE,cAAc,CAAC;gBA/EzB,CAAC,SAAS,KAAK,CAAC,WAAW,2KAgB3C,sBAAsB,CAAC,CAAC,EAAE,cAAc,CAAC;CAgI1C,CAAC;AACH,OAAO,EAAE,IAAI,EAAE,CAAC"}
|
package/package.json
CHANGED
|
@@ -1805,6 +1805,28 @@ const styleRules: DataGridStyleRule[] = [
|
|
|
1805
1805
|
],
|
|
1806
1806
|
},
|
|
1807
1807
|
},
|
|
1808
|
+
// Accessible default text color: a background is set but no textColor, so an
|
|
1809
|
+
// accessible text color is chosen automatically for contrast against the
|
|
1810
|
+
// dark background. Compare the cypherCommand cell here with the one below,
|
|
1811
|
+
// which uses the same background but an explicit (low-contrast) textColor.
|
|
1812
|
+
{
|
|
1813
|
+
apply: { color: { value: '#1e3a5f' } },
|
|
1814
|
+
column: 'cypherCommand',
|
|
1815
|
+
priority: 1,
|
|
1816
|
+
where: { equal: [{ column: 'name' }, 'Ken Kessler'] },
|
|
1817
|
+
},
|
|
1818
|
+
// Explicit textColor always wins: even a low-contrast text color is left
|
|
1819
|
+
// untouched -- the automatic accessible default only fills in when no
|
|
1820
|
+
// textColor/textColorRange resolved one.
|
|
1821
|
+
{
|
|
1822
|
+
apply: {
|
|
1823
|
+
color: { value: '#1e3a5f' },
|
|
1824
|
+
textColor: { value: '#fca5a5' },
|
|
1825
|
+
},
|
|
1826
|
+
column: 'cypherCommand',
|
|
1827
|
+
priority: 1,
|
|
1828
|
+
where: { equal: [{ column: 'name' }, 'Jonathon Graham'] },
|
|
1829
|
+
},
|
|
1808
1830
|
];
|
|
1809
1831
|
|
|
1810
1832
|
const Component = () => {
|
|
@@ -123,7 +123,7 @@ The Menu component follows the [WAI-ARIA menu pattern](https://www.w3.org/WAI/AR
|
|
|
123
123
|
- `Menu.RadioItem` has `role="menuitemradio"` and `aria-checked`
|
|
124
124
|
- `Menu.Group` has `role="group"`
|
|
125
125
|
- Nested menu triggers have `role="menuitem"` and manage `aria-expanded` internally
|
|
126
|
-
- When the menu opens, focus moves to the first item. When it closes, focus returns to the trigger
|
|
126
|
+
- When the menu opens, focus moves to the first item. When it closes, focus returns to the trigger. If an item's action already moved focus elsewhere (for example to an input rendered by that action), the moved focus is respected and not returned to the trigger
|
|
127
127
|
- The menu closes when focus leaves the menu area
|
|
128
128
|
|
|
129
129
|
## Implementation guidelines
|
|
@@ -137,7 +137,7 @@ The Menu component follows the [WAI-ARIA menu pattern](https://www.w3.org/WAI/AR
|
|
|
137
137
|
### Related WCAG criteria
|
|
138
138
|
|
|
139
139
|
- [2.1.1 Keyboard](https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html) (A): All menu items and submenus are fully operable via keyboard
|
|
140
|
-
- [2.4.3 Focus Order](https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html) (A): Focus is managed automatically — first item on open, trigger on close
|
|
140
|
+
- [2.4.3 Focus Order](https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html) (A): Focus is managed automatically — first item on open, trigger on close unless an item's action already moved focus elsewhere
|
|
141
141
|
- [4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html) (A): Roles (`menu`, `menuitem`, `menuitemradio`, `group`), states (`aria-checked`, `aria-expanded`), and accessible names are set automatically by the component
|
|
142
142
|
|
|
143
143
|
## Examples
|
|
@@ -147,7 +147,7 @@ The Menu component follows the [WAI-ARIA menu pattern](https://www.w3.org/WAI/AR
|
|
|
147
147
|
```tsx
|
|
148
148
|
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
|
|
149
149
|
|
|
150
|
-
import {
|
|
150
|
+
import { DropdownButton, Menu } from '@neo4j-ndl/react';
|
|
151
151
|
import { useRef, useState } from 'react';
|
|
152
152
|
|
|
153
153
|
const Component = () => {
|
|
@@ -197,14 +197,14 @@ const Component = () => {
|
|
|
197
197
|
/>
|
|
198
198
|
</Menu>
|
|
199
199
|
|
|
200
|
-
<
|
|
200
|
+
<DropdownButton
|
|
201
|
+
isOpen={isOpen}
|
|
201
202
|
onClick={() => setIsOpen(true)}
|
|
202
203
|
ref={anchorEl}
|
|
203
204
|
aria-haspopup="menu"
|
|
204
|
-
aria-expanded={isOpen}
|
|
205
205
|
>
|
|
206
206
|
Open Menu
|
|
207
|
-
</
|
|
207
|
+
</DropdownButton>
|
|
208
208
|
</>
|
|
209
209
|
);
|
|
210
210
|
};
|
|
@@ -217,7 +217,7 @@ export default Component;
|
|
|
217
217
|
```tsx
|
|
218
218
|
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
|
|
219
219
|
|
|
220
|
-
import {
|
|
220
|
+
import { DropdownButton, Menu, Typography } from '@neo4j-ndl/react';
|
|
221
221
|
import { Square2StackIconOutline } from '@neo4j-ndl/react/icons';
|
|
222
222
|
import { useRef, useState } from 'react';
|
|
223
223
|
|
|
@@ -258,14 +258,14 @@ const Component = () => {
|
|
|
258
258
|
<Menu.Item title="Danger action 4" className="n-text-danger-text" />
|
|
259
259
|
</Menu>
|
|
260
260
|
</Menu>
|
|
261
|
-
<
|
|
261
|
+
<DropdownButton
|
|
262
|
+
isOpen={isOpen}
|
|
262
263
|
onClick={() => setIsOpen(true)}
|
|
263
264
|
ref={anchorEl}
|
|
264
265
|
aria-haspopup="menu"
|
|
265
|
-
aria-expanded={isOpen}
|
|
266
266
|
>
|
|
267
267
|
Open Menu (set with custom placement)
|
|
268
|
-
</
|
|
268
|
+
</DropdownButton>
|
|
269
269
|
</>
|
|
270
270
|
);
|
|
271
271
|
};
|
|
@@ -278,7 +278,7 @@ export default Component;
|
|
|
278
278
|
```tsx
|
|
279
279
|
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
|
|
280
280
|
|
|
281
|
-
import { Dialog, FilledButton, Menu } from '@neo4j-ndl/react';
|
|
281
|
+
import { Dialog, DropdownButton, FilledButton, Menu } from '@neo4j-ndl/react';
|
|
282
282
|
import { Square2StackIconOutline } from '@neo4j-ndl/react/icons';
|
|
283
283
|
import { useRef, useState } from 'react';
|
|
284
284
|
|
|
@@ -304,14 +304,14 @@ const Component = () => {
|
|
|
304
304
|
<Dialog.Header>Menu in Dialog</Dialog.Header>
|
|
305
305
|
<Dialog.Content>
|
|
306
306
|
<div className="n-flex n-justify-center">
|
|
307
|
-
<
|
|
307
|
+
<DropdownButton
|
|
308
|
+
isOpen={isOpen}
|
|
308
309
|
onClick={handleMenuClick}
|
|
309
310
|
ref={anchorEl}
|
|
310
311
|
aria-haspopup="menu"
|
|
311
|
-
aria-expanded={isOpen}
|
|
312
312
|
>
|
|
313
313
|
Open Menu
|
|
314
|
-
</
|
|
314
|
+
</DropdownButton>
|
|
315
315
|
</div>
|
|
316
316
|
<Menu
|
|
317
317
|
isOpen={isOpen}
|
|
@@ -359,7 +359,7 @@ export default Component;
|
|
|
359
359
|
```tsx
|
|
360
360
|
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
|
|
361
361
|
|
|
362
|
-
import { FilledButton, Menu, Popover } from '@neo4j-ndl/react';
|
|
362
|
+
import { DropdownButton, FilledButton, Menu, Popover } from '@neo4j-ndl/react';
|
|
363
363
|
import { useRef, useState } from 'react';
|
|
364
364
|
|
|
365
365
|
const Component = () => {
|
|
@@ -410,14 +410,14 @@ const Component = () => {
|
|
|
410
410
|
occaecat cupidatat non proident, sunt in culpa qui officia
|
|
411
411
|
deserunt mollit anim id est laborum.
|
|
412
412
|
</p>
|
|
413
|
-
<
|
|
413
|
+
<DropdownButton
|
|
414
|
+
isOpen={isOpen}
|
|
414
415
|
onClick={() => setIsOpen(true)}
|
|
415
416
|
ref={anchorEl}
|
|
416
417
|
aria-haspopup="menu"
|
|
417
|
-
aria-expanded={isOpen}
|
|
418
418
|
>
|
|
419
419
|
Open Context Menu
|
|
420
|
-
</
|
|
420
|
+
</DropdownButton>
|
|
421
421
|
</>
|
|
422
422
|
</Popover.Content>
|
|
423
423
|
</Popover>
|
|
@@ -433,7 +433,7 @@ export default Component;
|
|
|
433
433
|
```tsx
|
|
434
434
|
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
|
|
435
435
|
|
|
436
|
-
import {
|
|
436
|
+
import { DropdownButton, Menu } from '@neo4j-ndl/react';
|
|
437
437
|
import { Square2StackIconOutline } from '@neo4j-ndl/react/icons';
|
|
438
438
|
import { useRef, useState } from 'react';
|
|
439
439
|
|
|
@@ -474,14 +474,14 @@ const Component = () => {
|
|
|
474
474
|
<Menu.Item title="Instagram" />
|
|
475
475
|
</Menu>
|
|
476
476
|
</Menu>
|
|
477
|
-
<
|
|
477
|
+
<DropdownButton
|
|
478
|
+
isOpen={isOpen}
|
|
478
479
|
onClick={() => setIsOpen(true)}
|
|
479
480
|
ref={anchorEl}
|
|
480
481
|
aria-haspopup="menu"
|
|
481
|
-
aria-expanded={isOpen}
|
|
482
482
|
>
|
|
483
483
|
Open Menu
|
|
484
|
-
</
|
|
484
|
+
</DropdownButton>
|
|
485
485
|
</>
|
|
486
486
|
);
|
|
487
487
|
};
|
|
@@ -494,7 +494,7 @@ export default Component;
|
|
|
494
494
|
```tsx
|
|
495
495
|
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
|
|
496
496
|
|
|
497
|
-
import {
|
|
497
|
+
import { DropdownButton, Menu } from '@neo4j-ndl/react';
|
|
498
498
|
import { useRef, useState } from 'react';
|
|
499
499
|
|
|
500
500
|
const Component = () => {
|
|
@@ -550,14 +550,14 @@ const Component = () => {
|
|
|
550
550
|
/>
|
|
551
551
|
</Menu>
|
|
552
552
|
|
|
553
|
-
<
|
|
553
|
+
<DropdownButton
|
|
554
|
+
isOpen={isOpen}
|
|
554
555
|
onClick={() => setIsOpen(true)}
|
|
555
556
|
ref={anchorEl}
|
|
556
557
|
aria-haspopup="menu"
|
|
557
|
-
aria-expanded={isOpen}
|
|
558
558
|
>
|
|
559
559
|
Open Menu
|
|
560
|
-
</
|
|
560
|
+
</DropdownButton>
|
|
561
561
|
</>
|
|
562
562
|
);
|
|
563
563
|
};
|
|
@@ -726,7 +726,7 @@ export default Component;
|
|
|
726
726
|
```tsx
|
|
727
727
|
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
|
|
728
728
|
|
|
729
|
-
import {
|
|
729
|
+
import { DropdownButton, Menu } from '@neo4j-ndl/react';
|
|
730
730
|
import { useRef, useState } from 'react';
|
|
731
731
|
|
|
732
732
|
const Component = () => {
|
|
@@ -763,14 +763,14 @@ const Component = () => {
|
|
|
763
763
|
/>
|
|
764
764
|
</Menu.Group>
|
|
765
765
|
</Menu>
|
|
766
|
-
<
|
|
766
|
+
<DropdownButton
|
|
767
|
+
isOpen={isOpen}
|
|
767
768
|
onClick={() => setIsOpen(true)}
|
|
768
769
|
ref={anchorEl}
|
|
769
770
|
aria-haspopup="menu"
|
|
770
|
-
aria-expanded={isOpen}
|
|
771
771
|
>
|
|
772
772
|
Open Menu
|
|
773
|
-
</
|
|
773
|
+
</DropdownButton>
|
|
774
774
|
</>
|
|
775
775
|
);
|
|
776
776
|
};
|
|
@@ -783,7 +783,7 @@ export default Component;
|
|
|
783
783
|
```tsx
|
|
784
784
|
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
|
|
785
785
|
|
|
786
|
-
import {
|
|
786
|
+
import { DropdownButton, Menu } from '@neo4j-ndl/react';
|
|
787
787
|
import { useRef, useState } from 'react';
|
|
788
788
|
|
|
789
789
|
const Component = () => {
|
|
@@ -807,14 +807,14 @@ const Component = () => {
|
|
|
807
807
|
/>
|
|
808
808
|
<Menu.Item title="Action 2" onClick={() => alert('Action2')} />
|
|
809
809
|
</Menu>
|
|
810
|
-
<
|
|
810
|
+
<DropdownButton
|
|
811
|
+
isOpen={isOpen}
|
|
811
812
|
onClick={() => setIsOpen(true)}
|
|
812
813
|
ref={anchorEl}
|
|
813
814
|
aria-haspopup="menu"
|
|
814
|
-
aria-expanded={isOpen}
|
|
815
815
|
>
|
|
816
816
|
Open Menu
|
|
817
|
-
</
|
|
817
|
+
</DropdownButton>
|
|
818
818
|
</>
|
|
819
819
|
);
|
|
820
820
|
};
|
|
@@ -827,7 +827,7 @@ export default Component;
|
|
|
827
827
|
```tsx
|
|
828
828
|
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
|
|
829
829
|
|
|
830
|
-
import {
|
|
830
|
+
import { DropdownButton, Menu } from '@neo4j-ndl/react';
|
|
831
831
|
import { useRef, useState } from 'react';
|
|
832
832
|
|
|
833
833
|
const Component = () => {
|
|
@@ -852,14 +852,14 @@ const Component = () => {
|
|
|
852
852
|
<Menu.Divider />
|
|
853
853
|
<Menu.Item title="Action 4" />
|
|
854
854
|
</Menu>
|
|
855
|
-
<
|
|
855
|
+
<DropdownButton
|
|
856
|
+
isOpen={isOpen}
|
|
856
857
|
onClick={() => setIsOpen(true)}
|
|
857
858
|
ref={anchorEl}
|
|
858
859
|
aria-haspopup="menu"
|
|
859
|
-
aria-expanded={isOpen}
|
|
860
860
|
>
|
|
861
861
|
Open Menu
|
|
862
|
-
</
|
|
862
|
+
</DropdownButton>
|
|
863
863
|
</>
|
|
864
864
|
);
|
|
865
865
|
};
|
|
@@ -872,7 +872,7 @@ export default Component;
|
|
|
872
872
|
```tsx
|
|
873
873
|
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
|
|
874
874
|
|
|
875
|
-
import {
|
|
875
|
+
import { DropdownButton, Menu } from '@neo4j-ndl/react';
|
|
876
876
|
import { PhotoIconOutline, PlusIconOutline } from '@neo4j-ndl/react/icons';
|
|
877
877
|
import { useRef, useState } from 'react';
|
|
878
878
|
|
|
@@ -927,14 +927,14 @@ const Component = () => {
|
|
|
927
927
|
onClick={() => alert('Action4')}
|
|
928
928
|
/>
|
|
929
929
|
</Menu>
|
|
930
|
-
<
|
|
930
|
+
<DropdownButton
|
|
931
|
+
isOpen={isOpen}
|
|
931
932
|
onClick={() => setIsOpen(true)}
|
|
932
933
|
ref={anchorEl}
|
|
933
934
|
aria-haspopup="menu"
|
|
934
|
-
aria-expanded={isOpen}
|
|
935
935
|
>
|
|
936
936
|
Open Menu
|
|
937
|
-
</
|
|
937
|
+
</DropdownButton>
|
|
938
938
|
</>
|
|
939
939
|
);
|
|
940
940
|
};
|
|
@@ -947,7 +947,7 @@ export default Component;
|
|
|
947
947
|
```tsx
|
|
948
948
|
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
|
|
949
949
|
|
|
950
|
-
import {
|
|
950
|
+
import { DropdownButton, Kbd, Menu } from '@neo4j-ndl/react';
|
|
951
951
|
import { PlusIconOutline } from '@neo4j-ndl/react/icons';
|
|
952
952
|
import { useRef, useState } from 'react';
|
|
953
953
|
|
|
@@ -978,14 +978,14 @@ const Component = () => {
|
|
|
978
978
|
onClick={() => alert('Action4')}
|
|
979
979
|
/>
|
|
980
980
|
</Menu>
|
|
981
|
-
<
|
|
981
|
+
<DropdownButton
|
|
982
|
+
isOpen={isOpen}
|
|
982
983
|
onClick={() => setIsOpen(true)}
|
|
983
984
|
ref={anchorEl}
|
|
984
985
|
aria-haspopup="menu"
|
|
985
|
-
aria-expanded={isOpen}
|
|
986
986
|
>
|
|
987
987
|
Open Menu
|
|
988
|
-
</
|
|
988
|
+
</DropdownButton>
|
|
989
989
|
</>
|
|
990
990
|
);
|
|
991
991
|
};
|