@itcase/forms 1.0.38 → 1.0.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/css/form/Field/Checkbox/Checkbox.css +8 -3
  2. package/dist/css/form/Field/Choice/Choice.css +9 -3
  3. package/dist/css/form/Field/Custom/Custom.css +14 -3
  4. package/dist/css/form/Field/Input/Input.css +14 -2
  5. package/dist/css/form/Field/RadioGroup/RadioGroup.css +9 -2
  6. package/dist/css/form/Field/Segmented/Segmented.css +7 -2
  7. package/dist/css/form/Field/Select/Select.css +17 -4
  8. package/dist/css/form/Field/Textarea/Textarea.css +14 -3
  9. package/dist/css/form/Form/Form.css +0 -6
  10. package/dist/css/form/Form/css/__item/form__item_state_success.css +0 -6
  11. package/dist/itcase-forms.cjs.js +3 -3
  12. package/dist/itcase-forms.esm.js +3 -3
  13. package/package.json +11 -11
package/dist/css/form/Field/Checkbox/Checkbox.css CHANGED
@@ -2,17 +2,17 @@
2
2
  &&_state {
3
3
  &_success {
4
4
  & .checkbox__state {
5
- border: solid 1px var(--color-success-border-primary);
5
+ border: solid 1px var(--checkbox-success-border);
6
6
  }
7
7
  }
8
8
  &_error {
9
9
  & .checkbox__state {
10
- border: solid 1px var(--color-error-border-primary);
10
+ border: solid 1px var(--checkbox-error-border);
11
11
  }
12
12
  }
13
13
  &_focus {
14
14
  & .checkbox__state {
15
- /* border: solid 1px var(--color-error-border-primary); */
15
+ /* border: solid 1px var(--checkbox-focus-border); */
16
16
  }
17
17
  }
18
18
  }
@@ -38,3 +38,8 @@
38
38
  }
39
39
  }
40
40
  }
41
+ :root {
42
+ --checkbox-success-border: var(--color-success-border-primary);
43
+ --checkbox-error-border: var(--color-error-border-primary);
44
+ --checkbox-focus-border: var(--color-surface-border-quaternary);
45
+ }
package/dist/css/form/Field/Choice/Choice.css CHANGED
@@ -2,16 +2,16 @@
2
2
  &&_state {
3
3
  &_success {
4
4
  & .choice {
5
- /* border: solid 1px var(--color-success-border-primary); */
5
+ /* border: solid 1px var(--choice-success-border); */
6
6
  }
7
7
  }
8
8
  &_error {
9
9
  & .choice {
10
- border: solid 1px var(--color-error-border-primary);
10
+ border: solid 1px var(--choice-error-border);
11
11
  }
12
12
  }
13
13
  &_focus {
14
- /* border: solid 1px var(--color-error-border-primary); */
14
+ /* border: solid 1px var(--choice-focus-border); */
15
15
  }
16
16
  }
17
17
  }
@@ -19,3 +19,9 @@
19
19
  &_type_choice {
20
20
  }
21
21
  }
22
+ :root {
23
+ --choice-success-border: var(--color-success-border-primary);
24
+ --choice-success-border-hover: var(--color-surface-border-quaternary);
25
+ --choice-error-border: var(--color-error-border-primary);
26
+ --choice-focus-border: var(--color-surface-border-quaternary);
27
+ }
package/dist/css/form/Field/Custom/Custom.css CHANGED
@@ -2,17 +2,21 @@
2
2
  &_state {
3
3
  &_success {
4
4
  & .input {
5
- border: solid 1px var(--color-success-border-primary);
5
+ border: solid 1px var(--custom-success-border);
6
+ &:hover {
7
+ border: solid 1px var(--custom-success-border-hover);
8
+ }
6
9
  }
7
10
  }
8
11
  &_error {
9
12
  & .input {
10
- border: solid 1px var(--color-error-border-primary);
13
+ border: solid 1px var(--custom-error-border);
11
14
  }
12
15
  }
13
16
  &_focus {
14
17
  & .input {
15
- background: var(--color-surface-primary);
18
+ background: var(--custom-focus-background);
19
+ border: solid 1px var(--custom-focus-border);
16
20
  }
17
21
  }
18
22
  }
@@ -22,3 +26,10 @@
22
26
  width: 100%;
23
27
  }
24
28
  }
29
+ :root {
30
+ --custom-success-border: var(--color-success-border-primary);
31
+ --custom-success-border-hover: var(--color-surface-border-quaternary);
32
+ --custom-error-border: var(--color-error-border-primary);
33
+ --custom-focus-background: var(--color-surface-primary);
34
+ --custom-focus-border: var(--color-surface-border-quaternary);
35
+ }
package/dist/css/form/Field/Input/Input.css CHANGED
@@ -4,17 +4,29 @@
4
4
  &_success {
5
5
  & .input {
6
6
  border: solid 1px var(--input-success-border, green);
7
+ &:hover {
8
+ border: solid 1px var(--input-success-border-hover);
9
+ }
7
10
  }
8
11
  }
9
12
  &_error {
10
13
  & .input {
11
- border: solid 1px var(--color-error-border-primary);
14
+ border: solid 1px var(--input-error-border);
12
15
  }
13
16
  }
14
17
  &_focus {
15
18
  & .input {
16
- background: var(--color-surface-primary);
19
+ background: var(--input-focus-background);
20
+ border: solid 1px var(--input-focus-border);
17
21
  }
18
22
  }
19
23
  }
20
24
  }
25
+
26
+ :root {
27
+ --input-success-border: var(--color-success-border-primary);
28
+ --input-success-border-hover: var(--color-surface-border-quaternary);
29
+ --input-error-border: var(--color-error-border-primary);
30
+ --input-focus-background: var(--color-surface-primary);
31
+ --input-focus-border: var(--color-surface-border-quaternary);
32
+ }
package/dist/css/form/Field/RadioGroup/RadioGroup.css CHANGED
@@ -4,12 +4,19 @@
4
4
  .form-radio {
5
5
  &_state_success {
6
6
  & .radio-button__state {
7
- border: solid 1px var(--color-success-border-primary);
7
+ border: solid 1px var(--radio-success-border);
8
8
  }
9
9
  }
10
10
  &_state_error {
11
11
  & .radio-button__state {
12
- border: solid 1px var(--color-error-border-primary);
12
+ border: solid 1px var(--radio-error-border);
13
13
  }
14
14
  }
15
15
  }
16
+ :root {
17
+ --radio-success-border: var(--color-success-border-primary);
18
+ --radio-success-border-hover: var(--color-surface-border-quaternary);
19
+ --radio-error-border: var(--color-error-border-primary);
20
+ --radio-focus-background: var(--color-surface-primary);
21
+ --radio-focus-border: var(--color-surface-border-quaternary);
22
+ }
package/dist/css/form/Field/Segmented/Segmented.css CHANGED
@@ -2,15 +2,20 @@
2
2
  &_state_error {
3
3
  & .segmented {
4
4
  &__item-label-text {
5
- color: var(--color-error-text-primary);
5
+ color: var(--segmented-error-text-color);
6
6
  }
7
7
  }
8
8
  }
9
9
  &_state_required {
10
10
  & .segmented {
11
11
  &__item-label-text {
12
- color: var(--color-active-text-primary);
12
+ color: var(--segmented-required-text-color);
13
13
  }
14
14
  }
15
15
  }
16
16
  }
17
+
18
+ :root {
19
+ --segmented-error-text-color: var(--color-error-text-primary);
20
+ --segmented-required-text-color: var(--color-active-text-primary);
21
+ }
package/dist/css/form/Field/Select/Select.css CHANGED
@@ -1,19 +1,32 @@
1
1
  .form-select {
2
2
  position: relative;
3
3
  &__wrapper {
4
- background: var(--color-surface-primary);
4
+ background: var(--select-background);
5
5
  &:hover {
6
- background: var(--color-surface-primary-hover);
6
+ background: var(--select-background-hover);
7
7
  }
8
8
  }
9
9
  &_state_success {
10
10
  & .select__control {
11
- border: solid 1px var(--color-success-border-primary);
11
+ border: solid 1px var(--select-success-border);
12
+ &:hover {
13
+ border: solid 1px var(--select-success-border-hover);
14
+ }
12
15
  }
13
16
  }
14
17
  &_state_error {
15
18
  & .select__control {
16
- border: solid 1px var(--color-error-border-primary);
19
+ border: solid 1px var(--select-error-border);
17
20
  }
18
21
  }
19
22
  }
23
+
24
+ :root {
25
+ --select-background: var(--color-surface-primary);
26
+ --select-background-hover: var(--color-surface-primary-hover);
27
+ --select-success-border: var(--color-success-border-primary);
28
+ --select-success-border-hover: var(--color-surface-border-quaternary);
29
+ --select-error-border: var(--color-error-border-primary);
30
+ --select-focus-background: var(--color-surface-primary);
31
+ --select-focus-border: var(--color-surface-border-quaternary);
32
+ }
package/dist/css/form/Field/Textarea/Textarea.css CHANGED
@@ -3,18 +3,29 @@
3
3
  &&_state {
4
4
  &_success {
5
5
  & .textarea {
6
- border: solid 1px var(--color-success-border-primary);
6
+ border: solid 1px var(--textarea-success-border);
7
+ &:hover {
8
+ border: solid 1px var(--textarea-success-border-hover);
9
+ }
7
10
  }
8
11
  }
9
12
  &_error {
10
13
  & .textarea {
11
- border: solid 1px var(--color-error-border-primary);
14
+ border: solid 1px var(--textarea-error-border);
12
15
  }
13
16
  }
14
17
  &_focus {
15
18
  & .textarea {
16
- background: var(--color-surface-primary);
19
+ background: var(--textarea-focus-background);
17
20
  }
18
21
  }
19
22
  }
20
23
  }
24
+
25
+ :root {
26
+ --textarea-success-border: var(--color-success-border-primary);
27
+ --textarea-success-border-hover: var(--color-surface-border-quaternary);
28
+ --textarea-error-border: var(--color-error-border-primary);
29
+ --textarea-focus-background: var(--color-surface-primary);
30
+ --textarea-focus-border: var(--color-surface-border-quaternary);
31
+ }
package/dist/css/form/Form/Form.css CHANGED
@@ -80,12 +80,6 @@
80
80
  .form {
81
81
  &__item {
82
82
  &&_state_success {
83
- & .select__control {
84
- border: 1px solid var(--color-success-border-primary);
85
- }
86
- & .input {
87
- border: 1px solid var(--color-success-border-primary);
88
- }
89
83
  }
90
84
  }
91
85
  }
package/dist/css/form/Form/css/__item/form__item_state_success.css CHANGED
@@ -1,12 +1,6 @@
1
1
  .form {
2
2
  &__item {
3
3
  &&_state_success {
4
- & .select__control {
5
- border: 1px solid var(--color-success-border-primary);
6
- }
7
- & .input {
8
- border: 1px solid var(--color-success-border-primary);
9
- }
10
4
  }
11
5
  }
12
6
  }
package/dist/itcase-forms.cjs.js CHANGED
@@ -650,7 +650,7 @@ DatePickerField.propTypes = {
650
650
  async function getFileByURL(url) {
651
651
  try {
652
652
  const response = await axios__default.default({
653
- url: `/api/${url}/`,
653
+ url,
654
654
  responseType: 'blob'
655
655
  });
656
656
  const blobObject = response.data;
@@ -2100,7 +2100,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
2100
2100
  buttonJustifyContent,
2101
2101
  title,
2102
2102
  notificationType,
2103
- notificationClose,
2103
+ notificationCloseButton,
2104
2104
  buttonFill,
2105
2105
  titleTextSize,
2106
2106
  titleTextColor,
@@ -2174,7 +2174,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
2174
2174
  }, /*#__PURE__*/React__default.default.createElement(Notification.NotificationItem, {
2175
2175
  className: "form-notification__item",
2176
2176
  titleTextSize: "h6",
2177
- notificationClose: notificationClose,
2177
+ closeButton: notificationCloseButton,
2178
2178
  title: form.getState().submitError,
2179
2179
  set: "form",
2180
2180
  status: "error"
package/dist/itcase-forms.esm.js CHANGED
@@ -640,7 +640,7 @@ DatePickerField.propTypes = {
640
640
  async function getFileByURL(url) {
641
641
  try {
642
642
  const response = await axios({
643
- url: `/api/${url}/`,
643
+ url,
644
644
  responseType: 'blob'
645
645
  });
646
646
  const blobObject = response.data;
@@ -2090,7 +2090,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
2090
2090
  buttonJustifyContent,
2091
2091
  title,
2092
2092
  notificationType,
2093
- notificationClose,
2093
+ notificationCloseButton,
2094
2094
  buttonFill,
2095
2095
  titleTextSize,
2096
2096
  titleTextColor,
@@ -2164,7 +2164,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
2164
2164
  }, /*#__PURE__*/React.createElement(NotificationItem, {
2165
2165
  className: "form-notification__item",
2166
2166
  titleTextSize: "h6",
2167
- notificationClose: notificationClose,
2167
+ closeButton: notificationCloseButton,
2168
2168
  title: form.getState().submitError,
2169
2169
  set: "form",
2170
2170
  status: "error"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itcase/forms",
3
- "version": "1.0.38",
3
+ "version": "1.0.40",
4
4
  "description": "Forms fields, inputs, etc.",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -31,13 +31,13 @@
31
31
  },
32
32
  "dependencies": {
33
33
  "@itcase/common": "^1.1.7",
34
- "@itcase/ui": "^1.0.73",
34
+ "@itcase/ui": "^1.0.75",
35
35
  "axios": "^1.5.1",
36
36
  "clsx": "^2.0.0",
37
37
  "date-fns": "2.0.0-alpha.7",
38
38
  "final-form": "^4.20.10",
39
39
  "final-form-focus": "^1.1.2",
40
- "libphonenumber-js": "^1.10.47",
40
+ "libphonenumber-js": "^1.10.48",
41
41
  "lodash": "^4.17.21",
42
42
  "luxon": "^3.4.3",
43
43
  "prop-types": "^15.8.1",
@@ -53,10 +53,10 @@
53
53
  "@babel/eslint-parser": "^7.22.15",
54
54
  "@babel/preset-env": "^7.23.2",
55
55
  "@babel/preset-react": "^7.22.15",
56
- "@commitlint/cli": "^17.7.2",
57
- "@commitlint/config-conventional": "^17.7.0",
56
+ "@commitlint/cli": "^17.8.0",
57
+ "@commitlint/config-conventional": "^17.8.0",
58
58
  "@rollup/plugin-babel": "^6.0.4",
59
- "@rollup/plugin-commonjs": "^25.0.5",
59
+ "@rollup/plugin-commonjs": "^25.0.7",
60
60
  "@rollup/plugin-json": "^6.0.1",
61
61
  "@rollup/plugin-node-resolve": "^15.2.3",
62
62
  "@rollup/plugin-terser": "^0.4.4",
@@ -73,8 +73,8 @@
73
73
  "eslint-plugin-react": "^7.33.2",
74
74
  "eslint-plugin-standard": "^5.0.0",
75
75
  "husky": "^8.0.3",
76
- "lint-staged": "^14.0.1",
77
- "npm": "^10.2.0",
76
+ "lint-staged": "^15.0.2",
77
+ "npm": "^10.2.1",
78
78
  "postcss-aspect-ratio-polyfill": "^2.0.0",
79
79
  "postcss-cli": "^10.1.0",
80
80
  "postcss-combine-duplicated-selectors": "^10.0.3",
@@ -97,11 +97,11 @@
97
97
  "postcss-responsive-type": "github:ITCase/postcss-responsive-type",
98
98
  "postcss-sort-media-queries": "^5.2.0",
99
99
  "prettier": "^3.0.3",
100
- "react-datepicker": "^4.20.0",
101
- "rollup": "^4.1.0",
100
+ "react-datepicker": "^4.21.0",
101
+ "rollup": "^4.1.4",
102
102
  "rollup-plugin-peer-deps-external": "^2.2.4",
103
103
  "semantic-release": "^22.0.5",
104
- "stylelint": "^15.10.3",
104
+ "stylelint": "^15.11.0",
105
105
  "stylelint-config-standard": "^34.0.0",
106
106
  "stylelint-no-unsupported-browser-features": "^7.0.0",
107
107
  "stylelint-order": "^6.0.3"