payload-gatekeeper
Version:
The ultimate access control gatekeeper for Payload CMS v3 - Advanced RBAC with wildcard support, auto role assignment, and flexible configuration
51 lines • 2.24 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useEffect, useState } from 'react';
import { PermissionsSelect } from './PermissionsSelect';
/**
* Wrapper component that ensures PermissionsSelect only renders on the client
* This prevents hydration mismatches with react-select
*/
export const PermissionsSelectWrapper = props => {
const [isMounted, setIsMounted] = useState(false);
useEffect(() => {
setIsMounted(true);
}, []);
// Return a placeholder during SSR to prevent hydration mismatch
if (!isMounted) {
const loadingStyles = {
wrapper: { marginBottom: '1rem' },
label: {
display: 'block',
marginBottom: '0.5rem',
fontWeight: 600,
color: 'var(--theme-elevation-800)',
},
required: {
color: 'var(--theme-error-500)',
marginLeft: '0.25rem',
},
description: {
marginTop: '-0.25rem',
marginBottom: '0.5rem',
fontSize: '0.875rem',
color: 'var(--theme-elevation-600)',
},
loading: {
minHeight: '40px',
border: '1px solid var(--theme-elevation-150)',
borderRadius: '4px',
padding: '8px 12px',
backgroundColor: 'var(--theme-bg)',
color: 'var(--theme-elevation-400)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontStyle: 'italic',
},
};
return (_jsxs("div", { style: loadingStyles.wrapper, children: [props.label && (_jsxs("label", { style: loadingStyles.label, children: [props.label, props.required && _jsx("span", { style: loadingStyles.required, children: "*" })] })), props.admin?.description && (_jsx("p", { style: loadingStyles.description, children: props.admin.description })), _jsx("div", { style: loadingStyles.loading, children: "Loading permissions..." })] }));
}
return _jsx(PermissionsSelect, { ...props });
};
//# sourceMappingURL=PermissionsSelectWrapper.js.map