@itcase/forms 1.1.2 → 1.1.4

package/dist/css/form/Field/Select/Select.css

@@ -17,16 +17,9 @@
   &_state_error {
     & .select__control {
       border: solid 1px var(--select-error-border);
+      &:hover {
+        border: solid 1px var(--select-error-border-hover);
+      }
     }
   }
 }
-
-:root {
-  --select-background: var(--color-surface-primary);
-  --select-background-hover: var(--color-surface-primary-hover);
-  --select-success-border: var(--color-success-border-primary);
-  --select-success-border-hover: var(--color-surface-border-quaternary);
-  --select-error-border: var(--color-error-border-primary);
-  --select-focus-background: var(--color-surface-primary);
-  --select-focus-border: var(--color-surface-border-quaternary);
-}

package/dist/css/form/Form/Form.css

@@ -147,6 +147,24 @@
     }
   }
 }
+.form {
+  &_button-position {
+    &_bottom {
+      flex: 1;
+      justify-content: space-between;
+    }
+    &_sticky {
+      position: relative;
+      &^^&__button {
+        width: 100%;
+        position: fixed;
+        left: 0;
+        bottom: 0;
+        z-index: 100;
+      }
+    }
+  }
+}
 .form {
   width: 100%;
   &__wrapper {

package/dist/itcase-forms.cjs.js

@@ -28,7 +28,6 @@ var Input = require('@itcase/ui/components/Input');
 var Radio = require('@itcase/ui/components/Radio');
 var Segmented = require('@itcase/ui/components/Segmented');
 var Select = require('@itcase/ui/components/Select');
-var icons = require('src/icons');
 var Switch = require('@itcase/ui/components/Switch');
 var Textarea = require('@itcase/ui/components/Textarea');
 var reactImask = require('react-imask');
@@ -508,28 +507,25 @@ const defaultChoiceProps = {
   labelTextColor: 'surfaceTextPrimary',
   labelTextColorDisabled: 'surfaceTextDisabled',
   labelTextSize: 'm',
-  // appearance depending on the type of error
-  // required
   requiredBorderColor: 'warningBorderPrimary',
-  shape: 'rounded',
-  size: 'normal'
+  shape: 'rounded'
 };
 
 const ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceField(props) {
   const {
+    name,
+    initialValue,
+    label,
+    isDisabled,
     classNameGroupItem,
     fieldProps,
-    initialValue,
     inputProps,
-    isDisabled,
-    isCheckbox,
-    isRequired,
-    label,
     messageType,
-    name,
     options,
     placeholder,
     showMessage,
+    isCheckbox,
+    isRequired,
     onChange
   } = props;
   const {
@@ -581,30 +577,30 @@ const ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceFiel
     });
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_type_choice', 'form__item_type_choice', classNameGroupItem),
+      label: label,
       errorKey: errorKey,
       errorMessage: errorMessage,
+      isErrorState: isErrorState,
+      metaError: meta.error,
+      isDisabled: isDisabled,
       fieldClassName: "form-choice",
       inputName: input.name,
       inputValue: input.value || [],
-      isDisabled: isDisabled,
-      isErrorState: isErrorState,
-      isRequired: isRequired,
-      isValidState: isValidState,
-      label: label,
       messageType: messageType,
       metaActive: meta.active,
-      metaError: meta.error,
-      showMessage: showMessage
+      showMessage: showMessage,
+      isRequired: isRequired,
+      isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React__default.default.createElement(Choice.Choice, Object.assign({
-      active: activeOption,
       className: clsx__default.default(meta.active && 'form-choice_state_focus', meta.error && meta.touched && `form-choice_state_${errorKey}`),
-      inputValue: input.value || [],
-      isCheckbox: isCheckbox,
-      isDisabled: isDisabled,
-      isRequired: isRequired,
       name: input.name,
+      isDisabled: isDisabled,
+      active: activeOption,
+      inputValue: input.value || [],
       options: options,
       placeholder: placeholder,
+      isCheckbox: isCheckbox,
+      isRequired: isRequired,
       setActiveSegment: setActiveSegment
     }, updatedInputProps)));
   });
@@ -782,7 +778,7 @@ function DatePickerField(props) {
     showMessage,
     onChange
   } = props;
-  return /*#__PURE__*/React.createElement(reactFinalForm.Field, {
+  return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
     name: name
   }, function Render({
     input,
@@ -825,7 +821,7 @@ function DatePickerField(props) {
       validationStateKey: isErrorState ? errorKey : 'success',
       inputProps: inputProps
     });
-    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
+    return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_type_datepicker', 'form__item_type_datepicker', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
@@ -839,7 +835,7 @@ function DatePickerField(props) {
       metaActive: meta.active,
       metaError: meta.error,
       showMessage: showMessage
-    }, fieldProps), /*#__PURE__*/React.createElement(DatePicker.DatePickerInput, {
+    }, fieldProps), /*#__PURE__*/React__default.default.createElement(DatePicker.DatePickerInput, {
       datePickerProps: datePickerProps,
       inputProps: updatedInputProps,
       isDisabled: isDisabled,
@@ -1899,7 +1895,7 @@ const defaultSelectProps = {
   badgeAppearance: 'accent',
   badgeSize: 'm',
   badgeTextSize: 'm',
-  clearIcon: icons.icon24.Clear,
+  // clearIcon: icon24.Clear,
   clearIconFill: 'surfaceItemPrimary',
   closeMenuOnSelect: true,
   // optionSelected: <Icon iconFill="surfaceItemAccent" SvgImage={icon24.Check} />,
@@ -1907,7 +1903,7 @@ const defaultSelectProps = {
   dividerDirection: 'horizontal',
   dividerFill: 'surfaceTertiary',
   dividerSize: 'xxs',
-  dropdownIcon: icons.icon24.ChevronDownSmall,
+  // dropdownIcon: icon24.ChevronDownSmall,
   dropdownIconFill: 'surfaceItemPrimary',
   // error
   errorInputBorderColor: 'errorBorderPrimary',
@@ -1935,7 +1931,8 @@ const defaultSelectProps = {
   }),
   multipleItemFill: 'accentPrimary',
   multipleItemFillHover: 'accentPrimaryHover',
-  multipleItemIcon: icons.icon14.Remove,
+  // multipleItemIcon: icon14.Remove,
+
   multipleItemIconFill: 'accentItemPrimary',
   multipleItemTextColor: 'accentTextPrimary',
   multipleItemTextSize: 'm',
@@ -1945,7 +1942,7 @@ const defaultSelectProps = {
   noOptionsTextSize: 'm',
   optionBorder: 'none',
   optionFill: 'surfacePrimary',
-  optionFillHover: 'surfacePrimaryHover',
+  optionFillHover: 'surfaceHover',
   optionShape: 'rounded',
   optionTextColor: 'surfaceTextPrimary',
   optionTextSize: 'm',
@@ -2332,7 +2329,7 @@ const defaultChipsProps = {
   fillActive: 'accentPrimary',
   fillActiveDisabled: 'surfaceTertiary',
   fillActiveHover: 'errorPrimary',
-  fillHover: 'surfacePrimaryHover',
+  fillHover: 'surfaceHover',
   iconItemFill: 'surfaceItemPrimary',
   iconSize: 14,
   indicatorFill: 'accentPrimary',
@@ -2717,6 +2714,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     buttonDirection = 'vertical',
     buttonFill,
     buttonGap,
+    buttonPosition,
     buttonJustifyContent,
     buttonPadding,
     dataTestId,
@@ -2783,7 +2781,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}`, directionClass, fillClass, shapeClass, elevationClass),
+        className: clsx__default.default(className, 'form', set && `form_set_${set}`, type && `form_type_${type}`, buttonPosition && `form_button-position_${buttonPosition}`, directionClass, fillClass, shapeClass, elevationClass),
         name: formName,
         autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
         autoComplete: disableFieldsAutoComplete ? 'off' : undefined,

package/dist/itcase-forms.esm.js

@@ -27,7 +27,6 @@ import { Input } from '@itcase/ui/components/Input';
 import { Radio } from '@itcase/ui/components/Radio';
 import { Segmented } from '@itcase/ui/components/Segmented';
 import { Select } from '@itcase/ui/components/Select';
-import { icon14, icon24 } from 'src/icons';
 import { Switch } from '@itcase/ui/components/Switch';
 import { Textarea } from '@itcase/ui/components/Textarea';
 import { useIMask } from 'react-imask';
@@ -497,28 +496,25 @@ const defaultChoiceProps = {
   labelTextColor: 'surfaceTextPrimary',
   labelTextColorDisabled: 'surfaceTextDisabled',
   labelTextSize: 'm',
-  // appearance depending on the type of error
-  // required
   requiredBorderColor: 'warningBorderPrimary',
-  shape: 'rounded',
-  size: 'normal'
+  shape: 'rounded'
 };
 
 const ChoiceField = /*#__PURE__*/React$1.memo(function ChoiceField(props) {
   const {
+    name,
+    initialValue,
+    label,
+    isDisabled,
     classNameGroupItem,
     fieldProps,
-    initialValue,
     inputProps,
-    isDisabled,
-    isCheckbox,
-    isRequired,
-    label,
     messageType,
-    name,
     options,
     placeholder,
     showMessage,
+    isCheckbox,
+    isRequired,
     onChange
   } = props;
   const {
@@ -570,30 +566,30 @@ const ChoiceField = /*#__PURE__*/React$1.memo(function ChoiceField(props) {
     });
     return /*#__PURE__*/React$1.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_type_choice', 'form__item_type_choice', classNameGroupItem),
+      label: label,
       errorKey: errorKey,
       errorMessage: errorMessage,
+      isErrorState: isErrorState,
+      metaError: meta.error,
+      isDisabled: isDisabled,
       fieldClassName: "form-choice",
       inputName: input.name,
       inputValue: input.value || [],
-      isDisabled: isDisabled,
-      isErrorState: isErrorState,
-      isRequired: isRequired,
-      isValidState: isValidState,
-      label: label,
       messageType: messageType,
       metaActive: meta.active,
-      metaError: meta.error,
-      showMessage: showMessage
+      showMessage: showMessage,
+      isRequired: isRequired,
+      isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React$1.createElement(Choice, Object.assign({
-      active: activeOption,
       className: clsx(meta.active && 'form-choice_state_focus', meta.error && meta.touched && `form-choice_state_${errorKey}`),
-      inputValue: input.value || [],
-      isCheckbox: isCheckbox,
-      isDisabled: isDisabled,
-      isRequired: isRequired,
       name: input.name,
+      isDisabled: isDisabled,
+      active: activeOption,
+      inputValue: input.value || [],
       options: options,
       placeholder: placeholder,
+      isCheckbox: isCheckbox,
+      isRequired: isRequired,
       setActiveSegment: setActiveSegment
     }, updatedInputProps)));
   });
@@ -771,7 +767,7 @@ function DatePickerField(props) {
     showMessage,
     onChange
   } = props;
-  return /*#__PURE__*/React.createElement(Field, {
+  return /*#__PURE__*/React$1.createElement(Field, {
     name: name
   }, function Render({
     input,
@@ -814,7 +810,7 @@ function DatePickerField(props) {
       validationStateKey: isErrorState ? errorKey : 'success',
       inputProps: inputProps
     });
-    return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
+    return /*#__PURE__*/React$1.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_type_datepicker', 'form__item_type_datepicker', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
@@ -828,7 +824,7 @@ function DatePickerField(props) {
       metaActive: meta.active,
       metaError: meta.error,
       showMessage: showMessage
-    }, fieldProps), /*#__PURE__*/React.createElement(DatePickerInput, {
+    }, fieldProps), /*#__PURE__*/React$1.createElement(DatePickerInput, {
       datePickerProps: datePickerProps,
       inputProps: updatedInputProps,
       isDisabled: isDisabled,
@@ -1888,7 +1884,7 @@ const defaultSelectProps = {
   badgeAppearance: 'accent',
   badgeSize: 'm',
   badgeTextSize: 'm',
-  clearIcon: icon24.Clear,
+  // clearIcon: icon24.Clear,
   clearIconFill: 'surfaceItemPrimary',
   closeMenuOnSelect: true,
   // optionSelected: <Icon iconFill="surfaceItemAccent" SvgImage={icon24.Check} />,
@@ -1896,7 +1892,7 @@ const defaultSelectProps = {
   dividerDirection: 'horizontal',
   dividerFill: 'surfaceTertiary',
   dividerSize: 'xxs',
-  dropdownIcon: icon24.ChevronDownSmall,
+  // dropdownIcon: icon24.ChevronDownSmall,
   dropdownIconFill: 'surfaceItemPrimary',
   // error
   errorInputBorderColor: 'errorBorderPrimary',
@@ -1924,7 +1920,8 @@ const defaultSelectProps = {
   }),
   multipleItemFill: 'accentPrimary',
   multipleItemFillHover: 'accentPrimaryHover',
-  multipleItemIcon: icon14.Remove,
+  // multipleItemIcon: icon14.Remove,
+
   multipleItemIconFill: 'accentItemPrimary',
   multipleItemTextColor: 'accentTextPrimary',
   multipleItemTextSize: 'm',
@@ -1934,7 +1931,7 @@ const defaultSelectProps = {
   noOptionsTextSize: 'm',
   optionBorder: 'none',
   optionFill: 'surfacePrimary',
-  optionFillHover: 'surfacePrimaryHover',
+  optionFillHover: 'surfaceHover',
   optionShape: 'rounded',
   optionTextColor: 'surfaceTextPrimary',
   optionTextSize: 'm',
@@ -2321,7 +2318,7 @@ const defaultChipsProps = {
   fillActive: 'accentPrimary',
   fillActiveDisabled: 'surfaceTertiary',
   fillActiveHover: 'errorPrimary',
-  fillHover: 'surfacePrimaryHover',
+  fillHover: 'surfaceHover',
   iconItemFill: 'surfaceItemPrimary',
   iconSize: 14,
   indicatorFill: 'accentPrimary',
@@ -2706,6 +2703,7 @@ const FinalForm = /*#__PURE__*/React$1.forwardRef(function FinalForm(props, ref)
     buttonDirection = 'vertical',
     buttonFill,
     buttonGap,
+    buttonPosition,
     buttonJustifyContent,
     buttonPadding,
     dataTestId,
@@ -2772,7 +2770,7 @@ const FinalForm = /*#__PURE__*/React$1.forwardRef(function FinalForm(props, ref)
       modifiedSinceLastSubmit
     }) => {
       return /*#__PURE__*/React$1.createElement("form", {
-        className: clsx(className, 'form', set && `form_set_${set}`, type && `form_type_${type}`, directionClass, fillClass, shapeClass, elevationClass),
+        className: clsx(className, 'form', set && `form_set_${set}`, type && `form_type_${type}`, buttonPosition && `form_button-position_${buttonPosition}`, directionClass, fillClass, shapeClass, elevationClass),
         name: formName,
         autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
         autoComplete: disableFieldsAutoComplete ? 'off' : undefined,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "Forms fields, inputs, etc.",
   "keywords": [],
   "license": "MIT",