From c7948f5841fa7add840fd4b91f90d3fba4923d5e Mon Sep 17 00:00:00 2001 From: kaftarmery Date: Thu, 19 Dec 2024 18:47:08 +0300 Subject: [PATCH] WIP --- packages/clerk-js/sandbox/template.html | 2 +- .../src/ui/components/KeylessPrompt/index.tsx | 99 ++++++++++++------- 2 files changed, 66 insertions(+), 35 deletions(-) diff --git a/packages/clerk-js/sandbox/template.html b/packages/clerk-js/sandbox/template.html index 81da8b5068..f4d72cfb79 100644 --- a/packages/clerk-js/sandbox/template.html +++ b/packages/clerk-js/sandbox/template.html @@ -128,7 +128,7 @@ Skip to keyless mode content diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx index 3cb29818e5..811d2be1a8 100644 --- a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx +++ b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx @@ -17,35 +17,13 @@ type KeylessPromptProps = { const _KeylessPrompt = (_props: KeylessPromptProps) => { const [isExpanded, setIsExpanded] = useState(true); - const handleKeyDown = (e: React.KeyboardEvent) => { - if ((e.key === 'Enter' || e.key === ' ') && e.target === e.currentTarget) { - e.preventDefault(); - if (!claimed) { - setIsExpanded(prev => !prev); - } - } - if (e.key === 'Escape' && isExpanded && !claimed) { - setIsExpanded(false); - } - }; - const claimed = Boolean(useEnvironment().authConfig.claimedAt); return ( setIsExpanded(true)} - onMouseLeave={() => (claimed ? null : setIsExpanded(false))} - onKeyDown={handleKeyDown} - tabIndex={0} align='center' - role='button' - aria-expanded={isExpanded} - aria-controls='keyless-content' - aria-disabled={claimed && isExpanded} - id='keyless-prompt' - aria-label={claimed ? 'Missing environment keys' : 'Clerk keyless mode overlay'} elementDescriptor={descriptors.impersonationFab} sx={t => ({ position: 'fixed', @@ -62,11 +40,10 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { boxShadow: '0px 0px 0px 0.5px #2f3037 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 1px 1px rgba(255, 255, 255, 0.15) inset, 0px 0px 1px 0px rgba(255, 255, 255, 0.72), 0px 16px 36px -6px rgba(0, 0, 0, 0.36), 0px 6px 16px -2px rgba(0, 0, 0, 0.2)', - transition: 'all 300ms cubic-bezier(0.2, 0.98, 0.1, 1)', + transition: 'all 310ms cubic-bezier(0.2, 0.98, 0.1, 1)', '&[data-expanded="true"]': { flexDirection: 'column', - ariaLabel: 'I am expanded', alignItems: 'flex-start', justifyContent: 'flex-start', height: 'fit-content', @@ -81,12 +58,18 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { }, })} > - !claimed && setIsExpanded(prev => !prev)} + css={css` + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + `} > ({ @@ -141,7 +124,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { > - + + + + + {isExpanded && (