@furystack/shades-common-components 13.1.0 → 13.2.0

package/src/components/command-palette/command-palette-input.spec.tsx

@@ -6,42 +6,14 @@ import { CommandPaletteInput } from './command-palette-input.js'
 import { CommandPaletteManager } from './command-palette-manager.js'
 
 describe('CommandPaletteInput', () => {
-  let originalAnimate: typeof Element.prototype.animate
-  let animateCalls: Array<{ keyframes: unknown; options: unknown }>
-
   beforeEach(() => {
     vi.useFakeTimers()
     document.body.innerHTML = '<div id="root"></div>'
-    animateCalls = []
-    originalAnimate = Element.prototype.animate
-
-    Element.prototype.animate = vi.fn(
-      (keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions) => {
-        animateCalls.push({ keyframes, options })
-        const mockAnimation = {
-          onfinish: null as ((event: AnimationPlaybackEvent) => void) | null,
-          oncancel: null as ((event: AnimationPlaybackEvent) => void) | null,
-          cancel: vi.fn(),
-          play: vi.fn(),
-          pause: vi.fn(),
-          finish: vi.fn(),
-          addEventListener: vi.fn(),
-          removeEventListener: vi.fn(),
-        }
-
-        setTimeout(() => {
-          mockAnimation.onfinish?.({} as AnimationPlaybackEvent)
-        }, 10)
-
-        return mockAnimation as unknown as Animation
-      },
-    ) as typeof Element.prototype.animate
   })
 
   afterEach(() => {
     vi.useRealTimers()
     document.body.innerHTML = ''
-    Element.prototype.animate = originalAnimate
     vi.restoreAllMocks()
   })
 
@@ -89,7 +61,7 @@ describe('CommandPaletteInput', () => {
     })
   })
 
-  it('should start with width 0% when closed', async () => {
+  it('should always have width 100%', async () => {
     await usingAsync(new Injector(), async (injector) => {
       await usingAsync(createManager(), async (manager) => {
         manager.isOpened.setValue(false)
@@ -104,15 +76,15 @@ describe('CommandPaletteInput', () => {
         await flushUpdates()
 
         const component = document.querySelector('shades-command-palette-input') as HTMLElement
-        expect(component.hasAttribute('data-opened')).toBe(false)
+        const computedStyle = window.getComputedStyle(component)
+        expect(computedStyle.width).toBe('100%')
       })
     })
   })
 
-  it('should have width 100% when opened', async () => {
+  it('should have overflow hidden style', async () => {
     await usingAsync(new Injector(), async (injector) => {
       await usingAsync(createManager(), async (manager) => {
-        manager.isOpened.setValue(true)
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         initializeShadeRoot({
@@ -124,73 +96,13 @@ describe('CommandPaletteInput', () => {
         await flushUpdates()
 
         const component = document.querySelector('shades-command-palette-input') as HTMLElement
-        expect(component.hasAttribute('data-opened')).toBe(true)
-      })
-    })
-  })
-
-  it('should animate width when opening', async () => {
-    await usingAsync(new Injector(), async (injector) => {
-      await usingAsync(createManager(), async (manager) => {
-        manager.isOpened.setValue(false)
-        const rootElement = document.getElementById('root') as HTMLDivElement
-
-        initializeShadeRoot({
-          injector,
-          rootElement,
-          jsxElement: <CommandPaletteInput manager={manager} />,
-        })
-
-        await flushUpdates()
-        animateCalls = []
-
-        manager.isOpened.setValue(true)
-        await flushUpdates()
-
-        const widthAnimation = animateCalls.find(
-          (call) =>
-            Array.isArray(call.keyframes) &&
-            call.keyframes.some((kf: Keyframe) => kf.width === '0%') &&
-            call.keyframes.some((kf: Keyframe) => kf.width === '100%'),
-        )
-
-        expect(widthAnimation).toBeDefined()
-        expect((widthAnimation?.options as KeyframeAnimationOptions)?.duration).toBe(300)
-      })
-    })
-  })
-
-  it('should animate width when closing', async () => {
-    await usingAsync(new Injector(), async (injector) => {
-      await usingAsync(createManager(), async (manager) => {
-        manager.isOpened.setValue(true)
-        const rootElement = document.getElementById('root') as HTMLDivElement
-
-        initializeShadeRoot({
-          injector,
-          rootElement,
-          jsxElement: <CommandPaletteInput manager={manager} />,
-        })
-
-        await flushUpdates()
-        animateCalls = []
-
-        manager.isOpened.setValue(false)
-        await flushUpdates()
-
-        const widthAnimation = animateCalls.find(
-          (call) =>
-            Array.isArray(call.keyframes) &&
-            call.keyframes.some((kf: Keyframe) => kf.width === '100%') &&
-            call.keyframes.some((kf: Keyframe) => kf.width === '0%'),
-        )
-
-        expect(widthAnimation).toBeDefined()
+        const computedStyle = window.getComputedStyle(component)
+        expect(computedStyle.overflow).toBe('hidden')
       })
     })
   })
 
-  it('should clear input value when opening', async () => {
+  it('should focus input when opened', async () => {
     await usingAsync(new Injector(), async (injector) => {
       await usingAsync(createManager(), async (manager) => {
         manager.isOpened.setValue(false)
@@ -206,12 +118,12 @@ describe('CommandPaletteInput', () => {
 
         const component = document.querySelector('shades-command-palette-input') as HTMLElement
         const inputElement = component?.querySelector('input') as HTMLInputElement
-        inputElement.value = 'some text'
+        const focusSpy = vi.spyOn(inputElement, 'focus')
 
         manager.isOpened.setValue(true)
         await flushUpdates()
 
-        expect(inputElement.value).toBe('')
+        expect(focusSpy).toHaveBeenCalled()
       })
     })
   })
@@ -236,35 +148,13 @@ describe('CommandPaletteInput', () => {
 
         manager.isOpened.setValue(false)
         await flushUpdates()
-        await vi.advanceTimersByTimeAsync(20)
-        await flushUpdates()
 
         expect(inputElement.value).toBe('')
       })
     })
   })
 
-  it('should have overflow hidden style', async () => {
-    await usingAsync(new Injector(), async (injector) => {
-      await usingAsync(createManager(), async (manager) => {
-        const rootElement = document.getElementById('root') as HTMLDivElement
-
-        initializeShadeRoot({
-          injector,
-          rootElement,
-          jsxElement: <CommandPaletteInput manager={manager} />,
-        })
-
-        await flushUpdates()
-
-        const component = document.querySelector('shades-command-palette-input') as HTMLElement
-        const computedStyle = window.getComputedStyle(component)
-        expect(computedStyle.overflow).toBe('hidden')
-      })
-    })
-  })
-
-  it('should use cubic-bezier easing for animations', async () => {
+  it('should preserve input value when opening', async () => {
     await usingAsync(new Injector(), async (injector) => {
       await usingAsync(createManager(), async (manager) => {
         manager.isOpened.setValue(false)
@@ -277,47 +167,15 @@ describe('CommandPaletteInput', () => {
         })
 
         await flushUpdates()
-        animateCalls = []
 
-        manager.isOpened.setValue(true)
-        await flushUpdates()
-
-        const widthAnimation = animateCalls.find(
-          (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'width' in kf),
-        )
-
-        expect(widthAnimation).toBeDefined()
-        expect((widthAnimation?.options as KeyframeAnimationOptions)?.easing).toBe(
-          'cubic-bezier(0.595, 0.425, 0.415, 0.845)',
-        )
-      })
-    })
-  })
-
-  it('should fill animation forwards', async () => {
-    await usingAsync(new Injector(), async (injector) => {
-      await usingAsync(createManager(), async (manager) => {
-        manager.isOpened.setValue(false)
-        const rootElement = document.getElementById('root') as HTMLDivElement
-
-        initializeShadeRoot({
-          injector,
-          rootElement,
-          jsxElement: <CommandPaletteInput manager={manager} />,
-        })
-
-        await flushUpdates()
-        animateCalls = []
+        const component = document.querySelector('shades-command-palette-input') as HTMLElement
+        const inputElement = component?.querySelector('input') as HTMLInputElement
+        inputElement.value = 'some text'
 
         manager.isOpened.setValue(true)
         await flushUpdates()
 
-        const widthAnimation = animateCalls.find(
-          (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'width' in kf),
-        )
-
-        expect(widthAnimation).toBeDefined()
-        expect((widthAnimation?.options as KeyframeAnimationOptions)?.fill).toBe('forwards')
+        expect(inputElement.value).toBe('some text')
       })
     })
   })

package/src/components/command-palette/command-palette-input.tsx

@@ -1,45 +1,13 @@
-import type { RefObject } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
 import { cssVariableTheme } from '../../services/css-variable-theme.js'
-import { promisifyAnimation } from '../../utils/promisify-animation.js'
 import type { CommandPaletteManager } from './command-palette-manager.js'
 
-const animateOpenState = async (
-  wrapperRef: RefObject<HTMLDivElement>,
-  inputRef: RefObject<HTMLInputElement>,
-  isOpened: boolean,
-) => {
-  const wrapper = wrapperRef.current
-  const input = inputRef.current
-  if (wrapper && input) {
-    if (isOpened) {
-      input.value = ''
-      await promisifyAnimation(wrapper, [{ width: '0%' }, { width: '100%' }], {
-        duration: 300,
-        fill: 'forwards',
-        easing: 'cubic-bezier(0.595, 0.425, 0.415, 0.845)',
-      })
-      input.focus()
-    } else {
-      await promisifyAnimation(wrapper, [{ width: '100%' }, { width: '0%' }], {
-        duration: 300,
-        fill: 'forwards',
-        easing: 'cubic-bezier(0.595, 0.425, 0.415, 0.845)',
-      })
-      input.value = ''
-    }
-  }
-}
-
 export const CommandPaletteInput = Shade<{ manager: CommandPaletteManager }>({
   shadowDomName: 'shades-command-palette-input',
   css: {
-    width: '0%',
+    width: '100%',
     fontFamily: cssVariableTheme.typography.fontFamily,
     overflow: 'hidden',
-    '&[data-opened]': {
-      width: '100%',
-    },
     '& input': {
       color: cssVariableTheme.text.primary,
       outline: 'none',
@@ -53,20 +21,20 @@ export const CommandPaletteInput = Shade<{ manager: CommandPaletteManager }>({
       letterSpacing: '0.01em',
     },
   },
-  render: ({ props, useObservable, useRef, useHostProps }) => {
-    const { manager } = props
-    const wrapperRef = useRef<HTMLDivElement>('wrapper')
+  render: ({ props, useObservable, useRef }) => {
     const inputRef = useRef<HTMLInputElement>('input')
-
-    const [isCurrentlyOpened] = useObservable('isOpened', manager.isOpened, {
-      onChange: (newValue) => void animateOpenState(wrapperRef, inputRef, newValue),
+    useObservable('isOpened', props.manager.isOpened, {
+      onChange: (isOpened) => {
+        if (inputRef.current) {
+          if (isOpened) {
+            inputRef.current.focus()
+          } else {
+            inputRef.current.value = ''
+          }
+        }
+      },
     })
-    useHostProps({ ...(isCurrentlyOpened ? { 'data-opened': '' } : {}) })
 
-    return (
-      <div ref={wrapperRef} style={{ width: isCurrentlyOpened ? '100%' : '0%', overflow: 'hidden' }}>
-        <input ref={inputRef} autofocus placeholder="Type to search commands..." />
-      </div>
-    )
+    return <input ref={inputRef} autofocus placeholder="Type to search commands..." />
   },
 })

package/src/components/command-palette/index.tsx

@@ -85,6 +85,10 @@ export const CommandPalette = Shade<CommandPaletteProps>({
             )
           }
 
+          if (!manager.isOpened.getValue()) {
+            manager.isOpened.setValue(true)
+          }
+
           void manager.getSuggestion({ injector, term: (ev.target as HTMLInputElement).value })
         }}
       >

package/src/components/drawer/index.spec.tsx

@@ -718,6 +718,70 @@ describe('Drawer component', () => {
     })
   })
 
+  describe('cleanup on disposal', () => {
+    it('should call removeDrawer on LayoutService when the component is removed from DOM', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const layoutService = new LayoutService(createMockElement())
+        injector.setExplicitInstance(layoutService, LayoutService)
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Drawer position="left" variant="collapsible">
+              <div>Drawer</div>
+            </Drawer>
+          ),
+        })
+
+        await flushUpdates()
+        expect(layoutService.drawerState.getValue().left).toBeDefined()
+
+        const removeDrawerSpy = vi.spyOn(layoutService, 'removeDrawer')
+        const drawer = document.querySelector('shade-drawer') as HTMLElement
+        drawer.remove()
+        await flushUpdates()
+        await new Promise((resolve) => setTimeout(resolve, 0))
+
+        expect(removeDrawerSpy).toHaveBeenCalledWith('left')
+      })
+    })
+
+    it('should only clean up its own drawer position on disposal', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const layoutService = new LayoutService(createMockElement())
+        injector.setExplicitInstance(layoutService, LayoutService)
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        layoutService.initDrawer('left', { open: true, width: '240px', variant: 'collapsible' })
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Drawer position="right" variant="temporary">
+              <div>Right Drawer</div>
+            </Drawer>
+          ),
+        })
+
+        await flushUpdates()
+        expect(layoutService.drawerState.getValue().right).toBeDefined()
+        expect(layoutService.drawerState.getValue().left).toBeDefined()
+
+        const removeDrawerSpy = vi.spyOn(layoutService, 'removeDrawer')
+        const drawer = document.querySelector('shade-drawer') as HTMLElement
+        drawer.remove()
+        await flushUpdates()
+        await new Promise((resolve) => setTimeout(resolve, 0))
+
+        expect(removeDrawerSpy).toHaveBeenCalledWith('right')
+        expect(removeDrawerSpy).not.toHaveBeenCalledWith('left')
+      })
+    })
+  })
+
   describe('preserving user interactions', () => {
     it('should not reset drawer state if already initialized', async () => {
       await usingAsync(new Injector(), async (injector) => {

package/src/components/drawer/index.tsx

@@ -143,6 +143,11 @@ export const Drawer = Shade<DrawerProps>({
       layoutService.setDrawerWidth(position, width)
     }
 
+    // Clean up drawer state from LayoutService when this component is disposed
+    useDisposable('drawer-cleanup', () => ({
+      [Symbol.dispose]: () => layoutService.removeDrawer(position),
+    }))
+
     // Subscribe to drawer state
     const [drawerState] = useObservable('drawerState', layoutService.drawerState)
     const isOpen = drawerState[position]?.open ?? false

package/src/components/noty-list.tsx

@@ -1,6 +1,5 @@
 import { createComponent, Shade } from '@furystack/shades'
 import { cssVariableTheme } from '../services/css-variable-theme.js'
-import { getTextColor } from '../services/get-text-color.js'
 import type { NotyModel } from '../services/noty-service.js'
 import { NotyService } from '../services/noty-service.js'
 import { ThemeProviderService } from '../services/theme-provider-service.js'
@@ -97,7 +96,6 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
 
     const themeProvider = injector.getInstance(ThemeProviderService)
     const colors = themeProvider.theme.palette[props.model.type]
-    const textColor = getTextColor(colors.main)
 
     const removeSelf = async () => {
       const hostEl = wrapperRef.current?.closest('shade-noty') as HTMLElement | null
@@ -123,7 +121,7 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
 
     useHostProps({
       'data-noty-type': props.model.type,
-      style: { '--noty-bg': colors.main, '--noty-text': textColor },
+      style: { '--noty-bg': colors.main, '--noty-text': colors.mainContrast },
     })
 
     return (

package/src/services/css-variable-theme.spec.ts

@@ -67,7 +67,7 @@ describe('css-variable-theme', () => {
       expect(cssVariableTheme.typography.fontWeight.bold).toBe('var(--shades-theme-typography-font-weight-bold)')
       expect(cssVariableTheme.typography.lineHeight.tight).toBe('var(--shades-theme-typography-line-height-tight)')
       expect(cssVariableTheme.typography.lineHeight.normal).toBe('var(--shades-theme-typography-line-height-normal)')
-      expect(cssVariableTheme.typography.textShadow).toBe('var(--shades-theme-typography-text-shadow, none)')
+      expect(cssVariableTheme.typography.textShadow).toBe('var(--shades-theme-typography-text-shadow)')
     })
 
     it('should have transition properties with CSS variable references', () => {
@@ -446,6 +446,48 @@ describe('css-variable-theme', () => {
       expect(root.style.getPropertyValue('--shades-theme-spacing-md')).toBe('16px')
       expect(root.style.getPropertyValue('--shades-theme-spacing-xl')).toBe('32px')
     })
+
+    it('should set CSS variables on a custom root element instead of :root', () => {
+      const customRoot = document.createElement('div')
+      document.body.appendChild(customRoot)
+
+      useThemeCssVariables(
+        {
+          text: { primary: '#ff0000' },
+          divider: '#00ff00',
+        },
+        customRoot,
+      )
+
+      expect(customRoot.style.getPropertyValue('--shades-theme-text-primary')).toBe('#ff0000')
+      expect(customRoot.style.getPropertyValue('--shades-theme-divider')).toBe('#00ff00')
+      expect(root.style.getPropertyValue('--shades-theme-text-primary')).toBe('')
+
+      customRoot.remove()
+    })
+
+    it('should scope nested palette variables to custom root element', () => {
+      const customRoot = document.createElement('div')
+      document.body.appendChild(customRoot)
+
+      useThemeCssVariables(
+        {
+          palette: {
+            primary: {
+              main: '#1976d2',
+              mainContrast: '#ffffff',
+            },
+          },
+        },
+        customRoot,
+      )
+
+      expect(customRoot.style.getPropertyValue('--shades-theme-palette-primary-main')).toBe('#1976d2')
+      expect(customRoot.style.getPropertyValue('--shades-theme-palette-primary-main-contrast')).toBe('#ffffff')
+      expect(root.style.getPropertyValue('--shades-theme-palette-primary-main')).toBe('')
+
+      customRoot.remove()
+    })
   })
 
   describe('buildTransition', () => {

package/src/services/css-variable-theme.ts

@@ -17,7 +17,7 @@ export const cssVariableTheme = {
   background: {
     default: 'var(--shades-theme-background-default)',
     paper: 'var(--shades-theme-background-paper)',
-    paperImage: 'var(--shades-theme-background-paper-image, none)',
+    paperImage: 'var(--shades-theme-background-paper-image)',
   },
   palette: {
     primary: {
@@ -87,7 +87,7 @@ export const cssVariableTheme = {
       lg: 'var(--shades-theme-shape-border-radius-lg)',
       full: 'var(--shades-theme-shape-border-radius-full)',
     },
-    borderWidth: 'var(--shades-theme-shape-border-width, 0px)',
+    borderWidth: 'var(--shades-theme-shape-border-width)',
   },
   shadows: {
     none: 'var(--shades-theme-shadows-none)',
@@ -127,7 +127,7 @@ export const cssVariableTheme = {
       wider: 'var(--shades-theme-typography-letter-spacing-wider)',
       widest: 'var(--shades-theme-typography-letter-spacing-widest)',
     },
-    textShadow: 'var(--shades-theme-typography-text-shadow, none)',
+    textShadow: 'var(--shades-theme-typography-text-shadow)',
   },
   transitions: {
     duration: {
@@ -222,8 +222,8 @@ const assignValue = <T extends object>(
     }
   })
 }
-export const useThemeCssVariables = (theme: DeepPartial<Theme>) => {
-  const root = document.querySelector(':root') as HTMLElement
+export const useThemeCssVariables = (theme: DeepPartial<Theme>, root?: HTMLElement) => {
+  root ??= document.querySelector(':root') as HTMLElement
   assignValue(cssVariableTheme, theme, root)
 
   if (window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches) {

package/src/services/layout-service.spec.ts

@@ -221,6 +221,15 @@ describe('LayoutService', () => {
         })
       })
 
+      it('should overwrite existing drawer config', () => {
+        using(new LayoutService(mockElement as unknown as HTMLElement), (service) => {
+          service.initDrawer('left', { open: true, width: '240px', variant: 'collapsible' })
+          service.initDrawer('left', { open: false, width: '300px', variant: 'permanent' })
+
+          expect(service.drawerState.getValue().left).toEqual({ open: false, width: '300px', variant: 'permanent' })
+        })
+      })
+
       it('should initialize drawer with all variant types', () => {
         using(new LayoutService(mockElement as unknown as HTMLElement), (service) => {
           service.initDrawer('left', { open: true, width: '240px', variant: 'permanent' })
@@ -234,6 +243,71 @@ describe('LayoutService', () => {
         })
       })
     })
+
+    describe('removeDrawer', () => {
+      it('should remove left drawer state', () => {
+        using(new LayoutService(mockElement as unknown as HTMLElement), (service) => {
+          service.initDrawer('left', { open: true, width: '240px', variant: 'collapsible' })
+
+          service.removeDrawer('left')
+
+          expect(service.drawerState.getValue().left).toBeUndefined()
+        })
+      })
+
+      it('should remove right drawer state', () => {
+        using(new LayoutService(mockElement as unknown as HTMLElement), (service) => {
+          service.initDrawer('right', { open: true, width: '200px', variant: 'temporary' })
+
+          service.removeDrawer('right')
+
+          expect(service.drawerState.getValue().right).toBeUndefined()
+        })
+      })
+
+      it('should not affect the other drawer when removing one', () => {
+        using(new LayoutService(mockElement as unknown as HTMLElement), (service) => {
+          service.initDrawer('left', { open: true, width: '240px', variant: 'collapsible' })
+          service.initDrawer('right', { open: true, width: '200px', variant: 'temporary' })
+
+          service.removeDrawer('left')
+
+          expect(service.drawerState.getValue().left).toBeUndefined()
+          expect(service.drawerState.getValue().right).toEqual({ open: true, width: '200px', variant: 'temporary' })
+        })
+      })
+
+      it('should be a no-op if the drawer does not exist', () => {
+        using(new LayoutService(mockElement as unknown as HTMLElement), (service) => {
+          const stateBefore = service.drawerState.getValue()
+
+          service.removeDrawer('left')
+
+          expect(service.drawerState.getValue()).toEqual(stateBefore)
+        })
+      })
+
+      it('should be a no-op if the service is already disposed', () => {
+        const service = new LayoutService(mockElement as unknown as HTMLElement)
+        service.initDrawer('left', { open: true, width: '240px', variant: 'collapsible' })
+        service[Symbol.dispose]()
+
+        expect(() => service.removeDrawer('left')).not.toThrow()
+      })
+
+      it('should reset CSS variables after removing a drawer', () => {
+        using(new LayoutService(mockElement as unknown as HTMLElement), (service) => {
+          service.initDrawer('left', { open: true, width: '240px', variant: 'collapsible' })
+          mockSetProperty.mockClear()
+
+          service.removeDrawer('left')
+
+          expect(mockSetProperty).toHaveBeenCalledWith('--layout-drawer-left-width', '0px')
+          expect(mockSetProperty).toHaveBeenCalledWith('--layout-drawer-left-configured-width', '0px')
+          expect(mockSetProperty).toHaveBeenCalledWith('--layout-content-margin-left', '0px')
+        })
+      })
+    })
   })
 
   describe('CSS Variables', () => {

package/src/services/layout-service.ts

@@ -237,6 +237,24 @@ export class LayoutService implements Disposable {
     })
   }
 
+  /**
+   * Removes a drawer from the state, clearing its configuration.
+   * Use this when a Drawer component is unmounted to prevent stale state
+   * from affecting content margins.
+   *
+   * @param position - Which drawer to remove ('left' or 'right')
+   */
+  public removeDrawer(position: 'left' | 'right'): void {
+    if (this.drawerState.isDisposed) return
+
+    const currentState = this.drawerState.getValue()
+
+    if (currentState[position]) {
+      const { [position]: _, ...rest } = currentState
+      this.drawerState.setValue(rest)
+    }
+  }
+
   /**
    * Sets the top gap spacing between AppBar and content.
    *