@digital-ai/dot-components 2.27.0 → 2.27.1

package/index.esm.js

@@ -3667,6 +3667,14 @@ const styledListItemElement = elementType => {
           width: 100%;
         }
 
+        &.link-item {
+          padding: 0;
+
+          .${listItemLinkClassName} {
+            padding: ${theme.spacing(1, 2)};
+          }
+        }
+
         &.${flyoutListItemClassName} {
           padding: 0;
         }
@@ -3689,6 +3697,10 @@ const styledListItemElement = elementType => {
           align-items: center;
           display: flex;
           flex-grow: 2;
+
+          &:focus-visible {
+            outline: none;
+          }
         }
 
         .${flyoutItemLinkClassName} .MuiIcon-root {
@@ -3841,7 +3853,8 @@ const DotListItem = ({
   const hasChildren = items.length > 0;
   const isFlyout = nestedListType === 'menu' && hasChildren;
   const showEndIcon = endIcon || hasChildren;
-  const rootClasses = useStylesWithRootClass(listItemRootClass, className, nestedListType === 'expandable' && hasChildren ? 'expandable' : '', navIsOpened ? 'open' : '');
+  const isLink = href && !onClick;
+  const rootClasses = useStylesWithRootClass(listItemRootClass, className, nestedListType === 'expandable' && hasChildren ? 'expandable' : '', navIsOpened ? 'open' : '', isLink ? 'link-item' : '');
   const toggleOpen = event => {
     setAnchorEl(event.currentTarget);
     setNavIsOpened(!navIsOpened);
@@ -3895,15 +3908,16 @@ const DotListItem = ({
       "data-testid": dataTestId,
       divider: divider,
       href: onClick ? null : href,
-      onClick: onClick || !href ? handleClick : null,
+      onClick: !isLink ? handleClick : null,
       role: ariaRole,
       selected: isFlyout ? navIsOpened : selected,
+      tabIndex: isLink ? -1 : 0,
       target: target,
       children: jsx(DotTooltip, {
         "data-testid": `${dataTestId}-tooltip`,
         placement: tooltipPlacement,
         title: tooltip,
-        children: href && !onClick ? renderListItemLink : jsxs(Fragment, {
+        children: isLink ? renderListItemLink : jsxs(Fragment, {
           children: [startIcon && jsx(ListItemIcon, {
             children: startIcon
           }), renderListItemText(), showEndIcon && renderListItemEndIcon()]
@@ -5276,6 +5290,12 @@ const StyledSidebar = styled.aside`
           margin: 0;
           padding: 0;
 
+          .${listItemLinkClassName} {
+            padding: 0;
+            height: 100%;
+            width: 100%;
+          }
+
           .dot-typography {
             margin-left: ${theme.spacing(1)};
           }
@@ -5337,10 +5357,6 @@ const StyledSidebar = styled.aside`
             border: 'none';
           }
 
-          .dot-list-item-link .dot-icon {
-            margin-right: ${theme.spacing(1)};
-          }
-
           .dot-icon {
             border-radius: 50%;
             display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "2.27.0",
+  "version": "2.27.1",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [