@pdg/react-form 1.0.142 → 1.0.143

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 (6) hide show
  1. package/dist/FormLayout/FormBody/FormBody.types.d.ts +2 -1
  2. package/dist/FormLayout/FormCol/FormCol.types.d.ts +1 -0
  3. package/dist/FormLayout/FormRow/FormRow.types.d.ts +1 -0
  4. package/dist/index.esm.js +33 -11
  5. package/dist/index.js +33 -11
  6. package/package.json +1 -1
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;
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;
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.143",
5
5
  "description": "React Form",
6
6
  "type": "module",
7
7
  "types": "dist/index.d.ts",