@spectrum-web-components/action-menu 1.3.0-beta.2 → 1.3.0-testing.0

package/stories/action-menu.stories.js

@@ -1,490 +0,0 @@
-"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-divider.js";
-import "@spectrum-web-components/menu/sp-menu-group.js";
-import "@spectrum-web-components/menu/sp-menu-item.js";
-import "@spectrum-web-components/menu/sp-menu.js";
-import { slottableRequest } from "@spectrum-web-components/overlay/src/slottable-request-directive.js";
-import "@spectrum-web-components/tooltip/sp-tooltip.js";
-import { makeOverBackground } from "../../button/stories/index.js";
-import { isOverlayOpen } from "../../overlay/stories/index.js";
-import { ActionMenuMarkup } from "./";
-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,
-    forcePopover: 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 forcePopoverOnMobile = () => html`
-    <div style="padding: 40px">
-        <h1>Force Popover on Mobile</h1>
-        <p>
-            The forcePopover attribute overrides the mobile device functionality
-            of rendering a tray so that a popover will always render no matter
-            the device.
-        </p>
-        <ol>
-            <li>Open Chrome DevTools (or equivalent).</li>
-            <li>Toggle the Device Toolbar (the phone/tablet icon).</li>
-            <li>Select a device preset (e.g. iPhone 12).</li>
-            <li>
-                Chrome will set user-agent strings, simulate touch, and adjust
-                DPI.
-            </li>
-            <li>Reload the page</li>
-            <li>Click the Action Menu and see a popover</li>
-        </ol>
-        <sp-action-menu forcePopover>
-            <span slot="icon">
-                <sp-icon-settings></sp-icon-settings>
-            </span>
-            <sp-menu-item>Deselect</sp-menu-item>
-            <sp-menu-item>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>
-    </div>
-`;
-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
-        id="groups"
-        @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
-};
-groupsWithSelects.parameters = {
-  // Disables Chromatic's snapshotting on a global level
-  chromatic: { disableSnapshot: 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
-};
-directive.parameters = {
-  // Disables Chromatic's snapshotting on a global level
-  chromatic: { disableSnapshot: 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>
-    `;
-};
-withScrollEvent.parameters = {
-  chromatic: { disableSnapshot: true }
-};
-export const MenuItemAlerts = () => html`
-    <sp-action-menu size="m">
-        <span slot="label">More Actions</span>
-        <sp-menu-item @click=${() => alert("Deselect")}>Deselect</sp-menu-item>
-        <sp-menu-item @click=${() => alert("Select inverse")}>
-            Select inverse
-        </sp-menu-item>
-        <sp-menu-item @click=${() => alert("Feather...")}>
-            Feather...
-        </sp-menu-item>
-        <sp-menu-item @click=${() => alert("Select and mask...")}>
-            Select and mask...
-        </sp-menu-item>
-        <sp-menu-divider></sp-menu-divider>
-        <sp-menu-item @click=${() => alert("Save selection")}>
-            Save selection
-        </sp-menu-item>
-        <sp-menu-item disabled>Make work path</sp-menu-item>
-    </sp-action-menu>
-`;
-//# sourceMappingURL=action-menu.stories.js.map

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

@@ -1,7 +0,0 @@
-{
-  "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-divider.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport { slottableRequest } from '@spectrum-web-components/overlay/src/slottable-request-directive.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport { makeOverBackground } from '../../button/stories/index.js';\nimport { isOverlayOpen } from '../../overlay/stories/index.js';\nimport { ActionMenuMarkup } from './';\n\nimport type { ActionMenu } from '@spectrum-web-components/action-menu';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js';\nimport { Menu } from '@spectrum-web-components/menu';\nimport type { MenuItem } from '@spectrum-web-components/menu/src/MenuItem.js';\nimport { Placement } from '@spectrum-web-components/overlay/src/overlay-types.js';\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        forcePopover: 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    forcePopover?: boolean;\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 forcePopoverOnMobile = (): TemplateResult => html`\n    <div style=\"padding: 40px\">\n        <h1>Force Popover on Mobile</h1>\n        <p>\n            The forcePopover attribute overrides the mobile device functionality\n            of rendering a tray so that a popover will always render no matter\n            the device.\n        </p>\n        <ol>\n            <li>Open Chrome DevTools (or equivalent).</li>\n            <li>Toggle the Device Toolbar (the phone/tablet icon).</li>\n            <li>Select a device preset (e.g. iPhone 12).</li>\n            <li>\n                Chrome will set user-agent strings, simulate touch, and adjust\n                DPI.\n            </li>\n            <li>Reload the page</li>\n            <li>Click the Action Menu and see a popover</li>\n        </ol>\n        <sp-action-menu forcePopover>\n            <span slot=\"icon\">\n                <sp-icon-settings></sp-icon-settings>\n            </span>\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-action-menu>\n    </div>\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        id=\"groups\"\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\ngroupsWithSelects.parameters = {\n    // Disables Chromatic's snapshotting on a global level\n    chromatic: { disableSnapshot: 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\ndirective.parameters = {\n    // Disables Chromatic's snapshotting on a global level\n    chromatic: { disableSnapshot: 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\nwithScrollEvent.parameters = {\n    chromatic: { disableSnapshot: true },\n};\n\nexport const MenuItemAlerts = (): TemplateResult => html`\n    <sp-action-menu size=\"m\">\n        <span slot=\"label\">More Actions</span>\n        <sp-menu-item @click=${() => alert('Deselect')}>Deselect</sp-menu-item>\n        <sp-menu-item @click=${() => alert('Select inverse')}>\n            Select inverse\n        </sp-menu-item>\n        <sp-menu-item @click=${() => alert('Feather...')}>\n            Feather...\n        </sp-menu-item>\n        <sp-menu-item @click=${() => alert('Select and mask...')}>\n            Select and mask...\n        </sp-menu-item>\n        <sp-menu-divider></sp-menu-divider>\n        <sp-menu-item @click=${() => alert('Save selection')}>\n            Save selection\n        </sp-menu-item>\n        <sp-menu-item disabled>Make work path</sp-menu-item>\n    </sp-action-menu>\n`;\n"],
-  "mappings": "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",
-  "names": ["selects"]
-}

package/stories/index.js

@@ -1,71 +0,0 @@
-"use strict";
-import { html, nothing } 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/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,
-  forcePopover = 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}
-            ?forcePopover=${forcePopover}
-            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

@@ -1,7 +0,0 @@
-{
-  "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 { html, nothing, TemplateResult } from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\nimport type { ActionMenu } from '@spectrum-web-components/action-menu';\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 { Placement } from '@spectrum-web-components/overlay/src/overlay-types.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\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    forcePopover = 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            ?forcePopover=${forcePopover}\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,MAAM,eAA+B;AAC9C,SAAS,iBAAiB;AAG1B,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAEP,OAAO;AAEA,aAAM,mBAAmB,CAAC;AAAA,EAC7B,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,WAAY,MAAM;AAAA,EAClB,gBAAiB,MAAM;AAAA,EACvB,WAAW;AAAA,EACX,eAAe;AAAA,EACf,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,4BACE,YAAY;AAAA,2BACb;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": []
-}