akeneo-design-system 0.1.225 → 0.1.227

package/lib/components/Table/Table.d.ts

@@ -25,7 +25,7 @@ declare const Table: {
     Row: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLTableRowElement>, "children" | "onClick" | "onDragEnd" | "onDragStart" | "level" | "isSelected" | "rowIndex" | "onSelectToggle"> & {
         children?: React.ReactNode;
         onSelectToggle?: ((isSelected: boolean) => void) | undefined;
-        isSelected?: boolean | undefined;
+        isSelected?: boolean | "mixed" | undefined;
         level?: "warning" | undefined;
         onClick?: ((event: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => void) | undefined;
         rowIndex?: number | undefined;

package/lib/components/Table/TableRow/TableRow.d.ts

@@ -4,7 +4,7 @@ declare type Level = 'warning';
 declare type TableRowProps = Override<HTMLAttributes<HTMLTableRowElement>, {
     children?: ReactNode;
     onSelectToggle?: (isSelected: boolean) => void;
-    isSelected?: boolean;
+    isSelected?: boolean | 'mixed';
     level?: Level;
     onClick?: (event: MouseEvent<HTMLTableRowElement>) => void;
     rowIndex?: number;
@@ -14,7 +14,7 @@ declare type TableRowProps = Override<HTMLAttributes<HTMLTableRowElement>, {
 declare const TableRow: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLTableRowElement>, "children" | "onClick" | "onDragEnd" | "onDragStart" | "level" | "isSelected" | "rowIndex" | "onSelectToggle"> & {
     children?: ReactNode;
     onSelectToggle?: ((isSelected: boolean) => void) | undefined;
-    isSelected?: boolean | undefined;
+    isSelected?: boolean | "mixed" | undefined;
     level?: "warning" | undefined;
     onClick?: ((event: MouseEvent<HTMLTableRowElement>) => void) | undefined;
     rowIndex?: number | undefined;

package/lib/components/Table/TableRow/TableRow.js

@@ -83,9 +83,9 @@ var CheckboxContainer = styled_components_1.default.td(templateObject_9 || (temp
 var HandleCell = (0, styled_components_1.default)(TableCell_1.TableCell)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  cursor: grab;\n  width: 20px;\n\n  > div {\n    justify-content: center;\n  }\n\n  :active {\n    cursor: grabbing;\n  }\n"], ["\n  cursor: grab;\n  width: 20px;\n\n  > div {\n    justify-content: center;\n  }\n\n  :active {\n    cursor: grabbing;\n  }\n"])));
 var WarningIcon = (0, styled_components_1.default)(icons_1.DangerIcon)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), (0, theme_1.getColor)('yellow', 120));
 var TableRow = (0, react_1.forwardRef)(function (_a, forwardedRef) {
-    var _b = _a.rowIndex, rowIndex = _b === void 0 ? 0 : _b, isSelected = _a.isSelected, level = _a.level, onSelectToggle = _a.onSelectToggle, onClick = _a.onClick, draggable = _a.draggable, onDragStart = _a.onDragStart, onDragEnd = _a.onDragEnd, children = _a.children, rest = __rest(_a, ["rowIndex", "isSelected", "level", "onSelectToggle", "onClick", "draggable", "onDragStart", "onDragEnd", "children"]);
-    var _c = (0, usePlaceholderPosition_1.usePlaceholderPosition)(rowIndex), placeholderPosition = _c[0], placeholderDragEnter = _c[1], placeholderDragLeave = _c[2], placeholderDragEnd = _c[3];
-    var _d = (0, react_1.useContext)(TableContext_1.TableContext), isSelectable = _d.isSelectable, displayCheckbox = _d.displayCheckbox, isDragAndDroppable = _d.isDragAndDroppable, hasWarningRows = _d.hasWarningRows;
+    var _b = _a.rowIndex, rowIndex = _b === void 0 ? 0 : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, level = _a.level, onSelectToggle = _a.onSelectToggle, onClick = _a.onClick, draggable = _a.draggable, onDragStart = _a.onDragStart, onDragEnd = _a.onDragEnd, children = _a.children, rest = __rest(_a, ["rowIndex", "isSelected", "level", "onSelectToggle", "onClick", "draggable", "onDragStart", "onDragEnd", "children"]);
+    var _d = (0, usePlaceholderPosition_1.usePlaceholderPosition)(rowIndex), placeholderPosition = _d[0], placeholderDragEnter = _d[1], placeholderDragLeave = _d[2], placeholderDragEnd = _d[3];
+    var _e = (0, react_1.useContext)(TableContext_1.TableContext), isSelectable = _e.isSelectable, displayCheckbox = _e.displayCheckbox, isDragAndDroppable = _e.isDragAndDroppable, hasWarningRows = _e.hasWarningRows;
     if (isSelectable && (undefined === isSelected || undefined === onSelectToggle)) {
         throw Error('A row in a selectable table should have the prop "isSelected" and "onSelectToggle"');
     }
@@ -106,7 +106,7 @@ var TableRow = (0, react_1.forwardRef)(function (_a, forwardedRef) {
     };
     return (react_1.default.createElement(RowContainer, __assign({ ref: forwardedRef, isClickable: undefined !== onClick, isSelected: !!isSelected, level: level, isDragAndDroppable: isDragAndDroppable, onClick: onClick, placeholderPosition: isDragAndDroppable ? placeholderPosition : 'none', draggable: isDragAndDroppable && draggable, "data-draggable-index": rowIndex, onDragEnter: handleDragEnter, onDragLeave: placeholderDragLeave, onDragStart: handleDragStart, onDragEnd: handleDragEnd }, rest),
         isSelectable && (react_1.default.createElement(CheckboxContainer, { "aria-hidden": !displayCheckbox && !isSelected, isVisible: displayCheckbox || !!isSelected, onClick: handleCheckboxChange },
-            react_1.default.createElement(components_1.Checkbox, { checked: !!isSelected, onChange: function (_value, e) {
+            react_1.default.createElement(components_1.Checkbox, { checked: isSelected, onChange: function (_value, e) {
                     handleCheckboxChange(e);
                 } }))),
         isDragAndDroppable && (react_1.default.createElement(HandleCell, { onMouseDown: function () { return onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(rowIndex); }, onMouseUp: onDragEnd, "data-testid": "dragAndDrop" },

package/lib/components/Table/TableRow/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../../src/components/Table/TableRow/TableRow.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../../src/components/Table/TableRow/TableRow.tsx"],"names":[],"mappings":"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"}

package/lib/components/index.d.ts

@@ -1,3 +1,5 @@
+export * from './Avatar/Avatar';
+export * from './Avatar/Avatars';
 export * from './Badge/Badge';
 export * from './Block/Block';
 export * from './BlockButton/BlockButton';

package/lib/components/index.js

@@ -10,6 +10,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Avatar/Avatar"), exports);
+__exportStar(require("./Avatar/Avatars"), exports);
 __exportStar(require("./Badge/Badge"), exports);
 __exportStar(require("./Block/Block"), exports);
 __exportStar(require("./BlockButton/BlockButton"), exports);

package/lib/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,gDAA8B;AAC9B,gDAA8B;AAC9B,4DAA0C;AAC1C,0DAAwC;AACxC,kDAAgC;AAChC,8CAA4B;AAC5B,sDAAoC;AACpC,sDAAoC;AACpC,sDAAoC;AACpC,gDAA8B;AAC9B,kDAAgC;AAChC,0DAAwC;AACxC,sDAAoC;AACpC,gDAA8B;AAC9B,4DAA0C;AAC1C,0CAAwB;AACxB,wDAAsC;AACtC,8CAA4B;AAC5B,8CAA4B;AAC5B,kDAAgC;AAChC,0DAAwC;AACxC,gDAA8B;AAC9B,+CAA6B;AAC7B,0DAAwC;AACxC,8CAA4B;AAC5B,4DAA0C;AAC1C,oDAAkC;AAClC,4DAA0C;AAC1C,wEAAsD;AACtD,kDAAgC;AAChC,8DAA4C;AAC5C,kEAAgD;AAChD,kDAAgC;AAChC,gDAA8B;AAC9B,8CAA4B;AAC5B,gDAA8B;AAC9B,oDAAkC;AAClC,8CAA4B;AAC5B,oDAAkC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,kDAAgC;AAChC,mDAAiC;AACjC,gDAA8B;AAC9B,gDAA8B;AAC9B,4DAA0C;AAC1C,0DAAwC;AACxC,kDAAgC;AAChC,8CAA4B;AAC5B,sDAAoC;AACpC,sDAAoC;AACpC,sDAAoC;AACpC,gDAA8B;AAC9B,kDAAgC;AAChC,0DAAwC;AACxC,sDAAoC;AACpC,gDAA8B;AAC9B,4DAA0C;AAC1C,0CAAwB;AACxB,wDAAsC;AACtC,8CAA4B;AAC5B,8CAA4B;AAC5B,kDAAgC;AAChC,0DAAwC;AACxC,gDAA8B;AAC9B,+CAA6B;AAC7B,0DAAwC;AACxC,8CAA4B;AAC5B,4DAA0C;AAC1C,oDAAkC;AAClC,4DAA0C;AAC1C,wEAAsD;AACtD,kDAAgC;AAChC,8DAA4C;AAC5C,kEAAgD;AAChD,kDAAgC;AAChC,gDAA8B;AAC9B,8CAA4B;AAC5B,gDAA8B;AAC9B,oDAAkC;AAClC,8CAA4B;AAC5B,oDAAkC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akeneo-design-system",
-  "version": "0.1.225",
+  "version": "0.1.227",
   "description": "Akeneo design system",
   "main": "lib/index.js",
   "scripts": {

package/src/components/Avatar/Avatar.stories.mdx

@@ -0,0 +1,147 @@
+import {Meta, Story, ArgsTable, Canvas} from '@storybook/addon-docs';
+import {Avatar} from './Avatar.tsx';
+import {Avatars} from './Avatars.tsx';
+
+<Meta
+  title="Components/Avatar"
+  component={Avatar}
+  argTypes={{
+    firstName: {control: {type: 'text'}},
+    lastName: {control: {type: 'text'}},
+    username: {control: {type: 'text'}},
+    avatarUrl: {control: {type: 'text'}},
+    size: {control: {type: 'select', options: ['default', 'big']}},
+  }}
+  args={{
+    firstName: 'John',
+    lastName: 'Doe',
+    username: 'admin',
+    avatarUrl: undefined,
+    size: 'default',
+  }}
+/>
+
+# Avatar
+
+## Usage
+
+This component is used to display users avatars. If no avatar is available, first letters of the first and last name are
+displayed with a dedicated color.
+
+## Playground
+
+<Canvas>
+  <Story name="Standard">
+    {args => {
+      return <Avatar firstName={'John'} lastName={'Doe'} username={'admin'} {...args} />;
+    }}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Standard" />
+
+## Variation on background colors
+
+The background color is based from the username.
+
+<Canvas>
+  <Story name="Background colors">
+    {args => {
+      return (
+        <>
+          <Avatar {...args} firstName={'Albert'} lastName={'Doe'} username={'a'} />
+          <Avatar {...args} firstName={'Bertrand'} lastName={'Doe'} username={'b'} />
+          <Avatar {...args} firstName={'Chris'} lastName={'Doe'} username={'c'} />
+          <Avatar {...args} firstName={'Danny'} lastName={'Doe'} username={'d'} />
+          <Avatar {...args} firstName={'Elon'} lastName={'Doe'} username={'e'} />
+          <Avatar {...args} firstName={'Fred'} lastName={'Doe'} username={'f'} />
+          <Avatar {...args} firstName={'Gus'} lastName={'Doe'} username={'g'} />
+          <Avatar {...args} firstName={'Helen'} lastName={'Doe'} username={'h'} />
+          <Avatar {...args} firstName={'Isabel'} lastName={'Doe'} username={'i'} />
+          <Avatar {...args} firstName={'John'} lastName={'Doe'} username={'j'} />
+          <Avatar {...args} firstName={'Kurt'} lastName={'Doe'} username={'k'} />
+          <Avatar {...args} firstName={'Leonard'} lastName={'Doe'} username={'l'} />
+        </>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Variation with image
+
+<Canvas>
+  <Story name="With image">
+    {args => {
+      return (
+        <>
+          <Avatar {...args} avatarUrl={'https://picsum.photos/seed/akeneo/32/32'} />
+        </>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Variation on List
+
+You can use a dedicated component to display avatar list. After a defined maximum, other avatars are not displayed.
+
+<Canvas>
+  <Story name="Avatar list">
+    {args => {
+      return (
+        <>
+          <Avatars
+            max={5}
+            title="Helen Doe&#10;Isabel Doe&#10;John Doe&#10;Kurt Doe&#10;Leonard Doe"
+          >
+            <Avatar
+              {...args}
+              firstName={'Albert'}
+              lastName={'Doe'}
+              username={'a'}
+              avatarUrl={'https://picsum.photos/seed/akeneo/32/32'}
+            />
+            <Avatar {...args} firstName={'Bertrand'} lastName={'Doe'} username={'b'} />
+            <Avatar
+              {...args}
+              firstName={'Chris'}
+              lastName={'Doe'}
+              username={'c'}
+              avatarUrl={'https://picsum.photos/seed/bkeneo/32/32'}
+            />
+            <Avatar {...args} firstName={'Danny'} lastName={'Doe'} username={'d'} />
+            <Avatar
+              {...args}
+              firstName={'Elon'}
+              lastName={'Doe'}
+              username={'e'}
+              avatarUrl={'https://picsum.photos/seed/ckeneo/32/32'}
+            />
+            <Avatar {...args} firstName={'Fred'} lastName={'Doe'} username={'f'} />
+            <Avatar {...args} firstName={'Gus'} lastName={'Doe'} username={'g'} />
+            <Avatar {...args} firstName={'Helen'} lastName={'Doe'} username={'h'} />
+            <Avatar {...args} firstName={'Isabel'} lastName={'Doe'} username={'i'} />
+            <Avatar {...args} firstName={'John'} lastName={'Doe'} username={'j'} />
+            <Avatar {...args} firstName={'Kurt'} lastName={'Doe'} username={'k'} />
+            <Avatar {...args} firstName={'Leonard'} lastName={'Doe'} username={'l'} />
+          </Avatars>
+        </>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Variation on Size
+
+<Canvas>
+  <Story name="Avatar size">
+    {args => {
+      return (
+        <>
+          <Avatar {...args} size={'default'} />
+          <Avatar {...args} size={'big'} />
+        </>
+      );
+    }}
+  </Story>
+</Canvas>

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,102 @@
+import React, {useMemo} from 'react';
+import styled, {css} from 'styled-components';
+import {useTheme} from '../../hooks';
+import {Override} from '../../shared';
+import {AkeneoThemedProps, getColor} from '../../theme';
+
+const AvatarContainer = styled.span<AvatarProps & AkeneoThemedProps>`
+  ${({size}) =>
+    size === 'default'
+      ? css`
+          height: 32px;
+          width: 32px;
+          line-height: 32px;
+          font-size: 15px;
+          border-radius: 32px;
+        `
+      : css`
+          height: 140px;
+          width: 140px;
+          line-height: 140px;
+          font-size: 66px;
+          border-radius: 140px;
+        `}
+  display: inline-block;
+  color: ${getColor('white')};
+  text-align: center;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  text-transform: uppercase;
+  cursor: ${({onClick}) => (onClick ? 'pointer' : 'default')};
+`;
+
+type AvatarProps = Override<
+  React.HTMLAttributes<HTMLSpanElement>,
+  {
+    /**
+     * Username to use as fallback if the avatar is not provided and the Firstname and Lastname are empty.
+     */
+    username: string;
+
+    /**
+     * Firstname to use as fallback with the Lastname if the avatar is not provided.
+     */
+    firstName: string;
+
+    /**
+     * Lastname to use as fallback with the Firstname if the avatar is not provided.
+     */
+    lastName: string;
+
+    /**
+     * Url of the avatar image.
+     */
+    avatarUrl?: string;
+
+    /**
+     * Size of the avatar.
+     */
+    size?: 'default' | 'big';
+  }
+>;
+
+const Avatar = ({username, firstName, lastName, avatarUrl, size = 'default', ...rest}: AvatarProps) => {
+  const theme = useTheme();
+
+  const fallback = (
+    firstName.trim().charAt(0) + lastName.trim().charAt(0) || username.substring(0, 2)
+  ).toLocaleUpperCase();
+  const title = `${firstName} ${lastName}`.trim() || username;
+
+  const backgroundColor = useMemo(() => {
+    const colorId = username.split('').reduce<number>((s, l) => s + l.charCodeAt(0), 0);
+    const colors = [
+      theme.colorAlternative.green120,
+      theme.colorAlternative.darkCyan120,
+      theme.colorAlternative.forestGreen120,
+      theme.colorAlternative.oliveGreen120,
+      theme.colorAlternative.blue120,
+      theme.colorAlternative.darkBlue120,
+      theme.colorAlternative.hotPink120,
+      theme.colorAlternative.red120,
+      theme.colorAlternative.coralRed120,
+      theme.colorAlternative.yellow120,
+      theme.colorAlternative.orange120,
+      theme.colorAlternative.chocolate120,
+    ];
+
+    return colors[colorId % colors.length];
+  }, [theme, username]);
+
+  const style = avatarUrl ? {backgroundImage: `url(${avatarUrl})`} : {backgroundColor};
+
+  return (
+    <AvatarContainer size={size} {...rest} style={style} title={title}>
+      {avatarUrl ? '' : fallback}
+    </AvatarContainer>
+  );
+};
+
+export {Avatar};
+export type {AvatarProps};

package/src/components/Avatar/Avatar.unit.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import {render, screen} from '../../storybook/test-util';
+import {Avatar} from './Avatar';
+
+test('renders', () => {
+  render(<Avatar username="john" firstName="John" lastName="Doe" />);
+
+  const avatar = screen.getByTitle('John Doe');
+  expect(avatar).toBeInTheDocument();
+});
+
+test('avatar image', () => {
+  render(<Avatar username="john" firstName="John" lastName="Doe" avatarUrl="path/to/image" />);
+
+  const avatar = screen.getByTitle('John Doe');
+  expect(avatar).toHaveStyle('background-image: url(path/to/image)');
+});
+
+test('deterministic fallback color', () => {
+  render(<Avatar username="john" firstName="John" lastName="Doe" />);
+
+  const avatar = screen.getByTitle('John Doe');
+  expect(avatar).toHaveStyle('background-color: rgb(68, 31, 0)');
+});
+
+test('fallback to firstname + lastname', () => {
+  render(<Avatar username="" firstName="John" lastName="Doe" />);
+
+  const avatar = screen.getByTitle('John Doe');
+  expect(avatar).toHaveTextContent('JD');
+});
+
+test('fallback to firstname only', () => {
+  render(<Avatar username="" firstName="John" lastName="" />);
+
+  const avatar = screen.getByTitle('John');
+  expect(avatar).toHaveTextContent('J');
+});
+
+test('fallback to lastname only', () => {
+  render(<Avatar username="" firstName="" lastName="Doe" />);
+
+  const avatar = screen.getByTitle('Doe');
+  expect(avatar).toHaveTextContent('D');
+});
+
+test('fallback to username', () => {
+  render(<Avatar username="john" firstName="" lastName="" />);
+
+  const avatar = screen.getByTitle('john');
+  expect(avatar).toHaveTextContent('JO');
+});
+
+test('initial are converted to uppercase', () => {
+  render(<Avatar username="" firstName="john" lastName="doe" />);
+
+  const avatar = screen.getByTitle('john doe');
+  expect(avatar).toHaveTextContent('JD');
+});
+
+test('size default', () => {
+  render(<Avatar username="john" firstName="John" lastName="Doe" />);
+
+  const avatar = screen.getByTitle('John Doe');
+  expect(avatar).toHaveStyle('width: 32px');
+});
+
+test('size big', () => {
+  render(<Avatar username="john" firstName="John" lastName="Doe" size="big" />);
+
+  const avatar = screen.getByTitle('John Doe');
+  expect(avatar).toHaveStyle('width: 140px');
+});
+
+test('supports ...rest props', () => {
+  render(<Avatar username="john" firstName="John" lastName="Doe" data-testid="my_value" />);
+
+  expect(screen.getByTestId('my_value')).toBeInTheDocument();
+});

package/src/components/Avatar/Avatars.tsx

@@ -0,0 +1,50 @@
+import React, {Children} from 'react';
+import styled from 'styled-components';
+import {Override} from '../../shared';
+import {AkeneoThemedProps, getColor} from '../../theme';
+
+const AvatarListContainer = styled.div<AvatarsProps & AkeneoThemedProps>`
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+  & > * {
+    margin-right: -4px;
+    position: relative;
+  }
+`;
+
+const RemainingAvatar = styled.span`
+  height: 32px;
+  width: 32px;
+  display: inline-block;
+  border: 1px solid ${getColor('grey', 10)};
+  line-height: 32px;
+  text-align: center;
+  font-size: 15px;
+  border-radius: 32px;
+  background-color: ${getColor('white')};
+`;
+
+type AvatarsProps = Override<
+  React.HTMLAttributes<HTMLDivElement>,
+  {
+    max: number;
+  }
+>;
+
+const Avatars = ({max, children, ...rest}: AvatarsProps) => {
+  const childrenArray = Children.toArray(children);
+  const displayedChildren = childrenArray.slice(0, max);
+  const remainingChildrenCount = childrenArray.length - max;
+  const reverseChildren = displayedChildren.reverse();
+
+  return (
+    <AvatarListContainer {...rest}>
+      {remainingChildrenCount > 0 && <RemainingAvatar>+{remainingChildrenCount}</RemainingAvatar>}
+      {reverseChildren}
+    </AvatarListContainer>
+  );
+};
+
+export {Avatars};
+export type {AvatarsProps};

package/src/components/Avatar/Avatars.unit.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import {render, screen} from '../../storybook/test-util';
+import {Avatar} from './Avatar';
+import {Avatars} from './Avatars';
+
+test('renders multiple avatars', () => {
+  render(
+    <Avatars max={2}>
+      <Avatar username="john" firstName="John" lastName="Doe" />
+      <Avatar username="leonard" firstName="Leonard" lastName="Doe" />
+    </Avatars>
+  );
+
+  expect(screen.getByTitle('John Doe')).toBeInTheDocument();
+  expect(screen.getByTitle('Leonard Doe')).toBeInTheDocument();
+});
+
+test('renders a maximum number of avatars', () => {
+  render(
+    <Avatars max={1}>
+      <Avatar username="john" firstName="John" lastName="Doe" />
+      <Avatar username="leonard" firstName="Leonard" lastName="Doe" />
+    </Avatars>
+  );
+
+  expect(screen.getByTitle('John Doe')).toBeInTheDocument();
+  expect(screen.queryByTitle('Leonard Doe')).not.toBeInTheDocument();
+  expect(screen.getByText('+1')).toBeInTheDocument();
+});
+
+test('renders no avatar', () => {
+  render(<Avatars max={1}></Avatars>);
+
+  expect(screen.queryByTitle('+1')).not.toBeInTheDocument();
+});
+
+test('supports ...rest props', () => {
+  render(<Avatars max={1} data-testid="my_value" />);
+
+  expect(screen.getByTestId('my_value')).toBeInTheDocument();
+});

package/src/components/Input/BooleanInput/BooleanInput.tsx

@@ -149,7 +149,7 @@ type BooleanInputProps = Override<
         clearLabel?: string;
       }
   ) & {
-    readOnly: boolean;
+    readOnly?: boolean;
     yesLabel: string;
     noLabel: string;
     invalid?: boolean;
@@ -165,7 +165,7 @@ const BooleanInput = React.forwardRef<HTMLDivElement, BooleanInputProps>(
   (
     {
       value,
-      readOnly,
+      readOnly = false,
       onChange,
       clearable = false,
       yesLabel,

package/src/components/Input/MultiSelectInput/MultiSelectInput.tsx

@@ -150,17 +150,24 @@ type MultiMultiSelectInputProps = Override<
      * Callback called when the user hit enter on the field.
      */
     onSubmit?: () => void;
-
-    /**
-     * Handler called when the next page is almost reached.
-     */
-    onNextPage?: () => void;
-
-    /**
-     * Handler called when the search value changed
-     */
-    onSearchChange?: (searchValue: string) => void;
-  }
+  } & (
+      | {
+          /**
+           * Handler called when the next page is almost reached.
+           */
+          onNextPage?: () => void;
+          /**
+           * Handler called when the search value changed
+           */
+          onSearchChange?: (searchValue: string) => void;
+          disableInternalSearch?: false;
+        }
+      | {
+          onNextPage: () => void;
+          onSearchChange: (searchValue: string) => void;
+          disableInternalSearch: true;
+        }
+    )
 >;
 
 /**
@@ -183,6 +190,7 @@ const MultiSelectInput = ({
   verticalPosition,
   onNextPage,
   onSearchChange,
+  disableInternalSearch = false,
   'aria-labelledby': ariaLabelledby,
   ...rest
 }: MultiMultiSelectInputProps) => {
@@ -211,12 +219,14 @@ const MultiSelectInput = ({
     return indexedChips;
   }, {});
 
-  const filteredChildren = validChildren.filter(({props}) => {
-    const childValue = props.value;
-    const optionValue = childValue + props.children;
+  const filteredChildren = disableInternalSearch
+    ? validChildren
+    : validChildren.filter(({props}) => {
+        const childValue = props.value;
+        const optionValue = childValue + props.children;
 
-    return !value.includes(childValue) && optionValue.toLowerCase().includes(searchValue.toLowerCase());
-  });
+        return !value.includes(childValue) && optionValue.toLowerCase().includes(searchValue.toLowerCase());
+      });
 
   const handleEnter = () => {
     if (filteredChildren.length > 0 && dropdownIsOpen) {