@clicoh/orion-library 1.1.0-beta.8 → 1.1.0-beta.9

package/dist/components/00-base/Each/Each.d.ts

@@ -6,6 +6,12 @@ type EachProps<T> = {
 /**
  * A utility component that iterates over an array and renders each item using the provided render function.
  *
+ * Each rendered item is wrapped in a keyed `Fragment`, so consumers do not need
+ * to set a key themselves. When the render function does return an element with
+ * its own key, that key wins: a consumer that needs stable identity across
+ * reordering keeps it. The `Fragment` adds no DOM node, so the rendered items
+ * stay direct children of the parent and CSS grid or flex layouts are unaffected.
+ *
  * @component
  * @example
  * // Example usage of Each component
@@ -16,6 +22,13 @@ type EachProps<T> = {
  *   )}
  * />
  *
+ * @example
+ * // Providing a stable key for lists that reorder
+ * <Each
+ *   of={fruits}
+ *   render={(fruit) => <li key={fruit.id}>{fruit.name}</li>}
+ * />
+ *
  * @param {Object} props - The properties of the Each component.
  * @param {T[]} props.of - The array of items to iterate over and render.
  * @param {(item: T, index: number) => ReactNode} props.render - A function that renders each item in the array.

package/dist/components/00-base/Each/Each.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Each.d.ts","sourceRoot":"","sources":["../../../../src/components/00-base/Each/Each.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjD,KAAK,SAAS,CAAC,CAAC,IAAI;IAClB,EAAE,EAAE,CAAC,EAAE,CAAC;IACR,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;CAC/C,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,CAE/D"}
+{"version":3,"file":"Each.d.ts","sourceRoot":"","sources":["../../../../src/components/00-base/Each/Each.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjE,KAAK,SAAS,CAAC,CAAC,IAAI;IAClB,EAAE,EAAE,CAAC,EAAE,CAAC;IACR,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;CAC/C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,CAO/D"}

package/dist/components/00-base/Each/Each.jsx

@@ -1,7 +1,13 @@
-import { Children } from 'react';
+import { Fragment, isValidElement } from 'react';
 /**
  * A utility component that iterates over an array and renders each item using the provided render function.
  *
+ * Each rendered item is wrapped in a keyed `Fragment`, so consumers do not need
+ * to set a key themselves. When the render function does return an element with
+ * its own key, that key wins: a consumer that needs stable identity across
+ * reordering keeps it. The `Fragment` adds no DOM node, so the rendered items
+ * stay direct children of the parent and CSS grid or flex layouts are unaffected.
+ *
  * @component
  * @example
  * // Example usage of Each component
@@ -12,6 +18,13 @@ import { Children } from 'react';
  *   )}
  * />
  *
+ * @example
+ * // Providing a stable key for lists that reorder
+ * <Each
+ *   of={fruits}
+ *   render={(fruit) => <li key={fruit.id}>{fruit.name}</li>}
+ * />
+ *
  * @param {Object} props - The properties of the Each component.
  * @param {T[]} props.of - The array of items to iterate over and render.
  * @param {(item: T, index: number) => ReactNode} props.render - A function that renders each item in the array.
@@ -19,6 +32,10 @@ import { Children } from 'react';
  * @returns {ReactNode} The rendered Each component.
  */
 export function Each({ of, render }) {
-    return Children.toArray(of.map((item, index) => render(item, index)));
+    return of.map((item, index) => {
+        const rendered = render(item, index);
+        const key = isValidElement(rendered) && rendered.key ? rendered.key : index;
+        return <Fragment key={key}>{rendered}</Fragment>;
+    });
 }
 //# sourceMappingURL=Each.jsx.map

package/dist/components/00-base/Each/Each.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Each.jsx","sourceRoot":"","sources":["../../../../src/components/00-base/Each/Each.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AAOjD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,IAAI,CAAI,EAAE,EAAE,EAAE,MAAM,EAAgB;IAClD,OAAO,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;AACxE,CAAC"}
+{"version":3,"file":"Each.jsx","sourceRoot":"","sources":["../../../../src/components/00-base/Each/Each.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAkB,MAAM,OAAO,CAAC;AAOjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,UAAU,IAAI,CAAI,EAAE,EAAE,EAAE,MAAM,EAAgB;IAClD,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;QAC5B,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACrC,MAAM,GAAG,GAAG,cAAc,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;QAE5E,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC;IACnD,CAAC,CAAC,CAAC;AACL,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clicoh/orion-library",
-  "version": "1.1.0-beta.8",
+  "version": "1.1.0-beta.9",
   "main": "index.js",
   "dependencies": {
     "@floating-ui/react": "0.26.19",