feat(TextInputMapper): support various input types (#622)

Author: tenphi

.changeset/odd-cycles-attend.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Show placeholder in TextInput or TextArea with type password.

.changeset/popular-taxis-double.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Add support for `autocomplete` attribute in TextInput.

.changeset/shiny-icons-leave.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Add support for Combobox, TextArea and Password fields in TextInputMapper.

src/components/fields/ComboBox/ComboBox.tsx

@@ -107,6 +107,12 @@ export interface CubeComboBoxProps<T>
     >,
     AriaComboBoxProps<T>,
     AriaTextFieldProps {
+  defaultSelectedKey?: string;
+  selectedKey?: string;
+  onSelectionChange?: (selectedKey: string) => void;
+  onInputChange?: (inputValue: string) => void;
+  inputValue?: string;
+  placeholder?: string;
   icon?: ReactElement;
   multiLine?: boolean;
   autoComplete?: string;

src/components/fields/TextInput/TextInputBase.tsx

@@ -202,6 +202,7 @@ export interface CubeTextInputBaseProps
   resize?: Styles['resize'];
   /** The size of the input */
   size?: 'small' | 'default' | 'large' | (string & {});
+  autocomplete?: string;
 }
 
 function _TextInputBase(props: CubeTextInputBaseProps, ref) {
@@ -240,6 +241,7 @@ function _TextInputBase(props: CubeTextInputBaseProps, ref) {
     tooltip,
     rows = 1,
     size,
+    autocomplete,
     icon,
     maxLength,
     minLength,
@@ -327,12 +329,13 @@ function _TextInputBase(props: CubeTextInputBaseProps, ref) {
   );
 
   const hasTextSecurity = multiLine && type === 'password';
-  const textSecurityStyles = hasTextSecurity
-    ? {
-        fontFamily: 'text-security-disc',
-        WebkitTextSecurity: 'disc',
-      }
-    : {};
+  const textSecurityStyles =
+    hasTextSecurity && inputProps.value?.length
+      ? {
+          fontFamily: 'text-security-disc',
+          WebkitTextSecurity: 'disc',
+        }
+      : {};
 
   const textField = (
     <InputWrapperElement
@@ -352,6 +355,7 @@ function _TextInputBase(props: CubeTextInputBaseProps, ref) {
         style={textSecurityStyles}
         autoFocus={autoFocus}
         data-size={size}
+        autocomplete={autocomplete}
         styles={inputStyles}
         disabled={!!isDisabled}
         maxLength={maxLength}

src/components/fields/TextInputMapper/TextInputMapper.stories.tsx

@@ -84,3 +84,31 @@ WithinForm.args = {};
 
 export const WithinFormInputSync = FormTemplateSync.bind({});
 WithinFormInputSync.args = {};
+
+export const WithComboBoxKeyAndValue = Template.bind({});
+WithComboBoxKeyAndValue.args = {
+  value: { 'Option 1': 'Option 2' },
+  keyProps: {
+    inputType: 'combobox',
+    menuTrigger: 'focus',
+    options: ['Option 1', 'Option 2', 'Option 3'],
+  },
+  valueProps: {
+    inputType: 'combobox',
+    options: ['Option 1', 'Option 2', 'Option 3'],
+  },
+};
+WithComboBoxKeyAndValue.play = WithValueAndNewMapping.play;
+
+export const WithPassword = Template.bind({});
+WithPassword.args = {
+  value: { 'Key 1': 'Hidden' },
+  keyProps: { autocomplete: 'off' },
+  valueProps: { inputType: 'password', autocomplete: 'off' },
+};
+
+export const WithTextArea = Template.bind({});
+WithTextArea.args = {
+  value: { 'Key 1': 'Line 1\nLine 2' },
+  valueProps: { inputType: 'textarea' },
+};

src/components/fields/TextInputMapper/TextInputMapper.tsx

@@ -11,14 +11,17 @@ import {
 
 import { useEvent } from '../../../_internal/hooks';
 import { FieldBaseProps } from '../../../shared';
-import { mergeProps, useCombinedRefs } from '../../../utils/react/index';
+import { mergeProps, useCombinedRefs } from '../../../utils/react';
 import { useFieldProps, useFormProps, wrapWithField } from '../../form';
 import { CloseIcon, PlusIcon } from '../../../icons';
 import { Button } from '../../actions';
 import { Block } from '../../Block';
 import { Flow } from '../../layout/Flow';
 import { Grid } from '../../layout/Grid';
 import { Space } from '../../layout/Space';
+import { ComboBox } from '../ComboBox';
+import { PasswordInput } from '../PasswordInput/PasswordInput';
+import { TextArea } from '../TextArea/index';
 import { TextInput } from '../TextInput';
 
 type Mapping = {
@@ -32,9 +35,11 @@ export interface CubeTextInputMapperProps extends FieldBaseProps {
   isDisabled?: boolean;
   value?: Record<string, string>;
   onChange?: (value: Record<string, string> | undefined) => void;
+  KeyComponent?: ComponentType<CubeTextInputMapperInputProps>;
   ValueComponent?: ComponentType<CubeTextInputMapperInputProps>;
   keyProps?: Partial<CubeTextInputMapperInputProps>;
   valueProps?: Partial<CubeTextInputMapperInputProps>;
+  allowsCustomValue?: boolean;
 }
 
 // Rewrites upper level field component styles
@@ -89,6 +94,7 @@ function TextInputMapper(
     onChange,
     keyProps,
     valueProps,
+    KeyComponent,
     ValueComponent,
   } = props;
 
@@ -174,6 +180,7 @@ function TextInputMapper(
     );
   }, [mappings]);
 
+  KeyComponent = KeyComponent ?? TextInputMapperInput;
   ValueComponent = ValueComponent ?? TextInputMapperInput;
 
   const onKeyChange = useEvent((id: number, value: string) => {
@@ -218,11 +225,11 @@ function TextInputMapper(
           columns="minmax(0, 1fr) minmax(0, 1fr) min-content"
           gap="1x"
         >
-          <TextInputMapperInput
+          <KeyComponent
             autoFocus={index === mappings.length - 1}
             id={id}
             isDisabled={isDisabled}
-            type="name"
+            fieldType="key"
             value={key}
             placeholder="Key"
             onChange={onKeyChange}
@@ -231,7 +238,7 @@ function TextInputMapper(
           />
           <ValueComponent
             id={id}
-            type="value"
+            fieldType="value"
             isDisabled={!key || isDisabled}
             value={value}
             placeholder="Value"
@@ -278,17 +285,29 @@ function TextInputMapper(
 
 export interface CubeTextInputMapperInputProps {
   id: number;
-  type: 'name' | 'value';
+  fieldType: 'key' | 'value';
+  inputType?: 'input' | 'combobox' | 'password' | 'textarea';
   value?: string;
+  options?: string[];
   placeholder?: string;
   onChange?: (id: number, newValue: string) => void;
   onSubmit?: (id: number) => void;
   isDisabled?: boolean;
   autoFocus?: boolean;
+  allowsCustomValue?: boolean;
 }
 
 function TextInputMapperInput(props: CubeTextInputMapperInputProps) {
-  const { id, type, value, placeholder, ...rest } = props;
+  const {
+    id,
+    fieldType,
+    inputType = 'input',
+    options,
+    value,
+    placeholder,
+    allowsCustomValue,
+    ...rest
+  } = props;
 
   const onChange = useEvent((newValue: string) => {
     props.onChange?.(id, newValue);
@@ -298,10 +317,51 @@ function TextInputMapperInput(props: CubeTextInputMapperInputProps) {
     props.onSubmit?.(id);
   });
 
+  const onSelectionChange = useEvent((newValue: string) => {
+    if (!allowsCustomValue && !options?.includes(newValue)) {
+      props.onChange?.(id, '');
+    } else {
+      props.onChange?.(id, newValue);
+    }
+
+    props.onSubmit?.(id);
+  });
+
+  const Component = {
+    input: TextInput,
+    textarea: TextArea,
+    password: PasswordInput,
+  }[inputType];
+
+  if (inputType === 'combobox') {
+    return (
+      <ComboBox
+        qa="AddMapping"
+        data-type={fieldType}
+        width="auto"
+        {...mergeProps(rest, PROPS_GRID_HACK)}
+        id={undefined}
+        inputValue={value}
+        selectedKey={value}
+        labelPosition="top"
+        aria-label={placeholder}
+        placeholder={placeholder}
+        onInputChange={onChange}
+        onSelectionChange={onSelectionChange}
+      >
+        {(options ?? []).map((option) => (
+          <ComboBox.Item key={option}>{option}</ComboBox.Item>
+        ))}
+      </ComboBox>
+    );
+  }
+
   return (
-    <TextInput
+    <Component
       qa="AddMapping"
+      data-type={fieldType}
       width="auto"
+      rows={1}
       {...mergeProps(rest, PROPS_GRID_HACK)}
       id={undefined}
       value={value}