@spectrum-web-components/action-menu 1.0.2 → 1.0.3

package/stories/action-menu.stories.js

@@ -0,0 +1,424 @@
+"use strict";
+import { html } from "@spectrum-web-components/base";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import "@spectrum-web-components/action-menu/sp-action-menu.js";
+import "@spectrum-web-components/menu/sp-menu.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/menu/sp-menu-group.js";
+import "@spectrum-web-components/menu/sp-menu-divider.js";
+import "@spectrum-web-components/tooltip/sp-tooltip.js";
+import { slottableRequest } from "@spectrum-web-components/overlay/src/slottable-request-directive.js";
+import { ActionMenuMarkup } from "./";
+import { makeOverBackground } from "../../button/stories/index.js";
+import { isOverlayOpen } from "../../overlay/stories/index.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js";
+export default {
+  component: "sp-action-menu",
+  title: "Action menu",
+  argTypes: {
+    onChange: { action: "change" },
+    disabled: {
+      name: "disabled",
+      type: { name: "boolean", required: false },
+      description: "Disable this control. It will not receive focus or events.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      },
+      control: {
+        type: "boolean"
+      }
+    },
+    open: {
+      name: "open",
+      type: { name: "boolean", required: false },
+      description: "Whether the menu is open or not.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      },
+      control: "boolean"
+    },
+    visibleLabel: {
+      name: "Visible Label",
+      description: "The placeholder content for the picker.",
+      type: { name: "string", required: false },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      },
+      control: "text"
+    },
+    tooltipDescription: {
+      name: "Tooltip Description",
+      type: { name: "string", required: false },
+      description: "Tooltip description",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      },
+      control: {
+        type: "text"
+      }
+    },
+    tooltipPlacement: {
+      name: "Tooltip Placement",
+      type: { name: "string", required: false },
+      description: "Tooltip Placement.",
+      table: {
+        defaultValue: { summary: "bottom" }
+      },
+      control: {
+        options: [
+          "auto",
+          "auto-start",
+          "auto-end",
+          "top",
+          "bottom",
+          "right",
+          "left",
+          "top-start",
+          "top-end",
+          "bottom-start",
+          "bottom-end",
+          "right-start",
+          "right-end",
+          "left-start",
+          "left-end",
+          "none"
+        ],
+        type: "select"
+      }
+    },
+    quiet: {
+      name: "quiet",
+      type: { name: "boolean", required: false },
+      description: "Quiet rendering",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      },
+      control: {
+        type: "boolean"
+      }
+    },
+    staticColorValue: {
+      name: "static-color",
+      type: { name: "string", required: false },
+      description: "The visual static color variant to apply to the button.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "none" }
+      },
+      control: {
+        type: "select",
+        labels: {
+          white: "white",
+          black: "black",
+          none: void 0
+        },
+        options: ["white", "black", "none"]
+      }
+    },
+    align: {
+      name: "align",
+      type: { name: "string", required: false },
+      description: "Alignment of the Action Menu",
+      table: {
+        defaultValue: { summary: "start" }
+      },
+      control: {
+        type: "select",
+        labels: {
+          start: "start",
+          end: "end"
+        }
+      },
+      options: ["start", "end"]
+    }
+  },
+  args: {
+    align: "start",
+    visibleLabel: "More Actions",
+    disabled: false,
+    open: false,
+    quiet: false,
+    tooltipDescription: "",
+    tooltipPlacement: "bottom",
+    static: void 0
+  }
+};
+const Template = (args = {}) => ActionMenuMarkup(args);
+export const Default = (args = {}) => Template(args);
+export const staticWhite = (args = {}) => Template(args);
+staticWhite.args = {
+  staticValue: "white"
+};
+staticWhite.decorators = [makeOverBackground()];
+export const staticBlack = (args = {}) => Template(args);
+staticBlack.args = {
+  staticValue: "black"
+};
+staticBlack.decorators = [makeOverBackground()];
+export const quiet = (args = {}) => Template(args);
+quiet.args = {
+  quiet: true
+};
+export const labelOnly = ({
+  align = "start",
+  changeHandler = () => void 0,
+  disabled = false,
+  open = false,
+  size = "m",
+  selects: selects2 = "",
+  selected = false
+} = {}) => html`
+    <sp-action-menu
+        ?disabled=${disabled}
+        ?open=${open}
+        size=${size}
+        @change=${(event) => {
+  navigator.clipboard.writeText(event.target.value);
+  changeHandler(event);
+}}
+        .selects=${selects2 ? selects2 : void 0}
+        value=${selected ? "Select Inverse" : ""}
+        style=${ifDefined(align === "end" ? "float: inline-end;" : void 0)}
+    >
+        <span slot="label-only">Label Only</span>
+        <sp-menu-item>Deselect</sp-menu-item>
+        <sp-menu-item ?selected=${selected}>Select Inverse</sp-menu-item>
+        <sp-menu-item>Feather...</sp-menu-item>
+        <sp-menu-item>Select and Mask...</sp-menu-item>
+        <sp-menu-divider></sp-menu-divider>
+        <sp-menu-item>Save Selection</sp-menu-item>
+        <sp-menu-item disabled>Make Work Path</sp-menu-item>
+    </sp-action-menu>
+`;
+export const selects = (args = {}) => Template({
+  ...args,
+  selects: "single",
+  selected: true
+});
+selects.args = {
+  open: true
+};
+selects.decorators = [isOverlayOpen];
+export const iconOnly = (args = {}) => Template(args);
+iconOnly.args = {
+  visibleLabel: ""
+};
+export const tooltipDescriptionAndPlacement = (args = {}) => Template(args);
+tooltipDescriptionAndPlacement.args = {
+  tooltipDescription: "Your tooltip string here",
+  visibleLabel: "",
+  tooltipPlacement: "bottom"
+};
+export const customIcon = (args) => Template(args);
+customIcon.args = {
+  customIcon: html`
+        <sp-icon-settings slot="icon"></sp-icon-settings>
+    `,
+  visibleLabel: ""
+};
+export const submenu = ({ align = "start" } = {}) => {
+  return html`
+        <sp-action-menu
+            label="More Actions"
+            style=${ifDefined(
+    align === "end" ? "float: inline-end;" : void 0
+  )}
+        >
+            <sp-menu-item>One</sp-menu-item>
+            <sp-menu-item>Two</sp-menu-item>
+            <sp-menu-item>
+                Select some items
+                <sp-menu slot="submenu" selects="multiple">
+                    <sp-menu-item>A</sp-menu-item>
+                    <sp-menu-item selected>B</sp-menu-item>
+                    <sp-menu-item>C</sp-menu-item>
+                </sp-menu>
+            </sp-menu-item>
+        </sp-action-menu>
+    `;
+};
+export const controlled = ({ align = "start" } = {}) => {
+  const state = {
+    snap: true,
+    grid: false,
+    guides: true,
+    latestChange: ""
+  };
+  function toggle(prop) {
+    return (event) => {
+      const item = event.target;
+      state[prop] = !state[prop];
+      item.selected = state[prop];
+    };
+  }
+  function onChange(event) {
+    state.latestChange = event.target.value;
+    logState();
+  }
+  function logState() {
+    document.getElementById("state-json").textContent = `application state: ${JSON.stringify(state)}`;
+  }
+  return html`
+        <sp-action-menu
+            label="View"
+            @change=${onChange}
+            style=${ifDefined(
+    align === "end" ? "float: inline-end;" : void 0
+  )}
+        >
+            <sp-menu-item value="action" @click=${() => alert("action")}>
+                Non-selectable action
+            </sp-menu-item>
+            <sp-menu-item
+                value="snap"
+                ?selected=${state.snap}
+                @click=${toggle("snap")}
+            >
+                Snap
+            </sp-menu-item>
+            <sp-menu-item>
+                Show
+                <sp-menu
+                    slot="submenu"
+                    selects="multiple"
+                    @change=${(event) => event.preventDefault()}
+                >
+                    <sp-menu-item
+                        value="grid"
+                        ?selected=${state.grid}
+                        @click=${toggle("grid")}
+                    >
+                        Grid
+                    </sp-menu-item>
+                    <sp-menu-item
+                        value="guides"
+                        ?selected=${state.guides}
+                        @click=${toggle("guides")}
+                    >
+                        Guides
+                    </sp-menu-item>
+                </sp-menu>
+            </sp-menu-item>
+        </sp-action-menu>
+        <span id="state-json"></span>
+    `;
+};
+export const groups = ({
+  align = "start",
+  onChange
+}) => html`
+    <sp-action-menu
+        @change=${({ target: { value } }) => onChange(value)}
+        open
+        style=${ifDefined(align === "end" ? "float: inline-end;" : void 0)}
+    >
+        <sp-menu-group id="cms">
+            <span slot="header">cms</span>
+            <sp-menu-item value="updateAllSiteContent">
+                Update All Content
+            </sp-menu-item>
+            <sp-menu-item value="refreshAllXDs">Refresh All XDs</sp-menu-item>
+        </sp-menu-group>
+        <sp-menu-group id="ssg">
+            <span slot="header">ssg</span>
+            <sp-menu-item value="clearCache">Clear Cache</sp-menu-item>
+        </sp-menu-group>
+        <sp-menu-group id="vrt">
+            <span slot="header">vrt</span>
+            <sp-menu-item value="vrt-contributions">Contributions</sp-menu-item>
+            <sp-menu-item value="vrt-internal">Internal</sp-menu-item>
+            <sp-menu-item value="vrt-public">Public</sp-menu-item>
+            <sp-menu-item value="vrt-patterns">Patterns</sp-menu-item>
+            <sp-menu-item value="vrt">All</sp-menu-item>
+        </sp-menu-group>
+        <sp-menu-divider></sp-menu-divider>
+        <sp-menu-group id="misc">
+            <sp-menu-item value="logout">Logout</sp-menu-item>
+        </sp-menu-group>
+    </sp-action-menu>
+`;
+groups.decorators = [isOverlayOpen];
+export const groupsWithSelects = ({
+  onChange
+}) => {
+  return html`
+        <sp-action-menu
+            @change=${({ target: { value } }) => onChange(value)}
+            label="Filter or Sort"
+        >
+            <sp-menu-group selects="single">
+                <span slot="header">Sort By</span>
+                <sp-menu-item>Name</sp-menu-item>
+                <sp-menu-item>Created</sp-menu-item>
+                <sp-menu-item>Modified</sp-menu-item>
+            </sp-menu-group>
+            <sp-menu-divider></sp-menu-divider>
+            <sp-menu-group selects="multiple">
+                <sp-menu-item>Reverse Order</sp-menu-item>
+            </sp-menu-group>
+        </sp-action-menu>
+    `;
+};
+groupsWithSelects.swc_vrt = {
+  skip: true
+};
+export const directive = () => {
+  const renderSubmenu = () => html`
+        <sp-menu-item>Submenu Item 1</sp-menu-item>
+        <sp-menu-item>Submenu Item 2</sp-menu-item>
+        <sp-menu-item>Submenu Item 3</sp-menu-item>
+        <sp-menu-item>Submenu Item 4</sp-menu-item>
+    `;
+  const renderOptions = () => html`
+        <sp-menu-item>Deselect</sp-menu-item>
+        <sp-menu-item>Select Inverse</sp-menu-item>
+        <sp-menu-item>
+            Feather...
+            <sp-menu
+                slot="submenu"
+                ${slottableRequest(renderSubmenu)}
+            ></sp-menu>
+        </sp-menu-item>
+        <sp-menu-item>Select and Mask...</sp-menu-item>
+        <sp-menu-divider></sp-menu-divider>
+        <sp-menu-item>Save Selection</sp-menu-item>
+        <sp-menu-item disabled>Make Work Path</sp-menu-item>
+    `;
+  return html`
+        <sp-action-menu ${slottableRequest(renderOptions)}>
+            <span slot="label">
+                Select a Country with a very long label, too long in fact
+            </span>
+        </sp-action-menu>
+    `;
+};
+directive.swc_vrt = {
+  skip: true
+};
+export const withScrollEvent = () => {
+  function handleActionMenuScroll() {
+    console.log("attached action menu scroll listener");
+  }
+  function renderMenuItems() {
+    return Array.from(
+      { length: 30 },
+      (_, i) => html`
+                <sp-menu-item style="width: 100%;">
+                    This is an Action Menu Item ${i + 1}
+                </sp-menu-item>
+            `
+    );
+  }
+  return html`
+        <sp-action-menu @scroll=${handleActionMenuScroll} open>
+            <span slot="label">This is an Action Menu</span>
+            ${renderMenuItems()}
+        </sp-action-menu>
+    `;
+};
+//# sourceMappingURL=action-menu.stories.js.map

package/stories/action-menu.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["action-menu.stories.ts"],
+  "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';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport { slottableRequest } from '@spectrum-web-components/overlay/src/slottable-request-directive.js';\nimport { ActionMenuMarkup } from './';\nimport { makeOverBackground } from '../../button/stories/index.js';\nimport { isOverlayOpen } from '../../overlay/stories/index.js';\n\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js';\nimport type { MenuItem } from '@spectrum-web-components/menu/src/MenuItem.js';\nimport { Placement } from '@spectrum-web-components/overlay/src/overlay-types.js';\nimport { Menu } from '@spectrum-web-components/menu';\nimport type { ActionMenu } from '@spectrum-web-components/action-menu';\n\nexport default {\n    component: 'sp-action-menu',\n    title: 'Action menu',\n    argTypes: {\n        onChange: { action: 'change' },\n        disabled: {\n            name: 'disabled',\n            type: { name: 'boolean', required: false },\n            description:\n                'Disable this control. It will not receive focus or events.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        open: {\n            name: 'open',\n            type: { name: 'boolean', required: false },\n            description: 'Whether the menu is open or not.',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: 'boolean',\n        },\n        visibleLabel: {\n            name: 'Visible Label',\n            description: 'The placeholder content for the picker.',\n            type: { name: 'string', required: false },\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: '' },\n            },\n            control: 'text',\n        },\n        tooltipDescription: {\n            name: 'Tooltip Description',\n            type: { name: 'string', required: false },\n            description: 'Tooltip description',\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: '' },\n            },\n            control: {\n                type: 'text',\n            },\n        },\n        tooltipPlacement: {\n            name: 'Tooltip Placement',\n            type: { name: 'string', required: false },\n            description: 'Tooltip Placement.',\n            table: {\n                defaultValue: { summary: 'bottom' },\n            },\n            control: {\n                options: [\n                    'auto',\n                    'auto-start',\n                    'auto-end',\n                    'top',\n                    'bottom',\n                    'right',\n                    'left',\n                    'top-start',\n                    'top-end',\n                    'bottom-start',\n                    'bottom-end',\n                    'right-start',\n                    'right-end',\n                    'left-start',\n                    'left-end',\n                    'none',\n                ],\n                type: 'select',\n            },\n        },\n        quiet: {\n            name: 'quiet',\n            type: { name: 'boolean', required: false },\n            description: 'Quiet rendering',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: false },\n            },\n            control: {\n                type: 'boolean',\n            },\n        },\n        staticColorValue: {\n            name: 'static-color',\n            type: { name: 'string', required: false },\n            description:\n                'The visual static color variant to apply to the button.',\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: 'none' },\n            },\n            control: {\n                type: 'select',\n                labels: {\n                    white: 'white',\n                    black: 'black',\n                    none: undefined,\n                },\n                options: ['white', 'black', 'none'],\n            },\n        },\n        align: {\n            name: 'align',\n            type: { name: 'string', required: false },\n            description: 'Alignment of the Action Menu',\n            table: {\n                defaultValue: { summary: 'start' },\n            },\n            control: {\n                type: 'select',\n                labels: {\n                    start: 'start',\n                    end: 'end',\n                },\n            },\n            options: ['start', 'end'],\n        },\n    },\n    args: {\n        align: 'start',\n        visibleLabel: 'More Actions',\n        disabled: false,\n        open: false,\n        quiet: false,\n        tooltipDescription: '',\n        tooltipPlacement: 'bottom',\n        static: undefined,\n    },\n};\n\ninterface StoryArgs {\n    align?: 'start' | 'end';\n    visibleLabel?: string;\n    disabled?: boolean;\n    open?: boolean;\n    customIcon?: string | TemplateResult;\n    selects?: 'single';\n    selected?: boolean;\n    quiet?: boolean;\n    staticValue?: 'white' | 'black' | undefined;\n    tooltipDescription?: string | 'none';\n    tooltipPlacement?: Placement;\n}\n\nconst Template = (args: StoryArgs = {}): TemplateResult =>\n    ActionMenuMarkup(args);\n\nexport const Default = (args: StoryArgs = {}): TemplateResult => Template(args);\n\nexport const staticWhite = (args: StoryArgs = {}): TemplateResult =>\n    Template(args);\nstaticWhite.args = {\n    staticValue: 'white',\n};\nstaticWhite.decorators = [makeOverBackground()];\nexport const staticBlack = (args: StoryArgs = {}): TemplateResult =>\n    Template(args);\nstaticBlack.args = {\n    staticValue: 'black',\n};\nstaticBlack.decorators = [makeOverBackground()];\nexport const quiet = (args: StoryArgs = {}): TemplateResult => Template(args);\nquiet.args = {\n    quiet: true,\n};\n\nexport const labelOnly = ({\n    align = 'start',\n    changeHandler = (() => undefined) as (event: Event) => void,\n    disabled = false,\n    open = false,\n    size = 'm' as 'm' | 's' | 'l' | 'xl' | 'xxl',\n    selects = '' as 'single',\n    selected = false,\n} = {}): TemplateResult => html`\n    <sp-action-menu\n        ?disabled=${disabled}\n        ?open=${open}\n        size=${size}\n        @change=${(event: Event & { target: Menu }): void => {\n            navigator.clipboard.writeText(event.target.value);\n            changeHandler(event);\n        }}\n        .selects=${selects ? selects : undefined}\n        value=${selected ? 'Select Inverse' : ''}\n        style=${ifDefined(align === 'end' ? 'float: inline-end;' : undefined)}\n    >\n        <span slot=\"label-only\">Label Only</span>\n        <sp-menu-item>Deselect</sp-menu-item>\n        <sp-menu-item ?selected=${selected}>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-action-menu>\n`;\n\nexport const selects = (args: StoryArgs = {}): TemplateResult =>\n    Template({\n        ...args,\n        selects: 'single',\n        selected: true,\n    });\nselects.args = {\n    open: true,\n};\nselects.decorators = [isOverlayOpen];\n\nexport const iconOnly = (args: StoryArgs = {}): TemplateResult =>\n    Template(args);\niconOnly.args = {\n    visibleLabel: '',\n};\n\nexport const tooltipDescriptionAndPlacement = (\n    args: StoryArgs = {}\n): TemplateResult => Template(args);\ntooltipDescriptionAndPlacement.args = {\n    tooltipDescription: 'Your tooltip string here',\n    visibleLabel: '',\n    tooltipPlacement: 'bottom',\n} as StoryArgs;\n\nexport const customIcon = (args: StoryArgs): TemplateResult => Template(args);\ncustomIcon.args = {\n    customIcon: html`\n        <sp-icon-settings slot=\"icon\"></sp-icon-settings>\n    `,\n    visibleLabel: '',\n};\n\nexport const submenu = ({ align = 'start' } = {}): TemplateResult => {\n    return html`\n        <sp-action-menu\n            label=\"More Actions\"\n            style=${ifDefined(\n                align === 'end' ? 'float: inline-end;' : undefined\n            )}\n        >\n            <sp-menu-item>One</sp-menu-item>\n            <sp-menu-item>Two</sp-menu-item>\n            <sp-menu-item>\n                Select some items\n                <sp-menu slot=\"submenu\" selects=\"multiple\">\n                    <sp-menu-item>A</sp-menu-item>\n                    <sp-menu-item selected>B</sp-menu-item>\n                    <sp-menu-item>C</sp-menu-item>\n                </sp-menu>\n            </sp-menu-item>\n        </sp-action-menu>\n    `;\n};\n\nexport const controlled = ({ align = 'start' } = {}): TemplateResult => {\n    const state = {\n        snap: true,\n        grid: false,\n        guides: true,\n        latestChange: '',\n    };\n    function toggle(prop: 'snap' | 'grid' | 'guides') {\n        return (event: Event): void => {\n            const item = event.target as MenuItem;\n            state[prop] = !state[prop];\n            // in Lit-based usage, this would be handled via render():\n            // <sp-menu-item ?selected=${this.isSomethingSelected}>\n            item.selected = state[prop];\n        };\n    }\n    function onChange(event: Event): void {\n        state.latestChange = (event.target as MenuItem).value;\n        logState();\n    }\n    function logState(): void {\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        document.getElementById('state-json')!.textContent =\n            `application state: ${JSON.stringify(state)}`;\n    }\n    return html`\n        <sp-action-menu\n            label=\"View\"\n            @change=${onChange}\n            style=${ifDefined(\n                align === 'end' ? 'float: inline-end;' : undefined\n            )}\n        >\n            <sp-menu-item value=\"action\" @click=${() => alert('action')}>\n                Non-selectable action\n            </sp-menu-item>\n            <sp-menu-item\n                value=\"snap\"\n                ?selected=${state.snap}\n                @click=${toggle('snap')}\n            >\n                Snap\n            </sp-menu-item>\n            <sp-menu-item>\n                Show\n                <sp-menu\n                    slot=\"submenu\"\n                    selects=\"multiple\"\n                    @change=${(event: Event) => event.preventDefault()}\n                >\n                    <sp-menu-item\n                        value=\"grid\"\n                        ?selected=${state.grid}\n                        @click=${toggle('grid')}\n                    >\n                        Grid\n                    </sp-menu-item>\n                    <sp-menu-item\n                        value=\"guides\"\n                        ?selected=${state.guides}\n                        @click=${toggle('guides')}\n                    >\n                        Guides\n                    </sp-menu-item>\n                </sp-menu>\n            </sp-menu-item>\n        </sp-action-menu>\n        <span id=\"state-json\"></span>\n    `;\n};\n\nexport const groups = ({\n    align = 'start',\n    onChange,\n}: {\n    align: 'start' | 'end';\n    onChange(value: string): void;\n}): TemplateResult => html`\n    <sp-action-menu\n        @change=${({ target: { value } }: Event & { target: ActionMenu }) =>\n            onChange(value)}\n        open\n        style=${ifDefined(align === 'end' ? 'float: inline-end;' : undefined)}\n    >\n        <sp-menu-group id=\"cms\">\n            <span slot=\"header\">cms</span>\n            <sp-menu-item value=\"updateAllSiteContent\">\n                Update All Content\n            </sp-menu-item>\n            <sp-menu-item value=\"refreshAllXDs\">Refresh All XDs</sp-menu-item>\n        </sp-menu-group>\n        <sp-menu-group id=\"ssg\">\n            <span slot=\"header\">ssg</span>\n            <sp-menu-item value=\"clearCache\">Clear Cache</sp-menu-item>\n        </sp-menu-group>\n        <sp-menu-group id=\"vrt\">\n            <span slot=\"header\">vrt</span>\n            <sp-menu-item value=\"vrt-contributions\">Contributions</sp-menu-item>\n            <sp-menu-item value=\"vrt-internal\">Internal</sp-menu-item>\n            <sp-menu-item value=\"vrt-public\">Public</sp-menu-item>\n            <sp-menu-item value=\"vrt-patterns\">Patterns</sp-menu-item>\n            <sp-menu-item value=\"vrt\">All</sp-menu-item>\n        </sp-menu-group>\n        <sp-menu-divider></sp-menu-divider>\n        <sp-menu-group id=\"misc\">\n            <sp-menu-item value=\"logout\">Logout</sp-menu-item>\n        </sp-menu-group>\n    </sp-action-menu>\n`;\n\ngroups.decorators = [isOverlayOpen];\n\nexport const groupsWithSelects = ({\n    onChange,\n}: {\n    onChange(value: string): void;\n}): TemplateResult => {\n    return html`\n        <sp-action-menu\n            @change=${({ target: { value } }: Event & { target: ActionMenu }) =>\n                onChange(value)}\n            label=\"Filter or Sort\"\n        >\n            <sp-menu-group selects=\"single\">\n                <span slot=\"header\">Sort By</span>\n                <sp-menu-item>Name</sp-menu-item>\n                <sp-menu-item>Created</sp-menu-item>\n                <sp-menu-item>Modified</sp-menu-item>\n            </sp-menu-group>\n            <sp-menu-divider></sp-menu-divider>\n            <sp-menu-group selects=\"multiple\">\n                <sp-menu-item>Reverse Order</sp-menu-item>\n            </sp-menu-group>\n        </sp-action-menu>\n    `;\n};\n\ngroupsWithSelects.swc_vrt = {\n    skip: true,\n};\n\nexport const directive = (): TemplateResult => {\n    const renderSubmenu = (): TemplateResult => html`\n        <sp-menu-item>Submenu Item 1</sp-menu-item>\n        <sp-menu-item>Submenu Item 2</sp-menu-item>\n        <sp-menu-item>Submenu Item 3</sp-menu-item>\n        <sp-menu-item>Submenu Item 4</sp-menu-item>\n    `;\n    const renderOptions = (): TemplateResult => html`\n        <sp-menu-item>Deselect</sp-menu-item>\n        <sp-menu-item>Select Inverse</sp-menu-item>\n        <sp-menu-item>\n            Feather...\n            <sp-menu\n                slot=\"submenu\"\n                ${slottableRequest(renderSubmenu)}\n            ></sp-menu>\n        </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    `;\n    return html`\n        <sp-action-menu ${slottableRequest(renderOptions)}>\n            <span slot=\"label\">\n                Select a Country with a very long label, too long in fact\n            </span>\n        </sp-action-menu>\n    `;\n};\n\ndirective.swc_vrt = {\n    skip: true,\n};\n\nexport const withScrollEvent = (): TemplateResult => {\n    function handleActionMenuScroll(): void {\n        console.log('attached action menu scroll listener');\n    }\n\n    function renderMenuItems(): TemplateResult[] {\n        return Array.from(\n            { length: 30 },\n            (_, i) => html`\n                <sp-menu-item style=\"width: 100%;\">\n                    This is an Action Menu Item ${i + 1}\n                </sp-menu-item>\n            `\n        );\n    }\n\n    return html`\n        <sp-action-menu @scroll=${handleActionMenuScroll} open>\n            <span slot=\"label\">This is an Action Menu</span>\n            ${renderMenuItems()}\n        </sp-action-menu>\n    `;\n};\n"],
+  "mappings": "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",
+  "names": ["selects"]
+}

package/stories/index.js

@@ -0,0 +1,69 @@
+"use strict";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import { html, nothing } from "@spectrum-web-components/base";
+import "@spectrum-web-components/action-menu/sp-action-menu.js";
+import "@spectrum-web-components/icon/sp-icon.js";
+import "@spectrum-web-components/menu/sp-menu-divider.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/tooltip/sp-tooltip.js";
+export const ActionMenuMarkup = ({
+  align = "start",
+  ariaLabel = "More Actions",
+  onChange = () => void 0,
+  changeHandler = () => void 0,
+  disabled = false,
+  open = false,
+  quiet = false,
+  staticValue = "",
+  visibleLabel = "",
+  customIcon = "",
+  size = "m",
+  selects = "",
+  selected = false,
+  tooltipDescription = "",
+  tooltipPlacement = "bottom"
+} = {}) => {
+  return html`
+        <sp-action-menu
+            label=${ariaLabel}
+            ?disabled=${disabled}
+            ?open=${open}
+            ?quiet=${quiet}
+            static-color=${ifDefined(
+    staticValue === "none" ? void 0 : staticValue
+  )}
+            size=${size}
+            @change=${(event) => {
+    changeHandler(event.target.value);
+    onChange(event.target.value);
+  }}
+            .selects=${selects ? selects : void 0}
+            value=${selected ? "Select Inverse" : ""}
+            style=${ifDefined(
+    align === "end" ? "float: inline-end;" : void 0
+  )}
+        >
+            ${customIcon ? customIcon : nothing}
+            ${visibleLabel ? html`
+                      <span slot="label">${visibleLabel}</span>
+                  ` : nothing}
+            <sp-menu-item>Deselect</sp-menu-item>
+            <sp-menu-item ?selected=${selected}>Select Inverse</sp-menu-item>
+            <sp-menu-item>Feather...</sp-menu-item>
+            <sp-menu-item>Select and Mask...</sp-menu-item>
+            <sp-menu-divider></sp-menu-divider>
+            <sp-menu-item>Save Selection</sp-menu-item>
+            <sp-menu-item disabled>Make Work Path</sp-menu-item>
+            ${tooltipDescription ? html`
+                      <sp-tooltip
+                          slot="tooltip"
+                          self-managed
+                          placement=${tooltipPlacement}
+                      >
+                          ${tooltipDescription}
+                      </sp-tooltip>
+                  ` : html``}
+        </sp-action-menu>
+    `;
+};
+//# sourceMappingURL=index.js.map

package/stories/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["index.ts"],
+  "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 { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { html, nothing, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/icon/sp-icon.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport { Placement } from '@spectrum-web-components/overlay/src/overlay-types.js';\nimport type { ActionMenu } from '@spectrum-web-components/action-menu';\n\nexport const ActionMenuMarkup = ({\n    align = 'start',\n    ariaLabel = 'More Actions',\n    onChange = (() => undefined) as (value: string) => void,\n    changeHandler = (() => undefined) as (value: string) => void,\n    disabled = false,\n    open = false,\n    quiet = false,\n    staticValue = '',\n    visibleLabel = '',\n    customIcon = '' as string | TemplateResult,\n    size = 'm' as 'm' | 's' | 'l' | 'xl' | 'xxl',\n    selects = '' as 'single',\n    selected = false,\n    tooltipDescription = '',\n    tooltipPlacement = 'bottom' as Placement,\n} = {}): TemplateResult => {\n    return html`\n        <sp-action-menu\n            label=${ariaLabel}\n            ?disabled=${disabled}\n            ?open=${open}\n            ?quiet=${quiet}\n            static-color=${ifDefined(\n                staticValue === 'none'\n                    ? undefined\n                    : (staticValue as 'black' | 'white')\n            )}\n            size=${size}\n            @change=${(event: Event & { target: ActionMenu }) => {\n                changeHandler(event.target.value);\n                onChange(event.target.value);\n            }}\n            .selects=${selects ? selects : undefined}\n            value=${selected ? 'Select Inverse' : ''}\n            style=${ifDefined(\n                align === 'end' ? 'float: inline-end;' : undefined\n            )}\n        >\n            ${customIcon ? customIcon : nothing}\n            ${visibleLabel\n                ? html`\n                      <span slot=\"label\">${visibleLabel}</span>\n                  `\n                : nothing}\n            <sp-menu-item>Deselect</sp-menu-item>\n            <sp-menu-item ?selected=${selected}>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            ${tooltipDescription\n                ? html`\n                      <sp-tooltip\n                          slot=\"tooltip\"\n                          self-managed\n                          placement=${tooltipPlacement}\n                      >\n                          ${tooltipDescription}\n                      </sp-tooltip>\n                  `\n                : html``}\n        </sp-action-menu>\n    `;\n};\n"],
+  "mappings": ";AAYA,SAAS,iBAAiB;AAC1B,SAAS,MAAM,eAA+B;AAE9C,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAIA,aAAM,mBAAmB,CAAC;AAAA,EAC7B,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,WAAY,MAAM;AAAA,EAClB,gBAAiB,MAAM;AAAA,EACvB,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,eAAe;AAAA,EACf,aAAa;AAAA,EACb,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,qBAAqB;AAAA,EACrB,mBAAmB;AACvB,IAAI,CAAC,MAAsB;AACvB,SAAO;AAAA;AAAA,oBAES,SAAS;AAAA,wBACL,QAAQ;AAAA,oBACZ,IAAI;AAAA,qBACH,KAAK;AAAA,2BACC;AAAA,IACX,gBAAgB,SACV,SACC;AAAA,EACX,CAAC;AAAA,mBACM,IAAI;AAAA,sBACD,CAAC,UAA0C;AACjD,kBAAc,MAAM,OAAO,KAAK;AAChC,aAAS,MAAM,OAAO,KAAK;AAAA,EAC/B,CAAC;AAAA,uBACU,UAAU,UAAU,MAAS;AAAA,oBAChC,WAAW,mBAAmB,EAAE;AAAA,oBAChC;AAAA,IACJ,UAAU,QAAQ,uBAAuB;AAAA,EAC7C,CAAC;AAAA;AAAA,cAEC,aAAa,aAAa,OAAO;AAAA,cACjC,eACI;AAAA,2CACyB,YAAY;AAAA,sBAErC,OAAO;AAAA;AAAA,sCAEa,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMhC,qBACI;AAAA;AAAA;AAAA;AAAA,sCAIoB,gBAAgB;AAAA;AAAA,4BAE1B,kBAAkB;AAAA;AAAA,sBAG5B,MAAM;AAAA;AAAA;AAGxB;",
+  "names": []
+}

package/test/action-menu-directive.test.js

@@ -0,0 +1,29 @@
+"use strict";
+import { expect, oneEvent } from "@open-wc/testing";
+import { sendKeys } from "@web/test-runner-commands";
+import { directive } from "../stories/action-menu.stories.js";
+import { fixture } from "../../../test/testing-helpers.js";
+import { nextFrame } from "@spectrum-web-components/overlay/src/AbstractOverlay.js";
+describe("Slottable Request Directive", () => {
+  it("Action Menu requests for options rendering when opening and closing", async function() {
+    const el = await fixture(directive());
+    const initialNodeLength = el.children.length;
+    expect(el.open).to.be.false;
+    expect(el.children.length).to.equal(initialNodeLength);
+    const opened = oneEvent(el, "sp-opened");
+    el.click();
+    await opened;
+    expect(el.open).to.be.true;
+    expect(el.children.length).to.be.gt(initialNodeLength);
+    const closed = oneEvent(el, "sp-closed");
+    await sendKeys({
+      press: "Escape"
+    });
+    await closed;
+    await nextFrame();
+    await nextFrame();
+    expect(el.open).to.be.false;
+    expect(el.children.length).to.equal(initialNodeLength);
+  });
+});
+//# sourceMappingURL=action-menu-directive.test.js.map

package/test/action-menu-directive.test.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["action-menu-directive.test.ts"],
+  "sourcesContent": ["/*\nCopyright 2024 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 { expect, oneEvent } from '@open-wc/testing';\nimport { ActionMenu } from '@spectrum-web-components/action-menu';\nimport { sendKeys } from '@web/test-runner-commands';\n\nimport { directive } from '../stories/action-menu.stories.js';\nimport { fixture } from '../../../test/testing-helpers.js';\nimport { nextFrame } from '@spectrum-web-components/overlay/src/AbstractOverlay.js';\n\ndescribe('Slottable Request Directive', () => {\n    it('Action Menu requests for options rendering when opening and closing', async function () {\n        const el = await fixture<ActionMenu>(directive());\n        const initialNodeLength = el.children.length;\n        expect(el.open).to.be.false;\n        expect(el.children.length).to.equal(initialNodeLength);\n\n        const opened = oneEvent(el, 'sp-opened');\n        el.click();\n        await opened;\n\n        expect(el.open).to.be.true;\n        expect(el.children.length).to.be.gt(initialNodeLength);\n\n        const closed = oneEvent(el, 'sp-closed');\n        await sendKeys({\n            press: 'Escape',\n        });\n        await closed;\n        await nextFrame();\n        await nextFrame();\n\n        expect(el.open).to.be.false;\n        expect(el.children.length).to.equal(initialNodeLength);\n    });\n});\n"],
+  "mappings": ";AAYA,SAAS,QAAQ,gBAAgB;AAEjC,SAAS,gBAAgB;AAEzB,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAE1B,SAAS,+BAA+B,MAAM;AAC1C,KAAG,uEAAuE,iBAAkB;AACxF,UAAM,KAAK,MAAM,QAAoB,UAAU,CAAC;AAChD,UAAM,oBAAoB,GAAG,SAAS;AACtC,WAAO,GAAG,IAAI,EAAE,GAAG,GAAG;AACtB,WAAO,GAAG,SAAS,MAAM,EAAE,GAAG,MAAM,iBAAiB;AAErD,UAAM,SAAS,SAAS,IAAI,WAAW;AACvC,OAAG,MAAM;AACT,UAAM;AAEN,WAAO,GAAG,IAAI,EAAE,GAAG,GAAG;AACtB,WAAO,GAAG,SAAS,MAAM,EAAE,GAAG,GAAG,GAAG,iBAAiB;AAErD,UAAM,SAAS,SAAS,IAAI,WAAW;AACvC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AACN,UAAM,UAAU;AAChB,UAAM,UAAU;AAEhB,WAAO,GAAG,IAAI,EAAE,GAAG,GAAG;AACtB,WAAO,GAAG,SAAS,MAAM,EAAE,GAAG,MAAM,iBAAiB;AAAA,EACzD,CAAC;AACL,CAAC;",
+  "names": []
+}