@spectrum-web-components/menu 1.1.0-beta.9 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +12 -12
- package/src/checkmark-overrides.css.dev.js.map +1 -1
- package/src/checkmark-overrides.css.js.map +1 -1
- package/src/chevron-overrides.css.dev.js.map +1 -1
- package/src/chevron-overrides.css.js.map +1 -1
- package/src/menu-divider-overrides.css.dev.js.map +1 -1
- package/src/menu-divider-overrides.css.js.map +1 -1
- package/src/menu-divider.css.dev.js.map +1 -1
- package/src/menu-divider.css.js.map +1 -1
- package/src/menu-group.css.dev.js.map +1 -1
- package/src/menu-group.css.js.map +1 -1
- package/src/menu-item-overrides.css.dev.js.map +1 -1
- package/src/menu-item-overrides.css.js.map +1 -1
- package/src/menu-item.css.dev.js +1 -1
- package/src/menu-item.css.dev.js.map +1 -1
- package/src/menu-item.css.js +1 -1
- package/src/menu-item.css.js.map +1 -1
- package/src/menu-overrides.css.dev.js.map +1 -1
- package/src/menu-overrides.css.js.map +1 -1
- package/src/menu.css.dev.js.map +1 -1
- package/src/menu.css.js.map +1 -1
- package/src/spectrum-checkmark.css.dev.js.map +1 -1
- package/src/spectrum-checkmark.css.js.map +1 -1
- package/src/spectrum-chevron.css.dev.js.map +1 -1
- package/src/spectrum-chevron.css.js.map +1 -1
- package/src/spectrum-menu-divider.css.dev.js.map +1 -1
- package/src/spectrum-menu-divider.css.js.map +1 -1
- package/src/spectrum-menu-item.css.dev.js.map +1 -1
- package/src/spectrum-menu-item.css.js.map +1 -1
- package/src/spectrum-menu-sectionHeading.css.dev.js.map +1 -1
- package/src/spectrum-menu-sectionHeading.css.js.map +1 -1
- package/src/spectrum-menu.css.dev.js.map +1 -1
- package/src/spectrum-menu.css.js.map +1 -1
- package/stories/menu-item.disconnected.stories.js +9 -7
- package/stories/menu-item.disconnected.stories.js.map +2 -2
- package/stories/menu.stories.js +4 -0
- package/stories/menu.stories.js.map +2 -2
- package/test/menu-item.test.js +80 -71
- package/test/menu-item.test.js.map +2 -2
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["menu.stories.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport type { Menu } from '@spectrum-web-components/menu';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport '@spectrum-web-components/icon/sp-icon.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-export.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-folder-open.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-share.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js';\n\nexport default {\n component: 'sp-menu',\n title: 'Menu',\n};\n\nexport const Default = (): TemplateResult => {\n return html`\n <sp-menu>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n\n <sp-popover open>\n <sp-menu>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const singleSelect = (): TemplateResult => {\n return html`\n <sp-menu\n selects=\"single\"\n @change=${({\n target: { value },\n }: Event & { target: Menu }): void => {\n navigator.clipboard.writeText(value);\n }}\n >\n <sp-menu-item selected>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n\n <sp-popover open>\n <sp-menu\n selects=\"single\"\n @change=${({\n target: { value },\n }: Event & { target: Menu }): void => {\n navigator.clipboard.writeText(value);\n }}\n >\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item selected>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const multipleSelect = (): TemplateResult => {\n return html`\n <sp-menu selects=\"multiple\">\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item selected>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item selected>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n\n <sp-popover open>\n <sp-menu selects=\"multiple\">\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item selected>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item selected>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const controlled = (): TemplateResult => {\n const forceSelection = (event: Event & { target: Menu }): void => {\n event.target.updateComplete.then(() => {\n event.target.selected = ['Select and Mask...'];\n });\n };\n return html`\n <p>\n This Menu will default to a\n <code>selected</code>\n value of\n <code>[ 'Feather...', 'Save Selection' ]</code>\n but then on any subsequent interaction be forced to a\n <code>selected</code>\n value of\n <code>[ 'Select and Mask...' ]</code>\n .\n </p>\n <sp-menu selects=\"multiple\" @change=${forceSelection}>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item selected>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item selected>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n `;\n};\ncontrolled.swc_vrt = {\n skip: true,\n};\n\nexport const menuItemWithDescription = (): TemplateResult => {\n return html`\n <sp-menu>\n <sp-menu-item>\n <sp-icon-export slot=\"icon\"></sp-icon-export>\n Quick export\n <span slot=\"description\">Share a snapshot</span>\n </sp-menu-item>\n <sp-menu-item>\n <sp-icon-folder-open slot=\"icon\"></sp-icon-folder-open>\n Open a copy\n <span slot=\"description\">Illustrator for iPad</span>\n </sp-menu-item>\n <sp-menu-item disabled>\n <sp-icon-share slot=\"icon\"></sp-icon-share>\n Share link\n <span slot=\"description\">Enable comments and download</span>\n </sp-menu-item>\n </sp-menu>\n\n <sp-popover open>\n <sp-menu selects=\"multiple\">\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item selected>\n Select Inverse\n <span slot=\"description\">Enable inverse selection</span>\n </sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item selected>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>\n Make Work Path\n <span slot=\"description\">Create a reusable work path</span>\n </sp-menu-item>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const selectsWithIcons = (): TemplateResult => {\n return html`\n <sp-popover open>\n <sp-menu selects=\"single\">\n <sp-menu-item>\n <sp-icon-export slot=\"icon\"></sp-icon-export>\n Quick export\n </sp-menu-item>\n <sp-menu-item selected>\n <sp-icon-folder-open slot=\"icon\"></sp-icon-folder-open>\n Open a copy\n </sp-menu-item>\n <sp-menu-item>\n <sp-icon-share slot=\"icon\"></sp-icon-share>\n Share link\n <span slot=\"description\">Enable comments and download</span>\n </sp-menu-item>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const headersAndIcons = (): TemplateResult => {\n return html`\n <sp-popover open>\n <sp-menu selects=\"single\">\n <sp-menu-group>\n <span slot=\"header\">Section Heading</span>\n <sp-menu-item>Action 1</sp-menu-item>\n <sp-menu-item>Action 2</sp-menu-item>\n <sp-menu-item>Action 3</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group>\n <span slot=\"header\">Section Heading</span>\n <sp-menu-item>\n <sp-icon-checkmark-circle\n slot=\"icon\"\n ></sp-icon-checkmark-circle>\n Save\n </sp-menu-item>\n <sp-menu-item disabled>\n <sp-icon-checkmark-circle\n slot=\"icon\"\n ></sp-icon-checkmark-circle>\n Download\n </sp-menu-item>\n <sp-menu-item disabled>\n <sp-icon-checkmark-circle\n slot=\"icon\"\n ></sp-icon-checkmark-circle>\n Share link\n <span slot=\"description\">Enable comments</span>\n </sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nheadersAndIcons.storyName = 'Headers and Icons';\n\nexport const Selected = (): TemplateResult => {\n return html`\n <sp-popover open style=\"width: 200px;\">\n <sp-menu>\n <sp-menu-group>\n <span slot=\"header\">San Francisco</span>\n <sp-menu-item>Financial District</sp-menu-item>\n <sp-menu-item>South of Market</sp-menu-item>\n <sp-menu-item>North Beach</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group selects=\"single\">\n <span slot=\"header\">Oakland</span>\n <sp-menu-item>City Center</sp-menu-item>\n <sp-menu-item disabled>Jack London Square</sp-menu-item>\n <sp-menu-item selected>\n My best friend's mom's house in the burbs just off\n Silverado street\n </sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const MenuGroupSelects = (): TemplateResult => {\n return html`\n <sp-popover open style=\"width: 200px;\">\n <sp-menu selects=\"single\">\n <sp-menu-group selects=\"inherit\">\n <span slot=\"header\">One of these</span>\n <sp-menu-item>Camden</sp-menu-item>\n <sp-menu-item>Cedar Riverside</sp-menu-item>\n <sp-menu-item>Downtown</sp-menu-item>\n <sp-menu-item>Northeast Arts District</sp-menu-item>\n <sp-menu-item selected>Uptown</sp-menu-item>\n </sp-menu-group>\n <sp-menu-group selects=\"inherit\">\n <span slot=\"header\">Or of these</span>\n <sp-menu-item>Lowertown</sp-menu-item>\n <sp-menu-item>Grand Ave</sp-menu-item>\n </sp-menu-group>\n <sp-menu-group selects=\"multiple\">\n <span slot=\"header\">Many of these</span>\n <sp-menu-item>Financial District</sp-menu-item>\n <sp-menu-item selected>South of Market</sp-menu-item>\n <sp-menu-item selected>North Beach</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group selects=\"single\">\n <span slot=\"header\">One of these</span>\n <sp-menu-item>City Center</sp-menu-item>\n <sp-menu-item disabled>Jack London Square</sp-menu-item>\n <sp-menu-item selected>\n My best friend's mom's house in the burbs just off\n Silverado street\n </sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const selectedOffPage = (): TemplateResult => {\n return html`\n <p style=\"height: 100vh; padding-bottom: 50px;\">\n In this example the \\`<sp-menu-item selected>\\` element is off\n the visible page by default, but does not alter the page scroll on\n load.\n </p>\n <sp-menu>\n <sp-menu-item selected style=\"padding-bottom: 50px;\">\n My best friend's mom's house in the burbs just off Silverado\n street\n </sp-menu-item>\n </sp-menu>\n `;\n};\n\nexport const MenuGroupSelectsMultiple = (): TemplateResult => {\n return html`\n <sp-popover open style=\"width: 200px;\">\n <sp-menu selects=\"multiple\">\n <sp-menu-group selects=\"inherit\">\n <span slot=\"header\">Many of these</span>\n <sp-menu-item>Camden</sp-menu-item>\n <sp-menu-item selected>Cedar Riverside</sp-menu-item>\n <sp-menu-item selected>Downtown</sp-menu-item>\n <sp-menu-item>Northeast Arts District</sp-menu-item>\n <sp-menu-item>Uptown</sp-menu-item>\n </sp-menu-group>\n <sp-menu-group selects=\"inherit\">\n <span slot=\"header\">And these, too</span>\n <sp-menu-item>Lowertown</sp-menu-item>\n <sp-menu-item selected>Grand Ave</sp-menu-item>\n </sp-menu-group>\n <sp-menu-group>\n <span slot=\"header\">None of these</span>\n <sp-menu-item>Financial District</sp-menu-item>\n <sp-menu-item>South of Market</sp-menu-item>\n <sp-menu-item>North Beach</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group selects=\"single\">\n <span slot=\"header\">One of these</span>\n <sp-menu-item>City Center</sp-menu-item>\n <sp-menu-item disabled>Jack London Square</sp-menu-item>\n <sp-menu-item selected>\n My best friend's mom's house in the burbs just off\n Silverado street\n </sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const menuWithValueSlots = (): TemplateResult => {\n return html`\n <sp-menu style=\"width: 150px\">\n <sp-menu-item>\n Undo\n <span slot=\"value\">\u2318\u200BZ</span>\n </sp-menu-item>\n <sp-menu-item disabled>\n Redo\n <span slot=\"value\">\u21E7\u2318\u200BZ</span>\n </sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>\n Cut\n <span slot=\"value\">\u2318\u200BX</span>\n </sp-menu-item>\n <sp-menu-item>\n Copy\n <span slot=\"value\">\u2318\u200BS</span>\n </sp-menu-item>\n <sp-menu-item disabled>\n Paste\n <span slot=\"value\">\u2318\u200BP</span>\n </sp-menu-item>\n </sp-menu>\n <sp-popover open style=\"width: 150px\">\n <sp-menu>\n <sp-menu-item>\n Undo\n <span slot=\"value\">\u2318\u200BZ</span>\n </sp-menu-item>\n <sp-menu-item disabled>\n Redo\n <span slot=\"value\">\u21E7\u2318\u200BZ</span>\n </sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>\n Cut\n <span slot=\"value\">\u2318\u200BX</span>\n </sp-menu-item>\n <sp-menu-item>\n Copy\n <span slot=\"value\">\u2318\u200BS</span>\n </sp-menu-item>\n <sp-menu-item disabled>\n Paste\n <span slot=\"value\">\u2318\u200BP</span>\n </sp-menu-item>\n </sp-menu>\n </sp-popover>\n `;\n};\n"],
|
|
5
|
-
"mappings": "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",
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport type { Menu } from '@spectrum-web-components/menu';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport '@spectrum-web-components/icon/sp-icon.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-export.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-folder-open.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-share.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js';\n\nexport default {\n component: 'sp-menu',\n title: 'Menu',\n};\n\nexport const Default = (): TemplateResult => {\n return html`\n <sp-menu>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n\n <sp-popover open>\n <sp-menu>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const singleSelect = (): TemplateResult => {\n return html`\n <sp-menu\n selects=\"single\"\n @change=${({\n target: { value },\n }: Event & { target: Menu }): void => {\n navigator.clipboard.writeText(value);\n }}\n >\n <sp-menu-item selected>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n\n <sp-popover open>\n <sp-menu\n selects=\"single\"\n @change=${({\n target: { value },\n }: Event & { target: Menu }): void => {\n navigator.clipboard.writeText(value);\n }}\n >\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item selected>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const multipleSelect = (): TemplateResult => {\n return html`\n <sp-menu selects=\"multiple\">\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item selected>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item selected>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n\n <sp-popover open>\n <sp-menu selects=\"multiple\">\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item selected>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item selected>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const controlled = (): TemplateResult => {\n const forceSelection = (event: Event & { target: Menu }): void => {\n event.target.updateComplete.then(() => {\n event.target.selected = ['Select and Mask...'];\n });\n };\n return html`\n <p>\n This Menu will default to a\n <code>selected</code>\n value of\n <code>[ 'Feather...', 'Save Selection' ]</code>\n but then on any subsequent interaction be forced to a\n <code>selected</code>\n value of\n <code>[ 'Select and Mask...' ]</code>\n .\n </p>\n <sp-menu selects=\"multiple\" @change=${forceSelection}>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item selected>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item selected>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n `;\n};\ncontrolled.swc_vrt = {\n skip: true,\n};\n\ncontrolled.parameters = {\n // Disables Chromatic's snapshotting on a global level\n chromatic: { disableSnapshot: true },\n};\n\nexport const menuItemWithDescription = (): TemplateResult => {\n return html`\n <sp-menu>\n <sp-menu-item>\n <sp-icon-export slot=\"icon\"></sp-icon-export>\n Quick export\n <span slot=\"description\">Share a snapshot</span>\n </sp-menu-item>\n <sp-menu-item>\n <sp-icon-folder-open slot=\"icon\"></sp-icon-folder-open>\n Open a copy\n <span slot=\"description\">Illustrator for iPad</span>\n </sp-menu-item>\n <sp-menu-item disabled>\n <sp-icon-share slot=\"icon\"></sp-icon-share>\n Share link\n <span slot=\"description\">Enable comments and download</span>\n </sp-menu-item>\n </sp-menu>\n\n <sp-popover open>\n <sp-menu selects=\"multiple\">\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item selected>\n Select Inverse\n <span slot=\"description\">Enable inverse selection</span>\n </sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item selected>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>\n Make Work Path\n <span slot=\"description\">Create a reusable work path</span>\n </sp-menu-item>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const selectsWithIcons = (): TemplateResult => {\n return html`\n <sp-popover open>\n <sp-menu selects=\"single\">\n <sp-menu-item>\n <sp-icon-export slot=\"icon\"></sp-icon-export>\n Quick export\n </sp-menu-item>\n <sp-menu-item selected>\n <sp-icon-folder-open slot=\"icon\"></sp-icon-folder-open>\n Open a copy\n </sp-menu-item>\n <sp-menu-item>\n <sp-icon-share slot=\"icon\"></sp-icon-share>\n Share link\n <span slot=\"description\">Enable comments and download</span>\n </sp-menu-item>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const headersAndIcons = (): TemplateResult => {\n return html`\n <sp-popover open>\n <sp-menu selects=\"single\">\n <sp-menu-group>\n <span slot=\"header\">Section Heading</span>\n <sp-menu-item>Action 1</sp-menu-item>\n <sp-menu-item>Action 2</sp-menu-item>\n <sp-menu-item>Action 3</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group>\n <span slot=\"header\">Section Heading</span>\n <sp-menu-item>\n <sp-icon-checkmark-circle\n slot=\"icon\"\n ></sp-icon-checkmark-circle>\n Save\n </sp-menu-item>\n <sp-menu-item disabled>\n <sp-icon-checkmark-circle\n slot=\"icon\"\n ></sp-icon-checkmark-circle>\n Download\n </sp-menu-item>\n <sp-menu-item disabled>\n <sp-icon-checkmark-circle\n slot=\"icon\"\n ></sp-icon-checkmark-circle>\n Share link\n <span slot=\"description\">Enable comments</span>\n </sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nheadersAndIcons.storyName = 'Headers and Icons';\n\nexport const Selected = (): TemplateResult => {\n return html`\n <sp-popover open style=\"width: 200px;\">\n <sp-menu>\n <sp-menu-group>\n <span slot=\"header\">San Francisco</span>\n <sp-menu-item>Financial District</sp-menu-item>\n <sp-menu-item>South of Market</sp-menu-item>\n <sp-menu-item>North Beach</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group selects=\"single\">\n <span slot=\"header\">Oakland</span>\n <sp-menu-item>City Center</sp-menu-item>\n <sp-menu-item disabled>Jack London Square</sp-menu-item>\n <sp-menu-item selected>\n My best friend's mom's house in the burbs just off\n Silverado street\n </sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const MenuGroupSelects = (): TemplateResult => {\n return html`\n <sp-popover open style=\"width: 200px;\">\n <sp-menu selects=\"single\">\n <sp-menu-group selects=\"inherit\">\n <span slot=\"header\">One of these</span>\n <sp-menu-item>Camden</sp-menu-item>\n <sp-menu-item>Cedar Riverside</sp-menu-item>\n <sp-menu-item>Downtown</sp-menu-item>\n <sp-menu-item>Northeast Arts District</sp-menu-item>\n <sp-menu-item selected>Uptown</sp-menu-item>\n </sp-menu-group>\n <sp-menu-group selects=\"inherit\">\n <span slot=\"header\">Or of these</span>\n <sp-menu-item>Lowertown</sp-menu-item>\n <sp-menu-item>Grand Ave</sp-menu-item>\n </sp-menu-group>\n <sp-menu-group selects=\"multiple\">\n <span slot=\"header\">Many of these</span>\n <sp-menu-item>Financial District</sp-menu-item>\n <sp-menu-item selected>South of Market</sp-menu-item>\n <sp-menu-item selected>North Beach</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group selects=\"single\">\n <span slot=\"header\">One of these</span>\n <sp-menu-item>City Center</sp-menu-item>\n <sp-menu-item disabled>Jack London Square</sp-menu-item>\n <sp-menu-item selected>\n My best friend's mom's house in the burbs just off\n Silverado street\n </sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const selectedOffPage = (): TemplateResult => {\n return html`\n <p style=\"height: 100vh; padding-bottom: 50px;\">\n In this example the \\`<sp-menu-item selected>\\` element is off\n the visible page by default, but does not alter the page scroll on\n load.\n </p>\n <sp-menu>\n <sp-menu-item selected style=\"padding-bottom: 50px;\">\n My best friend's mom's house in the burbs just off Silverado\n street\n </sp-menu-item>\n </sp-menu>\n `;\n};\n\nexport const MenuGroupSelectsMultiple = (): TemplateResult => {\n return html`\n <sp-popover open style=\"width: 200px;\">\n <sp-menu selects=\"multiple\">\n <sp-menu-group selects=\"inherit\">\n <span slot=\"header\">Many of these</span>\n <sp-menu-item>Camden</sp-menu-item>\n <sp-menu-item selected>Cedar Riverside</sp-menu-item>\n <sp-menu-item selected>Downtown</sp-menu-item>\n <sp-menu-item>Northeast Arts District</sp-menu-item>\n <sp-menu-item>Uptown</sp-menu-item>\n </sp-menu-group>\n <sp-menu-group selects=\"inherit\">\n <span slot=\"header\">And these, too</span>\n <sp-menu-item>Lowertown</sp-menu-item>\n <sp-menu-item selected>Grand Ave</sp-menu-item>\n </sp-menu-group>\n <sp-menu-group>\n <span slot=\"header\">None of these</span>\n <sp-menu-item>Financial District</sp-menu-item>\n <sp-menu-item>South of Market</sp-menu-item>\n <sp-menu-item>North Beach</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group selects=\"single\">\n <span slot=\"header\">One of these</span>\n <sp-menu-item>City Center</sp-menu-item>\n <sp-menu-item disabled>Jack London Square</sp-menu-item>\n <sp-menu-item selected>\n My best friend's mom's house in the burbs just off\n Silverado street\n </sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const menuWithValueSlots = (): TemplateResult => {\n return html`\n <sp-menu style=\"width: 150px\">\n <sp-menu-item>\n Undo\n <span slot=\"value\">\u2318\u200BZ</span>\n </sp-menu-item>\n <sp-menu-item disabled>\n Redo\n <span slot=\"value\">\u21E7\u2318\u200BZ</span>\n </sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>\n Cut\n <span slot=\"value\">\u2318\u200BX</span>\n </sp-menu-item>\n <sp-menu-item>\n Copy\n <span slot=\"value\">\u2318\u200BS</span>\n </sp-menu-item>\n <sp-menu-item disabled>\n Paste\n <span slot=\"value\">\u2318\u200BP</span>\n </sp-menu-item>\n </sp-menu>\n <sp-popover open style=\"width: 150px\">\n <sp-menu>\n <sp-menu-item>\n Undo\n <span slot=\"value\">\u2318\u200BZ</span>\n </sp-menu-item>\n <sp-menu-item disabled>\n Redo\n <span slot=\"value\">\u21E7\u2318\u200BZ</span>\n </sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>\n Cut\n <span slot=\"value\">\u2318\u200BX</span>\n </sp-menu-item>\n <sp-menu-item>\n Copy\n <span slot=\"value\">\u2318\u200BS</span>\n </sp-menu-item>\n <sp-menu-item disabled>\n Paste\n <span slot=\"value\">\u2318\u200BP</span>\n </sp-menu-item>\n </sp-menu>\n </sp-popover>\n `;\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/test/menu-item.test.js
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
import "@spectrum-web-components/menu/sp-menu.js";
|
|
3
|
-
import "@spectrum-web-components/menu/sp-menu-item.js";
|
|
4
2
|
import {
|
|
5
3
|
elementUpdated,
|
|
6
4
|
expect,
|
|
@@ -8,17 +6,18 @@ import {
|
|
|
8
6
|
html,
|
|
9
7
|
waitUntil
|
|
10
8
|
} from "@open-wc/testing";
|
|
9
|
+
import "@spectrum-web-components/action-menu/sp-action-menu.js";
|
|
10
|
+
import "@spectrum-web-components/menu/sp-menu-item.js";
|
|
11
|
+
import "@spectrum-web-components/menu/sp-menu.js";
|
|
11
12
|
import { spy } from "sinon";
|
|
12
13
|
import { sendMouse } from "../../../test/plugins/browser.js";
|
|
13
14
|
describe("Menu item", () => {
|
|
14
15
|
it("renders", async () => {
|
|
15
|
-
const el = await fixture(
|
|
16
|
-
|
|
17
|
-
<sp-menu>
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
`
|
|
21
|
-
);
|
|
16
|
+
const el = await fixture(html`
|
|
17
|
+
<sp-menu>
|
|
18
|
+
<sp-menu-item selected>Selected</sp-menu-item>
|
|
19
|
+
</sp-menu>
|
|
20
|
+
`);
|
|
22
21
|
await waitUntil(
|
|
23
22
|
() => el.childItems.length == 1,
|
|
24
23
|
"expected menu group to manage 1 child"
|
|
@@ -27,16 +26,14 @@ describe("Menu item", () => {
|
|
|
27
26
|
await expect(el).to.be.accessible();
|
|
28
27
|
});
|
|
29
28
|
it("can be disabled", async () => {
|
|
30
|
-
const el = await fixture(
|
|
31
|
-
|
|
32
|
-
<sp-menu
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
`
|
|
39
|
-
);
|
|
29
|
+
const el = await fixture(html`
|
|
30
|
+
<sp-menu selects="single">
|
|
31
|
+
<sp-menu-item selected label="This is not disabled">
|
|
32
|
+
Selected
|
|
33
|
+
</sp-menu-item>
|
|
34
|
+
<sp-menu-item disabled>Disabled</sp-menu-item>
|
|
35
|
+
</sp-menu>
|
|
36
|
+
`);
|
|
40
37
|
await elementUpdated(el);
|
|
41
38
|
expect(el.value).to.equal("Selected");
|
|
42
39
|
const disabled = el.querySelector("[disabled]");
|
|
@@ -74,25 +71,23 @@ describe("Menu item", () => {
|
|
|
74
71
|
});
|
|
75
72
|
it("proxies `click()`", async () => {
|
|
76
73
|
const clickTargetSpy = spy();
|
|
77
|
-
const el = await fixture(
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
74
|
+
const el = await fixture(html`
|
|
75
|
+
<sp-menu
|
|
76
|
+
@click=${(event) => {
|
|
77
|
+
clickTargetSpy(
|
|
78
|
+
event.composedPath()[0]
|
|
79
|
+
);
|
|
80
|
+
event.stopPropagation();
|
|
81
|
+
event.preventDefault();
|
|
82
|
+
}}
|
|
83
|
+
>
|
|
84
|
+
<sp-menu-item
|
|
85
|
+
href="https://opensource.adobe.com/spectrum-web-components"
|
|
87
86
|
>
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
</sp-menu-item>
|
|
93
|
-
</sp-menu>
|
|
94
|
-
`
|
|
95
|
-
);
|
|
87
|
+
Selected Text
|
|
88
|
+
</sp-menu-item>
|
|
89
|
+
</sp-menu>
|
|
90
|
+
`);
|
|
96
91
|
await elementUpdated(el);
|
|
97
92
|
const item = el.querySelector("sp-menu-item");
|
|
98
93
|
const { anchorElement } = item;
|
|
@@ -103,31 +98,23 @@ describe("Menu item", () => {
|
|
|
103
98
|
expect(clickTargetSpy.calledWith(anchorElement)).to.be.true;
|
|
104
99
|
});
|
|
105
100
|
it("value attribute", async () => {
|
|
106
|
-
const el = await fixture(
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
Selected Text
|
|
110
|
-
</sp-menu-item>
|
|
111
|
-
`
|
|
112
|
-
);
|
|
101
|
+
const el = await fixture(html`
|
|
102
|
+
<sp-menu-item value="selected" selected>Selected Text</sp-menu-item>
|
|
103
|
+
`);
|
|
113
104
|
expect(el.itemText).to.equal("Selected Text");
|
|
114
105
|
expect(el.value).to.equal("selected");
|
|
115
106
|
});
|
|
116
107
|
it("no value attribute", async () => {
|
|
117
|
-
const el = await fixture(
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
`
|
|
121
|
-
);
|
|
108
|
+
const el = await fixture(html`
|
|
109
|
+
<sp-menu-item selected>Selected Text</sp-menu-item>
|
|
110
|
+
`);
|
|
122
111
|
expect(el.itemText).to.equal("Selected Text");
|
|
123
112
|
expect(el.value).to.equal("Selected Text");
|
|
124
113
|
});
|
|
125
114
|
it("value property", async () => {
|
|
126
|
-
const el = await fixture(
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
`
|
|
130
|
-
);
|
|
115
|
+
const el = await fixture(html`
|
|
116
|
+
<sp-menu-item selected>Selected Text</sp-menu-item>
|
|
117
|
+
`);
|
|
131
118
|
expect(el.itemText).to.equal("Selected Text");
|
|
132
119
|
expect(el.value).to.equal("Selected Text");
|
|
133
120
|
expect(el.hasAttribute("value")).to.be.false;
|
|
@@ -141,27 +128,21 @@ describe("Menu item", () => {
|
|
|
141
128
|
expect(el.hasAttribute("value")).to.be.false;
|
|
142
129
|
});
|
|
143
130
|
it("assigns content to the description slot", async () => {
|
|
144
|
-
const el = await fixture(
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
</span>
|
|
151
|
-
</sp-menu-item>
|
|
152
|
-
`
|
|
153
|
-
);
|
|
131
|
+
const el = await fixture(html`
|
|
132
|
+
<sp-menu-item selected>
|
|
133
|
+
Menu Item Text
|
|
134
|
+
<span slot="description">Description for the Menu-Item</span>
|
|
135
|
+
</sp-menu-item>
|
|
136
|
+
`);
|
|
154
137
|
const descriptionElement = el.querySelector("span");
|
|
155
138
|
expect(descriptionElement.assignedSlot).to.not.be.null;
|
|
156
139
|
});
|
|
157
140
|
it("acualizes a submenu", async () => {
|
|
158
|
-
const test = await fixture(
|
|
159
|
-
|
|
160
|
-
<sp-menu>
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
`
|
|
164
|
-
);
|
|
141
|
+
const test = await fixture(html`
|
|
142
|
+
<sp-menu>
|
|
143
|
+
<sp-menu-item selected>Selected</sp-menu-item>
|
|
144
|
+
</sp-menu>
|
|
145
|
+
`);
|
|
165
146
|
const el = test.querySelector("sp-menu-item");
|
|
166
147
|
expect(el.hasSubmenu).to.be.false;
|
|
167
148
|
const submenuItem = document.createElement("sp-menu-item");
|
|
@@ -176,5 +157,33 @@ describe("Menu item", () => {
|
|
|
176
157
|
await elementUpdated(el);
|
|
177
158
|
expect(el.hasSubmenu).to.be.false;
|
|
178
159
|
});
|
|
160
|
+
it("should not allow text-align to cascade when used inside an overlay", async () => {
|
|
161
|
+
const element = await fixture(html`
|
|
162
|
+
<div style="text-align: center">
|
|
163
|
+
<p>
|
|
164
|
+
The paragraph and the button are centered. Menu items are
|
|
165
|
+
not.
|
|
166
|
+
</p>
|
|
167
|
+
<sp-action-menu label="Actions" selects="single">
|
|
168
|
+
<sp-menu-item>One</sp-menu-item>
|
|
169
|
+
<sp-menu-item>Two</sp-menu-item>
|
|
170
|
+
<sp-menu-item>This is a long option</sp-menu-item>
|
|
171
|
+
<sp-menu-item>
|
|
172
|
+
More options
|
|
173
|
+
<sp-menu slot="submenu">
|
|
174
|
+
<sp-menu-item>Three</sp-menu-item>
|
|
175
|
+
<sp-menu-item>Four</sp-menu-item>
|
|
176
|
+
<sp-menu-item>Another long option</sp-menu-item>
|
|
177
|
+
</sp-menu>
|
|
178
|
+
</sp-menu-item>
|
|
179
|
+
</sp-action-menu>
|
|
180
|
+
</div>
|
|
181
|
+
`);
|
|
182
|
+
const menuItems = element.querySelectorAll(
|
|
183
|
+
"sp-menu-item"
|
|
184
|
+
);
|
|
185
|
+
for (const menuItem of menuItems)
|
|
186
|
+
expect(getComputedStyle(menuItem).textAlign).to.equal("start");
|
|
187
|
+
});
|
|
179
188
|
});
|
|
180
189
|
//# sourceMappingURL=menu-item.test.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["menu-item.test.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport '@
|
|
5
|
-
"mappings": ";AAYA
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n elementUpdated,\n expect,\n fixture,\n html,\n waitUntil,\n} from '@open-wc/testing';\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport { Menu, MenuItem } from '@spectrum-web-components/menu';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport { spy } from 'sinon';\nimport { sendMouse } from '../../../test/plugins/browser.js';\n\ndescribe('Menu item', () => {\n it('renders', async () => {\n const el = await fixture<Menu>(html`\n <sp-menu>\n <sp-menu-item selected>Selected</sp-menu-item>\n </sp-menu>\n `);\n await waitUntil(\n () => el.childItems.length == 1,\n 'expected menu group to manage 1 child'\n );\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('can be disabled', async () => {\n const el = await fixture<Menu>(html`\n <sp-menu selects=\"single\">\n <sp-menu-item selected label=\"This is not disabled\">\n Selected\n </sp-menu-item>\n <sp-menu-item disabled>Disabled</sp-menu-item>\n </sp-menu>\n `);\n await elementUpdated(el);\n expect(el.value).to.equal('Selected');\n\n const disabled = el.querySelector('[disabled]') as MenuItem;\n const boundingRect = disabled.getBoundingClientRect();\n sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n boundingRect.x + boundingRect.width / 2,\n boundingRect.y + boundingRect.height / 2,\n ],\n },\n {\n type: 'down',\n },\n {\n type: 'up',\n },\n ],\n });\n await elementUpdated(el);\n expect(el.value).to.equal('Selected');\n\n disabled.click();\n await elementUpdated(el);\n expect(el.value).to.equal('Selected');\n\n disabled.dispatchEvent(\n new Event('click', {\n bubbles: true,\n composed: true,\n })\n );\n await elementUpdated(el);\n expect(el.value).to.equal('Selected');\n });\n it('proxies `click()`', async () => {\n const clickTargetSpy = spy();\n const el = await fixture<Menu>(html`\n <sp-menu\n @click=${(event: Event) => {\n clickTargetSpy(\n event.composedPath()[0] as HTMLAnchorElement\n );\n event.stopPropagation();\n event.preventDefault();\n }}\n >\n <sp-menu-item\n href=\"https://opensource.adobe.com/spectrum-web-components\"\n >\n Selected Text\n </sp-menu-item>\n </sp-menu>\n `);\n\n await elementUpdated(el);\n\n const item = el.querySelector('sp-menu-item') as MenuItem;\n const { anchorElement } = item as unknown as {\n anchorElement: HTMLAnchorElement;\n };\n (\n item as unknown as { anchorElement: HTMLAnchorElement }\n ).anchorElement.dispatchEvent(new FocusEvent('focus'));\n\n await elementUpdated(item);\n expect(el === document.activeElement).to.be.true;\n item.click();\n\n expect(clickTargetSpy.calledWith(anchorElement)).to.be.true;\n });\n it('value attribute', async () => {\n const el = await fixture<MenuItem>(html`\n <sp-menu-item value=\"selected\" selected>Selected Text</sp-menu-item>\n `);\n expect(el.itemText).to.equal('Selected Text');\n expect(el.value).to.equal('selected');\n });\n it('no value attribute', async () => {\n const el = await fixture<MenuItem>(html`\n <sp-menu-item selected>Selected Text</sp-menu-item>\n `);\n expect(el.itemText).to.equal('Selected Text');\n expect(el.value).to.equal('Selected Text');\n });\n it('value property', async () => {\n const el = await fixture<MenuItem>(html`\n <sp-menu-item selected>Selected Text</sp-menu-item>\n `);\n expect(el.itemText).to.equal('Selected Text');\n expect(el.value).to.equal('Selected Text');\n expect(el.hasAttribute('value')).to.be.false;\n\n el.value = 'Selected Text';\n await elementUpdated(el);\n\n expect(el.value).to.equal('Selected Text');\n expect(el.getAttribute('value')).to.equal('Selected Text');\n\n el.value = '';\n await elementUpdated(el);\n\n expect(el.value).to.equal('Selected Text');\n expect(el.hasAttribute('value')).to.be.false;\n });\n it('assigns content to the description slot', async () => {\n const el = await fixture<MenuItem>(html`\n <sp-menu-item selected>\n Menu Item Text\n <span slot=\"description\">Description for the Menu-Item</span>\n </sp-menu-item>\n `);\n const descriptionElement = el.querySelector('span') as HTMLElement;\n expect(descriptionElement.assignedSlot).to.not.be.null;\n });\n it('acualizes a submenu', async () => {\n const test = await fixture<Menu>(html`\n <sp-menu>\n <sp-menu-item selected>Selected</sp-menu-item>\n </sp-menu>\n `);\n\n const el = test.querySelector('sp-menu-item') as MenuItem;\n\n expect(el.hasSubmenu).to.be.false;\n\n const submenuItem = document.createElement('sp-menu-item');\n const submenu = document.createElement('sp-menu');\n submenuItem.textContent = 'Test Submenu Item';\n submenu.slot = 'submenu';\n submenu.append(submenuItem);\n\n el.append(submenu);\n await elementUpdated(el);\n\n expect(el.hasSubmenu).to.be.true;\n\n submenu.remove();\n await elementUpdated(el);\n\n expect(el.hasSubmenu).to.be.false;\n });\n\n it('should not allow text-align to cascade when used inside an overlay', async () => {\n const element = await fixture<HTMLDivElement>(html`\n <div style=\"text-align: center\">\n <p>\n The paragraph and the button are centered. Menu items are\n not.\n </p>\n <sp-action-menu label=\"Actions\" selects=\"single\">\n <sp-menu-item>One</sp-menu-item>\n <sp-menu-item>Two</sp-menu-item>\n <sp-menu-item>This is a long option</sp-menu-item>\n <sp-menu-item>\n More options\n <sp-menu slot=\"submenu\">\n <sp-menu-item>Three</sp-menu-item>\n <sp-menu-item>Four</sp-menu-item>\n <sp-menu-item>Another long option</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n </sp-action-menu>\n </div>\n `);\n\n const menuItems = element.querySelectorAll(\n 'sp-menu-item'\n ) as NodeListOf<MenuItem>;\n\n for (const menuItem of menuItems)\n expect(getComputedStyle(menuItem).textAlign).to.equal('start');\n });\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|