@itcase/forms 1.1.5 → 1.1.6

package/dist/itcase-forms.cjs.js

@@ -36,7 +36,6 @@ var Button = require('@itcase/ui/components/Button');
 var Group$1 = require('@itcase/ui/components/Group');
 var Notification = require('@itcase/ui/components/Notification');
 var createDecorator = require('final-form-focus');
-require('apisauce');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -192,18 +191,10 @@ function FieldWrapperBase(props) {
     isHidden,
     isRequired,
     isValidState,
-    set,
     children
   } = props;
   const formFieldClass = React$1.useMemo(() => clsx__default.default(className, isValidState && 'form__item_state_success', isRequired && 'form__item_state_required', isDisabled && 'form__item_state_disabled', metaActive && 'form__item_state_focus', inputValue && 'form__item_state_filled', isErrorState && `form__item_state_${errorKey}`), [className, isErrorState, isValidState, isRequired, metaActive, inputValue, isDisabled, metaError]);
   const fieldClass = React$1.useMemo(() => clsx__default.default(fieldClassName, isValidState && `${fieldClassName}_state_success`, metaActive && `${fieldClassName}_state_focus`, inputValue && `${fieldClassName}_state_filled`, isDisabled && `${fieldClassName}_state_disabled`, isErrorState && `${fieldClassName}_state_${errorKey}`), [fieldClassName, isErrorState, isValidState, metaActive, inputValue, isDisabled, metaError]);
-  const validationAppearance = React$1.useMemo(() => {
-    return {
-      textColor: props[`${errorKey}MessageTextColor`],
-      textSize: props[`${errorKey}MessageTextSize`],
-      textWeight: props[`${errorKey}MessageTextWeight`]
-    };
-  }, [errorKey, isErrorState]);
   const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'form-field_size_',
     propsKey: 'size'
@@ -236,7 +227,7 @@ function FieldWrapperBase(props) {
     styles: formFieldStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement(Tag, {
-    className: clsx__default.default(formFieldClass, 'form__item', 'form-field', type && `form-field_type_${type}`, set && `form-field_set_${set}`, sizeClass, fillClass, shapeClass, isDisabled && `form-field_state_disabled`, isHidden && `form-field_state_hidden`, directionClass, widthClass),
+    className: clsx__default.default(formFieldClass, 'form__item', 'form-field', type && `form-field_type_${type}`, sizeClass, fillClass, shapeClass, isDisabled && `form-field_state_disabled`, isHidden && `form-field_state_hidden`, directionClass, widthClass),
     "data-test-id": `${inputName}Field`,
     "data-tour": dataTour,
     style: formFieldStyles
@@ -568,8 +559,8 @@ const ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceFiel
       meta: meta
     });
     const updatedInputProps = useValidationAppearanceInputProps({
-      validationStateKey: isErrorState ? errorKey : 'success',
-      inputProps: inputProps
+      inputProps: inputProps,
+      validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_type_choice', 'form__item_type_choice', classNameGroupItem),
@@ -707,35 +698,28 @@ const CodeField = /*#__PURE__*/React__default.default.memo(function CodeField(pr
     const {
       isErrorState,
       isValidState,
-      errorKey,
-      errorMessage
-    } = useFieldValidationState({
+      errorKey} = useFieldValidationState({
       fieldProps: fieldProps,
       input: input,
       meta: meta
     });
     const updatedInputProps = useValidationAppearanceInputProps({
-      validationStateKey: isErrorState ? errorKey : 'success',
-      inputProps: inputProps
+      inputProps: inputProps,
+      validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_type_code', 'form__item_type_code', classNameGroupItem),
       fieldClassName: 'form-code',
       inputName: input.name,
       inputValue: input.value,
-      isRequired: isRequired,
-      isDisabled: isDisabled,
       metaActive: meta.active,
-      metaError: meta.error,
       showMessage: showMessage,
-      isErrorState: isErrorState,
-      isValidState: isValidState,
-      errorKey: errorKey,
-      errorMessage: errorMessage
+      isRequired: isRequired,
+      isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React__default.default.createElement(Code.Code, Object.assign({
-      autoComplete: "nope",
       name: input.name,
       isDisabled: isDisabled,
+      autoComplete: "nope",
       value: input.value,
       onBlur: input.onBlur,
       onChange: input.onChange,
@@ -744,22 +728,61 @@ const CodeField = /*#__PURE__*/React__default.default.memo(function CodeField(pr
   });
 });
 
+// import { icon14 } from '@itcase/icons/default' // , icon16, icon24
+
 const defaultDatepickerProps = {
-  daySize: 'xs',
-  dayTextColor: 'surfaceTextPrimary',
-  dayTextShape: 'rounded',
-  dayTextSize: 'm',
-  iconFillSize: 24,
-  iconItemFill: 'surfaceItemPrimary',
-  iconSize: 14,
-  monthTextColor: 'surfaceTextPrimary',
-  monthTextSize: 'm',
-  monthTextWeight: 400,
-  placeholderTextColor: 'surfaceTextSecondary',
-  size: 'normal',
-  yearTextColor: 'surfaceTextPrimary',
-  yearTextSize: 'm',
-  yearTextWeight: 400
+  datePickerProps: {
+    dateFormat: 'dd/MM/yyyy - HH:mm',
+    daySize: 'xs',
+    dayTextColor: 'surfaceTextPrimary',
+    dayTextShape: 'rounded',
+    dayTextSize: 'm',
+    disablePastDays: true,
+    iconFillSize: 24,
+    iconItemFill: 'surfaceItemPrimary',
+    // iconLeft: icon14.ChevronLeft,
+    // iconRight: icon14.ChevronRight,
+    iconSize: 14,
+    monthsShown: 2,
+    monthTextColor: 'surfaceTextPrimary',
+    monthTextSize: 'm',
+    monthTextWeight: 400,
+    placeholderTextColor: 'surfaceTextSecondary',
+    readOnly: false,
+    selectsRange: false,
+    showTimeSelect: true,
+    timeCaption: 'Время',
+    timeFormat: 'p',
+    timeIntervals: 60,
+    yearTextColor: 'surfaceTextPrimary',
+    yearTextSize: 'm',
+    yearTextWeight: 400,
+    isClearable: true,
+    isStartDefaultNull: true
+  },
+  fieldProps: {
+    width: 'fill',
+    size: 'xl',
+    labelTextColor: 'surfaceTextPrimary',
+    labelTextSize: 's',
+    labelTextWeight: 'normal',
+    textColor: 'surfaceTextPrimary',
+    helpText: 'Supporting text',
+    helpTextColor: 'surfaceTextPrimary',
+    helpTextSize: 's',
+    helpTextWeight: 'normal',
+    showMessage: true
+  },
+  inputProps: {
+    size: 'm',
+    borderColor: 'surfaceBorderSecondary',
+    textColor: 'surfaceTextPrimary',
+    textSize: 'm',
+    textWeight: 'normal',
+    caret: 'accentItemSecondary',
+    placeholder: 'Placeholder',
+    placeholderTextColor: 'surfaceTextQuaternary'
+  }
 };
 
 function DatePickerField(props) {
@@ -821,23 +844,23 @@ function DatePickerField(props) {
       className: clsx__default.default('form-field_type_datepicker', 'form__item_type_datepicker', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
+      isErrorState: isErrorState,
+      metaError: meta.error,
+      isDisabled: isDisabled,
       fieldClassName: "form-datepicker",
       inputName: input.name,
       inputValue: input.value || '',
-      isDisabled: isDisabled,
-      isErrorState: isErrorState,
-      isRequired: isRequired,
-      isValidState: isValidState,
       metaActive: meta.active,
-      metaError: meta.error,
-      showMessage: showMessage
+      showMessage: showMessage,
+      isRequired: isRequired,
+      isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React__default.default.createElement(DatePicker.DatePickerInput, {
+      name: input.name,
+      isDisabled: isDisabled,
       datePickerProps: datePickerProps,
+      endValue: datePickerProps.selectsRange ? input.value.endDate : null,
       inputProps: updatedInputProps,
-      isDisabled: isDisabled,
-      name: input.name,
       value: datePickerProps.selectsRange ? input.value.startDate : input.value,
-      endValue: datePickerProps.selectsRange ? input.value.endDate : null,
       onBlur: input.onBlur,
       onChange: onChangeField,
       onFocus: input.onFocus
@@ -846,26 +869,38 @@ function DatePickerField(props) {
 }
 
 const defaultDropzoneProps = {
-  width: 'fill',
-  borderColor: 'surfaceBorderTertiary',
-  isPreviews: true,
-  borderColorHover: 'surfaceBorderQuaternary',
-  fill: 'surfacePrimary',
-  hintTitle: 'Перетащите изображение или выберите файл с компьютера',
-  hintTitleTextColor: 'surfaceTextPrimary',
-  hintTitleTextSize: 'm',
-  removeThumbText: 'удалить',
-  removeThumbTextColor: 'errorTextPrimary',
-  removeThumbTextHoverColor: 'errorTextPrimaryHover',
-  removeThumbTextSize: 's',
-  shape: 'rounded',
-  showFilename: true,
-  size: 'normal',
-  thumbBorderColor: 'surfaceBorderTertiary',
-  thumbBorderColorHover: 'surfaceBorderQuaternary',
-  thumbBorderWidth: 1,
-  thumbNameTextColor: 'surfaceTextPrimary',
-  thumbNameTextSize: 's'
+  dropzoneProps: {
+    size: 'normal',
+    fill: 'surfacePrimary',
+    borderColor: 'surfaceBorderTertiary',
+    borderColorHover: 'surfaceBorderQuaternary',
+    hintTitle: 'Перетащите изображение или выберите файл с компьютера',
+    hintTitleTextColor: 'surfaceTextPrimary',
+    hintTitleTextSize: 'm',
+    removeThumbText: 'удалить',
+    removeThumbTextColor: 'errorTextPrimary',
+    removeThumbTextHoverColor: 'errorTextPrimaryHover',
+    removeThumbTextSize: 's',
+    shape: 'rounded',
+    showFilename: true,
+    thumbBorderColor: 'surfaceBorderTertiary',
+    thumbBorderColorHover: 'surfaceBorderQuaternary',
+    thumbBorderWidth: 1,
+    thumbNameTextColor: 'surfaceTextPrimary',
+    thumbNameTextSize: 's',
+    isPreviews: true
+  },
+  fieldProps: {
+    size: 'l',
+    labelTextColor: 'surfaceTextPrimary',
+    labelTextSize: 's',
+    labelTextWeight: 'normal',
+    helpText: 'Supporting text',
+    helpTextColor: 'surfaceTextPrimary',
+    helpTextSize: 's',
+    helpTextWeight: 'normal',
+    showMessage: true
+  }
 };
 
 /* globals File, FileReader, URL, console */
@@ -1753,11 +1788,11 @@ const RadioGroup = /*#__PURE__*/React__default.default.memo(function RadioGroup(
       meta: meta
     });
     const updatedInputProps = useValidationAppearanceInputProps({
-      validationStateKey: isErrorState ? errorKey : 'success',
-      inputProps: inputProps
+      inputProps: inputProps,
+      validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
-      className: "form__item_type_radio",
+      className: clsx__default.default('form-field_type_radio', 'form__item_type_radio"', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
       isErrorState: isErrorState,
@@ -1791,13 +1826,13 @@ const defaultSegmentedProps = {
 
 function SegmentedField(props) {
   const {
-    options,
-    isRequired,
     name,
+    isDisabled,
     fieldProps,
     inputProps,
-    isDisabled,
-    showMessage
+    options,
+    showMessage,
+    isRequired
   } = props;
   const {
     change
@@ -1820,8 +1855,8 @@ function SegmentedField(props) {
 
     const activeOption = React$1.useMemo(() => {
       const emptyOption = {
-        value: null,
-        label: null
+        label: null,
+        value: null
       };
       if (input.value) {
         const currentOption = options.find(option => option.value === input.value);
@@ -1830,36 +1865,36 @@ function SegmentedField(props) {
       return emptyOption;
     }, [input.value]);
     const {
-      isErrorState,
-      isValidState,
       errorKey,
-      errorMessage
+      errorMessage,
+      isErrorState,
+      isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
       input: input,
       meta: meta
     });
     const updatedInputProps = useValidationAppearanceInputProps({
-      validationStateKey: isErrorState ? errorKey : 'success',
-      inputProps: inputProps
+      inputProps: inputProps,
+      validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_type_segmented', 'form__item_type_segmented'),
       errorKey: errorKey,
       errorMessage: errorMessage,
+      isErrorState: isErrorState,
+      metaError: meta.error,
+      isDisabled: isDisabled,
       fieldClassName: "form-segmented",
       inputName: input.name,
       inputValue: input.value || [],
-      isDisabled: isDisabled,
-      isErrorState: isErrorState,
-      isRequired: isRequired,
-      isValidState: isValidState,
       metaActive: meta.active,
-      metaError: meta.error,
-      showMessage: showMessage
+      showMessage: showMessage,
+      isRequired: isRequired,
+      isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React__default.default.createElement(Segmented.Segmented, Object.assign({
-      activeSegment: activeOption,
       isDisabled: isDisabled,
+      activeSegment: activeOption,
       segments: options,
       setActiveSegment: setActiveSegment
     }, updatedInputProps)));
@@ -1886,16 +1921,6 @@ const defaultSelectProps = {
   // error
   errorInputBorderColor: 'errorBorderPrimary',
   headingFill: 'surfaceSecondary',
-  headingTextColor: 'surfaceTextPrimary',
-  headingTextSize: 'm',
-  headingTextWeight: '600',
-  inputBorderColor: 'surfaceBorderTertiary',
-  inputBorderColorHover: 'surfaceBorderQuaternary',
-  inputCaretColor: 'secondaryItemPrimary',
-  inputFill: 'surfacePrimary',
-  inputShape: 'rounded',
-  inputTextColor: 'surfaceTextPrimary',
-  inputTextSize: 'm',
   loadingMessage: /*#__PURE__*/React__default.default.createElement(Loader.Loader, {
     width: "fill",
     height: "fill",
@@ -1906,33 +1931,7 @@ const defaultSelectProps = {
     zIndex: "1",
     itemFill: "surfaceItemAccent",
     set: "simple"
-  }),
-  multipleItemFill: 'accentPrimary',
-  multipleItemFillHover: 'accentPrimaryHover',
-  // multipleItemIcon: icon14.Remove,
-
-  multipleItemIconFill: 'accentItemPrimary',
-  multipleItemTextColor: 'accentTextPrimary',
-  multipleItemTextSize: 'm',
-  noOptionsSearchText: 'Ничего не найдено...',
-  noOptionsText: 'Список пуст',
-  noOptionsTextColor: 'surfaceTextPrimary',
-  noOptionsTextSize: 'm',
-  optionBorder: 'none',
-  optionFill: 'surfacePrimary',
-  optionFillHover: 'surfaceHover',
-  optionShape: 'rounded',
-  optionTextColor: 'surfaceTextPrimary',
-  optionTextSize: 'm',
-  placeholder: 'Выбрать...',
-  placeholderTextColor: 'surfaceTextQuaternary',
-  placeholderTextSize: 'm',
-  // appearance depending on the type of error
-  // required
-  requiredInputBorderColor: 'warningBorderPrimary',
-  showBadge: false,
-  showDivider: true,
-  size: 'm'
+  })
 };
 
 function getDefaultValue(options, selectValue) {
@@ -2049,18 +2048,18 @@ const SelectField = /*#__PURE__*/React__default.default.memo(function SelectFiel
 
 const SwitchField = /*#__PURE__*/React__default.default.memo(function SwitchField(props) {
   const {
+    isDisabled,
     classNameGroupItem,
     fieldProps = {},
     inputProps = {},
-    isDisabled,
-    isRequired,
     name,
     showMessage,
+    isRequired,
     onChange
   } = props;
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
-    name: name,
-    type: "checkbox"
+    type: "checkbox",
+    name: name
   }, function Render({
     input,
     meta
@@ -2079,40 +2078,40 @@ const SwitchField = /*#__PURE__*/React__default.default.memo(function SwitchFiel
       }
     }, [onChange, input.onChange]);
     const {
-      isErrorState,
-      isValidState,
       errorKey,
-      errorMessage
+      errorMessage,
+      isErrorState,
+      isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
       input: input,
       meta: meta
     });
     const updatedInputProps = useValidationAppearanceInputProps({
-      validationStateKey: isErrorState ? errorKey : 'success',
-      inputProps: inputProps
+      inputProps: inputProps,
+      validationStateKey: isErrorState ? errorKey : 'success'
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_type_switch', 'form__item_type_switch', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
+      isErrorState: isErrorState,
+      metaError: meta.error,
+      isDisabled: isDisabled,
       fieldClassName: "form-switch",
       inputName: input.name,
       inputValue: input.checked,
-      isDisabled: isDisabled,
-      isErrorState: isErrorState,
-      isRequired: isRequired,
-      isValidState: isValidState,
       metaActive: meta.active,
-      metaError: meta.error,
       showMessage: showMessage,
-      tag: "label"
+      tag: "label",
+      isRequired: isRequired,
+      isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React__default.default.createElement(Switch.Switch, Object.assign({
+      type: "checkbox",
+      name: input.name,
+      isDisabled: isDisabled,
       autoComplete: "nope",
       checked: input.checked,
-      isDisabled: isDisabled,
-      name: input.name,
-      type: "checkbox",
       onBlur: input.onBlur,
       onChange: onChangeField,
       onFocus: input.onFocus
@@ -2288,6 +2287,8 @@ const MaskedInputField = /*#__PURE__*/React__default.default.memo(function Maske
   });
 });
 
+// import { icon14 } from '@itcase/icons/default'
+
 const defaultChipsProps = {
   width: 'fill',
   borderColor: 'surfaceBorderTertiary',
@@ -2302,7 +2303,7 @@ const defaultChipsProps = {
   iconSize: 14,
   indicatorFill: 'accentPrimary',
   // labelSize: 's',
-  // labelTextActiveColor: 'accentTextPrimary',
+  // labelTextActiveColor: 'accentTextPrimary',зsrc/form/Field/Chips/index.js
   // labelTextActiveColorDisabled: 'surfaceTextDisabled',
   // labelTextColor: 'surfaceTextPrimary',
   // labelTextColorDisabled: 'surfaceTextDisabled',
@@ -2316,12 +2317,12 @@ function ChipsField(props) {
   const {
     name,
     initialValue,
+    isDisabled,
     classNameGroupItem,
     fieldProps,
     inputProps,
     options,
     showMessage,
-    isDisabled,
     isRequired,
     onChange
   } = props;
@@ -2376,23 +2377,23 @@ function ChipsField(props) {
       className: clsx__default.default('form-field_type_chips', 'form__item_type_chips', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
+      isErrorState: isErrorState,
       metaError: meta.error,
+      isDisabled: isDisabled,
       fieldClassName: "form-chips",
       inputName: input.name,
       inputValue: input.value,
       metaActive: meta.active,
       showMessage: showMessage,
-      isDisabled: isDisabled,
-      isErrorState: isErrorState,
       isRequired: isRequired,
       isValidState: isValidState
     }, fieldProps), options.map(option => /*#__PURE__*/React__default.default.createElement(Chips.Chips, Object.assign({
       className: clsx__default.default(meta.active && 'form-chips_state_focus', meta.error && meta.touched && `form-chips_state_${errorKey}`),
       key: option.value,
       label: option.label,
+      isDisabled: option.isDisabled,
       value: option.value,
       isActive: activeOptionsList.some(activeOption => activeOption.value === option.value),
-      isDisabled: option.isDisabled,
       onClick: () => onChangeSomeInput(input.value, option.value)
     }, updatedInputProps))));
   });
@@ -2641,10 +2642,10 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     titleTextColor,
     titleTextSize,
     titleTextWeight,
-    description,
-    descriptionSize,
-    descriptionTextColor,
-    descriptionTextWeight,
+    desc,
+    descSize,
+    descTextColor,
+    descTextWeight,
     primaryButton,
     primaryButtonFill,
     primaryButtonFillHover,
@@ -2748,7 +2749,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
       modifiedSinceLastSubmit
     }) => {
       return /*#__PURE__*/React__default.default.createElement("form", {
-        className: clsx__default.default(className, 'form', set && `form_set_${set}`, type && `form_type_${type}`, buttonPosition && `form_button-position_${buttonPosition}`, directionClass, fillClass, shapeClass, elevationClass),
+        className: clsx__default.default(className, 'form', type && `form_type_${type}`, buttonPosition && `form_button-position_${buttonPosition}`, directionClass, fillClass, shapeClass, elevationClass),
         name: formName,
         autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
         autoComplete: disableFieldsAutoComplete ? 'off' : undefined,
@@ -2766,12 +2767,12 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
         size: titleTextSize,
         textColor: titleTextColor,
         textWeight: titleTextWeight
-      }, title), description && /*#__PURE__*/React__default.default.createElement(Text.Text, {
-        className: "form__description",
-        size: descriptionSize,
-        textColor: descriptionTextColor,
-        textWeight: descriptionTextWeight
-      }, description), submitError && !modifiedSinceLastSubmit && /*#__PURE__*/React__default.default.createElement("div", {
+      }, title), desc && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+        className: "form__desc",
+        size: descSize,
+        textColor: descTextColor,
+        textWeight: descTextWeight
+      }, desc), submitError && !modifiedSinceLastSubmit && /*#__PURE__*/React__default.default.createElement("div", {
         className: clsx__default.default('notification', 'form-notification', notificationType ? `form-notification_type_${notificationType}` : 'form-notification_type_global')
       }, /*#__PURE__*/React__default.default.createElement(Notification.NotificationItem, {
         className: "form-notification__item",