formik-form-components 0.2.25 → 0.2.27
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.
- package/dist/index.d.ts +6 -6
- package/dist/index.js +92 -72
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +92 -72
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -2
package/dist/index.d.ts
CHANGED
|
@@ -164,7 +164,7 @@ interface AppSwitchInputProps {
|
|
|
164
164
|
switchSx?: SxProps<Theme>;
|
|
165
165
|
labelSx?: SxProps<Theme>;
|
|
166
166
|
errorSx?: SxProps<Theme>;
|
|
167
|
-
labelPlacement?:
|
|
167
|
+
labelPlacement?: "start" | "end" | "top" | "bottom";
|
|
168
168
|
disabled?: boolean;
|
|
169
169
|
[key: string]: unknown;
|
|
170
170
|
}
|
|
@@ -178,7 +178,7 @@ interface AppSwitchProps {
|
|
|
178
178
|
switchSx?: SxProps<Theme>;
|
|
179
179
|
labelSx?: SxProps<Theme>;
|
|
180
180
|
errorSx?: SxProps<Theme>;
|
|
181
|
-
labelPlacement?:
|
|
181
|
+
labelPlacement?: "start" | "end" | "top" | "bottom";
|
|
182
182
|
disabled?: boolean;
|
|
183
183
|
}
|
|
184
184
|
declare function AppSwitch({ name, label, sx, containerSx, switchSx, labelSx, errorSx, labelPlacement, disabled, ...otherProps }: AppSwitchProps): React.JSX.Element;
|
|
@@ -529,7 +529,7 @@ interface AppSearchableMultiSelectorProps extends CustomAutocompleteProps {
|
|
|
529
529
|
/** Whether to show the selected count */
|
|
530
530
|
showSelectedCount?: boolean;
|
|
531
531
|
/** Variant of the input field */
|
|
532
|
-
variant?:
|
|
532
|
+
variant?: "outlined" | "filled" | "standard";
|
|
533
533
|
/** Custom styles for the root container */
|
|
534
534
|
sx?: SxProps<Theme>;
|
|
535
535
|
/** Custom styles for the form control */
|
|
@@ -642,7 +642,7 @@ interface AppSelectOptions$1 {
|
|
|
642
642
|
searchAbleValue2?: string;
|
|
643
643
|
searchAbleValue3?: string;
|
|
644
644
|
}
|
|
645
|
-
interface Props$1 extends Omit<AutocompleteProps<AppSelectOptions$1, false, false, false>,
|
|
645
|
+
interface Props$1 extends Omit<AutocompleteProps<AppSelectOptions$1, false, false, false>, "options" | "renderInput" | "value" | "onChange"> {
|
|
646
646
|
name: string;
|
|
647
647
|
label: string;
|
|
648
648
|
options: AppSelectOptions$1[];
|
|
@@ -650,7 +650,7 @@ interface Props$1 extends Omit<AutocompleteProps<AppSelectOptions$1, false, fals
|
|
|
650
650
|
required?: boolean;
|
|
651
651
|
placeholder?: string;
|
|
652
652
|
isResetRequired?: boolean;
|
|
653
|
-
variant?:
|
|
653
|
+
variant?: "outlined" | "filled" | "standard";
|
|
654
654
|
}
|
|
655
655
|
declare function AppSearchableSelectInput({ name, label, options, required, variant, placeholder, setSearchQuery, isResetRequired, ...otherProps }: Props$1): React__default.JSX.Element;
|
|
656
656
|
|
|
@@ -686,7 +686,7 @@ interface AppSelectInputProps extends Omit<SelectProps, "name" | "label" | "valu
|
|
|
686
686
|
/** Whether the field is read-only */
|
|
687
687
|
readOnly?: boolean;
|
|
688
688
|
/** Variant of the select input */
|
|
689
|
-
variant?:
|
|
689
|
+
variant?: "outlined" | "filled" | "standard";
|
|
690
690
|
/** Whether to show a 'None' option */
|
|
691
691
|
showNoneOption?: boolean;
|
|
692
692
|
/** Text to display for the 'None' option */
|
package/dist/index.js
CHANGED
|
@@ -92,14 +92,16 @@ var AppDatePicker = react.forwardRef(
|
|
|
92
92
|
onChange: handleChange,
|
|
93
93
|
format,
|
|
94
94
|
disabled,
|
|
95
|
+
slots: {
|
|
96
|
+
openPickerIcon: CalendarMonthIcon__default.default
|
|
97
|
+
},
|
|
95
98
|
slotProps: {
|
|
96
99
|
textField: {
|
|
97
100
|
variant: "outlined",
|
|
98
101
|
fullWidth: true,
|
|
99
102
|
error: isTouched && Boolean(fieldError),
|
|
100
103
|
helperText: isTouched && fieldError ? fieldError : void 0,
|
|
101
|
-
sx: textFieldSx
|
|
102
|
-
openPickerIcon: CalendarMonthIcon__default.default
|
|
104
|
+
sx: textFieldSx
|
|
103
105
|
}
|
|
104
106
|
},
|
|
105
107
|
...otherProps
|
|
@@ -677,25 +679,30 @@ function AppSwitchInput({
|
|
|
677
679
|
material.Box,
|
|
678
680
|
{
|
|
679
681
|
className,
|
|
680
|
-
sx: [
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
682
|
+
sx: [
|
|
683
|
+
{
|
|
684
|
+
display: "flex",
|
|
685
|
+
flexDirection: labelPlacement === "start" || labelPlacement === "end" ? "row" : "column",
|
|
686
|
+
alignItems: labelPlacement === "start" || labelPlacement === "end" ? "center" : "flex-start",
|
|
687
|
+
justifyContent: labelPlacement === "start" || labelPlacement === "end" ? "space-between" : "center",
|
|
688
|
+
gap: 1,
|
|
689
|
+
my: 1,
|
|
690
|
+
...containerSx
|
|
691
|
+
},
|
|
692
|
+
sx
|
|
693
|
+
],
|
|
689
694
|
children: [
|
|
690
695
|
label && /* @__PURE__ */ jsxRuntime.jsx(
|
|
691
696
|
material.Typography,
|
|
692
697
|
{
|
|
693
698
|
variant: "body2",
|
|
694
|
-
sx: [
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
+
sx: [
|
|
700
|
+
{
|
|
701
|
+
color: "text.primary",
|
|
702
|
+
order: labelPlacement === "start" ? 0 : 1,
|
|
703
|
+
...labelSx
|
|
704
|
+
}
|
|
705
|
+
],
|
|
699
706
|
children: label
|
|
700
707
|
}
|
|
701
708
|
),
|
|
@@ -708,25 +715,27 @@ function AppSwitchInput({
|
|
|
708
715
|
onChange: () => {
|
|
709
716
|
setFieldValue(name, !values[name], true);
|
|
710
717
|
},
|
|
711
|
-
sx: [
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
718
|
+
sx: [
|
|
719
|
+
{
|
|
720
|
+
"& .MuiSwitch-switchBase": {
|
|
721
|
+
color: "text.secondary",
|
|
722
|
+
"&.Mui-checked": {
|
|
723
|
+
color: "primary.main",
|
|
724
|
+
"& + .MuiSwitch-track": {
|
|
725
|
+
backgroundColor: "primary.main",
|
|
726
|
+
opacity: 0.5
|
|
727
|
+
}
|
|
728
|
+
},
|
|
729
|
+
"&.Mui-disabled": {
|
|
730
|
+
color: "action.disabled",
|
|
731
|
+
"& + .MuiSwitch-track": {
|
|
732
|
+
backgroundColor: "action.disabledBackground"
|
|
733
|
+
}
|
|
719
734
|
}
|
|
720
735
|
},
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
backgroundColor: "action.disabledBackground"
|
|
725
|
-
}
|
|
726
|
-
}
|
|
727
|
-
},
|
|
728
|
-
...switchSx
|
|
729
|
-
}],
|
|
736
|
+
...switchSx
|
|
737
|
+
}
|
|
738
|
+
],
|
|
730
739
|
...otherProps
|
|
731
740
|
}
|
|
732
741
|
),
|
|
@@ -734,12 +743,14 @@ function AppSwitchInput({
|
|
|
734
743
|
material.Typography,
|
|
735
744
|
{
|
|
736
745
|
variant: "caption",
|
|
737
|
-
sx: [
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
746
|
+
sx: [
|
|
747
|
+
{
|
|
748
|
+
color: "error.main",
|
|
749
|
+
display: "block",
|
|
750
|
+
mt: 0.5,
|
|
751
|
+
...errorSx
|
|
752
|
+
}
|
|
753
|
+
],
|
|
743
754
|
gutterBottom: true,
|
|
744
755
|
children: fieldError
|
|
745
756
|
}
|
|
@@ -771,21 +782,26 @@ function AppSwitch({
|
|
|
771
782
|
alignItems: labelPlacement === "start" || labelPlacement === "end" ? "center" : "flex-start",
|
|
772
783
|
justifyContent: labelPlacement === "start" || labelPlacement === "end" ? "space-between" : "center",
|
|
773
784
|
spacing: 1,
|
|
774
|
-
sx: [
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
785
|
+
sx: [
|
|
786
|
+
{
|
|
787
|
+
width: "100%",
|
|
788
|
+
...labelPlacement === "top" || labelPlacement === "bottom" ? { alignItems: "flex-start" } : {},
|
|
789
|
+
...containerSx
|
|
790
|
+
},
|
|
791
|
+
sx
|
|
792
|
+
],
|
|
779
793
|
children: [
|
|
780
794
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
781
795
|
material.Typography,
|
|
782
796
|
{
|
|
783
797
|
variant: "body2",
|
|
784
|
-
sx: [
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
798
|
+
sx: [
|
|
799
|
+
{
|
|
800
|
+
color: "text.primary",
|
|
801
|
+
order: labelPlacement === "start" ? 0 : 1,
|
|
802
|
+
...labelSx
|
|
803
|
+
}
|
|
804
|
+
],
|
|
789
805
|
children: label
|
|
790
806
|
}
|
|
791
807
|
),
|
|
@@ -797,25 +813,27 @@ function AppSwitch({
|
|
|
797
813
|
onChange: () => {
|
|
798
814
|
setFieldValue(name, !fieldValue, true);
|
|
799
815
|
},
|
|
800
|
-
sx: [
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
816
|
+
sx: [
|
|
817
|
+
{
|
|
818
|
+
"& .MuiSwitch-switchBase": {
|
|
819
|
+
color: "text.secondary",
|
|
820
|
+
"&.Mui-checked": {
|
|
821
|
+
color: "primary.main",
|
|
822
|
+
"& + .MuiSwitch-track": {
|
|
823
|
+
backgroundColor: "primary.main",
|
|
824
|
+
opacity: 0.5
|
|
825
|
+
}
|
|
826
|
+
},
|
|
827
|
+
"&.Mui-disabled": {
|
|
828
|
+
color: "action.disabled",
|
|
829
|
+
"& + .MuiSwitch-track": {
|
|
830
|
+
backgroundColor: "action.disabledBackground"
|
|
831
|
+
}
|
|
808
832
|
}
|
|
809
833
|
},
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
backgroundColor: "action.disabledBackground"
|
|
814
|
-
}
|
|
815
|
-
}
|
|
816
|
-
},
|
|
817
|
-
...switchSx
|
|
818
|
-
}],
|
|
834
|
+
...switchSx
|
|
835
|
+
}
|
|
836
|
+
],
|
|
819
837
|
...otherProps
|
|
820
838
|
}
|
|
821
839
|
),
|
|
@@ -823,12 +841,14 @@ function AppSwitch({
|
|
|
823
841
|
material.Typography,
|
|
824
842
|
{
|
|
825
843
|
variant: "caption",
|
|
826
|
-
sx: [
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
844
|
+
sx: [
|
|
845
|
+
{
|
|
846
|
+
color: "error.main",
|
|
847
|
+
display: "block",
|
|
848
|
+
mt: 0.5,
|
|
849
|
+
...errorSx
|
|
850
|
+
}
|
|
851
|
+
],
|
|
832
852
|
gutterBottom: true,
|
|
833
853
|
children: fieldError
|
|
834
854
|
}
|