@digital-ai/dot-components 4.10.0 → 4.11.1

package/index.esm.js

@@ -4315,24 +4315,36 @@ const DotClickAwayListener = ({
 };
 
 const TYPEABLE_INPUTS_TYPES = ['date', 'datetime-local', 'email', 'month', 'number', 'password', 'search', 'tel', 'text', 'time', 'url', 'week'];
-const isTypableElement = element => {
+const checkIfTypableElement = element => {
   const type = element.getAttribute('type');
   return element.nodeName === 'TEXTAREA' || element.nodeName === 'INPUT' && (!type || TYPEABLE_INPUTS_TYPES.includes(type));
 };
-const useKeyPress = (key, callback, dependencies) => {
+const isElementPreventingKeyPress = element => {
+  return checkIfTypableElement(element) || element.isContentEditable;
+};
+const isModifierPressed = (event, modifiers) => {
+  return modifiers.includes('shift') === event.shiftKey && modifiers.includes('ctrl') === event.ctrlKey && modifiers.includes('alt') === event.altKey && modifiers.includes('meta') === event.metaKey;
+};
+const useKeyPress = (keyOptions, callback, dependencies = []) => {
   useEffect(() => {
-    if (!key) return;
+    if (!keyOptions) return;
+    const {
+      keys,
+      modifiers
+    } = keyOptions;
+    if (!keys || !keys.length) return;
     const handleKeyPress = event => {
       const element = event.target;
-      if (event.key === key && !isTypableElement(element) && !element.isContentEditable) {
-        callback();
+      const isKeyPressed = Array.isArray(keys) ? keys.includes(event.key) : event.key === keys;
+      if (isKeyPressed && !isElementPreventingKeyPress(element) && isModifierPressed(event, modifiers !== null && modifiers !== void 0 ? modifiers : [])) {
+        callback(event);
       }
     };
     window.addEventListener('keydown', handleKeyPress);
     return () => {
       window.removeEventListener('keydown', handleKeyPress);
     };
-  }, [key, ...dependencies]);
+  }, [keyOptions, ...dependencies]);
 };
 
 const DotList = ({
@@ -4366,7 +4378,9 @@ const DotList = ({
   const handleHrefClick = index => () => {
     updateSelectedListItem(index);
   };
-  useKeyPress(keyForNestedReset, handleClickAway, []);
+  useKeyPress({
+    keys: keyForNestedReset
+  }, handleClickAway);
   const list = jsxs(StyledList, {
     "aria-label": ariaLabel,
     classes: {
@@ -6017,7 +6031,7 @@ const DotSidebar = ({
   const hasBackItem = goBack && backItem;
   const displayHeader = title || hasAppLogo;
   const openClass = isOpen ? 'open' : 'collapsed';
-  const collapseKey = 'q';
+  const collapseKeys = ['q', 'Q'];
   const checkPrimaryNavMissingIcons = () => navItems.some(item => !item.divider && !item.startIcon);
   useEffect(() => {
     // Incorrect usage warning
@@ -6035,7 +6049,9 @@ const DotSidebar = ({
     onCollapseChange && onCollapseChange(isOpen);
     setIsOpen(!isOpen);
   };
-  useKeyPress(collapsable && collapseKey, toggleNavCollapseState, [isOpen, collapsable]);
+  useKeyPress(collapsable && {
+    keys: collapseKeys
+  }, toggleNavCollapseState, [isOpen, collapsable]);
   const sidebarClasses = useStylesWithRootClass('side-nav', openClass);
   const rootClasses = useStylesWithRootClass(rootClassName$11, openClass, className);
   return jsxs(StyledSidebar, {
@@ -6079,7 +6095,7 @@ const DotSidebar = ({
       dense: true,
       disablePadding: true,
       items: navItems,
-      keyForNestedReset: collapseKey,
+      keyForNestedReset: collapseKeys,
       nestedDrawerLeftSpacing: sidebarWidth,
       nestedListType: nestedListType,
       width: "100%"
@@ -6089,7 +6105,7 @@ const DotSidebar = ({
     }), collapsable && jsx("div", {
       className: "toggle-nav",
       children: jsx(DotTooltip, {
-        title: (isOpen ? 'Collapse' : 'Expand') + ` ${collapseKey.toUpperCase()}`,
+        title: (isOpen ? 'Collapse' : 'Expand') + ` ${collapseKeys[0].toUpperCase()}`,
         placement: "right",
         children: jsx(DotIconButton, {
           ariaLabel: "collapse sidebar navigation",
@@ -6286,7 +6302,7 @@ const StyledAppToolbar = styled.header`
         align-items: center;
 
         .right-side-pre-nav {
-          margin-right: ${theme.spacing(3)};
+          margin-right: ${theme.spacing(6)};
         }
 
         .dot-badge .MuiBadge-anchorOriginTopRightRectangular {
@@ -6300,6 +6316,7 @@ const StyledAppToolbar = styled.header`
         align-items: center;
         justify-content: center;
         width: 40px;
+        height: 40px;
         button.dot-avatar:focus-visible {
           box-shadow: 0px 0px 0px 3px ${theme.palette.figma.icon.white},
             0px 0px 0px 5px ${theme.palette.figma.icon.black};

package/package.json

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

package/src/lib/components/list/utils/models.d.ts

@@ -18,7 +18,7 @@ export interface ListProps extends CommonProps {
     /** Array of list items displayed */
     items?: Array<ListItemProps>;
     /** If defined, list selection will reset when key is pressed */
-    keyForNestedReset?: string;
+    keyForNestedReset?: string | string[];
     /** If nested list type is 'menu', determines the placement of the menu */
     menuPlacement?: PopperPlacement;
     /** If nested type is 'drawer', determines the width of the left spacing */

package/src/lib/hooks/useKeyPress.d.ts

@@ -1,2 +1,9 @@
+import React from 'react';
 export declare const TYPEABLE_INPUTS_TYPES: string[];
-export declare const useKeyPress: (key: string, callback: () => void, dependencies: unknown[]) => void;
+export type Modifier = 'shift' | 'ctrl' | 'alt' | 'meta';
+interface KeyOptions {
+    keys: string | string[];
+    modifiers?: Modifier[];
+}
+export declare const useKeyPress: (keyOptions: KeyOptions, callback: (event?: KeyboardEvent | React.KeyboardEvent) => void, dependencies?: unknown[]) => void;
+export {};