@adobe-commerce/elsie 1.0.1-alpha04151330 → 1.0.1-alpha04151720

package/__mocks__/svg.js

@@ -7,4 +7,5 @@
  * accompanying it. 
  *******************************************************************/
 
-export * from '../src/icons';
+const SVGComponent = 'svg';
+export default SVGComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "1.0.1-alpha04151330",
+  "version": "1.0.1-alpha04151720",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {

package/src/docs/slots.mdx

@@ -32,23 +32,41 @@ The `<Slot />` component is used to define a slot in a container. It receives a
 
 The name of the slot in _PascalCase_. `string` (required).
 
-### wrapperTag
+### slotTag
 
 The HTML tag to use for the slot's wrapper element. This allows you to change the wrapper element from the default `div` to any valid HTML tag (e.g., 'span', 'p', 'a', etc.). When using specific tags like 'a', you can also provide their respective HTML attributes (e.g., 'href', 'target', etc.).
 
 Example:
 ```tsx
 // Render with a span wrapper
-<Slot name="MySlot" wrapperTag="span">
+<Slot name="MySlot" slotTag="span">
   Inline content
 </Slot>
 
 // Render with an anchor wrapper
-<Slot name="MySlot" wrapperTag="a" href="https://example.com" target="_blank">
+<Slot name="MySlot" slotTag="a" href="https://example.com" target="_blank">
   Link content
 </Slot>
 ```
 
+### contentTag
+
+The HTML tag to use for wrapping dynamically inserted content within the slot. This is separate from the slot's wrapper tag and allows you to control how dynamic content is structured. Defaults to 'div'.
+
+Example:
+```tsx
+<Slot
+  name="MySlot"
+  slotTag="article"    // The outer wrapper will be an article
+  contentTag="section" // Dynamic content will be wrapped in sections
+  slot={(ctx) => {
+    const elem = document.createElement('div');
+    elem.innerHTML = 'Dynamic content';
+    ctx.appendChild(elem); // This will be wrapped in a section tag
+  }}
+/>
+```
+
 ### slot (required)
 
 - `ctx`: An object representing the context of the slot, including methods for manipulating the slot's content.

package/src/lib/slot.tsx

@@ -42,7 +42,7 @@ interface PrivateContext<T> {
   _registerMethod: (
     cb: (next: T & DefaultSlotContext<T>, state: State) => void
   ) => void;
-  _htmlElementToVNode: (element: HTMLElement) => VNode;
+  _htmlElementToVNode: (element: HTMLElement, tag: keyof HTMLElementTagNameMap) => VNode;
 }
 
 interface DefaultSlotContext<T> extends PrivateContext<T> {
@@ -75,7 +75,8 @@ export function useSlot<K, V extends HTMLElement>(
   context: Context<K> = {},
   callback?: SlotProps<K>,
   children?: ComponentChildren,
-  render?: Function
+  render?: Function,
+  contentTag: keyof HTMLElementTagNameMap = 'div'
 ): [RefObject<V>, Record<string, any>] {
   const slotsQueue = useContext(SlotQueueContext);
 
@@ -146,15 +147,17 @@ export function useSlot<K, V extends HTMLElement>(
   context._registerMethod = _registerMethod;
 
   const _htmlElementToVNode = useCallback((elem: HTMLElement) => {
-    return (
-      <div
-        data-slot-html-element={elem.tagName.toLowerCase()}
-        ref={(refElem) => {
+    return createElement(
+      contentTag,
+      {
+        'data-slot-html-element': elem.tagName.toLowerCase(),
+        ref: (refElem: HTMLElement | null): void => {
           refElem?.appendChild(elem);
-        }}
-      />
+        }
+      },
+      null
     );
-  }, []);
+  }, [contentTag]);
 
   // @ts-ignore
   context._htmlElementToVNode = _htmlElementToVNode;
@@ -356,7 +359,8 @@ interface SlotPropsComponent<T>
   slot?: SlotProps<T>;
   context?: Context<T>;
   render?: (props: Record<string, any>) => VNode | VNode[];
-  wrapperTag?: keyof HTMLElementTagNameMap;
+  slotTag?: keyof HTMLElementTagNameMap; // The tag for the slot wrapper itself
+  contentTag?: keyof HTMLElementTagNameMap; // The tag for dynamically inserted content
   children?: ComponentChildren;
 }
 
@@ -366,7 +370,8 @@ export function Slot<T>({
   slot,
   children,
   render,
-  wrapperTag = 'div',
+  slotTag = 'div',
+  contentTag = 'div',
   ...props
 }: Readonly<SlotPropsComponent<T>>) {
   const slotsQueue = useContext(SlotQueueContext);
@@ -376,7 +381,8 @@ export function Slot<T>({
     context,
     slot,
     children,
-    render
+    render,
+    contentTag
   );
 
   useMemo(() => {
@@ -392,7 +398,7 @@ export function Slot<T>({
   }, [name, slotsQueue]);
 
   return createElement(
-    wrapperTag,
+    slotTag,
     {
       ...props,
       ref: elementRef,