@cube-dev/ui-kit 0.182.0 → 0.184.0

package/dist/components/fields/TextInputMapper/TextInputMapper.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
@@ -16,6 +16,7 @@ import { _PasswordInput } from "../PasswordInput/PasswordInput.js";
 import { _TextArea } from "../TextArea/TextArea.js";
 import { ComboBox } from "../ComboBox/ComboBox.js";
 import { PlusIcon } from "../../../icons/PlusIcon.js";
+import { c } from "react-compiler-runtime";
 import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -43,36 +44,36 @@ function TextInputMapper(props, ref) {
 		})
 	});
 	const counterRef = useRef(0);
-	let { qa, isDisabled, isInvalid, isValid, actionLabel, value, onChange, keyProps, valueProps, KeyComponent, ValueComponent, size = "medium", form } = props;
-	function extractLocalValues(value, localValues) {
-		const valueKeys = Object.keys(value);
-		localValues.map(({ key }) => key).forEach((key) => {
-			if (!valueKeys.includes(key) && key !== "") localValues = localValues.filter(({ key: k }) => k !== key);
+	let { qa, isDisabled, isInvalid, isValid, actionLabel, value: value_0, onChange: onChange_0, keyProps, valueProps, KeyComponent, ValueComponent, size = "medium", form } = props;
+	function extractLocalValues(value_1, localValues) {
+		const valueKeys = Object.keys(value_1);
+		localValues.map(({ key }) => key).forEach((key_0) => {
+			if (!valueKeys.includes(key_0) && key_0 !== "") localValues = localValues.filter(({ key: k }) => k !== key_0);
 		});
-		Object.entries(value ?? {}).forEach(([key, value]) => {
-			const exist = localValues.find(({ key: k }) => k === key);
-			if (exist) exist.value = value;
+		Object.entries(value_1 ?? {}).forEach(([key_1, value_2]) => {
+			const exist = localValues.find(({ key: k_0 }) => k_0 === key_1);
+			if (exist) exist.value = value_2;
 			else localValues.push({
-				key,
-				value,
+				key: key_1,
+				value: value_2,
 				id: counterRef.current++
 			});
 		});
 		return removeDuplicates(localValues);
 	}
 	const [mappings, setMappings] = useState(() => {
-		return extractLocalValues(value ?? {}, []);
+		return extractLocalValues(value_0 ?? {}, []);
 	});
 	useEffect(() => {
-		setMappings(extractLocalValues(value ?? {}, mappings));
-	}, [JSON.stringify(value)]);
+		setMappings(extractLocalValues(value_0 ?? {}, mappings));
+	}, [JSON.stringify(value_0)]);
 	const onMappingsChange = useEvent((newMappings) => {
-		const newValue = newMappings.reduce((acc, { key, value }) => {
-			acc[key.trim()] = value.trim();
+		const newValue = newMappings.reduce((acc, { key: key_2, value: value_3 }) => {
+			acc[key_2.trim()] = value_3.trim();
 			return acc;
 		}, {});
-		if (!Object.keys(newValue).length) onChange?.(void 0);
-		else onChange?.(newValue);
+		if (!Object.keys(newValue).length) onChange_0?.(void 0);
+		else onChange_0?.(newValue);
 		const updatedMappings = extractLocalValues(newValue ?? {}, newMappings);
 		if (JSON.stringify(updatedMappings) !== JSON.stringify(mappings)) setMappings(updatedMappings);
 	});
@@ -86,19 +87,19 @@ function TextInputMapper(props, ref) {
 		});
 	});
 	const showNewButton = useMemo(() => {
-		return !mappings.length || !mappings.some(({ key, value }) => !key || !value);
+		return !mappings.length || !mappings.some(({ key: key_3, value: value_4 }) => !key_3 || !value_4);
 	}, [mappings]);
 	KeyComponent = KeyComponent ?? TextInputMapperInput;
 	ValueComponent = ValueComponent ?? TextInputMapperInput;
-	const onKeyChange = useEvent((id, value) => {
+	const onKeyChange = useEvent((id, value_5) => {
 		mappings.forEach((mapping) => {
-			if (mapping.id === id) mapping.key = value;
+			if (mapping.id === id) mapping.key = value_5;
 		});
 		setMappings([...mappings]);
 	});
-	const onValueChange = useEvent((id, value) => {
-		mappings.forEach((mapping) => {
-			if (mapping.id === id) mapping.value = value;
+	const onValueChange = useEvent((id_0, value_6) => {
+		mappings.forEach((mapping_0) => {
+			if (mapping_0.id === id_0) mapping_0.value = value_6;
 		});
 		setMappings([...mappings]);
 	});
@@ -109,8 +110,8 @@ function TextInputMapper(props, ref) {
 		if ((e.ctrlKey || e.metaKey) && e.key === "Enter" && showNewButton) addNewMapping();
 	});
 	const renderedMappings = useMemo(() => {
-		return mappings.map((mapping, index) => {
-			const { key, value, id } = mapping;
+		return mappings.map((mapping_1, index) => {
+			const { key: key_4, value: value_7, id: id_1 } = mapping_1;
 			return /* @__PURE__ */ jsxs(Grid, {
 				qa: "Mapping",
 				columns: "minmax(0, 1fr) minmax(0, 1fr) min-content",
@@ -118,12 +119,12 @@ function TextInputMapper(props, ref) {
 				children: [
 					/* @__PURE__ */ jsx(KeyComponent, {
 						autoFocus: index === mappings.length - 1,
-						id,
+						id: id_1,
 						isDisabled,
 						isInvalid,
 						isValid,
 						fieldType: "key",
-						value: key,
+						value: key_4,
 						placeholder: t("textInputMapper.key", "Key"),
 						size,
 						onChange: onKeyChange,
@@ -131,12 +132,12 @@ function TextInputMapper(props, ref) {
 						...keyProps
 					}),
 					/* @__PURE__ */ jsx(ValueComponent, {
-						id,
+						id: id_1,
 						fieldType: "value",
-						isDisabled: !key || isDisabled,
+						isDisabled: !key_4 || isDisabled,
 						isInvalid,
 						isValid,
-						value,
+						value: value_7,
 						placeholder: t("textInputMapper.value", "Value"),
 						size,
 						onChange: onValueChange,
@@ -150,12 +151,12 @@ function TextInputMapper(props, ref) {
 						size,
 						icon: /* @__PURE__ */ jsx(CloseIcon, {}),
 						onPress: () => {
-							setMappings(mappings.filter((m) => m.id !== id));
-							onMappingsChange(mappings.filter((m) => m.id !== id));
+							setMappings(mappings.filter((m) => m.id !== id_1));
+							onMappingsChange(mappings.filter((m_0) => m_0.id !== id_1));
 						}
 					})
 				]
-			}, id);
+			}, id_1);
 		});
 	}, [
 		JSON.stringify(mappings),
@@ -189,55 +190,127 @@ function TextInputMapper(props, ref) {
 	}), ref, props);
 }
 function TextInputMapperInput(props) {
-	const { id, fieldType, inputType = "input", options, value, size = "medium", placeholder, allowsCustomValue, ...rest } = props;
-	const onChange = useEvent((newValue) => {
-		props.onChange?.(id, newValue);
-	});
-	const onBlur = useEvent(() => {
-		props.onSubmit?.(id);
-	});
-	const onSelectionChange = useEvent((newValue) => {
-		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 /* @__PURE__ */ jsx(ComboBox, {
-		qa: "AddMapping",
-		"data-type": fieldType,
-		width: "auto",
-		size,
-		...mergeProps(rest, PROPS_GRID_HACK),
-		id: void 0,
-		inputValue: value,
-		selectedKey: value,
-		labelPosition: "top",
-		"aria-label": placeholder,
-		placeholder,
-		allowsCustomValue,
-		onInputChange: onChange,
-		onSelectionChange: (val) => onSelectionChange(val ?? ""),
-		children: (options ?? []).map((option) => /* @__PURE__ */ jsx(ComboBox.Item, { children: option }, option))
-	});
-	return /* @__PURE__ */ jsx(Component, {
-		qa: "AddMapping",
-		"data-type": fieldType,
-		width: "auto",
-		rows: 1,
-		size,
-		...mergeProps(rest, PROPS_GRID_HACK),
-		id: void 0,
-		value,
-		labelPosition: "top",
-		"aria-label": placeholder,
-		placeholder,
-		onChange,
-		onBlur
-	});
+	const $ = c(27);
+	const { id, fieldType, inputType: t0, options, value, size: t1, placeholder, allowsCustomValue, ...rest } = props;
+	const inputType = t0 === void 0 ? "input" : t0;
+	const size = t1 === void 0 ? "medium" : t1;
+	let t2;
+	if ($[0] !== id || $[1] !== props) {
+		t2 = (newValue) => {
+			props.onChange?.(id, newValue);
+		};
+		$[0] = id;
+		$[1] = props;
+		$[2] = t2;
+	} else t2 = $[2];
+	const onChange = useEvent(t2);
+	let t3;
+	if ($[3] !== id || $[4] !== props) {
+		t3 = () => {
+			props.onSubmit?.(id);
+		};
+		$[3] = id;
+		$[4] = props;
+		$[5] = t3;
+	} else t3 = $[5];
+	const onBlur = useEvent(t3);
+	let t4;
+	if ($[6] !== allowsCustomValue || $[7] !== id || $[8] !== options || $[9] !== props) {
+		t4 = (newValue_0) => {
+			if (!allowsCustomValue && !options?.includes(newValue_0)) props.onChange?.(id, "");
+			else props.onChange?.(id, newValue_0);
+			props.onSubmit?.(id);
+		};
+		$[6] = allowsCustomValue;
+		$[7] = id;
+		$[8] = options;
+		$[9] = props;
+		$[10] = t4;
+	} else t4 = $[10];
+	const onSelectionChange = useEvent(t4);
+	let t5;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = {
+			input: TextInput,
+			textarea: _TextArea,
+			password: _PasswordInput
+		};
+		$[11] = t5;
+	} else t5 = $[11];
+	const Component = t5[inputType];
+	if (inputType === "combobox") {
+		const t6 = mergeProps(rest, PROPS_GRID_HACK);
+		let t7;
+		if ($[12] !== onSelectionChange) {
+			t7 = (val) => onSelectionChange(val ?? "");
+			$[12] = onSelectionChange;
+			$[13] = t7;
+		} else t7 = $[13];
+		let t8;
+		if ($[14] !== options) {
+			t8 = options ?? [];
+			$[14] = options;
+			$[15] = t8;
+		} else t8 = $[15];
+		let t9;
+		if ($[16] !== t8) {
+			t9 = t8.map(_temp);
+			$[16] = t8;
+			$[17] = t9;
+		} else t9 = $[17];
+		return /* @__PURE__ */ jsx(ComboBox, {
+			qa: "AddMapping",
+			"data-type": fieldType,
+			width: "auto",
+			size,
+			...t6,
+			id: void 0,
+			inputValue: value,
+			selectedKey: value,
+			labelPosition: "top",
+			"aria-label": placeholder,
+			placeholder,
+			allowsCustomValue,
+			onInputChange: onChange,
+			onSelectionChange: t7,
+			children: t9
+		});
+	}
+	const t6 = "AddMapping";
+	const t7 = "auto";
+	const t8 = 1;
+	const t9 = mergeProps(rest, PROPS_GRID_HACK);
+	let t10;
+	if ($[18] !== Component || $[19] !== fieldType || $[20] !== onBlur || $[21] !== onChange || $[22] !== placeholder || $[23] !== size || $[24] !== t9 || $[25] !== value) {
+		t10 = /* @__PURE__ */ jsx(Component, {
+			qa: t6,
+			"data-type": fieldType,
+			width: t7,
+			rows: t8,
+			size,
+			...t9,
+			id: void 0,
+			value,
+			labelPosition: "top",
+			"aria-label": placeholder,
+			placeholder,
+			onChange,
+			onBlur
+		});
+		$[18] = Component;
+		$[19] = fieldType;
+		$[20] = onBlur;
+		$[21] = onChange;
+		$[22] = placeholder;
+		$[23] = size;
+		$[24] = t9;
+		$[25] = value;
+		$[26] = t10;
+	} else t10 = $[26];
+	return t10;
+}
+function _temp(option) {
+	return /* @__PURE__ */ jsx(ComboBox.Item, { children: option }, option);
 }
 const _TextInputMapper = forwardRef(TextInputMapper);
 _TextInputMapper.displayName = "TextInputMapper";

package/dist/components/fields/TextInputMapper/TextInputMapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInputMapper.js","names":["TextArea","PasswordInput"],"sources":["../../../../src/components/fields/TextInputMapper/TextInputMapper.tsx"],"sourcesContent":["import {\n  ComponentType,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEvent,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { useI18n } from '../../../i18n';\nimport { CloseIcon } from '../../../icons/CloseIcon';\nimport { PlusIcon } from '../../../icons/PlusIcon';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps, useCombinedRefs } from '../../../utils/react';\nimport { Button } from '../../actions';\nimport { Block } from '../../Block';\nimport { useFieldProps, wrapWithField } from '../../form';\nimport { Flow } from '../../layout/Flow';\nimport { Grid } from '../../layout/Grid';\nimport { Space } from '../../layout/Space';\nimport { ComboBox } from '../ComboBox';\nimport { PasswordInput } from '../PasswordInput/PasswordInput';\nimport { TextArea } from '../TextArea/index';\nimport { TextInput } from '../TextInput';\n\ntype Mapping = {\n  key: string;\n  value: string;\n  id: number;\n};\n\nexport interface CubeTextInputMapperProps\n  extends FieldBaseProps<Record<string, string> | null | undefined> {\n  qa?: string;\n  actionLabel?: string;\n  isDisabled?: boolean;\n  value?: Record<string, string>;\n  onChange?: (value: Record<string, string> | undefined) => void;\n  KeyComponent?: ComponentType<CubeTextInputMapperInputProps>;\n  ValueComponent?: ComponentType<CubeTextInputMapperInputProps>;\n  keyProps?: Partial<CubeTextInputMapperInputProps>;\n  valueProps?: Partial<CubeTextInputMapperInputProps>;\n  allowsCustomValue?: boolean;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n}\n\n// Rewrites upper level field component styles\n// @TODO: Remove this after the release of new Element API\nconst PROPS_GRID_HACK = {\n  styles: {\n    InputArea: {\n      gridColumn: {\n        '': 'auto',\n        'has-sider': 'auto',\n      },\n    },\n  },\n};\n\n// remove duplicates in mappings\nfunction removeDuplicates(mappings: Mapping[]) {\n  const keys = new Set<string>();\n\n  return mappings.filter(({ key }) => {\n    if (keys.has(key)) {\n      return false;\n    }\n\n    keys.add(key);\n\n    return true;\n  });\n}\n\nfunction TextInputMapper(\n  props: CubeTextInputMapperProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { t } = useI18n();\n\n  ref = useCombinedRefs(ref);\n\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value != null ? value : {},\n      onChange: onChange,\n    }),\n  });\n\n  const counterRef = useRef(0);\n\n  let {\n    qa,\n    isDisabled,\n    isInvalid,\n    isValid,\n    actionLabel,\n    value,\n    onChange,\n    keyProps,\n    valueProps,\n    KeyComponent,\n    ValueComponent,\n    size = 'medium',\n    form,\n  } = props;\n\n  function extractLocalValues(\n    value: Record<string, string>,\n    localValues: Mapping[],\n  ) {\n    const valueKeys = Object.keys(value);\n    const localKeys = localValues.map(({ key }) => key);\n\n    localKeys.forEach((key) => {\n      if (!valueKeys.includes(key) && key !== '') {\n        localValues = localValues.filter(({ key: k }) => k !== key);\n      }\n    });\n\n    Object.entries(value ?? {}).forEach(([key, value]) => {\n      const exist = localValues.find(({ key: k }) => k === key);\n\n      if (exist) {\n        exist.value = value;\n      } else {\n        localValues.push({ key, value, id: counterRef.current++ });\n      }\n    });\n\n    return removeDuplicates(localValues);\n  }\n\n  const [mappings, setMappings] = useState(() => {\n    return extractLocalValues(value ?? {}, []);\n  });\n\n  useEffect(() => {\n    setMappings(extractLocalValues(value ?? {}, mappings));\n  }, [JSON.stringify(value)]);\n\n  const onMappingsChange = useEvent((newMappings: Mapping[]) => {\n    const newValue = newMappings.reduce(\n      (acc, { key, value }) => {\n        acc[key.trim()] = value.trim();\n\n        return acc;\n      },\n      {} as Record<string, string>,\n    );\n\n    const keys = Object.keys(newValue);\n\n    if (!keys.length) {\n      onChange?.(undefined);\n    } else {\n      onChange?.(newValue);\n    }\n\n    const updatedMappings = extractLocalValues(newValue ?? {}, newMappings);\n\n    if (JSON.stringify(updatedMappings) !== JSON.stringify(mappings)) {\n      setMappings(updatedMappings);\n    }\n  });\n\n  // useEffect(() => {\n  //   // focus on the last non-disabled input\n  //   setTimeout(() => {\n  //     (\n  //       ref?.current?.querySelector(\n  //         '[data-qa=\"Mapping\"]:last-child input:not([disabled])',\n  //       ) as HTMLInputElement\n  //     )?.focus();\n  //   }, 100);\n  // }, [mappings.length]);\n\n  const addNewMapping = useEvent(() => {\n    setMappings((prev) => {\n      return [...prev, { key: '', value: '', id: counterRef.current++ }];\n    });\n  });\n\n  const showNewButton = useMemo(() => {\n    return (\n      !mappings.length || !mappings.some(({ key, value }) => !key || !value)\n    );\n  }, [mappings]);\n\n  KeyComponent = KeyComponent ?? TextInputMapperInput;\n  ValueComponent = ValueComponent ?? TextInputMapperInput;\n\n  const onKeyChange = useEvent((id: number, value: string) => {\n    mappings.forEach((mapping) => {\n      if (mapping.id === id) {\n        mapping.key = value;\n      }\n    });\n\n    setMappings([...mappings]);\n  });\n\n  const onValueChange = useEvent((id: number, value: string) => {\n    mappings.forEach((mapping) => {\n      if (mapping.id === id) {\n        mapping.value = value;\n      }\n    });\n\n    setMappings([...mappings]);\n  });\n\n  const onSubmit = useEvent(() => {\n    onMappingsChange(mappings);\n  });\n\n  const onKeyDown = useEvent((e: KeyboardEvent<HTMLDivElement>) => {\n    // if Ctrl+Enter or Cmd+Enter is pressed then add new mapping if that's enabled\n    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter' && showNewButton) {\n      addNewMapping();\n    }\n  });\n\n  const renderedMappings = useMemo(() => {\n    return mappings.map((mapping, index) => {\n      const { key, value, id } = mapping;\n\n      return (\n        <Grid\n          key={id}\n          qa=\"Mapping\"\n          columns=\"minmax(0, 1fr) minmax(0, 1fr) min-content\"\n          gap=\"1x\"\n        >\n          <KeyComponent\n            autoFocus={index === mappings.length - 1}\n            id={id}\n            isDisabled={isDisabled}\n            isInvalid={isInvalid}\n            isValid={isValid}\n            fieldType=\"key\"\n            value={key}\n            placeholder={t('textInputMapper.key', 'Key')}\n            size={size}\n            onChange={onKeyChange}\n            onSubmit={onSubmit}\n            {...keyProps}\n          />\n          <ValueComponent\n            id={id}\n            fieldType=\"value\"\n            isDisabled={!key || isDisabled}\n            isInvalid={isInvalid}\n            isValid={isValid}\n            value={value}\n            placeholder={t('textInputMapper.value', 'Value')}\n            size={size}\n            onChange={onValueChange}\n            onSubmit={onSubmit}\n            {...valueProps}\n          />\n          <Button\n            aria-label={t('textInputMapper.removeMapping', 'Remove mapping')}\n            theme=\"danger\"\n            type=\"clear\"\n            size={size}\n            icon={<CloseIcon />}\n            onPress={() => {\n              setMappings(mappings.filter((m) => m.id !== id));\n              onMappingsChange(mappings.filter((m) => m.id !== id));\n            }}\n          />\n        </Grid>\n      );\n    });\n  }, [JSON.stringify(mappings), t, isDisabled, isInvalid, isValid]);\n\n  const element = (\n    <Flow\n      ref={ref}\n      gap=\"1x\"\n      data-qa={qa || 'TextInputMapper'}\n      data-input-type=\"textinputmapper\"\n      onKeyDown={onKeyDown}\n    >\n      {[...renderedMappings]}\n      {showNewButton ? (\n        <Space gap={0}>\n          {/** Hotfix for inconsistent alignment with the label **/}\n          <Block styles={{ overflow: 'clip', width: 'max 0px' }}>&nbsp;</Block>\n          <Button\n            isDisabled={isDisabled}\n            size={size}\n            icon={<PlusIcon />}\n            onPress={addNewMapping}\n          >\n            {actionLabel ? actionLabel : 'Mapping'}\n          </Button>\n        </Space>\n      ) : null}\n    </Flow>\n  );\n\n  return wrapWithField(element, ref, props);\n}\n\nexport interface CubeTextInputMapperInputProps {\n  id: number;\n  fieldType: 'key' | 'value';\n  inputType?: 'input' | 'combobox' | 'password' | 'textarea';\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  value?: string;\n  options?: string[];\n  placeholder?: string;\n  onChange?: (id: number, newValue: string) => void;\n  onSubmit?: (id: number) => void;\n  isDisabled?: boolean;\n  isInvalid?: boolean;\n  isValid?: boolean;\n  autoFocus?: boolean;\n  allowsCustomValue?: boolean;\n  /**\n   * What kind of autofill the browser may offer for the input, as the HTML `autocomplete` token\n   * (`off`, `email`, …). Forwarded to the underlying input component.\n   */\n  autoComplete?: string;\n}\n\nfunction TextInputMapperInput(props: CubeTextInputMapperInputProps) {\n  const {\n    id,\n    fieldType,\n    inputType = 'input',\n    options,\n    value,\n    size = 'medium',\n    placeholder,\n    allowsCustomValue,\n    ...rest\n  } = props;\n\n  const onChange = useEvent((newValue: string) => {\n    props.onChange?.(id, newValue);\n  });\n\n  const onBlur = useEvent(() => {\n    props.onSubmit?.(id);\n  });\n\n  const onSelectionChange = useEvent((newValue: string) => {\n    if (!allowsCustomValue && !options?.includes(newValue)) {\n      props.onChange?.(id, '');\n    } else {\n      props.onChange?.(id, newValue);\n    }\n\n    props.onSubmit?.(id);\n  });\n\n  const Component = {\n    input: TextInput,\n    textarea: TextArea,\n    password: PasswordInput,\n  }[inputType];\n\n  if (inputType === 'combobox') {\n    return (\n      <ComboBox\n        qa=\"AddMapping\"\n        data-type={fieldType}\n        width=\"auto\"\n        size={size}\n        {...mergeProps(rest, PROPS_GRID_HACK)}\n        id={undefined}\n        inputValue={value}\n        selectedKey={value}\n        labelPosition=\"top\"\n        aria-label={placeholder}\n        placeholder={placeholder}\n        allowsCustomValue={allowsCustomValue}\n        onInputChange={onChange}\n        onSelectionChange={(val) => onSelectionChange(val ?? '')}\n      >\n        {(options ?? []).map((option) => (\n          <ComboBox.Item key={option}>{option}</ComboBox.Item>\n        ))}\n      </ComboBox>\n    );\n  }\n\n  return (\n    <Component\n      qa=\"AddMapping\"\n      data-type={fieldType}\n      width=\"auto\"\n      rows={1}\n      size={size}\n      {...mergeProps(rest, PROPS_GRID_HACK)}\n      id={undefined}\n      value={value}\n      labelPosition=\"top\"\n      aria-label={placeholder}\n      placeholder={placeholder}\n      onChange={onChange}\n      onBlur={onBlur}\n    />\n  );\n}\n\nconst _TextInputMapper = forwardRef(TextInputMapper);\n\n_TextInputMapper.displayName = 'TextInputMapper';\n\nexport { _TextInputMapper as TextInputMapper };\n"],"mappings":"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"}
+{"version":3,"file":"TextInputMapper.js","names":["ComponentType","ForwardedRef","forwardRef","KeyboardEvent","useEffect","useMemo","useRef","useState","useEvent","useI18n","CloseIcon","PlusIcon","FieldBaseProps","mergeProps","useCombinedRefs","Button","Block","useFieldProps","wrapWithField","Flow","Grid","Space","ComboBox","PasswordInput","TextArea","TextInput","Mapping","key","value","id","CubeTextInputMapperProps","Record","qa","actionLabel","isDisabled","onChange","KeyComponent","CubeTextInputMapperInputProps","ValueComponent","keyProps","Partial","valueProps","allowsCustomValue","size","PROPS_GRID_HACK","styles","InputArea","gridColumn","removeDuplicates","mappings","keys","Set","filter","has","add","TextInputMapper","props","ref","HTMLDivElement","t","defaultValidationTrigger","valuePropsMapper","counterRef","isInvalid","isValid","form","extractLocalValues","localValues","valueKeys","Object","localKeys","map","forEach","includes","k","entries","exist","find","push","current","setMappings","JSON","stringify","onMappingsChange","newMappings","newValue","reduce","acc","trim","length","undefined","updatedMappings","addNewMapping","prev","showNewButton","some","TextInputMapperInput","onKeyChange","mapping","onValueChange","onSubmit","onKeyDown","e","ctrlKey","metaKey","renderedMappings","index","m","element","overflow","width","fieldType","inputType","options","placeholder","autoFocus","autoComplete","$","_c","t0","t1","rest","t2","t3","onBlur","t4","newValue_0","onSelectionChange","t5","Symbol","for","input","textarea","password","Component","t6","t7","val","t8","t9","_temp","t10","option","_TextInputMapper","displayName"],"sources":["../../../../src/components/fields/TextInputMapper/TextInputMapper.tsx"],"sourcesContent":["import {\n  ComponentType,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEvent,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { useI18n } from '../../../i18n';\nimport { CloseIcon } from '../../../icons/CloseIcon';\nimport { PlusIcon } from '../../../icons/PlusIcon';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps, useCombinedRefs } from '../../../utils/react';\nimport { Button } from '../../actions';\nimport { Block } from '../../Block';\nimport { useFieldProps, wrapWithField } from '../../form';\nimport { Flow } from '../../layout/Flow';\nimport { Grid } from '../../layout/Grid';\nimport { Space } from '../../layout/Space';\nimport { ComboBox } from '../ComboBox';\nimport { PasswordInput } from '../PasswordInput/PasswordInput';\nimport { TextArea } from '../TextArea/index';\nimport { TextInput } from '../TextInput';\n\ntype Mapping = {\n  key: string;\n  value: string;\n  id: number;\n};\n\nexport interface CubeTextInputMapperProps\n  extends FieldBaseProps<Record<string, string> | null | undefined> {\n  qa?: string;\n  actionLabel?: string;\n  isDisabled?: boolean;\n  value?: Record<string, string>;\n  onChange?: (value: Record<string, string> | undefined) => void;\n  KeyComponent?: ComponentType<CubeTextInputMapperInputProps>;\n  ValueComponent?: ComponentType<CubeTextInputMapperInputProps>;\n  keyProps?: Partial<CubeTextInputMapperInputProps>;\n  valueProps?: Partial<CubeTextInputMapperInputProps>;\n  allowsCustomValue?: boolean;\n  size?: 'small' | 'medium' | 'large' | (string & {});\n}\n\n// Rewrites upper level field component styles\n// @TODO: Remove this after the release of new Element API\nconst PROPS_GRID_HACK = {\n  styles: {\n    InputArea: {\n      gridColumn: {\n        '': 'auto',\n        'has-sider': 'auto',\n      },\n    },\n  },\n};\n\n// remove duplicates in mappings\nfunction removeDuplicates(mappings: Mapping[]) {\n  const keys = new Set<string>();\n\n  return mappings.filter(({ key }) => {\n    if (keys.has(key)) {\n      return false;\n    }\n\n    keys.add(key);\n\n    return true;\n  });\n}\n\nfunction TextInputMapper(\n  props: CubeTextInputMapperProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { t } = useI18n();\n\n  ref = useCombinedRefs(ref);\n\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value != null ? value : {},\n      onChange: onChange,\n    }),\n  });\n\n  const counterRef = useRef(0);\n\n  let {\n    qa,\n    isDisabled,\n    isInvalid,\n    isValid,\n    actionLabel,\n    value,\n    onChange,\n    keyProps,\n    valueProps,\n    KeyComponent,\n    ValueComponent,\n    size = 'medium',\n    form,\n  } = props;\n\n  function extractLocalValues(\n    value: Record<string, string>,\n    localValues: Mapping[],\n  ) {\n    const valueKeys = Object.keys(value);\n    const localKeys = localValues.map(({ key }) => key);\n\n    localKeys.forEach((key) => {\n      if (!valueKeys.includes(key) && key !== '') {\n        localValues = localValues.filter(({ key: k }) => k !== key);\n      }\n    });\n\n    Object.entries(value ?? {}).forEach(([key, value]) => {\n      const exist = localValues.find(({ key: k }) => k === key);\n\n      if (exist) {\n        exist.value = value;\n      } else {\n        localValues.push({ key, value, id: counterRef.current++ });\n      }\n    });\n\n    return removeDuplicates(localValues);\n  }\n\n  const [mappings, setMappings] = useState(() => {\n    return extractLocalValues(value ?? {}, []);\n  });\n\n  useEffect(() => {\n    setMappings(extractLocalValues(value ?? {}, mappings));\n  }, [JSON.stringify(value)]);\n\n  const onMappingsChange = useEvent((newMappings: Mapping[]) => {\n    const newValue = newMappings.reduce(\n      (acc, { key, value }) => {\n        acc[key.trim()] = value.trim();\n\n        return acc;\n      },\n      {} as Record<string, string>,\n    );\n\n    const keys = Object.keys(newValue);\n\n    if (!keys.length) {\n      onChange?.(undefined);\n    } else {\n      onChange?.(newValue);\n    }\n\n    const updatedMappings = extractLocalValues(newValue ?? {}, newMappings);\n\n    if (JSON.stringify(updatedMappings) !== JSON.stringify(mappings)) {\n      setMappings(updatedMappings);\n    }\n  });\n\n  // useEffect(() => {\n  //   // focus on the last non-disabled input\n  //   setTimeout(() => {\n  //     (\n  //       ref?.current?.querySelector(\n  //         '[data-qa=\"Mapping\"]:last-child input:not([disabled])',\n  //       ) as HTMLInputElement\n  //     )?.focus();\n  //   }, 100);\n  // }, [mappings.length]);\n\n  const addNewMapping = useEvent(() => {\n    setMappings((prev) => {\n      return [...prev, { key: '', value: '', id: counterRef.current++ }];\n    });\n  });\n\n  const showNewButton = useMemo(() => {\n    return (\n      !mappings.length || !mappings.some(({ key, value }) => !key || !value)\n    );\n  }, [mappings]);\n\n  KeyComponent = KeyComponent ?? TextInputMapperInput;\n  ValueComponent = ValueComponent ?? TextInputMapperInput;\n\n  const onKeyChange = useEvent((id: number, value: string) => {\n    mappings.forEach((mapping) => {\n      if (mapping.id === id) {\n        mapping.key = value;\n      }\n    });\n\n    setMappings([...mappings]);\n  });\n\n  const onValueChange = useEvent((id: number, value: string) => {\n    mappings.forEach((mapping) => {\n      if (mapping.id === id) {\n        mapping.value = value;\n      }\n    });\n\n    setMappings([...mappings]);\n  });\n\n  const onSubmit = useEvent(() => {\n    onMappingsChange(mappings);\n  });\n\n  const onKeyDown = useEvent((e: KeyboardEvent<HTMLDivElement>) => {\n    // if Ctrl+Enter or Cmd+Enter is pressed then add new mapping if that's enabled\n    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter' && showNewButton) {\n      addNewMapping();\n    }\n  });\n\n  const renderedMappings = useMemo(() => {\n    return mappings.map((mapping, index) => {\n      const { key, value, id } = mapping;\n\n      return (\n        <Grid\n          key={id}\n          qa=\"Mapping\"\n          columns=\"minmax(0, 1fr) minmax(0, 1fr) min-content\"\n          gap=\"1x\"\n        >\n          <KeyComponent\n            autoFocus={index === mappings.length - 1}\n            id={id}\n            isDisabled={isDisabled}\n            isInvalid={isInvalid}\n            isValid={isValid}\n            fieldType=\"key\"\n            value={key}\n            placeholder={t('textInputMapper.key', 'Key')}\n            size={size}\n            onChange={onKeyChange}\n            onSubmit={onSubmit}\n            {...keyProps}\n          />\n          <ValueComponent\n            id={id}\n            fieldType=\"value\"\n            isDisabled={!key || isDisabled}\n            isInvalid={isInvalid}\n            isValid={isValid}\n            value={value}\n            placeholder={t('textInputMapper.value', 'Value')}\n            size={size}\n            onChange={onValueChange}\n            onSubmit={onSubmit}\n            {...valueProps}\n          />\n          <Button\n            aria-label={t('textInputMapper.removeMapping', 'Remove mapping')}\n            theme=\"danger\"\n            type=\"clear\"\n            size={size}\n            icon={<CloseIcon />}\n            onPress={() => {\n              setMappings(mappings.filter((m) => m.id !== id));\n              onMappingsChange(mappings.filter((m) => m.id !== id));\n            }}\n          />\n        </Grid>\n      );\n    });\n  }, [JSON.stringify(mappings), t, isDisabled, isInvalid, isValid]);\n\n  const element = (\n    <Flow\n      ref={ref}\n      gap=\"1x\"\n      data-qa={qa || 'TextInputMapper'}\n      data-input-type=\"textinputmapper\"\n      onKeyDown={onKeyDown}\n    >\n      {[...renderedMappings]}\n      {showNewButton ? (\n        <Space gap={0}>\n          {/** Hotfix for inconsistent alignment with the label **/}\n          <Block styles={{ overflow: 'clip', width: 'max 0px' }}>&nbsp;</Block>\n          <Button\n            isDisabled={isDisabled}\n            size={size}\n            icon={<PlusIcon />}\n            onPress={addNewMapping}\n          >\n            {actionLabel ? actionLabel : 'Mapping'}\n          </Button>\n        </Space>\n      ) : null}\n    </Flow>\n  );\n\n  return wrapWithField(element, ref, props);\n}\n\nexport interface CubeTextInputMapperInputProps {\n  id: number;\n  fieldType: 'key' | 'value';\n  inputType?: 'input' | 'combobox' | 'password' | 'textarea';\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  value?: string;\n  options?: string[];\n  placeholder?: string;\n  onChange?: (id: number, newValue: string) => void;\n  onSubmit?: (id: number) => void;\n  isDisabled?: boolean;\n  isInvalid?: boolean;\n  isValid?: boolean;\n  autoFocus?: boolean;\n  allowsCustomValue?: boolean;\n  /**\n   * What kind of autofill the browser may offer for the input, as the HTML `autocomplete` token\n   * (`off`, `email`, …). Forwarded to the underlying input component.\n   */\n  autoComplete?: string;\n}\n\nfunction TextInputMapperInput(props: CubeTextInputMapperInputProps) {\n  const {\n    id,\n    fieldType,\n    inputType = 'input',\n    options,\n    value,\n    size = 'medium',\n    placeholder,\n    allowsCustomValue,\n    ...rest\n  } = props;\n\n  const onChange = useEvent((newValue: string) => {\n    props.onChange?.(id, newValue);\n  });\n\n  const onBlur = useEvent(() => {\n    props.onSubmit?.(id);\n  });\n\n  const onSelectionChange = useEvent((newValue: string) => {\n    if (!allowsCustomValue && !options?.includes(newValue)) {\n      props.onChange?.(id, '');\n    } else {\n      props.onChange?.(id, newValue);\n    }\n\n    props.onSubmit?.(id);\n  });\n\n  const Component = {\n    input: TextInput,\n    textarea: TextArea,\n    password: PasswordInput,\n  }[inputType];\n\n  if (inputType === 'combobox') {\n    return (\n      <ComboBox\n        qa=\"AddMapping\"\n        data-type={fieldType}\n        width=\"auto\"\n        size={size}\n        {...mergeProps(rest, PROPS_GRID_HACK)}\n        id={undefined}\n        inputValue={value}\n        selectedKey={value}\n        labelPosition=\"top\"\n        aria-label={placeholder}\n        placeholder={placeholder}\n        allowsCustomValue={allowsCustomValue}\n        onInputChange={onChange}\n        onSelectionChange={(val) => onSelectionChange(val ?? '')}\n      >\n        {(options ?? []).map((option) => (\n          <ComboBox.Item key={option}>{option}</ComboBox.Item>\n        ))}\n      </ComboBox>\n    );\n  }\n\n  return (\n    <Component\n      qa=\"AddMapping\"\n      data-type={fieldType}\n      width=\"auto\"\n      rows={1}\n      size={size}\n      {...mergeProps(rest, PROPS_GRID_HACK)}\n      id={undefined}\n      value={value}\n      labelPosition=\"top\"\n      aria-label={placeholder}\n      placeholder={placeholder}\n      onChange={onChange}\n      onBlur={onBlur}\n    />\n  );\n}\n\nconst _TextInputMapper = forwardRef(TextInputMapper);\n\n_TextInputMapper.displayName = 'TextInputMapper';\n\nexport { _TextInputMapper as TextInputMapper };\n"],"mappings":"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"}

package/dist/components/fields/TriggerActions.js

@@ -1,11 +1,20 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 import { ItemActionIcon } from "../actions/ItemActionsWrapper.js";
+import { c } from "react-compiler-runtime";
 import { Fragment, jsxs } from "react/jsx-runtime";
 
 //#region src/components/fields/TriggerActions.tsx
 function TriggerActions(props) {
+	const $ = c(3);
 	const { actions, builtIn } = props;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [actions, builtIn] });
+	let t0;
+	if ($[0] !== actions || $[1] !== builtIn) {
+		t0 = /* @__PURE__ */ jsxs(Fragment, { children: [actions, builtIn] });
+		$[0] = actions;
+		$[1] = builtIn;
+		$[2] = t0;
+	} else t0 = $[2];
+	return t0;
 }
 
 //#endregion

package/dist/components/fields/TriggerActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"TriggerActions.js","names":[],"sources":["../../../src/components/fields/TriggerActions.tsx"],"sourcesContent":["import { ItemActionIcon } from '../actions/ItemActionsWrapper';\n\nimport type { ReactNode } from 'react';\n\n/**\n * The trailing run of a `Select` / `Picker` / `FilterPicker` trigger: the\n * caller's custom `actions`, then the built-in control — a loading spinner, the\n * clear button, or the dropdown caret.\n *\n * It renders into `ItemActionsWrapper`'s run, which lies over the trigger's\n * trailing end as a SIBLING of the `<button>` rather than inside it. That is\n * what keeps the clear button from being a `<button>` nested in a `<button>`,\n * and it is why the caret is an `ItemActionIcon`: the run is transparent to the\n * pointer except where a child opts in, so a press on the caret lands on the\n * trigger underneath and opens the popover exactly as it did when the caret\n * lived in the `rightIcon` slot.\n *\n * The run isolates its children's presses from the trigger and identifies them\n * to the overlay as the trigger's own — both in `ItemActionsWrapper`, so every\n * row that has actions gets them and not only these three.\n */\nexport interface TriggerActionsProps {\n  /** The caller's custom actions. They come first — leftmost in LTR. */\n  actions?: ReactNode;\n  /** The built-in control: spinner, clear button, or caret. */\n  builtIn?: ReactNode;\n}\n\nexport function TriggerActions(props: TriggerActionsProps) {\n  const { actions, builtIn } = props;\n\n  return (\n    <>\n      {actions}\n      {builtIn}\n    </>\n  );\n}\n\nexport { ItemActionIcon as TriggerIcon };\n"],"mappings":";;;;;AA4BA,SAAgB,eAAe,OAA4B;CACzD,MAAM,EAAE,SAAS,YAAY;AAE7B,QACE,4CACG,SACA,WACA"}
+{"version":3,"file":"TriggerActions.js","names":["ItemActionIcon","ReactNode","TriggerActionsProps","actions","builtIn","TriggerActions","props","$","_c","t0","TriggerIcon"],"sources":["../../../src/components/fields/TriggerActions.tsx"],"sourcesContent":["import { ItemActionIcon } from '../actions/ItemActionsWrapper';\n\nimport type { ReactNode } from 'react';\n\n/**\n * The trailing run of a `Select` / `Picker` / `FilterPicker` trigger: the\n * caller's custom `actions`, then the built-in control — a loading spinner, the\n * clear button, or the dropdown caret.\n *\n * It renders into `ItemActionsWrapper`'s run, which lies over the trigger's\n * trailing end as a SIBLING of the `<button>` rather than inside it. That is\n * what keeps the clear button from being a `<button>` nested in a `<button>`,\n * and it is why the caret is an `ItemActionIcon`: the run is transparent to the\n * pointer except where a child opts in, so a press on the caret lands on the\n * trigger underneath and opens the popover exactly as it did when the caret\n * lived in the `rightIcon` slot.\n *\n * The run isolates its children's presses from the trigger and identifies them\n * to the overlay as the trigger's own — both in `ItemActionsWrapper`, so every\n * row that has actions gets them and not only these three.\n */\nexport interface TriggerActionsProps {\n  /** The caller's custom actions. They come first — leftmost in LTR. */\n  actions?: ReactNode;\n  /** The built-in control: spinner, clear button, or caret. */\n  builtIn?: ReactNode;\n}\n\nexport function TriggerActions(props: TriggerActionsProps) {\n  const { actions, builtIn } = props;\n\n  return (\n    <>\n      {actions}\n      {builtIn}\n    </>\n  );\n}\n\nexport { ItemActionIcon as TriggerIcon };\n"],"mappings":";;;;;;AA4BA,SAAOK,eAAAC,OAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CACL,MAAA,EAAAL,SAAAC,YAA6BE;CAAM,IAAAG;AAAA,KAAAF,EAAA,OAAAJ,WAAAI,EAAA,OAAAH,SAAA;AAGjCK,OAAA,4CACGN,SACAC,WACA;AAAAG,IAAA,KAAAJ;AAAAI,IAAA,KAAAH;AAAAG,IAAA,KAAAE;OAAAA,MAAAF,EAAA;AAAA,QAHHE"}