Skip to content

Commit b83d12c

Browse files
georgylobkogeorgylobko
committed
fix: Animation behavior for entering expanded mode
1 parent 9728f0b commit b83d12c

File tree

1 file changed

+109
-109
lines changed

1 file changed

+109
-109
lines changed

‎src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx

Lines changed: 109 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -92,119 +92,119 @@ export function AppLayoutGlobalAiDrawerImplementation({
9292
const isResizingDisabled = maxAiDrawerSize < activeAiDrawerSize;
9393

9494
return (
95-
<Transition
96-
nodeRef={drawerRef}
97-
in={show || isExpanded}
98-
appear={show || isExpanded}
99-
mountOnEnter={true}
100-
timeout={250}
101-
>
102-
{state => {
95+
<Transition nodeRef={drawerRef} in={show} appear={show} mountOnEnter={true} timeout={250}>
96+
{drawerTransitionState => {
10397
return (
104-
<aside
105-
id={activeAiDrawer?.id}
106-
aria-hidden={!activeAiDrawer}
107-
aria-label={computedAriaLabels.content}
108-
className={clsx(
109-
styles.drawer,
110-
styles['ai-drawer'],
111-
!animationDisabled && isExpanded && styles['with-expanded-motion'],
112-
{
113-
[sharedStyles['with-motion-horizontal']]: !animationDisabled,
114-
[testutilStyles['active-drawer']]: show,
115-
[styles['drawer-hidden']]: !show && state === 'exited',
116-
[testutilStyles['drawer-closed']]: !activeAiDrawer,
117-
[styles['drawer-expanded']]: isExpanded,
118-
}
119-
)}
120-
ref={drawerRef}
121-
onBlur={e => {
122-
if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {
123-
aiDrawerFocusControl?.loseFocus();
124-
}
125-
}}
126-
style={{
127-
blockSize: drawerHeight,
128-
insetBlockStart: `${placement.insetBlockStart}px`,
129-
...(!isMobile && {
130-
[customCssProps.drawerSize]: `${['entering', 'entered'].includes(state) ? size : 0}px`,
131-
}),
132-
}}
133-
data-testid={activeDrawerId && `awsui-app-layout-drawer-${activeDrawerId}`}
134-
>
135-
{!isMobile && activeAiDrawer?.resizable && (!isExpanded || state !== 'entered') && (
136-
<div className={styles['drawer-slider']}>
137-
<PanelResizeHandle
138-
ref={aiDrawerFocusControl?.refs.slider}
139-
position="side-start"
140-
className={clsx(testutilStyles['drawers-slider'], styles['ai-drawer-slider-handle'])}
141-
ariaLabel={activeAiDrawer?.ariaLabels?.resizeHandle}
142-
tooltipText={activeAiDrawer?.ariaLabels?.resizeHandleTooltipText}
143-
ariaValuenow={resizeProps.relativeSize}
144-
onKeyDown={resizeProps.onKeyDown}
145-
onPointerDown={resizeProps.onPointerDown}
146-
onDirectionClick={resizeProps.onDirectionClick}
147-
disabled={isResizingDisabled}
148-
/>
149-
</div>
150-
)}
151-
<div className={clsx(styles['drawer-content-container'], sharedStyles['with-motion-horizontal'])}>
152-
<div className={styles['drawer-content']}>
153-
<header className={styles['drawer-content-header']}>
154-
<div className={styles['drawer-content-header-content']}>
155-
{activeAiDrawer?.header ?? <div />}
156-
<div className={styles['drawer-actions']}>
157-
{!isMobile && activeAiDrawer?.isExpandable && (
158-
<div className={styles['drawer-expanded-mode-button']}>
159-
<InternalButton
160-
ariaLabel={activeAiDrawer?.ariaLabels?.expandedModeButton}
161-
className={testutilStyles['active-drawer-expanded-mode-button']}
162-
formAction="none"
163-
ariaExpanded={isExpanded}
164-
iconName={isExpanded ? 'shrink' : 'expand'}
165-
onClick={() => setExpandedDrawerId(isExpanded ? null : activeDrawerId!)}
166-
variant="icon"
167-
analyticsAction={isExpanded ? 'expand' : 'collapse'}
168-
/>
98+
<Transition nodeRef={drawerRef} in={isExpanded} timeout={250}>
99+
{expandedTransitionState => {
100+
return (
101+
<aside
102+
id={activeAiDrawer?.id}
103+
aria-hidden={!activeAiDrawer}
104+
aria-label={computedAriaLabels.content}
105+
className={clsx(
106+
styles.drawer,
107+
styles['ai-drawer'],
108+
!animationDisabled && isExpanded && styles['with-expanded-motion'],
109+
{
110+
[sharedStyles['with-motion-horizontal']]: !animationDisabled,
111+
[testutilStyles['active-drawer']]: show,
112+
[styles['drawer-hidden']]: !show && drawerTransitionState === 'exited',
113+
[testutilStyles['drawer-closed']]: !activeAiDrawer,
114+
[styles['drawer-expanded']]: isExpanded,
115+
}
116+
)}
117+
ref={drawerRef}
118+
onBlur={e => {
119+
if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {
120+
aiDrawerFocusControl?.loseFocus();
121+
}
122+
}}
123+
style={{
124+
blockSize: drawerHeight,
125+
insetBlockStart: `${placement.insetBlockStart}px`,
126+
...(!isMobile && {
127+
[customCssProps.drawerSize]: `${['entering', 'entered'].includes(drawerTransitionState) ? size : 0}px`,
128+
}),
129+
}}
130+
data-testid={activeDrawerId && `awsui-app-layout-drawer-${activeDrawerId}`}
131+
>
132+
{!isMobile && activeAiDrawer?.resizable && (!isExpanded || expandedTransitionState !== 'entered') && (
133+
<div className={styles['drawer-slider']}>
134+
<PanelResizeHandle
135+
ref={aiDrawerFocusControl?.refs.slider}
136+
position="side-start"
137+
className={clsx(testutilStyles['drawers-slider'], styles['ai-drawer-slider-handle'])}
138+
ariaLabel={activeAiDrawer?.ariaLabels?.resizeHandle}
139+
tooltipText={activeAiDrawer?.ariaLabels?.resizeHandleTooltipText}
140+
ariaValuenow={resizeProps.relativeSize}
141+
onKeyDown={resizeProps.onKeyDown}
142+
onPointerDown={resizeProps.onPointerDown}
143+
onDirectionClick={resizeProps.onDirectionClick}
144+
disabled={isResizingDisabled}
145+
/>
146+
</div>
147+
)}
148+
<div className={clsx(styles['drawer-content-container'], sharedStyles['with-motion-horizontal'])}>
149+
<div className={styles['drawer-content']}>
150+
<header className={styles['drawer-content-header']}>
151+
<div className={styles['drawer-content-header-content']}>
152+
{activeAiDrawer?.header ?? <div />}
153+
<div className={styles['drawer-actions']}>
154+
{!isMobile && activeAiDrawer?.isExpandable && (
155+
<div className={styles['drawer-expanded-mode-button']}>
156+
<InternalButton
157+
ariaLabel={activeAiDrawer?.ariaLabels?.expandedModeButton}
158+
className={testutilStyles['active-drawer-expanded-mode-button']}
159+
formAction="none"
160+
ariaExpanded={isExpanded}
161+
iconName={isExpanded ? 'shrink' : 'expand'}
162+
onClick={() => setExpandedDrawerId(isExpanded ? null : activeDrawerId!)}
163+
variant="icon"
164+
analyticsAction={isExpanded ? 'expand' : 'collapse'}
165+
/>
166+
</div>
167+
)}
168+
<div className={clsx(styles['drawer-close-button'])}>
169+
<InternalButton
170+
ariaLabel={computedAriaLabels.closeButton}
171+
className={clsx({
172+
[testutilStyles['active-drawer-close-button']]: activeDrawerId,
173+
})}
174+
formAction="none"
175+
iconName={isMobile ? 'close' : 'angle-left'}
176+
onClick={() => onActiveAiDrawerChange?.(null, { initiatedByUserAction: true })}
177+
ref={aiDrawerFocusControl?.refs.close}
178+
variant="icon"
179+
analyticsAction="close"
180+
/>
181+
</div>
182+
</div>
169183
</div>
170-
)}
171-
<div className={clsx(styles['drawer-close-button'])}>
172-
<InternalButton
173-
ariaLabel={computedAriaLabels.closeButton}
174-
className={clsx({
175-
[testutilStyles['active-drawer-close-button']]: activeDrawerId,
176-
})}
177-
formAction="none"
178-
iconName={isMobile ? 'close' : 'angle-left'}
179-
onClick={() => onActiveAiDrawerChange?.(null, { initiatedByUserAction: true })}
180-
ref={aiDrawerFocusControl?.refs.close}
181-
variant="icon"
182-
analyticsAction="close"
183-
/>
184-
</div>
184+
{!isMobile && isExpanded && activeAiDrawer?.ariaLabels?.exitExpandedModeButton && (
185+
<div className={styles['drawer-back-to-console-slot']}>
186+
<div className={styles['drawer-back-to-console-button-wrapper']}>
187+
<button
188+
className={clsx(
189+
testutilStyles['active-ai-drawer-leave-expanded-mode-custom-button'],
190+
styles['drawer-back-to-console-button']
191+
)}
192+
formAction="none"
193+
onClick={() => setExpandedDrawerId(null)}
194+
>
195+
{activeAiDrawer?.ariaLabels?.exitExpandedModeButton}
196+
</button>
197+
</div>
198+
</div>
199+
)}
200+
</header>
201+
{activeAiDrawer?.content}
185202
</div>
186203
</div>
187-
{!isMobile && isExpanded && activeAiDrawer?.ariaLabels?.exitExpandedModeButton && (
188-
<div className={styles['drawer-back-to-console-slot']}>
189-
<div className={styles['drawer-back-to-console-button-wrapper']}>
190-
<button
191-
className={clsx(
192-
testutilStyles['active-ai-drawer-leave-expanded-mode-custom-button'],
193-
styles['drawer-back-to-console-button']
194-
)}
195-
formAction="none"
196-
onClick={() => setExpandedDrawerId(null)}
197-
>
198-
{activeAiDrawer?.ariaLabels?.exitExpandedModeButton}
199-
</button>
200-
</div>
201-
</div>
202-
)}
203-
</header>
204-
{activeAiDrawer?.content}
205-
</div>
206-
</div>
207-
</aside>
204+
</aside>
205+
);
206+
}}
207+
</Transition>
208208
);
209209
}}
210210
</Transition>

0 commit comments

Comments
 (0)