@consta/uikit 5.18.0 → 5.19.1

package/__internal__/src/components/EventInterceptor/propsHandlers/useTextFieldEventsHandler.d.ts

@@ -1,9 +1,9 @@
 import { IconComponent, IconPropSize } from '@consta/icons/Icon';
 import React from 'react';
 import { AutoCompete } from '../../../utils/types/AutoComplete';
-import { TextFieldPropForm, TextFieldPropId, TextFieldPropName, TextFieldPropOnChange, TextFieldPropSize, TextFieldPropStatus, TextFieldPropValue, TextFieldPropView } from '../../TextField/TextField';
+import { TextField, TextFieldPropForm, TextFieldPropId, TextFieldPropName, TextFieldPropOnChange, TextFieldPropSize, TextFieldPropStatus, TextFieldPropValue, TextFieldPropView } from '../../TextField/TextField';
 import { EventInterceptorHandler } from '../EventInterceptor';
-export declare type Props = {
+export type Props = {
     className?: string;
     value?: TextFieldPropValue;
     onChange?: TextFieldPropOnChange;
@@ -35,4 +35,6 @@ export declare type Props = {
     iconSize?: IconPropSize;
     children?: never;
 };
-export declare const useTextFieldEventsHandler: <P extends import("../../TextField/types").TextFieldProps<string>>(props: P, handler: EventInterceptorHandler, ref: React.RefObject<HTMLDivElement>) => P;
+type TextFieldProps = Parameters<typeof TextField>[0];
+export declare const useTextFieldEventsHandler: <P extends TextFieldProps>(props: P, handler: EventInterceptorHandler, ref: React.RefObject<HTMLDivElement>) => P;
+export {};

package/__internal__/src/components/EventInterceptor/types.d.ts

@@ -1 +1 @@
-export declare type EventInterceptorComponentName = 'Attachment' | 'Avatar' | 'Badge' | 'Breadcrumbs' | 'Button' | 'Calendar' | 'Card' | 'Checkbox' | 'CheckboxGroup' | 'ChoiceGroup' | 'Collapse' | 'CollapseGroup' | 'Combobox' | 'ContextMenu' | 'DatePicker' | 'DateTime' | 'DragNDropField' | 'File' | 'FileField' | 'Grid' | 'Header' | 'Informer' | 'Layout' | 'Loader' | 'Modal' | 'Popover' | 'ProgressSpin' | 'ProgressStepBar' | 'Radio' | 'RadioGroup' | 'Select' | 'Sidebar' | 'Skeleton' | 'Slider' | 'SnackBar' | 'Steps' | 'Switch' | 'SwitchGroup' | 'Table' | 'Tabs' | 'Tag' | 'TagBase' | 'Text' | 'TextField' | 'ThemeToggler' | 'Timer' | 'Tooltip' | 'User' | 'UserSelect';
+export type EventInterceptorComponentName = 'Attachment' | 'Avatar' | 'Badge' | 'Breadcrumbs' | 'Button' | 'Calendar' | 'Card' | 'Checkbox' | 'CheckboxGroup' | 'ChoiceGroup' | 'Collapse' | 'CollapseGroup' | 'Combobox' | 'ContextMenu' | 'DatePicker' | 'DateTime' | 'DragNDropField' | 'File' | 'FileField' | 'Grid' | 'Header' | 'Informer' | 'Layout' | 'Loader' | 'Modal' | 'Popover' | 'ProgressSpin' | 'ProgressStepBar' | 'Radio' | 'RadioGroup' | 'Select' | 'Sidebar' | 'Skeleton' | 'Slider' | 'SnackBar' | 'Steps' | 'Switch' | 'SwitchGroup' | 'Table' | 'Tabs' | 'Tag' | 'TagBase' | 'Text' | 'TextField' | 'ThemeToggler' | 'Timer' | 'Tooltip' | 'User' | 'UserSelect';

package/__internal__/src/components/FieldCaption/FieldCaption.d.ts

@@ -1,5 +1,5 @@
-export declare type FieldCaptionPropStatus = 'alert' | 'warning' | 'success';
-declare type FieldCaptionProps = {
+export type FieldCaptionPropStatus = 'alert' | 'warning' | 'success';
+type FieldCaptionProps = {
     status?: FieldCaptionPropStatus;
 };
 export declare const FieldCaption: import("../../utils/types/PropsWithAsAttributes").ComponentWithAs<FieldCaptionProps, "div">;

package/__internal__/src/components/FieldComponents/FieldArrayValueInlineControl/FieldArrayValueInlineControl.css

@@ -1 +1 @@
-.FieldArrayValueInlineControl{display:flex;flex-wrap:wrap;gap:var(--field-array-value-inline-control-items-gap);padding:calc(var(--field-array-value-inline-control-vertical-padding) - var(--field-control-layout-border-width)) 0}.FieldArrayValueInlineControl-Input{background:transparent;border:none;color:var(--field-control-layout-input-color);display:block;flex:1;font-size:var(--field-control-layout-text-size);height:var(--field-array-value-inline-control-input-height);line-height:1;line-height:var(--field-array-value-inline-control-input-height);min-width:min(var(--field-array-value-inline-control-input-min-width),100%);outline:none}.FieldArrayValueInlineControl-Input:-webkit-autofill,.FieldArrayValueInlineControl-Input:-webkit-autofill:focus,.FieldArrayValueInlineControl-Input:-webkit-autofill:hover{-webkit-text-fill-color:var(--field-control-layout-input-color)}.FieldArrayValueInlineControl-Input::-moz-placeholder{color:var(--field-control-layout-placeholder-color)}.FieldArrayValueInlineControl-Input::placeholder{color:var(--field-control-layout-placeholder-color)}.FieldArrayValueInlineControl-HelperInputFakeElement{display:inline-block;font-size:var(--field-control-layout-text-size);height:0;overflow:hidden;position:absolute;top:0;visibility:hidden;white-space:nowrap}
+.FieldArrayValueInlineControl{display:flex;flex-wrap:wrap;gap:var(--field-array-value-inline-control-items-gap);min-height:var(--field-control-layout-slot-height);padding:calc(var(--field-array-value-inline-control-vertical-padding) - var(--field-control-layout-border-width)) 0;position:relative}.FieldArrayValueInlineControl-Input{background:transparent;border:none;color:var(--field-control-layout-input-color);display:block;flex:1;font-size:var(--field-control-layout-text-size);height:var(--field-array-value-inline-control-input-height);line-height:1;line-height:var(--field-array-value-inline-control-input-height);min-width:min(max(var(--field-array-value-inline-control-input-min-width),var(--field-control-layout-space)),var(--field-control-layout-children-width));outline:none}.FieldArrayValueInlineControl-Input_disabled{pointer-events:none;position:absolute;width:100%}.FieldArrayValueInlineControl-Input:-webkit-autofill,.FieldArrayValueInlineControl-Input:-webkit-autofill:focus,.FieldArrayValueInlineControl-Input:-webkit-autofill:hover{-webkit-text-fill-color:var(--field-control-layout-input-color)}.FieldArrayValueInlineControl-Input::-moz-placeholder{color:var(--field-control-layout-placeholder-color)}.FieldArrayValueInlineControl-Input::placeholder{color:var(--field-control-layout-placeholder-color)}.FieldArrayValueInlineControl-HelperInputFakeElement{display:inline-block;font-size:var(--field-control-layout-text-size);height:0;overflow:hidden;position:absolute;top:0;visibility:hidden;white-space:nowrap}

package/__internal__/src/components/FieldComponents/FieldArrayValueInlineControl/FieldArrayValueInlineControl.js

@@ -1,2 +1,2 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["className","inputRef","inputMaxLength","value","inputDefaultValue","renderValue","onFocus","onBlur","autoFocus","inputTabIndex","inputAriaLabel","disabled","style","size","placeholder","onKeyDown","onKeyDownCapture","onChange","onKeyUp","onKeyUpCapture","onCopy","onCopyCapture","onCut","onCutCapture","onPaste","onPasteCapture","onWheel"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import React,{forwardRef,useCallback,useEffect,useRef,useState}from"react";import{useComponentSize}from"../../../hooks/useComponentSize";import{useForkRef}from"../../../hooks/useForkRef";import{useMutableRef}from"../../../hooks/useMutableRef";import{cnFieldArrayValueInlineControl}from"./cnFieldArrayValueInlineControl";var gapMap={l:"calc(var(--space-3xs) + var(--space-2xs))",m:"var(--space-2xs)",s:"var(--space-3xs)",xs:"var(--space-3xs)"},verticalPaddingMap={l:"var(--space-xs)",m:"calc(var(--space-xs) - var(--space-3xs))",s:"var(--space-2xs)",xs:"var(--space-3xs)"},inputHeightMap={l:"var(--space-2xl)",m:"calc(var(--space-2xl) - var(--space-2xs))",s:"var(--space-xl)",xs:"var(--space-l)"},FieldArrayValueInlineControlRender=function(a,b){var c,d,e=a.className,f=a.inputRef,g=a.inputMaxLength,h=a.value,i=void 0===h?[]:h,j=a.inputDefaultValue,k=a.renderValue,l=a.onFocus,m=a.onBlur,n=a.autoFocus,o=a.inputTabIndex,p=a.inputAriaLabel,q=a.disabled,r=a.style,s=a.size,t=void 0===s?"m":s,u=a.placeholder,v=a.onKeyDown,w=a.onKeyDownCapture,x=a.onChange,y=a.onKeyUp,z=a.onKeyUpCapture,A=a.onCopy,B=a.onCopyCapture,C=a.onCut,D=a.onCutCapture,E=a.onPaste,F=a.onPasteCapture,G=a.onWheel,H=_objectWithoutProperties(a,_excluded),I=useState(""),J=_slicedToArray(I,2),K=J[0],L=J[1],M=useMutableRef(x),N=useRef(null),O=useRef(null),P=useCallback(function(a){var b;L(a.target.value),null===(b=M.current)||void 0===b?void 0:b.call(M,a)},[]),Q=useComponentSize(N),R=Q.width;return useEffect(function(){var a;L((null===(a=O.current)||void 0===a?void 0:a.value)||"")},[null===(c=O.current)||void 0===c?void 0:c.value]),React.createElement("div",Object.assign({},H,{className:cnFieldArrayValueInlineControl(null,[e]),ref:b,style:_objectSpread(_objectSpread({},r),{},(d={},_defineProperty(d,"--field-array-value-inline-control-items-gap",gapMap[t]),_defineProperty(d,"--field-array-value-inline-control-input-min-width","".concat(R,"px")),_defineProperty(d,"--field-array-value-inline-control-vertical-padding","".concat(verticalPaddingMap[t])),_defineProperty(d,"--field-array-value-inline-control-input-height","".concat(inputHeightMap[t])),d))}),i.map(k),React.createElement("input",{className:cnFieldArrayValueInlineControl("Input"),onChange:P,ref:useForkRef([O,f]),maxLength:g,onFocus:l,onBlur:m,autoFocus:n,tabIndex:o,"aria-label":p,onKeyDown:v,onKeyDownCapture:w,onKeyUp:y,onKeyUpCapture:z,disabled:q,type:"text",placeholder:i.length?void 0:u,onCopy:A,onCopyCapture:B,onCut:C,onCutCapture:D,onPaste:E,onPasteCapture:F,onWheel:G,defaultValue:j}),React.createElement("div",{ref:N,className:cnFieldArrayValueInlineControl("HelperInputFakeElement")},K))};export var FieldArrayValueInlineControl=forwardRef(FieldArrayValueInlineControlRender);
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["valueAtom","inputMinWidthAtom"],_excluded2=["children","className","inputMinWidthAtom","size","style"],_excluded3=["className","inputRef","inputMaxLength","value","inputValue","inputDefaultValue","renderValue","onFocus","onBlur","autoFocus","inputTabIndex","inputAriaLabel","disabled","size","placeholder","onKeyDown","onKeyDownCapture","onChange","onKeyUp","onKeyUpCapture","onCopy","onCopyCapture","onCut","onCutCapture","onPaste","onPasteCapture","onWheel","disableInput"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{useAction,useAtom,useUpdate}from"@reatom/npm-react";import React,{forwardRef,useRef}from"react";import{useComponentSize}from"../../../hooks/useComponentSize";import{useForkRef}from"../../../hooks/useForkRef";import{usePropAtom,useSendToAtom,withCtx}from"../../../utils/state";import{useCreateAtom}from"../../../utils/state/useCreateAtom";import{cnFieldArrayValueInlineControl}from"./cnFieldArrayValueInlineControl";var gapMap={l:"calc(var(--space-3xs) + var(--space-2xs))",m:"var(--space-2xs)",s:"var(--space-3xs)",xs:"var(--space-3xs)"},verticalPaddingMap={l:"var(--space-xs)",m:"calc(var(--space-xs) - var(--space-3xs))",s:"var(--space-2xs)",xs:"var(--space-3xs)"},inputHeightMap={l:"var(--space-2xl)",m:"calc(var(--space-2xl) - var(--space-2xs))",s:"var(--space-xl)",xs:"var(--space-l)"},InputFakeElement=forwardRef(function(a,b){var c=a.valueAtom,d=a.inputMinWidthAtom,e=_objectWithoutProperties(a,_excluded),f=useAtom(c),g=_slicedToArray(f,1),h=g[0],i=useRef(null),j=useComponentSize(i),k=j.width;return useUpdate(function(a,b){d(a,b)},[k]),React.createElement("div",Object.assign({},e,{ref:useForkRef([b,i])}),h)}),Root=forwardRef(function(a,b){var c,d=a.children,e=a.className,f=a.inputMinWidthAtom,g=a.size,h=void 0===g?"m":g,i=a.style,j=_objectWithoutProperties(a,_excluded2),k=useAtom(f),l=_slicedToArray(k,1),m=l[0];return React.createElement("div",Object.assign({},j,{className:cnFieldArrayValueInlineControl(null,[e]),ref:b,style:_objectSpread(_objectSpread({},i),{},(c={},_defineProperty(c,"--field-array-value-inline-control-items-gap",gapMap[h]),_defineProperty(c,"--field-array-value-inline-control-input-min-width","".concat(m,"px")),_defineProperty(c,"--field-array-value-inline-control-vertical-padding","".concat(verticalPaddingMap[h])),_defineProperty(c,"--field-array-value-inline-control-input-height","".concat(inputHeightMap[h])),c))}),d)}),FieldArrayValueInlineControlRender=function(a,b){var c=a.className,d=a.inputRef,e=a.inputMaxLength,f=a.value,g=void 0===f?[]:f,h=a.inputValue,i=a.inputDefaultValue,j=void 0===i?"":i,k=a.renderValue,l=a.onFocus,m=a.onBlur,n=a.autoFocus,o=a.inputTabIndex,p=a.inputAriaLabel,q=a.disabled,r=a.size,s=void 0===r?"m":r,t=a.placeholder,u=a.onKeyDown,v=a.onKeyDownCapture,w=a.onChange,x=a.onKeyUp,y=a.onKeyUpCapture,z=a.onCopy,A=a.onCopyCapture,B=a.onCut,C=a.onCutCapture,D=a.onPaste,E=a.onPasteCapture,F=a.onWheel,G=a.disableInput,H=_objectWithoutProperties(a,_excluded3),I=useSendToAtom(a),J=usePropAtom(I,"inputValue"),K=usePropAtom(I,"value"),L=useCreateAtom(h||j||""),M=useCreateAtom(j),N=useCreateAtom(0),O=useRef(null),P=useRef(null),Q=useAction(function(a,b){L(a,b.target.value);var c=a.get(I),d=c.onChange;d&&d(b)},[]),R=useAtom(function(a){var b=a.spy(K),c=a.get(I),d=c.renderValue;return d(b||[])}),S=_slicedToArray(R,1),T=S[0];return useAtom(function(a){var b=a.spy(J),c=a.get(M);c?M(a,""):(P.current&&(P.current.value=b||""),L(a,b||""))}),React.createElement(Root,Object.assign({},H,{className:cnFieldArrayValueInlineControl(null,[c]),ref:b,size:s,inputMinWidthAtom:N}),T,React.createElement("input",{className:cnFieldArrayValueInlineControl("Input",{disabled:G}),onChange:Q,ref:useForkRef([P,d]),maxLength:e,onFocus:l,onBlur:m,autoFocus:n,tabIndex:o,"aria-label":p,onKeyDown:u,onKeyDownCapture:v,onKeyUp:x,onKeyUpCapture:y,disabled:q,type:"text",placeholder:g.length?void 0:t,onCopy:z,onCopyCapture:A,onCut:B,onCutCapture:C,onPaste:D,onPasteCapture:E,onWheel:F,defaultValue:j,readOnly:G}),React.createElement(InputFakeElement,{ref:O,className:cnFieldArrayValueInlineControl("HelperInputFakeElement"),valueAtom:L,inputMinWidthAtom:N}))};export var FieldArrayValueInlineControl=withCtx(forwardRef(FieldArrayValueInlineControlRender));
 //# sourceMappingURL=FieldArrayValueInlineControl.js.map

package/__internal__/src/components/FieldComponents/FieldArrayValueInlineControl/FieldArrayValueInlineControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldArrayValueInlineControl.js","names":["React","forwardRef","useCallback","useEffect","useRef","useState","useComponentSize","useForkRef","useMutableRef","cnFieldArrayValueInlineControl","gapMap","l","m","s","xs","verticalPaddingMap","inputHeightMap","FieldArrayValueInlineControlRender","props","ref","className","inputRefProp","inputRef","inputMaxLength","value","inputDefaultValue","renderValue","onFocus","onBlur","autoFocus","inputTabIndex","inputAriaLabel","disabled","style","size","placeholder","onKeyDown","onKeyDownCapture","onChange","onKeyUp","onKeyUpCapture","onCopy","onCopyCapture","onCut","onCutCapture","onPaste","onPasteCapture","onWheel","otherProps","inputValue","setInputValue","onInputChangeRef","fakeInputRef","handleChange","e","target","current","inputMinWidth","width","map","length","FieldArrayValueInlineControl"],"sources":["../../../../../../src/components/FieldComponents/FieldArrayValueInlineControl/FieldArrayValueInlineControl.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useComponentSize } from '##/hooks/useComponentSize';\nimport { useForkRef } from '##/hooks/useForkRef';\nimport { useMutableRef } from '##/hooks/useMutableRef';\n\nimport { FieldPropSize } from '../types';\nimport { cnFieldArrayValueInlineControl } from './cnFieldArrayValueInlineControl';\nimport {\n  FieldArrayValueInlineControlComponent,\n  FieldArrayValueInlineControlProps,\n} from './types';\n\nconst gapMap: Record<FieldPropSize, string> = {\n  l: 'calc(var(--space-3xs) + var(--space-2xs))',\n  m: 'var(--space-2xs)',\n  s: 'var(--space-3xs)',\n  xs: 'var(--space-3xs)',\n};\n\nconst verticalPaddingMap: Record<FieldPropSize, string> = {\n  l: 'var(--space-xs)',\n  m: 'calc(var(--space-xs) - var(--space-3xs))',\n  s: 'var(--space-2xs)',\n  xs: 'var(--space-3xs)',\n};\n\nconst inputHeightMap: Record<FieldPropSize, string> = {\n  l: 'var(--space-2xl)',\n  m: 'calc(var(--space-2xl) - var(--space-2xs))',\n  s: 'var(--space-xl)',\n  xs: 'var(--space-l)',\n};\n\nconst FieldArrayValueInlineControlRender = (\n  props: FieldArrayValueInlineControlProps<unknown>,\n  ref: React.Ref<HTMLDivElement>,\n) => {\n  const {\n    className,\n    inputRef: inputRefProp,\n    inputMaxLength,\n    value = [],\n    inputDefaultValue,\n    renderValue,\n    onFocus,\n    onBlur,\n    autoFocus,\n    inputTabIndex,\n    inputAriaLabel,\n    disabled,\n    style,\n    size = 'm',\n    placeholder,\n    onKeyDown,\n    onKeyDownCapture,\n    onChange,\n    onKeyUp,\n    onKeyUpCapture,\n    onCopy,\n    onCopyCapture,\n    onCut,\n    onCutCapture,\n    onPaste,\n    onPasteCapture,\n    onWheel,\n    ...otherProps\n  } = props;\n\n  const [inputValue, setInputValue] = useState('');\n  const onInputChangeRef = useMutableRef(onChange);\n  const fakeInputRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const handleChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      setInputValue(e.target.value);\n      onInputChangeRef.current?.(e);\n    },\n    [],\n  );\n  const { width: inputMinWidth } = useComponentSize(fakeInputRef);\n\n  useEffect(() => {\n    setInputValue(inputRef.current?.value || '');\n  }, [inputRef.current?.value]);\n\n  return (\n    <div\n      {...otherProps}\n      className={cnFieldArrayValueInlineControl(null, [className])}\n      ref={ref}\n      style={{\n        ...style,\n        ['--field-array-value-inline-control-items-gap' as string]:\n          gapMap[size],\n        ['--field-array-value-inline-control-input-min-width' as string]: `${inputMinWidth}px`,\n        ['--field-array-value-inline-control-vertical-padding' as string]: `${verticalPaddingMap[size]}`,\n        ['--field-array-value-inline-control-input-height' as string]: `${inputHeightMap[size]}`,\n      }}\n    >\n      {value.map(renderValue)}\n      <input\n        className={cnFieldArrayValueInlineControl('Input')}\n        onChange={handleChange}\n        ref={useForkRef([inputRef, inputRefProp])}\n        maxLength={inputMaxLength}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        // eslint-disable-next-line jsx-a11y/no-autofocus\n        autoFocus={autoFocus}\n        tabIndex={inputTabIndex}\n        aria-label={inputAriaLabel}\n        onKeyDown={onKeyDown}\n        onKeyDownCapture={onKeyDownCapture}\n        onKeyUp={onKeyUp}\n        onKeyUpCapture={onKeyUpCapture}\n        disabled={disabled}\n        type=\"text\"\n        placeholder={value.length ? undefined : placeholder}\n        onCopy={onCopy}\n        onCopyCapture={onCopyCapture}\n        onCut={onCut}\n        onCutCapture={onCutCapture}\n        onPaste={onPaste}\n        onPasteCapture={onPasteCapture}\n        onWheel={onWheel}\n        defaultValue={inputDefaultValue}\n      />\n      <div\n        ref={fakeInputRef}\n        className={cnFieldArrayValueInlineControl('HelperInputFakeElement')}\n      >\n        {inputValue}\n      </div>\n    </div>\n  );\n};\n\nexport const FieldArrayValueInlineControl = forwardRef(\n  FieldArrayValueInlineControlRender,\n) as FieldArrayValueInlineControlComponent;\n"],"mappings":"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"}
+{"version":3,"file":"FieldArrayValueInlineControl.js","names":["useAction","useAtom","useUpdate","React","forwardRef","useRef","useComponentSize","useForkRef","usePropAtom","useSendToAtom","withCtx","useCreateAtom","cnFieldArrayValueInlineControl","gapMap","l","m","s","xs","verticalPaddingMap","inputHeightMap","InputFakeElement","componentRef","valueAtom","inputMinWidthAtom","otherProps","value","ref","width","ctx","Root","children","className","size","style","inputMinWidth","FieldArrayValueInlineControlRender","props","inputRefProp","inputRef","inputMaxLength","inputValue","inputDefaultValue","renderValue","onFocus","onBlur","autoFocus","inputTabIndex","inputAriaLabel","disabled","placeholder","onKeyDown","onKeyDownCapture","onChange","onKeyUp","onKeyUpCapture","onCopy","onCopyCapture","onCut","onCutCapture","onPaste","onPasteCapture","onWheel","disableInput","propsAtom","inputValuePropAtom","inputValueAtom","inputDefaultValueAtom","fakeInputRef","handleChange","e","target","get","spy","valueNode","inputValueProp","current","length","FieldArrayValueInlineControl"],"sources":["../../../../../../src/components/FieldComponents/FieldArrayValueInlineControl/FieldArrayValueInlineControl.tsx"],"sourcesContent":["import { AtomMut } from '@reatom/framework';\nimport { useAction, useAtom, useUpdate } from '@reatom/npm-react';\nimport React, { forwardRef, useRef } from 'react';\n\nimport { useComponentSize } from '##/hooks/useComponentSize';\nimport { useForkRef } from '##/hooks/useForkRef';\nimport { usePropAtom, useSendToAtom, withCtx } from '##/utils/state';\nimport { useCreateAtom } from '##/utils/state/useCreateAtom';\nimport { PropsWithHTMLAttributes } from '##/utils/types/PropsWithHTMLAttributes';\n\nimport { FieldPropSize } from '../types';\nimport { cnFieldArrayValueInlineControl } from './cnFieldArrayValueInlineControl';\nimport {\n  FieldArrayValueInlineControlComponent,\n  FieldArrayValueInlineControlProps,\n} from './types';\n\nconst gapMap: Record<FieldPropSize, string> = {\n  l: 'calc(var(--space-3xs) + var(--space-2xs))',\n  m: 'var(--space-2xs)',\n  s: 'var(--space-3xs)',\n  xs: 'var(--space-3xs)',\n};\n\nconst verticalPaddingMap: Record<FieldPropSize, string> = {\n  l: 'var(--space-xs)',\n  m: 'calc(var(--space-xs) - var(--space-3xs))',\n  s: 'var(--space-2xs)',\n  xs: 'var(--space-3xs)',\n};\n\nconst inputHeightMap: Record<FieldPropSize, string> = {\n  l: 'var(--space-2xl)',\n  m: 'calc(var(--space-2xl) - var(--space-2xs))',\n  s: 'var(--space-xl)',\n  xs: 'var(--space-l)',\n};\n\nconst InputFakeElement = forwardRef<\n  HTMLDivElement,\n  PropsWithHTMLAttributes<\n    {\n      valueAtom: AtomMut<string>;\n      inputMinWidthAtom: AtomMut<number>;\n    },\n    HTMLDivElement\n  >\n>(({ valueAtom, inputMinWidthAtom, ...otherProps }, componentRef) => {\n  const [value] = useAtom(valueAtom);\n  const ref = useRef<HTMLDivElement>(null);\n\n  const { width } = useComponentSize(ref);\n\n  useUpdate(\n    (ctx, width) => {\n      inputMinWidthAtom(ctx, width);\n    },\n    [width],\n  );\n\n  return (\n    <div {...otherProps} ref={useForkRef([componentRef, ref])}>\n      {value}\n    </div>\n  );\n});\n\nconst Root = forwardRef<\n  HTMLDivElement,\n  PropsWithHTMLAttributes<\n    {\n      inputMinWidthAtom: AtomMut<number>;\n      size: FieldArrayValueInlineControlProps<unknown>['size'];\n    },\n    HTMLDivElement\n  >\n>(\n  (\n    {\n      children,\n      className,\n      inputMinWidthAtom,\n      size = 'm',\n      style,\n      ...otherProps\n    },\n    ref,\n  ) => {\n    const [inputMinWidth] = useAtom(inputMinWidthAtom);\n\n    return (\n      <div\n        {...otherProps}\n        className={cnFieldArrayValueInlineControl(null, [className])}\n        ref={ref}\n        style={{\n          ...style,\n          ['--field-array-value-inline-control-items-gap' as string]:\n            gapMap[size],\n          ['--field-array-value-inline-control-input-min-width' as string]: `${inputMinWidth}px`,\n          ['--field-array-value-inline-control-vertical-padding' as string]: `${verticalPaddingMap[size]}`,\n          ['--field-array-value-inline-control-input-height' as string]: `${inputHeightMap[size]}`,\n        }}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nconst FieldArrayValueInlineControlRender = (\n  props: FieldArrayValueInlineControlProps<unknown>,\n  ref: React.Ref<HTMLDivElement>,\n) => {\n  const {\n    className,\n    inputRef: inputRefProp,\n    inputMaxLength,\n    value = [],\n    inputValue,\n    inputDefaultValue = '',\n    renderValue,\n    onFocus,\n    onBlur,\n    autoFocus,\n    inputTabIndex,\n    inputAriaLabel,\n    disabled,\n    size = 'm',\n    placeholder,\n    onKeyDown,\n    onKeyDownCapture,\n    onChange,\n    onKeyUp,\n    onKeyUpCapture,\n    onCopy,\n    onCopyCapture,\n    onCut,\n    onCutCapture,\n    onPaste,\n    onPasteCapture,\n    onWheel,\n    disableInput,\n    ...otherProps\n  } = props;\n\n  const propsAtom = useSendToAtom(props);\n  const inputValuePropAtom = usePropAtom(propsAtom, 'inputValue');\n  const valueAtom = usePropAtom(propsAtom, 'value');\n  const inputValueAtom = useCreateAtom(inputValue || inputDefaultValue || '');\n  const inputDefaultValueAtom = useCreateAtom(inputDefaultValue);\n  const inputMinWidthAtom = useCreateAtom(0);\n\n  const fakeInputRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const handleChange = useAction(\n    (ctx, e: React.ChangeEvent<HTMLInputElement>) => {\n      inputValueAtom(ctx, e.target.value);\n      const { onChange } = ctx.get(propsAtom);\n      if (onChange) {\n        onChange(e);\n      }\n    },\n    [],\n  );\n\n  const [valueNode] = useAtom((ctx) => {\n    const value = ctx.spy(valueAtom);\n    const { renderValue } = ctx.get(propsAtom);\n    return renderValue(value || []);\n  });\n\n  useAtom((ctx) => {\n    const inputValueProp = ctx.spy(inputValuePropAtom);\n    const inputDefaultValue = ctx.get(inputDefaultValueAtom);\n    if (inputDefaultValue) {\n      inputDefaultValueAtom(ctx, '');\n    } else {\n      if (inputRef.current) {\n        inputRef.current.value = inputValueProp || '';\n      }\n\n      inputValueAtom(ctx, inputValueProp || '');\n    }\n  });\n\n  return (\n    <Root\n      {...otherProps}\n      className={cnFieldArrayValueInlineControl(null, [className])}\n      ref={ref}\n      size={size}\n      inputMinWidthAtom={inputMinWidthAtom}\n    >\n      {valueNode}\n      <input\n        className={cnFieldArrayValueInlineControl('Input', {\n          disabled: disableInput,\n        })}\n        onChange={handleChange}\n        ref={useForkRef([inputRef, inputRefProp])}\n        maxLength={inputMaxLength}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        // eslint-disable-next-line jsx-a11y/no-autofocus\n        autoFocus={autoFocus}\n        tabIndex={inputTabIndex}\n        aria-label={inputAriaLabel}\n        onKeyDown={onKeyDown}\n        onKeyDownCapture={onKeyDownCapture}\n        onKeyUp={onKeyUp}\n        onKeyUpCapture={onKeyUpCapture}\n        disabled={disabled}\n        type=\"text\"\n        placeholder={value.length ? undefined : placeholder}\n        onCopy={onCopy}\n        onCopyCapture={onCopyCapture}\n        onCut={onCut}\n        onCutCapture={onCutCapture}\n        onPaste={onPaste}\n        onPasteCapture={onPasteCapture}\n        onWheel={onWheel}\n        defaultValue={inputDefaultValue}\n        readOnly={disableInput}\n      />\n      <InputFakeElement\n        ref={fakeInputRef}\n        className={cnFieldArrayValueInlineControl('HelperInputFakeElement')}\n        valueAtom={inputValueAtom}\n        inputMinWidthAtom={inputMinWidthAtom}\n      />\n    </Root>\n  );\n};\n\nexport const FieldArrayValueInlineControl = withCtx(\n  forwardRef(FieldArrayValueInlineControlRender),\n) as FieldArrayValueInlineControlComponent;\n"],"mappings":"uyCACA,OAASA,SAAT,CAAoBC,OAApB,CAA6BC,SAA7B,KAA8C,mBAA9C,CACA,MAAOC,MAAP,EAAgBC,UAAhB,CAA4BC,MAA5B,KAA0C,OAA1C,CAEA,OAASC,gBAAT,uCACA,OAASC,UAAT,iCACA,OAASC,WAAT,CAAsBC,aAAtB,CAAqCC,OAArC,4BACA,OAASC,aAAT,0CAIA,OAASC,8BAAT,wC,GAMMC,OAAqC,CAAG,CAC5CC,CAAC,CAAE,2CADyC,CAE5CC,CAAC,CAAE,kBAFyC,CAG5CC,CAAC,CAAE,kBAHyC,CAI5CC,EAAE,CAAE,kBAJwC,C,CAOxCC,kBAAiD,CAAG,CACxDJ,CAAC,CAAE,iBADqD,CAExDC,CAAC,CAAE,0CAFqD,CAGxDC,CAAC,CAAE,kBAHqD,CAIxDC,EAAE,CAAE,kBAJoD,C,CAOpDE,cAA6C,CAAG,CACpDL,CAAC,CAAE,kBADiD,CAEpDC,CAAC,CAAE,2CAFiD,CAGpDC,CAAC,CAAE,iBAHiD,CAIpDC,EAAE,CAAE,gBAJgD,C,CAOhDG,gBAAgB,CAAGhB,UAAU,CASjC,WAAkDiB,CAAlD,CAAmE,IAAhEC,EAAgE,GAAhEA,SAAgE,CAArDC,CAAqD,GAArDA,iBAAqD,CAA/BC,CAA+B,yCACnDvB,OAAO,CAACqB,CAAD,CAD4C,uBAC5DG,CAD4D,MAE7DC,CAAG,CAAGrB,MAAM,CAAiB,IAAjB,CAFiD,GAIjDC,gBAAgB,CAACoB,CAAD,CAJiC,CAI3DC,CAJ2D,GAI3DA,KAJ2D,CAanE,MAPAzB,UAAS,CACP,SAAC0B,CAAD,CAAMD,CAAN,CAAgB,CACdJ,CAAiB,CAACK,CAAD,CAAMD,CAAN,CAClB,CAHM,CAIP,CAACA,CAAD,CAJO,CAOT,CACE,2CAASH,CAAT,EAAqB,GAAG,CAAEjB,UAAU,CAAC,CAACc,CAAD,CAAeK,CAAf,CAAD,CAApC,GACGD,CADH,CAIH,CA3BkC,C,CA6B7BI,IAAI,CAAGzB,UAAU,CAUrB,WASEsB,CATF,CAUK,OARDI,CAQC,GARDA,QAQC,CAPDC,CAOC,GAPDA,SAOC,CANDR,CAMC,GANDA,iBAMC,KALDS,IAKC,CALDA,CAKC,YALM,GAKN,GAJDC,CAIC,GAJDA,KAIC,CAHET,CAGF,0CACqBvB,OAAO,CAACsB,CAAD,CAD5B,uBACIW,CADJ,MAGH,MACE,4CACMV,CADN,EAEE,SAAS,CAAEZ,8BAA8B,CAAC,IAAD,CAAO,CAACmB,CAAD,CAAP,CAF3C,CAGE,GAAG,CAAEL,CAHP,CAIE,KAAK,gCACAO,CADA,6BAEF,8CAFE,CAGDpB,MAAM,CAACmB,CAAD,CAHL,oBAIF,oDAJE,WAIkEE,CAJlE,0BAKF,qDALE,WAKmEhB,kBAAkB,CAACc,CAAD,CALrF,qBAMF,iDANE,WAM+Db,cAAc,CAACa,CAAD,CAN7E,MAJP,GAaGF,CAbH,CAgBH,CAxCoB,C,CA2CjBK,kCAAkC,CAAG,SACzCC,CADyC,CAEzCV,CAFyC,CAGtC,IAEDK,EAFC,CA+BCK,CA/BD,CAEDL,SAFC,CAGSM,CAHT,CA+BCD,CA/BD,CAGDE,QAHC,CAIDC,CAJC,CA+BCH,CA/BD,CAIDG,cAJC,GA+BCH,CA/BD,CAKDX,KALC,CAKDA,CALC,YAKO,EALP,GAMDe,CANC,CA+BCJ,CA/BD,CAMDI,UANC,GA+BCJ,CA/BD,CAODK,iBAPC,CAODA,CAPC,YAOmB,EAPnB,GAQDC,CARC,CA+BCN,CA/BD,CAQDM,WARC,CASDC,CATC,CA+BCP,CA/BD,CASDO,OATC,CAUDC,CAVC,CA+BCR,CA/BD,CAUDQ,MAVC,CAWDC,CAXC,CA+BCT,CA/BD,CAWDS,SAXC,CAYDC,CAZC,CA+BCV,CA/BD,CAYDU,aAZC,CAaDC,CAbC,CA+BCX,CA/BD,CAaDW,cAbC,CAcDC,CAdC,CA+BCZ,CA/BD,CAcDY,QAdC,GA+BCZ,CA/BD,CAeDJ,IAfC,CAeDA,CAfC,YAeM,GAfN,GAgBDiB,CAhBC,CA+BCb,CA/BD,CAgBDa,WAhBC,CAiBDC,CAjBC,CA+BCd,CA/BD,CAiBDc,SAjBC,CAkBDC,CAlBC,CA+BCf,CA/BD,CAkBDe,gBAlBC,CAmBDC,CAnBC,CA+BChB,CA/BD,CAmBDgB,QAnBC,CAoBDC,CApBC,CA+BCjB,CA/BD,CAoBDiB,OApBC,CAqBDC,CArBC,CA+BClB,CA/BD,CAqBDkB,cArBC,CAsBDC,CAtBC,CA+BCnB,CA/BD,CAsBDmB,MAtBC,CAuBDC,CAvBC,CA+BCpB,CA/BD,CAuBDoB,aAvBC,CAwBDC,CAxBC,CA+BCrB,CA/BD,CAwBDqB,KAxBC,CAyBDC,CAzBC,CA+BCtB,CA/BD,CAyBDsB,YAzBC,CA0BDC,CA1BC,CA+BCvB,CA/BD,CA0BDuB,OA1BC,CA2BDC,CA3BC,CA+BCxB,CA/BD,CA2BDwB,cA3BC,CA4BDC,CA5BC,CA+BCzB,CA/BD,CA4BDyB,OA5BC,CA6BDC,CA7BC,CA+BC1B,CA/BD,CA6BD0B,YA7BC,CA8BEtC,CA9BF,0BA+BCY,CA/BD,aAiCG2B,CAAS,CAAGtD,aAAa,CAAC2B,CAAD,CAjC5B,CAkCG4B,CAAkB,CAAGxD,WAAW,CAACuD,CAAD,CAAY,YAAZ,CAlCnC,CAmCGzC,CAAS,CAAGd,WAAW,CAACuD,CAAD,CAAY,OAAZ,CAnC1B,CAoCGE,CAAc,CAAGtD,aAAa,CAAC6B,CAAU,EAAIC,CAAd,EAAmC,EAApC,CApCjC,CAqCGyB,CAAqB,CAAGvD,aAAa,CAAC8B,CAAD,CArCxC,CAsCGlB,CAAiB,CAAGZ,aAAa,CAAC,CAAD,CAtCpC,CAwCGwD,CAAY,CAAG9D,MAAM,CAAiB,IAAjB,CAxCxB,CAyCGiC,CAAQ,CAAGjC,MAAM,CAAmB,IAAnB,CAzCpB,CA0CG+D,CAAY,CAAGpE,SAAS,CAC5B,SAAC4B,CAAD,CAAMyC,CAAN,CAAiD,CAC/CJ,CAAc,CAACrC,CAAD,CAAMyC,CAAC,CAACC,MAAF,CAAS7C,KAAf,CADiC,CAE/C,MAAqBG,CAAG,CAAC2C,GAAJ,CAAQR,CAAR,CAArB,CAAQX,CAAR,GAAQA,QAAR,CACIA,CAH2C,EAI7CA,CAAQ,CAACiB,CAAD,CAEX,CAP2B,CAQ5B,EAR4B,CA1C3B,GAqDiBpE,OAAO,CAAC,SAAC2B,CAAD,CAAS,IAC7BH,EAAK,CAAGG,CAAG,CAAC4C,GAAJ,CAAQlD,CAAR,CADqB,GAEXM,CAAG,CAAC2C,GAAJ,CAAQR,CAAR,CAFW,CAE3BrB,CAF2B,GAE3BA,WAF2B,CAGnC,MAAOA,EAAW,CAACjB,CAAK,EAAI,EAAV,CACnB,CAJ0B,CArDxB,uBAqDIgD,CArDJ,MAyEH,MAdAxE,QAAO,CAAC,SAAC2B,CAAD,CAAS,IACT8C,EAAc,CAAG9C,CAAG,CAAC4C,GAAJ,CAAQR,CAAR,CADR,CAETvB,CAAiB,CAAGb,CAAG,CAAC2C,GAAJ,CAAQL,CAAR,CAFX,CAGXzB,CAHW,CAIbyB,CAAqB,CAACtC,CAAD,CAAM,EAAN,CAJR,EAMTU,CAAQ,CAACqC,OANA,GAOXrC,CAAQ,CAACqC,OAAT,CAAiBlD,KAAjB,CAAyBiD,CAAc,EAAI,EAPhC,EAUbT,CAAc,CAACrC,CAAD,CAAM8C,CAAc,EAAI,EAAxB,CAVD,CAYhB,CAZM,CAcP,CACE,oBAAC,IAAD,kBACMlD,CADN,EAEE,SAAS,CAAEZ,8BAA8B,CAAC,IAAD,CAAO,CAACmB,CAAD,CAAP,CAF3C,CAGE,GAAG,CAAEL,CAHP,CAIE,IAAI,CAAEM,CAJR,CAKE,iBAAiB,CAAET,CALrB,GAOGkD,CAPH,CAQE,6BACE,SAAS,CAAE7D,8BAA8B,CAAC,OAAD,CAAU,CACjDoC,QAAQ,CAAEc,CADuC,CAAV,CAD3C,CAIE,QAAQ,CAAEM,CAJZ,CAKE,GAAG,CAAE7D,UAAU,CAAC,CAAC+B,CAAD,CAAWD,CAAX,CAAD,CALjB,CAME,SAAS,CAAEE,CANb,CAOE,OAAO,CAAEI,CAPX,CAQE,MAAM,CAAEC,CARV,CAUE,SAAS,CAAEC,CAVb,CAWE,QAAQ,CAAEC,CAXZ,CAYE,aAAYC,CAZd,CAaE,SAAS,CAAEG,CAbb,CAcE,gBAAgB,CAAEC,CAdpB,CAeE,OAAO,CAAEE,CAfX,CAgBE,cAAc,CAAEC,CAhBlB,CAiBE,QAAQ,CAAEN,CAjBZ,CAkBE,IAAI,CAAC,MAlBP,CAmBE,WAAW,CAAEvB,CAAK,CAACmD,MAAN,QAA2B3B,CAnB1C,CAoBE,MAAM,CAAEM,CApBV,CAqBE,aAAa,CAAEC,CArBjB,CAsBE,KAAK,CAAEC,CAtBT,CAuBE,YAAY,CAAEC,CAvBhB,CAwBE,OAAO,CAAEC,CAxBX,CAyBE,cAAc,CAAEC,CAzBlB,CA0BE,OAAO,CAAEC,CA1BX,CA2BE,YAAY,CAAEpB,CA3BhB,CA4BE,QAAQ,CAAEqB,CA5BZ,EARF,CAsCE,oBAAC,gBAAD,EACE,GAAG,CAAEK,CADP,CAEE,SAAS,CAAEvD,8BAA8B,CAAC,wBAAD,CAF3C,CAGE,SAAS,CAAEqD,CAHb,CAIE,iBAAiB,CAAE1C,CAJrB,EAtCF,CA8CH,C,CAED,MAAO,IAAMsD,6BAA4B,CAAGnE,OAAO,CACjDN,UAAU,CAAC+B,kCAAD,CADuC,CAA5C"}

package/__internal__/src/components/FieldComponents/FieldArrayValueInlineControl/types.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-import { PropsWithHTMLAttributesAndRef } from "../../../utils/types/PropsWithHTMLAttributes";
+import { PropsWithHTMLAttributesAndRef } from '##/utils/types/PropsWithHTMLAttributes';
 import { FieldPropSize } from '../types';
-export declare type FieldArrayValueInlineControlProps<ITEM> = PropsWithHTMLAttributesAndRef<{
+export type FieldArrayValueInlineControlProps<ITEM> = PropsWithHTMLAttributesAndRef<{
     children?: never;
     value?: ITEM[];
-    renderValue: (item: ITEM, index: number) => React.ReactNode;
+    renderValue: (items: ITEM[]) => React.ReactNode;
     inputMaxLength?: number;
     inputValue?: string;
     inputDefaultValue?: string;
@@ -23,5 +23,6 @@ export declare type FieldArrayValueInlineControlProps<ITEM> = PropsWithHTMLAttri
     placeholder?: string;
     size?: FieldPropSize;
     onWheel?: React.WheelEventHandler<HTMLInputElement>;
+    disableInput?: boolean;
 }, HTMLDivElement>;
-export declare type FieldArrayValueInlineControlComponent = <ITEM>(props: FieldArrayValueInlineControlProps<ITEM>) => React.ReactElement | null;
+export type FieldArrayValueInlineControlComponent = <ITEM>(props: FieldArrayValueInlineControlProps<ITEM>) => React.ReactElement | null;

package/__internal__/src/components/FieldComponents/FieldArrayValueInlineControl/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../../../src/components/FieldComponents/FieldArrayValueInlineControl/types.ts"],"sourcesContent":["import React from 'react';\n\nimport { PropsWithHTMLAttributesAndRef } from '##/utils/types/PropsWithHTMLAttributes';\n\nimport { FieldPropSize } from '../types';\n\nexport type FieldArrayValueInlineControlProps<ITEM> =\n  PropsWithHTMLAttributesAndRef<\n    {\n      children?: never;\n      value?: ITEM[];\n      renderValue: (item: ITEM, index: number) => React.ReactNode;\n      inputMaxLength?: number;\n      inputValue?: string;\n      inputDefaultValue?: string;\n      inputRef?: React.Ref<HTMLInputElement>;\n      onInputFocus?: React.FocusEventHandler<HTMLInputElement>;\n      onBlur?: React.FocusEventHandler<HTMLInputElement>;\n      onChange?: React.ChangeEventHandler<HTMLInputElement>;\n      autoFocus?: boolean;\n      inputTabIndex?: number;\n      inputAriaLabel?: string;\n      onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n      onKeyDownCapture?: React.KeyboardEventHandler<HTMLInputElement>;\n      onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;\n      onKeyUpCapture?: React.KeyboardEventHandler<HTMLInputElement>;\n      disabled?: boolean;\n      placeholder?: string;\n      size?: FieldPropSize;\n      onWheel?: React.WheelEventHandler<HTMLInputElement>;\n    },\n    HTMLDivElement\n  >;\n\nexport type FieldArrayValueInlineControlComponent = <ITEM>(\n  props: FieldArrayValueInlineControlProps<ITEM>,\n) => React.ReactElement | null;\n"],"mappings":""}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../../../src/components/FieldComponents/FieldArrayValueInlineControl/types.ts"],"sourcesContent":["import React from 'react';\n\nimport { PropsWithHTMLAttributesAndRef } from '##/utils/types/PropsWithHTMLAttributes';\n\nimport { FieldPropSize } from '../types';\n\nexport type FieldArrayValueInlineControlProps<ITEM> =\n  PropsWithHTMLAttributesAndRef<\n    {\n      children?: never;\n      value?: ITEM[];\n      renderValue: (items: ITEM[]) => React.ReactNode;\n      inputMaxLength?: number;\n      inputValue?: string;\n      inputDefaultValue?: string;\n      inputRef?: React.Ref<HTMLInputElement>;\n      onInputFocus?: React.FocusEventHandler<HTMLInputElement>;\n      onBlur?: React.FocusEventHandler<HTMLInputElement>;\n      onChange?: React.ChangeEventHandler<HTMLInputElement>;\n      autoFocus?: boolean;\n      inputTabIndex?: number;\n      inputAriaLabel?: string;\n      onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n      onKeyDownCapture?: React.KeyboardEventHandler<HTMLInputElement>;\n      onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;\n      onKeyUpCapture?: React.KeyboardEventHandler<HTMLInputElement>;\n      disabled?: boolean;\n      placeholder?: string;\n      size?: FieldPropSize;\n      onWheel?: React.WheelEventHandler<HTMLInputElement>;\n      disableInput?: boolean;\n    },\n    HTMLDivElement\n  >;\n\nexport type FieldArrayValueInlineControlComponent = <ITEM>(\n  props: FieldArrayValueInlineControlProps<ITEM>,\n) => React.ReactElement | null;\n"],"mappings":""}

package/__internal__/src/components/FieldComponents/FieldArrayValueItem/FieldArrayValueItem.css

@@ -1 +1 @@
-.TagBase.FieldArrayValueItem{flex:none;margin:0 var(--tag-space) var(--tag-space) 0}.TagBase.FieldArrayValueItem .TagBase-Label{word-break:break-word}.TagBase.FieldArrayValueItem_disabled{background-color:var(--color-control-bg-disable)}.TagBase.FieldArrayValueItem_disabled>*{color:var(--color-control-typo-disable)}
+.TagBase.FieldArrayValueItem{flex:none;max-width:calc(var(--field-control-layout-children-width) - var(--space-2xs));overflow:hidden}.TagBase.FieldArrayValueItem .TagBase-Label{overflow:hidden}.TagBase.FieldArrayValueItem .TagBase-Label,.TagBase.FieldArrayValueItem_disabled{display:inline-block;text-overflow:ellipsis;white-space:nowrap}

package/__internal__/src/components/FieldComponents/FieldArrayValueItem/FieldArrayValueItem.d.ts

@@ -1,7 +1,7 @@
 import './FieldArrayValueItem.css';
 import React from 'react';
-import { PropsWithHTMLAttributesAndRef } from "../../../utils/types/PropsWithHTMLAttributes";
-declare type FieldArrayValueItemProps = PropsWithHTMLAttributesAndRef<{
+import { PropsWithHTMLAttributesAndRef } from '##/utils/types/PropsWithHTMLAttributes';
+type FieldArrayValueItemProps = PropsWithHTMLAttributesAndRef<{
     label: string;
     size: 's' | 'm' | 'l' | 'xs';
     children?: never;

package/__internal__/src/components/FieldComponents/FieldArrayValueItem/FieldArrayValueItem.js

@@ -1,2 +1,2 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["onRemove","size","label","disabled","className"];import"./FieldArrayValueItem.css";import React,{forwardRef}from"react";import{TagBase}from"../../TagBase";import{cn}from"../../../utils/bem";export var cnFieldArrayValueItem=cn("FieldArrayValueItem");export var FieldArrayValueItem=forwardRef(function(a,b){var c=a.onRemove,d=a.size,e=a.label,f=a.disabled,g=a.className,h=_objectWithoutProperties(a,_excluded);return React.createElement(TagBase,Object.assign({},h,{as:"span",className:cnFieldArrayValueItem({disabled:f},[g]),ref:b,label:e,onCancel:f?void 0:c,size:d,cancelButtonTabIndex:-1,view:"filled"}))});
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["onRemove","size","label","disabled","className"];import"./FieldArrayValueItem.css";import React,{forwardRef}from"react";import{TagBase}from"../../TagBase";import{cn}from"../../../utils/bem";export var cnFieldArrayValueItem=cn("FieldArrayValueItem");export var FieldArrayValueItem=forwardRef(function(a,b){var c=a.onRemove,d=a.size,e=a.label,f=a.disabled,g=a.className,h=_objectWithoutProperties(a,_excluded);return React.createElement(TagBase,Object.assign({},h,{as:"span",className:cnFieldArrayValueItem({disabled:f},[g]),ref:b,label:e,onCancel:f?void 0:c,size:d,cancelButtonTabIndex:-1,view:"filled",disabled:f}))});
 //# sourceMappingURL=FieldArrayValueItem.js.map

package/__internal__/src/components/FieldComponents/FieldArrayValueItem/FieldArrayValueItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldArrayValueItem.js","names":["React","forwardRef","TagBase","cn","cnFieldArrayValueItem","FieldArrayValueItem","props","ref","onRemove","size","label","disabled","className","otherProps"],"sources":["../../../../../../src/components/FieldComponents/FieldArrayValueItem/FieldArrayValueItem.tsx"],"sourcesContent":["import './FieldArrayValueItem.css';\n\nimport React, { forwardRef } from 'react';\n\nimport { TagBase } from '##/components/TagBase';\nimport { cn } from '##/utils/bem';\nimport { PropsWithHTMLAttributesAndRef } from '##/utils/types/PropsWithHTMLAttributes';\n\ntype FieldArrayValueItemProps = PropsWithHTMLAttributesAndRef<\n  {\n    label: string;\n    size: 's' | 'm' | 'l' | 'xs';\n    children?: never;\n    disabled?: boolean;\n    onRemove?: React.MouseEventHandler<HTMLButtonElement>;\n  },\n  HTMLSpanElement\n>;\n\nexport const cnFieldArrayValueItem = cn('FieldArrayValueItem');\n\nexport const FieldArrayValueItem: React.FC<FieldArrayValueItemProps> =\n  forwardRef((props, ref) => {\n    const { onRemove, size, label, disabled, className, ...otherProps } = props;\n\n    return (\n      <TagBase\n        {...otherProps}\n        as=\"span\"\n        className={cnFieldArrayValueItem({ disabled }, [className])}\n        ref={ref}\n        label={label}\n        onCancel={disabled ? undefined : onRemove}\n        size={size}\n        cancelButtonTabIndex={-1}\n        view=\"filled\"\n      />\n    );\n  });\n"],"mappings":"sJAAA,kCAEA,MAAOA,MAAP,EAAgBC,UAAhB,KAAkC,OAAlC,CAEA,OAASC,OAAT,qBACA,OAASC,EAAT,0BAcA,MAAO,IAAMC,sBAAqB,CAAGD,EAAE,CAAC,qBAAD,CAAhC,CAEP,MAAO,IAAME,oBAAuD,CAClEJ,UAAU,CAAC,SAACK,CAAD,CAAQC,CAAR,CAAgB,CACzB,GAAQC,EAAR,CAAsEF,CAAtE,CAAQE,QAAR,CAAkBC,CAAlB,CAAsEH,CAAtE,CAAkBG,IAAlB,CAAwBC,CAAxB,CAAsEJ,CAAtE,CAAwBI,KAAxB,CAA+BC,CAA/B,CAAsEL,CAAtE,CAA+BK,QAA/B,CAAyCC,CAAzC,CAAsEN,CAAtE,CAAyCM,SAAzC,CAAuDC,CAAvD,0BAAsEP,CAAtE,YAEA,MACE,qBAAC,OAAD,kBACMO,CADN,EAEE,EAAE,CAAC,MAFL,CAGE,SAAS,CAAET,qBAAqB,CAAC,CAAEO,QAAQ,CAARA,CAAF,CAAD,CAAe,CAACC,CAAD,CAAf,CAHlC,CAIE,GAAG,CAAEL,CAJP,CAKE,KAAK,CAAEG,CALT,CAME,QAAQ,CAAEC,CAAQ,QAAeH,CANnC,CAOE,IAAI,CAAEC,CAPR,CAQE,oBAAoB,CAAE,CAAC,CARzB,CASE,IAAI,CAAC,QATP,GAYH,CAhBS,CADL"}
+{"version":3,"file":"FieldArrayValueItem.js","names":["React","forwardRef","TagBase","cn","cnFieldArrayValueItem","FieldArrayValueItem","props","ref","onRemove","size","label","disabled","className","otherProps"],"sources":["../../../../../../src/components/FieldComponents/FieldArrayValueItem/FieldArrayValueItem.tsx"],"sourcesContent":["import './FieldArrayValueItem.css';\n\nimport React, { forwardRef } from 'react';\n\nimport { TagBase } from '##/components/TagBase';\nimport { cn } from '##/utils/bem';\nimport { PropsWithHTMLAttributesAndRef } from '##/utils/types/PropsWithHTMLAttributes';\n\ntype FieldArrayValueItemProps = PropsWithHTMLAttributesAndRef<\n  {\n    label: string;\n    size: 's' | 'm' | 'l' | 'xs';\n    children?: never;\n    disabled?: boolean;\n    onRemove?: React.MouseEventHandler<HTMLButtonElement>;\n  },\n  HTMLSpanElement\n>;\n\nexport const cnFieldArrayValueItem = cn('FieldArrayValueItem');\n\nexport const FieldArrayValueItem: React.FC<FieldArrayValueItemProps> =\n  forwardRef((props, ref) => {\n    const { onRemove, size, label, disabled, className, ...otherProps } = props;\n\n    return (\n      <TagBase\n        {...otherProps}\n        as=\"span\"\n        className={cnFieldArrayValueItem({ disabled }, [className])}\n        ref={ref}\n        label={label}\n        onCancel={disabled ? undefined : onRemove}\n        size={size}\n        cancelButtonTabIndex={-1}\n        view=\"filled\"\n        disabled={disabled}\n      />\n    );\n  });\n"],"mappings":"sJAAA,kCAEA,MAAOA,MAAP,EAAgBC,UAAhB,KAAkC,OAAlC,CAEA,OAASC,OAAT,qBACA,OAASC,EAAT,0BAcA,MAAO,IAAMC,sBAAqB,CAAGD,EAAE,CAAC,qBAAD,CAAhC,CAEP,MAAO,IAAME,oBAAuD,CAClEJ,UAAU,CAAC,SAACK,CAAD,CAAQC,CAAR,CAAgB,CACzB,GAAQC,EAAR,CAAsEF,CAAtE,CAAQE,QAAR,CAAkBC,CAAlB,CAAsEH,CAAtE,CAAkBG,IAAlB,CAAwBC,CAAxB,CAAsEJ,CAAtE,CAAwBI,KAAxB,CAA+BC,CAA/B,CAAsEL,CAAtE,CAA+BK,QAA/B,CAAyCC,CAAzC,CAAsEN,CAAtE,CAAyCM,SAAzC,CAAuDC,CAAvD,0BAAsEP,CAAtE,YAEA,MACE,qBAAC,OAAD,kBACMO,CADN,EAEE,EAAE,CAAC,MAFL,CAGE,SAAS,CAAET,qBAAqB,CAAC,CAAEO,QAAQ,CAARA,CAAF,CAAD,CAAe,CAACC,CAAD,CAAf,CAHlC,CAIE,GAAG,CAAEL,CAJP,CAKE,KAAK,CAAEG,CALT,CAME,QAAQ,CAAEC,CAAQ,QAAeH,CANnC,CAOE,IAAI,CAAEC,CAPR,CAQE,oBAAoB,CAAE,CAAC,CARzB,CASE,IAAI,CAAC,QATP,CAUE,QAAQ,CAAEE,CAVZ,GAaH,CAjBS,CADL"}

package/__internal__/src/components/FieldComponents/FieldButton/FieldButton.css

@@ -1 +1 @@
-.FieldButton{--field-clear-button-fit-slop:calc(var(--field-control-layout-space)/2);--mix-hit-slop-top:var(--field-clear-button-fit-slop);--mix-hit-slop-left:var(--field-clear-button-fit-slop);--mix-hit-slop-right:var(--field-clear-button-fit-slop);--mix-hit-slop-bottom:var(--field-clear-button-fit-slop)}
+.FieldButton{--field-clear-button-fit-slop:calc(var(--field-control-layout-space)/2);--mix-hit-slop-top:var(--field-clear-button-fit-slop);--mix-hit-slop-left:var(--field-clear-button-fit-slop);--mix-hit-slop-right:var(--field-clear-button-fit-slop);--mix-hit-slop-bottom:var(--field-clear-button-fit-slop)}.FieldControlLayout:not(.FieldControlLayout_disabled) .FieldButton{cursor:pointer}

package/__internal__/src/components/FieldComponents/FieldButton/FieldButton.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { PropsWithHTMLAttributesAndRef } from "../../../utils/types/PropsWithHTMLAttributes";
-declare type FieldButtonProps = PropsWithHTMLAttributesAndRef<{
+import { PropsWithHTMLAttributesAndRef } from '##/utils/types/PropsWithHTMLAttributes';
+type FieldButtonProps = PropsWithHTMLAttributesAndRef<{
     children: React.ReactNode;
 }, HTMLButtonElement>;
 export declare const FieldButton: React.ForwardRefExoticComponent<Pick<FieldButtonProps, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & React.RefAttributes<HTMLButtonElement>>;

package/__internal__/src/components/FieldComponents/FieldButtonStyleReset/FieldButtonStyleReset.css

@@ -1 +1 @@
-.FieldButtonStyleReset{align-items:center;background-color:transparent;border:none;color:inherit;cursor:pointer;display:flex;justify-content:center}
+.FieldButtonStyleReset{align-items:center;background-color:transparent;border:none;color:inherit;display:flex;justify-content:center}

package/__internal__/src/components/FieldComponents/FieldCaption/FieldCaption.d.ts

@@ -1,6 +1,6 @@
 import { FieldPropStatus } from '../types';
-declare type FieldCaptionProps = {
+type FieldCaptionProps = {
     status?: FieldPropStatus;
 };
-export declare const FieldCaption: import("../../../utils/types/PropsWithAsAttributes").ComponentWithAs<FieldCaptionProps, "div">;
+export declare const FieldCaption: import("##/utils/types/PropsWithAsAttributes").ComponentWithAs<FieldCaptionProps, "div">;
 export {};

package/__internal__/src/components/FieldComponents/FieldClearButton/FieldClearButton.d.ts

@@ -1,9 +1,11 @@
+import { IconComponent } from '@consta/icons/Icon';
 import React from 'react';
-import { FieldPropSize } from "..";
-import { PropsWithHTMLAttributesAndRef } from "../../../utils/types/PropsWithHTMLAttributes";
-declare type FieldClearButtonProps = PropsWithHTMLAttributesAndRef<{
+import { FieldPropSize } from '##/components/FieldComponents';
+import { PropsWithHTMLAttributesAndRef } from '##/utils/types/PropsWithHTMLAttributes';
+type FieldClearButtonProps = PropsWithHTMLAttributesAndRef<{
     size?: FieldPropSize;
     children?: never;
+    icon?: IconComponent;
 }, HTMLButtonElement>;
-export declare const FieldClearButton: React.ForwardRefExoticComponent<Pick<FieldClearButtonProps, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "size" | "key"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const FieldClearButton: React.ForwardRefExoticComponent<Pick<FieldClearButtonProps, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "size" | "key" | "icon"> & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/__internal__/src/components/FieldComponents/FieldClearButton/FieldClearButton.js

@@ -1,2 +1,2 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["size"];import{IconClear}from"@consta/icons/IconClear";import React,{forwardRef}from"react";import{FieldButton,getFieldIconSize}from"./..";export var FieldClearButton=forwardRef(function(a,b){var c=a.size,d=void 0===c?"m":c,e=_objectWithoutProperties(a,_excluded);return React.createElement(FieldButton,Object.assign({},e,{ref:b}),React.createElement(IconClear,{size:getFieldIconSize(d)}))});
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["size","icon"];import{IconClear}from"@consta/icons/IconClear";import React,{forwardRef}from"react";import{FieldButton,getFieldIconSize}from"./..";export var FieldClearButton=forwardRef(function(a,b){var c=a.size,d=void 0===c?"m":c,e=a.icon,f=void 0===e?IconClear:e,g=_objectWithoutProperties(a,_excluded);return React.createElement(FieldButton,Object.assign({},g,{ref:b}),React.createElement(f,{size:getFieldIconSize(d)}))});
 //# sourceMappingURL=FieldClearButton.js.map

package/__internal__/src/components/FieldComponents/FieldClearButton/FieldClearButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldClearButton.js","names":["IconClear","React","forwardRef","FieldButton","getFieldIconSize","FieldClearButton","ref","size","props"],"sources":["../../../../../../src/components/FieldComponents/FieldClearButton/FieldClearButton.tsx"],"sourcesContent":["import { IconClear } from '@consta/icons/IconClear';\nimport React, { forwardRef } from 'react';\n\nimport {\n  FieldButton,\n  FieldPropSize,\n  getFieldIconSize,\n} from '##/components/FieldComponents';\nimport { PropsWithHTMLAttributesAndRef } from '##/utils/types/PropsWithHTMLAttributes';\n\ntype FieldClearButtonProps = PropsWithHTMLAttributesAndRef<\n  {\n    size?: FieldPropSize;\n    children?: never;\n  },\n  HTMLButtonElement\n>;\n\nexport const FieldClearButton = forwardRef<\n  HTMLButtonElement,\n  FieldClearButtonProps\n>(({ size = 'm', ...props }, ref) => {\n  return (\n    <FieldButton {...props} ref={ref}>\n      <IconClear size={getFieldIconSize(size)} />\n    </FieldButton>\n  );\n});\n"],"mappings":"4GAAA,OAASA,SAAT,KAA0B,yBAA1B,CACA,MAAOC,MAAP,EAAgBC,UAAhB,KAAkC,OAAlC,CAEA,OACEC,WADF,CAGEC,gBAHF,YAeA,MAAO,IAAMC,iBAAgB,CAAGH,UAAU,CAGxC,WAA2BI,CAA3B,CAAmC,SAAhCC,IAAgC,CAAhCA,CAAgC,YAAzB,GAAyB,GAAjBC,CAAiB,uCACnC,MACE,qBAAC,WAAD,kBAAiBA,CAAjB,EAAwB,GAAG,CAAEF,CAA7B,GACE,oBAAC,SAAD,EAAW,IAAI,CAAEF,gBAAgB,CAACG,CAAD,CAAjC,EADF,CAIH,CATyC,CAAnC"}
+{"version":3,"file":"FieldClearButton.js","names":["IconClear","React","forwardRef","FieldButton","getFieldIconSize","FieldClearButton","ref","size","icon","Icon","props"],"sources":["../../../../../../src/components/FieldComponents/FieldClearButton/FieldClearButton.tsx"],"sourcesContent":["import { IconComponent } from '@consta/icons/Icon';\nimport { IconClear } from '@consta/icons/IconClear';\nimport React, { forwardRef } from 'react';\n\nimport {\n  FieldButton,\n  FieldPropSize,\n  getFieldIconSize,\n} from '##/components/FieldComponents';\nimport { PropsWithHTMLAttributesAndRef } from '##/utils/types/PropsWithHTMLAttributes';\n\ntype FieldClearButtonProps = PropsWithHTMLAttributesAndRef<\n  {\n    size?: FieldPropSize;\n    children?: never;\n    icon?: IconComponent;\n  },\n  HTMLButtonElement\n>;\n\nexport const FieldClearButton = forwardRef<\n  HTMLButtonElement,\n  FieldClearButtonProps\n>(({ size = 'm', icon: Icon = IconClear, ...props }, ref) => {\n  return (\n    <FieldButton {...props} ref={ref}>\n      <Icon size={getFieldIconSize(size)} />\n    </FieldButton>\n  );\n});\n"],"mappings":"mHACA,OAASA,SAAT,KAA0B,yBAA1B,CACA,MAAOC,MAAP,EAAgBC,UAAhB,KAAkC,OAAlC,CAEA,OACEC,WADF,CAGEC,gBAHF,YAgBA,MAAO,IAAMC,iBAAgB,CAAGH,UAAU,CAGxC,WAAmDI,CAAnD,CAA2D,SAAxDC,IAAwD,CAAxDA,CAAwD,YAAjD,GAAiD,OAA5CC,IAA4C,CAAtCC,CAAsC,YAA/BT,SAA+B,GAAjBU,CAAiB,uCAC3D,MACE,qBAAC,WAAD,kBAAiBA,CAAjB,EAAwB,GAAG,CAAEJ,CAA7B,GACE,oBAAC,CAAD,EAAM,IAAI,CAAEF,gBAAgB,CAACG,CAAD,CAA5B,EADF,CAIH,CATyC,CAAnC"}

package/__internal__/src/components/FieldComponents/FieldControlLayout/FieldControlLayout.css

@@ -1,3 +1,3 @@
 .FieldControlLayout{--field-control-layout-slot-height:calc(var(--field-control-layout-height) - var(--field-control-layout-border-width)*2);--field-control-layout-slot-color:var(--color-control-typo-placeholder);--field-control-layout-placeholder-color:var(
       --color-control-typo-placeholder
-    );--field-control-layout-input-color:var(--color-control-typo-default);background-color:var(--field-control-layout-bg-color);border-color:var(--field-control-layout-border-color);border-radius:var(--field-control-layout-border-radius);border-style:var(--field-control-layout-border-style);border-width:var(--field-control-layout-border-width);box-sizing:border-box;font-size:var(--field-control-layout-text-size);line-height:var(--field-control-layout-text-line-height);min-height:var(--field-control-layout-height);padding:var(--field-control-layout-padding);transition:border-color .15s,box-shadow .15s}.FieldControlLayout_disabled{--field-control-layout-placeholder-color:var(--color-control-typo-disable);--field-control-layout-input-color:var(--color-control-typo-disable);--field-control-layout-slot-color:var(--color-control-typo-disable)}.FieldControlLayout-Container{display:flex;gap:var(--field-control-layout-space);min-height:var(--field-control-layout-slot-height)}.FieldControlLayout-Slot{align-items:center;color:var(--field-control-layout-slot-color);display:flex;flex:none;font-size:var(--field-control-layout-text-size);height:var(--field-control-layout-slot-height);justify-content:center}.FieldControlLayout-Children{flex:auto}
+    );--field-control-layout-input-color:var(--color-control-typo-default);--field-control-layout-left-slots-width:calc(var(--field-control-layout-left-slots-length)*var(--field-control-layout-space) + var(--field-control-layout-left-slot-contents-width));--field-control-layout-right-slots-width:calc(var(--field-control-layout-right-slots-length)*var(--field-control-layout-space) + var(--field-control-layout-right-slot-contents-width));--field-control-layout-children-width:calc(var(--field-control-layout-container-width) - var(--field-control-layout-right-slots-width) - var(--field-control-layout-left-slots-width));background-color:var(--field-control-layout-bg-color);border-color:var(--field-control-layout-border-color);border-radius:var(--field-control-layout-border-radius);border-style:var(--field-control-layout-border-style);border-width:var(--field-control-layout-border-width);box-sizing:border-box;font-size:var(--field-control-layout-text-size);line-height:var(--field-control-layout-text-line-height);min-height:var(--field-control-layout-height);padding:var(--field-control-layout-padding);transition:border-color .15s,box-shadow .15s;width:100%}.FieldControlLayout_disabled{--field-control-layout-placeholder-color:var(--color-control-typo-disable);--field-control-layout-input-color:var(--color-control-typo-disable);--field-control-layout-slot-color:var(--color-control-typo-disable)}.FieldControlLayout_alignSlots_top .FieldControlLayout-Slot{height:var(--field-control-layout-slot-height)}.FieldControlLayout_alignSlots_center .FieldControlLayout-Slot{height:auto}.FieldControlLayout-Container{display:flex;gap:var(--field-control-layout-space);min-height:var(--field-control-layout-slot-height)}.FieldControlLayout-Slot{align-items:center;color:var(--field-control-layout-slot-color);display:flex;flex:none;font-size:var(--field-control-layout-text-size);justify-content:center}.FieldControlLayout-Children{flex:auto;width:var(--field-control-layout-children-width)}

package/__internal__/src/components/FieldComponents/FieldControlLayout/FieldControlLayout.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { FieldControlLayoutProps } from './types';
-export declare const FieldControlLayout: React.ForwardRefExoticComponent<Pick<FieldControlLayoutProps, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "size" | "view" | "form" | "status" | "key" | "disabled" | "focused" | "leftSide" | "rightSide" | "leftSlotsRefs" | "rightSlotsRefs"> & React.RefAttributes<HTMLDivElement>>;
+export declare const FieldControlLayout: React.ForwardRefExoticComponent<Pick<FieldControlLayoutProps, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "size" | "view" | "form" | "status" | "key" | "disabled" | "focused" | "leftSide" | "rightSide" | "leftSlotsRefs" | "rightSlotsRefs" | "alignSlots"> & React.RefAttributes<HTMLDivElement>>;

package/__internal__/src/components/FieldComponents/FieldControlLayout/FieldControlLayout.js

@@ -1,2 +1,2 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["className","size","form","disabled","view","status","leftSide","rightSide","children","style","focused","leftSlotsRefs","rightSlotsRefs"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import React,{forwardRef}from"react";import{useFlag}from"../../../hooks/useFlag";import{cnFieldControlLayout}from"./cnFieldControlLayout";import{formGuard,getBgColor,getBorderColor,getBorderRadius,getBorderStyle,getPadding,getSlots}from"./helpers";var renderContentSlot=function(a,b,c){return React.createElement("div",{key:b,ref:null===c||void 0===c?void 0:c[b],className:cnFieldControlLayout("Slot")},a)};export var FieldControlLayout=forwardRef(function(a,b){var c,d=a.className,e=a.size,f=void 0===e?"m":e,g=a.form,h=void 0===g?"default":g,i=a.disabled,j=void 0!==i&&i,k=a.view,l=void 0===k?"default":k,m=a.status,n=a.leftSide,o=a.rightSide,p=a.children,q=a.style,r=a.focused,s=a.leftSlotsRefs,t=a.rightSlotsRefs,u=_objectWithoutProperties(a,_excluded),v=getSlots(n),w=getSlots(o),x=formGuard(h),y=useFlag(),z=_slicedToArray(y,2),A=z[0],B=z[1];return React.createElement("div",Object.assign({},u,{ref:b,className:cnFieldControlLayout({form:x,disabled:j,view:l},[d]),style:_objectSpread(_objectSpread({},q),{},(c={},_defineProperty(c,"--field-control-layout-border-color",getBorderColor(r,A,m,j)),_defineProperty(c,"--field-control-layout-height","var(--control-height-".concat(f,")")),_defineProperty(c,"--field-control-layout-space","calc(var(--control-space-".concat(f,") * 0.5)")),_defineProperty(c,"--field-control-layout-text-size","var(--control-text-size-".concat(f,")")),_defineProperty(c,"--field-control-layout-text-line-height","var(--line-height-text-".concat(f,")")),_defineProperty(c,"--field-control-layout-border-radius",getBorderRadius(x,l)),_defineProperty(c,"--field-control-layout-border-style",getBorderStyle(x,l)),_defineProperty(c,"--field-control-layout-padding",getPadding(x,l)),_defineProperty(c,"--field-control-layout-bg-color",getBgColor(l,j)),_defineProperty(c,"--field-control-layout-border-width","default"===l?"var(--control-border-width)":"0px"),c)),onMouseEnter:B.on,onMouseLeave:B.off}),React.createElement("div",{className:cnFieldControlLayout("Container")},!!v.length&&v.map(function(a,b){return renderContentSlot(a,b,s)}),React.createElement("div",{className:cnFieldControlLayout("Children")},p),!!w.length&&w.map(function(a,b){return renderContentSlot(a,b,t)})))});
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["className","size","form","disabled","view","status","leftSide","rightSide","children","style","focused","leftSlotsRefs","rightSlotsRefs","alignSlots"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import React,{forwardRef}from"react";import{useFlag}from"../../../hooks/useFlag";import{forkRef}from"../../../hooks/useForkRef";import{useRefs}from"../../../hooks/useRefs";import{getElementWidth,useResizeObserved}from"../../../hooks/useResizeObserved";import{cnFieldControlLayout}from"./cnFieldControlLayout";import{formGuard,getBgColor,getBorderColor,getBorderRadius,getBorderStyle,getPadding,getSlots,getSlotsWidthStyles}from"./helpers";var renderContentSlot=function(a,b,c,d){return React.createElement("div",{key:b,ref:forkRef([null===c||void 0===c?void 0:c[b],null===d||void 0===d?void 0:d[b]]),className:cnFieldControlLayout("Slot")},a)};export var FieldControlLayout=forwardRef(function(a,b){var c,d=a.className,e=a.size,f=void 0===e?"m":e,g=a.form,h=void 0===g?"default":g,i=a.disabled,j=void 0!==i&&i,k=a.view,l=void 0===k?"default":k,m=a.status,n=a.leftSide,o=a.rightSide,p=a.children,q=a.style,r=a.focused,s=a.leftSlotsRefs,t=a.rightSlotsRefs,u=a.alignSlots,v=void 0===u?"top":u,w=_objectWithoutProperties(a,_excluded),x=getSlots(n),y=getSlots(o),z=useRefs(x.length),A=useRefs(1),B=useRefs(y.length),C=useResizeObserved(z,getElementWidth),D=useResizeObserved(B,getElementWidth),E=useResizeObserved(A,getElementWidth)[0],F=formGuard(h),G=useFlag(),H=_slicedToArray(G,2),I=H[0],J=H[1];return React.createElement("div",Object.assign({},w,{ref:b,className:cnFieldControlLayout({form:F,disabled:j,view:l,alignSlots:v,status:m},[d]),style:_objectSpread(_objectSpread(_objectSpread({},q),{},(c={},_defineProperty(c,"--field-control-layout-border-color",getBorderColor(r,I,m,j)),_defineProperty(c,"--field-control-layout-height","var(--control-height-".concat(f,")")),_defineProperty(c,"--field-control-layout-space","calc(var(--control-space-".concat(f,") * 0.5)")),_defineProperty(c,"--field-control-layout-text-size","var(--control-text-size-".concat(f,")")),_defineProperty(c,"--field-control-layout-text-line-height","var(--line-height-text-".concat(f,")")),_defineProperty(c,"--field-control-layout-border-radius",getBorderRadius(F,l)),_defineProperty(c,"--field-control-layout-border-style",getBorderStyle(F,l)),_defineProperty(c,"--field-control-layout-padding",getPadding(F,l)),_defineProperty(c,"--field-control-layout-bg-color",getBgColor(l,j)),_defineProperty(c,"--field-control-layout-border-width","default"===l?"var(--control-border-width)":"0px"),_defineProperty(c,"--field-control-layout-container-width","".concat(E,"px")),c),getSlotsWidthStyles(C,"left")),getSlotsWidthStyles(D,"right")),onMouseEnter:J.on,onMouseLeave:J.off}),React.createElement("div",{ref:A[0],className:cnFieldControlLayout("Container")},!!x.length&&x.map(function(a,b){return renderContentSlot(a,b,z,s)}),React.createElement("div",{className:cnFieldControlLayout("Children")},p),!!y.length&&y.map(function(a,b){return renderContentSlot(a,b,B,t)})))});
 //# sourceMappingURL=FieldControlLayout.js.map

package/__internal__/src/components/FieldComponents/FieldControlLayout/FieldControlLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldControlLayout.js","names":["React","forwardRef","useFlag","cnFieldControlLayout","formGuard","getBgColor","getBorderColor","getBorderRadius","getBorderStyle","getPadding","getSlots","renderContentSlot","node","index","slotsRefs","FieldControlLayout","props","ref","className","size","form","formProp","disabled","view","status","leftSide","rightSide","children","style","focused","leftSlotsRefs","rightSlotsRefs","otherProps","leftSlots","rightSlots","hovered","setHovered","on","off","length","map","slot"],"sources":["../../../../../../src/components/FieldComponents/FieldControlLayout/FieldControlLayout.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { useFlag } from '##/hooks/useFlag';\n\nimport { cnFieldControlLayout } from './cnFieldControlLayout';\nimport {\n  formGuard,\n  getBgColor,\n  getBorderColor,\n  getBorderRadius,\n  getBorderStyle,\n  getPadding,\n  getSlots,\n} from './helpers';\nimport { FieldControlLayoutProps } from './types';\n\nconst renderContentSlot = (\n  node: React.ReactNode,\n  index: number,\n  slotsRefs?: React.Ref<HTMLDivElement>[],\n) => (\n  <div\n    key={index}\n    ref={slotsRefs?.[index]}\n    className={cnFieldControlLayout('Slot')}\n  >\n    {node}\n  </div>\n);\n\nexport const FieldControlLayout = forwardRef<\n  HTMLDivElement,\n  FieldControlLayoutProps\n>((props, ref) => {\n  const {\n    className,\n    size = 'm',\n    form: formProp = 'default',\n    disabled = false,\n    view = 'default',\n    status,\n    leftSide,\n    rightSide,\n    children,\n    style,\n    focused,\n    leftSlotsRefs,\n    rightSlotsRefs,\n    ...otherProps\n  } = props;\n  const leftSlots = getSlots(leftSide);\n  const rightSlots = getSlots(rightSide);\n\n  // ToDo: Удалить после того как удалим из всех компонентов \"clearClear\"\n  const form = formGuard(formProp);\n\n  const [hovered, setHovered] = useFlag();\n\n  return (\n    <div\n      {...otherProps}\n      ref={ref}\n      className={cnFieldControlLayout({ form, disabled, view }, [className])}\n      style={{\n        ...style,\n        ['--field-control-layout-border-color' as string]: getBorderColor(\n          focused,\n          hovered,\n          status,\n          disabled,\n        ),\n        ['--field-control-layout-height' as string]: `var(--control-height-${size})`,\n        ['--field-control-layout-space' as string]: `calc(var(--control-space-${size}) * 0.5)`,\n        ['--field-control-layout-text-size' as string]: `var(--control-text-size-${size})`,\n        ['--field-control-layout-text-line-height' as string]: `var(--line-height-text-${size})`,\n        ['--field-control-layout-border-radius' as string]: getBorderRadius(\n          form,\n          view,\n        ),\n        ['--field-control-layout-border-style' as string]: getBorderStyle(\n          form,\n          view,\n        ),\n        ['--field-control-layout-padding' as string]: getPadding(form, view),\n        ['--field-control-layout-bg-color' as string]: getBgColor(\n          view,\n          disabled,\n        ),\n        ['--field-control-layout-border-width' as string]:\n          view === 'default' ? 'var(--control-border-width)' : '0px',\n      }}\n      onMouseEnter={setHovered.on}\n      onMouseLeave={setHovered.off}\n    >\n      <div className={cnFieldControlLayout('Container')}>\n        {!!leftSlots.length &&\n          leftSlots.map((slot, index) =>\n            renderContentSlot(slot, index, leftSlotsRefs),\n          )}\n        <div className={cnFieldControlLayout('Children')}>{children}</div>\n        {!!rightSlots.length &&\n          rightSlots.map((slot, index) =>\n            renderContentSlot(slot, index, rightSlotsRefs),\n          )}\n      </div>\n    </div>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"FieldControlLayout.js","names":["React","forwardRef","useFlag","forkRef","useRefs","getElementWidth","useResizeObserved","cnFieldControlLayout","formGuard","getBgColor","getBorderColor","getBorderRadius","getBorderStyle","getPadding","getSlots","getSlotsWidthStyles","renderContentSlot","node","index","slotsInnerRefs","slotsRefs","FieldControlLayout","props","ref","className","size","form","formProp","disabled","view","status","leftSide","rightSide","children","style","focused","leftSlotsRefsProp","leftSlotsRefs","rightSlotsRefsProp","rightSlotsRefs","alignSlots","otherProps","leftSlots","rightSlots","length","containerRefs","leftSlotsWidth","rightSlotsWidth","containerWidth","hovered","setHovered","on","off","map","slot"],"sources":["../../../../../../src/components/FieldComponents/FieldControlLayout/FieldControlLayout.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { useFlag } from '##/hooks/useFlag';\nimport { forkRef } from '##/hooks/useForkRef';\nimport { useRefs } from '##/hooks/useRefs';\nimport { getElementWidth, useResizeObserved } from '##/hooks/useResizeObserved';\n\nimport { cnFieldControlLayout } from './cnFieldControlLayout';\nimport {\n  formGuard,\n  getBgColor,\n  getBorderColor,\n  getBorderRadius,\n  getBorderStyle,\n  getPadding,\n  getSlots,\n  getSlotsWidthStyles,\n} from './helpers';\nimport { FieldControlLayoutProps } from './types';\n\nconst renderContentSlot = (\n  node: React.ReactNode,\n  index: number,\n  slotsInnerRefs?: React.Ref<HTMLDivElement>[],\n  slotsRefs?: React.Ref<HTMLDivElement>[],\n) => (\n  <div\n    key={index}\n    ref={forkRef([slotsInnerRefs?.[index], slotsRefs?.[index]])}\n    className={cnFieldControlLayout('Slot')}\n  >\n    {node}\n  </div>\n);\n\nexport const FieldControlLayout = forwardRef<\n  HTMLDivElement,\n  FieldControlLayoutProps\n>((props, ref) => {\n  const {\n    className,\n    size = 'm',\n    form: formProp = 'default',\n    disabled = false,\n    view = 'default',\n    status,\n    leftSide,\n    rightSide,\n    children,\n    style,\n    focused,\n    leftSlotsRefs: leftSlotsRefsProp,\n    rightSlotsRefs: rightSlotsRefsProp,\n    alignSlots = 'top',\n    ...otherProps\n  } = props;\n  const leftSlots = getSlots(leftSide);\n  const rightSlots = getSlots(rightSide);\n  const leftSlotsRefs = useRefs<HTMLDivElement>(leftSlots.length);\n  const containerRefs = useRefs<HTMLDivElement>(1);\n  const rightSlotsRefs = useRefs<HTMLDivElement>(rightSlots.length);\n  const leftSlotsWidth = useResizeObserved(leftSlotsRefs, getElementWidth);\n  const rightSlotsWidth = useResizeObserved(rightSlotsRefs, getElementWidth);\n  const containerWidth = useResizeObserved(containerRefs, getElementWidth)[0];\n\n  // ToDo: Удалить после того как удалим из всех компонентов \"clearClear\"\n  const form = formGuard(formProp);\n\n  const [hovered, setHovered] = useFlag();\n\n  return (\n    <div\n      {...otherProps}\n      ref={ref}\n      className={cnFieldControlLayout(\n        { form, disabled, view, alignSlots, status },\n        [className],\n      )}\n      style={{\n        ...style,\n        ['--field-control-layout-border-color' as string]: getBorderColor(\n          focused,\n          hovered,\n          status,\n          disabled,\n        ),\n        ['--field-control-layout-height' as string]: `var(--control-height-${size})`,\n        ['--field-control-layout-space' as string]: `calc(var(--control-space-${size}) * 0.5)`,\n        ['--field-control-layout-text-size' as string]: `var(--control-text-size-${size})`,\n        ['--field-control-layout-text-line-height' as string]: `var(--line-height-text-${size})`,\n        ['--field-control-layout-border-radius' as string]: getBorderRadius(\n          form,\n          view,\n        ),\n        ['--field-control-layout-border-style' as string]: getBorderStyle(\n          form,\n          view,\n        ),\n        ['--field-control-layout-padding' as string]: getPadding(form, view),\n        ['--field-control-layout-bg-color' as string]: getBgColor(\n          view,\n          disabled,\n        ),\n        ['--field-control-layout-border-width' as string]:\n          view === 'default' ? 'var(--control-border-width)' : '0px',\n        ['--field-control-layout-container-width' as string]: `${containerWidth}px`,\n        ...getSlotsWidthStyles(leftSlotsWidth, 'left'),\n        ...getSlotsWidthStyles(rightSlotsWidth, 'right'),\n      }}\n      onMouseEnter={setHovered.on}\n      onMouseLeave={setHovered.off}\n    >\n      <div ref={containerRefs[0]} className={cnFieldControlLayout('Container')}>\n        {!!leftSlots.length &&\n          leftSlots.map((slot, index) =>\n            renderContentSlot(slot, index, leftSlotsRefs, leftSlotsRefsProp),\n          )}\n        <div className={cnFieldControlLayout('Children')}>{children}</div>\n        {!!rightSlots.length &&\n          rightSlots.map((slot, index) =>\n            renderContentSlot(slot, index, rightSlotsRefs, rightSlotsRefsProp),\n          )}\n      </div>\n    </div>\n  );\n});\n"],"mappings":"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"}

package/__internal__/src/components/FieldComponents/FieldControlLayout/helpers.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import { FieldPropForm, FieldPropStatus, FieldPropView } from '../types';
 export declare const getSlots: (side: React.ReactNode | JSX.Element[]) => React.ReactNode[];
 export declare const getBorderStyle: (form: FieldPropForm, view: FieldPropView) => string;
@@ -6,4 +6,5 @@ export declare const getPadding: (form: FieldPropForm, view: FieldPropView) => s
 export declare const getBorderRadius: (form: FieldPropForm, view: FieldPropView) => string;
 export declare const getBorderColor: (focused?: boolean, hovered?: boolean, status?: FieldPropStatus, disabled?: boolean) => string;
 export declare const getBgColor: (view: FieldPropView, disabled?: boolean) => "var(--color-control-bg-disable)" | "var(--color-bg-default)" | undefined;
-export declare const formGuard: (from: FieldPropForm | 'clearClear') => FieldPropForm;
+export declare const getSlotsWidthStyles: (sizes: number[], postfix: string) => CSSProperties;
+export declare const formGuard: (from: FieldPropForm | "clearClear") => FieldPropForm;

package/__internal__/src/components/FieldComponents/FieldControlLayout/helpers.js

@@ -1,2 +1,2 @@
-import{isNotNil}from"../../../utils/type-guards";import{borderRadiusMap,borderWidthMap,paddingMap}from"./maps";export var getSlots=function(a){return(Array.isArray(a)?a:[a]).filter(function(a){return isNotNil(a)&&!1!==a})};var borderToCss=function(a){return a?"solid":"none"};export var getBorderStyle=function(a,b){return"default"===b?"solid ".concat(borderToCss(borderWidthMap[a][1])," solid ").concat(borderToCss(borderWidthMap[a][0])):"none"};var paddingToCss=function(a){return"increased"===a?"calc(var(--field-control-layout-space) * 1.6)":"var(--field-control-layout-space)"};export var getPadding=function(a,b){return"default"===b?"0px ".concat(paddingToCss(paddingMap[a][1])," 0px ").concat(paddingToCss(paddingMap[a][0])):"1px 0px 1px 0px"};var borderRadiusToCss=function(a){return"default"===a?"var(--control-radius)":"round"===a?"calc(var(--field-control-layout-height) / 2)":"0px"};export var getBorderRadius=function(a,b){return"default"===b?borderRadiusMap[a].map(borderRadiusToCss).join(" "):"0px 0px 0px 0px"};export var getBorderColor=function(a,b,c,d){return d?"transparent":a?"var(--color-control-bg-border-focus)":b?"var(--color-control-bg-border-default-hover)":c?"var(--color-bg-".concat(c,")"):"var(--color-control-bg-border-default)"};export var getBgColor=function(a,b){return"default"===a&&b?"var(--color-control-bg-disable)":"default"===a?"var(--color-bg-default)":void 0};export var formGuard=function(a){return"clearClear"===a?"clear":a};
+import{isNotNil}from"../../../utils/type-guards";import{borderRadiusMap,borderWidthMap,paddingMap}from"./maps";export var getSlots=function(a){return(Array.isArray(a)?a:[a]).filter(function(a){return isNotNil(a)&&!1!==a})};var borderToCss=function(a){return a?"solid":"none"};export var getBorderStyle=function(a,b){return"default"===b?"solid ".concat(borderToCss(borderWidthMap[a][1])," solid ").concat(borderToCss(borderWidthMap[a][0])):"none"};var paddingToCss=function(a){return"increased"===a?"calc(var(--field-control-layout-space) * 1.6)":"var(--field-control-layout-space)"};export var getPadding=function(a,b){return"default"===b?"0px ".concat(paddingToCss(paddingMap[a][1])," 0px ").concat(paddingToCss(paddingMap[a][0])):"1px 0px 1px 0px"};var borderRadiusToCss=function(a){return"default"===a?"var(--control-radius)":"round"===a?"calc(var(--field-control-layout-height) / 2)":"0px"};export var getBorderRadius=function(a,b){return"default"===b?borderRadiusMap[a].map(borderRadiusToCss).join(" "):"0px 0px 0px 0px"};export var getBorderColor=function(a,b,c,d){return d?"transparent":a?"var(--color-control-bg-border-focus)":b?"var(--color-control-bg-border-default-hover)":c?"var(--color-bg-".concat(c,")"):"var(--color-control-bg-border-default)"};export var getBgColor=function(a,b){return"default"===a&&b?"var(--color-control-bg-disable)":"default"===a?"var(--color-bg-default)":void 0};export var getSlotsWidthStyles=function(a,b){for(var c={},d=0;d<a.length;d++)c["--field-control-layout-".concat(b,"-slot-content-width-").concat(d)]="".concat(a[d],"px");return c["--field-control-layout-".concat(b,"-slot-contents-width")]="".concat(a.length?a.reduce(function(c,a){return c+a}):0,"px"),c["--field-control-layout-".concat(b,"-slots-length")]="".concat(a.length),c};export var formGuard=function(a){return"clearClear"===a?"clear":a};
 //# sourceMappingURL=helpers.js.map

package/__internal__/src/components/FieldComponents/FieldControlLayout/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","names":["isNotNil","borderRadiusMap","borderWidthMap","paddingMap","getSlots","side","Array","isArray","filter","item","borderToCss","value","getBorderStyle","form","view","paddingToCss","getPadding","borderRadiusToCss","getBorderRadius","map","join","getBorderColor","focused","hovered","status","disabled","getBgColor","formGuard","from"],"sources":["../../../../../../src/components/FieldComponents/FieldControlLayout/helpers.ts"],"sourcesContent":["import React from 'react';\n\nimport { isNotNil } from '##/utils/type-guards';\n\nimport { FieldPropForm, FieldPropStatus, FieldPropView } from '../types';\nimport {\n  borderRadiusMap,\n  borderWidthMap,\n  FieldControlLayoutBorderRadiusNode,\n  FieldControlLayoutBorderWidthNode,\n  FieldControlLayoutPaddingNode,\n  paddingMap,\n} from './maps';\n\nexport const getSlots = (\n  side: React.ReactNode | JSX.Element[],\n): React.ReactNode[] => {\n  return ((Array.isArray(side) ? side : [side]) as []).filter(\n    (item) => isNotNil(item) && item !== false,\n  );\n};\n\nconst borderToCss = (value: FieldControlLayoutBorderWidthNode) => {\n  return value ? 'solid' : 'none';\n};\n\nexport const getBorderStyle = (\n  form: FieldPropForm,\n  view: FieldPropView,\n): string => {\n  return view === 'default'\n    ? `solid ${borderToCss(borderWidthMap[form][1])} solid ${borderToCss(\n        borderWidthMap[form][0],\n      )}`\n    : `none`;\n};\n\nconst paddingToCss = (value: FieldControlLayoutPaddingNode): string => {\n  return value === 'increased'\n    ? 'calc(var(--field-control-layout-space) * 1.6)'\n    : 'var(--field-control-layout-space)';\n};\n\nexport const getPadding = (\n  form: FieldPropForm,\n  view: FieldPropView,\n): string => {\n  return view === 'default'\n    ? `0px ${paddingToCss(paddingMap[form][1])} 0px ${paddingToCss(\n        paddingMap[form][0],\n      )}`\n    : `1px 0px 1px 0px`;\n};\n\nconst borderRadiusToCss = (\n  value: FieldControlLayoutBorderRadiusNode,\n): string => {\n  if (value === 'default') {\n    return 'var(--control-radius)';\n  }\n  if (value === 'round') {\n    return 'calc(var(--field-control-layout-height) / 2)';\n  }\n  return '0px';\n};\n\nexport const getBorderRadius = (\n  form: FieldPropForm,\n  view: FieldPropView,\n): string => {\n  return view === 'default'\n    ? borderRadiusMap[form].map(borderRadiusToCss).join(' ')\n    : `0px 0px 0px 0px`;\n};\n\nexport const getBorderColor = (\n  focused?: boolean,\n  hovered?: boolean,\n  status?: FieldPropStatus,\n  disabled?: boolean,\n) => {\n  if (disabled) {\n    return 'transparent';\n  }\n  if (focused) {\n    return 'var(--color-control-bg-border-focus)';\n  }\n  if (hovered) {\n    return 'var(--color-control-bg-border-default-hover)';\n  }\n  if (status) {\n    return `var(--color-bg-${status})`;\n  }\n  return 'var(--color-control-bg-border-default)';\n};\n\nexport const getBgColor = (view: FieldPropView, disabled?: boolean) => {\n  if (view === 'default' && disabled) {\n    return 'var(--color-control-bg-disable)';\n  }\n  if (view === 'default') {\n    return 'var(--color-bg-default)';\n  }\n};\n\n// ToDo: Удалить после того как удалим из всех компонентов \"clearClear\"\nexport const formGuard = (from: FieldPropForm | 'clearClear'): FieldPropForm =>\n  from === 'clearClear' ? 'clear' : from;\n"],"mappings":"AAEA,OAASA,QAAT,kCAGA,OACEC,eADF,CAEEC,cAFF,CAMEC,UANF,cASA,MAAO,IAAMC,SAAQ,CAAG,SACtBC,CADsB,CAEA,CACtB,MAAO,CAAEC,KAAK,CAACC,OAAN,CAAcF,CAAd,EAAsBA,CAAtB,CAA6B,CAACA,CAAD,CAA/B,EAA8CG,MAA9C,CACL,SAACC,CAAD,QAAUT,SAAQ,CAACS,CAAD,CAAR,EAAkB,KAAAA,CAA5B,CADK,CAGR,CANM,CAQP,GAAMC,YAAW,CAAG,SAACC,CAAD,CAA8C,CAChE,MAAOA,EAAK,CAAG,OAAH,CAAa,MAC1B,CAFD,CAIA,MAAO,IAAMC,eAAc,CAAG,SAC5BC,CAD4B,CAE5BC,CAF4B,CAGjB,CACX,MAAgB,SAAT,GAAAA,CAAI,iBACEJ,WAAW,CAACR,cAAc,CAACW,CAAD,CAAd,CAAqB,CAArB,CAAD,CADb,mBACgDH,WAAW,CAChER,cAAc,CAACW,CAAD,CAAd,CAAqB,CAArB,CADgE,CAD3D,QAKZ,CATM,CAWP,GAAME,aAAY,CAAG,SAACJ,CAAD,CAAkD,CACrE,MAAiB,WAAV,GAAAA,CAAK,CACR,+CADQ,CAER,mCACL,CAJD,CAMA,MAAO,IAAMK,WAAU,CAAG,SACxBH,CADwB,CAExBC,CAFwB,CAGb,CACX,MAAgB,SAAT,GAAAA,CAAI,eACAC,YAAY,CAACZ,UAAU,CAACU,CAAD,CAAV,CAAiB,CAAjB,CAAD,CADZ,iBACyCE,YAAY,CAC1DZ,UAAU,CAACU,CAAD,CAAV,CAAiB,CAAjB,CAD0D,CADrD,mBAKZ,CATM,CAWP,GAAMI,kBAAiB,CAAG,SACxBN,CADwB,CAEb,OACG,SAAV,GAAAA,CADO,CAEF,uBAFE,CAIG,OAAV,GAAAA,CAJO,CAKF,8CALE,CAOJ,KACR,CAVD,CAYA,MAAO,IAAMO,gBAAe,CAAG,SAC7BL,CAD6B,CAE7BC,CAF6B,CAGlB,CACX,MAAgB,SAAT,GAAAA,CAAI,CACPb,eAAe,CAACY,CAAD,CAAf,CAAsBM,GAAtB,CAA0BF,iBAA1B,EAA6CG,IAA7C,CAAkD,GAAlD,CADO,kBAGZ,CAPM,CASP,MAAO,IAAMC,eAAc,CAAG,SAC5BC,CAD4B,CAE5BC,CAF4B,CAG5BC,CAH4B,CAI5BC,CAJ4B,CAKzB,OACCA,EADD,CAEM,aAFN,CAICH,CAJD,CAKM,sCALN,CAOCC,CAPD,CAQM,8CARN,CAUCC,CAVD,0BAWwBA,CAXxB,MAaI,wCACR,CAnBM,CAqBP,MAAO,IAAME,WAAU,CAAG,SAACZ,CAAD,CAAsBW,CAAtB,CAA6C,OACxD,SAAT,GAAAX,CAAI,EAAkBW,CAD2C,CAE5D,iCAF4D,CAIxD,SAAT,GAAAX,CAJiE,CAK5D,yBAL4D,OAOtE,CAPM,CAUP,MAAO,IAAMa,UAAS,CAAG,SAACC,CAAD,QACd,YAAT,GAAAA,CAAI,CAAoB,OAApB,CAA8BA,CADX,CAAlB"}
+{"version":3,"file":"helpers.js","names":["isNotNil","borderRadiusMap","borderWidthMap","paddingMap","getSlots","side","Array","isArray","filter","item","borderToCss","value","getBorderStyle","form","view","paddingToCss","getPadding","borderRadiusToCss","getBorderRadius","map","join","getBorderColor","focused","hovered","status","disabled","getBgColor","getSlotsWidthStyles","sizes","postfix","style","index","length","reduce","a","b","formGuard","from"],"sources":["../../../../../../src/components/FieldComponents/FieldControlLayout/helpers.ts"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { isNotNil } from '##/utils/type-guards';\n\nimport { FieldPropForm, FieldPropStatus, FieldPropView } from '../types';\nimport {\n  borderRadiusMap,\n  borderWidthMap,\n  FieldControlLayoutBorderRadiusNode,\n  FieldControlLayoutBorderWidthNode,\n  FieldControlLayoutPaddingNode,\n  paddingMap,\n} from './maps';\n\nexport const getSlots = (\n  side: React.ReactNode | JSX.Element[],\n): React.ReactNode[] => {\n  return ((Array.isArray(side) ? side : [side]) as []).filter(\n    (item) => isNotNil(item) && item !== false,\n  );\n};\n\nconst borderToCss = (value: FieldControlLayoutBorderWidthNode) => {\n  return value ? 'solid' : 'none';\n};\n\nexport const getBorderStyle = (\n  form: FieldPropForm,\n  view: FieldPropView,\n): string => {\n  return view === 'default'\n    ? `solid ${borderToCss(borderWidthMap[form][1])} solid ${borderToCss(\n        borderWidthMap[form][0],\n      )}`\n    : `none`;\n};\n\nconst paddingToCss = (value: FieldControlLayoutPaddingNode): string => {\n  return value === 'increased'\n    ? 'calc(var(--field-control-layout-space) * 1.6)'\n    : 'var(--field-control-layout-space)';\n};\n\nexport const getPadding = (\n  form: FieldPropForm,\n  view: FieldPropView,\n): string => {\n  return view === 'default'\n    ? `0px ${paddingToCss(paddingMap[form][1])} 0px ${paddingToCss(\n        paddingMap[form][0],\n      )}`\n    : `1px 0px 1px 0px`;\n};\n\nconst borderRadiusToCss = (\n  value: FieldControlLayoutBorderRadiusNode,\n): string => {\n  if (value === 'default') {\n    return 'var(--control-radius)';\n  }\n  if (value === 'round') {\n    return 'calc(var(--field-control-layout-height) / 2)';\n  }\n  return '0px';\n};\n\nexport const getBorderRadius = (\n  form: FieldPropForm,\n  view: FieldPropView,\n): string => {\n  return view === 'default'\n    ? borderRadiusMap[form].map(borderRadiusToCss).join(' ')\n    : `0px 0px 0px 0px`;\n};\n\nexport const getBorderColor = (\n  focused?: boolean,\n  hovered?: boolean,\n  status?: FieldPropStatus,\n  disabled?: boolean,\n) => {\n  if (disabled) {\n    return 'transparent';\n  }\n  if (focused) {\n    return 'var(--color-control-bg-border-focus)';\n  }\n  if (hovered) {\n    return 'var(--color-control-bg-border-default-hover)';\n  }\n  if (status) {\n    return `var(--color-bg-${status})`;\n  }\n  return 'var(--color-control-bg-border-default)';\n};\n\nexport const getBgColor = (view: FieldPropView, disabled?: boolean) => {\n  if (view === 'default' && disabled) {\n    return 'var(--color-control-bg-disable)';\n  }\n  if (view === 'default') {\n    return 'var(--color-bg-default)';\n  }\n};\n\nexport const getSlotsWidthStyles = (\n  sizes: number[],\n  postfix: string,\n): CSSProperties => {\n  const style: CSSProperties = {};\n  for (let index = 0; index < sizes.length; index++) {\n    style[\n      `--field-control-layout-${postfix}-slot-content-width-${index}` as 'width'\n    ] = `${sizes[index]}px`;\n  }\n\n  style[\n    `--field-control-layout-${postfix}-slot-contents-width` as 'width'\n  ] = `${sizes.length ? sizes.reduce((a, b) => a + b) : 0}px`;\n\n  style[\n    `--field-control-layout-${postfix}-slots-length` as 'width'\n  ] = `${sizes.length}`;\n\n  return style;\n};\n\n// ToDo: Удалить после того как удалим из всех компонентов \"clearClear\"\nexport const formGuard = (from: FieldPropForm | 'clearClear'): FieldPropForm =>\n  from === 'clearClear' ? 'clear' : from;\n"],"mappings":"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"}

package/__internal__/src/components/FieldComponents/FieldControlLayout/maps.d.ts

@@ -1,24 +1,24 @@
 import { FieldPropForm } from '../types';
-export declare type FieldControlLayoutBorderRadiusNode = 0 | 'default' | 'round';
-export declare type FieldControlLayoutBorderWidthNode = true | false;
-export declare type FieldControlLayoutPaddingNode = 'default' | 'increased';
-export declare type FieldControlLayoutBorderRadius = [
+export type FieldControlLayoutBorderRadiusNode = 0 | 'default' | 'round';
+export type FieldControlLayoutBorderWidthNode = true | false;
+export type FieldControlLayoutPaddingNode = 'default' | 'increased';
+export type FieldControlLayoutBorderRadius = [
     FieldControlLayoutBorderRadiusNode,
     FieldControlLayoutBorderRadiusNode,
     FieldControlLayoutBorderRadiusNode,
     FieldControlLayoutBorderRadiusNode
 ];
-export declare type FieldControlLayoutBorderWidth = [
+export type FieldControlLayoutBorderWidth = [
     FieldControlLayoutBorderWidthNode,
     FieldControlLayoutBorderWidthNode
 ];
-export declare type FieldControlLayoutPadding = [
+export type FieldControlLayoutPadding = [
     FieldControlLayoutPaddingNode,
     FieldControlLayoutPaddingNode
 ];
-export declare type FieldControlLayoutBorderRadiusMap = Record<FieldPropForm, FieldControlLayoutBorderRadius>;
-export declare type FieldControlLayoutBorderWidthMap = Record<FieldPropForm, FieldControlLayoutBorderWidth>;
-export declare type FieldControlLayoutPaddingMap = Record<FieldPropForm, FieldControlLayoutPadding>;
+export type FieldControlLayoutBorderRadiusMap = Record<FieldPropForm, FieldControlLayoutBorderRadius>;
+export type FieldControlLayoutBorderWidthMap = Record<FieldPropForm, FieldControlLayoutBorderWidth>;
+export type FieldControlLayoutPaddingMap = Record<FieldPropForm, FieldControlLayoutPadding>;
 export declare const borderRadiusMap: FieldControlLayoutBorderRadiusMap;
 export declare const borderWidthMap: FieldControlLayoutBorderWidthMap;
 export declare const paddingMap: FieldControlLayoutPaddingMap;

package/__internal__/src/components/FieldComponents/FieldControlLayout/types.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { PropsWithHTMLAttributesAndRef } from "../../../utils/types/PropsWithHTMLAttributes";
+import { PropsWithHTMLAttributesAndRef } from '##/utils/types/PropsWithHTMLAttributes';
 import { FieldPropForm, FieldPropSize, FieldPropStatus, FieldPropView } from '../types';
-export declare type FieldControlLayoutProps = PropsWithHTMLAttributesAndRef<{
+export type FieldControlLayoutProps = PropsWithHTMLAttributesAndRef<{
     size?: FieldPropSize;
     form?: FieldPropForm;
     disabled?: boolean;
@@ -13,4 +13,5 @@ export declare type FieldControlLayoutProps = PropsWithHTMLAttributesAndRef<{
     focused?: boolean;
     leftSlotsRefs?: React.Ref<HTMLDivElement>[];
     rightSlotsRefs?: React.Ref<HTMLDivElement>[];
+    alignSlots?: 'top' | 'center';
 }, HTMLDivElement>;

package/__internal__/src/components/FieldComponents/FieldControlLayout/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../../../src/components/FieldComponents/FieldControlLayout/types.ts"],"sourcesContent":["import React from 'react';\n\nimport { PropsWithHTMLAttributesAndRef } from '##/utils/types/PropsWithHTMLAttributes';\n\nimport {\n  FieldPropForm,\n  FieldPropSize,\n  FieldPropStatus,\n  FieldPropView,\n} from '../types';\n\nexport type FieldControlLayoutProps = PropsWithHTMLAttributesAndRef<\n  {\n    size?: FieldPropSize;\n    form?: FieldPropForm;\n    disabled?: boolean;\n    view?: FieldPropView;\n    status?: FieldPropStatus;\n    leftSide?: React.ReactNode | JSX.Element[];\n    rightSide?: React.ReactNode | JSX.Element[];\n    children?: React.ReactNode;\n    focused?: boolean;\n    leftSlotsRefs?: React.Ref<HTMLDivElement>[];\n    rightSlotsRefs?: React.Ref<HTMLDivElement>[];\n  },\n  HTMLDivElement\n>;\n"],"mappings":""}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../../../src/components/FieldComponents/FieldControlLayout/types.ts"],"sourcesContent":["import React from 'react';\n\nimport { PropsWithHTMLAttributesAndRef } from '##/utils/types/PropsWithHTMLAttributes';\n\nimport {\n  FieldPropForm,\n  FieldPropSize,\n  FieldPropStatus,\n  FieldPropView,\n} from '../types';\n\nexport type FieldControlLayoutProps = PropsWithHTMLAttributesAndRef<\n  {\n    size?: FieldPropSize;\n    form?: FieldPropForm;\n    disabled?: boolean;\n    view?: FieldPropView;\n    status?: FieldPropStatus;\n    leftSide?: React.ReactNode | JSX.Element[];\n    rightSide?: React.ReactNode | JSX.Element[];\n    children?: React.ReactNode;\n    focused?: boolean;\n    leftSlotsRefs?: React.Ref<HTMLDivElement>[];\n    rightSlotsRefs?: React.Ref<HTMLDivElement>[];\n    alignSlots?: 'top' | 'center';\n  },\n  HTMLDivElement\n>;\n"],"mappings":""}