@zextras/carbonio-design-system 1.2.0 → 2.0.0

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 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.
 
+## [2.0.0](https://github.com/Zextras/carbonio-design-system/compare/v1.2.0...v2.0.0) (2023-04-17)
+
+
+### ⚠ BREAKING CHANGES
+
+* in Dropdown Component, items prop elements must replace click with onClick
+* in Breadcrumbs component, crumbs prop elements must replace click with onClick
+* **Button:** set main ref to external grid container and add buttonRef prop
+to receive the ref for the main button element, in order to make events fire also on
+disabled element if registered on the main ref.
+
+### Bug Fixes
+
+* **Button:** change ref destination to make events fire on disabled button ([0499e78](https://github.com/Zextras/carbonio-design-system/commit/0499e78e154341a4a3c090d6a46a435dd63fc3d7)), closes [#173](https://github.com/Zextras/carbonio-design-system/issues/173)
+* update default colors for input components ([03cc6a5](https://github.com/Zextras/carbonio-design-system/commit/03cc6a512fc9327969be6be5c7e1da9ffab94e17)), closes [#180](https://github.com/Zextras/carbonio-design-system/issues/180)
+* wrap button to a new line to keep text readable ([b9ab57a](https://github.com/Zextras/carbonio-design-system/commit/b9ab57aef08420b253398802d24a4c90cb06f191)), closes [#179](https://github.com/Zextras/carbonio-design-system/issues/179)
+
+
+* remove deprecated click prop in favor of onClick in DropdownItem ([b8fadc6](https://github.com/Zextras/carbonio-design-system/commit/b8fadc6a6a2b68b0ec6315d466f29f107f2f4a9c)), closes [#172](https://github.com/Zextras/carbonio-design-system/issues/172)
+
 ## [1.2.0](https://github.com/Zextras/carbonio-design-system/compare/v1.1.0...v1.2.0) (2023-02-28)
 
 

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

@@ -147,7 +147,7 @@ export declare interface BreadcrumbsProps extends HTMLAttributes<HTMLDivElement>
     dropdownProps?: Omit<DropdownProps, 'items' | 'children'>;
 }
 
-export declare const Button: React_2.ForwardRefExoticComponent<ButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
+export declare const Button: React_2.ForwardRefExoticComponent<ButtonProps & React_2.RefAttributes<HTMLDivElement>>;
 
 declare type ButtonColorsByType = ({
     type?: 'default' | 'outlined';
@@ -224,6 +224,8 @@ declare type ButtonPropsInternal = {
     width?: ButtonWidth;
     /** min width of the button */
     minWidth?: string;
+    /** Ref for the button element */
+    buttonRef?: React_2.Ref<HTMLButtonElement> | null;
 } & ({
     /** Size variant of the button */
     size?: 'medium' | 'large' | 'extralarge';
@@ -773,12 +775,6 @@ export declare interface DropdownItem {
     id: string;
     label: string;
     icon?: string;
-    /**
-     * @deprecated
-     * Use onClick instead
-     * TODO(BREAKING CHANGE): remove click prop
-     */
-    click?: (e: React_2.SyntheticEvent<HTMLElement> | KeyboardEvent) => void;
     onClick?: (e: React_2.SyntheticEvent<HTMLElement> | KeyboardEvent) => void;
     selected?: boolean;
     customComponent?: React_2.ReactNode;
@@ -883,7 +879,7 @@ export declare interface EmailComposerInputProps extends HTMLAttributes<HTMLDivE
     onChange?: (ev: React_2.ChangeEvent<HTMLInputElement>) => void;
 }
 
-export declare const FileLoader: React_2.ForwardRefExoticComponent<FileLoaderProps & React_2.RefAttributes<HTMLButtonElement>>;
+export declare const FileLoader: React_2.ForwardRefExoticComponent<FileLoaderProps & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare type FileLoaderProps = IconButtonProps & {
     onChange?: (event: React_2.ChangeEvent<HTMLInputElement>, files: FileList | null) => void;
@@ -971,7 +967,7 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
 
  export declare const Icon: StyledComponent<React_2.ForwardRefExoticComponent<IconComponentProps & React_2.RefAttributes<SVGSVGElement>>, DefaultTheme, Required<Pick<IconProps, "color" | "size">> & IconProps & React_2.SVGAttributes<SVGSVGElement>, "color" | "size">;
 
- export declare const IconButton: React_2.ForwardRefExoticComponent<IconButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
+ export declare const IconButton: React_2.ForwardRefExoticComponent<IconButtonProps & React_2.RefAttributes<HTMLDivElement>>;
 
  export declare type IconButtonProps = ButtonProps & {
      /** Color of the icon */

package/dist/zapp-ui.bundle.js

@@ -7759,9 +7759,10 @@ const Button$1 = /*#__PURE__*/React__default["default"].forwardRef(function Butt
     shape = 'regular',
     secondaryAction,
     minWidth,
+    buttonRef = null,
     ...rest
   } = _ref22;
-  const buttonRef = useCombinedRefs(ref);
+  const innerButtonRef = useCombinedRefs(buttonRef);
   const clickHandler = React.useCallback(e => {
     if (!disabled && onClick && !e.defaultPrevented) {
       onClick(e);
@@ -7774,7 +7775,7 @@ const Button$1 = /*#__PURE__*/React__default["default"].forwardRef(function Butt
     e.preventDefault();
   }, [secondaryAction]);
   const keyEvents = React.useMemo(() => getKeyboardPreset('button', clickHandler), [clickHandler]);
-  useKeyboard(buttonRef, keyEvents);
+  useKeyboard(innerButtonRef, keyEvents);
   const colors = React.useMemo(() => getColors(type, {
     type,
     ...rest
@@ -7782,7 +7783,8 @@ const Button$1 = /*#__PURE__*/React__default["default"].forwardRef(function Butt
   return /*#__PURE__*/React__default["default"].createElement(StyledGrid, {
     width: width,
     minWidth: minWidth,
-    padding: SIZES$2[size].padding
+    padding: SIZES$2[size].padding,
+    ref: ref
   }, /*#__PURE__*/React__default["default"].createElement(StyledButton, _extends({}, rest, {
     backgroundColor: colors.backgroundColor,
     color: colors.color,
@@ -7794,7 +7796,7 @@ const Button$1 = /*#__PURE__*/React__default["default"].forwardRef(function Butt
     gap: SIZES$2[size].gap,
     iconPlacement: iconPlacement,
     onClick: clickHandler,
-    ref: buttonRef,
+    ref: innerButtonRef,
     width: width,
     minWidth: minWidth
   }), icon && /*#__PURE__*/React__default["default"].createElement(StyledIcon$1, {
@@ -9755,6 +9757,14 @@ function usePrevious(value) {
   return ref.current;
 }
 
+/*
+ * SPDX-FileCopyrightText: 2023 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+const INPUT_BACKGROUND_COLOR = 'gray5';
+const INPUT_DIVIDER_COLOR = 'gray3';
+
 const StyledIconButton = styled__default["default"](Button$1).withConfig({
   displayName: "IconButton__StyledIconButton",
   componentId: "sc-1bl28kg-0"
@@ -10607,9 +10617,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function Drop
           id,
           icon,
           label,
-          click,
-          onClick = click,
-          // TODO: remove default assignation once click prop will be removed from DropdownItem interface
+          onClick,
           selected,
           customComponent,
           items: subItems,
@@ -11022,7 +11030,7 @@ const ChipInput = /*#__PURE__*/React__default["default"].forwardRef(function Chi
     onInputType,
     onInputTypeDebounce = 300,
     onAdd = DefaultOnAdd,
-    background = 'gray6',
+    background = INPUT_BACKGROUND_COLOR,
     confirmChipOnBlur = true,
     confirmChipOnSpace = true,
     separators = ['Enter', 'NumpadEnter', 'Comma', 'Space'],
@@ -11041,7 +11049,7 @@ const ChipInput = /*#__PURE__*/React__default["default"].forwardRef(function Chi
     errorBackgroundColor,
     disableOptions = true,
     singleSelection = false,
-    bottomBorderColor = 'gray4',
+    bottomBorderColor = INPUT_DIVIDER_COLOR,
     dropdownMaxHeight,
     description,
     ChipComponent,
@@ -11185,8 +11193,8 @@ const ChipInput = /*#__PURE__*/React__default["default"].forwardRef(function Chi
       }
       return map_1(options, o => ({
         ...o,
-        click: event => {
-          o.click && o.click(event);
+        onClick: event => {
+          o.onClick && o.onClick(event);
           onOptionClick(o.value ? o.value : o.label);
         }
       }));
@@ -11758,8 +11766,8 @@ const Input = /*#__PURE__*/React__default["default"].forwardRef(function InputFn
   let {
     autoFocus = false,
     autoComplete = 'off',
-    borderColor = 'gray2',
-    backgroundColor = 'gray6',
+    borderColor = INPUT_DIVIDER_COLOR,
+    backgroundColor = INPUT_BACKGROUND_COLOR,
     defaultValue,
     disabled = false,
     textColor = 'text',
@@ -12269,7 +12277,7 @@ const DefaultLabelFactory = _ref6 => {
     icon: open ? 'ArrowUp' : 'ArrowDown',
     color: disabled && 'gray2' || (open || focus) && 'primary' || 'secondary'
   })), /*#__PURE__*/React__default["default"].createElement(Divider, {
-    color: open || focus ? 'primary' : 'gray2'
+    color: open || focus ? 'primary' : INPUT_DIVIDER_COLOR
   }));
 };
 const TabContainer = styled__default["default"](Container).withConfig({
@@ -12336,7 +12344,7 @@ function selectedReducer$1(state, action) {
 }
 const Select = /*#__PURE__*/React__default["default"].forwardRef(function SelectFn(_ref7, ref) {
   let {
-    background = 'gray5',
+    background = INPUT_BACKGROUND_COLOR,
     disabled = false,
     items = [],
     label,
@@ -12385,7 +12393,7 @@ const Select = /*#__PURE__*/React__default["default"].forwardRef(function Select
       });
     }
   }, [isControlled, multiple, onChange, selected]);
-  const mappedItems = React.useMemo(() => items.map((item, index) => {
+  const mappedItems = React.useMemo(() => map_1(items, (item, index) => {
     const isSelected = some_1(selected, {
       value: item.value
     });
@@ -12393,7 +12401,7 @@ const Select = /*#__PURE__*/React__default["default"].forwardRef(function Select
       id: `${index}-${item.label}`,
       label: item.label,
       icon: showCheckbox && (isSelected && 'CheckmarkSquare' || 'Square') || '',
-      click: clickItemHandler(item, isSelected),
+      onClick: clickItemHandler(item, isSelected),
       selected: isSelected,
       disabled: item.disabled,
       customComponent: item.customComponent
@@ -12430,7 +12438,7 @@ const Select = /*#__PURE__*/React__default["default"].forwardRef(function Select
       id: 'all',
       label: i18nAllLabel,
       icon: showCheckbox && (isSelected && 'CheckmarkSquare' || 'Square') || '',
-      click: toggleSelectAll(isSelected),
+      onClick: toggleSelectAll(isSelected),
       selected: isSelected
     }, ...mappedItems];
   }, [multiple, items, selected, i18nAllLabel, showCheckbox, toggleSelectAll, mappedItems]);
@@ -21633,7 +21641,7 @@ const DateTimePicker = /*#__PURE__*/React__default["default"].forwardRef(functio
     enableChips,
     chipProps,
     CustomComponent,
-    backgroundColor = 'gray4',
+    backgroundColor = INPUT_BACKGROUND_COLOR,
     errorLabel = 'Error',
     isClearable = false,
     onChange,
@@ -22008,9 +22016,9 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef(function Text
     textAreaRef = null,
     label,
     description,
-    backgroundColor = 'gray5',
+    backgroundColor = INPUT_BACKGROUND_COLOR,
     textColor = 'text',
-    borderColor = 'gray2',
+    borderColor = INPUT_DIVIDER_COLOR,
     ...props
   } = _ref14;
   const {
@@ -22731,7 +22739,7 @@ const Breadcrumbs = /*#__PURE__*/React__default["default"].forwardRef(function B
   }, "\u2026")))), map_1(visibleCrumbs, (_ref3, index) => {
     let {
       label,
-      click,
+      onClick,
       id,
       ...crumbProps
     } = _ref3;
@@ -22741,7 +22749,7 @@ const Breadcrumbs = /*#__PURE__*/React__default["default"].forwardRef(function B
       color: index === visibleCrumbs.length - 1 ? 'text' : 'secondary'
     }), /*#__PURE__*/React__default["default"].createElement(CrumbPadding, _extends({
       all: "extrasmall",
-      onClick: click
+      onClick: onClick
     }, crumbProps), /*#__PURE__*/React__default["default"].createElement(Text, {
       size: "large",
       color: index === visibleCrumbs.length - 1 ? 'text' : 'secondary'
@@ -24399,7 +24407,7 @@ function useScreenMode() {
 const SnackContainer = styled__default["default"](Container).withConfig({
   displayName: "Snackbar__SnackContainer",
   componentId: "sc-p9v4vn-0"
-})(["position:fixed;box-shadow:0 0 0.25rem 0 ", ";user-select:none;z-index:", ";", ";", ";"], _ref => {
+})(["position:fixed;box-shadow:0 0 0.25rem 0 ", ";user-select:none;z-index:", ";right:0;bottom:5vh;", ";"], _ref => {
   let {
     theme
   } = _ref;
@@ -24411,16 +24419,9 @@ const SnackContainer = styled__default["default"](Container).withConfig({
   return $zIndex;
 }, _ref3 => {
   let {
-    $screenMode,
-    theme
+    $screenMode
   } = _ref3;
-  return $screenMode === 'desktop' && styled.css(["right:0;bottom:5vh;max-width:25rem;min-width:calc(20rem - ", " - ", ");"], theme.sizes.padding.small, theme.sizes.padding.small);
-}, _ref4 => {
-  let {
-    $screenMode,
-    theme
-  } = _ref4;
-  return $screenMode === 'mobile' && styled.css(["right:50%;transform:translateX(50%);bottom:", ";min-width:calc(20rem - ", " - ", ");max-width:calc(100% - ", " - ", ");"], theme.sizes.padding.small, theme.sizes.padding.small, theme.sizes.padding.small, theme.sizes.padding.small, theme.sizes.padding.small);
+  return $screenMode === 'mobile' && styled.css(["right:50%;transform:translateX(50%);"]);
 });
 const icons = {
   success: 'Checkmark',
@@ -24428,7 +24429,7 @@ const icons = {
   warning: 'AlertTriangleOutline',
   error: 'Close'
 };
-const Snackbar = /*#__PURE__*/React__default["default"].forwardRef(function SnackbarFn(_ref5, ref) {
+const Snackbar = /*#__PURE__*/React__default["default"].forwardRef(function SnackbarFn(_ref4, ref) {
   let {
     open = false,
     type = 'info',
@@ -24444,7 +24445,7 @@ const Snackbar = /*#__PURE__*/React__default["default"].forwardRef(function Snac
     disablePortal = false,
     singleLine = false,
     ...rest
-  } = _ref5;
+  } = _ref4;
   const screenMode = useScreenMode(target);
   const handleClick = React.useCallback(() => {
     onActionClick ? onActionClick() : onClose && onClose();
@@ -24466,44 +24467,56 @@ const Snackbar = /*#__PURE__*/React__default["default"].forwardRef(function Snac
   }, /*#__PURE__*/React__default["default"].createElement(SnackContainer, _extends({
     $screenMode: screenMode,
     orientation: "horizontal",
-    mainAlignment: "space-between",
+    mainAlignment: "flex-start",
     background: type,
     height: "auto",
     width: "auto",
     $zIndex: zIndex,
-    "data-testid": "snackbar"
-  }, rest), /*#__PURE__*/React__default["default"].createElement(Row, {
-    mainAlignment: "flex-start",
-    takeAvailableSpace: true,
+    "data-testid": "snackbar",
     padding: {
-      top: 'small',
-      bottom: 'small',
-      left: 'small'
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+      top: '0.5rem',
+      right: '0.5rem',
+      bottom: '0.5rem',
+      left: '1.5rem'
+    },
+    gap: '1rem',
+    maxWidth: screenMode === 'mobile' ? '100%' : '40%'
+  }, rest), /*#__PURE__*/React__default["default"].createElement(Icon, {
     size: "large",
     icon: icons[type],
     color: "gray6"
-  }), /*#__PURE__*/React__default["default"].createElement(Padding, {
-    left: "medium",
-    right: "medium",
-    style: {
-      flexBasis: 0,
-      flexGrow: 1,
-      minWidth: '0.0625rem'
-    }
+  }), /*#__PURE__*/React__default["default"].createElement(Container, {
+    gap: '1rem',
+    wrap: 'wrap',
+    flexBasis: 'fit-content',
+    mainAlignment: 'flex-start',
+    orientation: 'row'
+  }, /*#__PURE__*/React__default["default"].createElement(Row, {
+    mainAlignment: "flex-start",
+    flexBasis: '50%',
+    flexShrink: 1,
+    flexGrow: 1,
+    width: 'auto'
   }, /*#__PURE__*/React__default["default"].createElement(Text, {
     color: "gray6",
     size: "large",
     overflow: singleLine ? 'ellipsis' : 'break-word'
-  }, label))), !hideButton && /*#__PURE__*/React__default["default"].createElement(Padding, {
-    right: "extrasmall"
+  }, label)), !hideButton && /*#__PURE__*/React__default["default"].createElement(Row, {
+    margin: {
+      left: 'auto',
+      right: '0'
+    },
+    wrap: 'nowrap',
+    flexGrow: 0,
+    flexShrink: 0,
+    minWidth: 0,
+    flexBasis: 'fit-content'
   }, /*#__PURE__*/React__default["default"].createElement(Button$1, {
     label: actionLabel,
     type: "ghost",
-    labelColor: "gray6",
+    color: "gray6",
     onClick: handleClick
-  })))));
+  }))))));
 });
 
 /*

package/package.json

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