@zextras/carbonio-design-system 0.4.0 → 0.4.1

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 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.
 
+### [0.4.1](https://github.com/Zextras/carbonio-design-system/compare/v0.4.0...v0.4.1) (2022-09-27)
+
+
+### Features
+
+* **Dropdown:** add tooltip on disabled items ([4dce432](https://github.com/Zextras/carbonio-design-system/commit/4dce43254a6221e8c6e93be9aaab53ae4aa3f83b)), closes [#124](https://github.com/Zextras/carbonio-design-system/issues/124)
+
+
+### Bug Fixes
+
+* **ChipInput:** hide scrollbar when not in overflow ([2da4ea6](https://github.com/Zextras/carbonio-design-system/commit/2da4ea6b18f7cd124a4dcb84d2ec9f28adf23965))
+* **Dropdown:** align content to flex-start when item has subitems ([6d755a5](https://github.com/Zextras/carbonio-design-system/commit/6d755a5d681f8f715908ebf59118a3ad2149662c))
+* **Dropdown:** prevent dropdown from closing before calling click callback of nested items ([e8cea00](https://github.com/Zextras/carbonio-design-system/commit/e8cea004d7cf64a542dac0bce774201244801c97))
+* **Modal:** avoid button text overflow, if is it possible, when optionalFooter is provided ([3a10888](https://github.com/Zextras/carbonio-design-system/commit/3a10888e9597801a0dc04cbfa3f156b6a11b3377))
+
 ## [0.4.0](https://github.com/Zextras/carbonio-design-system/compare/v0.3.10...v0.4.0) (2022-09-02)
 
 

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

@@ -734,6 +734,7 @@ export declare interface DropdownItem {
     disabled?: boolean;
     items?: Array<DropdownItem>;
     keepOpen?: boolean;
+    tooltipLabel?: string | undefined;
 }
 
 export declare interface DropdownProps extends Omit<HTMLAttributes<HTMLDivElement>, 'contextMenu'> {

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"
@@ -21418,9 +21493,17 @@ function ListItemContent(_ref2) {
     disabled,
     itemIconSize,
     itemTextSize,
-    itemPaddingBetween
+    itemPaddingBetween,
+    tooltipLabel
   } = _ref2;
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, icon && /*#__PURE__*/React__default["default"].createElement(Padding, {
+  return /*#__PURE__*/React__default["default"].createElement(Tooltip, {
+    disabled: !disabled || !tooltipLabel,
+    label: tooltipLabel,
+    placement: "bottom-end"
+  }, /*#__PURE__*/React__default["default"].createElement(Container, {
+    orientation: "horizontal",
+    mainAlignment: "flex-start"
+  }, icon && /*#__PURE__*/React__default["default"].createElement(Padding, {
     right: itemPaddingBetween
   }, /*#__PURE__*/React__default["default"].createElement(Icon, {
     icon: icon,
@@ -21434,7 +21517,7 @@ function ListItemContent(_ref2) {
     weight: selected ? 'bold' : 'regular',
     color: disabled ? 'secondary.regular' : 'text',
     disabled: disabled
-  }, label));
+  }, label)));
 }
 
 function PopperListItem(_ref3) {
@@ -21450,6 +21533,7 @@ function PopperListItem(_ref3) {
     itemTextSize,
     keepOpen,
     itemPaddingBetween,
+    tooltipLabel,
     ...rest
   } = _ref3;
   const itemRef = React.useRef(null);
@@ -21489,7 +21573,8 @@ function PopperListItem(_ref3) {
     disabled: disabled,
     itemIconSize: itemIconSize,
     itemTextSize: itemTextSize,
-    itemPaddingBetween: itemPaddingBetween
+    itemPaddingBetween: itemPaddingBetween,
+    tooltipLabel: tooltipLabel
   }));
 }
 
@@ -21508,6 +21593,8 @@ function NestListItem(_ref4) {
     itemTextSize,
     itemPaddingBetween,
     keepOpen,
+    dropdownListRef,
+    tooltipLabel,
     ...rest
   } = _ref4;
   const itemRef = React.useRef(null);
@@ -21538,10 +21625,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,
@@ -21549,12 +21637,14 @@ function NestListItem(_ref4) {
     disabled: disabled,
     itemIconSize: itemIconSize,
     itemTextSize: itemTextSize,
-    itemPaddingBetween: itemPaddingBetween
+    itemPaddingBetween: itemPaddingBetween,
+    tooltipLabel: tooltipLabel
   }), /*#__PURE__*/React__default["default"].createElement(Icon, {
     size: itemIconSize,
     icon: "ChevronRight",
     style: {
-      alignSelf: 'flex-end'
+      marginRight: 0,
+      marginLeft: 'auto'
     }
   }))));
 }
@@ -21655,6 +21745,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 +21760,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 +21804,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 +21916,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]);
@@ -21959,7 +22065,7 @@ const ContainerEl$2 = styled__default["default"](Container).withConfig({
 const ScrollContainer = styled__default["default"].div.withConfig({
   displayName: "ChipInput__ScrollContainer",
   componentId: "sc-1y52mik-1"
-})(["display:flex;flex:1 1 auto;justify-content:flex-start;align-items:center;width:auto;gap:8px;flex-wrap:", ";overflow-x:auto;overflow-x:overlay;-ms-overflow-style:", ";scrollbar-width:", ";&::-webkit-scrollbar{display:", ";}margin-top:", ";max-height:", ";overflow-y:scroll;"], _ref6 => {
+})(["display:flex;flex:1 1 auto;justify-content:flex-start;align-items:center;width:auto;gap:8px;flex-wrap:", ";overflow-x:auto;overflow-x:overlay;-ms-overflow-style:", ";scrollbar-width:", ";&::-webkit-scrollbar{display:", ";}margin-top:", ";max-height:", ";overflow-y:auto;"], _ref6 => {
   let {
     wrap
   } = _ref6;
@@ -23418,81 +23524,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"
@@ -33339,7 +33370,12 @@ const OptionalFooterContainer = styled__default["default"](Container).withConfig
 const ButtonContainer = styled__default["default"](Container).withConfig({
   displayName: "Modal__ButtonContainer",
   componentId: "sc-1lygj44-3"
-})(["min-width:1px;flex-basis:auto;flex-grow:1;"]);
+})(["min-width:1px;flex-basis:auto;flex-grow:1;", ""], _ref3 => {
+  let {
+    $pushLeftFirstChild
+  } = _ref3;
+  return $pushLeftFirstChild && styled.css(["> *{&:first-child{margin-right:auto;}}"]);
+});
 const DismissButton = styled__default["default"](Button$1).withConfig({
   displayName: "Modal__DismissButton",
   componentId: "sc-1lygj44-4"
@@ -33349,7 +33385,7 @@ const ConfirmButton = styled__default["default"](Button$1).withConfig({
   componentId: "sc-1lygj44-5"
 })(["flex-basis:auto;min-width:100px;flex-shrink:1;"]);
 
-const ModalFooter = _ref3 => {
+const ModalFooter = _ref4 => {
   let {
     type,
     centered,
@@ -33363,7 +33399,7 @@ const ModalFooter = _ref3 => {
     copyLabel,
     optionalFooter,
     onCopyClipboard
-  } = _ref3;
+  } = _ref4;
   const secondaryButton = React.useMemo(() => {
     let button;
 
@@ -33388,25 +33424,26 @@ const ModalFooter = _ref3 => {
 
     return button;
   }, [type, onCopyClipboard, copyLabel, onSecondaryAction, secondaryActionLabel, dismissLabel, onClose]);
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, optionalFooter && /*#__PURE__*/React__default["default"].createElement(OptionalFooterContainer, {
-    padding: centered ? {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, optionalFooter && centered && /*#__PURE__*/React__default["default"].createElement(OptionalFooterContainer, {
+    padding: {
       bottom: 'large'
-    } : {
-      right: 'large'
     },
     orientation: "horizontal",
     mainAlignment: "flex-start"
   }, optionalFooter), /*#__PURE__*/React__default["default"].createElement(ButtonContainer, {
     orientation: "horizontal",
-    mainAlignment: centered ? 'center' : 'flex-end'
-  }, secondaryButton, (onConfirm || onClose) && /*#__PURE__*/React__default["default"].createElement(ConfirmButton, {
+    mainAlignment: centered ? 'center' : 'flex-end',
+    $pushLeftFirstChild: optionalFooter != null && !centered
+  }, !centered && optionalFooter, !centered && /*#__PURE__*/React__default["default"].createElement(Padding, {
+    right: "large"
+  }), secondaryButton, (onConfirm || onClose) && /*#__PURE__*/React__default["default"].createElement(ConfirmButton, {
     color: confirmColor,
     onClick: onConfirm || onClose,
     label: confirmLabel
   })));
 };
 
-const Modal = /*#__PURE__*/React__default["default"].forwardRef(function ModalFn(_ref4, ref) {
+const Modal = /*#__PURE__*/React__default["default"].forwardRef(function ModalFn(_ref5, ref) {
   let {
     background = 'gray6',
     type = 'default',
@@ -33431,7 +33468,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function ModalFn
     disablePortal = false,
     zIndex = 999,
     ...rest
-  } = _ref4;
+  } = _ref5;
   const [delayedOpen, setDelayedOpen] = React.useState(false);
   const {
     windowObj

package/package.json

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