@availity/mui-tree 1.0.0 → 1.0.2

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.0.2](https://github.com/Availity/element/compare/@availity/mui-tree@1.0.1...@availity/mui-tree@1.0.2) (2025-04-04)
+
+
+### Bug Fixes
+
+* **mui-tree:** account for duplicative ids and keys ([dad00ae](https://github.com/Availity/element/commit/dad00ae252ae316dd7ed128f19031e299132d3a1))
+
+## [1.0.1](https://github.com/Availity/element/compare/@availity/mui-tree@1.0.0...@availity/mui-tree@1.0.1) (2025-03-07)
+
+### Dependency Updates
+
+* `mui-icon` updated to version `1.0.0`
+* `mui-layout` updated to version `1.0.0`
+* `mui-typography` updated to version `1.0.0`
 ## [1.0.0](https://github.com/Availity/element/compare/@availity/mui-tree@1.0.0-alpha.0...@availity/mui-tree@1.0.0) (2025-02-25)
 
 ### Dependency Updates

package/dist/index.d.mts

@@ -16,7 +16,7 @@ declare const TreeItem: ({ children, label, slots, slotProps, truncate, ...rest
 
 interface JsonViewerProps extends Omit<TreeViewProps, 'children'> {
     /** Data to be rendered, can be most valid javascript objects, some uncommon types may not by fully supported - like cyclical objects, proxies, symbols as keys. */
-    data: Record<string, unknown>;
+    data: Record<string, unknown> | Record<string, unknown>[];
 }
 declare const JsonViewer: ({ data, ...rest }: JsonViewerProps) => JSX.Element;
 

package/dist/index.d.ts

@@ -16,7 +16,7 @@ declare const TreeItem: ({ children, label, slots, slotProps, truncate, ...rest
 
 interface JsonViewerProps extends Omit<TreeViewProps, 'children'> {
     /** Data to be rendered, can be most valid javascript objects, some uncommon types may not by fully supported - like cyclical objects, proxies, symbols as keys. */
-    data: Record<string, unknown>;
+    data: Record<string, unknown> | Record<string, unknown>[];
 }
 declare const JsonViewer: ({ data, ...rest }: JsonViewerProps) => JSX.Element;
 

package/dist/index.js

@@ -114,16 +114,17 @@ var isPrimitive = (value) => {
 var isObject = (value) => {
   return !!value && typeof value === "object";
 };
-var getDetails = ({ data }) => {
-  return Object.entries(data).map((entry) => {
-    const [key, value] = entry;
+var validateId = (id) => id.replace(/[^.\w:-]+/gi, "");
+var getDetails = ({ data }, parentKey) => {
+  return Object.entries(data).map(([key, value], index) => {
+    const id = validateId(parentKey ? `${parentKey}.${index}.${key}` : `${index}.${key}`);
     if (isPrimitive(value)) {
       const label = `${key}: ${value.toString()}`;
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TreeItem, { label, itemId: `${key}.${value}` }, `${key}.${value}`);
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TreeItem, { label, itemId: id }, id);
     }
     if (isObject(value)) {
       const label = `${key}: ${Array.isArray(value) ? `[ ] ${value.length} items` : `{ } ${Object.keys(value).length} keys`}`;
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TreeItem, { label, itemId: key, children: getDetails({ data: value }) }, key);
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TreeItem, { label, itemId: id, children: getDetails({ data: value }, id) }, id);
     }
     return null;
   });

package/dist/index.mjs

@@ -88,16 +88,17 @@ var isPrimitive = (value) => {
 var isObject = (value) => {
   return !!value && typeof value === "object";
 };
-var getDetails = ({ data }) => {
-  return Object.entries(data).map((entry) => {
-    const [key, value] = entry;
+var validateId = (id) => id.replace(/[^.\w:-]+/gi, "");
+var getDetails = ({ data }, parentKey) => {
+  return Object.entries(data).map(([key, value], index) => {
+    const id = validateId(parentKey ? `${parentKey}.${index}.${key}` : `${index}.${key}`);
     if (isPrimitive(value)) {
       const label = `${key}: ${value.toString()}`;
-      return /* @__PURE__ */ jsx4(TreeItem, { label, itemId: `${key}.${value}` }, `${key}.${value}`);
+      return /* @__PURE__ */ jsx4(TreeItem, { label, itemId: id }, id);
     }
     if (isObject(value)) {
       const label = `${key}: ${Array.isArray(value) ? `[ ] ${value.length} items` : `{ } ${Object.keys(value).length} keys`}`;
-      return /* @__PURE__ */ jsx4(TreeItem, { label, itemId: key, children: getDetails({ data: value }) }, key);
+      return /* @__PURE__ */ jsx4(TreeItem, { label, itemId: id, children: getDetails({ data: value }, id) }, id);
     }
     return null;
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-tree",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Availity MUI Tree Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -40,9 +40,9 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "devDependencies": {
-    "@availity/mui-icon": "^1.0.0",
-    "@availity/mui-layout": "^1.0.0",
-    "@availity/mui-typography": "^1.0.0",
+    "@availity/mui-icon": "^1.0.1",
+    "@availity/mui-layout": "^1.0.1",
+    "@availity/mui-typography": "^1.0.1",
     "@mui/material": "^6.4.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -50,7 +50,7 @@
     "typescript": "^5.4.5"
   },
   "peerDependencies": {
-    "@availity/mui-icon": "^1.0.0",
+    "@availity/mui-icon": "^1.0.1",
     "@mui/material": "^6.4.5",
     "react": ">=16.3.0"
   },

package/src/lib/JsonViewer.tsx

@@ -3,7 +3,7 @@ import { TreeView, TreeViewProps } from './TreeView';
 
 export interface JsonViewerProps extends Omit<TreeViewProps, 'children'> {
   /** Data to be rendered, can be most valid javascript objects, some uncommon types may not by fully supported - like cyclical objects, proxies, symbols as keys. */
-  data: Record<string, unknown>;
+  data: Record<string, unknown> | Record<string, unknown>[];
 }
 
 const isPrimitive = (value: unknown): value is string | number | boolean => {
@@ -14,19 +14,22 @@ const isObject = (value: unknown): value is Record<string, unknown> => {
   return !!value && typeof value === 'object';
 };
 
-const getDetails = ({ data }: JsonViewerProps): (JSX.Element | null)[] => {
-  return Object.entries(data).map((entry) => {
-    const [key, value] = entry;
+const validateId = (id: string) => id.replace(/[^.\w:-]+/gi, '');
+
+const getDetails = ({ data }: JsonViewerProps, parentKey?: string): (JSX.Element | null)[] => {
+  return Object.entries(data).map(([key, value], index) => {
+    const id = validateId(parentKey ? `${parentKey}.${index}.${key}` : `${index}.${key}`);
 
     if (isPrimitive(value)) {
       const label = `${key}: ${value.toString()}`;
-      return <TreeItem label={label} itemId={`${key}.${value}`} key={`${key}.${value}`} />;
+
+      return <TreeItem label={label} itemId={id} key={id} />;
     }
     if (isObject(value)) {
       const label = `${key}: ${Array.isArray(value) ? `[ ] ${value.length} items` : `{ } ${Object.keys(value).length} keys`}`;
       return (
-        <TreeItem label={label} itemId={key} key={key}>
-          {getDetails({ data: value })}
+        <TreeItem label={label} itemId={id} key={id}>
+          {getDetails({ data: value }, id)}
         </TreeItem>
       );
     }

package/tsconfig.spec.json

@@ -6,5 +6,5 @@
     "types": ["jest", "node", "@testing-library/jest-dom"],
     "allowJs": true
   },
-  "include": ["**/*.test.js", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
+  "include": ["jest.config.ts", "**/*.test.js", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
 }