Split ContextMenu into ContextMenuInner subcomponent

COMPONENT_INDEX.md

@@ -1,6 +1,6 @@
 # Component Index
 
-> 167 components exported from carbon-components-svelte@0.33.0.
+> 168 components exported from carbon-components-svelte@0.33.0.
 
 ## Components
 
@@ -27,6 +27,7 @@
 - [`ContextMenu`](#contextmenu)
 - [`ContextMenuDivider`](#contextmenudivider)
 - [`ContextMenuGroup`](#contextmenugroup)
+- [`ContextMenuInner`](#contextmenuinner)
 - [`ContextMenuOption`](#contextmenuoption)
 - [`ContextMenuRadioGroup`](#contextmenuradiogroup)
 - [`Copy`](#copy)
@@ -737,7 +738,7 @@ None.
 
 | Prop name | Kind             | Reactive | Type                                      | Default value      | Description                                                                      |
 | :-------- | :--------------- | :------- | :---------------------------------------- | ------------------ | -------------------------------------------------------------------------------- |
-| ref       | <code>let</code> | Yes      | <code>null &#124; HTMLUListElement</code> | <code>null</code>  | Obtain a reference to the unordered list HTML element                            |
+| ref       | <code>let</code> | Yes      | <code>HTMLUListElement &#124; null</code> | <code>null</code>  | Obtain a reference to the unordered list HTML element                            |
 | y         | <code>let</code> | Yes      | <code>number</code>                       | <code>0</code>     | Specify the vertical offset of the menu position                                 |
 | x         | <code>let</code> | Yes      | <code>number</code>                       | <code>0</code>     | Specify the horizontal offset of the menu position                               |
 | open      | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code> | Set to `true` to open the menu<br />Either `x` and `y` must be greater than zero |
@@ -750,12 +751,7 @@ None.
 
 ### Events
 
-| Event name | Type       | Detail |
-| :--------- | :--------- | :----- |
-| click      | forwarded  | --     |
-| keydown    | forwarded  | --     |
-| open       | dispatched | --     |
-| close      | dispatched | --     |
+None.
 
 ## `ContextMenuDivider`
 
@@ -790,6 +786,32 @@ None.
 
 None.
 
+## `ContextMenuInner`
+
+### Props
+
+| Prop name | Kind             | Reactive | Type                                      | Default value      | Description                                                                      |
+| :-------- | :--------------- | :------- | :---------------------------------------- | ------------------ | -------------------------------------------------------------------------------- |
+| ref       | <code>let</code> | Yes      | <code>null &#124; HTMLUListElement</code> | <code>null</code>  | Obtain a reference to the unordered list HTML element                            |
+| y         | <code>let</code> | Yes      | <code>number</code>                       | <code>0</code>     | Specify the vertical offset of the menu position                                 |
+| x         | <code>let</code> | Yes      | <code>number</code>                       | <code>0</code>     | Specify the horizontal offset of the menu position                               |
+| open      | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code> | Set to `true` to open the menu<br />Either `x` and `y` must be greater than zero |
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| --        | Yes     | --    | --       |
+
+### Events
+
+| Event name | Type       | Detail |
+| :--------- | :--------- | :----- |
+| click      | forwarded  | --     |
+| keydown    | forwarded  | --     |
+| open       | dispatched | --     |
+| close      | dispatched | --     |
+
 ## `ContextMenuOption`
 
 ### Props

docs/src/COMPONENT_API.json

@@ -1,5 +1,5 @@
 {
-  "total": 167,
+  "total": 168,
   "components": [
     {
       "moduleName": "Accordion",
@@ -1609,22 +1609,16 @@
           "name": "ref",
           "kind": "let",
           "description": "Obtain a reference to the unordered list HTML element",
-          "type": "null | HTMLUListElement",
+          "type": "HTMLUListElement | null",
           "value": "null",
           "isFunction": false,
           "constant": false,
           "reactive": true
         }
       ],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
-      "events": [
-        { "type": "forwarded", "name": "click", "element": "ul" },
-        { "type": "forwarded", "name": "keydown", "element": "ul" },
-        { "type": "dispatched", "name": "open" },
-        { "type": "dispatched", "name": "close" }
-      ],
-      "typedefs": [],
-      "rest_props": { "type": "Element", "name": "ul" }
+      "events": [],
+      "typedefs": []
     },
     {
       "moduleName": "ContextMenuDivider",
@@ -1662,6 +1656,61 @@
       "events": [],
       "typedefs": []
     },
+    {
+      "moduleName": "ContextMenuInner",
+      "filePath": "src/ContextMenu/ContextMenuInner.svelte",
+      "props": [
+        {
+          "name": "open",
+          "kind": "let",
+          "description": "Set to `true` to open the menu\nEither `x` and `y` must be greater than zero",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
+        },
+        {
+          "name": "x",
+          "kind": "let",
+          "description": "Specify the horizontal offset of the menu position",
+          "type": "number",
+          "value": "0",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
+        },
+        {
+          "name": "y",
+          "kind": "let",
+          "description": "Specify the vertical offset of the menu position",
+          "type": "number",
+          "value": "0",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
+        },
+        {
+          "name": "ref",
+          "kind": "let",
+          "description": "Obtain a reference to the unordered list HTML element",
+          "type": "null | HTMLUListElement",
+          "value": "null",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
+        }
+      ],
+      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+      "events": [
+        { "type": "forwarded", "name": "click", "element": "ul" },
+        { "type": "forwarded", "name": "keydown", "element": "ul" },
+        { "type": "dispatched", "name": "open" },
+        { "type": "dispatched", "name": "close" }
+      ],
+      "typedefs": [],
+      "rest_props": { "type": "Element", "name": "ul" }
+    },
     {
       "moduleName": "ContextMenuOption",
       "filePath": "src/ContextMenu/ContextMenuOption.svelte",

docs/src/pages/components/ContextMenu.svx

@@ -1,5 +1,5 @@
 ---
-components: ["ContextMenu", "ContextMenuGroup", "ContextMenuRadioGroup", "ContextMenuOption", "ContextMenuDivider"]
+components: ["ContextMenu", "ContextMenuInner", "ContextMenuGroup", "ContextMenuRadioGroup", "ContextMenuOption", "ContextMenuDivider"]
 ---
 
 <script>
@@ -14,4 +14,8 @@ In the examples, right click anywhere within the iframe.
 
 ### Radio groups
 
-<FileSource src="/framed/ContextMenu/ContextMenuGroups" />
+<FileSource src="/framed/ContextMenu/ContextMenuGroups" />
+
+### On specific element
+
+<FileSource src="/framed/ContextMenu/ContextMenuInner" />

docs/src/pages/framed/ContextMenu/ContextMenuInner.svelte

@@ -0,0 +1,59 @@
+<script>
+  import {
+    ContextMenuDivider,
+    ContextMenuOption,
+    ContextMenuInner,
+  } from "carbon-components-svelte";
+  import CopyFile16 from "carbon-icons-svelte/lib/CopyFile16";
+  import Cut16 from "carbon-icons-svelte/lib/Cut16";
+
+  let ref;
+  let open = false;
+  let x = 0;
+  let y = 0;
+</script>
+
+<svelte:window
+  on:click="{(e) => {
+    if (e.target.contains(ref)) open = false;
+  }}"
+  on:keydown="{(e) => {
+    if (open && e.key === 'Escape') open = false;
+  }}"
+/>
+
+<div
+  on:contextmenu|preventDefault="{(e) => {
+    x = e.x;
+    y = e.y;
+    open = true;
+  }}"
+></div>
+
+<ContextMenuInner bind:ref bind:open bind:x bind:y>
+  <ContextMenuOption
+    indented
+    labelText="Copy"
+    shortcutText="Ctrl+C"
+    icon="{CopyFile16}"
+  />
+  <ContextMenuOption
+    indented
+    labelText="Cut"
+    shortcutText="Ctrl+X"
+    icon="{Cut16}"
+  />
+  <ContextMenuDivider />
+  <ContextMenuOption indented kind="danger" labelText="Delete" />
+</ContextMenuInner>
+
+<style>
+  div {
+    position: absolute;
+    width: 50%;
+    height: 50%;
+    left: 25%;
+    top: 25%;
+    background-color: black;
+  }
+</style>

preprocess/api.json

@@ -76,6 +76,9 @@
     "ContextMenuGroup": {
       "path": "carbon-components-svelte/src/ContextMenu/ContextMenuGroup.svelte"
     },
+    "ContextMenuInner": {
+      "path": "carbon-components-svelte/src/ContextMenu/ContextMenuInner.svelte"
+    },
     "ContextMenuOption": {
       "path": "carbon-components-svelte/src/ContextMenu/ContextMenuOption.svelte"
     },