@zextras/carbonio-design-system 0.4.0-devel.1663244158706 → 0.4.0-devel.1663244218709

package/dist/zapp-ui.bundle.js

@@ -21398,6 +21398,81 @@ const Chip = /*#__PURE__*/React__default["default"].forwardRef(function ChipFn(_
   }, actionItems))));
 });
 
+var baseEach = _baseEach;
+
+/**
+ * The base implementation of `_.some` without support for iteratee shorthands.
+ *
+ * @private
+ * @param {Array|Object} collection The collection to iterate over.
+ * @param {Function} predicate The function invoked per iteration.
+ * @returns {boolean} Returns `true` if any element passes the predicate check,
+ *  else `false`.
+ */
+function baseSome$1(collection, predicate) {
+  var result;
+
+  baseEach(collection, function(value, index, collection) {
+    result = predicate(value, index, collection);
+    return !result;
+  });
+  return !!result;
+}
+
+var _baseSome = baseSome$1;
+
+var arraySome = _arraySome,
+    baseIteratee = _baseIteratee,
+    baseSome = _baseSome,
+    isArray = isArray_1,
+    isIterateeCall = _isIterateeCall;
+
+/**
+ * Checks if `predicate` returns truthy for **any** element of `collection`.
+ * Iteration is stopped once `predicate` returns truthy. The predicate is
+ * invoked with three arguments: (value, index|key, collection).
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Collection
+ * @param {Array|Object} collection The collection to iterate over.
+ * @param {Function} [predicate=_.identity] The function invoked per iteration.
+ * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.
+ * @returns {boolean} Returns `true` if any element passes the predicate check,
+ *  else `false`.
+ * @example
+ *
+ * _.some([null, 0, 'yes', false], Boolean);
+ * // => true
+ *
+ * var users = [
+ *   { 'user': 'barney', 'active': true },
+ *   { 'user': 'fred',   'active': false }
+ * ];
+ *
+ * // The `_.matches` iteratee shorthand.
+ * _.some(users, { 'user': 'barney', 'active': false });
+ * // => false
+ *
+ * // The `_.matchesProperty` iteratee shorthand.
+ * _.some(users, ['active', false]);
+ * // => true
+ *
+ * // The `_.property` iteratee shorthand.
+ * _.some(users, 'active');
+ * // => true
+ */
+function some(collection, predicate, guard) {
+  var func = isArray(collection) ? arraySome : baseSome;
+  if (guard && isIterateeCall(collection, predicate, guard)) {
+    predicate = undefined;
+  }
+  return func(collection, baseIteratee(predicate));
+}
+
+var some_1 = some;
+
 const ContainerEl$3 = styled__default["default"](Container).withConfig({
   displayName: "Dropdown__ContainerEl",
   componentId: "sc-1jmq2vf-0"
@@ -21508,6 +21583,7 @@ function NestListItem(_ref4) {
     itemTextSize,
     itemPaddingBetween,
     keepOpen,
+    dropdownListRef,
     ...rest
   } = _ref4;
   const itemRef = React.useRef(null);
@@ -21538,10 +21614,11 @@ function NestListItem(_ref4) {
     selectedBackgroundColor: selectedBackgroundColor,
     itemIconSize: itemIconSize,
     itemTextSize: itemTextSize,
-    itemPaddingBetween: itemPaddingBetween
+    itemPaddingBetween: itemPaddingBetween,
+    dropdownListRef: dropdownListRef
   }, /*#__PURE__*/React__default["default"].createElement(Container, {
     orientation: "horizontal",
-    mainAlignment: "space-between"
+    mainAlignment: "flex-start"
   }, customComponent || /*#__PURE__*/React__default["default"].createElement(ListItemContent, {
     icon: icon,
     label: label,
@@ -21554,7 +21631,8 @@ function NestListItem(_ref4) {
     size: itemIconSize,
     icon: "ChevronRight",
     style: {
-      alignSelf: 'flex-end'
+      marginRight: 0,
+      marginLeft: 'auto'
     }
   }))));
 }
@@ -21655,6 +21733,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function Drop
   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);
@@ -21669,6 +21748,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function Drop
   const closePopper = React.useCallback(e => {
     e && e.stopPropagation();
     setOpen(forceOpen);
+    setCurrentHover(null);
     !disableRestoreFocus && innerTriggerRef.current && innerTriggerRef.current.focus();
     onClose && onClose();
   }, [disableRestoreFocus, forceOpen, innerTriggerRef, onClose]);
@@ -21712,7 +21792,12 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function Drop
   const clickOutsidePopper = React.useCallback(e => {
     var _innerTriggerRef$curr, _e$composedPath;
 
-    if (dropdownRef.current && e.target !== dropdownRef.current && !dropdownRef.current.contains(e.target) && innerTriggerRef.current && e.target !== innerTriggerRef.current && !((_innerTriggerRef$curr = innerTriggerRef.current) !== null && _innerTriggerRef$curr !== void 0 && _innerTriggerRef$curr.contains(e.target)) && // check if the attribute is in the event path
+    const clickedOnDropdown = dropdownRef.current && (e.target === dropdownRef.current || dropdownRef.current.contains(e.target));
+    const clickedOnTrigger = innerTriggerRef.current && (e.target === innerTriggerRef.current || ((_innerTriggerRef$curr = innerTriggerRef.current) === null || _innerTriggerRef$curr === void 0 ? void 0 : _innerTriggerRef$curr.contains(e.target)));
+
+    const clickedOnNestedItem = nestedDropdownsRef.current && some_1(nestedDropdownsRef.current, nestedItemRef => nestedItemRef.current && nestedItemRef.current.contains(e.target));
+
+    if (!clickedOnDropdown && !clickedOnTrigger && !clickedOnNestedItem && // check if the attribute is in the event path
     !find_1(((_e$composedPath = e.composedPath) === null || _e$composedPath === void 0 ? void 0 : _e$composedPath.call(e)) ?? [], el => el.hasAttribute && el.hasAttribute('data-keep-open'))) {
       closePopper();
     }
@@ -21819,56 +21904,65 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function Drop
   const listItemMouseEnterHandler = React.useCallback(id => () => {
     setCurrentHover(id);
   }, []);
-  const popperListItems = React.useMemo(() => items && items.map((_ref15, index) => {
-    let {
-      id,
-      icon,
-      label,
-      click,
-      selected,
-      customComponent,
-      items: subItems,
-      disabled: itemDisabled,
-      type,
-      keepOpen,
-      ...itemProps
-    } = _ref15;
-    return type === 'divider' && /*#__PURE__*/React__default["default"].createElement(Divider, {
-      key: id ?? `divider-${index}`
-    }) || subItems && /*#__PURE__*/React__default["default"].createElement(NestListItem, _extends({
-      icon: icon,
-      label: label,
-      click: listItemClickHandler(click, 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,
-      itemPaddingBetween: itemPaddingBetween
-    }, itemProps)) || /*#__PURE__*/React__default["default"].createElement(PopperListItem, _extends({
-      icon: icon,
-      label: label,
-      click: listItemClickHandler(click, keepOpen),
-      keepOpen: keepOpen,
-      selected: selected,
-      key: id,
-      customComponent: customComponent,
-      disabled: itemDisabled,
-      onMouseEnter: () => {
-        setCurrentHover(id);
-      },
-      selectedBackgroundColor: selectedBackgroundColor,
-      itemIconSize: itemIconSize,
-      itemTextSize: itemTextSize,
-      itemPaddingBetween: itemPaddingBetween
-    }, itemProps));
-  }), [items, listItemClickHandler, currentHover, listItemMouseEnterHandler, selectedBackgroundColor, itemIconSize, itemTextSize, itemPaddingBetween]);
+  const popperListItems = React.useMemo(() => {
+    nestedDropdownsRef.current = [];
+
+    if (items) {
+      return items.map((_ref15, index) => {
+        let {
+          id,
+          icon,
+          label,
+          click,
+          selected,
+          customComponent,
+          items: subItems,
+          disabled: itemDisabled,
+          type,
+          keepOpen,
+          ...itemProps
+        } = _ref15;
+        const nestedRef = /*#__PURE__*/React__default["default"].createRef();
+        nestedDropdownsRef.current.push(nestedRef);
+        return type === 'divider' && /*#__PURE__*/React__default["default"].createElement(Divider, {
+          key: id ?? `divider-${index}`
+        }) || subItems && /*#__PURE__*/React__default["default"].createElement(NestListItem, _extends({
+          icon: icon,
+          label: label,
+          click: listItemClickHandler(click, 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,
+          itemPaddingBetween: itemPaddingBetween,
+          dropdownListRef: nestedRef
+        }, itemProps)) || /*#__PURE__*/React__default["default"].createElement(PopperListItem, _extends({
+          icon: icon,
+          label: label,
+          click: listItemClickHandler(click, keepOpen),
+          keepOpen: keepOpen,
+          selected: selected,
+          key: id,
+          customComponent: customComponent,
+          disabled: itemDisabled,
+          onMouseEnter: listItemMouseEnterHandler(id),
+          selectedBackgroundColor: selectedBackgroundColor,
+          itemIconSize: itemIconSize,
+          itemTextSize: itemTextSize,
+          itemPaddingBetween: itemPaddingBetween
+        }, itemProps));
+      });
+    }
+
+    return null;
+  }, [items, listItemClickHandler, currentHover, listItemMouseEnterHandler, selectedBackgroundColor, itemIconSize, itemTextSize, itemPaddingBetween]);
   const popperListPreventDefaultHandler = React.useCallback(event => {
     preventDefault && event.preventDefault();
   }, [preventDefault]);
@@ -23418,81 +23512,6 @@ const SearchInput = /*#__PURE__*/React__default["default"].forwardRef(function S
   })));
 });
 
-var baseEach = _baseEach;
-
-/**
- * The base implementation of `_.some` without support for iteratee shorthands.
- *
- * @private
- * @param {Array|Object} collection The collection to iterate over.
- * @param {Function} predicate The function invoked per iteration.
- * @returns {boolean} Returns `true` if any element passes the predicate check,
- *  else `false`.
- */
-function baseSome$1(collection, predicate) {
-  var result;
-
-  baseEach(collection, function(value, index, collection) {
-    result = predicate(value, index, collection);
-    return !result;
-  });
-  return !!result;
-}
-
-var _baseSome = baseSome$1;
-
-var arraySome = _arraySome,
-    baseIteratee = _baseIteratee,
-    baseSome = _baseSome,
-    isArray = isArray_1,
-    isIterateeCall = _isIterateeCall;
-
-/**
- * Checks if `predicate` returns truthy for **any** element of `collection`.
- * Iteration is stopped once `predicate` returns truthy. The predicate is
- * invoked with three arguments: (value, index|key, collection).
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Collection
- * @param {Array|Object} collection The collection to iterate over.
- * @param {Function} [predicate=_.identity] The function invoked per iteration.
- * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.
- * @returns {boolean} Returns `true` if any element passes the predicate check,
- *  else `false`.
- * @example
- *
- * _.some([null, 0, 'yes', false], Boolean);
- * // => true
- *
- * var users = [
- *   { 'user': 'barney', 'active': true },
- *   { 'user': 'fred',   'active': false }
- * ];
- *
- * // The `_.matches` iteratee shorthand.
- * _.some(users, { 'user': 'barney', 'active': false });
- * // => false
- *
- * // The `_.matchesProperty` iteratee shorthand.
- * _.some(users, ['active', false]);
- * // => true
- *
- * // The `_.property` iteratee shorthand.
- * _.some(users, 'active');
- * // => true
- */
-function some(collection, predicate, guard) {
-  var func = isArray(collection) ? arraySome : baseSome;
-  if (guard && isIterateeCall(collection, predicate, guard)) {
-    predicate = undefined;
-  }
-  return func(collection, baseIteratee(predicate));
-}
-
-var some_1 = some;
-
 const Label = styled__default["default"](Text).withConfig({
   displayName: "Select__Label",
   componentId: "sc-1l1iaf2-0"

package/package.json

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