@pdg/react-form 1.0.126 → 1.0.128

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 (3) hide show
  1. package/dist/index.esm.js +41 -69
  2. package/dist/index.js +41 -69
  3. package/package.json +1 -1
package/dist/index.esm.js CHANGED
@@ -2362,7 +2362,7 @@ FormCompanyNo.displayName = 'FormCompanyNo';var FormPersonalNo = React.forwardRe
2362
2362
  * ******************************************************************************************************************/
2363
2363
  return (React.createElement(FormText, __assign({ ref: ref, className: classNames(className, 'FormPersonalNo'), maxLength: 14, validPattern: validPattern, onValue: handleValue, onValidate: handleValidate }, props)));
2364
2364
  });
2365
- FormPersonalNo.displayName = 'FormPersonalNo';var css_248z$e = ".FormItemBase .FormItemBase-InputLabel {\n overflow: visible;\n padding-left: 5px;\n}\n.FormItemBase .FormItemBase-InputLabel.MuiInputLabel-sizeSmall {\n transform: translate(0, -1.5px) scale(0.7);\n}\n.FormItemBase .FormItemBase-Control-wrap {\n position: relative;\n}\n.FormItemBase .FormItemBase-Control {\n position: absolute;\n left: 0;\n top: 0;\n}\n.FormItemBase.variant-standard .FormItemBase-Control-wrap {\n margin-top: 16px;\n}";
2365
+ FormPersonalNo.displayName = 'FormPersonalNo';var css_248z$e = ".FormItemBase .FormItemBase-InputLabel {\n overflow: visible;\n padding-left: 5px;\n}\n.FormItemBase .FormItemBase-InputLabel.MuiInputLabel-sizeSmall {\n transform: translate(0, -1.5px) scale(0.7);\n}\n.FormItemBase.variant-standard .FormItemBase-Control-wrap {\n margin-top: 16px;\n}";
2366
2366
  styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
2367
2367
  /********************************************************************************************************************
2368
2368
  * Ref
@@ -2373,7 +2373,6 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
2373
2373
  //----------------------------------------------------------------------------------------------------------------
2374
2374
  className = _a.className, style = _a.style, sx = _a.sx;
2375
2375
  var inputRef = useRef(null);
2376
- var realControlContainerRef = useRef(null);
2377
2376
  /********************************************************************************************************************
2378
2377
  * FormState
2379
2378
  * ******************************************************************************************************************/
@@ -2398,37 +2397,9 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
2398
2397
  setInputHeight(((_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height) || 0);
2399
2398
  },
2400
2399
  });
2401
- /********************************************************************************************************************
2402
- * State - realControlHeight
2403
- * ******************************************************************************************************************/
2404
- var _d = useState(0), realControlHeight = _d[0], setRealControlHeight = _d[1];
2405
- useResizeDetector({
2406
- targetRef: realControlContainerRef,
2407
- handleWidth: false,
2408
- handleHeight: true,
2409
- onResize: function () {
2410
- var _a, _b;
2411
- setRealControlHeight(((_b = (_a = realControlContainerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height) || 0);
2412
- },
2413
- });
2414
2400
  /********************************************************************************************************************
2415
2401
  * Memo
2416
2402
  * ******************************************************************************************************************/
2417
- var bottomMargin = useMemo(function () {
2418
- var realHeight = realControlHeight || 0;
2419
- var height = controlHeight || 0;
2420
- var checkInputHeight = variant === 'standard' ? inputHeight + 16 : inputHeight;
2421
- var bottomMargin = 0;
2422
- if (height > checkInputHeight) {
2423
- bottomMargin = height - checkInputHeight;
2424
- }
2425
- else {
2426
- if (realHeight > 0 && height > 0 && realHeight > height) {
2427
- bottomMargin = realHeight - height;
2428
- }
2429
- }
2430
- return bottomMargin;
2431
- }, [variant, realControlHeight, controlHeight, inputHeight]);
2432
2403
  var controlMarginTop = useMemo(function () {
2433
2404
  var topMargin = 0;
2434
2405
  if (inputHeight && controlHeight && controlVerticalCenter) {
@@ -2478,14 +2449,17 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
2478
2449
  React.createElement(PdgIcon, { style: { verticalAlign: 'middle', marginRight: 3, marginTop: -4, marginBottom: -2 } }, labelIcon),
2479
2450
  React.createElement("span", { style: { verticalAlign: 'middle' } }, label))) : (label))),
2480
2451
  React.createElement("div", { className: 'FormItemBase-Control-wrap', style: { display: 'grid', marginTop: hideLabel ? 0 : undefined } }, autoSize ? (React.createElement(React.Fragment, null,
2481
- variant === 'standard' && (React.createElement(Input, { ref: inputRef, size: size, fullWidth: true, disabled: true, style: { visibility: 'hidden' } })),
2482
- variant === 'outlined' && (React.createElement(OutlinedInput, { ref: inputRef, size: size, fullWidth: true, disabled: true, style: { visibility: 'hidden' } })),
2483
- variant === 'filled' && (React.createElement(FilledInput, { ref: inputRef, size: size, fullWidth: true, disabled: true, style: { visibility: 'hidden' } })),
2484
- React.createElement("div", { style: { height: bottomMargin, visibility: 'hidden' } }),
2485
- React.createElement("div", { ref: realControlContainerRef, className: 'FormItemBase-Control', style: {
2452
+ variant === 'standard' && (React.createElement(Input, { ref: inputRef, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
2453
+ variant === 'outlined' && (React.createElement(OutlinedInput, { ref: inputRef, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
2454
+ variant === 'filled' && (React.createElement(FilledInput, { ref: inputRef, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
2455
+ React.createElement("div", { className: 'FormItemBase-Control', style: {
2486
2456
  width: fullWidth ? '100%' : 'auto',
2487
2457
  display: 'grid',
2488
- marginTop: controlMarginTop,
2458
+ marginTop: -inputHeight,
2459
+ height: inputHeight,
2460
+ alignItems: 'flex-start',
2461
+ paddingTop: controlMarginTop,
2462
+ position: 'relative',
2489
2463
  } }, control))) : (React.createElement("div", { style: {
2490
2464
  width: fullWidth ? '100%' : 'auto',
2491
2465
  display: 'grid',
@@ -10137,9 +10111,14 @@ FormYearRangePicker.displayName = 'FormYearRangePicker';var FormSwitch = React.f
10137
10111
  * Render
10138
10112
  * ******************************************************************************************************************/
10139
10113
  var switchControl = useMemo(function () { return (React.createElement(Switch, { size: size, name: name, checked: value, color: color, disabled: disabled, onChange: handleChange, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } })); }, [color, disabled, handleChange, initFocused, name, setFocused, size, value]);
10140
- return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames(className, 'FormValueItem', 'FormSwitch'), labelIcon: labelIcon, label: label, error: error, fullWidth: false, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 5 } }, style: style, sx: sx, hidden: hidden, autoSize: true, controlHeight: size === 'small' ? 21 : 26, controlVerticalCenter: true, control: switchLabel ? (React.createElement(FormControlLabel, { control: switchControl, label: switchLabel, disabled: disabled })) : (switchControl) }));
10114
+ return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames(className, 'FormValueItem', 'FormSwitch'), labelIcon: labelIcon, label: label, error: error, fullWidth: false, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 5 } }, style: style, sx: sx, hidden: hidden, autoSize: true, controlHeight: size === 'small' ? 24 : 38, controlVerticalCenter: true, control: switchLabel ? (React.createElement(FormControlLabel, { control: switchControl, label: switchLabel, disabled: disabled })) : (switchControl) }));
10141
10115
  });
10142
- FormSwitch.displayName = 'FormSwitch';var Search = React.forwardRef(function (_a, ref) {
10116
+ FormSwitch.displayName = 'FormSwitch';var SearchGroupRow = function (_a) {
10117
+ var children = _a.children, props = __rest(_a, ["children"]);
10118
+ return (React.createElement(FormRow, __assign({}, props),
10119
+ React.createElement(FormCol, null,
10120
+ React.createElement(Grid, { container: true, spacing: 1, alignItems: 'center' }, children))));
10121
+ };var Search = React.forwardRef(function (_a, ref) {
10143
10122
  /********************************************************************************************************************
10144
10123
  * Ref
10145
10124
  * ******************************************************************************************************************/
@@ -10159,31 +10138,29 @@ FormSwitch.displayName = 'FormSwitch';var Search = React.forwardRef(function (_a
10159
10138
  }
10160
10139
  // eslint-disable-next-line react-hooks/exhaustive-deps
10161
10140
  }, []);
10162
- // /********************************************************************************************************************
10163
- // * Memo
10164
- // * ******************************************************************************************************************/
10165
- //
10166
- // const renderChildren = useMemo(() => {
10167
- // ll('children changed');
10168
- // const rowItems: ReactNode[] = [];
10169
- // const basicRowItems: ReactNode[] = [];
10170
- //
10171
- // React.Children.forEach(children, (child) => {
10172
- // if (React.isValidElement(child)) {
10173
- // if (child.type.toString() === SearchGroupRow.toString()) {
10174
- // rowItems.push(child);
10175
- // } else {
10176
- // basicRowItems.push(child);
10177
- // }
10178
- // }
10179
- // });
10180
- //
10181
- // if (basicRowItems.length > 0) {
10182
- // return [<SearchGroupRow key='$basicRow$'>{basicRowItems}</SearchGroupRow>, ...rowItems];
10183
- // } else {
10184
- // return rowItems;
10185
- // }
10186
- // }, [children]);
10141
+ /********************************************************************************************************************
10142
+ * Memo
10143
+ * ******************************************************************************************************************/
10144
+ var renderChildren = useMemo(function () {
10145
+ var rowItems = [];
10146
+ var basicRowItems = [];
10147
+ React.Children.forEach(children, function (child) {
10148
+ if (React.isValidElement(child)) {
10149
+ if (child.type.toString() === SearchGroupRow.toString()) {
10150
+ rowItems.push(child);
10151
+ }
10152
+ else {
10153
+ basicRowItems.push(child);
10154
+ }
10155
+ }
10156
+ });
10157
+ if (basicRowItems.length > 0) {
10158
+ return __spreadArray([React.createElement(SearchGroupRow, { key: '$basicRow$' }, basicRowItems)], rowItems, true);
10159
+ }
10160
+ else {
10161
+ return rowItems;
10162
+ }
10163
+ }, [children]);
10187
10164
  /********************************************************************************************************************
10188
10165
  * FormContextValue
10189
10166
  * ******************************************************************************************************************/
@@ -10233,7 +10210,7 @@ FormSwitch.displayName = 'FormSwitch';var Search = React.forwardRef(function (_a
10233
10210
  return (React.createElement(FormContextProvider, { value: formContextValue },
10234
10211
  React.createElement(Paper, { variant: 'outlined', className: className, sx: __assign({ p: 1.5 }, sx), style: style },
10235
10212
  React.createElement(Form, __assign({ ref: handleRef, className: 'Search', variant: 'outlined', size: 'small', color: color, spacing: spacing, focused: focused, labelShrink: labelShrink, fullWidth: false }, otherProps),
10236
- React.createElement(FormBody, null, children)))));
10213
+ React.createElement(FormBody, null, renderChildren)))));
10237
10214
  });var StyledItem = styled(Grid)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n &:has(> [style*='display: none;']) {\n display: none;\n }\n"], ["\n &:has(> [style*='display: none;']) {\n display: none;\n }\n"])));
10238
10215
  var templateObject_1;var isReactFragment = function (child) {
10239
10216
  try {
@@ -10372,9 +10349,4 @@ var SearchButton$1 = React.memo(SearchButton);var SearchMenuButton = function (_
10372
10349
  return (React.createElement(React.Fragment, null,
10373
10350
  React.createElement(FormButton$1, __assign({ className: classNames(className, 'SearchMenuButton'), size: 'medium', sx: __assign({ minWidth: 0, px: "".concat(!children ? 9 : 13, "px !important") }, initSx), fullWidth: false }, props, { id: buttonId, "aria-controls": open ? menuId : undefined, "aria-haspopup": 'true', "aria-expanded": open ? 'true' : undefined, endIcon: endIcon, endIconProps: { style: { marginRight: -5 } }, onClick: handleClick }), children),
10374
10351
  React.createElement(Menu, { id: menuId, "aria-labelledby": buttonId, anchorEl: anchorEl, open: open, onClose: handleClose, onClick: handleClose, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin }, menuList)));
10375
- };var SearchGroupRow = function (_a) {
10376
- var children = _a.children, props = __rest(_a, ["children"]);
10377
- return (React.createElement(FormRow, __assign({}, props),
10378
- React.createElement(FormCol, null,
10379
- React.createElement(Grid, { container: true, spacing: 1, alignItems: 'center' }, children))));
10380
10352
  };export{Form,FormAutocomplete,FormBlock,FormBody,FormButton$1 as FormButton,FormCheckbox,FormCol,FormCompanyNo,FormContext,FormContextDefaultValue,FormContextProvider,FormDatePicker,FormDateRangePicker,FormDateTimePicker,FormDivider,FormEmail,FormFile,FormFooter,FormHidden,FormImageFile,FormLabel$1 as FormLabel,FormMobile,FormMonthPicker,FormMonthRangePicker,FormNumber,FormPassword,FormPersonalNo,FormRadioGroup,FormRating,FormRow,FormSearch,FormSelect,FormSwitch,FormTag,FormTel,FormText,FormTextEditor,FormTextField,FormTextarea,FormTimePicker,FormToggleButtonGroup,FormUrl,FormYearPicker,FormYearRangePicker,Search,SearchButton$1 as SearchButton,SearchGroup,SearchGroupRow,SearchMenuButton,useFormState};
package/dist/index.js CHANGED
@@ -2362,7 +2362,7 @@ FormCompanyNo.displayName = 'FormCompanyNo';var FormPersonalNo = React.forwardRe
2362
2362
  * ******************************************************************************************************************/
2363
2363
  return (React.createElement(FormText, __assign({ ref: ref, className: classNames(className, 'FormPersonalNo'), maxLength: 14, validPattern: validPattern, onValue: handleValue, onValidate: handleValidate }, props)));
2364
2364
  });
2365
- FormPersonalNo.displayName = 'FormPersonalNo';var css_248z$e = ".FormItemBase .FormItemBase-InputLabel {\n overflow: visible;\n padding-left: 5px;\n}\n.FormItemBase .FormItemBase-InputLabel.MuiInputLabel-sizeSmall {\n transform: translate(0, -1.5px) scale(0.7);\n}\n.FormItemBase .FormItemBase-Control-wrap {\n position: relative;\n}\n.FormItemBase .FormItemBase-Control {\n position: absolute;\n left: 0;\n top: 0;\n}\n.FormItemBase.variant-standard .FormItemBase-Control-wrap {\n margin-top: 16px;\n}";
2365
+ FormPersonalNo.displayName = 'FormPersonalNo';var css_248z$e = ".FormItemBase .FormItemBase-InputLabel {\n overflow: visible;\n padding-left: 5px;\n}\n.FormItemBase .FormItemBase-InputLabel.MuiInputLabel-sizeSmall {\n transform: translate(0, -1.5px) scale(0.7);\n}\n.FormItemBase.variant-standard .FormItemBase-Control-wrap {\n margin-top: 16px;\n}";
2366
2366
  styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
2367
2367
  /********************************************************************************************************************
2368
2368
  * Ref
@@ -2373,7 +2373,6 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
2373
2373
  //----------------------------------------------------------------------------------------------------------------
2374
2374
  className = _a.className, style = _a.style, sx = _a.sx;
2375
2375
  var inputRef = React.useRef(null);
2376
- var realControlContainerRef = React.useRef(null);
2377
2376
  /********************************************************************************************************************
2378
2377
  * FormState
2379
2378
  * ******************************************************************************************************************/
@@ -2398,37 +2397,9 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
2398
2397
  setInputHeight(((_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height) || 0);
2399
2398
  },
2400
2399
  });
2401
- /********************************************************************************************************************
2402
- * State - realControlHeight
2403
- * ******************************************************************************************************************/
2404
- var _d = React.useState(0), realControlHeight = _d[0], setRealControlHeight = _d[1];
2405
- reactResizeDetector.useResizeDetector({
2406
- targetRef: realControlContainerRef,
2407
- handleWidth: false,
2408
- handleHeight: true,
2409
- onResize: function () {
2410
- var _a, _b;
2411
- setRealControlHeight(((_b = (_a = realControlContainerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height) || 0);
2412
- },
2413
- });
2414
2400
  /********************************************************************************************************************
2415
2401
  * Memo
2416
2402
  * ******************************************************************************************************************/
2417
- var bottomMargin = React.useMemo(function () {
2418
- var realHeight = realControlHeight || 0;
2419
- var height = controlHeight || 0;
2420
- var checkInputHeight = variant === 'standard' ? inputHeight + 16 : inputHeight;
2421
- var bottomMargin = 0;
2422
- if (height > checkInputHeight) {
2423
- bottomMargin = height - checkInputHeight;
2424
- }
2425
- else {
2426
- if (realHeight > 0 && height > 0 && realHeight > height) {
2427
- bottomMargin = realHeight - height;
2428
- }
2429
- }
2430
- return bottomMargin;
2431
- }, [variant, realControlHeight, controlHeight, inputHeight]);
2432
2403
  var controlMarginTop = React.useMemo(function () {
2433
2404
  var topMargin = 0;
2434
2405
  if (inputHeight && controlHeight && controlVerticalCenter) {
@@ -2478,14 +2449,17 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
2478
2449
  React.createElement(reactComponent.PdgIcon, { style: { verticalAlign: 'middle', marginRight: 3, marginTop: -4, marginBottom: -2 } }, labelIcon),
2479
2450
  React.createElement("span", { style: { verticalAlign: 'middle' } }, label))) : (label))),
2480
2451
  React.createElement("div", { className: 'FormItemBase-Control-wrap', style: { display: 'grid', marginTop: hideLabel ? 0 : undefined } }, autoSize ? (React.createElement(React.Fragment, null,
2481
- variant === 'standard' && (React.createElement(material.Input, { ref: inputRef, size: size, fullWidth: true, disabled: true, style: { visibility: 'hidden' } })),
2482
- variant === 'outlined' && (React.createElement(material.OutlinedInput, { ref: inputRef, size: size, fullWidth: true, disabled: true, style: { visibility: 'hidden' } })),
2483
- variant === 'filled' && (React.createElement(material.FilledInput, { ref: inputRef, size: size, fullWidth: true, disabled: true, style: { visibility: 'hidden' } })),
2484
- React.createElement("div", { style: { height: bottomMargin, visibility: 'hidden' } }),
2485
- React.createElement("div", { ref: realControlContainerRef, className: 'FormItemBase-Control', style: {
2452
+ variant === 'standard' && (React.createElement(material.Input, { ref: inputRef, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
2453
+ variant === 'outlined' && (React.createElement(material.OutlinedInput, { ref: inputRef, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
2454
+ variant === 'filled' && (React.createElement(material.FilledInput, { ref: inputRef, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
2455
+ React.createElement("div", { className: 'FormItemBase-Control', style: {
2486
2456
  width: fullWidth ? '100%' : 'auto',
2487
2457
  display: 'grid',
2488
- marginTop: controlMarginTop,
2458
+ marginTop: -inputHeight,
2459
+ height: inputHeight,
2460
+ alignItems: 'flex-start',
2461
+ paddingTop: controlMarginTop,
2462
+ position: 'relative',
2489
2463
  } }, control))) : (React.createElement("div", { style: {
2490
2464
  width: fullWidth ? '100%' : 'auto',
2491
2465
  display: 'grid',
@@ -10137,9 +10111,14 @@ FormYearRangePicker.displayName = 'FormYearRangePicker';var FormSwitch = React.f
10137
10111
  * Render
10138
10112
  * ******************************************************************************************************************/
10139
10113
  var switchControl = React.useMemo(function () { return (React.createElement(material.Switch, { size: size, name: name, checked: value, color: color, disabled: disabled, onChange: handleChange, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } })); }, [color, disabled, handleChange, initFocused, name, setFocused, size, value]);
10140
- return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames(className, 'FormValueItem', 'FormSwitch'), labelIcon: labelIcon, label: label, error: error, fullWidth: false, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 5 } }, style: style, sx: sx, hidden: hidden, autoSize: true, controlHeight: size === 'small' ? 21 : 26, controlVerticalCenter: true, control: switchLabel ? (React.createElement(material.FormControlLabel, { control: switchControl, label: switchLabel, disabled: disabled })) : (switchControl) }));
10114
+ return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames(className, 'FormValueItem', 'FormSwitch'), labelIcon: labelIcon, label: label, error: error, fullWidth: false, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 5 } }, style: style, sx: sx, hidden: hidden, autoSize: true, controlHeight: size === 'small' ? 24 : 38, controlVerticalCenter: true, control: switchLabel ? (React.createElement(material.FormControlLabel, { control: switchControl, label: switchLabel, disabled: disabled })) : (switchControl) }));
10141
10115
  });
10142
- FormSwitch.displayName = 'FormSwitch';var Search = React.forwardRef(function (_a, ref) {
10116
+ FormSwitch.displayName = 'FormSwitch';var SearchGroupRow = function (_a) {
10117
+ var children = _a.children, props = __rest(_a, ["children"]);
10118
+ return (React.createElement(FormRow, __assign({}, props),
10119
+ React.createElement(FormCol, null,
10120
+ React.createElement(material.Grid, { container: true, spacing: 1, alignItems: 'center' }, children))));
10121
+ };var Search = React.forwardRef(function (_a, ref) {
10143
10122
  /********************************************************************************************************************
10144
10123
  * Ref
10145
10124
  * ******************************************************************************************************************/
@@ -10159,31 +10138,29 @@ FormSwitch.displayName = 'FormSwitch';var Search = React.forwardRef(function (_a
10159
10138
  }
10160
10139
  // eslint-disable-next-line react-hooks/exhaustive-deps
10161
10140
  }, []);
10162
- // /********************************************************************************************************************
10163
- // * Memo
10164
- // * ******************************************************************************************************************/
10165
- //
10166
- // const renderChildren = useMemo(() => {
10167
- // ll('children changed');
10168
- // const rowItems: ReactNode[] = [];
10169
- // const basicRowItems: ReactNode[] = [];
10170
- //
10171
- // React.Children.forEach(children, (child) => {
10172
- // if (React.isValidElement(child)) {
10173
- // if (child.type.toString() === SearchGroupRow.toString()) {
10174
- // rowItems.push(child);
10175
- // } else {
10176
- // basicRowItems.push(child);
10177
- // }
10178
- // }
10179
- // });
10180
- //
10181
- // if (basicRowItems.length > 0) {
10182
- // return [<SearchGroupRow key='$basicRow$'>{basicRowItems}</SearchGroupRow>, ...rowItems];
10183
- // } else {
10184
- // return rowItems;
10185
- // }
10186
- // }, [children]);
10141
+ /********************************************************************************************************************
10142
+ * Memo
10143
+ * ******************************************************************************************************************/
10144
+ var renderChildren = React.useMemo(function () {
10145
+ var rowItems = [];
10146
+ var basicRowItems = [];
10147
+ React.Children.forEach(children, function (child) {
10148
+ if (React.isValidElement(child)) {
10149
+ if (child.type.toString() === SearchGroupRow.toString()) {
10150
+ rowItems.push(child);
10151
+ }
10152
+ else {
10153
+ basicRowItems.push(child);
10154
+ }
10155
+ }
10156
+ });
10157
+ if (basicRowItems.length > 0) {
10158
+ return __spreadArray([React.createElement(SearchGroupRow, { key: '$basicRow$' }, basicRowItems)], rowItems, true);
10159
+ }
10160
+ else {
10161
+ return rowItems;
10162
+ }
10163
+ }, [children]);
10187
10164
  /********************************************************************************************************************
10188
10165
  * FormContextValue
10189
10166
  * ******************************************************************************************************************/
@@ -10233,7 +10210,7 @@ FormSwitch.displayName = 'FormSwitch';var Search = React.forwardRef(function (_a
10233
10210
  return (React.createElement(FormContextProvider, { value: formContextValue },
10234
10211
  React.createElement(material.Paper, { variant: 'outlined', className: className, sx: __assign({ p: 1.5 }, sx), style: style },
10235
10212
  React.createElement(Form, __assign({ ref: handleRef, className: 'Search', variant: 'outlined', size: 'small', color: color, spacing: spacing, focused: focused, labelShrink: labelShrink, fullWidth: false }, otherProps),
10236
- React.createElement(FormBody, null, children)))));
10213
+ React.createElement(FormBody, null, renderChildren)))));
10237
10214
  });var StyledItem = material.styled(material.Grid)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n &:has(> [style*='display: none;']) {\n display: none;\n }\n"], ["\n &:has(> [style*='display: none;']) {\n display: none;\n }\n"])));
10238
10215
  var templateObject_1;var isReactFragment = function (child) {
10239
10216
  try {
@@ -10372,9 +10349,4 @@ var SearchButton$1 = React.memo(SearchButton);var SearchMenuButton = function (_
10372
10349
  return (React.createElement(React.Fragment, null,
10373
10350
  React.createElement(FormButton$1, __assign({ className: classNames(className, 'SearchMenuButton'), size: 'medium', sx: __assign({ minWidth: 0, px: "".concat(!children ? 9 : 13, "px !important") }, initSx), fullWidth: false }, props, { id: buttonId, "aria-controls": open ? menuId : undefined, "aria-haspopup": 'true', "aria-expanded": open ? 'true' : undefined, endIcon: endIcon, endIconProps: { style: { marginRight: -5 } }, onClick: handleClick }), children),
10374
10351
  React.createElement(material.Menu, { id: menuId, "aria-labelledby": buttonId, anchorEl: anchorEl, open: open, onClose: handleClose, onClick: handleClose, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin }, menuList)));
10375
- };var SearchGroupRow = function (_a) {
10376
- var children = _a.children, props = __rest(_a, ["children"]);
10377
- return (React.createElement(FormRow, __assign({}, props),
10378
- React.createElement(FormCol, null,
10379
- React.createElement(material.Grid, { container: true, spacing: 1, alignItems: 'center' }, children))));
10380
10352
  };exports.Form=Form;exports.FormAutocomplete=FormAutocomplete;exports.FormBlock=FormBlock;exports.FormBody=FormBody;exports.FormButton=FormButton$1;exports.FormCheckbox=FormCheckbox;exports.FormCol=FormCol;exports.FormCompanyNo=FormCompanyNo;exports.FormContext=FormContext;exports.FormContextDefaultValue=FormContextDefaultValue;exports.FormContextProvider=FormContextProvider;exports.FormDatePicker=FormDatePicker;exports.FormDateRangePicker=FormDateRangePicker;exports.FormDateTimePicker=FormDateTimePicker;exports.FormDivider=FormDivider;exports.FormEmail=FormEmail;exports.FormFile=FormFile;exports.FormFooter=FormFooter;exports.FormHidden=FormHidden;exports.FormImageFile=FormImageFile;exports.FormLabel=FormLabel$1;exports.FormMobile=FormMobile;exports.FormMonthPicker=FormMonthPicker;exports.FormMonthRangePicker=FormMonthRangePicker;exports.FormNumber=FormNumber;exports.FormPassword=FormPassword;exports.FormPersonalNo=FormPersonalNo;exports.FormRadioGroup=FormRadioGroup;exports.FormRating=FormRating;exports.FormRow=FormRow;exports.FormSearch=FormSearch;exports.FormSelect=FormSelect;exports.FormSwitch=FormSwitch;exports.FormTag=FormTag;exports.FormTel=FormTel;exports.FormText=FormText;exports.FormTextEditor=FormTextEditor;exports.FormTextField=FormTextField;exports.FormTextarea=FormTextarea;exports.FormTimePicker=FormTimePicker;exports.FormToggleButtonGroup=FormToggleButtonGroup;exports.FormUrl=FormUrl;exports.FormYearPicker=FormYearPicker;exports.FormYearRangePicker=FormYearRangePicker;exports.Search=Search;exports.SearchButton=SearchButton$1;exports.SearchGroup=SearchGroup;exports.SearchGroupRow=SearchGroupRow;exports.SearchMenuButton=SearchMenuButton;exports.useFormState=useFormState;
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.126",
4
+ "version": "1.0.128",
5
5
  "description": "React Form",
6
6
  "type": "module",
7
7
  "types": "dist/index.d.ts",