aefis-core-ui 2.3.0-rc11 → 2.3.0-rc12

package/dist/index.modern.js

@@ -69,8 +69,11 @@ import StepConnector, { stepConnectorClasses } from '@mui/material/StepConnector
 import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
 import '@mui/icons-material/KeyboardArrowUpOutlined';
 import '@mui/icons-material/KeyboardArrowDownOutlined';
+import { MenuButton as MenuButton$1 } from 'core-ui';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import 'core-ui/components/AnimatedExpandMoreIcon/AnimatedExpandMoreIcon';
+import '@mui/icons-material/MoreVert';
 import produce from 'immer';
 import { v4 } from 'uuid';
 import { MuiForm5 } from '@rjsf/material-ui';
@@ -1913,7 +1916,12 @@ MenuButton.propTypes = {
   /** Button variant */
   variant: PropTypes.oneOf(["contained", "outlined", "text"]),
   /** The type of the button */
-  menuConfiguration: PropTypes.array,
+  menuConfiguration: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string,
+    icon: PropTypes.any,
+    divider: PropTypes.any,
+    onClick: PropTypes.function
+  })),
   /** The function to execute when the button is clicked. */
   onClick: PropTypes.func
 };
@@ -15387,25 +15395,35 @@ function Row({
       })]
     }), /*#__PURE__*/jsx(Box$1, {
       sx: {
-        width: "48px"
+        width: "48px",
+        marginTop: "22px"
       },
-      children: /*#__PURE__*/jsx(IconButton$1, {
-        "aria-label": "delete rule",
-        sx: {
-          marginTop: "16px",
-          marginLeft: "8px"
-        },
-        onClick: () => onRuleDelete({
-          ruleId,
-          index,
-          ruleIndex,
-          groupId
-        }),
-        children: /*#__PURE__*/jsx(DeleteOutlineOutlinedIcon, {
-          sx: {
-            color: "grey"
+      children: /*#__PURE__*/jsx(MenuButton$1, {
+        displayType: "icon",
+        menuConfiguration: [{
+          name: "Move Up",
+          icon: /*#__PURE__*/jsx(KeyboardArrowUpIcon, {}),
+          onClick: () => {}
+        }, {
+          name: "Move Down",
+          icon: /*#__PURE__*/jsx(KeyboardArrowDownIcon, {}),
+          onClick: () => {}
+        }, {
+          name: "Add Rule Below",
+          icon: /*#__PURE__*/jsx(AddIcon, {}),
+          onClick: () => {}
+        }, {
+          name: "Delete",
+          icon: /*#__PURE__*/jsx(DeleteOutlineOutlinedIcon, {}),
+          onClick: () => {
+            onRuleDelete({
+              ruleId,
+              index,
+              ruleIndex,
+              groupId
+            });
           }
-        })
+        }]
       })
     })]
   });
@@ -15512,7 +15530,7 @@ const RuleGroupIndex = /*#__PURE__*/memo(({
       flexDirection: "column",
       alignItems: "center",
       position: "relative",
-      top: "-8px",
+      top: "0px",
       width: "20px"
     },
     children: [/*#__PURE__*/jsx(IconButton$1, {
@@ -15661,6 +15679,11 @@ const TextBuilder = /*#__PURE__*/memo(({
     setRows(newRules);
   };
   return /*#__PURE__*/jsxs(ContentBox, {
+    sx: {
+      ".MuiFormControl-root": {
+        background: "white"
+      }
+    },
     children: [/*#__PURE__*/jsx(BuilderHeader, {
       onAdd: handleAddGroup,
       children: renderHeader()
@@ -17363,7 +17386,7 @@ const DateSelectReadOnly$1 = ({
   schema
 }) => {
   const value = useMemo(() => {
-    if (formData == undefined) return null;
+    if (!(formData != null && formData.date)) return null;
     const date = new Date(formData.date);
     const options = _extends({}, formData.type === "y" && {
       year: "numeric"
@@ -17413,30 +17436,37 @@ const DateSelect = props => {
     rawErrors,
     disabled
   } = props;
-  const [selectedDate, setSelectedDate] = useState(null);
-  const [dateType, setDateType] = useState(dateTypes.day);
   const serverSideDateFormat = "MM-dd-yyyy";
-  useEffect(() => {
+  const [{
+    selectedDate,
+    dateType
+  }, setFieldValue] = useState(() => {
     if (formData && typeof formData === "object" && formData.date != undefined) {
-      let obj = formData;
-      setDateType(findDateType(obj.type));
-      setSelectedDate(parse$1(obj.date, serverSideDateFormat, new Date()));
+      return {
+        selectedDate: parse$1(formData.date, serverSideDateFormat, new Date()),
+        dateType: findDateType(formData.type)
+      };
     } else {
-      setDateType(dateTypes.day);
-      setSelectedDate(null);
+      return {
+        selectedDate: null,
+        dateType: formData != null && formData.type ? findDateType(formData.type) : dateTypes.day
+      };
     }
-  }, [formData]);
+  });
   const handleDateTypeChange = (event, newDateType) => {
-    if (newDateType != null) {
-      setDateType(newDateType);
-      if (typeof selectedDate !== "undefined" && selectedDate != null) {
-        format$1(selectedDate, serverSideDateFormat);
-        onChange({
-          date: format$1(selectedDate, serverSideDateFormat),
-          type: newDateType.type
-        });
-      }
+    // INFO: toggle sends null value on double click
+    if (!newDateType) return;
+    let newDate = null;
+    if (typeof selectedDate !== "undefined" && selectedDate != null) {
+      newDate = format$1(selectedDate, serverSideDateFormat);
     }
+    setFieldValue(prev => _extends({}, prev, {
+      dateType: newDateType
+    }));
+    onChange({
+      date: newDate,
+      type: newDateType.type
+    });
   };
   const handleDateChange = newDate => {
     if (newDate != null) {
@@ -17446,13 +17476,17 @@ const DateSelect = props => {
         newDate = setDate(newDate, 1);
         newDate = setMonth(newDate, 0);
       }
-      setSelectedDate(newDate);
+      setFieldValue(prev => _extends({}, prev, {
+        selectedDate: newDate
+      }));
       onChange({
         date: format$1(newDate, serverSideDateFormat),
         type: dateType.type
       });
     } else {
-      setSelectedDate(newDate);
+      setFieldValue(prev => _extends({}, prev, {
+        selectedDate: null
+      }));
       onChange({
         date: null,
         type: dateType.type
@@ -17522,7 +17556,7 @@ const DateSelect = props => {
         inputVariant: "outlined",
         inputFormat: dateType.format,
         views: dateType.views,
-        value: typeof selectedDate === "undefined" ? null : selectedDate,
+        value: selectedDate || null,
         onChange: handleDateChange,
         disabled: disabled,
         renderInput: params => /*#__PURE__*/jsx(TextField, _extends({}, params, {
@@ -17532,7 +17566,12 @@ const DateSelect = props => {
           sx: dateInputStyles
         })),
         minDate: minDate,
-        maxDate: maxDate
+        maxDate: maxDate,
+        componentsProps: {
+          actionBar: {
+            actions: ["cancel", "clear", "accept"]
+          }
+        }
       })
     })]
   });
@@ -18914,7 +18953,13 @@ const DateWidgetRaw = ({
     required: required,
     onChange: handleChange,
     disabled: disabled
-  }, uiSchema == null ? void 0 : uiSchema["ui:props"]));
+  }, uiSchema == null ? void 0 : uiSchema["ui:props"], {
+    componentsProps: {
+      actionBar: {
+        actions: ["cancel", "clear", "accept"]
+      }
+    }
+  }));
 };
 DateWidgetRaw.propTypes = {
   onChange: PropTypes.func,