@availity/mui-tree 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [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.1.1",
   "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';
 
 /**
@@ -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/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',
   },
 };