fix(TextInputMapper): add keyboard interaction

Author: tenphi

src/components/fields/TextInputMapper/TextInputMapper.tsx

@@ -1,6 +1,8 @@
 import {
   ComponentType,
+  ForwardedRef,
   forwardRef,
+  KeyboardEvent,
   useEffect,
   useMemo,
   useRef,
@@ -9,7 +11,7 @@ import {
 
 import { useEvent } from '../../../_internal/hooks';
 import { FieldBaseProps } from '../../../shared';
-import { mergeProps } from '../../../utils/react/index';
+import { mergeProps, useCombinedRefs } from '../../../utils/react/index';
 import { useFieldProps, useFormProps, wrapWithField } from '../../form';
 import { CloseIcon, PlusIcon } from '../../../icons';
 import { Button } from '../../actions';
@@ -63,7 +65,12 @@ function removeDuplicates(mappings: Mapping[]) {
   });
 }
 
-function TextInputMapper(props: CubeTextInputMapperProps, ref: any) {
+function TextInputMapper(
+  props: CubeTextInputMapperProps,
+  ref: ForwardedRef<HTMLDivElement>,
+) {
+  ref = useCombinedRefs(ref);
+
   props = useFormProps(props);
   props = useFieldProps(props, {
     defaultValidationTrigger: 'onChange',
@@ -122,7 +129,7 @@ function TextInputMapper(props: CubeTextInputMapperProps, ref: any) {
   const onMappingsChange = useEvent((newMappings: Mapping[]) => {
     const newValue = newMappings.reduce(
       (acc, { key, value }) => {
-        acc[key] = value;
+        acc[key.trim()] = value.trim();
 
         return acc;
       },
@@ -136,8 +143,25 @@ function TextInputMapper(props: CubeTextInputMapperProps, ref: any) {
     } else {
       onChange?.(newValue);
     }
+
+    const updatedMappings = extractLocalValues(newValue ?? {}, newMappings);
+
+    if (JSON.stringify(updatedMappings) !== JSON.stringify(mappings)) {
+      setMappings(updatedMappings);
+    }
   });
 
+  // useEffect(() => {
+  //   // focus on the last non-disabled input
+  //   setTimeout(() => {
+  //     (
+  //       ref?.current?.querySelector(
+  //         '[data-qa="Mapping"]:last-child input:not([disabled])',
+  //       ) as HTMLInputElement
+  //     )?.focus();
+  //   }, 100);
+  // }, [mappings.length]);
+
   const addNewMapping = useEvent(() => {
     setMappings((prev) => {
       return [...prev, { key: '', value: '', id: counterRef.current++ }];
@@ -176,17 +200,26 @@ function TextInputMapper(props: CubeTextInputMapperProps, ref: any) {
     onMappingsChange(mappings);
   });
 
+  const onKeyDown = useEvent((e: KeyboardEvent<HTMLDivElement>) => {
+    // if Ctrl+Enter or Cmd+Enter is pressed then add new mapping if that's enabled
+    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter' && showNewButton) {
+      addNewMapping();
+    }
+  });
+
   const renderedMappings = useMemo(() => {
-    return mappings.map((mapping) => {
+    return mappings.map((mapping, index) => {
       const { key, value, id } = mapping;
 
       return (
         <Grid
           key={id}
+          qa="Mapping"
           columns="minmax(0, 1fr) minmax(0, 1fr) min-content"
           gap="1x"
         >
           <TextInputMapperInput
+            autoFocus={index === mappings.length - 1}
             id={id}
             isDisabled={isDisabled}
             type="name"
@@ -222,8 +255,10 @@ function TextInputMapper(props: CubeTextInputMapperProps, ref: any) {
   }, [JSON.stringify(mappings)]);
 
   const element = (
-    <Flow gap="1x">
-      {[...renderedMappings]}
+    <Flow ref={ref} gap="1x">
+      <Flow gap="1x" onKeyDown={onKeyDown}>
+        {[...renderedMappings]}
+      </Flow>
       {showNewButton ? (
         <Space gap={0}>
           {/** Hotfix for inconsistent alignment with the label **/}
@@ -251,6 +286,7 @@ export interface CubeTextInputMapperInputProps {
   onChange?: (id: number, newValue: string) => void;
   onSubmit?: (id: number) => void;
   isDisabled?: boolean;
+  autoFocus?: boolean;
 }
 
 function TextInputMapperInput(props: CubeTextInputMapperInputProps) {

src/components/layout/Flex.tsx

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 
 import {
-  BaseProps,
+  AllBaseProps,
   CONTAINER_STYLES,
   ContainerStyleProps,
   extractStyles,
@@ -16,7 +16,7 @@ const FlexElement = tasty({
   },
 });
 
-export interface CubeFlexProps extends BaseProps, ContainerStyleProps {}
+export interface CubeFlexProps extends AllBaseProps, ContainerStyleProps {}
 
 export const Flex = forwardRef(function Flex(props: CubeFlexProps, ref) {
   const styles = extractStyles(props, CONTAINER_STYLES);

src/components/layout/Flow.tsx

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 
 import {
-  BaseProps,
+  AllBaseProps,
   CONTAINER_STYLES,
   ContainerStyleProps,
   extractStyles,
@@ -18,7 +18,7 @@ const FlowElement = tasty({
 
 const STYLE_PROPS = CONTAINER_STYLES;
 
-export interface CubeFlowProps extends BaseProps, ContainerStyleProps {}
+export interface CubeFlowProps extends AllBaseProps, ContainerStyleProps {}
 
 export const Flow = forwardRef(function Flow(props: CubeFlowProps, ref) {
   const styles = extractStyles(props, STYLE_PROPS);

src/components/layout/Grid.tsx

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 
 import {
-  BaseProps,
+  AllBaseProps,
   CONTAINER_STYLES,
   ContainerStyleProps,
   extractStyles,
@@ -18,7 +18,7 @@ const GridElement = tasty({
 });
 
 export interface CubeGridProps
-  extends BaseProps,
+  extends Omit<AllBaseProps, 'rows'>,
     ContainerStyleProps,
     ShortGridStyles {}
 

src/components/layout/Space.tsx

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 
 import {
-  BaseProps,
+  AllBaseProps,
   CONTAINER_STYLES,
   ContainerStyleProps,
   extractStyles,
@@ -24,7 +24,7 @@ const SpaceElement = tasty({
   },
 });
 
-export interface CubeSpaceProps extends BaseProps, ContainerStyleProps {
+export interface CubeSpaceProps extends AllBaseProps, ContainerStyleProps {
   direction?: 'vertical' | 'horizontal';
 }
 

src/tasty/types.ts

@@ -80,10 +80,10 @@ export interface BasePropsWithoutChildren
   theme?: 'default' | 'danger' | 'special' | (string & {});
 }
 
-export interface BaseProps
+export interface BaseProps<K extends keyof HTMLElementTagNameMap = 'div'>
   extends AriaLabelingProps,
     BasePropsWithoutChildren,
-    Pick<AllHTMLAttributes<HTMLElementTagNameMap['div']>, 'children'> {}
+    Pick<AllHTMLAttributes<HTMLElementTagNameMap[K]>, 'children'> {}
 
 export interface AllBaseProps<K extends keyof HTMLElementTagNameMap = 'div'>
   extends BaseProps,
@@ -98,7 +98,7 @@ export interface AllBaseProps<K extends keyof HTMLElementTagNameMap = 'div'>
       | 'height'
       | 'width'
     > {
-  as?: string;
+  as?: K;
 }
 
 export type BaseStyleProps = Pick<Styles, (typeof BASE_STYLES)[number]>;