@pdg/react-form 1.2.8 → 1.2.10

package/dist/PFormLayout/PFormBlock/PFormBlock.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { PFormBlockProps as Props } from './PFormBlock.types';
-declare const PFormBlock: ({ ref, variant: initVariant, size: initSize, color: initColor, spacing: initSpacing, focused: initFocused, labelShrink: initLabelShrink, fullWidth: initFullWidth, icon, label, line, lineVerticalMargin, error, warning, hidden, collapse, collapseIn: initCollapseIn, children, className, style: initStyle, sx, }: Props) => React.JSX.Element;
+declare const PFormBlock: ({ ref, variant: initVariant, size: initSize, color: initColor, spacing: initSpacing, focused: initFocused, labelShrink: initLabelShrink, fullWidth: initFullWidth, icon, label, line, lineVerticalMargin, error, warning, endAdornment, hidden, collapse, collapseIn: initCollapseIn, children, className, style: initStyle, sx, }: Props) => React.JSX.Element;
 export default PFormBlock;

package/dist/PFormLayout/PFormBlock/PFormBlock.types.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { PartialPick, PCommonSxProps } from '../../@types';
 import { PFormDividerProps } from '../PFormDivider';
 import { PFormContextValue } from '../../PFormContext';
@@ -8,4 +8,5 @@ export interface PFormBlockProps extends PCommonSxProps, PartialPick<PFormContex
     collapseIn?: boolean;
     error?: boolean;
     warning?: boolean;
+    endAdornment?: ReactNode;
 }

package/dist/PFormLayout/PFormDivider/PFormDivider.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { PFormDividerProps as Props } from './PFormDivider.types';
-declare const PFormDivider: ({ ref, size: initSize, icon, label, line, lineVerticalMargin, hidden, collapse, collapseIn, error, warning, onCollapseChange, className, style: initStyle, sx, }: Props) => React.JSX.Element;
+declare const PFormDivider: ({ ref, size: initSize, icon, label, line, lineVerticalMargin, hidden, collapse, collapseIn, error, warning, endAdornment, onCollapseChange, className, style: initStyle, sx, }: Props) => React.JSX.Element;
 export default PFormDivider;

package/dist/PFormLayout/PFormDivider/PFormDivider.types.d.ts

@@ -15,5 +15,6 @@ export interface PFormDividerProps extends PCommonSxProps {
     collapseIn?: boolean;
     error?: boolean;
     warning?: boolean;
+    endAdornment?: ReactNode;
     onCollapseChange?: (collapseIn: boolean) => void;
 }

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import {c}from'react/compiler-runtime';import React,{createContext,useContext,useRef,useState,useId,useEffect}from'react';import classNames from'classnames';import {Box,styled,useTheme,InputLabel,Grid,Collapse,FormHelperText,TextField,InputAdornment,IconButton,Chip,Autocomplete,Icon,MenuItem,Checkbox,CircularProgress,Input,OutlinedInput,FilledInput,FormControl,Typography,FormControlLabel,Radio,RadioGroup,ToggleButton,ToggleButtonGroup,Rating,Skeleton,darken,Button,Tooltip,tooltipClasses,ClickAwayListener,DialogTitle,DialogContent,DialogActions,Dialog,Switch,Paper,Menu}from'@mui/material';import {empty,notEmpty,equal,ifEmpty}from'@pdg/compare';import dayjs from'dayjs';import {useAutoUpdateRef,useForwardRef,useFirstSkipChanged,useEventLayoutEffect,useEventEffect,useChanged,useFirstSkipEffect,useTimeoutRef,clearTimeoutRef}from'@pdg/react-hook';import {PButton,PIcon,PIconText}from'@pdg/react-component';import {useResizeDetector}from'react-resize-detector';import {formatTelNo,formatBusinessNo,formatPersonalNo}from'@pdg/formatting';import {NumericFormat}from'react-number-format';import {CheckBox,CheckBoxOutlineBlank,RadioButtonChecked,RadioButtonUnchecked}from'@mui/icons-material';import {Editor}from'@tinymce/tinymce-react';import {AdapterDayjs}from'@mui/x-date-pickers/AdapterDayjs';import {StaticDatePicker,PickersDay,DesktopDatePicker,LocalizationProvider,StaticDateTimePicker,DesktopDateTimePicker}from'@mui/x-date-pickers';import SimpleBar from'simplebar-react';import'dayjs/locale/ko';import {useLocation}from'react-router';function insertStyle(css) {
+import {c}from'react/compiler-runtime';import React,{createContext,useContext,useRef,useState,useId,useEffect}from'react';import classNames from'classnames';import {Box,styled,useTheme,InputLabel,Grid,Collapse,FormHelperText,TextField,InputAdornment,IconButton,Chip,Autocomplete,Icon,MenuItem,Checkbox,CircularProgress,Input,OutlinedInput,FilledInput,FormControl,Typography,FormControlLabel,Radio,RadioGroup,ToggleButton,ToggleButtonGroup,Rating,Skeleton,darken,Button,Tooltip,tooltipClasses,ClickAwayListener,DialogTitle,DialogContent,DialogActions,Dialog,Switch,Paper,Menu}from'@mui/material';import {empty,notEmpty,equal,ifEmpty}from'@pdg/compare';import dayjs from'dayjs';import {useAutoUpdateRef,useForwardRef,useFirstSkipChanged,useEventLayoutEffect,useEventEffect,useChanged,useFirstSkipEffect,useTimeoutRef,clearTimeoutRef}from'@pdg/react-hook';import {PButton,PIcon,PStack,PIconButton,PIconText}from'@pdg/react-component';import {useResizeDetector}from'react-resize-detector';import {formatTelNo,formatBusinessNo,formatPersonalNo}from'@pdg/formatting';import {NumericFormat}from'react-number-format';import {CheckBox,CheckBoxOutlineBlank,RadioButtonChecked,RadioButtonUnchecked}from'@mui/icons-material';import {Editor}from'@tinymce/tinymce-react';import {AdapterDayjs}from'@mui/x-date-pickers/AdapterDayjs';import {StaticDatePicker,PickersDay,DesktopDatePicker,LocalizationProvider,StaticDateTimePicker,DesktopDateTimePicker}from'@mui/x-date-pickers';import SimpleBar from'simplebar-react';import'dayjs/locale/ko';import {useLocation}from'react-router';function insertStyle(css) {
     if (!css || typeof window === 'undefined')
         return;
     const style = document.createElement('style');
@@ -423,9 +423,11 @@ var appendFormValueData = function appendFormValueData(data, itemCommands) {
         }
       });
       if (isAllValid) {
-        onSubmitRef.current && onSubmitRef.current(data);
+        var _onSubmitRef$current;
+        (_onSubmitRef$current = onSubmitRef.current) === null || _onSubmitRef$current === void 0 || _onSubmitRef$current.call(onSubmitRef, data);
       } else {
-        onInvalidRef.current && onInvalidRef.current(invalidItems);
+        var _onInvalidRef$current;
+        (_onInvalidRef$current = onInvalidRef.current) === null || _onInvalidRef$current === void 0 || _onInvalidRef$current.call(onInvalidRef, invalidItems);
         setTimeout(function () {
           var _valueItems$current$f;
           (_valueItems$current$f = valueItems.current[firstInvalidItemId]) === null || _valueItems$current$f === void 0 || _valueItems$current$f.focusValidate();
@@ -1126,7 +1128,7 @@ var StyledWarningLineBox = styled(Box)(function (_ref2) {
   position: 'relative'
 };
 var PFormDivider = function PFormDivider(t0) {
-  var $ = c(47);
+  var $ = c(48);
   var ref = t0.ref,
     initSize = t0.size,
     icon = t0.icon,
@@ -1138,6 +1140,7 @@ var PFormDivider = function PFormDivider(t0) {
     collapseIn = t0.collapseIn,
     error = t0.error,
     warning = t0.warning,
+    endAdornment = t0.endAdornment,
     onCollapseChange = t0.onCollapseChange,
     className = t0.className,
     initStyle = t0.style,
@@ -1185,7 +1188,7 @@ var PFormDivider = function PFormDivider(t0) {
   if ($[4] !== collapse || $[5] !== collapseIn || $[6] !== onCollapseChange) {
     t4 = function t4() {
       if (collapse) {
-        onCollapseChange && onCollapseChange(!collapseIn);
+        onCollapseChange === null || onCollapseChange === void 0 || onCollapseChange(!collapseIn);
       }
     };
     $[4] = collapse;
@@ -1280,40 +1283,51 @@ var PFormDivider = function PFormDivider(t0) {
     t11 = $[28];
   }
   var t12;
-  if ($[29] !== collapse || $[30] !== collapseIn || $[31] !== error || $[32] !== warning) {
-    t12 = collapse && /*#__PURE__*/React.createElement(PIcon, {
+  if ($[29] !== collapse || $[30] !== collapseIn || $[31] !== endAdornment || $[32] !== error || $[33] !== warning) {
+    t12 = (endAdornment || collapse) && /*#__PURE__*/React.createElement(PStack, {
+      row: true,
+      center: true,
+      sx: {
+        ml: endAdornment && collapse ? 2 : 1
+      }
+    }, endAdornment && /*#__PURE__*/React.createElement(Box, {
       sx: {
-        opacity: 0.6,
-        ml: 1
+        my: -2
+      },
+      onClick: _temp$x
+    }, endAdornment), collapse && /*#__PURE__*/React.createElement(PIconButton, {
+      sx: {
+        my: -2
       },
       color: error ? "error" : warning ? "warning" : undefined
-    }, collapseIn ? "KeyboardDoubleArrowUp" : "KeyboardDoubleArrowDown");
+    }, collapseIn ? "KeyboardDoubleArrowUp" : "KeyboardDoubleArrowDown"));
     $[29] = collapse;
     $[30] = collapseIn;
-    $[31] = error;
-    $[32] = warning;
-    $[33] = t12;
+    $[31] = endAdornment;
+    $[32] = error;
+    $[33] = warning;
+    $[34] = t12;
   } else {
-    t12 = $[33];
+    t12 = $[34];
   }
   var t13;
-  if ($[34] !== handleClick || $[35] !== t10 || $[36] !== t11 || $[37] !== t12 || $[38] !== t8 || $[39] !== t9) {
+  if ($[35] !== handleClick || $[36] !== t10 || $[37] !== t11 || $[38] !== t12 || $[39] !== t8 || $[40] !== t9) {
     t13 = /*#__PURE__*/React.createElement(Box, {
       sx: t8,
       onClick: handleClick
     }, t9, t10, t11, t12);
-    $[34] = handleClick;
-    $[35] = t10;
-    $[36] = t11;
-    $[37] = t12;
-    $[38] = t8;
-    $[39] = t9;
-    $[40] = t13;
+    $[35] = handleClick;
+    $[36] = t10;
+    $[37] = t11;
+    $[38] = t12;
+    $[39] = t8;
+    $[40] = t9;
+    $[41] = t13;
   } else {
-    t13 = $[40];
+    t13 = $[41];
   }
   var t14;
-  if ($[41] !== ref || $[42] !== style || $[43] !== sx || $[44] !== t13 || $[45] !== t6) {
+  if ($[42] !== ref || $[43] !== style || $[44] !== sx || $[45] !== t13 || $[46] !== t6) {
     t14 = /*#__PURE__*/React.createElement(Grid, {
       ref: ref,
       size: t5,
@@ -1321,20 +1335,23 @@ var PFormDivider = function PFormDivider(t0) {
       className: t6,
       sx: sx
     }, t13);
-    $[41] = ref;
-    $[42] = style;
-    $[43] = sx;
-    $[44] = t13;
-    $[45] = t6;
-    $[46] = t14;
+    $[42] = ref;
+    $[43] = style;
+    $[44] = sx;
+    $[45] = t13;
+    $[46] = t6;
+    $[47] = t14;
   } else {
-    t14 = $[46];
+    t14 = $[47];
   }
   return t14;
-};var _templateObject$h;
+};
+function _temp$x(e) {
+  e.stopPropagation();
+}var _templateObject$h;
 var StyledWrapGrid$1 = styled(Grid)(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral(["\n  width: 100%;\n"])));var _excluded$B = ["variant", "size", "color", "spacing", "focused", "labelShrink", "fullWidth"];
 var PFormBlock = function PFormBlock(t0) {
-  var $ = c(66);
+  var $ = c(67);
   var ref = t0.ref,
     initVariant = t0.variant,
     initSize = t0.size,
@@ -1349,6 +1366,7 @@ var PFormBlock = function PFormBlock(t0) {
     lineVerticalMargin = t0.lineVerticalMargin,
     error = t0.error,
     warning = t0.warning,
+    endAdornment = t0.endAdornment,
     hidden = t0.hidden,
     collapse = t0.collapse,
     initCollapseIn = t0.collapseIn,
@@ -1491,7 +1509,7 @@ var PFormBlock = function PFormBlock(t0) {
     t8 = $[28];
   }
   var t9;
-  if ($[29] !== collapse || $[30] !== collapseIn || $[31] !== color || $[32] !== error || $[33] !== hidden || $[34] !== icon || $[35] !== label || $[36] !== line || $[37] !== lineVerticalMargin || $[38] !== size || $[39] !== warning) {
+  if ($[29] !== collapse || $[30] !== collapseIn || $[31] !== color || $[32] !== endAdornment || $[33] !== error || $[34] !== hidden || $[35] !== icon || $[36] !== label || $[37] !== line || $[38] !== lineVerticalMargin || $[39] !== size || $[40] !== warning) {
     t9 = (icon || label || line || collapse) && /*#__PURE__*/React.createElement(PFormDivider, {
       className: "PFormBlock-header",
       collapse: collapse,
@@ -1505,6 +1523,7 @@ var PFormBlock = function PFormBlock(t0) {
       warning: warning,
       lineVerticalMargin: lineVerticalMargin,
       hidden: hidden,
+      endAdornment: endAdornment,
       onCollapseChange: collapse ? function (newCollapseIn) {
         return setCollapseIn(newCollapseIn);
       } : undefined
@@ -1512,38 +1531,39 @@ var PFormBlock = function PFormBlock(t0) {
     $[29] = collapse;
     $[30] = collapseIn;
     $[31] = color;
-    $[32] = error;
-    $[33] = hidden;
-    $[34] = icon;
-    $[35] = label;
-    $[36] = line;
-    $[37] = lineVerticalMargin;
-    $[38] = size;
-    $[39] = warning;
-    $[40] = t9;
+    $[32] = endAdornment;
+    $[33] = error;
+    $[34] = hidden;
+    $[35] = icon;
+    $[36] = label;
+    $[37] = line;
+    $[38] = lineVerticalMargin;
+    $[39] = size;
+    $[40] = warning;
+    $[41] = t9;
   } else {
-    t9 = $[40];
+    t9 = $[41];
   }
   var t10;
-  if ($[41] === Symbol["for"]("react.memo_cache_sentinel")) {
+  if ($[42] === Symbol["for"]("react.memo_cache_sentinel")) {
     t10 = {
       xs: 12
     };
-    $[41] = t10;
+    $[42] = t10;
   } else {
-    t10 = $[41];
+    t10 = $[42];
   }
   var t11;
-  if ($[42] === Symbol["for"]("react.memo_cache_sentinel")) {
+  if ($[43] === Symbol["for"]("react.memo_cache_sentinel")) {
     t11 = {
       xs: 12
     };
-    $[42] = t11;
+    $[43] = t11;
   } else {
-    t11 = $[42];
+    t11 = $[43];
   }
   var t12;
-  if ($[43] !== children || $[44] !== spacing) {
+  if ($[44] !== children || $[45] !== spacing) {
     t12 = /*#__PURE__*/React.createElement(StyledWrapGrid$1, {
       size: t11,
       className: "PFormBlock-body"
@@ -1552,51 +1572,51 @@ var PFormBlock = function PFormBlock(t0) {
       container: true,
       spacing: spacing
     }, children));
-    $[43] = children;
-    $[44] = spacing;
-    $[45] = t12;
+    $[44] = children;
+    $[45] = spacing;
+    $[46] = t12;
   } else {
-    t12 = $[45];
+    t12 = $[46];
   }
   var t13;
-  if ($[46] !== spacing || $[47] !== t12) {
+  if ($[47] !== spacing || $[48] !== t12) {
     t13 = /*#__PURE__*/React.createElement(Grid, {
       container: true,
       spacing: spacing
     }, t12);
-    $[46] = spacing;
-    $[47] = t12;
-    $[48] = t13;
+    $[47] = spacing;
+    $[48] = t12;
+    $[49] = t13;
   } else {
-    t13 = $[48];
+    t13 = $[49];
   }
   var t14;
-  if ($[49] !== Container || $[50] !== containerProps || $[51] !== t13) {
+  if ($[50] !== Container || $[51] !== containerProps || $[52] !== t13) {
     t14 = /*#__PURE__*/React.createElement(StyledWrapGrid$1, {
       size: t10
     }, /*#__PURE__*/React.createElement(Container, containerProps, t13));
-    $[49] = Container;
-    $[50] = containerProps;
-    $[51] = t13;
-    $[52] = t14;
+    $[50] = Container;
+    $[51] = containerProps;
+    $[52] = t13;
+    $[53] = t14;
   } else {
-    t14 = $[52];
+    t14 = $[53];
   }
   var t15;
-  if ($[53] !== spacing || $[54] !== t14 || $[55] !== t9) {
+  if ($[54] !== spacing || $[55] !== t14 || $[56] !== t9) {
     t15 = /*#__PURE__*/React.createElement(Grid, {
       container: true,
       spacing: spacing
     }, t9, t14);
-    $[53] = spacing;
-    $[54] = t14;
-    $[55] = t9;
-    $[56] = t15;
+    $[54] = spacing;
+    $[55] = t14;
+    $[56] = t9;
+    $[57] = t15;
   } else {
-    t15 = $[56];
+    t15 = $[57];
   }
   var t16;
-  if ($[57] !== ref || $[58] !== style || $[59] !== sx || $[60] !== t15 || $[61] !== t8) {
+  if ($[58] !== ref || $[59] !== style || $[60] !== sx || $[61] !== t15 || $[62] !== t8) {
     t16 = /*#__PURE__*/React.createElement(Grid, {
       ref: ref,
       size: t7,
@@ -1604,25 +1624,25 @@ var PFormBlock = function PFormBlock(t0) {
       style: style,
       sx: sx
     }, t15);
-    $[57] = ref;
-    $[58] = style;
-    $[59] = sx;
-    $[60] = t15;
-    $[61] = t8;
-    $[62] = t16;
+    $[58] = ref;
+    $[59] = style;
+    $[60] = sx;
+    $[61] = t15;
+    $[62] = t8;
+    $[63] = t16;
   } else {
-    t16 = $[62];
+    t16 = $[63];
   }
   var t17;
-  if ($[63] !== t16 || $[64] !== t6) {
+  if ($[64] !== t16 || $[65] !== t6) {
     t17 = /*#__PURE__*/React.createElement(PFormContext.Provider, {
       value: t6
     }, t16);
-    $[63] = t16;
-    $[64] = t6;
-    $[65] = t17;
+    $[64] = t16;
+    $[65] = t6;
+    $[66] = t17;
   } else {
-    t17 = $[65];
+    t17 = $[66];
   }
   return t17;
 };var _templateObject$g;
@@ -11651,7 +11671,8 @@ function _temp$m() {
           finalValue_1.forEach(function (v_0) {
             var key = v_0.toString();
             if (itemsInfos[key]) {
-              computedComponentValue && computedComponentValue.push(itemsInfos[key]);
+              var _computedComponentVal;
+              (_computedComponentVal = computedComponentValue) === null || _computedComponentVal === void 0 || _computedComponentVal.push(itemsInfos[key]);
             }
           });
         } else {
@@ -13013,7 +13034,8 @@ var PrivateYearSelect = function PrivateYearSelect(t0) {
   var t3;
   if ($[3] !== onSelectRef) {
     t3 = function t3(e) {
-      onSelectRef.current && onSelectRef.current(Number(e.target.getAttribute("data-id")));
+      var _onSelectRef$current;
+      (_onSelectRef$current = onSelectRef.current) === null || _onSelectRef$current === void 0 || _onSelectRef$current.call(onSelectRef, Number(e.target.getAttribute("data-id")));
     };
     $[3] = onSelectRef;
     $[4] = t3;
@@ -13361,7 +13383,8 @@ var PrivateTimeSelect = function PrivateTimeSelect(t0) {
   var t6;
   if ($[5] !== onSelectRef) {
     t6 = function t6(e) {
-      onSelectRef.current && onSelectRef.current(Number(e.target.getAttribute("data-id")));
+      var _onSelectRef$current;
+      (_onSelectRef$current = onSelectRef.current) === null || _onSelectRef$current === void 0 || _onSelectRef$current.call(onSelectRef, Number(e.target.getAttribute("data-id")));
     };
     $[5] = onSelectRef;
     $[6] = t6;
@@ -17454,7 +17477,8 @@ function _temp$h() {
   var t2;
   if ($[0] !== onCloseRef) {
     t2 = function t2() {
-      onCloseRef.current && onCloseRef.current();
+      var _onCloseRef$current;
+      (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 || _onCloseRef$current.call(onCloseRef);
     };
     $[0] = onCloseRef;
     $[1] = t2;
@@ -22899,8 +22923,8 @@ function _temp2() {
     t3 = function t3() {
       var _inputRef$current;
       if ((_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.validate()) {
-        onConfirm && onConfirm(value);
-        onClose && onClose();
+        onConfirm === null || onConfirm === void 0 || onConfirm(value);
+        onClose === null || onClose === void 0 || onClose();
       } else {
         var _inputRef$current2;
         (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.focus();
@@ -22917,8 +22941,8 @@ function _temp2() {
   var t4;
   if ($[7] !== onCancel || $[8] !== onClose) {
     t4 = function t4() {
-      onCancel && onCancel();
-      onClose && onClose();
+      onCancel === null || onCancel === void 0 || onCancel();
+      onClose === null || onClose === void 0 || onClose();
     };
     $[7] = onCancel;
     $[8] = onClose;
@@ -22933,7 +22957,7 @@ function _temp2() {
     t6 = function t6(e, reason) {
       if (reason === "backdropClick") {
         if (empty(value)) {
-          onClose && onClose();
+          onClose === null || onClose === void 0 || onClose();
         }
       }
     };

package/dist/index.js

@@ -423,9 +423,11 @@ var appendFormValueData = function appendFormValueData(data, itemCommands) {
         }
       });
       if (isAllValid) {
-        onSubmitRef.current && onSubmitRef.current(data);
+        var _onSubmitRef$current;
+        (_onSubmitRef$current = onSubmitRef.current) === null || _onSubmitRef$current === void 0 || _onSubmitRef$current.call(onSubmitRef, data);
       } else {
-        onInvalidRef.current && onInvalidRef.current(invalidItems);
+        var _onInvalidRef$current;
+        (_onInvalidRef$current = onInvalidRef.current) === null || _onInvalidRef$current === void 0 || _onInvalidRef$current.call(onInvalidRef, invalidItems);
         setTimeout(function () {
           var _valueItems$current$f;
           (_valueItems$current$f = valueItems.current[firstInvalidItemId]) === null || _valueItems$current$f === void 0 || _valueItems$current$f.focusValidate();
@@ -1126,7 +1128,7 @@ var StyledWarningLineBox = material.styled(material.Box)(function (_ref2) {
   position: 'relative'
 };
 var PFormDivider = function PFormDivider(t0) {
-  var $ = compilerRuntime.c(47);
+  var $ = compilerRuntime.c(48);
   var ref = t0.ref,
     initSize = t0.size,
     icon = t0.icon,
@@ -1138,6 +1140,7 @@ var PFormDivider = function PFormDivider(t0) {
     collapseIn = t0.collapseIn,
     error = t0.error,
     warning = t0.warning,
+    endAdornment = t0.endAdornment,
     onCollapseChange = t0.onCollapseChange,
     className = t0.className,
     initStyle = t0.style,
@@ -1185,7 +1188,7 @@ var PFormDivider = function PFormDivider(t0) {
   if ($[4] !== collapse || $[5] !== collapseIn || $[6] !== onCollapseChange) {
     t4 = function t4() {
       if (collapse) {
-        onCollapseChange && onCollapseChange(!collapseIn);
+        onCollapseChange === null || onCollapseChange === void 0 || onCollapseChange(!collapseIn);
       }
     };
     $[4] = collapse;
@@ -1280,40 +1283,51 @@ var PFormDivider = function PFormDivider(t0) {
     t11 = $[28];
   }
   var t12;
-  if ($[29] !== collapse || $[30] !== collapseIn || $[31] !== error || $[32] !== warning) {
-    t12 = collapse && /*#__PURE__*/React.createElement(reactComponent.PIcon, {
+  if ($[29] !== collapse || $[30] !== collapseIn || $[31] !== endAdornment || $[32] !== error || $[33] !== warning) {
+    t12 = (endAdornment || collapse) && /*#__PURE__*/React.createElement(reactComponent.PStack, {
+      row: true,
+      center: true,
+      sx: {
+        ml: endAdornment && collapse ? 2 : 1
+      }
+    }, endAdornment && /*#__PURE__*/React.createElement(material.Box, {
       sx: {
-        opacity: 0.6,
-        ml: 1
+        my: -2
+      },
+      onClick: _temp$x
+    }, endAdornment), collapse && /*#__PURE__*/React.createElement(reactComponent.PIconButton, {
+      sx: {
+        my: -2
       },
       color: error ? "error" : warning ? "warning" : undefined
-    }, collapseIn ? "KeyboardDoubleArrowUp" : "KeyboardDoubleArrowDown");
+    }, collapseIn ? "KeyboardDoubleArrowUp" : "KeyboardDoubleArrowDown"));
     $[29] = collapse;
     $[30] = collapseIn;
-    $[31] = error;
-    $[32] = warning;
-    $[33] = t12;
+    $[31] = endAdornment;
+    $[32] = error;
+    $[33] = warning;
+    $[34] = t12;
   } else {
-    t12 = $[33];
+    t12 = $[34];
   }
   var t13;
-  if ($[34] !== handleClick || $[35] !== t10 || $[36] !== t11 || $[37] !== t12 || $[38] !== t8 || $[39] !== t9) {
+  if ($[35] !== handleClick || $[36] !== t10 || $[37] !== t11 || $[38] !== t12 || $[39] !== t8 || $[40] !== t9) {
     t13 = /*#__PURE__*/React.createElement(material.Box, {
       sx: t8,
       onClick: handleClick
     }, t9, t10, t11, t12);
-    $[34] = handleClick;
-    $[35] = t10;
-    $[36] = t11;
-    $[37] = t12;
-    $[38] = t8;
-    $[39] = t9;
-    $[40] = t13;
+    $[35] = handleClick;
+    $[36] = t10;
+    $[37] = t11;
+    $[38] = t12;
+    $[39] = t8;
+    $[40] = t9;
+    $[41] = t13;
   } else {
-    t13 = $[40];
+    t13 = $[41];
   }
   var t14;
-  if ($[41] !== ref || $[42] !== style || $[43] !== sx || $[44] !== t13 || $[45] !== t6) {
+  if ($[42] !== ref || $[43] !== style || $[44] !== sx || $[45] !== t13 || $[46] !== t6) {
     t14 = /*#__PURE__*/React.createElement(material.Grid, {
       ref: ref,
       size: t5,
@@ -1321,20 +1335,23 @@ var PFormDivider = function PFormDivider(t0) {
       className: t6,
       sx: sx
     }, t13);
-    $[41] = ref;
-    $[42] = style;
-    $[43] = sx;
-    $[44] = t13;
-    $[45] = t6;
-    $[46] = t14;
+    $[42] = ref;
+    $[43] = style;
+    $[44] = sx;
+    $[45] = t13;
+    $[46] = t6;
+    $[47] = t14;
   } else {
-    t14 = $[46];
+    t14 = $[47];
   }
   return t14;
-};var _templateObject$h;
+};
+function _temp$x(e) {
+  e.stopPropagation();
+}var _templateObject$h;
 var StyledWrapGrid$1 = material.styled(material.Grid)(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral(["\n  width: 100%;\n"])));var _excluded$B = ["variant", "size", "color", "spacing", "focused", "labelShrink", "fullWidth"];
 var PFormBlock = function PFormBlock(t0) {
-  var $ = compilerRuntime.c(66);
+  var $ = compilerRuntime.c(67);
   var ref = t0.ref,
     initVariant = t0.variant,
     initSize = t0.size,
@@ -1349,6 +1366,7 @@ var PFormBlock = function PFormBlock(t0) {
     lineVerticalMargin = t0.lineVerticalMargin,
     error = t0.error,
     warning = t0.warning,
+    endAdornment = t0.endAdornment,
     hidden = t0.hidden,
     collapse = t0.collapse,
     initCollapseIn = t0.collapseIn,
@@ -1491,7 +1509,7 @@ var PFormBlock = function PFormBlock(t0) {
     t8 = $[28];
   }
   var t9;
-  if ($[29] !== collapse || $[30] !== collapseIn || $[31] !== color || $[32] !== error || $[33] !== hidden || $[34] !== icon || $[35] !== label || $[36] !== line || $[37] !== lineVerticalMargin || $[38] !== size || $[39] !== warning) {
+  if ($[29] !== collapse || $[30] !== collapseIn || $[31] !== color || $[32] !== endAdornment || $[33] !== error || $[34] !== hidden || $[35] !== icon || $[36] !== label || $[37] !== line || $[38] !== lineVerticalMargin || $[39] !== size || $[40] !== warning) {
     t9 = (icon || label || line || collapse) && /*#__PURE__*/React.createElement(PFormDivider, {
       className: "PFormBlock-header",
       collapse: collapse,
@@ -1505,6 +1523,7 @@ var PFormBlock = function PFormBlock(t0) {
       warning: warning,
       lineVerticalMargin: lineVerticalMargin,
       hidden: hidden,
+      endAdornment: endAdornment,
       onCollapseChange: collapse ? function (newCollapseIn) {
         return setCollapseIn(newCollapseIn);
       } : undefined
@@ -1512,38 +1531,39 @@ var PFormBlock = function PFormBlock(t0) {
     $[29] = collapse;
     $[30] = collapseIn;
     $[31] = color;
-    $[32] = error;
-    $[33] = hidden;
-    $[34] = icon;
-    $[35] = label;
-    $[36] = line;
-    $[37] = lineVerticalMargin;
-    $[38] = size;
-    $[39] = warning;
-    $[40] = t9;
+    $[32] = endAdornment;
+    $[33] = error;
+    $[34] = hidden;
+    $[35] = icon;
+    $[36] = label;
+    $[37] = line;
+    $[38] = lineVerticalMargin;
+    $[39] = size;
+    $[40] = warning;
+    $[41] = t9;
   } else {
-    t9 = $[40];
+    t9 = $[41];
   }
   var t10;
-  if ($[41] === Symbol["for"]("react.memo_cache_sentinel")) {
+  if ($[42] === Symbol["for"]("react.memo_cache_sentinel")) {
     t10 = {
       xs: 12
     };
-    $[41] = t10;
+    $[42] = t10;
   } else {
-    t10 = $[41];
+    t10 = $[42];
   }
   var t11;
-  if ($[42] === Symbol["for"]("react.memo_cache_sentinel")) {
+  if ($[43] === Symbol["for"]("react.memo_cache_sentinel")) {
     t11 = {
       xs: 12
     };
-    $[42] = t11;
+    $[43] = t11;
   } else {
-    t11 = $[42];
+    t11 = $[43];
   }
   var t12;
-  if ($[43] !== children || $[44] !== spacing) {
+  if ($[44] !== children || $[45] !== spacing) {
     t12 = /*#__PURE__*/React.createElement(StyledWrapGrid$1, {
       size: t11,
       className: "PFormBlock-body"
@@ -1552,51 +1572,51 @@ var PFormBlock = function PFormBlock(t0) {
       container: true,
       spacing: spacing
     }, children));
-    $[43] = children;
-    $[44] = spacing;
-    $[45] = t12;
+    $[44] = children;
+    $[45] = spacing;
+    $[46] = t12;
   } else {
-    t12 = $[45];
+    t12 = $[46];
   }
   var t13;
-  if ($[46] !== spacing || $[47] !== t12) {
+  if ($[47] !== spacing || $[48] !== t12) {
     t13 = /*#__PURE__*/React.createElement(material.Grid, {
       container: true,
       spacing: spacing
     }, t12);
-    $[46] = spacing;
-    $[47] = t12;
-    $[48] = t13;
+    $[47] = spacing;
+    $[48] = t12;
+    $[49] = t13;
   } else {
-    t13 = $[48];
+    t13 = $[49];
   }
   var t14;
-  if ($[49] !== Container || $[50] !== containerProps || $[51] !== t13) {
+  if ($[50] !== Container || $[51] !== containerProps || $[52] !== t13) {
     t14 = /*#__PURE__*/React.createElement(StyledWrapGrid$1, {
       size: t10
     }, /*#__PURE__*/React.createElement(Container, containerProps, t13));
-    $[49] = Container;
-    $[50] = containerProps;
-    $[51] = t13;
-    $[52] = t14;
+    $[50] = Container;
+    $[51] = containerProps;
+    $[52] = t13;
+    $[53] = t14;
   } else {
-    t14 = $[52];
+    t14 = $[53];
   }
   var t15;
-  if ($[53] !== spacing || $[54] !== t14 || $[55] !== t9) {
+  if ($[54] !== spacing || $[55] !== t14 || $[56] !== t9) {
     t15 = /*#__PURE__*/React.createElement(material.Grid, {
       container: true,
       spacing: spacing
     }, t9, t14);
-    $[53] = spacing;
-    $[54] = t14;
-    $[55] = t9;
-    $[56] = t15;
+    $[54] = spacing;
+    $[55] = t14;
+    $[56] = t9;
+    $[57] = t15;
   } else {
-    t15 = $[56];
+    t15 = $[57];
   }
   var t16;
-  if ($[57] !== ref || $[58] !== style || $[59] !== sx || $[60] !== t15 || $[61] !== t8) {
+  if ($[58] !== ref || $[59] !== style || $[60] !== sx || $[61] !== t15 || $[62] !== t8) {
     t16 = /*#__PURE__*/React.createElement(material.Grid, {
       ref: ref,
       size: t7,
@@ -1604,25 +1624,25 @@ var PFormBlock = function PFormBlock(t0) {
       style: style,
       sx: sx
     }, t15);
-    $[57] = ref;
-    $[58] = style;
-    $[59] = sx;
-    $[60] = t15;
-    $[61] = t8;
-    $[62] = t16;
+    $[58] = ref;
+    $[59] = style;
+    $[60] = sx;
+    $[61] = t15;
+    $[62] = t8;
+    $[63] = t16;
   } else {
-    t16 = $[62];
+    t16 = $[63];
   }
   var t17;
-  if ($[63] !== t16 || $[64] !== t6) {
+  if ($[64] !== t16 || $[65] !== t6) {
     t17 = /*#__PURE__*/React.createElement(PFormContext.Provider, {
       value: t6
     }, t16);
-    $[63] = t16;
-    $[64] = t6;
-    $[65] = t17;
+    $[64] = t16;
+    $[65] = t6;
+    $[66] = t17;
   } else {
-    t17 = $[65];
+    t17 = $[66];
   }
   return t17;
 };var _templateObject$g;
@@ -11651,7 +11671,8 @@ function _temp$m() {
           finalValue_1.forEach(function (v_0) {
             var key = v_0.toString();
             if (itemsInfos[key]) {
-              computedComponentValue && computedComponentValue.push(itemsInfos[key]);
+              var _computedComponentVal;
+              (_computedComponentVal = computedComponentValue) === null || _computedComponentVal === void 0 || _computedComponentVal.push(itemsInfos[key]);
             }
           });
         } else {
@@ -13013,7 +13034,8 @@ var PrivateYearSelect = function PrivateYearSelect(t0) {
   var t3;
   if ($[3] !== onSelectRef) {
     t3 = function t3(e) {
-      onSelectRef.current && onSelectRef.current(Number(e.target.getAttribute("data-id")));
+      var _onSelectRef$current;
+      (_onSelectRef$current = onSelectRef.current) === null || _onSelectRef$current === void 0 || _onSelectRef$current.call(onSelectRef, Number(e.target.getAttribute("data-id")));
     };
     $[3] = onSelectRef;
     $[4] = t3;
@@ -13361,7 +13383,8 @@ var PrivateTimeSelect = function PrivateTimeSelect(t0) {
   var t6;
   if ($[5] !== onSelectRef) {
     t6 = function t6(e) {
-      onSelectRef.current && onSelectRef.current(Number(e.target.getAttribute("data-id")));
+      var _onSelectRef$current;
+      (_onSelectRef$current = onSelectRef.current) === null || _onSelectRef$current === void 0 || _onSelectRef$current.call(onSelectRef, Number(e.target.getAttribute("data-id")));
     };
     $[5] = onSelectRef;
     $[6] = t6;
@@ -17454,7 +17477,8 @@ function _temp$h() {
   var t2;
   if ($[0] !== onCloseRef) {
     t2 = function t2() {
-      onCloseRef.current && onCloseRef.current();
+      var _onCloseRef$current;
+      (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 || _onCloseRef$current.call(onCloseRef);
     };
     $[0] = onCloseRef;
     $[1] = t2;
@@ -22899,8 +22923,8 @@ function _temp2() {
     t3 = function t3() {
       var _inputRef$current;
       if ((_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.validate()) {
-        onConfirm && onConfirm(value);
-        onClose && onClose();
+        onConfirm === null || onConfirm === void 0 || onConfirm(value);
+        onClose === null || onClose === void 0 || onClose();
       } else {
         var _inputRef$current2;
         (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.focus();
@@ -22917,8 +22941,8 @@ function _temp2() {
   var t4;
   if ($[7] !== onCancel || $[8] !== onClose) {
     t4 = function t4() {
-      onCancel && onCancel();
-      onClose && onClose();
+      onCancel === null || onCancel === void 0 || onCancel();
+      onClose === null || onClose === void 0 || onClose();
     };
     $[7] = onCancel;
     $[8] = onClose;
@@ -22933,7 +22957,7 @@ function _temp2() {
     t6 = function t6(e, reason) {
       if (reason === "backdropClick") {
         if (compare.empty(value)) {
-          onClose && onClose();
+          onClose === null || onClose === void 0 || onClose();
         }
       }
     };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@pdg/react-form",
   "title": "Typescript React Form Module",
   "description": "Typescript React Form Module",
-  "version": "1.2.8",
+  "version": "1.2.10",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",