diff --git a/.changeset/sharp-beers-approve.md b/.changeset/sharp-beers-approve.md
new file mode 100644
index 000000000..d7d21b1ab
--- /dev/null
+++ b/.changeset/sharp-beers-approve.md
@@ -0,0 +1,5 @@
+---
+"@solid-primitives/keyed": minor
+---
+
+Add `MapEntries` control flow component.
diff --git a/README.md b/README.md
index 311855f70..4cb006a29 100644
--- a/README.md
+++ b/README.md
@@ -65,7 +65,7 @@ The goal of Solid Primitives is to wrap client and server side functionality to
|
*Control Flow*
|
|[context](https://github.com/solidjs-community/solid-primitives/tree/main/packages/context#readme)|[![STAGE](https://img.shields.io/endpoint?style=for-the-badge&label=&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-2.json)](https://github.com/solidjs-community/solid-primitives/blob/main/CONTRIBUTING.md#contribution-process)|[createContextProvider](https://github.com/solidjs-community/solid-primitives/tree/main/packages/context#createcontextprovider) [MultiProvider](https://github.com/solidjs-community/solid-primitives/tree/main/packages/context#multiprovider)|[![SIZE](https://img.shields.io/bundlephobia/minzip/@solid-primitives/context?style=for-the-badge&label=)](https://bundlephobia.com/package/@solid-primitives/context)|[![VERSION](https://img.shields.io/npm/v/@solid-primitives/context?style=for-the-badge&label=)](https://www.npmjs.com/package/@solid-primitives/context)|
|[jsx-tokenizer](https://github.com/solidjs-community/solid-primitives/tree/main/packages/jsx-tokenizer#readme)|[![STAGE](https://img.shields.io/endpoint?style=for-the-badge&label=&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-2.json)](https://github.com/solidjs-community/solid-primitives/blob/main/CONTRIBUTING.md#contribution-process)|[createTokenizer](https://github.com/solidjs-community/solid-primitives/tree/main/packages/jsx-tokenizer#createtokenizer) [createToken](https://github.com/solidjs-community/solid-primitives/tree/main/packages/jsx-tokenizer#createtoken) [resolveTokens](https://github.com/solidjs-community/solid-primitives/tree/main/packages/jsx-tokenizer#resolvetokens) [isToken](https://github.com/solidjs-community/solid-primitives/tree/main/packages/jsx-tokenizer#istoken)|[![SIZE](https://img.shields.io/bundlephobia/minzip/@solid-primitives/jsx-tokenizer?style=for-the-badge&label=)](https://bundlephobia.com/package/@solid-primitives/jsx-tokenizer)|[![VERSION](https://img.shields.io/npm/v/@solid-primitives/jsx-tokenizer?style=for-the-badge&label=)](https://www.npmjs.com/package/@solid-primitives/jsx-tokenizer)|
-|[keyed](https://github.com/solidjs-community/solid-primitives/tree/main/packages/keyed#readme)|[![STAGE](https://img.shields.io/endpoint?style=for-the-badge&label=&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-3.json)](https://github.com/solidjs-community/solid-primitives/blob/main/CONTRIBUTING.md#contribution-process)|[keyArray](https://github.com/solidjs-community/solid-primitives/tree/main/packages/keyed#keyarray) [Key](https://github.com/solidjs-community/solid-primitives/tree/main/packages/keyed#key) [Entries](https://github.com/solidjs-community/solid-primitives/tree/main/packages/keyed#entries)|[![SIZE](https://img.shields.io/bundlephobia/minzip/@solid-primitives/keyed?style=for-the-badge&label=)](https://bundlephobia.com/package/@solid-primitives/keyed)|[![VERSION](https://img.shields.io/npm/v/@solid-primitives/keyed?style=for-the-badge&label=)](https://www.npmjs.com/package/@solid-primitives/keyed)|
+|[keyed](https://github.com/solidjs-community/solid-primitives/tree/main/packages/keyed#readme)|[![STAGE](https://img.shields.io/endpoint?style=for-the-badge&label=&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-3.json)](https://github.com/solidjs-community/solid-primitives/blob/main/CONTRIBUTING.md#contribution-process)|[keyArray](https://github.com/solidjs-community/solid-primitives/tree/main/packages/keyed#keyarray) [Key](https://github.com/solidjs-community/solid-primitives/tree/main/packages/keyed#key) [Entries](https://github.com/solidjs-community/solid-primitives/tree/main/packages/keyed#entries) [MapEntries](https://github.com/solidjs-community/solid-primitives/tree/main/packages/keyed#mapentries)|[![SIZE](https://img.shields.io/bundlephobia/minzip/@solid-primitives/keyed?style=for-the-badge&label=)](https://bundlephobia.com/package/@solid-primitives/keyed)|[![VERSION](https://img.shields.io/npm/v/@solid-primitives/keyed?style=for-the-badge&label=)](https://www.npmjs.com/package/@solid-primitives/keyed)|
|[list](https://github.com/solidjs-community/solid-primitives/tree/main/packages/list#readme)|[![STAGE](https://img.shields.io/endpoint?style=for-the-badge&label=&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-0.json)](https://github.com/solidjs-community/solid-primitives/blob/main/CONTRIBUTING.md#contribution-process)|[listArray](https://github.com/solidjs-community/solid-primitives/tree/main/packages/list#listarray) [List](https://github.com/solidjs-community/solid-primitives/tree/main/packages/list#list)|[![SIZE](https://img.shields.io/bundlephobia/minzip/@solid-primitives/list?style=for-the-badge&label=)](https://bundlephobia.com/package/@solid-primitives/list)|[![VERSION](https://img.shields.io/npm/v/@solid-primitives/list?style=for-the-badge&label=)](https://www.npmjs.com/package/@solid-primitives/list)|
|[range](https://github.com/solidjs-community/solid-primitives/tree/main/packages/range#readme)|[![STAGE](https://img.shields.io/endpoint?style=for-the-badge&label=&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-1.json)](https://github.com/solidjs-community/solid-primitives/blob/main/CONTRIBUTING.md#contribution-process)|[repeat](https://github.com/solidjs-community/solid-primitives/tree/main/packages/range#repeat) [mapRange](https://github.com/solidjs-community/solid-primitives/tree/main/packages/range#maprange) [indexRange](https://github.com/solidjs-community/solid-primitives/tree/main/packages/range#indexrange) [Repeat](https://github.com/solidjs-community/solid-primitives/tree/main/packages/range#repeat) [Range](https://github.com/solidjs-community/solid-primitives/tree/main/packages/range#range) [IndexRange](https://github.com/solidjs-community/solid-primitives/tree/main/packages/range#indexrange)|[![SIZE](https://img.shields.io/bundlephobia/minzip/@solid-primitives/range?style=for-the-badge&label=)](https://bundlephobia.com/package/@solid-primitives/range)|[![VERSION](https://img.shields.io/npm/v/@solid-primitives/range?style=for-the-badge&label=)](https://www.npmjs.com/package/@solid-primitives/range)|
|[refs](https://github.com/solidjs-community/solid-primitives/tree/main/packages/refs#readme)|[![STAGE](https://img.shields.io/endpoint?style=for-the-badge&label=&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-2.json)](https://github.com/solidjs-community/solid-primitives/blob/main/CONTRIBUTING.md#contribution-process)|[mergeRefs](https://github.com/solidjs-community/solid-primitives/tree/main/packages/refs#mergerefs) [resolveElements](https://github.com/solidjs-community/solid-primitives/tree/main/packages/refs#resolveelements) [resolveFirst](https://github.com/solidjs-community/solid-primitives/tree/main/packages/refs#resolvefirst) [Ref](https://github.com/solidjs-community/solid-primitives/tree/main/packages/refs#ref) [Refs](https://github.com/solidjs-community/solid-primitives/tree/main/packages/refs#refs)|[![SIZE](https://img.shields.io/bundlephobia/minzip/@solid-primitives/refs?style=for-the-badge&label=)](https://bundlephobia.com/package/@solid-primitives/refs)|[![VERSION](https://img.shields.io/npm/v/@solid-primitives/refs?style=for-the-badge&label=)](https://www.npmjs.com/package/@solid-primitives/refs)|
diff --git a/packages/keyed/README.md b/packages/keyed/README.md
index a6ed35ff7..a08cd82ac 100644
--- a/packages/keyed/README.md
+++ b/packages/keyed/README.md
@@ -14,6 +14,7 @@ Control Flow primitives and components that require specifying explicit keys to
- [`keyArray`](#keyarray) - Reactively maps an array by specified key with a callback function - underlying helper for the `` control flow.
- [`Key`](#key) - Creates a list of elements by mapping items by provided key.
- [`Entries`](#entries) - Creates a list of elements by mapping object entries.
+- [`MapEntries`](#mapentries) - Creates a list of elements by mapping Map entries.
- [`Rerun`](#rerun) - Causes the children to rerender when the `on` changes.
## Installation
@@ -152,6 +153,42 @@ Third argument of the map function is an index signal.
```
+## ``
+
+Creates a list of elements by mapping Map entries. Similar to Solid's `` and ``, but here, render function takes three arguments, and both value and index arguments are signals.
+
+### How to use it
+
+```tsx
+import { MapEntries } from "@solid-primitives/keyed";
+
+const [map, setMap] = createSignal(new Map());
+
+No items}>
+ {(key, value) => (
+
+ {key}: {value()}
+
+ )}
+;
+```
+
+### Index argument
+
+Third argument of the map function is an index signal.
+
+`MapEntries` is using [`Map#key()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/keys) so the index and resulting JSX will follow the insertion order.
+
+```tsx
+No items}>
+ {(key, value, index) => (
+
+ >
+ );
+}
diff --git a/packages/keyed/package.json b/packages/keyed/package.json
index ac7f33615..1b8c0dc28 100644
--- a/packages/keyed/package.json
+++ b/packages/keyed/package.json
@@ -15,7 +15,8 @@
"list": [
"keyArray",
"Key",
- "Entries"
+ "Entries",
+ "MapEntries"
],
"category": "Control Flow"
},
diff --git a/packages/keyed/src/index.ts b/packages/keyed/src/index.ts
index 342a86795..8be5e01a7 100644
--- a/packages/keyed/src/index.ts
+++ b/packages/keyed/src/index.ts
@@ -185,6 +185,7 @@ export function Entries(props: {
i: Accessor,
) => JSX.Element;
}): JSX.Element {
+ // changes to this function may be applicable to similar functions - grep 4A29BECD-767A-4CC0-AEBB-3543D7B444C6
const mapFn = props.children;
return createMemo(
mapArray(
@@ -201,6 +202,43 @@ export function Entries(props: {
) as unknown as JSX.Element;
}
+/**
+ * Creates a list of elements from the entries of provided Map
+ *
+ * @param props
+ * @param props.of map to iterate entries of (`myMap.entries()`)
+ * @param props.children
+ * a map render function that receives a Map key, **value signal** and **index signal** and returns a JSX-Element; if the list is empty, an optional fallback is returned:
+ * ```tsx
+ * No items}>
+ * {(key, value, index) =>