Merge branch 'IDTEAM-improve-member-field-UX' into 'main'

[IDTEAM-4723] ListField improvements

See merge request web/clients!16847

Author: MargeBot

packages/pass/components/Form/Field/Layout/FieldBox.tsx

@@ -24,6 +24,7 @@ export type FieldBoxProps = {
     icon?: IconName | ReactElement;
     unstyled?: boolean;
     onClick?: MouseEventHandler;
+    onMouseDown?: MouseEventHandler;
 };
 
 const stopOnClickPropagation = (nodes: MaybeArray<ReactElement>): MaybeArray<ReactElement> =>
@@ -56,6 +57,7 @@ const FieldBoxRender: ForwardRefRenderFunction<HTMLDivElement, FieldBoxProps> =
             className={clsx('pass-field-box flex flex-nowrap items-start', !props.unstyled && 'px-4 py-3', className)}
             ref={ref}
             onClick={props.onClick}
+            onMouseDown={props.onMouseDown}
         >
             {icon && (
                 <span

packages/pass/components/Form/Field/ListField.scss

@@ -1,4 +1,8 @@
-li.pass-field-text-group--item {
+@import '~@proton/styles/scss/lib';
+
+$base: 'pass-field-text-group--item';
+
+li.#{$base} {
 	background-color: var(--interaction-norm-minor-1);
 	transition: background-color 0.2s;
 
@@ -16,13 +20,40 @@ li.pass-field-text-group--item {
 
 		span {
 			user-select: text;
+			white-space: nowrap;
 
 			&:focus {
 				outline: none;
 				color: var(--interaction-weak-contrast);
 			}
 		}
+
+		.#{$base}-delete {
+			display: none;
+			padding: em(2);
+			block-size: em(20);
+			inline-size: em(20);
+			inset-inline-end: em(2.5);
+		}
+	}
+
+	&:not(&#{'\\:editing'}) {
+		button:hover {
+			span {
+				inline-size: calc(100% - em(15));
+				text-overflow: ellipsis;
+			}
+
+			.#{$base}-delete {
+				display: block;
+			}
+		}
 	}
+
+	&#{'\\:editing'} {
+		background-color: transparent;
+	}
+
 	&#{'\\:error'} {
 		background-color: transparent;
 		border-color: var(--signal-danger);

packages/pass/components/Form/Field/ListField.tsx

@@ -106,6 +106,7 @@ export const ListField = <
                 evt.preventDefault();
                 inputRef.current?.focus();
             }}
+            onMouseDown={(evt) => evt.preventDefault()}
         >
             {label && (
                 <label
@@ -194,6 +195,7 @@ export const ListField = <
                                     onChange={onChange(idx, entry)}
                                     onMoveLeft={onMoveLeft(idx)}
                                     onMoveRight={onMoveRight(idx)}
+                                    onDelete={() => helpers.remove(idx)}
                                     renderValue={fieldValue}
                                 />
                             ))}

packages/pass/components/Form/Field/ListFieldItem.tsx

@@ -2,7 +2,8 @@
 import type { KeyboardEventHandler } from 'react';
 import { useRef, useState } from 'react';
 
-import { CircleLoader } from '@proton/atoms';
+import { ButtonLike, CircleLoader } from '@proton/atoms';
+import { Icon } from '@proton/components/index';
 import clsx from '@proton/utils/clsx';
 
 import type { ListFieldValue } from './ListField';
@@ -11,6 +12,7 @@ export type ListFieldItemProps<T> = ListFieldValue<T> & {
     error?: boolean;
     loading: boolean;
     onChange: (value: string) => void;
+    onDelete: () => void;
     onMoveLeft: () => void;
     onMoveRight: () => void;
     renderValue: (value: T) => string;
@@ -37,6 +39,7 @@ export const ListFieldItem = <T,>({
     loading,
     value,
     onChange,
+    onDelete,
     onMoveLeft,
     onMoveRight,
     renderValue,
@@ -88,11 +91,12 @@ export const ListFieldItem = <T,>({
             className={clsx(
                 'pass-field-text-group--item flex flex-nowrap flex-row max-w-full overflow-hidden stop-propagation border rounded',
                 error && 'pass-field-text-group--item:error',
-                loading && 'pass-field-text-group--item:loading'
+                loading && 'pass-field-text-group--item:loading',
+                editing && 'pass-field-text-group--item:editing'
             )}
         >
             <button
-                className="pill-remove inline-flex flex-nowrap items-center px-2 py-1 max-w-full gap-2"
+                className="pill-remove inline-flex flex-nowrap items-center px-2 py-1 max-w-full gap-2 relative"
                 type="button"
                 tabIndex={-1}
             >
@@ -101,6 +105,7 @@ export const ListFieldItem = <T,>({
                     onBlur={handleBlur}
                     onFocus={() => setEditing(true)}
                     onClick={(e) => e.stopPropagation()}
+                    onMouseDown={(e) => e.stopPropagation()}
                     contentEditable
                     onKeyDown={handleKeyDown}
                     ref={ref}
@@ -110,7 +115,25 @@ export const ListFieldItem = <T,>({
                 >
                     {renderValue(value)}
                 </span>
+
                 {loading && <CircleLoader size="small" className="shrink-0" />}
+
+                {!loading && (
+                    <ButtonLike
+                        as="a"
+                        className="pass-field-text-group--item-delete flex absolute"
+                        shape="ghost"
+                        pill
+                        icon
+                        onClick={(evt) => {
+                            evt.preventDefault();
+                            evt.stopPropagation();
+                            onDelete();
+                        }}
+                    >
+                        <Icon name="cross" className="shrink-0" />
+                    </ButtonLike>
+                )}
             </button>
         </li>
     );

packages/pass/components/Invite/Steps/InviteStepMembers.tsx

@@ -131,7 +131,7 @@ export const InviteStepMembers = forwardRef<HTMLInputElement, Props>(
                                 </>
                             );
                         }}
-                        onAutocomplete={setAutocomplete}
+                        onAutocomplete={(value) => setAutocomplete(value.trim())}
                     />
                 </FieldsetCluster>