@flozy/editor 10.7.2 → 10.7.4

package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/Select.js

@@ -6,6 +6,7 @@ import { useEditorContext } from "../../../../../hooks/useMouseMove";
 import useCompStyles from "./styles";
 import { CloseIcon } from "../../../../../common/iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const AvatarIcon = props => {
   const {
     option,
@@ -41,7 +42,8 @@ export default function Select(props) {
     placeholder = "",
     disabled = false,
     optionAvatar = false,
-    className = ""
+    className = "",
+    wrapColumn = false
   } = props;
   const value = Array.isArray(pValue) ? pValue : [];
   const options = selectOptions?.length ? selectOptions.filter(s => s.value) : [];
@@ -57,7 +59,8 @@ export default function Select(props) {
       newValue?.forEach(m => {
         if (multiple) {
           fv.push({
-            value: m.inputValue || m.value
+            value: m.inputValue || m.value,
+            ...m
           });
         } else {
           fv[0] = {
@@ -100,51 +103,51 @@ export default function Select(props) {
       }
       // Regular option
       return option.value || "";
-    },
-    renderTags: (value, getTagProps) => {
-      return /*#__PURE__*/_jsx(Box, {
-        className: `tv-ms-tag-wrpr ${className}`,
-        sx: {
-          "& svg": {
-            marginRight: "5px",
-            "& path": {
-              stroke: "#000"
-            }
-          }
-        },
-        children: value?.map((option, index) => {
-          const {
-            key,
-            ...tagProps
-          } = getTagProps({
-            index
-          }) || {};
-          return option?.value ? /*#__PURE__*/_jsx(Chip, {
-            variant: "outlined",
-            label: option?.label || option?.value,
-            ...tagProps,
-            sx: {
-              background: option?.color || appTheme?.palette?.editor?.tv_border1,
-              border: "none",
-              "& .MuiChip-label": {
-                paddingLeft: "12px !important",
-                paddingRight: disabled ? "12px !important" : ""
-              }
-            },
-            avatar: /*#__PURE__*/_jsx(AvatarIcon, {
-              option: option,
-              avatar: optionAvatar
-            }),
-            deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {
-              style: {
-                cursor: "pointer",
-                display: disabled ? "none" : ""
-              }
-            })
-          }, key) : null;
-        })
-      });
-    },
+    }
+    // renderTags={(value, getTagProps) => {
+    //   return (
+    //     <Box
+    //       className={`tv-ms-tag-wrpr ${className}`}
+    //       sx={{
+    //         "& svg": { marginRight: "5px", "& path": { stroke: "#000" } },
+    //         flexWrap: wrapColumn ? "wrap" : "nowrap",
+    //         overflowX: wrapColumn ? "hidden" : "auto",
+    //       }}
+    //     >
+    //       {value?.map((option, index) => {
+    //         const { key, ...tagProps } = getTagProps({ index }) || {};
+    //         return option?.value ? (
+    //           <Chip
+    //             variant="outlined"
+    //             label={option?.label || option?.value}
+    //             key={key}
+    //             {...tagProps}
+    //             sx={{
+    //               background:
+    //                 option?.color || appTheme?.palette?.editor?.tv_border1,
+    //               border: "none",
+    //               "& .MuiChip-label": {
+    //                 paddingLeft: "12px !important",
+    //                 paddingRight: disabled ? "12px !important" : "",
+    //               },
+    //             }}
+    //             avatar={<AvatarIcon option={option} avatar={optionAvatar} />}
+    //             deleteIcon={
+    //               <CloseIcon
+    //                 style={{
+    //                   cursor: "pointer",
+    //                   display: disabled ? "none" : "",
+    //                 }}
+    //               />
+    //             }
+    //           />
+    //         ) : null;
+    //       })}
+    //     </Box>
+    //   );
+    // }}
+    ,
+    renderTags: () => null,
     renderOption: (props, option) => {
       const {
         key,
@@ -168,13 +171,77 @@ export default function Select(props) {
     },
     freeSolo: true,
     size: "small",
-    fullWidth: true,
+    fullWidth: true
+    // renderInput={(params) => {
+    //   return (
+    //     <TextField
+    //       fullWidth
+    //       size="small"
+    //       {...params}
+    //       placeholder={placeholder}
+    //     />
+    //   );
+    // }}
+    ,
     renderInput: params => {
-      return /*#__PURE__*/_jsx(TextField, {
-        fullWidth: true,
-        size: "small",
-        ...params,
-        placeholder: placeholder
+      const {
+        InputProps,
+        ...rest
+      } = params;
+      return /*#__PURE__*/_jsxs(Box, {
+        className: `tv-ms-tag-wrpr ${className}`,
+        sx: {
+          display: "flex",
+          flexWrap: wrapColumn ? "wrap" : "nowrap",
+          alignItems: "center",
+          minHeight: "40px",
+          padding: "2px",
+          gap: "4px",
+          "& .MuiChip-root": {
+            margin: "2px"
+          }
+        },
+        children: [value?.map((option, index) => /*#__PURE__*/_jsx(Chip, {
+          variant: "outlined",
+          label: option?.label || option?.value,
+          sx: {
+            background: option?.color || appTheme?.palette?.editor?.tv_border1,
+            maxWidth: '150px',
+            border: "none",
+            "& .MuiChip-label": {
+              paddingLeft: "12px !important",
+              paddingRight: disabled ? "12px !important" : ""
+            }
+          },
+          avatar: /*#__PURE__*/_jsx(AvatarIcon, {
+            option: option,
+            avatar: optionAvatar
+          }),
+          deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {
+            style: {
+              cursor: "pointer",
+              display: disabled ? "none" : ""
+            }
+          }),
+          ...InputProps?.startAdornment?.[index]?.props
+        }, index)), /*#__PURE__*/_jsx(TextField, {
+          ...rest,
+          InputProps: {
+            ...InputProps,
+            disableUnderline: true,
+            sx: {
+              minWidth: 120,
+              flexGrow: 1,
+              input: {
+                padding: "4px 8px"
+              }
+            }
+          },
+          size: "small",
+          placeholder: placeholder,
+          disabled: disabled,
+          variant: "standard"
+        })]
       });
     },
     slotProps: {

package/dist/Editor/Elements/DataView/Layouts/DataTypes/PersonType.js

@@ -7,8 +7,12 @@ const PersonType = props => {
     rowIndex,
     property,
     value,
-    readOnly
+    readOnly,
+    settings
   } = props;
+  const {
+    wrapColumn
+  } = settings;
   const {
     onChange,
     users
@@ -22,9 +26,10 @@ const PersonType = props => {
     value: value || [],
     onChange: handleChange,
     options: users || [],
-    multiple: false,
+    multiple: true,
     disabled: readOnly,
-    optionAvatar: true
+    optionAvatar: true,
+    wrapColumn: wrapColumn
   });
 };
 export default PersonType;

package/dist/Editor/Elements/DataView/Layouts/Options/EditProperty.js

@@ -7,7 +7,7 @@ import Icon from "../../../../common/Icon";
 import CloseIcon from "@mui/icons-material/Close";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const NEED_WRAPS = ["text", "multi-select"];
+const NEED_WRAPS = ["text", "multi-select", "person"];
 const EditProperty = props => {
   const {
     classes,

package/dist/Editor/Elements/DataView/Layouts/TableStyles.js

@@ -101,7 +101,7 @@ const useTableStyles = (theme, appTheme) => ({
           position: "relative",
           "& .tv-ms-tag-wrpr": {
             display: "flex",
-            flexWrap: "nowrap",
+            // flexWrap: "nowrap",
             overflow: "auto",
             minWidth: "58px",
             "& .MuiChip-deleteIcon": {

package/dist/Editor/common/RnD/GuideLines/styles.js

@@ -45,7 +45,7 @@ const useGuideLineStyle = ({
         position: "absolute",
         width: "calc(50% - 162px)",
         height: "calc(100% - 2px)",
-        backgroundColor: "rgba(255,255,255,1)",
+        backgroundColor: "rgba(255,255,255,0)",
         pointerEvents: "none",
         top: 2,
         "&.w_left": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "10.7.2",
+  "version": "10.7.4",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"