@solidstarters/solid-core-ui 1.1.47 → 1.1.49

package/src/components/core/list/SolidListView.tsx

@@ -23,7 +23,7 @@ import { SolidGlobalSearchElement } from "../common/SolidGlobalSearchElement";
 import { pascalCase } from "change-case";
 import { useLazyCheckIfPermissionExistsQuery } from "@/redux/api/userApi";
 import { createPermission, deletePermission, updatePermission } from "@/helpers/permissions";
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { ListViewRowActionPopup } from "./ListViewRowActionPopup";
 import FilterComponent, { FilterOperator, FilterRule, FilterRuleType } from "@/components/core/common/FilterComponent";
 import { SolidLayoutViews } from '../common/SolidLayoutViews'
@@ -36,7 +36,7 @@ import CozyImage from '../../../resources/images/layout/images/cozy.png';
 import ComfortableImage from '../../../resources/images/layout/images/comfortable.png';
 import ListImage from '../../../resources/images/layout/images/cozy.png';
 import KanbanImage from '../../../resources/images/layout/images/kanban.png';
-import { capitalize } from "lodash";
+import { capitalize, filter, set } from "lodash";
 import Lightbox from "yet-another-react-lightbox";
 import Counter from "yet-another-react-lightbox/plugins/counter";
 import Download from "yet-another-react-lightbox/plugins/download";
@@ -44,10 +44,40 @@ import "yet-another-react-lightbox/styles.css";
 import "yet-another-react-lightbox/plugins/counter.css";
 import { SolidListViewConfigure } from "./SolidListViewConfigure";
 
+
 const getRandomInt = (min: number, max: number) => {
   return Math.floor(Math.random() * (max - min + 1)) + min;
 }
 
+export const queryStringToQueryObject = () => {
+  const currentPageUrl = window.location.href; // Get the current page URL
+  const encodedQueryString = localStorage.getItem(currentPageUrl); // Retrieve the encoded query string from local storage
+
+  if (encodedQueryString) {
+    try {
+      const decodedQueryString = atob(encodedQueryString); // Base64 decode the string
+      const parsedParams = qs.parse(decodedQueryString); // Parse the decoded string into an object
+      console.log("Parsed Params from Local Storage:", parsedParams);
+      return parsedParams;
+    } catch (error) {
+      console.error("Error decoding or parsing query string from local storage:", error);
+    }
+  };
+
+};
+export const queryObjectToQueryString = (queryObject: string) => {
+  if (queryObject) {
+    const stringifiedObject = qs.stringify(queryObject);
+    const encodedQueryString = btoa(stringifiedObject); // Base64 encode the stringified object
+    const currentPageUrl = window.location.href; // Get the current page URL
+    localStorage.setItem(currentPageUrl, encodedQueryString); // Store in local storage with the URL as the key
+    console.log("Encoded and stored queryObject in localStorage:", encodedQueryString);
+
+    return encodedQueryString;
+  }
+  return null;
+};
+
 type SolidListViewParams = {
   moduleName: string;
   modelName: string;
@@ -64,8 +94,10 @@ export const SolidListView = (params: SolidListViewParams) => {
 
 
   const router = useRouter()
+  const searchParams = useSearchParams().toString(); // Converts the query params to a string
+
   // TODO: The initial filter state will be created based on the fields which are present on this list view. 
-  const [filters, setFilters] = useState<any>();
+  const [filters, setFilters] = useState<any>(params.customFilter || null);
   // const [customFilter, setCustomFilter] = useState<FilterRule[]>(initialState);
   // const [showGlobalSearchElement, setShowGlobalSearchElement] = useState<boolean>(false);
 
@@ -74,8 +106,8 @@ export const SolidListView = (params: SolidListViewParams) => {
   const [actionsAllowed, setActionsAllowed] = useState<string[]>([]);
 
   const [triggerCheckIfPermissionExists] = useLazyCheckIfPermissionExistsQuery();
-  useEffect(() => {
 
+  useEffect(() => {
     const fetchPermissions = async () => {
       if (params.modelName) {
         const permissionNames = [
@@ -130,8 +162,8 @@ export const SolidListView = (params: SolidListViewParams) => {
 
   const initialFilterMethod = () => {
 
-    const solidView = solidListViewMetaData.data.solidView;
-    const solidFieldsMetadata = solidListViewMetaData.data.solidFieldsMetadata;
+    const solidView = solidListViewMetaData?.data?.solidView;
+    const solidFieldsMetadata = solidListViewMetaData?.data?.solidFieldsMetadata;
 
     const initialFilters: any = {};
     const toPopulate: string[] = [];
@@ -139,7 +171,7 @@ export const SolidListView = (params: SolidListViewParams) => {
 
     for (let i = 0; i < solidView.layout.children?.length; i++) {
       const column = solidView.layout.children[i];
-      const fieldMetadata = solidFieldsMetadata[column.attrs.name];
+      const fieldMetadata = solidFieldsMetadata?.[column.attrs.name];
       if (!fieldMetadata?.type) {
         showFieldError(`${column.attrs.label} is not present in metadata`)
         return;
@@ -174,28 +206,50 @@ export const SolidListView = (params: SolidListViewParams) => {
       }
     }
     // setFilters(initialFilters);
-    setRows(solidListViewMetaData?.data?.solidView?.layout?.attrs?.defaultPageSize ? solidListViewMetaData?.data?.solidView?.layout?.attrs.defaultPageSize : 25)
-    setToPopulate(toPopulate);
-    setToPopulateMedia(toPopulateMedia);
+    const rows = solidListViewMetaData?.data?.solidView?.layout?.attrs?.defaultPageSize ?? 25;
+    const populate = toPopulate;
+    const populateMedia = toPopulateMedia;
+    setRows(rows);
+    setToPopulate(populate);
+    setToPopulateMedia(populateMedia);
+    setSortField('id');
+    setSortOrder(-1);
+    return { rows, populate, populateMedia }
   }
 
+  // Set the initial filter state based on the metadata.
   useEffect(() => {
     // refetch();
     if (solidListViewMetaData) {
       if (params.customLayout) {
-        const upatedSolidListViewMetaData = structuredClone(solidListViewMetaData);
-        upatedSolidListViewMetaData.data.solidView.layout = params.customLayout;
-        setListViewMetaData(upatedSolidListViewMetaData);
-
+        const updatedSolidListViewMetaData = structuredClone(solidListViewMetaData);
+        if (updatedSolidListViewMetaData?.data?.solidView?.layout) {
+          updatedSolidListViewMetaData.data.solidView.layout = params.customLayout;
+        }
+        setListViewMetaData(updatedSolidListViewMetaData);
       } else {
         setListViewMetaData(solidListViewMetaData);
-
       }
-
-      initialFilterMethod()
+      // initialFilterMethod()
     }
   }, [solidListViewMetaData]);
 
+  // set layout and actions for create and edit buttons and view modes
+  useEffect(() => {
+    if (solidListViewMetaData) {
+      const createActionUrl = solidListViewMetaData?.data?.solidView?.layout?.attrs?.createAction && solidListViewMetaData?.data?.solidView?.layout?.attrs?.createAction?.type === "custom" ? solidListViewMetaData?.data?.solidView?.layout?.attrs?.createAction?.customComponent : "form/new";
+      const editActionUrl = solidListViewMetaData?.data?.solidView?.layout?.attrs?.editAction && solidListViewMetaData?.data?.solidView?.layout?.attrs?.editAction?.type === "custom" ? solidListViewMetaData?.data?.solidView?.layout?.attrs?.editAction?.customComponent : "form";
+      const viewModes = solidListViewMetaData?.data?.solidView?.layout?.attrs?.allowedViews && solidListViewMetaData?.data?.solidView?.layout?.attrs?.allowedViews.length > 0 && solidListViewMetaData?.data?.solidView?.layout?.attrs?.allowedViews.map((view: any) => { return { label: capitalize(view), value: view } });
+      setViewModes(viewModes);
+      if (createActionUrl) {
+        setCreateButtonUrl(createActionUrl)
+      }
+      if (editActionUrl) {
+        setEditButtonUrl(editActionUrl)
+      }
+    }
+  }, [solidListViewMetaData])
+
 
   // All list view state.
   const [listViewData, setListViewData] = useState<any[]>([]);
@@ -212,7 +266,8 @@ export const SolidListView = (params: SolidListViewParams) => {
   const [createButtonUrl, setCreateButtonUrl] = useState<string>();
   const [editButtonUrl, setEditButtonUrl] = useState<string>();
   const [showArchived, setShowArchived] = useState(false);
-
+  const [queryDataLoaded, setQueryDataLoaded] = useState(false);
+  const [customFilter, setCustomFilter] = useState(null);
   const sizeOptions = [
     { label: 'Compact', value: 'small', image: CompactImage },
     { label: 'Cozy', value: 'normal', image: CozyImage },
@@ -227,8 +282,6 @@ export const SolidListView = (params: SolidListViewParams) => {
   const [size, setSize] = useState<string | any>(sizeOptions[1].value);
   const [viewModes, setViewModes] = useState<any>([]);
 
-
-
   // Custom Row Action
   const [listViewRowActionPopupState, setListViewRowActionPopupState] = useState(false);
   const [listViewRowActionData, setListRowActionData] = useState<any>();
@@ -248,25 +301,9 @@ export const SolidListView = (params: SolidListViewParams) => {
       setListViewData(solidEntityListViewData?.records);
       setTotalRecords(solidEntityListViewData?.meta.totalRecords);
       setLoading(false);
-
     }
   }, [solidEntityListViewData]);
 
-
-  useEffect(() => {
-    if (solidListViewMetaData) {
-      const createActionUrl = solidListViewMetaData?.data?.solidView?.layout?.attrs?.createAction && solidListViewMetaData?.data?.solidView?.layout?.attrs?.createAction?.type === "custom" ? solidListViewMetaData?.data?.solidView?.layout?.attrs?.createAction?.customComponent : "form/new";
-      const editActionUrl = solidListViewMetaData?.data?.solidView?.layout?.attrs?.editAction && solidListViewMetaData?.data?.solidView?.layout?.attrs?.editAction?.type === "custom" ? solidListViewMetaData?.data?.solidView?.layout?.attrs?.editAction?.customComponent : "form";
-      const viewModes = solidListViewMetaData?.data?.solidView?.layout?.attrs?.allowedViews && solidListViewMetaData?.data?.solidView?.layout?.attrs?.allowedViews.length > 0 && solidListViewMetaData?.data?.solidView?.layout?.attrs?.allowedViews.map((view: any) => { return { label: capitalize(view), value: view } });
-      setViewModes(viewModes);
-      if (createActionUrl) {
-        setCreateButtonUrl(createActionUrl)
-      }
-      if (editActionUrl) {
-        setEditButtonUrl(editActionUrl)
-      }
-    }
-  }, [solidListViewMetaData])
   const [deleteSolidSingleEntiry, { isSuccess: isDeleteSolidSingleEntitySuccess }] = useDeleteSolidEntityMutation()
 
   // Delete mutation 
@@ -281,57 +318,69 @@ export const SolidListView = (params: SolidListViewParams) => {
     },
   ] = useDeleteMultipleSolidEntitiesMutation();
 
-  // Fetch Soft Deleted data
-  useEffect(() => {
-    const queryData = {
-      offset: 0,
-      limit: 25,
-      populate: toPopulate,
-      sort: [`id:desc`],
-    };
-    if (showArchived) {
-      queryData.showSoftDeleted = 'inclusive';
-    }
-    const queryString = qs.stringify(queryData, {
-      encodeValuesOnly: true
-    });
-
-    triggerGetSolidEntities(queryString);
-    setSelectedRecords([]);
-    setSelectedRecoverRecords([]);
-  }, [showArchived, recoverByIdIsSuccess, recoverByIsSuccess]);
-
 
   // Fetch data after toPopulate has been populated...
   useEffect(() => {
-    if (toPopulate || toPopulateMedia) {
-      const queryData = {
-        offset: 0,
-        limit: 25,
-        populate: toPopulate,
-        populateMedia: toPopulateMedia,
-        sort: [`id:desc`],
-        filters: { ...params.customFilter }
-      };
-      if (params.embeded) {
+    if (solidListViewMetaData) {
+      const queryObject = queryStringToQueryObject();
 
+      if (queryObject) {
+        const queryData = {
+          offset: queryObject.offset || 0,
+          limit: queryObject.limit || 25,
+          populate: queryObject.populate,
+          populateMedia: queryObject.populateMedia,
+          sort: queryObject.sort ? queryObject.sort?.map((sortItem: string) => {
+            const [field, order] = sortItem.split(":");
+            return { field, order };
+          }) : [`id:desc`],
+          filters: queryObject.filters
+        };
+        const filters = {
+          $and: []
+        }
+        if (queryObject.s_filter) {
+          filters.$and.push(queryObject.s_filter);
+        }
+        if (queryObject.c_filter) {
+          filters.$and.push(queryObject.c_filter);
+        }
+        setRows(queryData.limit);
+        setToPopulate(queryData?.populate);
+        setToPopulateMedia(queryData?.populateMedia);
+        setFirst(queryData?.offset);
+        setSortField(queryData?.sort[0]?.field);
+        setSortOrder(queryData?.sort[0]?.order);
+        setFilters(filters);
+        setQueryDataLoaded(true);
+      } else {
+        initialFilterMethod();
+        setQueryDataLoaded(true)
       }
-      const queryString = qs.stringify(queryData, {
-        encodeValuesOnly: true
-      });
-
-      triggerGetSolidEntities(queryString);
       setSelectedRecords([]);
       setSelectedRecoverRecords([]);
-      setShowArchived(false);
+
+    }
+  }, [isDeleteSolidEntitiesSucess, isDeleteSolidSingleEntitySuccess, recoverByIdIsSuccess, recoverByIsSuccess, solidListViewMetaData]);
+
+  useEffect(() => {
+    if (queryDataLoaded) {
+      setQueryString(
+        first,
+        rows,
+        sortField,
+        sortOrder,
+        filters,
+        showArchived
+      );
     }
-  }, [isDeleteSolidEntitiesSucess, isDeleteSolidSingleEntitySuccess, toPopulate, toPopulateMedia]);
+  }, [first, rows, sortField, sortOrder, showArchived, toPopulate, toPopulateMedia, customFilter, queryDataLoaded]);
 
   // Handle pagination event.
   const onPageChange = (event: any) => {
     setFirst(event.first);
     setRows(event.rows);
-    setQueryString(event.first, event.rows, sortField, sortOrder, filters);
+    // setQueryString(event.first, event.rows, sortField, sortOrder, filters, showArchived);
   };
 
   // Handle sort event.
@@ -341,13 +390,13 @@ export const SolidListView = (params: SolidListViewParams) => {
     setSortField(sortField);
     setSortOrder(validSortOrder);
     setFirst(0);
-    setQueryString(
-      0,
-      rows,
-      sortField,
-      sortOrder === 1 || sortOrder === -1 ? sortOrder : 0,
-      filters
-    );
+    // setQueryString(
+    //   0,
+    //   rows,
+    //   sortField,
+    //   sortOrder === 1 || sortOrder === -1 ? sortOrder : 0,
+    //   filters
+    // );
   };
 
   // handle change in the records which are currently selected...
@@ -428,10 +477,11 @@ export const SolidListView = (params: SolidListViewParams) => {
     limit?: number,
     sortField?: string,
     sortOrder?: number,
-    filters?: any
+    filters?: any,
+    showArchived?: boolean,
   ) => {
 
-    const solidFieldsMetadata = solidListViewMetaData.data.solidFieldsMetadata;
+    const solidFieldsMetadata = solidListViewMetaData?.data?.solidFieldsMetadata;
 
 
     const queryData: any = {
@@ -455,23 +505,40 @@ export const SolidListView = (params: SolidListViewParams) => {
       queryData.sort = [`id:desc`];
     }
 
-    const queryString = qs.stringify(queryData, {
-      encodeValuesOnly: true,
-    });
-
+    if (showArchived) {
+      queryData.showSoftDeleted = 'inclusive';
+    }
+    const queryString = qs.stringify(queryData, { encodeValuesOnly: true });
+
+    if (customFilter) {
+      let url
+      const urlData = queryData;
+      delete urlData.filters;
+      urlData.s_filter = customFilter.s_filter || {};
+      urlData.c_filter = customFilter.c_filter || {};
+      queryObjectToQueryString(urlData);
+    }
     triggerGetSolidEntities(queryString);
   };
 
   // handle filter...
-  const handleApplyCustomFilter = (filters) => {
-    setFilters(filters);
-    setQueryString(
-      0,
-      rows,
-      sortField,
-      sortOrder === 1 || sortOrder === -1 ? sortOrder : 0,
-      filters
-    );
+  const handleApplyCustomFilter = (transformedFilter: any) => {
+
+    const queryfilter = {
+      $and: [
+      ]
+    }
+    if (transformedFilter.s_filter) {
+      queryfilter.$and.push(transformedFilter.s_filter)
+    }
+    if (transformedFilter.c_filter) {
+      queryfilter.$and.push(transformedFilter.c_filter)
+    }
+
+    const customFilter = transformedFilter;
+    const updatedFilter = { ...(filters || {}), ...(queryfilter || {}) };
+    setFilters((prevFilters) => ({ ...(prevFilters || {}), ...(queryfilter || {}) }));
+    setCustomFilter(customFilter)
   };
 
   // clear Filter
@@ -493,6 +560,7 @@ export const SolidListView = (params: SolidListViewParams) => {
     return (
       <div>
         <Button
+          type="button"
           text
           size="small"
           className=""
@@ -634,24 +702,17 @@ export const SolidListView = (params: SolidListViewParams) => {
     });
   };
 
-  //   const handlCustomRowAction = ((i, rowData) : any) => {
-
-  // }
-
   //Note -  Custom Row Action Popup 
   const closeListViewRowActionPopup = () => {
     setListViewRowActionPopupState(false)
   }
 
-
-  const listViewTitle = solidListViewMetaData?.data?.solidView?.displayName
-
   return (
     <div className="page-parent-wrapper">
       <div className="page-header">
         <Toast ref={toast} />
         <div className="flex gap-3 align-items-center">
-          <p className="m-0 view-title">{listViewTitle}</p>
+          <p className="m-0 view-title">{solidListViewMetaData?.data?.solidView?.displayName}</p>
           {solidListViewMetaData?.data?.solidView?.layout?.attrs?.enableGlobalSearch === true && params.embeded === false &&
             <SolidGlobalSearchElement filters={filters} clearFilter={clearFilter} ref={solidGlobalSearchElementRef} viewData={solidListViewMetaData} handleApplyCustomFilter={handleApplyCustomFilter}></SolidGlobalSearchElement>
           }
@@ -675,7 +736,7 @@ export const SolidListView = (params: SolidListViewParams) => {
             severity="secondary"
             outlined
             onClick={() => {
-              setQueryString(first, rows, sortField, sortOrder, filters);
+              setQueryString(first, rows, sortField, sortOrder, filters, showArchived);
             }}
           />
           {showArchived && <Button type="button" icon="pi pi-refresh" label="Recover" size='small' severity="secondary"

package/src/components/core/model/FieldMetaDataForm.tsx

@@ -2481,7 +2481,7 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
                                   )}
                                 </div>
                                 {currentFields.includes("regexPattern") && (
-                                  <div className="field col-6 flex-flex-column gap-2">
+                                  <div className="field col-6 flex-flex-column gap-2 mt-3">
                                     <label
                                       htmlFor="regexPatternNotMatchingErrorMsg"
                                       className="form-field-label"

package/src/components/core/users/CreateUser.tsx

@@ -244,9 +244,9 @@ const CreateUser = ({ data, params }: any) => {
                 <div className="form-wrapper-title">Create User</div>
               </div>
               <div className="gap-3 flex">
-                {formik.dirty &&
+                {/* {formik.dirty && */}
                   <Button label="Save" size="small" type="submit" />
-                }
+                {/* } */}
                 <CancelButton />
               </div>
             </>
@@ -254,13 +254,13 @@ const CreateUser = ({ data, params }: any) => {
             <>
               <div className="flex align-items-center gap-3">
                 <BackButton />
-                <h1 className="m-0">Update User</h1>
+                <div className="form-wrapper-title">Update User</div>
               </div>
               <div>
                 <div className="gap-3 flex">
-                  {formik.dirty &&
+                  {/* {formik.dirty && */}
                     <Button label="Save" size="small" type="submit" />
-                  }
+                  {/* } */}
                   {data &&
                     <Button outlined label="Delete" size="small" severity="danger" type="button" onClick={() => deleteUser(data.id)} />
                   }

package/src/helpers/registry.ts

@@ -11,6 +11,14 @@ import { SolidSelectionStaticAutocompleteWidget } from "@/components/core/form/f
 import { SolidSelectionStaticRadioWidget } from "@/components/core/form/fields/widgets/SolidSelectionStaticRadioFieldWidget";
 import { SolidShortTextFieldTextRenderModeWidget } from "@/components/core/list/widgets/SolidShortTextFieldTextRenderModeWidget copy";
 import { SolidShortTextFieldImageRenderModeWidget } from "@/components/core/list/widgets/SolidShortTextFieldImageRenderModeWidget";
+import { SolidFormFieldViewModeWidget } from "@/components/core/form/fields/widgets/SolidFormFieldViewModeWidget";
+import { SolidFormFieldJsonViewModeWidget } from "@/components/core/form/fields/widgets/SolidFormFieldJsonViewModeWidget";
+import { SolidFormFieldPasswordViewModeWidget } from "@/components/core/form/fields/widgets/SolidFormFieldPasswordViewModeWidget";
+import { SolidFormFieldRichTextViewModeWidget } from "@/components/core/form/fields/widgets/SolidFormFieldRichTextViewModeWidget";
+import { SolidFormFieldMediaViewModeWidget } from "@/components/core/form/fields/widgets/SolidFormFieldMediaViewModeWidget";
+import { SolidFormFieldRelationViewModeWidget } from "@/components/core/form/fields/widgets/SolidFormFieldRelationViewModeWidget";
+import { SolidFormFieldViewMediaSingleWidget } from "@/components/core/form/fields/widgets/SolidFormFieldViewMediaSingleWidget";
+import { SolidFormFieldViewMediaMultipleWidget } from "@/components/core/form/fields/widgets/SolidFormFieldViewMediaMultipleWidget";
 
 type ExtensionRegistry = {
     components: Record<string, React.ComponentType<any>>;
@@ -79,6 +87,14 @@ registerExtensionComponent("SolidSelectionStaticAutocompleteWidget", SolidSelect
 registerExtensionComponent("SolidSelectionStaticRadioWidget", SolidSelectionStaticRadioWidget, ["field-radio"]);
 registerExtensionComponent("SolidShortTextFieldTextRenderModeWidget", SolidShortTextFieldTextRenderModeWidget, []);
 registerExtensionComponent("SolidShortTextFieldImageRenderModeWidget", SolidShortTextFieldImageRenderModeWidget, []);
+registerExtensionComponent("SolidFormFieldViewModeWidget", SolidFormFieldViewModeWidget, []);
+registerExtensionComponent("SolidFormFieldJsonViewModeWidget", SolidFormFieldJsonViewModeWidget, []);
+registerExtensionComponent("SolidFormFieldPasswordViewModeWidget", SolidFormFieldPasswordViewModeWidget, []);
+registerExtensionComponent("SolidFormFieldRichTextViewModeWidget", SolidFormFieldRichTextViewModeWidget, []);
+registerExtensionComponent("SolidFormFieldMediaViewModeWidget", SolidFormFieldMediaViewModeWidget, []);
+registerExtensionComponent("SolidFormFieldRelationViewModeWidget", SolidFormFieldRelationViewModeWidget, []);
+registerExtensionComponent("SolidFormFieldViewMediaSingleWidget", SolidFormFieldViewMediaSingleWidget, []);
+registerExtensionComponent("SolidFormFieldViewMediaMultipleWidget", SolidFormFieldViewMediaMultipleWidget, []);
 
 
 // ModuleMetadata

package/src/resources/globals.css

@@ -1564,9 +1564,9 @@ li.header-li-px {
   border: 8px;
   padding: 5px;
   height: 100%;
-  min-width:fit-content;
+  min-width: fit-content;
   width: 100%;
-  max-width:fit-content;
+  max-width: fit-content;
 }
 
 .kaban-heading-area {
@@ -1729,6 +1729,9 @@ li.header-li-px {
   margin-top: 10px;
 }
 
+.solid-file-vieww-wrapper {
+  margin-top: 10px;
+}
 
 .solid-dynamic-stepper {
   overflow: hidden;
@@ -2950,4 +2953,14 @@ flex-shrink: 0; */
 
 .kanban-column-cogwheel.p-button.p-button-secondary.p-button-text:not(:disabled):hover {
   background: transparent;
+}
+
+.view-widget-chip.p-chip {
+  background-color: #f9f9f9 !important;
+  padding: 4px 10px !important;
+}
+
+.view-widget-chip.p-chip .p-chip-text {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
 }

package/src/types/solid-core.d.ts

@@ -121,4 +121,9 @@ export type SolidSelectionStaticFieldWidgetProps = {
 
 export type SolidShortTextImageRenderModeWidgetProps = {
 data: string;
-}
+}
+
+export type SolidMediaSingleFieldWidgetProps = {
+    formik: any;
+    fieldContext?: SolidFieldProps;
+};