@zextras/carbonio-design-system 3.0.2 → 4.0.0

package/CHANGELOG.md

@@ -2,6 +2,36 @@
 
 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.
 
+## [4.0.0](https://github.com/Zextras/carbonio-design-system/compare/v3.0.2...v4.0.0) (2023-11-14)
+
+
+### ⚠ BREAKING CHANGES
+
+* remove KeyboardPreset type
+* update the keyboard utils to accept only event-like keys
+In order to migrate from the old string keys to the new event-like keys,
+transform each string in an object with the previous string set as key or code
+(according to its value), and the field ctrlKey set to the value of the old "modifier"
+field/argument (its default was false).
+* update the ChipInput separators prop to receive only event-like keys
+* **ChipInput:** remove deprecated prop confirmChipOnSpace. Use separators instead
+* **ChipInput:** remove deprecated errorLabel. Use description instead.
+* all the placement props relative to Tooltip, Dropdown, Popper and Popover do not support auto, auto-start and auto-end anymore.
+
+### Features
+
+* **ChipInput:** remove deprecated props ([e57ca80](https://github.com/Zextras/carbonio-design-system/commit/e57ca80a7034fae38847132664a3e34a573470f4)), closes [#235](https://github.com/Zextras/carbonio-design-system/issues/235)
+* migrate from Popper to Floating UI ([9e8864c](https://github.com/Zextras/carbonio-design-system/commit/9e8864c0d63e9d52c85683d6f71ace5e40259aeb)), closes [#233](https://github.com/Zextras/carbonio-design-system/issues/233)
+* update icon set ([da424d2](https://github.com/Zextras/carbonio-design-system/commit/da424d208692264f3a9e53512f0cb057cac3c016)), closes [#243](https://github.com/Zextras/carbonio-design-system/issues/243)
+
+
+### Bug Fixes
+
+* **ChipInput,types:** make ChipInput infer generic type from value ([88c3f63](https://github.com/Zextras/carbonio-design-system/commit/88c3f636bfdfb5c53ac75bef6950823af989ea71)), closes [#237](https://github.com/Zextras/carbonio-design-system/issues/237)
+* **Drop:** remove dropzone overlay when drag leave the dropzone ([33de354](https://github.com/Zextras/carbonio-design-system/commit/33de35459da2cd64b80c51cc23b39505e4d0bf78)), closes [#234](https://github.com/Zextras/carbonio-design-system/issues/234)
+* **ModalFooter:** pass the confirmDisabled prop to the ModalFooterContent component ([b04cc66](https://github.com/Zextras/carbonio-design-system/commit/b04cc665e21a75e430be06a3fc70f99b16acaf1b)), closes [#246](https://github.com/Zextras/carbonio-design-system/issues/246)
+* prevent creation of chips on keyboard events with modifier ([38b470c](https://github.com/Zextras/carbonio-design-system/commit/38b470cc7f0439f7d647f32049514c0cac7bce30)), closes [#236](https://github.com/Zextras/carbonio-design-system/issues/236)
+
 ### [3.0.2](https://github.com/Zextras/carbonio-design-system/compare/v3.0.1...v3.0.2) (2023-10-23)
 
 

package/README.md

@@ -20,21 +20,25 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 This is the Design System and Component Library used in most of the Zextras Projects
 
-<h2>How To Build</h2>
+<h2>Setup</h2>
 
-- Clone and install dependencies
+- Clone the repo
+
+- Install the dependencies:
 
-- Run Styleguidist in watch mode with
 ```
-npm run styleguide
+nvm use
+npm install
 ```
 
-- Build the Styleguide with
+- Run Styleguidist in watch mode with
+
 ```
-npm run styleguide:build
+npm start
 ```
 
 - Build the component library with
+
 ```
 npm run build
 ```

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

@@ -9,8 +9,7 @@ import { ForwardRefExoticComponent } from 'react';
 import { getDefaultLocale } from 'react-datepicker';
 import { HTMLAttributes } from 'react';
 import { InputHTMLAttributes } from 'react';
-import { Placement } from '@popperjs/core/lib/enums';
-import { Placement as Placement_2 } from '@popperjs/core';
+import { Placement } from '@floating-ui/dom';
 import { PropsWithoutRef } from 'react';
 import { default as React_2 } from 'react';
 import { ReactDatePickerProps } from 'react-datepicker';
@@ -392,13 +391,7 @@ export declare type ChipAction = {
     type: 'icon';
 });
 
-declare type ChipInput<TValue> = React_2.ForwardRefExoticComponent<ChipInputProps<TValue> & React_2.RefAttributes<HTMLDivElement>> & {
-    _newId?: number;
-};
-
-declare const ChipInput: ChipInput<any>;
-export { ChipInput }
-export { ChipInput as ChipInputType }
+export declare const ChipInput: ChipInputType;
 
 export declare interface ChipInputProps<TValue = unknown> extends Omit<ContainerProps, 'defaultValue' | 'onChange'> {
     /** ref to the input element */
@@ -435,22 +428,12 @@ export declare interface ChipInputProps<TValue = unknown> extends Omit<Container
     onAdd?: (value: string | unknown) => ChipItem<TValue>;
     /** Set the current input text as a Chip when it loses focus */
     confirmChipOnBlur?: boolean;
-    /**
-     * Set the current input text as a Chip when 'Space' is pressed
-     * @deprecated use separators prop instead
-     */
-    confirmChipOnSpace?: boolean;
     /** ChipInput backgroundColor */
     background?: keyof DefaultTheme['palette'];
     /** Chip generation triggers */
-    separators?: string[];
+    separators?: KeyboardPresetKey[];
     /** Show the error  */
     hasError?: boolean;
-    /**
-     * Set the label for the error
-     * @deprecated use description instead
-     */
-    errorLabel?: string;
     /** Background color for the error status */
     errorBackgroundColor?: keyof DefaultTheme['palette'];
     /** Set the limit for chip inputs <br />
@@ -493,7 +476,7 @@ export declare interface ChipInputProps<TValue = unknown> extends Omit<Container
     description?: string;
     /** Custom Chip component */
     ChipComponent?: React_2.ComponentType<ChipItem<TValue>>;
-    /** allow to create chips from pasted values */
+    /** allow creating chips from pasted values */
     createChipOnPaste?: boolean;
     /** Chip generation triggers on paste */
     pasteSeparators?: string[];
@@ -503,6 +486,10 @@ export declare interface ChipInputProps<TValue = unknown> extends Omit<Container
     maxHeight?: string;
 }
 
+export declare type ChipInputType = (<TValue = unknown>(p: ChipInputProps<TValue> & React_2.RefAttributes<HTMLDivElement>) => React_2.ReactElement<ChipInputProps> | null) & {
+    _newId?: number;
+};
+
 export declare type ChipItem<TValue = unknown> = {
     label?: string;
 } & ChipProps & {
@@ -877,7 +864,7 @@ export declare interface DropdownProps extends Omit<HTMLAttributes<HTMLDivElemen
     /** trigger ref that can be used instead of lost children ref caused by cloneElement */
     triggerRef?: React_2.Ref<HTMLElement>;
     /** 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';
+    placement?: Placement;
     /** Flag to disable the Portal implementation */
     disablePortal?: boolean;
     /** Whether the Component is visible or not */
@@ -1006,7 +993,7 @@ 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: ElementType, callback: (e: KeyboardEvent) => void, ref?: React_2.MutableRefObject<HTMLElement | null> | undefined, keys?: KeyboardPresetObj['keys']): KeyboardPresetObj[];
 
  declare function getPadding(padding: PaddingStringComposition | PaddingObj): (args: {
      theme: DefaultTheme;
@@ -1186,13 +1173,12 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
      id: string;
  }
 
- export declare type KeyboardPreset = Array<KeyboardPresetObj>;
+ export declare type KeyboardPresetKey = Partial<Pick<KeyboardEvent, 'ctrlKey' | 'altKey' | 'metaKey' | 'shiftKey'>> & RequireAtLeastOne_2<Pick<KeyboardEvent, 'key' | 'code'>>;
 
- declare type KeyboardPresetObj = {
+ export declare type KeyboardPresetObj = {
      type: HtmlElementKeyboardEventKey;
      callback: (e: KeyboardEvent) => void;
-     keys: string[];
-     modifier?: boolean;
+     keys: KeyboardPresetKey[];
      haveToPreventDefault?: boolean;
  };
 
@@ -1346,7 +1332,7 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
  centered?: boolean | undefined;
  }, never>;
 
- export declare const ModalFooter: ({ centered, confirmColor, confirmLabel, errorActionLabel, customFooter, dismissLabel, onClose, onConfirm, onErrorAction, onSecondaryAction, optionalFooter, secondaryActionLabel, type }: ModalFooterProps) => React_2.JSX.Element;
+ export declare const ModalFooter: ({ centered, confirmColor, confirmLabel, confirmDisabled, errorActionLabel, customFooter, dismissLabel, onClose, onConfirm, onErrorAction, onSecondaryAction, optionalFooter, secondaryActionLabel, type }: ModalFooterProps) => React_2.JSX.Element;
 
  export declare const ModalFooterContent: React_2.VFC<ModalFooterContentProps>;
 
@@ -1528,7 +1514,7 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
      /** Whether to disable the re-focus of Popper trigger */
      disableRestoreFocus?: boolean;
      /** Popper placement relative to the anchorEl */
-     placement?: Placement_2;
+     placement?: Placement;
      /** Callback for closed Popper */
      onClose: () => void;
      /** Flag to disable the Portal implementation */
@@ -1636,6 +1622,10 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
      [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;
  }[Keys];
 
+ declare type RequireAtLeastOne_2<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, Keys>> & {
+     [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;
+ }[Keys];
+
  export declare function Responsive({ children, mode, target }: ResponsiveProps): React_2.JSX.Element;
 
  export declare interface ResponsiveProps {
@@ -2078,9 +2068,9 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
      /** Tooltip text */
      label: string | React_2.ReactNode | undefined;
      /** Tooltip placement */
-     placement?: Placement_2;
+     placement?: Placement;
      /** Fallback placements to use when tooltip cannot fit in the primary placement */
-     fallbackPlacements?: Placement_2[];
+     fallbackPlacements?: Placement[];
      /** Tooltip max-width css property */
      maxWidth?: string;
      /** Whether to disable the tooltip and render only the child component */
@@ -2199,13 +2189,13 @@ 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>];
 
  /**
-  * Attach listeners for the given events to the given ref.
+  * Attach listeners for the given presets 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.
+  * Note:
+  * a preset with the `keys` field set to an empty array is considered an event for any keyboard key.
+  * To avoid having listeners registered on the keyboard events, provide an empty presets array.
   */
- export declare function useKeyboard(ref: React_2.RefObject<HTMLElement>, events: KeyboardPreset): void;
+ export declare function useKeyboard(ref: React_2.RefObject<HTMLElement>, presets: KeyboardPresetObj[]): void;
 
  export declare function useModal(): CreateModalFn;