@zextras/carbonio-design-system 2.0.0 → 2.1.0

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.
 
+## [2.1.0](https://github.com/Zextras/carbonio-design-system/compare/v2.0.0...v2.1.0) (2023-05-23)
+
+
+### Features
+
+* **Banner:** create Banner component ([fbe28f5](https://github.com/Zextras/carbonio-design-system/commit/fbe28f5aa521e5269fdfeca0acaae5192cd4b29d)), closes [#183](https://github.com/Zextras/carbonio-design-system/issues/183)
+* **ChipInput:** remove the default value for the limit of the chip ([1c11e5d](https://github.com/Zextras/carbonio-design-system/commit/1c11e5d82a410958728f420e16447c6732c859ca)), closes [#187](https://github.com/Zextras/carbonio-design-system/issues/187)
+
+
+### Bug Fixes
+
+* **DateTimePicker:** validate typed value of the input ([798700c](https://github.com/Zextras/carbonio-design-system/commit/798700c0e561dbf6b3c8ff116c2c116035f3ba8d)), closes [#185](https://github.com/Zextras/carbonio-design-system/issues/185)
+* enable tooltip children ref ([b3e9b06](https://github.com/Zextras/carbonio-design-system/commit/b3e9b0642e8f3bf2a22987c75c99fbb1fb72d593)), closes [#186](https://github.com/Zextras/carbonio-design-system/issues/186)
+* replace deprecated td tag attributes ([bab7d90](https://github.com/Zextras/carbonio-design-system/commit/bab7d905097e26f130466dec29425ba4f0d4045a)), closes [#184](https://github.com/Zextras/carbonio-design-system/issues/184)
+
 ## [2.0.0](https://github.com/Zextras/carbonio-design-system/compare/v1.2.0...v2.0.0) (2023-04-17)
 
 

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

@@ -78,6 +78,12 @@ export declare type Action = {
     iconType?: IconButtonProps['type'];
 } & IconButtonProps & DropdownItem;
 
+declare type ActionButton = ButtonProps & {
+    type?: never;
+    color?: never;
+    backgroundColor?: never;
+};
+
 export declare const Avatar: React_2.ForwardRefExoticComponent<AvatarPropTypes & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare interface AvatarPropTypes extends HTMLAttributes<HTMLDivElement> {
@@ -132,6 +138,26 @@ declare type BadgeSkeletonProps = {
     backgroundSize?: string;
 };
 
+export declare const Banner: React_2.ForwardRefExoticComponent<BannerProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare type BannerProps = HTMLAttributes<HTMLDivElement> & {
+    status?: 'success' | 'warning' | 'info' | 'error';
+    type?: 'standard' | 'fill' | 'outline';
+    title?: string;
+    description: string;
+    primaryAction?: ActionButton;
+    secondaryAction?: ActionButton;
+    moreInfoLabel?: string;
+    closeLabel?: string;
+    children?: never;
+} & ({
+    showClose: true;
+    onClose: IconButtonProps['onClick'];
+} | {
+    showClose?: false;
+    onClose?: never;
+});
+
 declare type BreadcrumbCollapersProps = {
     all: string;
 } & PaddingProps;
@@ -339,25 +365,21 @@ export declare type ChipAction = {
     type: 'icon';
 });
 
-export declare type ChipInput = React_2.ForwardRefExoticComponent<ChipInputProps & React_2.RefAttributes<HTMLDivElement>> & {
-    _newId?: number;
-};
+export declare const ChipInput: ChipInputType<any>;
 
-export declare const ChipInput: ChipInput;
-
-export declare interface ChipInputProps extends Omit<ContainerProps, 'defaultValue' | 'onChange'> {
+export declare interface ChipInputProps<TValue = unknown> extends Omit<ContainerProps, 'defaultValue' | 'onChange'> {
     /** ref to the input element */
-    inputRef?: React_2.MutableRefObject<HTMLInputElement | null>;
+    inputRef?: React_2.ForwardedRef<HTMLInputElement> | null;
     /** HTML input name */
     inputName?: string;
     /** Input Placeholder */
     placeholder?: string;
     /** ChipInput value */
-    value?: ChipItem[];
+    value?: ChipItem<TValue>[];
     /** ChipInput default value */
-    defaultValue?: ChipItem[];
+    defaultValue?: ChipItem<TValue>[];
     /** Callback to call when ChipInput's value changes */
-    onChange?: (items: ChipItem[]) => void;
+    onChange?: (items: ChipItem<TValue>[]) => void;
     /**
      * Dropdown items.
      * If disableOptions is true but options are provided, dropdown is still shown.
@@ -371,13 +393,13 @@ export declare interface ChipInputProps extends Omit<ContainerProps, 'defaultVal
      * - returns the keyup event object with an additional textContent value
      * - the event is debounced using the debounce function from lodash
      */
-    onInputType?: (event: React_2.KeyboardEvent & {
+    onInputType?: (event: React_2.KeyboardEvent<HTMLInputElement> & {
         textContent: string | null;
     }) => void;
     /** Debounce value in ms to which debounce the 'onInputType' callback */
     onInputTypeDebounce?: number;
     /** Callback called when a value is going to be added in the Chip Input, should return the configuration for the Chip */
-    onAdd?: (value: string | unknown) => ChipItem;
+    onAdd?: (value: string | unknown) => ChipItem<TValue>;
     /** Set the current input text as a Chip when it loses focus */
     confirmChipOnBlur?: boolean;
     /**
@@ -395,7 +417,7 @@ export declare interface ChipInputProps extends Omit<ContainerProps, 'defaultVal
      * Set the label for the error
      * @deprecated use description instead
      */
-    errorLabel?: string | undefined;
+    errorLabel?: string;
     /** Background color for the error status */
     errorBackgroundColor?: keyof DefaultTheme['palette'];
     /** Set the limit for chip inputs <br />
@@ -435,9 +457,9 @@ export declare interface ChipInputProps extends Omit<ContainerProps, 'defaultVal
     /** Dropdown max height */
     dropdownMaxHeight?: string;
     /** Description for the input */
-    description?: string | undefined;
+    description?: string;
     /** Custom Chip component */
-    ChipComponent?: React_2.ComponentType<ChipItem>;
+    ChipComponent?: React_2.ComponentType<ChipItem<TValue>>;
     /** allow to create chips from pasted values */
     createChipOnPaste?: boolean;
     /** Chip generation triggers on paste */
@@ -448,10 +470,14 @@ export declare interface ChipInputProps extends Omit<ContainerProps, 'defaultVal
     maxHeight?: string;
 }
 
-export declare type ChipItem = {
+export declare type ChipInputType<TValue> = React_2.ForwardRefExoticComponent<ChipInputProps<TValue> & React_2.RefAttributes<HTMLDivElement>> & {
+    _newId?: number;
+};
+
+export declare type ChipItem<TValue = unknown> = {
     label?: string;
 } & ChipProps & {
-    value?: unknown;
+    value?: TValue;
 };
 
 export declare interface ChipProps extends RowProps {
@@ -552,7 +578,7 @@ declare interface ContainerElProps {
     orientation?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
     /** Type of the Container's corners */
     borderRadius?: 'regular' | 'round' | 'half' | 'none';
-    borderColor?: string | keyof DefaultTheme['palette'];
+    borderColor?: string | keyof DefaultTheme['palette'] | Partial<Record<'top' | 'right' | 'bottom' | 'left', string | keyof DefaultTheme['palette']>>;
     /** Container background color */
     background?: string | keyof DefaultTheme['palette'];
     /** Container height: <br/>
@@ -674,7 +700,7 @@ export declare type CustomModalProps = PickedModal & Omit<HTMLAttributes<HTMLDiv
 
 export declare const DateTimePicker: React_2.ForwardRefExoticComponent<DateTimePickerProps & React_2.RefAttributes<DatePicker<never, undefined>>>;
 
-export declare interface DateTimePickerProps extends Omit<ReactDatePickerProps, 'onChange'> {
+export declare interface DateTimePickerProps extends Omit<ReactDatePickerProps, 'onChange' | 'placeholderText'> {
     /** Input's background color */
     backgroundColor?: keyof DefaultTheme['palette'];
     /** Close icon to clear the Input */
@@ -703,16 +729,21 @@ export declare interface DateTimePickerProps extends Omit<ReactDatePickerProps,
     enableChips?: boolean;
     /** Pass chip props */
     chipProps?: Partial<ChipProps>;
-    /** Picker width: <br/>
-     *  	`fit`: shorthand for fit-content
-     *  	`fill`: semantic alternative for `100%`
-     *  	number: measure in px
-     *  	string: any measure in CSS syntax
+    /**
+     * Input width: <br/>
+     *  <li>`fit`: shorthand for fit-content</li>
+     *  <li>`fill`: semantic alternative for `100%`</li>
+     *  <li>number: measure in px</li>
+     *  <li>string: any measure in CSS syntax</li>
      */
     width?: 'fit' | 'fill' | string | number;
-    /** Use Custom Component to trigger the picker */
+    /**
+     * Use a custom component instead of the default one.
+     * The component will be cloned by react-datepicker.
+     * See "With Custom Input" section for more details.
+     */
     CustomComponent?: React_2.ComponentType<{
-        value?: string | undefined;
+        value?: string;
         onClick?: React_2.ReactEventHandler;
     }>;
     /** Disable the input */
@@ -1983,7 +2014,7 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
          svg: IconComponent;
          size: ThemeSizeObj;
      };
-     palette: Record<'currentColor' | 'transparent' | 'primary' | 'secondary' | 'header' | 'highlight' | 'gray0' | 'gray1' | 'gray2' | 'gray3' | 'gray4' | 'gray5' | 'gray6' | 'warning' | 'error' | 'success' | 'info' | 'text' | 'shadow' | 'black' | 'white', ThemeColorObj>;
+     palette: Record<'currentColor' | 'transparent' | 'primary' | 'secondary' | 'header' | 'highlight' | 'gray0' | 'gray1' | 'gray2' | 'gray3' | 'gray4' | 'gray5' | 'gray6' | 'warning' | 'error' | 'success' | 'info' | 'text' | 'shadow' | 'successBanner' | 'warningBanner' | 'infoBanner' | 'errorBanner' | 'black' | 'white', ThemeColorObj>;
      avatarColors: Record<`avatar_${number}`, string>;
  }
 
@@ -2030,6 +2061,8 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
      children: React_2.ReactElement;
      /** time before tooltip shows, in milliseconds */
      triggerDelay?: number;
+     /** trigger ref that can be used instead of lost children ref caused by cloneElement */
+     triggerRef?: React_2.Ref<HTMLElement>;
  }
 
  export declare const Transition: ForwardRefExoticComponent<PropsWithoutRef<TransitionProps> & RefAttributes<HTMLElement>> & {