Added a new dnn-context-menu component

packages/react-library/lib/components/stencil-generated/components.ts

@@ -15,6 +15,7 @@ import { DnnChevron as DnnChevronElement, defineCustomElement as defineDnnChevro
 import { DnnCollapsible as DnnCollapsibleElement, defineCustomElement as defineDnnCollapsible } from "@dnncommunity/dnn-elements/dist/components/dnn-collapsible.js";
 import { DnnColorInput as DnnColorInputElement, defineCustomElement as defineDnnColorInput } from "@dnncommunity/dnn-elements/dist/components/dnn-color-input.js";
 import { DnnColorPicker as DnnColorPickerElement, defineCustomElement as defineDnnColorPicker } from "@dnncommunity/dnn-elements/dist/components/dnn-color-picker.js";
+import { DnnContextMenu as DnnContextMenuElement, defineCustomElement as defineDnnContextMenu } from "@dnncommunity/dnn-elements/dist/components/dnn-context-menu.js";
 import { DnnDropzone as DnnDropzoneElement, defineCustomElement as defineDnnDropzone } from "@dnncommunity/dnn-elements/dist/components/dnn-dropzone.js";
 import { DnnExampleForm as DnnExampleFormElement, defineCustomElement as defineDnnExampleForm } from "@dnncommunity/dnn-elements/dist/components/dnn-example-form.js";
 import { DnnFieldset as DnnFieldsetElement, defineCustomElement as defineDnnFieldset } from "@dnncommunity/dnn-elements/dist/components/dnn-fieldset.js";
@@ -140,6 +141,17 @@ export const DnnColorPicker: StencilReactComponent<DnnColorPickerElement, DnnCol
     defineCustomElement: defineDnnColorPicker
 });
 
+export type DnnContextMenuEvents = NonNullable<unknown>;
+
+export const DnnContextMenu: StencilReactComponent<DnnContextMenuElement, DnnContextMenuEvents> = /*@__PURE__*/ createComponent<DnnContextMenuElement, DnnContextMenuEvents>({
+    tagName: 'dnn-context-menu',
+    elementClass: DnnContextMenuElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as DnnContextMenuEvents,
+    defineCustomElement: defineDnnContextMenu
+});
+
 export type DnnDropzoneEvents = { onFilesSelected: EventName<DnnDropzoneCustomEvent<File[]>> };
 
 export const DnnDropzone: StencilReactComponent<DnnDropzoneElement, DnnDropzoneEvents> = /*@__PURE__*/ createComponent<DnnDropzoneElement, DnnDropzoneEvents>({

packages/stencil-library/custom-elements.json

@@ -772,6 +772,60 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/dnn-context-menu/dnn-context-menu.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "name": "dnn-context-menu.tsx",
+          "tagName": "dnn-context-menu",
+          "description": "",
+          "attributes": [
+            {
+              "name": "close-on-click",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the menu will close when an item is clicked.",
+              "default": "false",
+              "required": false
+            }
+          ],
+          "members": [
+            {
+              "kind": "method",
+              "name": "close",
+              "description": "Closes the menu.",
+              "signature": "close() => Promise<void>"
+            },
+            {
+              "kind": "method",
+              "name": "open",
+              "description": "Opens the menu using a pointer event.",
+              "signature": "open(event: PointerEvent) => Promise<void>"
+            }
+          ],
+          "events": [],
+          "slots": [],
+          "cssProperties": [
+            {
+              "name": "--color-background",
+              "description": "The background color of the context menu."
+            },
+            {
+              "name": "--color-border",
+              "description": "The border color of the context menu."
+            },
+            {
+              "name": "--padding",
+              "description": "The padding inside the context menu."
+            }
+          ],
+          "cssParts": []
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/dnn-dropzone/dnn-dropzone.tsx",

packages/stencil-library/licenses.json

@@ -1,7 +1,7 @@
 {
     "@dnncommunity/dnn-elements@0.28.0-beta.2": {
         "licenses": "MIT",
-        "repository": "https://github.com/dnncommunity/dnn-elements",
+        "repository": "https://github.com/DNNCommunity/dnn-elements",
         "path": "",
         "licenseFile": "D:\\dnn-elements\\packages\\stencil-library\\README.md"
     },

packages/stencil-library/src/components.d.ts

@@ -300,6 +300,21 @@ export namespace Components {
          */
         "colorBoxHeight": string;
     }
+    interface DnnContextMenu {
+        /**
+          * Closes the menu.
+         */
+        "close": () => Promise<void>;
+        /**
+          * If true, the menu will close when an item is clicked.
+          * @default false
+         */
+        "closeOnClick": boolean;
+        /**
+          * Opens the menu using a pointer event.
+         */
+        "open": (event: PointerEvent) => Promise<void>;
+    }
     interface DnnDropzone {
         /**
           * If true, will allow the user to take a snapshot using the device camera. (only works over https).
@@ -1066,6 +1081,12 @@ declare global {
         prototype: HTMLDnnColorPickerElement;
         new (): HTMLDnnColorPickerElement;
     };
+    interface HTMLDnnContextMenuElement extends Components.DnnContextMenu, HTMLStencilElement {
+    }
+    var HTMLDnnContextMenuElement: {
+        prototype: HTMLDnnContextMenuElement;
+        new (): HTMLDnnContextMenuElement;
+    };
     interface HTMLDnnDropzoneElementEventMap {
         "filesSelected": File[];
     }
@@ -1377,6 +1398,7 @@ declare global {
         "dnn-collapsible": HTMLDnnCollapsibleElement;
         "dnn-color-input": HTMLDnnColorInputElement;
         "dnn-color-picker": HTMLDnnColorPickerElement;
+        "dnn-context-menu": HTMLDnnContextMenuElement;
         "dnn-dropzone": HTMLDnnDropzoneElement;
         "dnn-example-form": HTMLDnnExampleFormElement;
         "dnn-fieldset": HTMLDnnFieldsetElement;
@@ -1733,6 +1755,13 @@ declare namespace LocalJSX {
          */
         "onColorChanged"?: (event: DnnColorPickerCustomEvent<ColorInfo>) => void;
     }
+    interface DnnContextMenu {
+        /**
+          * If true, the menu will close when an item is clicked.
+          * @default false
+         */
+        "closeOnClick"?: boolean;
+    }
     interface DnnDropzone {
         /**
           * If true, will allow the user to take a snapshot using the device camera. (only works over https).
@@ -2392,6 +2421,9 @@ declare namespace LocalJSX {
         "color": string;
         "colorBoxHeight": string;
     }
+    interface DnnContextMenuAttributes {
+        "closeOnClick": boolean;
+    }
     interface DnnDropzoneAttributes {
         "allowCameraMode": boolean;
         "captureQuality": number;
@@ -2515,6 +2547,7 @@ declare namespace LocalJSX {
         "dnn-collapsible": Omit<DnnCollapsible, keyof DnnCollapsibleAttributes> & { [K in keyof DnnCollapsible & keyof DnnCollapsibleAttributes]?: DnnCollapsible[K] } & { [K in keyof DnnCollapsible & keyof DnnCollapsibleAttributes as `attr:${K}`]?: DnnCollapsibleAttributes[K] } & { [K in keyof DnnCollapsible & keyof DnnCollapsibleAttributes as `prop:${K}`]?: DnnCollapsible[K] };
         "dnn-color-input": Omit<DnnColorInput, keyof DnnColorInputAttributes> & { [K in keyof DnnColorInput & keyof DnnColorInputAttributes]?: DnnColorInput[K] } & { [K in keyof DnnColorInput & keyof DnnColorInputAttributes as `attr:${K}`]?: DnnColorInputAttributes[K] } & { [K in keyof DnnColorInput & keyof DnnColorInputAttributes as `prop:${K}`]?: DnnColorInput[K] };
         "dnn-color-picker": Omit<DnnColorPicker, keyof DnnColorPickerAttributes> & { [K in keyof DnnColorPicker & keyof DnnColorPickerAttributes]?: DnnColorPicker[K] } & { [K in keyof DnnColorPicker & keyof DnnColorPickerAttributes as `attr:${K}`]?: DnnColorPickerAttributes[K] } & { [K in keyof DnnColorPicker & keyof DnnColorPickerAttributes as `prop:${K}`]?: DnnColorPicker[K] };
+        "dnn-context-menu": Omit<DnnContextMenu, keyof DnnContextMenuAttributes> & { [K in keyof DnnContextMenu & keyof DnnContextMenuAttributes]?: DnnContextMenu[K] } & { [K in keyof DnnContextMenu & keyof DnnContextMenuAttributes as `attr:${K}`]?: DnnContextMenuAttributes[K] } & { [K in keyof DnnContextMenu & keyof DnnContextMenuAttributes as `prop:${K}`]?: DnnContextMenu[K] };
         "dnn-dropzone": Omit<DnnDropzone, keyof DnnDropzoneAttributes> & { [K in keyof DnnDropzone & keyof DnnDropzoneAttributes]?: DnnDropzone[K] } & { [K in keyof DnnDropzone & keyof DnnDropzoneAttributes as `attr:${K}`]?: DnnDropzoneAttributes[K] } & { [K in keyof DnnDropzone & keyof DnnDropzoneAttributes as `prop:${K}`]?: DnnDropzone[K] };
         "dnn-example-form": DnnExampleForm;
         "dnn-fieldset": Omit<DnnFieldset, keyof DnnFieldsetAttributes> & { [K in keyof DnnFieldset & keyof DnnFieldsetAttributes]?: DnnFieldset[K] } & { [K in keyof DnnFieldset & keyof DnnFieldsetAttributes as `attr:${K}`]?: DnnFieldsetAttributes[K] } & { [K in keyof DnnFieldset & keyof DnnFieldsetAttributes as `prop:${K}`]?: DnnFieldset[K] };
@@ -2554,6 +2587,7 @@ declare module "@stencil/core" {
              * Color Picker for Dnn
              */
             "dnn-color-picker": LocalJSX.IntrinsicElements["dnn-color-picker"] & JSXBase.HTMLAttributes<HTMLDnnColorPickerElement>;
+            "dnn-context-menu": LocalJSX.IntrinsicElements["dnn-context-menu"] & JSXBase.HTMLAttributes<HTMLDnnContextMenuElement>;
             "dnn-dropzone": LocalJSX.IntrinsicElements["dnn-dropzone"] & JSXBase.HTMLAttributes<HTMLDnnDropzoneElement>;
             /**
              * Do not use this component in production, it is meant for testing purposes only and is not distributed in the production package.

packages/stencil-library/src/components/dnn-context-menu/dnn-context-menu.scss

@@ -0,0 +1,24 @@
+:host {
+  /** @prop --color-background: The background color of the context menu. */
+  --color-background: var(--dnn-color-background, white);
+
+  /** @prop --color-border: The border color of the context menu. */
+  --color-border: var(--dnn-color-foreground, black);
+
+  /** @prop --padding: The padding inside the context menu. */
+  --padding: 0.25rem;
+
+  display: none;
+  flex-direction: column;
+  position: fixed;
+  z-index: 1;
+  background-color: var(--color-background);
+  border: 1px solid var(--color-border);
+  padding: var(--padding);
+}
+
+::slotted(*) {
+  display: flex;
+  width: 100%;
+  white-space: nowrap;
+}

packages/stencil-library/src/components/dnn-context-menu/dnn-context-menu.stories.ts

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import { html } from 'lit';
+import readme from "./readme.md?raw";
+
+const meta: Meta = {
+  title: 'Elements/ContextMenu',
+  component: 'dnn-context-menu',
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      }
+    }
+  },
+  argTypes: {
+    closeOnClick: { control: 'boolean' },
+  },
+};
+export default meta;
+
+const Template = (args) => html`
+  <div style="height:240px; display:flex; align-items:center; justify-content:center;">
+    <button id="target" style="padding:12px 18px;">Right click or press Enter/Space</button>
+
+    <dnn-context-menu id="menu" .closeOnClick=${args.closeOnClick}>
+      <div role="menuitem" style="padding:8px 12px; cursor:pointer;">Action 1</div>
+      <div role="menuitem" style="padding:8px 12px; cursor:pointer;">Action 2</div>
+      <div role="menuitem" style="padding:8px 12px; cursor:pointer;">Action 3</div>
+    </dnn-context-menu>
+  </div>
+
+  <script>
+    // Attach handlers after the story renders
+    setTimeout(() => {
+      const target = document.getElementById('target');
+      const menu = document.getElementById('menu');
+
+      if (!target || !menu) return;
+
+      target.addEventListener('contextmenu', e => {
+        e.preventDefault();
+        menu.open(e);
+      });
+
+    }, 0);
+  </script>
+`;
+
+type Story = StoryObj;
+
+export const Primary: Story = Template.bind({});
+Primary.args = {
+  closeOnClick: true,
+};