@availity/mui-tree 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.2.0](https://github.com/Availity/element/compare/@availity/mui-tree@0.1.1...@availity/mui-tree@0.2.0) (2024-09-18)
+
+
+### Features
+
+* **mui-tree:** add JsonViewer component ([b17a9c8](https://github.com/Availity/element/commit/b17a9c82f4348fd51da10bd26a5944f32405db0c))
+
+## [0.1.1](https://github.com/Availity/element/compare/@availity/mui-tree@0.1.0...@availity/mui-tree@0.1.1) (2024-09-11)
+
+
+### Bug Fixes
+
+* **mui-tree:** add aria-label to checkbox input ([aa277db](https://github.com/Availity/element/commit/aa277db7440f6db77623735a579370f74e8692c7))
+
 ## 0.1.0 (2024-09-09)
 
 ### Dependency Updates

package/dist/index.d.mts

@@ -12,6 +12,6 @@ declare const DynamicTreeView: ({ children, slots, ...rest }: DynamicTreeViewPro
 interface TreeItemProps extends TreeItem2Props {
     truncate?: boolean;
 }
-declare const TreeItem: ({ children, slots, slotProps, truncate, ...rest }: TreeItemProps) => JSX.Element;
+declare const TreeItem: ({ children, label, slots, slotProps, truncate, ...rest }: TreeItemProps) => JSX.Element;
 
 export { DynamicTreeView, type DynamicTreeViewProps, TreeItem, type TreeItemProps, TreeView, type TreeViewProps };

package/dist/index.d.ts

@@ -12,6 +12,6 @@ declare const DynamicTreeView: ({ children, slots, ...rest }: DynamicTreeViewPro
 interface TreeItemProps extends TreeItem2Props {
     truncate?: boolean;
 }
-declare const TreeItem: ({ children, slots, slotProps, truncate, ...rest }: TreeItemProps) => JSX.Element;
+declare const TreeItem: ({ children, label, slots, slotProps, truncate, ...rest }: TreeItemProps) => JSX.Element;
 
 export { DynamicTreeView, type DynamicTreeViewProps, TreeItem, type TreeItemProps, TreeView, type TreeViewProps };

package/dist/index.js

@@ -71,16 +71,26 @@ var import_TreeItem2 = require("@mui/x-tree-view/TreeItem2");
 var import_mui_icon = require("@availity/mui-icon");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var TreeItem = (_a) => {
-  var _b = _a, { children, slots, slotProps, truncate } = _b, rest = __objRest(_b, ["children", "slots", "slotProps", "truncate"]);
+  var _b = _a, { children, label, slots, slotProps, truncate } = _b, rest = __objRest(_b, ["children", "label", "slots", "slotProps", "truncate"]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     import_TreeItem2.TreeItem2,
     __spreadProps(__spreadValues({}, rest), {
-      slots: __spreadProps(__spreadValues({}, slots), { expandIcon: import_mui_icon.TriangleRightIcon, collapseIcon: import_mui_icon.TriangleExpandIcon }),
+      label,
+      slots: __spreadProps(__spreadValues({}, slots), {
+        expandIcon: import_mui_icon.TriangleRightIcon,
+        collapseIcon: import_mui_icon.TriangleExpandIcon
+      }),
       slotProps: __spreadProps(__spreadValues({}, slotProps), {
         expandIcon: { fontSize: "Xsmall" },
         collapseIcon: { fontSize: "Xsmall" },
         label: {
           style: truncate ? { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } : {}
+        },
+        checkbox: {
+          // @ts-expect-error TreeItem2SlotProps.checkbox types are incorrect
+          inputProps: {
+            "aria-hidden": true
+          }
         }
       }),
       children

package/dist/index.mjs

@@ -46,16 +46,26 @@ import { TreeItem2 } from "@mui/x-tree-view/TreeItem2";
 import { TriangleRightIcon, TriangleExpandIcon } from "@availity/mui-icon";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var TreeItem = (_a) => {
-  var _b = _a, { children, slots, slotProps, truncate } = _b, rest = __objRest(_b, ["children", "slots", "slotProps", "truncate"]);
+  var _b = _a, { children, label, slots, slotProps, truncate } = _b, rest = __objRest(_b, ["children", "label", "slots", "slotProps", "truncate"]);
   return /* @__PURE__ */ jsx2(
     TreeItem2,
     __spreadProps(__spreadValues({}, rest), {
-      slots: __spreadProps(__spreadValues({}, slots), { expandIcon: TriangleRightIcon, collapseIcon: TriangleExpandIcon }),
+      label,
+      slots: __spreadProps(__spreadValues({}, slots), {
+        expandIcon: TriangleRightIcon,
+        collapseIcon: TriangleExpandIcon
+      }),
       slotProps: __spreadProps(__spreadValues({}, slotProps), {
         expandIcon: { fontSize: "Xsmall" },
         collapseIcon: { fontSize: "Xsmall" },
         label: {
           style: truncate ? { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } : {}
+        },
+        checkbox: {
+          // @ts-expect-error TreeItem2SlotProps.checkbox types are incorrect
+          inputProps: {
+            "aria-hidden": true
+          }
         }
       }),
       children

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-tree",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Availity MUI Tree Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -34,6 +34,7 @@
   "devDependencies": {
     "@availity/mui-icon": "^0.10.1",
     "@availity/mui-layout": "^0.1.6",
+    "@availity/mui-typography": "^0.2.0",
     "@mui/material": "^5.15.15",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -49,6 +50,6 @@
     "access": "public"
   },
   "dependencies": {
-    "@mui/x-tree-view": "^7.15.0"
+    "@mui/x-tree-view": "^7.16.0"
   }
 }

package/src/lib/DynamicTreeView.stories.tsx

@@ -2,6 +2,7 @@
 
 import type { Meta, StoryObj } from '@storybook/react';
 import type { TreeViewBaseItem } from '@mui/x-tree-view/models';
+import { Typography } from '@availity/mui-typography';
 import { DynamicTreeView, DynamicTreeViewProps } from './DynamicTreeView';
 
 /**
@@ -23,7 +24,7 @@ const items: TreeViewBaseItem[] = [
     id: 'tree-1',
     label: 'Tree 1',
     children: [
-      { id: 'sub-tree-1.1', label: 'Sub Tree 1.1' },
+      { id: 'sub-tree-1.1', label: 'Sub Tree 1.1', children: [{ id: 'sub-tree-1.1.1', label: 'Sub Tree 1.1.1' }] },
       { id: 'sub-tree-1.2', label: 'Sub Tree 1.2' },
       { id: 'sub-tree-1.3', label: 'Sub Tree 1.3' },
     ],
@@ -49,24 +50,42 @@ const items: TreeViewBaseItem[] = [
 ];
 
 export const _DynamicTreeView: StoryObj<typeof DynamicTreeView> = {
-  render: (args: DynamicTreeViewProps) => <DynamicTreeView {...args} />,
+  render: (args: DynamicTreeViewProps) => (
+    <>
+      <Typography variant="h1" children="Selectable Dynamic Tree" id="dynamic-tree" />
+      <DynamicTreeView {...args} />
+    </>
+  ),
   args: {
     items,
+    'aria-labelledby': 'dynamic-tree',
   },
 };
 export const _DynamicTreeViewCheckbox: StoryObj<typeof DynamicTreeView> = {
-  render: (args: DynamicTreeViewProps) => <DynamicTreeView {...args} />,
+  render: (args: DynamicTreeViewProps) => (
+    <>
+      <Typography variant="h1" children="Selectable Dynamic Tree" id="dynamic-tree-selectable" />
+      <DynamicTreeView {...args} />
+    </>
+  ),
   args: {
     items,
     checkboxSelection: true,
+    'aria-labelledby': 'dynamic-tree-selectable',
   },
 };
 
 export const _DynamicTreeViewEditable: StoryObj<typeof DynamicTreeView> = {
-  render: (args: DynamicTreeViewProps) => <DynamicTreeView {...args} />,
+  render: (args: DynamicTreeViewProps) => (
+    <>
+      <Typography variant="h1" children="Editable Dynamic Tree" id="dynamic-tree-editable" />
+      <DynamicTreeView {...args} />
+    </>
+  ),
   args: {
     items,
     isItemEditable: true,
     experimentalFeatures: { labelEditing: true },
+    'aria-labelledby': 'dynamic-tree-editable',
   },
 };

package/src/lib/JsonViewer.stories.tsx

@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import JsonViewer, { JsonViewerProps } from './JsonViewer';
+// import README from '../README.md';
+
+const meta: Meta<typeof JsonViewer> = {
+  title: 'Components/TreeView/JsonViewer',
+  component: JsonViewer,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const _JsonViewer: StoryObj<typeof JsonViewer> = {
+  render: ({ data, ...rest }: JsonViewerProps) => <JsonViewer data={data} {...rest} />,
+  args: {
+    data: { foo: { bar: { baz: ['stuff', 'things', 'etc.'] } } },
+  },
+};

package/src/lib/JsonViewer.test.tsx

@@ -0,0 +1,21 @@
+import { render, fireEvent } from '@testing-library/react';
+import JsonViewer from './JsonViewer';
+
+const setup = (data: Record<string, unknown>) => render(<JsonViewer data={data} />);
+
+describe('JsonViewer', () => {
+  test('does not render keys with null or undefined values without throwing error', () => {
+    const { getByText, queryByText } = setup({ foo: 'bar', baz: null, somethingElse: undefined });
+    const el = getByText(/bar/i);
+    expect(el).toBeInTheDocument();
+    const ghost = queryByText('baz');
+    expect(ghost).not.toBeInTheDocument();
+  });
+  test('renders deeply nested objects into the dom so they can be read by screenreaders even if parent elements are not open', () => {
+    const { getByText } = setup({ foo: { bar: { baz: ['stuff', 'things', 'etc.'] } } });
+    fireEvent.click(getByText('foo: { } 1 keys'));
+    fireEvent.click(getByText('bar: { } 1 keys'));
+    fireEvent.click(getByText('baz: [ ] 3 items'));
+    expect(getByText('0: stuff')).toBeInTheDocument();
+  });
+});

package/src/lib/JsonViewer.tsx

@@ -0,0 +1,43 @@
+import { TreeItem } from './TreeItem';
+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>;
+}
+
+const isPrimitive = (value: unknown): value is string | number | boolean => {
+  return ['string', 'number', 'boolean'].includes(typeof value);
+};
+
+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;
+
+    if (isPrimitive(value)) {
+      const label = `${key}: ${value.toString()}`;
+      return <TreeItem label={label} itemId={`${key}.${value}`} key={`${key}.${value}`} />;
+    }
+    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>
+      );
+    }
+
+    return null;
+  });
+};
+
+const JsonViewer = ({ data, ...rest }: JsonViewerProps): JSX.Element => {
+  const details = getDetails({ data });
+  return <TreeView {...rest}>{details}</TreeView>;
+};
+
+export default JsonViewer;

package/src/lib/TreeItem.stories.tsx

@@ -5,6 +5,7 @@ import { TreeItem, TreeItemProps } from './TreeItem';
 import { TreeView } from './TreeView';
 import { FolderIcon } from '@availity/mui-icon';
 import { Grid } from '@availity/mui-layout';
+import { Typography } from '@availity/mui-typography';
 
 const meta: Meta<typeof TreeItem> = {
   title: 'Components/TreeView/TreeItem',
@@ -16,36 +17,47 @@ export default meta;
 
 export const _Tree: StoryObj<typeof TreeItem> = {
   render: (args: TreeItemProps) => (
-    <TreeView>
-      <TreeItem {...args} />
-    </TreeView>
+    <>
+      <Typography variant="h1" children="Tree Item" id="tree-item" />
+      <TreeView>
+        <TreeItem {...args} />
+      </TreeView>
+    </>
   ),
   args: {
     truncate: true,
     itemId: 'Tree Item Label',
     label: 'Tree Item Label',
     children: <TreeItem itemId="This text is a child of TreeItem" label="This text is a child of TreeItem" />,
+    'aria-labelledby': 'tree-item',
   },
 };
 
 export const _TreeCheckboxSelection: StoryObj<typeof TreeItem> = {
   render: (args: TreeItemProps) => (
-    <TreeView checkboxSelection>
-      <TreeItem {...args} />
-    </TreeView>
+    <>
+      <Typography variant="h1" children="Selectable Tree Item" id="tree-item-selectable" />
+      <TreeView checkboxSelection>
+        <TreeItem {...args} />
+      </TreeView>
+    </>
   ),
   args: {
     itemId: 'Tree Item Label',
     label: 'Tree Item Label',
     children: <TreeItem itemId="This text is a child of TreeItem" label="This text is a child of TreeItem" />,
+    'aria-labelledby': 'tree-item-selectable',
   },
 };
 
 export const _TreeIcon: StoryObj<typeof TreeItem> = {
   render: (args: TreeItemProps) => (
-    <TreeView checkboxSelection>
-      <TreeItem {...args} />
-    </TreeView>
+    <>
+      <Typography variant="h1" children="Tree Item with Icon" id="tree-item-icon" />
+      <TreeView checkboxSelection>
+        <TreeItem {...args} />
+      </TreeView>
+    </>
   ),
   args: {
     itemId: 'tree-item',
@@ -55,7 +67,7 @@ export const _TreeIcon: StoryObj<typeof TreeItem> = {
         Tree Item
       </Grid>
     ),
-    // slots: { icon: FolderIcon },
     children: <TreeItem itemId="sub-tree-item" label="Sub Tree Item" />,
+    'aria-labelledby': 'tree-item-icon',
   },
 };

package/src/lib/TreeItem.tsx

@@ -5,11 +5,16 @@ export interface TreeItemProps extends MuiTreeItem2Props {
   truncate?: boolean;
 }
 
-export const TreeItem = ({ children, slots, slotProps, truncate, ...rest }: TreeItemProps): JSX.Element => {
+export const TreeItem = ({ children, label, slots, slotProps, truncate, ...rest }: TreeItemProps): JSX.Element => {
   return (
     <TreeItem2
       {...rest}
-      slots={{ ...slots, expandIcon: TriangleRightIcon, collapseIcon: TriangleExpandIcon }}
+      label={label}
+      slots={{
+        ...slots,
+        expandIcon: TriangleRightIcon,
+        collapseIcon: TriangleExpandIcon,
+      }}
       slotProps={{
         ...slotProps,
         expandIcon: { fontSize: 'Xsmall' },
@@ -17,6 +22,12 @@ export const TreeItem = ({ children, slots, slotProps, truncate, ...rest }: Tree
         label: {
           style: truncate ? { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } : {},
         },
+        checkbox: {
+          // @ts-expect-error TreeItem2SlotProps.checkbox types are incorrect
+          inputProps: {
+            'aria-hidden': true,
+          },
+        },
       }}
     >
       {children}

package/src/lib/TreeView.stories.tsx

@@ -1,6 +1,7 @@
 // Each exported component in the package should have its own stories file
 
 import type { Meta, StoryObj } from '@storybook/react';
+import { Typography } from '@availity/mui-typography';
 import { TreeView, TreeViewProps } from './TreeView';
 import { TreeItem } from './TreeItem';
 
@@ -38,15 +39,27 @@ const items = (
 );
 
 export const _TreeView: StoryObj<typeof TreeView> = {
-  render: (args: TreeViewProps) => <TreeView {...args} />,
+  render: (args: TreeViewProps) => (
+    <>
+      <Typography variant="h1" children="Tree View" id="tree-view" />
+      <TreeView {...args} />
+    </>
+  ),
   args: {
     children: items,
+    'aria-labelledby': 'tree-view',
   },
 };
 
 export const _TreeViewCheckbox: StoryObj<typeof TreeView> = {
-  render: (args: TreeViewProps) => <TreeView checkboxSelection {...args} />,
+  render: (args: TreeViewProps) => (
+    <>
+      <Typography variant="h1" children="Selectable Tree View" id="tree-view-selectable" />
+      <TreeView checkboxSelection {...args} />
+    </>
+  ),
   args: {
     children: items,
+    'aria-labelledby': 'tree-view-selectable',
   },
 };