@zextras/carbonio-design-system 2.3.0 → 3.0.0

package/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 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.0](https://github.com/Zextras/carbonio-design-system/compare/v2.3.0...v3.0.0) (2023-09-27)
+
+
+### ⚠ BREAKING CHANGES
+
+* **Select:** set items of Select as required
+
+### Features
+
+* **icons:** add new building icon ([4b6d0f0](https://github.com/Zextras/carbonio-design-system/commit/4b6d0f0fe106a7586664e9244a52a1b227b8aa9d)), closes [#225](https://github.com/Zextras/carbonio-design-system/issues/225)
+
+
+### Bug Fixes
+
+* **ChipInput:** do not prevent typing in input when separator is set to empty array ([ba802fd](https://github.com/Zextras/carbonio-design-system/commit/ba802fdc657c2a9a8944f6dbbd7de95cd86e689d)), closes [#220](https://github.com/Zextras/carbonio-design-system/issues/220)
+* **ChipInput:** fix selectable placeholder in input fields ([5e13315](https://github.com/Zextras/carbonio-design-system/commit/5e13315c596b4bd101be4aeab4db8ac3dea613ad)), closes [#219](https://github.com/Zextras/carbonio-design-system/issues/219)
+* **CustomModal:** do not prevent default behavior of click inside modal ([33a8952](https://github.com/Zextras/carbonio-design-system/commit/33a895241f468fb5d23dd7a364fe8fcdbc63565c)), closes [#218](https://github.com/Zextras/carbonio-design-system/issues/218)
+* **Dropdown:** allow keyboard navigation on nested dropdowns ([18b5519](https://github.com/Zextras/carbonio-design-system/commit/18b551943b75e3d8358bd777361007c6303ee558)), closes [#217](https://github.com/Zextras/carbonio-design-system/issues/217)
+* **Snackbar:** add padding on right side of snackbar without action ([8cb4df4](https://github.com/Zextras/carbonio-design-system/commit/8cb4df4950601d85c8482086c768cd87f86ad437)), closes [#223](https://github.com/Zextras/carbonio-design-system/issues/223)
+* **Table:** prevent checkboxes to be visible when mouse leaves rows ([295d1bf](https://github.com/Zextras/carbonio-design-system/commit/295d1bf601caed9595976db0986a0954a885361b)), closes [#222](https://github.com/Zextras/carbonio-design-system/issues/222)
+
+
+* **Select:** set items of Select as required ([d51c42a](https://github.com/Zextras/carbonio-design-system/commit/d51c42aa7da17a21d37ec3ec0e1c9a311290bd5a)), closes [#221](https://github.com/Zextras/carbonio-design-system/issues/221)
+
 ## [2.3.0](https://github.com/Zextras/carbonio-design-system/compare/v2.2.0...v2.3.0) (2023-08-30)
 
 

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

@@ -159,6 +159,32 @@ export declare type BannerProps = HTMLAttributes<HTMLDivElement> & {
     onClose?: never;
 });
 
+declare type BareModalProps = {
+    /** Modal background */
+    background?: string | keyof DefaultTheme['palette'];
+    /** Modal size */
+    size?: 'extrasmall' | 'small' | 'medium' | 'large';
+    /** Boolean to show the modal */
+    open?: boolean;
+    /** Css property to handle the stack order of multiple modals */
+    zIndex?: number;
+    /** min height of the modal */
+    minHeight?: string;
+    /** max height of the modal */
+    maxHeight?: string;
+    /** Flag to disable the Portal implementation */
+    disablePortal?: boolean;
+    /** Content of the modal */
+    children?: React_2.ReactNode | React_2.ReactNode[];
+    /** Callback to close the Modal */
+    onClose?: (event: React_2.MouseEvent | KeyboardEvent) => void;
+    /**
+     * The window where to insert the Portal's children.
+     * The default value is 'windowObj' obtained from the ThemContext.
+     * */
+    containerWindow?: Window;
+};
+
 declare type BreadcrumbCollapersProps = {
     all: string;
 } & PaddingProps;
@@ -698,9 +724,9 @@ declare type CSSObject = {
     [K in keyof CSSProperties]: CSSProperties[K] | (() => NonNullable<CSSProperties[K]>);
 };
 
-export declare const CustomModal: React_2.ForwardRefExoticComponent<PickedModal & Omit<React_2.HTMLAttributes<HTMLDivElement>, "open" | "background" | "maxHeight" | "minHeight" | "zIndex" | "title" | "children" | "size" | "onClose" | "disablePortal"> & React_2.RefAttributes<HTMLDivElement>>;
+export declare const CustomModal: React_2.ForwardRefExoticComponent<BareModalProps & Omit<React_2.HTMLAttributes<HTMLDivElement>, "title" | keyof BareModalProps> & React_2.RefAttributes<HTMLDivElement>>;
 
-export declare type CustomModalProps = PickedModal & Omit<HTMLAttributes<HTMLDivElement>, keyof PickedModal | 'title'>;
+export declare type CustomModalProps = BareModalProps & Omit<HTMLAttributes<HTMLDivElement>, keyof BareModalProps | 'title'>;
 
 export declare const DateTimePicker: React_2.ForwardRefExoticComponent<DateTimePickerProps & React_2.RefAttributes<DatePicker<never, undefined>>>;
 
@@ -849,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>;
+    triggerRef?: React_2.Ref<HTMLElement> | null;
     /** 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 */
@@ -867,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>;
+    dropdownListRef?: React_2.RefObject<HTMLDivElement> | null;
 }
 
 export declare interface DropProps {
@@ -899,8 +925,6 @@ 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> {
@@ -980,7 +1004,13 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
 
  export { getDefaultLocale }
 
- export declare function getKeyboardPreset(type: ElementType, callback: (e: KeyboardEvent) => void, ref?: React_2.MutableRefObject<HTMLElement | null> | undefined, keys?: string[], modifier?: boolean): KeyboardPreset;
+ 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;
 
  declare function getPadding(padding: PaddingStringComposition | PaddingObj): (args: {
      theme: DefaultTheme;
@@ -1164,7 +1194,7 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
 
  declare type KeyboardPresetObj = {
      type: HtmlElementKeyboardEventKey;
-     callback: (e: KeyboardEvent) => void;
+     callback: NativeKeyboardEventHandler;
      keys: string[];
      modifier?: boolean;
      haveToPreventDefault?: boolean;
@@ -1280,34 +1310,35 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
      height?: string;
  };
 
- export declare const Modal: React_2.ForwardRefExoticComponent<Omit<ModalFooterProps, "errorActionLabel" | "onErrorAction"> & {
-     /** Modal background */
+ export declare const Modal: React_2.ForwardRefExoticComponent<{
      background?: string | undefined;
-     /** Modal title */
-     title?: string | React_2.ReactElement<any, string | React_2.JSXElementConstructor<any>> | undefined;
-     /** Modal size */
      size?: "small" | "medium" | "large" | "extrasmall" | undefined;
-     /** Boolean to show the modal */
      open?: boolean | undefined;
-     /** Hide the footer completely */
-     hideFooter?: boolean | undefined;
-     /** Show icon to close Modal */
-     showCloseIcon?: boolean | undefined;
-     /** Css property to handle the stack order of multiple modals */
      zIndex?: number | undefined;
-     /** min height of the modal */
      minHeight?: string | undefined;
-     /** max height of the modal */
      maxHeight?: string | undefined;
-     /** Flag to disable the Portal implementation */
      disablePortal?: boolean | undefined;
-     /** Content of the modal */
      children?: React_2.ReactNode | React_2.ReactNode[];
-     /**
-      * The window where to insert the Portal's children.
-      * The default value is 'windowObj' obtained from the ThemContext.
-      * */
+     onClose?: ((event: KeyboardEvent | React_2.MouseEvent<Element, MouseEvent>) => void) | undefined;
      containerWindow?: Window | undefined;
+ } & Omit<React_2.HTMLAttributes<HTMLDivElement>, "title" | keyof {
+     background?: string | undefined;
+     size?: "small" | "medium" | "large" | "extrasmall" | undefined;
+     open?: boolean | undefined;
+     zIndex?: number | undefined;
+     minHeight?: string | undefined;
+     maxHeight?: string | undefined;
+     disablePortal?: boolean | undefined;
+     children?: React_2.ReactNode | React_2.ReactNode[];
+     onClose?: ((event: KeyboardEvent | React_2.MouseEvent<Element, MouseEvent>) => void) | undefined;
+     containerWindow?: Window | undefined;
+ }> & Omit<ModalFooterProps, "errorActionLabel" | "onErrorAction"> & {
+     /** Modal title */
+     title?: string | React_2.ReactElement<any, string | React_2.JSXElementConstructor<any>> | undefined;
+     /** Hide the footer completely */
+     hideFooter?: boolean | undefined;
+     /** Show icon to close Modal */
+     showCloseIcon?: boolean | undefined;
      /** Label for copy button in the Error Modal */
      copyLabel?: ModalFooterProps['errorActionLabel'];
      /** Close icon tooltip label */
@@ -1377,34 +1408,13 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
      children: React_2.ReactNode | React_2.ReactNode[];
  }
 
- export declare type ModalProps = Omit<ModalFooterProps, 'errorActionLabel' | 'onErrorAction'> & {
-     /** Modal background */
-     background?: string | keyof DefaultTheme['palette'];
+ export declare type ModalProps = CustomModalProps & Omit<ModalFooterProps, 'errorActionLabel' | 'onErrorAction'> & {
      /** Modal title */
      title?: string | React_2.ReactElement;
-     /** Modal size */
-     size?: 'extrasmall' | 'small' | 'medium' | 'large';
-     /** Boolean to show the modal */
-     open?: boolean;
      /** Hide the footer completely */
      hideFooter?: boolean;
      /** Show icon to close Modal */
      showCloseIcon?: boolean;
-     /** Css property to handle the stack order of multiple modals */
-     zIndex?: number;
-     /** min height of the modal */
-     minHeight?: string;
-     /** max height of the modal */
-     maxHeight?: string;
-     /** Flag to disable the Portal implementation */
-     disablePortal?: boolean;
-     /** Content of the modal */
-     children?: React_2.ReactNode | React_2.ReactNode[];
-     /**
-      * The window where to insert the Portal's children.
-      * The default value is 'windowObj' obtained from the ThemContext.
-      * */
-     containerWindow?: Window;
      /** Label for copy button in the Error Modal */
      copyLabel?: ModalFooterProps['errorActionLabel'];
      /** Close icon tooltip label */
@@ -1459,6 +1469,8 @@ 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 = {
@@ -1498,8 +1510,6 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
 
  export declare const PasswordInput: React_2.ForwardRefExoticComponent<InputProps & React_2.RefAttributes<HTMLDivElement>>;
 
- declare type PickedModal = Pick<ModalProps, 'background' | 'size' | 'open' | 'onClose' | 'zIndex' | 'minHeight' | 'maxHeight' | 'disablePortal' | 'children'>;
-
  export declare const Popover: React_2.ForwardRefExoticComponent<PopoverProps & React_2.RefAttributes<HTMLDivElement>>;
 
  export declare interface PopoverProps extends PopperProps {
@@ -1669,7 +1679,7 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
      label?: string;
      background?: string;
      disabled?: boolean;
-     items?: SelectItem<T>[];
+     items: SelectItem<T>[];
      /** Css display property of select */
      display?: 'block' | 'inline-block';
      /** Css width property of dropdown */
@@ -1985,7 +1995,7 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
      onChange?: never;
  } | {
      /** Items for the Select component of the header */
-     items: NonEmptyArray<NonNullable<SelectProps['items']>[number]>;
+     items: NonEmptyArray<SelectProps['items'][number]>;
      /** De/Select all rows callback */
      onChange: MultipleSelectionOnChange;
  });
@@ -2194,7 +2204,14 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
 
  export declare const useIsVisible: <T extends HTMLElement>(listRef: React_2.RefObject<HTMLDivElement> | undefined, itemRef?: React_2.Ref<T> | undefined) => [boolean, React_2.RefObject<T>];
 
- export declare function useKeyboard(ref: React_2.RefObject<HTMLElement>, events: KeyboardPreset): void;
+ /**
+  * Attach listeners for the given events to the given ref.
+  *
+  * Note: an event with the `keys` field set to an empty array is considered as an event for any key.
+  * 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 useModal(): CreateModalFn;