@pdg/react-form 1.0.142 → 1.0.144

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 (7) hide show
  1. package/dist/FormItemCustom/FormCheckbox/FormCheckbox.types.d.ts +1 -1
  2. package/dist/FormLayout/FormBody/FormBody.types.d.ts +2 -1
  3. package/dist/FormLayout/FormCol/FormCol.types.d.ts +1 -0
  4. package/dist/FormLayout/FormRow/FormRow.types.d.ts +1 -0
  5. package/dist/index.esm.js +46 -21
  6. package/dist/index.js +46 -21
  7. package/package.json +1 -1
package/dist/FormItemCustom/FormCheckbox/FormCheckbox.types.d.ts CHANGED
@@ -11,5 +11,5 @@ export interface FormCheckboxProps extends CommonSxProps, Omit<CheckboxProps, 's
11
11
  text?: ReactNode;
12
12
  inputRef?: RefObject<HTMLInputElement>;
13
13
  action?: RefObject<ButtonBaseActions>;
14
- onChange?(checked: boolean): void;
14
+ onChange?(checked: boolean, notFireOnChange?: boolean): void;
15
15
  }
package/dist/FormLayout/FormBody/FormBody.types.d.ts CHANGED
@@ -1,5 +1,6 @@
1
- import { ReactNode } from 'react';
1
+ import { CSSProperties, ReactNode } from 'react';
2
2
  export interface FormBodyProps {
3
3
  children?: ReactNode;
4
4
  hidden?: boolean;
5
+ style?: CSSProperties;
5
6
  }
package/dist/FormLayout/FormCol/FormCol.types.d.ts CHANGED
@@ -9,4 +9,5 @@ export interface FormColProps extends CommonSxProps, PartialPick<FormContextValu
9
9
  helperText?: ReactNode;
10
10
  helperTextShift?: boolean;
11
11
  gap?: number;
12
+ fullHeight?: boolean;
12
13
  }
package/dist/FormLayout/FormRow/FormRow.types.d.ts CHANGED
@@ -4,6 +4,7 @@ import { PartialPick, CommonSxProps } from '../../@types';
4
4
  import { FormContextValue } from '../../FormContext';
5
5
  import { FormDividerProps } from '../FormDivider';
6
6
  export interface FormRowProps extends CommonSxProps, PartialPick<FormContextValue, 'variant' | 'size' | 'color' | 'spacing' | 'focused' | 'labelShrink' | 'fullWidth'>, PartialPick<FormDividerProps, 'icon' | 'label' | 'line' | 'lineVerticalMargin' | 'hidden' | 'warning'>, PartialPick<FormHelperTextProps, 'error'> {
7
+ fullHeight?: boolean;
7
8
  helperText?: ReactNode;
8
9
  }
9
10
  export interface FormColsInRowMap {
package/dist/index.esm.js CHANGED
@@ -834,7 +834,7 @@ var templateObject_1$g;var FormRow = React.forwardRef(function (_a, ref) {
834
834
  * ******************************************************************************************************************/
835
835
  var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initSpacing = _a.spacing, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth,
836
836
  //----------------------------------------------------------------------------------------------------------------
837
- icon = _a.icon, label = _a.label, line = _a.line, lineVerticalMargin = _a.lineVerticalMargin,
837
+ icon = _a.icon, label = _a.label, line = _a.line, lineVerticalMargin = _a.lineVerticalMargin, fullHeight = _a.fullHeight,
838
838
  //----------------------------------------------------------------------------------------------------------------
839
839
  hidden = _a.hidden, error = _a.error, warning = _a.warning, helperText = _a.helperText,
840
840
  //----------------------------------------------------------------------------------------------------------------
@@ -863,8 +863,11 @@ var templateObject_1$g;var FormRow = React.forwardRef(function (_a, ref) {
863
863
  if (hidden) {
864
864
  style.display = 'none';
865
865
  }
866
+ if (fullHeight) {
867
+ style.height = '100%';
868
+ }
866
869
  return style;
867
- }, [hidden, initStyle]);
870
+ }, [fullHeight, hidden, initStyle]);
868
871
  /********************************************************************************************************************
869
872
  * Function - makeFormColXs
870
873
  * ******************************************************************************************************************/
@@ -897,10 +900,10 @@ var templateObject_1$g;var FormRow = React.forwardRef(function (_a, ref) {
897
900
  * ******************************************************************************************************************/
898
901
  return (React.createElement(FormContextProvider, { value: __assign(__assign({}, otherFormState), { variant: variant, size: size, color: color, spacing: spacing, focused: focused, labelShrink: labelShrink, fullWidth: fullWidth, formColAutoXs: formColAutoXs, onAddFormCol: handleAddFormCol, onRemoveFormCol: handleRemoveFormCol }) },
899
902
  React.createElement(Grid, { ref: ref, size: { xs: 12 }, className: classNames(className, 'FormRow'), style: style, sx: sx },
900
- React.createElement(Grid, { container: true, spacing: spacing },
903
+ React.createElement(Grid, { container: true, spacing: spacing, style: fullHeight ? { height: '100%' } : undefined },
901
904
  (icon || label || line) && (React.createElement(FormDivider, { className: classNames(className, 'FormRow-header'), size: size, icon: icon, color: color, label: label, line: line, error: error, warning: warning, lineVerticalMargin: lineVerticalMargin, hidden: hidden })),
902
- React.createElement(StyledWrapGrid, { size: { xs: 12 }, className: 'FormRow-body' },
903
- React.createElement(Grid, { className: 'FormRow-content', container: true, spacing: spacing, direction: 'row', style: { flexWrap: 'nowrap' } }, children),
905
+ React.createElement(StyledWrapGrid, { size: { xs: 12 }, className: 'FormRow-body', style: fullHeight ? { height: '100%' } : undefined },
906
+ React.createElement(Grid, { className: 'FormRow-content', container: true, spacing: spacing, direction: 'row', style: { flexWrap: 'nowrap', height: fullHeight ? '100%' : undefined } }, children),
904
907
  helperText && (React.createElement(FormHelperText, { className: 'FormRow-helper-text', component: 'div', error: error }, helperText)))))));
905
908
  });var StyledFormLabelContainerDiv = styled('div')(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n position: relative;\n height: 20px;\n"], ["\n position: relative;\n height: 20px;\n"])));
906
909
  var StyledFormLabel = styled(FormLabel$1)(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n position: absolute;\n left: 5px;\n top: 0;\n"], ["\n position: absolute;\n left: 5px;\n top: 0;\n"])));
@@ -909,7 +912,7 @@ var templateObject_1$f, templateObject_2$8, templateObject_3$4;var FormCol = Rea
909
912
  /********************************************************************************************************************
910
913
  * ID
911
914
  * ******************************************************************************************************************/
912
- var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initSpacing = _a.spacing, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth,
915
+ var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initSpacing = _a.spacing, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth, fullHeight = _a.fullHeight,
913
916
  //----------------------------------------------------------------------------------------------------------------
914
917
  initGap = _a.gap, icon = _a.icon, label = _a.label, hidden = _a.hidden, error = _a.error, warning = _a.warning, helperText = _a.helperText, helperTextShift = _a.helperTextShift,
915
918
  //----------------------------------------------------------------------------------------------------------------
@@ -920,7 +923,7 @@ var templateObject_1$f, templateObject_2$8, templateObject_3$4;var FormCol = Rea
920
923
  * ******************************************************************************************************************/
921
924
  var _b = useFormState(), formVariant = _b.variant, formSize = _b.size, formColor = _b.color, formSpacing = _b.spacing, formFormColGap = _b.formColGap, formFocused = _b.focused, formLabelShrink = _b.labelShrink, formFullWidth = _b.fullWidth, formColAutoXs = _b.formColAutoXs, onAddFormCol = _b.onAddFormCol, onRemoveFormCol = _b.onRemoveFormCol, otherFormState = __rest(_b, ["variant", "size", "color", "spacing", "formColGap", "focused", "labelShrink", "fullWidth", "formColAutoXs", "onAddFormCol", "onRemoveFormCol"]);
922
925
  /********************************************************************************************************************
923
- * Memo - FormState
926
+ * Variable - FormState
924
927
  * ******************************************************************************************************************/
925
928
  var variant = ifUndefined(initVariant, formVariant);
926
929
  var size = ifUndefined(initSize, formSize);
@@ -930,6 +933,19 @@ var templateObject_1$f, templateObject_2$8, templateObject_3$4;var FormCol = Rea
930
933
  var labelShrink = ifUndefined(initLabelShrink, formLabelShrink);
931
934
  var fullWidth = ifUndefined(initFullWidth, formFullWidth);
932
935
  var formColGap = ifUndefined(initGap, formFormColGap);
936
+ /********************************************************************************************************************
937
+ * Memo
938
+ * ******************************************************************************************************************/
939
+ var style = useMemo(function () {
940
+ var newStyle = __assign({}, initStyle);
941
+ if (hidden) {
942
+ newStyle.display = 'none';
943
+ }
944
+ if (fullHeight) {
945
+ newStyle.height = '100%';
946
+ }
947
+ return newStyle;
948
+ }, [fullHeight, hidden, initStyle]);
933
949
  /********************************************************************************************************************
934
950
  * ResizeDetector
935
951
  * ******************************************************************************************************************/
@@ -967,7 +983,7 @@ var templateObject_1$f, templateObject_2$8, templateObject_3$4;var FormCol = Rea
967
983
  return (React.createElement(FormContextProvider, { value: __assign(__assign({}, otherFormState), { variant: variant, size: size, color: color, spacing: spacing, focused: focused, labelShrink: labelShrink, fullWidth: fullWidth, formColGap: formColGap, formColXs: xs || formColAutoXs || 12, formColWidth: formColWidth, formColWithLabel: !!label, formColWithHelperText: !!helperText }) },
968
984
  React.createElement(Grid, { ref: function (ref) {
969
985
  gridRef.current = ref;
970
- }, size: { xs: xs || formColAutoXs || 12 }, className: classNames(className, 'FormCol', !!label && 'with-label', !!helperText && 'with-helper-text'), style: hidden ? __assign(__assign({}, initStyle), { display: 'none' }) : initStyle, sx: sx },
986
+ }, size: { xs: xs || formColAutoXs || 12 }, className: classNames(className, 'FormCol', !!label && 'with-label', !!helperText && 'with-helper-text'), style: style, sx: sx },
971
987
  React.createElement("div", null,
972
988
  label && (React.createElement("div", { className: 'FormCol-header' },
973
989
  React.createElement(StyledFormLabelContainerDiv, null,
@@ -982,7 +998,7 @@ var templateObject_1$e, templateObject_2$7;var FormBody = function (_a) {
982
998
  /********************************************************************************************************************
983
999
  * State
984
1000
  * ******************************************************************************************************************/
985
- var children = _a.children, hidden = _a.hidden;
1001
+ var children = _a.children, hidden = _a.hidden, initStyle = _a.style;
986
1002
  var _b = useFormState(), spacing = _b.spacing, fullHeight = _b.fullHeight;
987
1003
  /********************************************************************************************************************
988
1004
  * ResizeDetector
@@ -992,7 +1008,13 @@ var templateObject_1$e, templateObject_2$7;var FormBody = function (_a) {
992
1008
  /********************************************************************************************************************
993
1009
  * Style
994
1010
  * ******************************************************************************************************************/
995
- var style = useMemo(function () { return (hidden ? { display: 'none' } : undefined); }, [hidden]);
1011
+ var style = useMemo(function () {
1012
+ var newStyle = __assign({}, initStyle);
1013
+ if (hidden) {
1014
+ newStyle.display = 'none';
1015
+ }
1016
+ return newStyle;
1017
+ }, [hidden, initStyle]);
996
1018
  var contentStyle = useMemo(function () {
997
1019
  return fullHeight
998
1020
  ? {
@@ -1010,7 +1032,7 @@ var templateObject_1$e, templateObject_2$7;var FormBody = function (_a) {
1010
1032
  }
1011
1033
  : undefined, className: 'FormBody', style: style },
1012
1034
  React.createElement(StyledContentDiv, { style: contentStyle },
1013
- React.createElement(Grid, { container: true, spacing: spacing, direction: 'column' }, children))));
1035
+ React.createElement(Grid, { container: true, spacing: spacing, direction: 'column', style: fullHeight ? { height: '100%' } : undefined }, children))));
1014
1036
  };var FormFooter = function (_a) {
1015
1037
  var children = _a.children, noLine = _a.noLine, hidden = _a.hidden;
1016
1038
  var spacing = useFormState().spacing;
@@ -2641,14 +2663,17 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React.forwardRef(fu
2641
2663
  /********************************************************************************************************************
2642
2664
  * State - checked
2643
2665
  * ******************************************************************************************************************/
2644
- var _p = useAutoUpdateRefState(initChecked, useCallback(function (newChecked) { return !!newChecked; }, [])), checkedRef = _p[0], checked = _p[1], setChecked = _p[2];
2645
- useFirstSkipEffect(function () {
2666
+ var _p = useAutoUpdateRefState(initChecked, useCallback(function (newChecked) { return !!newChecked; }, [])), checkedRef = _p[0], checked = _p[1], _setChecked = _p[2];
2667
+ var updateChecked = useCallback(function (newChecked, notFireOnChange) {
2668
+ if (notFireOnChange === void 0) { notFireOnChange = false; }
2669
+ var finalChecked = _setChecked(newChecked);
2646
2670
  if (error)
2647
2671
  validate(checked);
2648
- if (onChange)
2672
+ if (!notFireOnChange && onChange)
2649
2673
  onChange(checked);
2650
2674
  onValueChange(name, checked);
2651
- }, [checked]);
2675
+ return finalChecked;
2676
+ }, [_setChecked, checked, error, name, onChange, onValueChange, validate]);
2652
2677
  /********************************************************************************************************************
2653
2678
  * Function - focus
2654
2679
  * ******************************************************************************************************************/
@@ -2675,7 +2700,7 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React.forwardRef(fu
2675
2700
  getType: function () { return 'FormCheckbox'; },
2676
2701
  getName: function () { return name; },
2677
2702
  getReset: function () { return initChecked; },
2678
- reset: function () { return setChecked(initChecked); },
2703
+ reset: function () { return updateChecked(initChecked); },
2679
2704
  getValue: function () { return valueRef.current; },
2680
2705
  setValue: setValue,
2681
2706
  getData: function () { return dataRef.current; },
@@ -2683,7 +2708,7 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React.forwardRef(fu
2683
2708
  getUncheckedValue: function () { return uncheckedValueRef.current; },
2684
2709
  setUncheckedValue: setUncheckedValue,
2685
2710
  getChecked: function () { return checkedRef.current; },
2686
- setChecked: setChecked,
2711
+ setChecked: updateChecked,
2687
2712
  isExceptValue: function () { return !!exceptValue; },
2688
2713
  isDisabled: function () { return !!disabledRef.current; },
2689
2714
  setDisabled: setDisabled,
@@ -2729,7 +2754,6 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React.forwardRef(fu
2729
2754
  onAddValueItem,
2730
2755
  onRemoveValueItem,
2731
2756
  ref,
2732
- setChecked,
2733
2757
  setData,
2734
2758
  setDisabled,
2735
2759
  setErrorErrorHelperText,
@@ -2737,6 +2761,7 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React.forwardRef(fu
2737
2761
  setUncheckedValue,
2738
2762
  setValue,
2739
2763
  uncheckedValueRef,
2764
+ updateChecked,
2740
2765
  validate,
2741
2766
  valueRef,
2742
2767
  ]);
@@ -2748,19 +2773,19 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React.forwardRef(fu
2748
2773
  e.preventDefault();
2749
2774
  }
2750
2775
  else {
2751
- setChecked(checked);
2776
+ updateChecked(checked);
2752
2777
  nextTick(function () {
2753
2778
  onValueChangeByUser(name, checked);
2754
2779
  onRequestSearchSubmit(name, checked);
2755
2780
  });
2756
2781
  }
2757
- }, [readOnly, setChecked, onValueChangeByUser, name, onRequestSearchSubmit]);
2782
+ }, [readOnly, updateChecked, onValueChangeByUser, name, onRequestSearchSubmit]);
2758
2783
  /********************************************************************************************************************
2759
2784
  * Render
2760
2785
  * ******************************************************************************************************************/
2761
2786
  return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames(className, 'FormValueItem', 'FormCheckbox'), labelIcon: labelIcon, label: label, error: error, fullWidth: fullWidth, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 2 } }, style: __assign({ width: fullWidth ? '100%' : width || 100, paddingLeft: 3 }, initStyle), sx: sx, hidden: hidden, autoSize: true, controlHeight: height || (size === 'small' ? 35 : 39), controlVerticalCenter: true, control: React.createElement(FormControlLabel, { ref: function (ref) {
2762
2787
  labelRef.current = ref;
2763
- }, control: React.createElement(Checkbox, __assign({ name: name, color: color, size: size, inputRef: initInputRef ? initInputRef : inputRef, action: initAction ? initAction : actionRef, checked: checked, checkedIcon: React.createElement(CheckBox, { color: error ? 'error' : undefined }), icon: React.createElement(CheckBoxOutlineBlank, { color: error ? 'error' : undefined }), onChange: handleChange, disabled: disabled || readOnly }, props)), label: React.createElement(Typography, { color: error ? 'error' : readOnly || disabled ? theme.palette.text.disabled : undefined, whiteSpace: 'nowrap' }, text) }) }));
2788
+ }, control: React.createElement(Checkbox, __assign({ name: name, color: color, size: size, slotProps: { input: { ref: initInputRef ? initInputRef : inputRef } }, action: initAction ? initAction : actionRef, checked: checked, checkedIcon: React.createElement(CheckBox, { color: error ? 'error' : undefined }), icon: React.createElement(CheckBoxOutlineBlank, { color: error ? 'error' : undefined }), onChange: handleChange, disabled: disabled || readOnly }, props)), label: React.createElement(Typography, { color: error ? 'error' : readOnly || disabled ? theme.palette.text.disabled : undefined, whiteSpace: 'nowrap' }, text) }) }));
2764
2789
  });
2765
2790
  FormCheckbox.displayName = 'FormCheckbox';var PADDING_LEFT = 3;
2766
2791
  var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a, ref) {
package/dist/index.js CHANGED
@@ -834,7 +834,7 @@ var templateObject_1$g;var FormRow = React.forwardRef(function (_a, ref) {
834
834
  * ******************************************************************************************************************/
835
835
  var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initSpacing = _a.spacing, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth,
836
836
  //----------------------------------------------------------------------------------------------------------------
837
- icon = _a.icon, label = _a.label, line = _a.line, lineVerticalMargin = _a.lineVerticalMargin,
837
+ icon = _a.icon, label = _a.label, line = _a.line, lineVerticalMargin = _a.lineVerticalMargin, fullHeight = _a.fullHeight,
838
838
  //----------------------------------------------------------------------------------------------------------------
839
839
  hidden = _a.hidden, error = _a.error, warning = _a.warning, helperText = _a.helperText,
840
840
  //----------------------------------------------------------------------------------------------------------------
@@ -863,8 +863,11 @@ var templateObject_1$g;var FormRow = React.forwardRef(function (_a, ref) {
863
863
  if (hidden) {
864
864
  style.display = 'none';
865
865
  }
866
+ if (fullHeight) {
867
+ style.height = '100%';
868
+ }
866
869
  return style;
867
- }, [hidden, initStyle]);
870
+ }, [fullHeight, hidden, initStyle]);
868
871
  /********************************************************************************************************************
869
872
  * Function - makeFormColXs
870
873
  * ******************************************************************************************************************/
@@ -897,10 +900,10 @@ var templateObject_1$g;var FormRow = React.forwardRef(function (_a, ref) {
897
900
  * ******************************************************************************************************************/
898
901
  return (React.createElement(FormContextProvider, { value: __assign(__assign({}, otherFormState), { variant: variant, size: size, color: color, spacing: spacing, focused: focused, labelShrink: labelShrink, fullWidth: fullWidth, formColAutoXs: formColAutoXs, onAddFormCol: handleAddFormCol, onRemoveFormCol: handleRemoveFormCol }) },
899
902
  React.createElement(material.Grid, { ref: ref, size: { xs: 12 }, className: classNames(className, 'FormRow'), style: style, sx: sx },
900
- React.createElement(material.Grid, { container: true, spacing: spacing },
903
+ React.createElement(material.Grid, { container: true, spacing: spacing, style: fullHeight ? { height: '100%' } : undefined },
901
904
  (icon || label || line) && (React.createElement(FormDivider, { className: classNames(className, 'FormRow-header'), size: size, icon: icon, color: color, label: label, line: line, error: error, warning: warning, lineVerticalMargin: lineVerticalMargin, hidden: hidden })),
902
- React.createElement(StyledWrapGrid, { size: { xs: 12 }, className: 'FormRow-body' },
903
- React.createElement(material.Grid, { className: 'FormRow-content', container: true, spacing: spacing, direction: 'row', style: { flexWrap: 'nowrap' } }, children),
905
+ React.createElement(StyledWrapGrid, { size: { xs: 12 }, className: 'FormRow-body', style: fullHeight ? { height: '100%' } : undefined },
906
+ React.createElement(material.Grid, { className: 'FormRow-content', container: true, spacing: spacing, direction: 'row', style: { flexWrap: 'nowrap', height: fullHeight ? '100%' : undefined } }, children),
904
907
  helperText && (React.createElement(material.FormHelperText, { className: 'FormRow-helper-text', component: 'div', error: error }, helperText)))))));
905
908
  });var StyledFormLabelContainerDiv = material.styled('div')(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n position: relative;\n height: 20px;\n"], ["\n position: relative;\n height: 20px;\n"])));
906
909
  var StyledFormLabel = material.styled(FormLabel$1)(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n position: absolute;\n left: 5px;\n top: 0;\n"], ["\n position: absolute;\n left: 5px;\n top: 0;\n"])));
@@ -909,7 +912,7 @@ var templateObject_1$f, templateObject_2$8, templateObject_3$4;var FormCol = Rea
909
912
  /********************************************************************************************************************
910
913
  * ID
911
914
  * ******************************************************************************************************************/
912
- var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initSpacing = _a.spacing, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth,
915
+ var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initSpacing = _a.spacing, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth, fullHeight = _a.fullHeight,
913
916
  //----------------------------------------------------------------------------------------------------------------
914
917
  initGap = _a.gap, icon = _a.icon, label = _a.label, hidden = _a.hidden, error = _a.error, warning = _a.warning, helperText = _a.helperText, helperTextShift = _a.helperTextShift,
915
918
  //----------------------------------------------------------------------------------------------------------------
@@ -920,7 +923,7 @@ var templateObject_1$f, templateObject_2$8, templateObject_3$4;var FormCol = Rea
920
923
  * ******************************************************************************************************************/
921
924
  var _b = useFormState(), formVariant = _b.variant, formSize = _b.size, formColor = _b.color, formSpacing = _b.spacing, formFormColGap = _b.formColGap, formFocused = _b.focused, formLabelShrink = _b.labelShrink, formFullWidth = _b.fullWidth, formColAutoXs = _b.formColAutoXs, onAddFormCol = _b.onAddFormCol, onRemoveFormCol = _b.onRemoveFormCol, otherFormState = __rest(_b, ["variant", "size", "color", "spacing", "formColGap", "focused", "labelShrink", "fullWidth", "formColAutoXs", "onAddFormCol", "onRemoveFormCol"]);
922
925
  /********************************************************************************************************************
923
- * Memo - FormState
926
+ * Variable - FormState
924
927
  * ******************************************************************************************************************/
925
928
  var variant = util.ifUndefined(initVariant, formVariant);
926
929
  var size = util.ifUndefined(initSize, formSize);
@@ -930,6 +933,19 @@ var templateObject_1$f, templateObject_2$8, templateObject_3$4;var FormCol = Rea
930
933
  var labelShrink = util.ifUndefined(initLabelShrink, formLabelShrink);
931
934
  var fullWidth = util.ifUndefined(initFullWidth, formFullWidth);
932
935
  var formColGap = util.ifUndefined(initGap, formFormColGap);
936
+ /********************************************************************************************************************
937
+ * Memo
938
+ * ******************************************************************************************************************/
939
+ var style = React.useMemo(function () {
940
+ var newStyle = __assign({}, initStyle);
941
+ if (hidden) {
942
+ newStyle.display = 'none';
943
+ }
944
+ if (fullHeight) {
945
+ newStyle.height = '100%';
946
+ }
947
+ return newStyle;
948
+ }, [fullHeight, hidden, initStyle]);
933
949
  /********************************************************************************************************************
934
950
  * ResizeDetector
935
951
  * ******************************************************************************************************************/
@@ -967,7 +983,7 @@ var templateObject_1$f, templateObject_2$8, templateObject_3$4;var FormCol = Rea
967
983
  return (React.createElement(FormContextProvider, { value: __assign(__assign({}, otherFormState), { variant: variant, size: size, color: color, spacing: spacing, focused: focused, labelShrink: labelShrink, fullWidth: fullWidth, formColGap: formColGap, formColXs: xs || formColAutoXs || 12, formColWidth: formColWidth, formColWithLabel: !!label, formColWithHelperText: !!helperText }) },
968
984
  React.createElement(material.Grid, { ref: function (ref) {
969
985
  gridRef.current = ref;
970
- }, size: { xs: xs || formColAutoXs || 12 }, className: classNames(className, 'FormCol', !!label && 'with-label', !!helperText && 'with-helper-text'), style: hidden ? __assign(__assign({}, initStyle), { display: 'none' }) : initStyle, sx: sx },
986
+ }, size: { xs: xs || formColAutoXs || 12 }, className: classNames(className, 'FormCol', !!label && 'with-label', !!helperText && 'with-helper-text'), style: style, sx: sx },
971
987
  React.createElement("div", null,
972
988
  label && (React.createElement("div", { className: 'FormCol-header' },
973
989
  React.createElement(StyledFormLabelContainerDiv, null,
@@ -982,7 +998,7 @@ var templateObject_1$e, templateObject_2$7;var FormBody = function (_a) {
982
998
  /********************************************************************************************************************
983
999
  * State
984
1000
  * ******************************************************************************************************************/
985
- var children = _a.children, hidden = _a.hidden;
1001
+ var children = _a.children, hidden = _a.hidden, initStyle = _a.style;
986
1002
  var _b = useFormState(), spacing = _b.spacing, fullHeight = _b.fullHeight;
987
1003
  /********************************************************************************************************************
988
1004
  * ResizeDetector
@@ -992,7 +1008,13 @@ var templateObject_1$e, templateObject_2$7;var FormBody = function (_a) {
992
1008
  /********************************************************************************************************************
993
1009
  * Style
994
1010
  * ******************************************************************************************************************/
995
- var style = React.useMemo(function () { return (hidden ? { display: 'none' } : undefined); }, [hidden]);
1011
+ var style = React.useMemo(function () {
1012
+ var newStyle = __assign({}, initStyle);
1013
+ if (hidden) {
1014
+ newStyle.display = 'none';
1015
+ }
1016
+ return newStyle;
1017
+ }, [hidden, initStyle]);
996
1018
  var contentStyle = React.useMemo(function () {
997
1019
  return fullHeight
998
1020
  ? {
@@ -1010,7 +1032,7 @@ var templateObject_1$e, templateObject_2$7;var FormBody = function (_a) {
1010
1032
  }
1011
1033
  : undefined, className: 'FormBody', style: style },
1012
1034
  React.createElement(StyledContentDiv, { style: contentStyle },
1013
- React.createElement(material.Grid, { container: true, spacing: spacing, direction: 'column' }, children))));
1035
+ React.createElement(material.Grid, { container: true, spacing: spacing, direction: 'column', style: fullHeight ? { height: '100%' } : undefined }, children))));
1014
1036
  };var FormFooter = function (_a) {
1015
1037
  var children = _a.children, noLine = _a.noLine, hidden = _a.hidden;
1016
1038
  var spacing = useFormState().spacing;
@@ -2641,14 +2663,17 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React.forwardRef(fu
2641
2663
  /********************************************************************************************************************
2642
2664
  * State - checked
2643
2665
  * ******************************************************************************************************************/
2644
- var _p = reactHook.useAutoUpdateRefState(initChecked, React.useCallback(function (newChecked) { return !!newChecked; }, [])), checkedRef = _p[0], checked = _p[1], setChecked = _p[2];
2645
- reactHook.useFirstSkipEffect(function () {
2666
+ var _p = reactHook.useAutoUpdateRefState(initChecked, React.useCallback(function (newChecked) { return !!newChecked; }, [])), checkedRef = _p[0], checked = _p[1], _setChecked = _p[2];
2667
+ var updateChecked = React.useCallback(function (newChecked, notFireOnChange) {
2668
+ if (notFireOnChange === void 0) { notFireOnChange = false; }
2669
+ var finalChecked = _setChecked(newChecked);
2646
2670
  if (error)
2647
2671
  validate(checked);
2648
- if (onChange)
2672
+ if (!notFireOnChange && onChange)
2649
2673
  onChange(checked);
2650
2674
  onValueChange(name, checked);
2651
- }, [checked]);
2675
+ return finalChecked;
2676
+ }, [_setChecked, checked, error, name, onChange, onValueChange, validate]);
2652
2677
  /********************************************************************************************************************
2653
2678
  * Function - focus
2654
2679
  * ******************************************************************************************************************/
@@ -2675,7 +2700,7 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React.forwardRef(fu
2675
2700
  getType: function () { return 'FormCheckbox'; },
2676
2701
  getName: function () { return name; },
2677
2702
  getReset: function () { return initChecked; },
2678
- reset: function () { return setChecked(initChecked); },
2703
+ reset: function () { return updateChecked(initChecked); },
2679
2704
  getValue: function () { return valueRef.current; },
2680
2705
  setValue: setValue,
2681
2706
  getData: function () { return dataRef.current; },
@@ -2683,7 +2708,7 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React.forwardRef(fu
2683
2708
  getUncheckedValue: function () { return uncheckedValueRef.current; },
2684
2709
  setUncheckedValue: setUncheckedValue,
2685
2710
  getChecked: function () { return checkedRef.current; },
2686
- setChecked: setChecked,
2711
+ setChecked: updateChecked,
2687
2712
  isExceptValue: function () { return !!exceptValue; },
2688
2713
  isDisabled: function () { return !!disabledRef.current; },
2689
2714
  setDisabled: setDisabled,
@@ -2729,7 +2754,6 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React.forwardRef(fu
2729
2754
  onAddValueItem,
2730
2755
  onRemoveValueItem,
2731
2756
  ref,
2732
- setChecked,
2733
2757
  setData,
2734
2758
  setDisabled,
2735
2759
  setErrorErrorHelperText,
@@ -2737,6 +2761,7 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React.forwardRef(fu
2737
2761
  setUncheckedValue,
2738
2762
  setValue,
2739
2763
  uncheckedValueRef,
2764
+ updateChecked,
2740
2765
  validate,
2741
2766
  valueRef,
2742
2767
  ]);
@@ -2748,19 +2773,19 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React.forwardRef(fu
2748
2773
  e.preventDefault();
2749
2774
  }
2750
2775
  else {
2751
- setChecked(checked);
2776
+ updateChecked(checked);
2752
2777
  util.nextTick(function () {
2753
2778
  onValueChangeByUser(name, checked);
2754
2779
  onRequestSearchSubmit(name, checked);
2755
2780
  });
2756
2781
  }
2757
- }, [readOnly, setChecked, onValueChangeByUser, name, onRequestSearchSubmit]);
2782
+ }, [readOnly, updateChecked, onValueChangeByUser, name, onRequestSearchSubmit]);
2758
2783
  /********************************************************************************************************************
2759
2784
  * Render
2760
2785
  * ******************************************************************************************************************/
2761
2786
  return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames(className, 'FormValueItem', 'FormCheckbox'), labelIcon: labelIcon, label: label, error: error, fullWidth: fullWidth, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 2 } }, style: __assign({ width: fullWidth ? '100%' : width || 100, paddingLeft: 3 }, initStyle), sx: sx, hidden: hidden, autoSize: true, controlHeight: height || (size === 'small' ? 35 : 39), controlVerticalCenter: true, control: React.createElement(material.FormControlLabel, { ref: function (ref) {
2762
2787
  labelRef.current = ref;
2763
- }, control: React.createElement(material.Checkbox, __assign({ name: name, color: color, size: size, inputRef: initInputRef ? initInputRef : inputRef, action: initAction ? initAction : actionRef, checked: checked, checkedIcon: React.createElement(iconsMaterial.CheckBox, { color: error ? 'error' : undefined }), icon: React.createElement(iconsMaterial.CheckBoxOutlineBlank, { color: error ? 'error' : undefined }), onChange: handleChange, disabled: disabled || readOnly }, props)), label: React.createElement(material.Typography, { color: error ? 'error' : readOnly || disabled ? theme.palette.text.disabled : undefined, whiteSpace: 'nowrap' }, text) }) }));
2788
+ }, control: React.createElement(material.Checkbox, __assign({ name: name, color: color, size: size, slotProps: { input: { ref: initInputRef ? initInputRef : inputRef } }, action: initAction ? initAction : actionRef, checked: checked, checkedIcon: React.createElement(iconsMaterial.CheckBox, { color: error ? 'error' : undefined }), icon: React.createElement(iconsMaterial.CheckBoxOutlineBlank, { color: error ? 'error' : undefined }), onChange: handleChange, disabled: disabled || readOnly }, props)), label: React.createElement(material.Typography, { color: error ? 'error' : readOnly || disabled ? theme.palette.text.disabled : undefined, whiteSpace: 'nowrap' }, text) }) }));
2764
2789
  });
2765
2790
  FormCheckbox.displayName = 'FormCheckbox';var PADDING_LEFT = 3;
2766
2791
  var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a, ref) {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pdg/react-form",
3
3
  "title": "React Form",
4
- "version": "1.0.142",
4
+ "version": "1.0.144",
5
5
  "description": "React Form",
6
6
  "type": "module",
7
7
  "types": "dist/index.d.ts",