@itcase/forms 1.0.45 → 1.0.47

package/dist/css/form/Field/DatePicker/DatePicker.css

@@ -0,0 +1,31 @@
+.form-datepicker {
+  &&_state {
+    &_success {
+      & .input {
+        border: solid 1px var(--datepicker-success-border);
+        &:hover {
+          border: solid 1px var(--datepicker-success-border-hover);
+        }
+      }
+    }
+    &_error {
+      & .input {
+        border: solid 1px var(--datepicker-error-border);
+      }
+    }
+    &_focus {
+      & .input {
+        background: var(--datepicker-focus-background);
+        border: solid 1px var(--datepicker-focus-border);
+      }
+    }
+  }
+}
+
+:root {
+  --datepicker-success-border: var(--color-success-border-primary);
+  --datepicker-success-border-hover: var(--color-surface-border-quaternary);
+  --datepicker-error-border: var(--color-error-border-primary);
+  --datepicker-focus-background: var(--color-surface-primary);
+  --datepicker-focus-border: var(--color-surface-border-quaternary);
+}

package/dist/itcase-forms.cjs.js

@@ -422,13 +422,17 @@ const ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceFiel
     messageType,
     name,
     options,
-    placeholder
+    placeholder,
+    onChange
   } = props;
   const {
     change
   } = reactFinalForm.useForm();
   const setActiveSegment = React.useCallback((option, isChecked) => {
     change(name, isChecked && option.value);
+    if (onChange) {
+      onChange(option.value, name, isChecked);
+    }
   }, [change]);
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
     name: name,
@@ -481,18 +485,16 @@ ChoiceField.propTypes = {
   classNameGroupItem: PropTypes__default.default.string,
   fieldProps: PropTypes__default.default.object,
   hideMessage: PropTypes__default.default.bool,
-  initialValue: PropTypes__default.default.string,
+  initialValue: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number, PropTypes__default.default.bool]),
   inputProps: PropTypes__default.default.object,
   isMultiple: PropTypes__default.default.bool,
   isRequired: PropTypes__default.default.bool,
-  label: PropTypes__default.default.string,
+  label: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.element]),
   messageType: PropTypes__default.default.string,
   name: PropTypes__default.default.string,
-  options: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
-    value: PropTypes__default.default.string,
-    label: PropTypes__default.default.string
-  })),
-  placeholder: PropTypes__default.default.string
+  options: Choice.Choice.propTypes.options,
+  placeholder: PropTypes__default.default.string,
+  onChange: PropTypes__default.default.func
 };
 
 const CustomField = /*#__PURE__*/React__default.default.memo(function CustomField(props) {
@@ -1500,8 +1502,11 @@ RadioGroupList.propTypes = {
   editableProps: PropTypes__default.default.object,
   input: PropTypes__default.default.object,
   inputProps: PropTypes__default.default.object,
-  onChange: PropTypes__default.default.object,
-  options: PropTypes__default.default.object
+  options: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
+    value: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number, PropTypes__default.default.bool]),
+    label: PropTypes__default.default.string
+  })),
+  onChange: PropTypes__default.default.func
 };
 
 const RadioGroup = /*#__PURE__*/React__default.default.memo(function RadioGroup(props) {
@@ -1646,15 +1651,15 @@ function getDefaultValue(options, selectValue) {
 }
 const SelectField = /*#__PURE__*/React__default.default.memo(function SelectField(props) {
   const {
+    classNameGroupItem,
+    fieldProps,
+    hideMessage,
     isRequired,
     name,
     options,
-    fieldProps,
     selectProps,
     selectRef,
-    onChange,
-    classNameGroupItem,
-    hideMessage
+    onChange
   } = props;
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
     name: name
@@ -2052,11 +2057,17 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     after,
     before,
     buttonDirection,
+    buttonFill,
     buttonGap,
+    buttonJustifyContent,
     buttonPadding,
-    groupGap,
     className,
     config,
+    dataTour,
+    dataTourButtons,
+    dataTourPrimaryButton,
+    dataTourSecondaryButton,
+    dataTourTertiaryButton,
     description,
     descriptionSize,
     descriptionTextColor,
@@ -2064,60 +2075,54 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     disableFieldsAutoComplete,
     fieldsGap,
     formName,
+    groupGap,
     initialValues,
     initialValuesEqual,
     isLoading,
+    language,
     loader,
-    loaderSet,
     loaderFill,
     loaderItemFill,
+    loaderSet,
     loaderText,
-    language,
     mutators,
+    notificationCloseButton,
+    notificationType,
     onChangeFormValues,
     onClickSecondaryButton,
     onClickTertiaryButton,
     onSubmit,
     primaryButton,
-    primaryButtonLabel,
-    secondaryButton,
-    secondaryButtonLabel,
     primaryButtonFill,
     primaryButtonFillHover,
-    secondaryButtonFill,
-    secondaryButtonFillHover,
-    primaryButtonSize,
-    primaryButtonLabelTextColor,
+    primaryButtonLabel,
     primaryButtonLabelSize,
+    primaryButtonLabelTextColor,
     primaryButtonLabelTextWeight,
-    secondaryButtonSize,
-    secondaryButtonLabelTextColor,
+    primaryButtonSize,
+    secondaryButton,
+    secondaryButtonFill,
+    secondaryButtonFillHover,
+    secondaryButtonLabel,
     secondaryButtonLabelSize,
+    secondaryButtonLabelTextColor,
     secondaryButtonLabelTextWeight,
+    secondaryButtonSize,
+    set,
     tertiaryButton,
     tertiaryButtonFill,
     tertiaryButtonFillHover,
-    tertiaryButtonSize,
-    tertiaryButtonLabelTextColor,
+    tertiaryButtonLabel,
     tertiaryButtonLabelSize,
+    tertiaryButtonLabelTextColor,
     tertiaryButtonLabelTextWeight,
-    tertiaryButtonLabel,
-    set,
-    type,
-    buttonJustifyContent,
+    tertiaryButtonSize,
     title,
-    notificationType,
-    notificationCloseButton,
-    buttonFill,
-    titleTextSize,
     titleTextColor,
+    titleTextSize,
     titleTextWeight,
-    validationSchema,
-    dataTour,
-    dataTourButtons,
-    dataTourPrimaryButton,
-    dataTourSecondaryButton,
-    dataTourTertiaryButton
+    type,
+    validationSchema
   } = props;
   const validate = useYupValidationSchema(validationSchema, language);
   const onRefFormInstance = React.useCallback(formInstance => {
@@ -2261,9 +2266,18 @@ FinalForm.propTypes = {
   additionalProps: PropTypes__default.default.object,
   after: PropTypes__default.default.any,
   before: PropTypes__default.default.any,
+  buttonDirection: PropTypes__default.default.string,
+  buttonFill: PropTypes__default.default.string,
   buttonGap: PropTypes__default.default.string,
+  buttonJustifyContent: PropTypes__default.default.string,
+  buttonPadding: PropTypes__default.default.string,
   className: PropTypes__default.default.string,
   config: PropTypes__default.default.object,
+  dataTour: PropTypes__default.default.string,
+  dataTourButtons: PropTypes__default.default.string,
+  dataTourPrimaryButton: PropTypes__default.default.string,
+  dataTourSecondaryButton: PropTypes__default.default.string,
+  dataTourTertiaryButton: PropTypes__default.default.string,
   description: PropTypes__default.default.string,
   descriptionSize: PropTypes__default.default.string,
   descriptionTextColor: PropTypes__default.default.string,
@@ -2271,27 +2285,55 @@ FinalForm.propTypes = {
   disableFieldsAutoComplete: PropTypes__default.default.bool,
   fieldsGap: PropTypes__default.default.string,
   formName: PropTypes__default.default.string,
+  groupGap: PropTypes__default.default.string,
   initialValues: PropTypes__default.default.any,
   initialValuesEqual: PropTypes__default.default.any,
-  language: PropTypes__default.default.string,
   isLoading: PropTypes__default.default.bool,
+  language: PropTypes__default.default.string,
+  loader: PropTypes__default.default.element,
+  loaderFill: PropTypes__default.default.string,
+  loaderItemFill: PropTypes__default.default.string,
+  loaderSet: PropTypes__default.default.string,
   loaderText: PropTypes__default.default.string,
   mutators: PropTypes__default.default.any,
-  onChangeFormValues: PropTypes__default.default.func,
-  onClickSecondaryButton: PropTypes__default.default.func,
-  onSubmit: PropTypes__default.default.func,
+  notificationCloseButton: PropTypes__default.default.element,
+  notificationType: PropTypes__default.default.string,
   primaryButton: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.element]),
   primaryButtonFill: PropTypes__default.default.string,
+  primaryButtonFillHover: PropTypes__default.default.string,
   primaryButtonLabel: PropTypes__default.default.string,
+  primaryButtonLabelSize: PropTypes__default.default.string,
+  primaryButtonLabelTextColor: PropTypes__default.default.string,
+  primaryButtonLabelTextWeight: PropTypes__default.default.string,
+  primaryButtonSize: PropTypes__default.default.string,
   secondaryButton: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.element]),
   secondaryButtonFill: PropTypes__default.default.string,
+  secondaryButtonFillHover: PropTypes__default.default.string,
   secondaryButtonLabel: PropTypes__default.default.string,
+  secondaryButtonLabelSize: PropTypes__default.default.string,
+  secondaryButtonLabelTextColor: PropTypes__default.default.string,
+  secondaryButtonLabelTextWeight: PropTypes__default.default.string,
+  secondaryButtonSize: PropTypes__default.default.string,
   set: PropTypes__default.default.string,
+  tertiaryButton: PropTypes__default.default.element,
+  tertiaryButtonFill: PropTypes__default.default.string,
+  tertiaryButtonFillHover: PropTypes__default.default.string,
+  tertiaryButtonLabel: PropTypes__default.default.string,
+  tertiaryButtonLabelSize: PropTypes__default.default.string,
+  tertiaryButtonLabelTextColor: PropTypes__default.default.string,
+  tertiaryButtonLabelTextWeight: PropTypes__default.default.string,
+  tertiaryButtonSize: PropTypes__default.default.string,
   title: PropTypes__default.default.string,
   titleSize: PropTypes__default.default.string,
   titleTextColor: PropTypes__default.default.string,
+  titleTextSize: PropTypes__default.default.string,
   titleTextWeight: PropTypes__default.default.string,
-  validationSchema: PropTypes__default.default.object
+  type: PropTypes__default.default.string,
+  validationSchema: PropTypes__default.default.object,
+  onChangeFormValues: PropTypes__default.default.func,
+  onClickSecondaryButton: PropTypes__default.default.func,
+  onClickTertiaryButton: PropTypes__default.default.func,
+  onSubmit: PropTypes__default.default.func
 };
 FinalForm.defaultProps = {
   additionalProps: {},

package/dist/itcase-forms.esm.js

@@ -412,13 +412,17 @@ const ChoiceField = /*#__PURE__*/React.memo(function ChoiceField(props) {
     messageType,
     name,
     options,
-    placeholder
+    placeholder,
+    onChange
   } = props;
   const {
     change
   } = useForm();
   const setActiveSegment = useCallback((option, isChecked) => {
     change(name, isChecked && option.value);
+    if (onChange) {
+      onChange(option.value, name, isChecked);
+    }
   }, [change]);
   return /*#__PURE__*/React.createElement(Field, {
     name: name,
@@ -471,18 +475,16 @@ ChoiceField.propTypes = {
   classNameGroupItem: PropTypes.string,
   fieldProps: PropTypes.object,
   hideMessage: PropTypes.bool,
-  initialValue: PropTypes.string,
+  initialValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
   inputProps: PropTypes.object,
   isMultiple: PropTypes.bool,
   isRequired: PropTypes.bool,
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   messageType: PropTypes.string,
   name: PropTypes.string,
-  options: PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.string,
-    label: PropTypes.string
-  })),
-  placeholder: PropTypes.string
+  options: Choice.propTypes.options,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func
 };
 
 const CustomField = /*#__PURE__*/React.memo(function CustomField(props) {
@@ -1490,8 +1492,11 @@ RadioGroupList.propTypes = {
   editableProps: PropTypes.object,
   input: PropTypes.object,
   inputProps: PropTypes.object,
-  onChange: PropTypes.object,
-  options: PropTypes.object
+  options: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
+    label: PropTypes.string
+  })),
+  onChange: PropTypes.func
 };
 
 const RadioGroup = /*#__PURE__*/React.memo(function RadioGroup(props) {
@@ -1636,15 +1641,15 @@ function getDefaultValue(options, selectValue) {
 }
 const SelectField = /*#__PURE__*/React.memo(function SelectField(props) {
   const {
+    classNameGroupItem,
+    fieldProps,
+    hideMessage,
     isRequired,
     name,
     options,
-    fieldProps,
     selectProps,
     selectRef,
-    onChange,
-    classNameGroupItem,
-    hideMessage
+    onChange
   } = props;
   return /*#__PURE__*/React.createElement(Field, {
     name: name
@@ -2042,11 +2047,17 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     after,
     before,
     buttonDirection,
+    buttonFill,
     buttonGap,
+    buttonJustifyContent,
     buttonPadding,
-    groupGap,
     className,
     config,
+    dataTour,
+    dataTourButtons,
+    dataTourPrimaryButton,
+    dataTourSecondaryButton,
+    dataTourTertiaryButton,
     description,
     descriptionSize,
     descriptionTextColor,
@@ -2054,60 +2065,54 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     disableFieldsAutoComplete,
     fieldsGap,
     formName,
+    groupGap,
     initialValues,
     initialValuesEqual,
     isLoading,
+    language,
     loader,
-    loaderSet,
     loaderFill,
     loaderItemFill,
+    loaderSet,
     loaderText,
-    language,
     mutators,
+    notificationCloseButton,
+    notificationType,
     onChangeFormValues,
     onClickSecondaryButton,
     onClickTertiaryButton,
     onSubmit,
     primaryButton,
-    primaryButtonLabel,
-    secondaryButton,
-    secondaryButtonLabel,
     primaryButtonFill,
     primaryButtonFillHover,
-    secondaryButtonFill,
-    secondaryButtonFillHover,
-    primaryButtonSize,
-    primaryButtonLabelTextColor,
+    primaryButtonLabel,
     primaryButtonLabelSize,
+    primaryButtonLabelTextColor,
     primaryButtonLabelTextWeight,
-    secondaryButtonSize,
-    secondaryButtonLabelTextColor,
+    primaryButtonSize,
+    secondaryButton,
+    secondaryButtonFill,
+    secondaryButtonFillHover,
+    secondaryButtonLabel,
     secondaryButtonLabelSize,
+    secondaryButtonLabelTextColor,
     secondaryButtonLabelTextWeight,
+    secondaryButtonSize,
+    set,
     tertiaryButton,
     tertiaryButtonFill,
     tertiaryButtonFillHover,
-    tertiaryButtonSize,
-    tertiaryButtonLabelTextColor,
+    tertiaryButtonLabel,
     tertiaryButtonLabelSize,
+    tertiaryButtonLabelTextColor,
     tertiaryButtonLabelTextWeight,
-    tertiaryButtonLabel,
-    set,
-    type,
-    buttonJustifyContent,
+    tertiaryButtonSize,
     title,
-    notificationType,
-    notificationCloseButton,
-    buttonFill,
-    titleTextSize,
     titleTextColor,
+    titleTextSize,
     titleTextWeight,
-    validationSchema,
-    dataTour,
-    dataTourButtons,
-    dataTourPrimaryButton,
-    dataTourSecondaryButton,
-    dataTourTertiaryButton
+    type,
+    validationSchema
   } = props;
   const validate = useYupValidationSchema(validationSchema, language);
   const onRefFormInstance = useCallback(formInstance => {
@@ -2251,9 +2256,18 @@ FinalForm.propTypes = {
   additionalProps: PropTypes.object,
   after: PropTypes.any,
   before: PropTypes.any,
+  buttonDirection: PropTypes.string,
+  buttonFill: PropTypes.string,
   buttonGap: PropTypes.string,
+  buttonJustifyContent: PropTypes.string,
+  buttonPadding: PropTypes.string,
   className: PropTypes.string,
   config: PropTypes.object,
+  dataTour: PropTypes.string,
+  dataTourButtons: PropTypes.string,
+  dataTourPrimaryButton: PropTypes.string,
+  dataTourSecondaryButton: PropTypes.string,
+  dataTourTertiaryButton: PropTypes.string,
   description: PropTypes.string,
   descriptionSize: PropTypes.string,
   descriptionTextColor: PropTypes.string,
@@ -2261,27 +2275,55 @@ FinalForm.propTypes = {
   disableFieldsAutoComplete: PropTypes.bool,
   fieldsGap: PropTypes.string,
   formName: PropTypes.string,
+  groupGap: PropTypes.string,
   initialValues: PropTypes.any,
   initialValuesEqual: PropTypes.any,
-  language: PropTypes.string,
   isLoading: PropTypes.bool,
+  language: PropTypes.string,
+  loader: PropTypes.element,
+  loaderFill: PropTypes.string,
+  loaderItemFill: PropTypes.string,
+  loaderSet: PropTypes.string,
   loaderText: PropTypes.string,
   mutators: PropTypes.any,
-  onChangeFormValues: PropTypes.func,
-  onClickSecondaryButton: PropTypes.func,
-  onSubmit: PropTypes.func,
+  notificationCloseButton: PropTypes.element,
+  notificationType: PropTypes.string,
   primaryButton: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   primaryButtonFill: PropTypes.string,
+  primaryButtonFillHover: PropTypes.string,
   primaryButtonLabel: PropTypes.string,
+  primaryButtonLabelSize: PropTypes.string,
+  primaryButtonLabelTextColor: PropTypes.string,
+  primaryButtonLabelTextWeight: PropTypes.string,
+  primaryButtonSize: PropTypes.string,
   secondaryButton: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   secondaryButtonFill: PropTypes.string,
+  secondaryButtonFillHover: PropTypes.string,
   secondaryButtonLabel: PropTypes.string,
+  secondaryButtonLabelSize: PropTypes.string,
+  secondaryButtonLabelTextColor: PropTypes.string,
+  secondaryButtonLabelTextWeight: PropTypes.string,
+  secondaryButtonSize: PropTypes.string,
   set: PropTypes.string,
+  tertiaryButton: PropTypes.element,
+  tertiaryButtonFill: PropTypes.string,
+  tertiaryButtonFillHover: PropTypes.string,
+  tertiaryButtonLabel: PropTypes.string,
+  tertiaryButtonLabelSize: PropTypes.string,
+  tertiaryButtonLabelTextColor: PropTypes.string,
+  tertiaryButtonLabelTextWeight: PropTypes.string,
+  tertiaryButtonSize: PropTypes.string,
   title: PropTypes.string,
   titleSize: PropTypes.string,
   titleTextColor: PropTypes.string,
+  titleTextSize: PropTypes.string,
   titleTextWeight: PropTypes.string,
-  validationSchema: PropTypes.object
+  type: PropTypes.string,
+  validationSchema: PropTypes.object,
+  onChangeFormValues: PropTypes.func,
+  onClickSecondaryButton: PropTypes.func,
+  onClickTertiaryButton: PropTypes.func,
+  onSubmit: PropTypes.func
 };
 FinalForm.defaultProps = {
   additionalProps: {},

package/package.json

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