From b4802196f0e5004cfc7f4cd814b7f4f2e41c8df7 Mon Sep 17 00:00:00 2001
From: Gregor Wassmann <gregor.wassmann@gmail.com>
Date: Sun, 2 Apr 2023 22:06:09 +0200
Subject: [PATCH] tmp: v11 PopoverContent

---
 COMPONENT_INDEX.md                       | 21 ++++++++++++++++++++-
 docs/src/COMPONENT_API.json              | 23 ++++++++++++++++++++++-
 docs/src/pages/components/Popover.svx    | 10 +++++++---
 src/Popover/Popover.svelte               |  6 ++----
 src/Popover/PopoverContent.svelte        | 10 ++++++++++
 src/Popover/index.js                     |  1 +
 src/index.js                             |  2 +-
 tests/Popover.test.svelte                |  4 ++--
 types/Popover/PopoverContent.svelte.d.ts | 19 +++++++++++++++++++
 types/index.d.ts                         |  1 +
 10 files changed, 85 insertions(+), 12 deletions(-)
 create mode 100644 src/Popover/PopoverContent.svelte
 create mode 100644 types/Popover/PopoverContent.svelte.d.ts

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index b56c1fdc..ba9858a1 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -1,6 +1,6 @@
 # Component Index
 
-> 163 components exported from carbon-components-svelte@0.82.7.
+> 164 components exported from carbon-components-svelte@0.82.7.
 
 ## Components
 
@@ -95,6 +95,7 @@
 - [`PaginationSkeleton`](#paginationskeleton)
 - [`PasswordInput`](#passwordinput)
 - [`Popover`](#popover)
+- [`PopoverContent`](#popovercontent)
 - [`ProgressBar`](#progressbar)
 - [`ProgressIndicator`](#progressindicator)
 - [`ProgressIndicatorSkeleton`](#progressindicatorskeleton)
@@ -2821,6 +2822,24 @@ None.
 | :------------ | :--------- | :------------------------------------ |
 | click:outside | dispatched | <code>{ target: HTMLElement; }</code> |
 
+## `PopoverContent`
+
+### Props
+
+| Prop name | Required | Kind             | Reactive | Type | Default value     | Description |
+| :-------- | :------- | :--------------- | :------- | ---- | ----------------- | ----------- |
+| className | No       | <code>let</code> | No       | --   | <code>null</code> | --          |
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| --        | Yes     | --    | --       |
+
+### Events
+
+None.
+
 ## `ProgressBar`
 
 ### Props
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 8175f341..1f404a95 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -1,5 +1,5 @@
 {
-  "total": 163,
+  "total": 164,
   "components": [
     {
       "moduleName": "Accordion",
@@ -9008,6 +9008,27 @@
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div" }
     },
+    {
+      "moduleName": "PopoverContent",
+      "filePath": "src/Popover/PopoverContent.svelte",
+      "props": [
+        {
+          "name": "className",
+          "kind": "let",
+          "value": "null",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        }
+      ],
+      "moduleExports": [],
+      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+      "events": [],
+      "typedefs": [],
+      "rest_props": { "type": "Element", "name": "span" }
+    },
     {
       "moduleName": "ProgressBar",
       "filePath": "src/ProgressBar/ProgressBar.svelte",
diff --git a/docs/src/pages/components/Popover.svx b/docs/src/pages/components/Popover.svx
index 40089d01..90da6b83 100644
--- a/docs/src/pages/components/Popover.svx
+++ b/docs/src/pages/components/Popover.svx
@@ -1,5 +1,9 @@
+---
+components: ["Popover", "PopoverContent"]
+---
+
 <script>
-  import { Popover } from "carbon-components-svelte";
+  import { Popover, PopoverContent } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
@@ -8,9 +12,9 @@
 By default, the position of the popover component is absolute.
 
 <div data-outline>
-    Parent
     <Popover open>
-        <div style="padding: var(--bx-spacing-05)">Content</div>
+        Parent
+        <PopoverContent style="padding: var(--bx-spacing-05)">Content</PopoverContent>
     </Popover>
 </div>
 
diff --git a/src/Popover/Popover.svelte b/src/Popover/Popover.svelte
index 2249cc9c..3373b94d 100644
--- a/src/Popover/Popover.svelte
+++ b/src/Popover/Popover.svelte
@@ -46,7 +46,7 @@
 
 <div
   bind:this="{ref}"
-  class:bx--popover="{true}"
+  class:bx--popover-container="{true}"
   class:bx--popover--caret="{caret}"
   class:bx--popover--light="{light}"
   class:bx--popover--high-contrast="{highContrast}"
@@ -67,7 +67,5 @@
   style:position="{relative ? "relative" : undefined}"
   {...$$restProps}
 >
-  <div class:bx--popover-contents="{true}">
-    <slot />
-  </div>
+  <slot />
 </div>
diff --git a/src/Popover/PopoverContent.svelte b/src/Popover/PopoverContent.svelte
new file mode 100644
index 00000000..4d30a351
--- /dev/null
+++ b/src/Popover/PopoverContent.svelte
@@ -0,0 +1,10 @@
+<script>
+  export let className = null;
+</script>
+
+<span class:bx--popover="{true}" {...$$restProps}>
+  <span class:bx--popover-content="{true}" class="{className}">
+    <slot />
+  </span>
+  <span class:bx--popover-caret="{true}"></span>
+</span>
diff --git a/src/Popover/index.js b/src/Popover/index.js
index 6ffabfa1..5d0144b7 100644
--- a/src/Popover/index.js
+++ b/src/Popover/index.js
@@ -1 +1,2 @@
 export { default as Popover } from "./Popover.svelte";
+export { default as PopoverContent } from "./PopoverContent.svelte";
diff --git a/src/index.js b/src/index.js
index fc289bf6..16fba2b6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -84,7 +84,7 @@ export { OrderedList } from "./OrderedList";
 export { OverflowMenu, OverflowMenuItem } from "./OverflowMenu";
 export { Pagination, PaginationSkeleton } from "./Pagination";
 export { PaginationNav } from "./PaginationNav";
-export { Popover } from "./Popover";
+export { Popover, PopoverContent } from "./Popover";
 export { ProgressBar } from "./ProgressBar";
 export {
   ProgressIndicator,
diff --git a/tests/Popover.test.svelte b/tests/Popover.test.svelte
index d56ec71c..34d5832d 100644
--- a/tests/Popover.test.svelte
+++ b/tests/Popover.test.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Popover } from "../types";
+  import { Popover, PopoverContent } from "../types";
 
   let open = false;
 </script>
@@ -16,5 +16,5 @@
     console.log('on:click:outside');
   }}"
 >
-  <div style="padding: var(--bx-spacing-05)">Content</div>
+  <PopoverContent style="padding: var(--bx-spacing-05)">Content</PopoverContent>
 </Popover>
diff --git a/types/Popover/PopoverContent.svelte.d.ts b/types/Popover/PopoverContent.svelte.d.ts
new file mode 100644
index 00000000..a4b1eb95
--- /dev/null
+++ b/types/Popover/PopoverContent.svelte.d.ts
@@ -0,0 +1,19 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type RestProps = SvelteHTMLElements["span"];
+
+export interface PopoverContentProps extends RestProps {
+  /**
+   * @default null
+   */
+  className?: undefined;
+
+  [key: `data-${string}`]: any;
+}
+
+export default class PopoverContent extends SvelteComponentTyped<
+  PopoverContentProps,
+  Record<string, any>,
+  { default: {} }
+> {}
diff --git a/types/index.d.ts b/types/index.d.ts
index 360753c1..8f06b22c 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -91,6 +91,7 @@ export { default as Pagination } from "./Pagination/Pagination.svelte";
 export { default as PaginationSkeleton } from "./Pagination/PaginationSkeleton.svelte";
 export { default as PaginationNav } from "./PaginationNav/PaginationNav.svelte";
 export { default as Popover } from "./Popover/Popover.svelte";
+export { default as PopoverContent } from "./Popover/PopoverContent.svelte";
 export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte";
 export { default as ProgressIndicator } from "./ProgressIndicator/ProgressIndicator.svelte";
 export { default as ProgressIndicatorSkeleton } from "./ProgressIndicator/ProgressIndicatorSkeleton.svelte";