@react-fabric/form 1.0.0-beta.13 → 1.0.0-beta.15

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 (12) hide show
  1. package/dist/cjs/form/Form.js +3 -0
  2. package/dist/cjs/input/ColorPicker.module.css +1 -1
  3. package/dist/cjs/input/File.module.css +1 -1
  4. package/dist/esm/form/Form.js +4 -1
  5. package/dist/esm/input/ColorPicker.module.css +1 -1
  6. package/dist/esm/input/File.module.css +1 -1
  7. package/dist/types/input/ArrayInput.d.ts +2 -2
  8. package/package.json +4 -4
  9. package/src/form/Form.tsx +4 -0
  10. package/src/input/ArrayInput.tsx +2 -2
  11. package/src/input/ColorPicker.module.css +15 -5
  12. package/src/input/File.module.css +18 -4
package/dist/cjs/form/Form.js CHANGED
@@ -32,6 +32,9 @@ var Form = function Form(_ref) {
32
32
  resolver: schema && yup.yupResolver(schema),
33
33
  defaultValues: defaultValues
34
34
  });
35
+ react.useEffect(function () {
36
+ form.reset();
37
+ }, []);
35
38
  var _useTransition = react.useTransition(),
36
39
  _useTransition2 = _slicedToArray(_useTransition, 2),
37
40
  startTransition = _useTransition2[1];
package/dist/cjs/input/ColorPicker.module.css CHANGED
@@ -1 +1 @@
1
- @layer comp{.colorPicker{--color-shadow:theme(borderColor.base);& input{@apply bg-base text-base !border !border-solid !rounded-sm !border-base focus:!border-primary !shadow-none;line-height:2;padding:0 4px!important}& label{@apply !text-base}& :global(.flexbox-fix){@apply !border-t-muted justify-center;&>div>div{@apply text-center}& span>div{box-shadow:inset 0 0 1px 1px theme(borderColor.base)!important}}}}
1
+ @layer comp{.colorPicker{--color-shadow:theme(borderColor.base);& input{background-color:theme(backgroundColor.base);border:1px solid theme(borderColor.base);border-radius:theme(borderRadius.sm);box-shadow:none;color:theme(textColor.base);line-height:2;padding:0 4px!important;&:focus{border-color:theme(borderColor.primary.DEFAULT)}}& label{color:theme(textColor.base)}& :global(.flexbox-fix){border-color:theme(borderColor.muted);justify-content:center;&>div>div{text-align:center}& span>div{box-shadow:inset 0 0 1px 1px theme(borderColor.base)!important}}}}
package/dist/cjs/input/File.module.css CHANGED
@@ -1 +1 @@
1
- @layer comp{.fileInput{&::-webkit-file-upload-button{@apply bg-primary-500 opacity-80 hover:opacity-90 text-white rounded border-none py-0 cursor-pointer}&[aria-invalid=true]::-webkit-file-upload-button{@apply bg-danger-500}&:disabled::-webkit-file-upload-button{@apply bg-muted pointer-events-none}&[readOnly]{@apply pointer-events-none}}}
1
+ @layer comp{.fileInput{&::-webkit-file-upload-button{background-color:theme(backgroundColor.primary.500);border:0;border-radius:theme(borderRadius.DEFAULT);color:theme(textColor.white);cursor:pointer;opacity:.8;padding-block:0;&:hover{opacity:.9}}&[aria-invalid=true]::-webkit-file-upload-button{background-color:theme(backgroundColor.danger.500)}&:disabled::-webkit-file-upload-button{background-color:theme(backgroundColor.muted);pointer-events:none}&[readOnly]{pointer-events:none}}}
package/dist/esm/form/Form.js CHANGED
@@ -7,7 +7,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
7
7
  import _regeneratorRuntime from '@babel/runtime/regenerator';
8
8
  import { yupResolver } from '@hookform/resolvers/yup';
9
9
  import { useDebounce } from '@react-fabric/core';
10
- import { useRef, useTransition, useEffect, useCallback, useImperativeHandle } from 'react';
10
+ import { useRef, useEffect, useTransition, useCallback, useImperativeHandle } from 'react';
11
11
  import { useForm, FormProvider } from 'react-hook-form';
12
12
  import { jsx, jsxs } from 'react/jsx-runtime';
13
13
 
@@ -32,6 +32,9 @@ var Form = function Form(_ref) {
32
32
  resolver: schema && yupResolver(schema),
33
33
  defaultValues: defaultValues
34
34
  });
35
+ useEffect(function () {
36
+ form.reset();
37
+ }, []);
35
38
  var _useTransition = useTransition(),
36
39
  _useTransition2 = _slicedToArray(_useTransition, 2),
37
40
  startTransition = _useTransition2[1];
package/dist/esm/input/ColorPicker.module.css CHANGED
@@ -1 +1 @@
1
- @layer comp{.colorPicker{--color-shadow:theme(borderColor.base);& input{@apply bg-base text-base !border !border-solid !rounded-sm !border-base focus:!border-primary !shadow-none;line-height:2;padding:0 4px!important}& label{@apply !text-base}& :global(.flexbox-fix){@apply !border-t-muted justify-center;&>div>div{@apply text-center}& span>div{box-shadow:inset 0 0 1px 1px theme(borderColor.base)!important}}}}
1
+ @layer comp{.colorPicker{--color-shadow:theme(borderColor.base);& input{background-color:theme(backgroundColor.base);border:1px solid theme(borderColor.base);border-radius:theme(borderRadius.sm);box-shadow:none;color:theme(textColor.base);line-height:2;padding:0 4px!important;&:focus{border-color:theme(borderColor.primary.DEFAULT)}}& label{color:theme(textColor.base)}& :global(.flexbox-fix){border-color:theme(borderColor.muted);justify-content:center;&>div>div{text-align:center}& span>div{box-shadow:inset 0 0 1px 1px theme(borderColor.base)!important}}}}
package/dist/esm/input/File.module.css CHANGED
@@ -1 +1 @@
1
- @layer comp{.fileInput{&::-webkit-file-upload-button{@apply bg-primary-500 opacity-80 hover:opacity-90 text-white rounded border-none py-0 cursor-pointer}&[aria-invalid=true]::-webkit-file-upload-button{@apply bg-danger-500}&:disabled::-webkit-file-upload-button{@apply bg-muted pointer-events-none}&[readOnly]{@apply pointer-events-none}}}
1
+ @layer comp{.fileInput{&::-webkit-file-upload-button{background-color:theme(backgroundColor.primary.500);border:0;border-radius:theme(borderRadius.DEFAULT);color:theme(textColor.white);cursor:pointer;opacity:.8;padding-block:0;&:hover{opacity:.9}}&[aria-invalid=true]::-webkit-file-upload-button{background-color:theme(backgroundColor.danger.500)}&:disabled::-webkit-file-upload-button{background-color:theme(backgroundColor.muted);pointer-events:none}&[readOnly]{pointer-events:none}}}
package/dist/types/input/ArrayInput.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { type ReactNode, type RefObject } from "react";
1
+ import { type ReactNode, type Ref } from "react";
2
2
  export interface ArrayInputProps {
3
3
  /**
4
4
  * input label
@@ -52,7 +52,7 @@ export interface ArrayInputProps {
52
52
  * fixed length list
53
53
  */
54
54
  fixedList?: boolean;
55
- arrayRef?: RefObject<{
55
+ arrayRef?: Ref<{
56
56
  addItem: (item: AnyObject) => void;
57
57
  removeItem: (idx: number) => void;
58
58
  }>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-fabric/form",
3
- "version": "1.0.0-beta.13",
3
+ "version": "1.0.0-beta.15",
4
4
  "description": "RUF: Form package",
5
5
  "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
6
6
  "license": "MIT",
@@ -39,8 +39,8 @@
39
39
  "@dnd-kit/utilities": "^3.2.2",
40
40
  "@floating-ui/react": "0.26.24",
41
41
  "@hookform/resolvers": "^3.9.0",
42
- "@react-fabric/core": "^1.0.0-beta.13",
43
- "@react-fabric/utilities": "^1.0.0-beta.13",
42
+ "@react-fabric/core": "^1.0.0-beta.15",
43
+ "@react-fabric/utilities": "^1.0.0-beta.15",
44
44
  "classnames": "^2.5.1",
45
45
  "color": "^4.2.3",
46
46
  "react-color": "^2.19.3",
@@ -60,5 +60,5 @@
60
60
  "node": ">=18.12.0",
61
61
  "npm": ">=8.19.0"
62
62
  },
63
- "gitHead": "ffc2d8712be19f7a829b87e868ec2488eda6f887"
63
+ "gitHead": "d6c7e122b74bf8b0511ef4fb8a99931458a37b3a"
64
64
  }
package/src/form/Form.tsx CHANGED
@@ -89,6 +89,10 @@ export const Form = <K extends KeyValue>({
89
89
  defaultValues: defaultValues as DefaultValues<K>,
90
90
  });
91
91
 
92
+ useEffect(() => {
93
+ form.reset();
94
+ }, []);
95
+
92
96
  const [, startTransition] = useTransition();
93
97
  const changeHandler = useDebounce(onChange, [onChange]);
94
98
  useEffect(() => {
package/src/input/ArrayInput.tsx CHANGED
@@ -34,7 +34,7 @@ import {
34
34
  useMemo,
35
35
  type PropsWithChildren,
36
36
  type ReactNode,
37
- type RefObject,
37
+ type Ref,
38
38
  } from "react";
39
39
  import { useFieldArray, useFormContext } from "react-hook-form";
40
40
  import { useTranslation } from "react-i18next";
@@ -96,7 +96,7 @@ export interface ArrayInputProps {
96
96
  * fixed length list
97
97
  */
98
98
  fixedList?: boolean;
99
- arrayRef?: RefObject<{
99
+ arrayRef?: Ref<{
100
100
  addItem: (item: AnyObject) => void;
101
101
  removeItem: (idx: number) => void;
102
102
  }>;
package/src/input/ColorPicker.module.css CHANGED
@@ -26,21 +26,31 @@
26
26
  --color-shadow: theme(borderColor.base);
27
27
 
28
28
  & input {
29
- @apply bg-base text-base !border !border-solid !rounded-sm !border-base focus:!border-primary !shadow-none;
30
-
31
29
  padding: 0 4px !important;
30
+
32
31
  line-height: 2;
32
+ color: theme(textColor.base);
33
+
34
+ background-color: theme(backgroundColor.base);
35
+ border: 1px solid theme(borderColor.base);
36
+ border-radius: theme(borderRadius.sm);
37
+ box-shadow: none;
38
+
39
+ &:focus {
40
+ border-color: theme(borderColor.primary.DEFAULT);
41
+ }
33
42
  }
34
43
 
35
44
  & label {
36
- @apply !text-base;
45
+ color: theme(textColor.base);
37
46
  }
38
47
 
39
48
  & :global(.flexbox-fix) {
40
- @apply !border-t-muted justify-center;
49
+ justify-content: center;
50
+ border-color: theme(borderColor.muted);
41
51
 
42
52
  & > div > div {
43
- @apply text-center;
53
+ text-align: center;
44
54
  }
45
55
 
46
56
  & span > div {
package/src/input/File.module.css CHANGED
@@ -24,19 +24,33 @@
24
24
  @layer comp {
25
25
  .fileInput {
26
26
  &::-webkit-file-upload-button {
27
- @apply bg-primary-500 opacity-80 hover:opacity-90 text-white rounded border-none py-0 cursor-pointer;
27
+ cursor: pointer;
28
+
29
+ padding-block: 0;
30
+
31
+ color: theme(textColor.white);
32
+
33
+ opacity: 0.8;
34
+ background-color: theme(backgroundColor.primary.500);
35
+ border: 0;
36
+ border-radius: theme(borderRadius.DEFAULT);
37
+
38
+ &:hover {
39
+ opacity: 0.9;
40
+ }
28
41
  }
29
42
 
30
43
  &[aria-invalid="true"]::-webkit-file-upload-button {
31
- @apply bg-danger-500;
44
+ background-color: theme(backgroundColor.danger.500);
32
45
  }
33
46
 
34
47
  &:disabled::-webkit-file-upload-button {
35
- @apply bg-muted pointer-events-none;
48
+ pointer-events: none;
49
+ background-color: theme(backgroundColor.muted);
36
50
  }
37
51
 
38
52
  &[readOnly] {
39
- @apply pointer-events-none;
53
+ pointer-events: none;
40
54
  }
41
55
  }
42
56
  }