feat(portal): support portal

Author: metonym

COMPONENT_INDEX.md

@@ -1,6 +1,6 @@
 # Component Index
 
-> 165 components exported from [email protected].
+> 167 components exported from [email protected].
 
 ## Components
 
@@ -45,6 +45,7 @@
 - [`FileUploaderItem`](#fileuploaderitem)
 - [`FileUploaderSkeleton`](#fileuploaderskeleton)
 - [`Filename`](#filename)
+- [`FloatingPortal`](#floatingportal)
 - [`FluidForm`](#fluidform)
 - [`Form`](#form)
 - [`FormGroup`](#formgroup)
@@ -95,6 +96,7 @@
 - [`PaginationSkeleton`](#paginationskeleton)
 - [`PasswordInput`](#passwordinput)
 - [`Popover`](#popover)
+- [`Portal`](#portal)
 - [`ProgressBar`](#progressbar)
 - [`ProgressIndicator`](#progressindicator)
 - [`ProgressIndicatorSkeleton`](#progressindicatorskeleton)
@@ -1434,6 +1436,20 @@ None.
 | click      | forwarded | --     |
 | keydown    | forwarded | --     |
 
+## `FloatingPortal`
+
+### Props
+
+None.
+
+### Slots
+
+None.
+
+### Events
+
+None.
+
 ## `FluidForm`
 
 ### Props
@@ -2833,6 +2849,22 @@ None.
 | :------------ | :--------- | :------------------------------------ |
 | click:outside | dispatched | <code>{ target: HTMLElement; }</code> |
 
+## `Portal`
+
+### Props
+
+None.
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| --        | Yes     | --    | --       |
+
+### Events
+
+None.
+
 ## `ProgressBar`
 
 ### Props

docs/package-lock.json

@@ -1,5 +1,5 @@
 {
-  "total": 165,
+  "total": 167,
   "components": [
     {
       "moduleName": "Accordion",
@@ -5229,6 +5229,16 @@
         "name": "div | button | svg"
       }
     },
+    {
+      "moduleName": "FloatingPortal",
+      "filePath": "src/Portal/FloatingPortal.svelte",
+      "props": [],
+      "moduleExports": [],
+      "slots": [],
+      "events": [],
+      "typedefs": [],
+      "generics": null
+    },
     {
       "moduleName": "FluidForm",
       "filePath": "src/FluidForm/FluidForm.svelte",
@@ -10827,6 +10837,22 @@
         "name": "div"
       }
     },
+    {
+      "moduleName": "Portal",
+      "filePath": "src/Portal/Portal.svelte",
+      "props": [],
+      "moduleExports": [],
+      "slots": [
+        {
+          "name": "__default__",
+          "default": true,
+          "slot_props": "{}"
+        }
+      ],
+      "events": [],
+      "typedefs": [],
+      "generics": null
+    },
     {
       "moduleName": "ProgressBar",
       "filePath": "src/ProgressBar/ProgressBar.svelte",

docs/src/COMPONENT_API.json

@@ -0,0 +1,8 @@
+<script>
+  import { Portal } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+## Default
+
+<FileSource src="/framed/Portal/BasicPortal" />

docs/src/pages/components/Portal.svx

@@ -0,0 +1,6 @@
+<script>
+  import { Portal } from "carbon-components-svelte";
+</script>
+
+<Portal>Hello world</Portal>
+<Portal>Another portal</Portal>

docs/src/pages/framed/Portal/BasicPortal.svelte

@@ -41,6 +41,7 @@
     "release": "standard-version && npm run build:docs"
   },
   "dependencies": {
+    "@floating-ui/dom": "^1.6.13",
     "@ibm/telemetry-js": "^1.5.0",
     "flatpickr": "4.6.9"
   },

package-lock.json

@@ -0,0 +1,62 @@
+<script>
+  import { onMount } from "svelte";
+  import { computePosition, autoUpdate } from "@floating-ui/dom";
+  import Portal from "./Portal.svelte";
+
+  /** @type {null | HTMLButtonElement} */
+  let button = null;
+
+  /** @type {null | HTMLDivElement} */
+  let tooltip = null;
+
+  let togglePortal = false;
+  let padding = 10;
+
+  /** @type {null | ReturnType<typeof autoUpdate>} */
+  let cleanup = null;
+
+  function updatePosition() {
+    if (!button || !tooltip) return;
+    computePosition(button, tooltip).then(({ x, y }) => {
+      if (!tooltip) return;
+      Object.assign(tooltip.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      });
+    });
+  }
+
+  onMount(() => {
+    updatePosition();
+
+    if (button && tooltip) {
+      cleanup = autoUpdate(button, tooltip, updatePosition);
+    }
+
+    return () => {
+      return cleanup?.();
+    };
+  });
+</script>
+
+<button
+  type="button"
+  style="padding: {padding}px"
+  bind:this={button}
+  on:click={() => (padding += 2)}
+>
+  Click to increase padding
+</button>
+
+<button
+  on:click={() => {
+    togglePortal = !togglePortal;
+  }}
+>
+  Toggle portal
+</button>
+{#if togglePortal}
+  <Portal>
+    <div bind:this={tooltip}>Floating menu</div>
+  </Portal>
+{/if}

package.json

@@ -0,0 +1,53 @@
+<script context="module">
+  /** @type {HTMLDivElement | null} */
+  let portalContainer = null;
+
+  let instances = 0;
+
+  /**
+   * Creates or returns the shared portal container
+   * @returns {HTMLDivElement}
+   */
+  function getPortalContainer() {
+    if (!portalContainer && typeof document !== "undefined") {
+      portalContainer = document.createElement("div");
+      portalContainer.setAttribute("data-portal", "");
+      document.body.appendChild(portalContainer);
+    }
+
+    return portalContainer;
+  }
+</script>
+
+<script>
+  import { onMount } from "svelte";
+
+  /** @type {null | HTMLDivElement} */
+  let portal = null;
+
+  onMount(() => {
+    instances++;
+    const container = getPortalContainer();
+
+    if (portal && container) {
+      container.appendChild(portal);
+    }
+
+    return () => {
+      instances--;
+
+      if (portal?.parentNode) {
+        portal.parentNode.removeChild(portal);
+      }
+
+      if (instances === 0 && portalContainer?.parentNode) {
+        portalContainer.parentNode.removeChild(portalContainer);
+        portalContainer = null;
+      }
+    };
+  });
+</script>
+
+<div bind:this={portal}>
+  <slot />
+</div>

src/Portal/FloatingPortal.svelte

@@ -0,0 +1,2 @@
+export { default as Portal } from "./Portal.svelte";
+export { default as FloatingPortal } from "./FloatingPortal.svelte";