@zextras/carbonio-design-system 3.0.0 → 3.0.1-devel.1696932777043

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [3.0.1](https://github.com/Zextras/carbonio-design-system/compare/v3.0.0...v3.0.1) (2023-09-29)
+
 ## [3.0.0](https://github.com/Zextras/carbonio-design-system/compare/v2.3.0...v3.0.0) (2023-09-27)
 
 

package/dist/zapp-ui.bundle.d.ts

@@ -875,7 +875,7 @@ export declare interface DropdownProps extends Omit<HTMLAttributes<HTMLDivElemen
     /** Only one component can be passed as children */
     children: React_2.ReactElement;
     /** trigger ref that can be used instead of lost children ref caused by cloneElement */
-    triggerRef?: React_2.Ref<HTMLElement> | null;
+    triggerRef?: React_2.Ref<HTMLElement>;
     /** Placement of the dropdown */
     placement?: 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
     /** Flag to disable the Portal implementation */
@@ -893,7 +893,7 @@ export declare interface DropdownProps extends Omit<HTMLAttributes<HTMLDivElemen
     /** Item Padding Between */
     itemPaddingBetween?: keyof DefaultTheme['sizes']['padding'];
     /** Ref assign to the dropdown list popper container */
-    dropdownListRef?: React_2.RefObject<HTMLDivElement> | null;
+    dropdownListRef?: React_2.RefObject<HTMLDivElement>;
 }
 
 export declare interface DropProps {
@@ -925,6 +925,8 @@ export declare interface DSWindow {
     };
 }
 
+declare type ElementType = 'listItem' | 'button' | 'list' | 'chipInputKeys' | 'chipInputSpace';
+
 export declare const EmailComposerInput: React_2.ForwardRefExoticComponent<EmailComposerInputProps & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare interface EmailComposerInputProps extends HTMLAttributes<HTMLDivElement> {
@@ -1004,13 +1006,7 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
 
  export { getDefaultLocale }
 
- export declare function getKeyboardPreset(type: 'listItem', callback: NativeKeyboardEventHandler, ref?: undefined, keys?: undefined, modifier?: boolean): KeyboardPreset;
-
- export declare function getKeyboardPreset(type: 'button', callback: NativeKeyboardEventHandler, ref?: undefined, keys?: undefined, modifier?: boolean): KeyboardPreset;
-
- export declare function getKeyboardPreset(type: 'list', callback: undefined, ref: React_2.RefObject<HTMLElement>, keys?: undefined, modifier?: boolean): KeyboardPreset;
-
- export declare function getKeyboardPreset(type: 'chipInputKeys', callback: NativeKeyboardEventHandler, ref?: undefined, keys?: string[], modifier?: boolean): KeyboardPreset;
+ export declare function getKeyboardPreset(type: ElementType, callback: (e: KeyboardEvent) => void, ref?: React_2.MutableRefObject<HTMLElement | null> | undefined, keys?: string[], modifier?: boolean): KeyboardPreset;
 
  declare function getPadding(padding: PaddingStringComposition | PaddingObj): (args: {
      theme: DefaultTheme;
@@ -1194,7 +1190,7 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
 
  declare type KeyboardPresetObj = {
      type: HtmlElementKeyboardEventKey;
-     callback: NativeKeyboardEventHandler;
+     callback: (e: KeyboardEvent) => void;
      keys: string[];
      modifier?: boolean;
      haveToPreventDefault?: boolean;
@@ -1469,8 +1465,6 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
 
  export declare type MultipleSelectionOnChange<T = string> = (value: Array<SelectItem<T>>) => void;
 
- declare type NativeKeyboardEventHandler = (event: KeyboardEvent) => void;
-
  declare type NonEmptyArray<T> = [T, ...T[]];
 
  declare type Options = {
@@ -2211,7 +2205,7 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
   * In order to have an event for no key, you should either provide an event with the `keys` field set
   * to an array with an empty key (`['']`), or not provide an event at all.
   */
- export declare function useKeyboard(ref: React_2.RefObject<HTMLElement>, events: KeyboardPreset, registerListener?: boolean): void;
+ export declare function useKeyboard(ref: React_2.RefObject<HTMLElement>, events: KeyboardPreset): void;
 
  export declare function useModal(): CreateModalFn;
 

package/dist/zapp-ui.bundle.js

@@ -7009,27 +7009,6 @@ const Spinner = /*#__PURE__*/React__namespace.default.forwardRef(function Spinne
   }, rest));
 });
 
-/**
- * This method returns `undefined`.
- *
- * @static
- * @memberOf _
- * @since 2.3.0
- * @category Util
- * @example
- *
- * _.times(2, _.noop);
- * // => [undefined, undefined]
- */
-
-function noop$1() {
-  // No operation performed.
-}
-
-var noop_1 = noop$1;
-
-var _noop = /*@__PURE__*/getDefaultExportFromCjs(noop_1);
-
 /**
  * A specialized version of `_.forEach` for arrays without support for
  * iteratee shorthands.
@@ -7194,167 +7173,176 @@ var _map = /*@__PURE__*/getDefaultExportFromCjs(map_1);
 
 function getFocusableElement(focusedElement, direction) {
   const siblingElement = focusedElement[direction];
-  if (!(siblingElement instanceof HTMLElement)) {
+  if (!siblingElement) {
     return null;
   }
   if (siblingElement.tabIndex >= 0) {
-    return siblingElement;
+    return focusedElement[direction];
   }
   return getFocusableElement(siblingElement, direction);
 }
-function handleArrowUp(ref) {
-  if (ref?.current) {
-    const focusedElement = ref.current.querySelector('[tabindex]:focus');
-    if (focusedElement) {
-      const prevEl = getFocusableElement(focusedElement, 'previousElementSibling');
-      if (prevEl) {
-        prevEl.focus();
+function getKeyboardPreset(type, callback) {
+  let ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
+  let keys = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
+  let modifier = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  function handleArrowUp() {
+    if (ref?.current) {
+      const focusedElement = ref.current.querySelector('[tabindex]:focus');
+      if (focusedElement) {
+        const prevEl = getFocusableElement(focusedElement, 'previousElementSibling');
+        if (prevEl) {
+          prevEl.focus();
+        } else {
+          const lastChild = ref.current.querySelector('[tabindex]:last-child');
+          lastChild && lastChild.focus();
+        }
       } else {
-        const lastChild = ref.current.querySelector('[tabindex]:last-child');
-        lastChild && lastChild.focus();
+        const firstChild = ref.current.querySelector('[tabindex]:first-child');
+        firstChild && firstChild.focus();
       }
-    } else {
-      const firstChild = ref.current.querySelector('[tabindex]:first-child');
-      firstChild && firstChild.focus();
     }
   }
-}
-function handleArrowDown(ref) {
-  if (ref?.current) {
-    const focusedElement = ref.current.querySelector('[tabindex]:focus');
-    if (focusedElement) {
-      const nextEl = getFocusableElement(focusedElement, 'nextElementSibling');
-      if (nextEl) {
-        nextEl.focus();
+  function handleArrowDown() {
+    if (ref?.current) {
+      const focusedElement = ref.current.querySelector('[tabindex]:focus');
+      if (focusedElement) {
+        const nextEl = getFocusableElement(focusedElement, 'nextElementSibling');
+        if (nextEl) {
+          nextEl.focus();
+        } else {
+          const firstChild = ref.current.querySelector('[tabindex]:first-child');
+          firstChild && firstChild.focus();
+        }
       } else {
         const firstChild = ref.current.querySelector('[tabindex]:first-child');
         firstChild && firstChild.focus();
       }
-    } else {
-      const firstChild = ref.current.querySelector('[tabindex]:first-child');
-      firstChild && firstChild.focus();
     }
   }
-}
-function handleEscape(ref) {
-  if (ref?.current) {
-    const focusedElement = ref.current.querySelector('[tabindex]:focus');
-    if (focusedElement) {
-      focusedElement.blur();
+  function handleEscape() {
+    if (ref?.current) {
+      const focusedElement = ref.current.querySelector('[tabindex]:focus');
+      if (focusedElement) {
+        focusedElement.blur();
+      }
     }
   }
-}
-const findFirstChildWithClick = element => {
-  let result = element;
-  while (!result?.onclick && result !== null) {
-    result = result.firstElementChild;
-  }
-  return result;
-};
-const handleEnter = ref => {
-  if (ref?.current) {
-    const focusedElement = ref.current.querySelector('[tabindex]:focus');
-    if (focusedElement) {
-      const firstChild = findFirstChildWithClick(focusedElement);
-      if (firstChild) {
-        firstChild.click();
+  const findFirstChildWithClick = element => {
+    let result = element;
+    while (!result?.onclick && result !== null) {
+      result = result.firstElementChild;
+    }
+    return result;
+  };
+  const handleEnter = () => {
+    if (ref?.current) {
+      const focusedElement = ref.current.querySelector('[tabindex]:focus');
+      if (focusedElement) {
+        const firstChild = findFirstChildWithClick(focusedElement);
+        if (firstChild) {
+          firstChild.click();
+        }
       }
     }
+  };
+  function handleCtrlArrowUp() {
+    if (ref?.current) {
+      const firstChild = ref.current.querySelector('[tabindex]:first-child');
+      firstChild && firstChild.focus();
+    }
   }
-};
-function handleCtrlArrowUp(ref) {
-  if (ref?.current) {
-    const firstChild = ref.current.querySelector('[tabindex]:first-child');
-    firstChild && firstChild.focus();
-  }
-}
-function handleCtrlArrowDown(ref) {
-  if (ref?.current) {
-    const lastChild = ref.current.querySelector('[tabindex]:last-child');
-    lastChild && lastChild.focus();
+  function handleCtrlArrowDown() {
+    if (ref?.current) {
+      const lastChild = ref.current.querySelector('[tabindex]:last-child');
+      lastChild && lastChild.focus();
+    }
   }
-}
-function getListItemKeyboardPreset(callback, modifier) {
-  return [{
-    type: 'keypress',
-    callback,
-    keys: ['Enter', 'NumpadEnter'],
-    modifier
-  }];
-}
-function getButtonKeyboardPreset(callback, modifier) {
-  return [{
-    type: 'keyup',
-    callback,
-    keys: ['Space'],
-    modifier
-  }, {
-    type: 'keypress',
-    callback: e => e.preventDefault(),
-    keys: ['Space'],
-    modifier
-  }, {
-    type: 'keypress',
-    callback,
-    keys: ['Enter', 'NumpadEnter'],
-    modifier
-  }];
-}
-function getListKeyboardPreset(ref, modifier) {
-  return [{
-    type: 'keydown',
-    callback: () => handleArrowUp(ref),
-    keys: ['ArrowUp'],
-    modifier
-  }, {
-    type: 'keydown',
-    callback: () => handleArrowDown(ref),
-    keys: ['ArrowDown'],
-    modifier
-  }, {
-    type: 'keydown',
-    callback: () => handleCtrlArrowUp(ref),
-    keys: ['ArrowUp'],
-    modifier: true
-  }, {
-    type: 'keydown',
-    callback: () => handleCtrlArrowDown(ref),
-    keys: ['ArrowDown'],
-    modifier: true
-  }, {
-    type: 'keydown',
-    callback: () => handleEscape(ref),
-    keys: ['Escape'],
-    modifier
-  }, {
-    type: 'keydown',
-    callback: () => handleEnter(ref),
-    keys: ['Enter', 'NumpadEnter'],
-    modifier
-  }];
-}
-function getKeyboardPreset(type) {
-  let callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _noop;
-  let ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
-  let keys = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
-  let modifier = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  const eventsArray = [];
   switch (type) {
     case 'listItem':
-      return getListItemKeyboardPreset(callback, modifier);
+      {
+        eventsArray.push({
+          type: 'keypress',
+          callback,
+          keys: ['Enter', 'NumpadEnter'],
+          modifier
+        });
+        break;
+      }
     case 'button':
-      return getButtonKeyboardPreset(callback, modifier);
+      {
+        eventsArray.push({
+          type: 'keyup',
+          callback,
+          keys: ['Space'],
+          modifier
+        });
+        eventsArray.push({
+          type: 'keypress',
+          callback: e => e.preventDefault(),
+          keys: ['Space'],
+          modifier
+        });
+        eventsArray.push({
+          type: 'keypress',
+          callback,
+          keys: ['Enter', 'NumpadEnter'],
+          modifier
+        });
+        break;
+      }
     case 'list':
-      return getListKeyboardPreset(ref, modifier);
+      {
+        eventsArray.push({
+          type: 'keydown',
+          callback: handleArrowUp,
+          keys: ['ArrowUp'],
+          modifier
+        });
+        eventsArray.push({
+          type: 'keydown',
+          callback: handleArrowDown,
+          keys: ['ArrowDown'],
+          modifier
+        });
+        eventsArray.push({
+          type: 'keydown',
+          callback: handleCtrlArrowUp,
+          keys: ['ArrowUp'],
+          modifier: true
+        });
+        eventsArray.push({
+          type: 'keydown',
+          callback: handleCtrlArrowDown,
+          keys: ['ArrowDown'],
+          modifier: true
+        });
+        eventsArray.push({
+          type: 'keydown',
+          callback: handleEscape,
+          keys: ['Escape'],
+          modifier
+        });
+        eventsArray.push({
+          type: 'keydown',
+          callback: handleEnter,
+          keys: ['Enter', 'NumpadEnter'],
+          modifier
+        });
+        break;
+      }
     case 'chipInputKeys':
-      return [{
-        type: 'keypress',
-        callback,
-        keys,
-        modifier
-      }];
-    default:
-      return [];
+      {
+        eventsArray.push({
+          type: 'keypress',
+          callback,
+          keys,
+          modifier
+        });
+        break;
+      }
   }
+  return eventsArray;
 }
 
 /**
@@ -7365,7 +7353,6 @@ function getKeyboardPreset(type) {
  * to an array with an empty key (`['']`), or not provide an event at all.
  */
 function useKeyboard(ref, events) {
-  let registerListener = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   const keyEvents = React.useMemo(() => _map(events, _ref => {
     let {
       keys,
@@ -7383,12 +7370,12 @@ function useKeyboard(ref, events) {
     };
   }), [events]);
   React.useEffect(() => {
-    const refSave = ref.current;
-    if (refSave && registerListener) {
+    if (ref.current) {
       _forEach(keyEvents, (keyEvent, index) => {
-        refSave.addEventListener(events[index].type, keyEvent);
+        ref.current && ref.current.addEventListener(events[index].type, keyEvent);
       });
     }
+    const refSave = ref.current;
     return () => {
       if (refSave) {
         _forEach(keyEvents, (keyEvent, index) => {
@@ -7396,7 +7383,8 @@ function useKeyboard(ref, events) {
         });
       }
     };
-  }, [events, keyEvents, ref, registerListener]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [events, keyEvents, ref, ref.current]);
 }
 
 const StyledIcon = styled__default.default(Icon).withConfig({
@@ -7638,7 +7626,6 @@ const Button$1 = /*#__PURE__*/React__namespace.default.forwardRef(function Butto
     buttonRef = null,
     ...rest
   } = _ref22;
-  const gridRef = useCombinedRefs(ref);
   const innerButtonRef = useCombinedRefs(buttonRef);
   const clickHandler = React.useCallback(e => {
     if (!disabled && onClick && !e.defaultPrevented) {
@@ -7657,22 +7644,11 @@ const Button$1 = /*#__PURE__*/React__namespace.default.forwardRef(function Butto
     type,
     ...rest
   }), [type, rest]);
-  const setFocusOnPrimaryButton = React.useCallback(() => {
-    innerButtonRef.current?.focus();
-  }, [innerButtonRef]);
-  React.useEffect(() => {
-    const gridElement = gridRef.current;
-    gridElement?.addEventListener('focus', setFocusOnPrimaryButton);
-    return () => {
-      gridElement?.removeEventListener('focus', setFocusOnPrimaryButton);
-    };
-  }, [gridRef, setFocusOnPrimaryButton]);
   return /*#__PURE__*/React__namespace.default.createElement(StyledGrid, {
     width: width,
     minWidth: minWidth,
     padding: SIZES$2[size].padding,
-    ref: gridRef,
-    tabIndex: -1
+    ref: ref
   }, /*#__PURE__*/React__namespace.default.createElement(StyledButton, _extends({}, rest, {
     backgroundColor: colors.backgroundColor,
     color: colors.color,
@@ -8509,6 +8485,27 @@ function arrayIncludesWith$1(array, value, comparator) {
 
 var _arrayIncludesWith = arrayIncludesWith$1;
 
+/**
+ * This method returns `undefined`.
+ *
+ * @static
+ * @memberOf _
+ * @since 2.3.0
+ * @category Util
+ * @example
+ *
+ * _.times(2, _.noop);
+ * // => [undefined, undefined]
+ */
+
+function noop$1() {
+  // No operation performed.
+}
+
+var noop_1 = noop$1;
+
+var _noop = /*@__PURE__*/getDefaultExportFromCjs(noop_1);
+
 var Set$1 = _Set,
     noop = noop_1,
     setToArray$1 = _setToArray;
@@ -9776,10 +9773,6 @@ function usePrevious(value) {
 const INPUT_BACKGROUND_COLOR = 'gray5';
 const INPUT_DIVIDER_COLOR = 'gray3';
 const TIMERS = {
-  DROPDOWN: {
-    IS_OPEN: 1,
-    CLOSE_NESTED: 500
-  },
   MODAL: {
     DELAY_OPEN: 1
   }
@@ -10140,37 +10133,6 @@ var some_1 = some;
 
 var _some = /*@__PURE__*/getDefaultExportFromCjs(some_1);
 
-/**
- * Gets the first element of `array`.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @alias first
- * @category Array
- * @param {Array} array The array to query.
- * @returns {*} Returns the first element of `array`.
- * @example
- *
- * _.head([1, 2, 3]);
- * // => 1
- *
- * _.head([]);
- * // => undefined
- */
-
-function head(array) {
-  return (array && array.length) ? array[0] : undefined;
-}
-
-var head_1 = head;
-
-var _head = /*@__PURE__*/getDefaultExportFromCjs(head_1);
-
-var first = head_1;
-
-var _first = /*@__PURE__*/getDefaultExportFromCjs(first);
-
 const ContainerEl$2 = styled__default.default(Container).withConfig({
   displayName: "Dropdown__ContainerEl",
   componentId: "sc-1jmq2vf-0"
@@ -10260,8 +10222,7 @@ function PopperListItem(_ref3) {
     tabIndex: disabled ? -1 : 0,
     $disabled: disabled,
     $selectedBackgroundColor: selected ? selectedBackgroundColor : undefined,
-    background: selected && selectedBackgroundColor ? selectedBackgroundColor : undefined,
-    "data-testid": 'dropdown-item'
+    background: selected && selectedBackgroundColor ? selectedBackgroundColor : undefined
   }, rest), customComponent || /*#__PURE__*/React__namespace.default.createElement(ListItemContent, {
     icon: icon,
     label: label,
@@ -10279,6 +10240,7 @@ function NestListItem(_ref4) {
     label,
     onClick,
     selected,
+    open,
     customComponent,
     disabled = false,
     items,
@@ -10287,101 +10249,13 @@ function NestListItem(_ref4) {
     itemTextSize,
     itemPaddingBetween,
     keepOpen,
-    dropdownListRef = null,
+    dropdownListRef,
     tooltipLabel,
-    onOpen,
-    onClose,
     ...rest
   } = _ref4;
-  const [open, setOpen] = React.useState(false);
   const itemRef = React.useRef(null);
-  const innerDropdownListRef = useCombinedRefs(dropdownListRef);
-  const closeNestedDropdownTimeoutRef = React.useRef();
-  React.useEffect(() => () => {
-    if (closeNestedDropdownTimeoutRef.current !== undefined) {
-      clearTimeout(closeNestedDropdownTimeoutRef.current);
-    }
-  }, []);
-  const openNestedDropdown = React.useCallback(() => {
-    if (closeNestedDropdownTimeoutRef.current !== undefined) {
-      clearTimeout(closeNestedDropdownTimeoutRef.current);
-      closeNestedDropdownTimeoutRef.current = undefined;
-    }
-    setOpen(true);
-    onOpen?.();
-  }, [onOpen]);
-  const closeNestedDropdown = React.useCallback(() => {
-    if (closeNestedDropdownTimeoutRef.current !== undefined) {
-      clearTimeout(closeNestedDropdownTimeoutRef.current);
-      closeNestedDropdownTimeoutRef.current = undefined;
-    }
-    setOpen(false);
-    onClose?.();
-    itemRef.current?.focus({
-      preventScroll: true
-    });
-  }, [onClose]);
-  const itemKeyEvents = React.useMemo(() => {
-    const presets = [{
-      type: 'keydown',
-      callback: openNestedDropdown,
-      keys: ['ArrowRight']
-    }];
-    if (onClick) {
-      presets.push(...getKeyboardPreset('listItem', onClick));
-    }
-    return presets;
-  }, [onClick, openNestedDropdown]);
-  useKeyboard(itemRef, itemKeyEvents);
-  const dropdownKeyEvents = React.useMemo(() => [{
-    type: 'keydown',
-    callback: closeNestedDropdown,
-    keys: ['Escape']
-  }, {
-    type: 'keydown',
-    callback: closeNestedDropdown,
-    keys: ['ArrowLeft']
-  }], [closeNestedDropdown]);
-  const [registerNestedListener, setRegisterNestedListener] = React.useState(open);
-  React.useEffect(() => {
-    let timeout;
-    if (open) {
-      timeout = setTimeout(() => {
-        setRegisterNestedListener(true);
-      }, TIMERS.DROPDOWN.IS_OPEN);
-    }
-    return () => {
-      setRegisterNestedListener(false);
-      if (timeout) {
-        clearTimeout(timeout);
-      }
-    };
-  }, [open]);
-  useKeyboard(innerDropdownListRef, dropdownKeyEvents, registerNestedListener);
-  const closeOnMouseLeave = React.useCallback(event => {
-    if (event.target instanceof Node) {
-      const eventIsOnTrigger = itemRef.current?.contains(event.target);
-      const eventIsOnDropdown = innerDropdownListRef.current?.contains(event.target);
-      if (!eventIsOnDropdown && !eventIsOnTrigger) {
-        if (closeNestedDropdownTimeoutRef.current === undefined) {
-          closeNestedDropdownTimeoutRef.current = setTimeout(() => {
-            closeNestedDropdown();
-          }, TIMERS.DROPDOWN.CLOSE_NESTED);
-        }
-      } else if (closeNestedDropdownTimeoutRef.current !== undefined) {
-        clearTimeout(closeNestedDropdownTimeoutRef.current);
-        closeNestedDropdownTimeoutRef.current = undefined;
-      }
-    }
-  }, [closeNestedDropdown, innerDropdownListRef]);
-  React.useEffect(() => {
-    if (open) {
-      window.addEventListener('mouseover', closeOnMouseLeave);
-    }
-    return () => {
-      window.removeEventListener('mouseover', closeOnMouseLeave);
-    };
-  }, [closeOnMouseLeave, open]);
+  const keyEvents = React.useMemo(() => onClick && getKeyboardPreset('listItem', onClick) || [], [onClick]);
+  useKeyboard(itemRef, keyEvents);
   return /*#__PURE__*/React__namespace.default.createElement(ContainerEl$2, _extends({
     "data-keep-open": keepOpen,
     ref: itemRef,
@@ -10394,9 +10268,7 @@ function NestListItem(_ref4) {
     onClick: disabled ? undefined : onClick,
     tabIndex: disabled ? undefined : 0,
     $disabled: disabled,
-    $selectedBackgroundColor: selected ? selectedBackgroundColor : undefined,
-    "data-testid": 'dropdown-item',
-    onMouseEnter: openNestedDropdown
+    $selectedBackgroundColor: selected ? selectedBackgroundColor : undefined
   }, rest), /*#__PURE__*/React__namespace.default.createElement(Dropdown, {
     display: "block",
     items: items,
@@ -10406,7 +10278,7 @@ function NestListItem(_ref4) {
     itemIconSize: itemIconSize,
     itemTextSize: itemTextSize,
     itemPaddingBetween: itemPaddingBetween,
-    dropdownListRef: innerDropdownListRef
+    dropdownListRef: dropdownListRef
   }, /*#__PURE__*/React__namespace.default.createElement(Container, {
     orientation: "horizontal",
     mainAlignment: "space-between",
@@ -10501,14 +10373,14 @@ const Dropdown = /*#__PURE__*/React__namespace.default.forwardRef(function Dropd
     onOpen,
     onClose,
     children,
-    triggerRef = null,
+    triggerRef = /*#__PURE__*/React.createRef(),
     disablePortal = false,
     preventDefault = true,
     selectedBackgroundColor,
     itemIconSize = 'medium',
     itemTextSize = 'medium',
     itemPaddingBetween = 'small',
-    dropdownListRef = null,
+    dropdownListRef = /*#__PURE__*/React.createRef(),
     ...rest
   } = _ref14;
   const {
@@ -10522,24 +10394,29 @@ const Dropdown = /*#__PURE__*/React__namespace.default.forwardRef(function Dropd
   const startSentinelRef = React.useRef(null);
   const endSentinelRef = React.useRef(null);
   const [position, setPosition] = React.useState(null);
+  const [currentHover, setCurrentHover] = React.useState(null);
+  const openPopperTimoutRef = React.useRef();
   const nestedDropdownsRef = React.useRef([]);
+  React.useEffect(
+  // clear timers on unmount
+  () => () => {
+    openPopperTimoutRef.current && clearTimeout(openPopperTimoutRef.current);
+  }, []);
   React.useEffect(() => {
     setOpen(forceOpen);
-    openRef.current = forceOpen;
   }, [forceOpen]);
   const openPopper = React.useCallback(() => {
     setOpen(true);
-    openRef.current = true;
-    onOpen?.();
+    onOpen && onOpen();
   }, [onOpen]);
   const closePopper = React.useCallback(e => {
-    e?.stopPropagation();
+    e && e.stopPropagation();
     setOpen(forceOpen);
-    openRef.current = forceOpen;
-    !disableRestoreFocus && innerTriggerRef.current?.focus();
-    onClose?.();
+    setCurrentHover(null);
+    !disableRestoreFocus && innerTriggerRef.current && innerTriggerRef.current.focus();
+    onClose && onClose();
   }, [disableRestoreFocus, forceOpen, innerTriggerRef, onClose]);
-  const toggleOpen = React.useCallback(e => {
+  const handleClick = React.useCallback(e => {
     if (openRef.current) {
       e.preventDefault();
       closePopper();
@@ -10548,10 +10425,12 @@ const Dropdown = /*#__PURE__*/React__namespace.default.forwardRef(function Dropd
       openPopper();
     }
   }, [closePopper, disabled, openPopper]);
+
+  // TODO: it probably makes sense to merge this callback and the handleClick
   const handleLeftClick = React.useCallback(e => {
-    children.props.onClick?.(e);
-    toggleOpen(e);
-  }, [children.props, toggleOpen]);
+    children.props.onClick && children.props.onClick(e);
+    handleClick(e);
+  }, [children.props, handleClick]);
   const handleRightClick = React.useCallback(e => {
     e.preventDefault();
     const virtualElement = {
@@ -10564,13 +10443,16 @@ const Dropdown = /*#__PURE__*/React__namespace.default.forwardRef(function Dropd
         left: e.clientX,
         x: e.clientX,
         y: e.clientY,
-        toJSON: () => ''
+        toJSON: () => 'TODO' // TODO: check what this should return
       })
     };
+
     setPosition(virtualElement);
-    if (!disabled && !openRef.current) {
-      openPopper();
-    }
+    openPopperTimoutRef.current = setTimeout(() => {
+      if (!disabled && !openRef.current) {
+        openPopper();
+      }
+    }, 1);
   }, [disabled, openPopper]);
   const clickOutsidePopper = React.useCallback(e => {
     const clickedOnDropdown = dropdownRef.current && (e.target === dropdownRef.current || dropdownRef.current.contains(e.target));
@@ -10583,24 +10465,31 @@ const Dropdown = /*#__PURE__*/React__namespace.default.forwardRef(function Dropd
     }
   }, [closePopper, contextMenu, dropdownRef, innerTriggerRef]);
   const onStartSentinelFocus = React.useCallback(() => {
-    const lastChild = popperItemsRef.current?.querySelector('[tabindex]:last-child');
-    lastChild?.focus();
+    const lastChild = popperItemsRef.current && popperItemsRef.current.querySelector('div[tabindex]:last-child');
+    lastChild && lastChild.focus();
   }, []);
   const onEndSentinelFocus = React.useCallback(() => {
-    const firstChild = popperItemsRef.current?.querySelector('[tabindex]:first-child');
-    firstChild?.focus();
+    const lastChild = popperItemsRef.current && popperItemsRef.current.querySelector('div[tabindex]:first-child');
+    lastChild && lastChild.focus();
   }, []);
-  const triggerEvents = React.useMemo(() => handleTriggerEvents ? getKeyboardPreset('button', toggleOpen) : [], [toggleOpen, handleTriggerEvents]);
+  const triggerEvents = React.useMemo(() => handleTriggerEvents ? getKeyboardPreset('button', handleClick) : [], [handleClick, handleTriggerEvents]);
   useKeyboard(innerTriggerRef, triggerEvents);
-  const listEvents = React.useMemo(() => getKeyboardPreset('list', undefined, popperItemsRef), [popperItemsRef]);
-  useKeyboard(popperItemsRef, listEvents, open);
+
+  // We need to add 'open' as dependency because we want to reattach these events each time we open the dropdown
+  const listEvents = React.useMemo(() => getKeyboardPreset('list', () => undefined, popperItemsRef),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [open, popperItemsRef]);
+  useKeyboard(popperItemsRef, listEvents);
+  // We need to add 'open' as dependency because we want to reattach these events each time we open the dropdown
   const escapeEvent = React.useMemo(() => [{
     type: 'keydown',
     callback: closePopper,
     keys: ['Escape'],
     modifier: false
-  }], [closePopper]);
-  useKeyboard(dropdownRef, escapeEvent, open);
+  }],
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [open, closePopper]);
+  useKeyboard(dropdownRef, escapeEvent);
   React.useLayoutEffect(() => {
     let popperInstance;
     if (open) {
@@ -10620,29 +10509,27 @@ const Dropdown = /*#__PURE__*/React__namespace.default.forwardRef(function Dropd
     let timeout;
     if (!disableAutoFocus && open) {
       timeout = setTimeout(() => {
-        const selectedItems = dropdownRef.current?.querySelectorAll('.zapp-selected');
-        if (selectedItems && selectedItems.length > 0) {
-          selectedItems[0].focus();
-        } else {
-          const firstElement = _first(popperItemsRef.current?.children);
-          if (firstElement instanceof HTMLElement) {
-            firstElement.focus();
-          }
-        }
-      }, TIMERS.DROPDOWN.IS_OPEN);
+        const selectedItems = dropdownRef.current ? dropdownRef.current.querySelectorAll('.zapp-selected') : [];
+        selectedItems.length > 0 ? selectedItems[0].focus() : popperItemsRef.current && popperItemsRef.current.children[0] && popperItemsRef.current.children[0] instanceof HTMLElement && popperItemsRef.current.children[0].focus();
+      }, 1);
     }
     return () => {
       timeout && clearTimeout(timeout);
     };
   }, [disableAutoFocus, dropdownRef, open]);
   React.useEffect(() => {
+    openRef.current = open;
+    let timeout;
     if (open) {
-      windowObj.document.addEventListener('click', clickOutsidePopper, true);
-      contextMenu && windowObj.document.addEventListener('contextmenu', clickOutsidePopper, true);
+      timeout = setTimeout(() => {
+        windowObj.document.addEventListener('click', clickOutsidePopper, true);
+        contextMenu && windowObj.document.addEventListener('contextmenu', clickOutsidePopper, true);
+      }, 1);
     }
     return () => {
       windowObj.document.removeEventListener('click', clickOutsidePopper, true);
       windowObj.document.removeEventListener('contextmenu', clickOutsidePopper, true);
+      timeout && clearTimeout(timeout);
     };
   }, [open, closePopper, clickOutsidePopper, contextMenu, windowObj.document]);
   React.useEffect(() => {
@@ -10650,23 +10537,24 @@ const Dropdown = /*#__PURE__*/React__namespace.default.forwardRef(function Dropd
     const startSentinelRefElement = startSentinelRef.current;
     const endSentinelRefElement = endSentinelRef.current;
     if (open && !disableAutoFocus) {
-      popperItemRefElement?.focus({
+      popperItemRefElement && popperItemRefElement.focus({
         preventScroll: true
       });
-      startSentinelRefElement?.addEventListener('focus', onStartSentinelFocus);
-      endSentinelRefElement?.addEventListener('focus', onEndSentinelFocus);
+      startSentinelRefElement && startSentinelRefElement.addEventListener('focus', onStartSentinelFocus);
+      endSentinelRefElement && endSentinelRefElement.addEventListener('focus', onEndSentinelFocus);
     }
     return () => {
-      startSentinelRefElement?.removeEventListener('focus', onStartSentinelFocus);
-      endSentinelRefElement?.removeEventListener('focus', onEndSentinelFocus);
+      startSentinelRefElement && startSentinelRefElement.removeEventListener('focus', onStartSentinelFocus);
+      endSentinelRefElement && endSentinelRefElement.removeEventListener('focus', onEndSentinelFocus);
     };
   }, [open, startSentinelRef, endSentinelRef, onStartSentinelFocus, onEndSentinelFocus, disableAutoFocus]);
   const listItemClickHandler = React.useCallback((onClick, keepOpen) => event => {
-    onClick?.(event);
-    if (!multiple && !keepOpen) {
-      closePopper();
-    }
+    onClick && onClick(event);
+    !multiple && !keepOpen && closePopper();
   }, [closePopper, multiple]);
+  const listItemMouseEnterHandler = React.useCallback(id => () => {
+    setCurrentHover(id);
+  }, []);
   const popperListItems = React.useMemo(() => {
     nestedDropdownsRef.current = [];
     if (items) {
@@ -10694,10 +10582,12 @@ const Dropdown = /*#__PURE__*/React__namespace.default.forwardRef(function Dropd
           onClick: listItemClickHandler(onClick, keepOpen),
           keepOpen: keepOpen,
           selected: selected,
+          open: currentHover === id,
           key: id,
           customComponent: customComponent,
           disabled: itemDisabled,
           items: subItems,
+          onMouseEnter: listItemMouseEnterHandler(id),
           selectedBackgroundColor: selectedBackgroundColor,
           itemIconSize: itemIconSize,
           itemTextSize: itemTextSize,
@@ -10712,6 +10602,7 @@ const Dropdown = /*#__PURE__*/React__namespace.default.forwardRef(function Dropd
           key: id,
           customComponent: customComponent,
           disabled: itemDisabled,
+          onMouseEnter: listItemMouseEnterHandler(id),
           selectedBackgroundColor: selectedBackgroundColor,
           itemIconSize: itemIconSize,
           itemTextSize: itemTextSize,
@@ -10720,7 +10611,7 @@ const Dropdown = /*#__PURE__*/React__namespace.default.forwardRef(function Dropd
       });
     }
     return null;
-  }, [items, listItemClickHandler, selectedBackgroundColor, itemIconSize, itemTextSize, itemPaddingBetween]);
+  }, [items, listItemClickHandler, currentHover, listItemMouseEnterHandler, selectedBackgroundColor, itemIconSize, itemTextSize, itemPaddingBetween]);
   const popperListPreventDefaultHandler = React.useCallback(event => {
     preventDefault && event.preventDefault();
   }, [preventDefault]);
@@ -21644,6 +21535,33 @@ var last_1 = last;
 
 var _last = /*@__PURE__*/getDefaultExportFromCjs(last_1);
 
+/**
+ * Gets the first element of `array`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @alias first
+ * @category Array
+ * @param {Array} array The array to query.
+ * @returns {*} Returns the first element of `array`.
+ * @example
+ *
+ * _.head([1, 2, 3]);
+ * // => 1
+ *
+ * _.head([]);
+ * // => undefined
+ */
+
+function head(array) {
+  return (array && array.length) ? array[0] : undefined;
+}
+
+var head_1 = head;
+
+var _head = /*@__PURE__*/getDefaultExportFromCjs(head_1);
+
 var baseSlice = _baseSlice,
     toInteger = toInteger_1;
 
@@ -22063,7 +21981,8 @@ const List = /*#__PURE__*/React__namespace.default.forwardRef(function ListFn(_r
   } = _ref6;
   const selecting = React.useMemo(() => _some(selected, i => !!i), [selected]);
   const listRef = React.useRef(null);
-  const keyEvents = React.useMemo(() => keyboardShortcutsIsDisabled ? [] : getKeyboardPreset('list', undefined, listRef), [listRef, keyboardShortcutsIsDisabled]);
+  const useKeyboardShortcuts = () => undefined;
+  const keyEvents = React.useMemo(() => keyboardShortcutsIsDisabled ? [] : getKeyboardPreset('list', useKeyboardShortcuts, listRef), [listRef, keyboardShortcutsIsDisabled]);
   useKeyboard(listRef, keyEvents);
   return /*#__PURE__*/React__namespace.default.createElement("div", {
     ref: listRef,
@@ -22120,7 +22039,11 @@ const BottomElement = _ref2 => {
     }
   }, [inView, onVisible]);
   return /*#__PURE__*/React__namespace.default.createElement("div", {
-    ref: ref
+    ref: ref,
+    style: {
+      minHeight: '4px',
+      minWidth: '1px'
+    }
   });
 };
 const ListV2 = /*#__PURE__*/React__namespace.default.forwardRef(function ListV2Fn(_ref3, ref) {
@@ -22134,7 +22057,8 @@ const ListV2 = /*#__PURE__*/React__namespace.default.forwardRef(function ListV2F
     ...rest
   } = _ref3;
   const listRef = useCombinedRefs(ref);
-  const keyEvents = React.useMemo(() => keyboardShortcutsIsDisabled ? [] : getKeyboardPreset('list', undefined, listRef), [listRef, keyboardShortcutsIsDisabled]);
+  const useKeyboardShortcuts = () => undefined;
+  const keyEvents = React.useMemo(() => keyboardShortcutsIsDisabled ? [] : getKeyboardPreset('list', useKeyboardShortcuts, listRef), [listRef, keyboardShortcutsIsDisabled]);
   useKeyboard(listRef, keyEvents);
   const listItems = React.useMemo(() => children.map(child => /*#__PURE__*/React__namespace.default.cloneElement(child, {
     listRef,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@zextras/carbonio-design-system",
-	"version": "3.0.0",
+	"version": "3.0.1-devel.1696932777043",
 	"description": "An awesome UI for Zextras Projects.",
 	"main": "dist/zapp-ui.bundle.js",
 	"types": "dist/zapp-ui.bundle.d.ts",