@furystack/shades-common-components 13.4.0 → 13.5.0

package/src/components/page-layout/index.spec.tsx

@@ -879,4 +879,177 @@ describe('PageLayout component', () => {
       })
     })
   })
+
+  describe('Contained Mode', () => {
+    it('should set data-contained attribute on host when contained is true', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <PageLayout contained>
+              <div>Content</div>
+            </PageLayout>
+          ),
+        })
+
+        await flushUpdates()
+        const pageLayout = document.querySelector('shade-page-layout')
+        expect(pageLayout?.hasAttribute('data-contained')).toBe(true)
+      })
+    })
+
+    it('should not set data-contained attribute when contained is not set', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <PageLayout>
+              <div>Content</div>
+            </PageLayout>
+          ),
+        })
+
+        await flushUpdates()
+        const pageLayout = document.querySelector('shade-page-layout')
+        expect(pageLayout?.hasAttribute('data-contained')).toBe(false)
+      })
+    })
+
+    it('should have absolute positioning when contained', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <PageLayout contained>
+              <div>Content</div>
+            </PageLayout>
+          ),
+        })
+
+        await flushUpdates()
+        const pageLayout = document.querySelector('shade-page-layout') as HTMLElement
+        const computedStyle = window.getComputedStyle(pageLayout)
+        expect(computedStyle.position).toBe('absolute')
+      })
+    })
+
+    it('should work with AppBar and drawers in contained mode', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <PageLayout
+              contained
+              appBar={{
+                variant: 'permanent',
+                component: <div>AppBar</div>,
+              }}
+              drawer={{
+                left: {
+                  variant: 'collapsible',
+                  component: <div>Left Drawer</div>,
+                },
+              }}
+            >
+              <div>Content</div>
+            </PageLayout>
+          ),
+        })
+
+        await flushUpdates()
+
+        const pageLayout = document.querySelector('shade-page-layout') as HTMLElement & { injector: Injector }
+        expect(pageLayout.hasAttribute('data-contained')).toBe(true)
+        expect(document.body.innerHTML).toContain('page-layout-appbar')
+        expect(document.body.innerHTML).toContain('page-layout-drawer-left')
+        expect(document.body.innerHTML).toContain('page-layout-content')
+
+        const layoutService = pageLayout.injector.getInstance(LayoutService)
+        expect(layoutService.drawerState.getValue().left?.open).toBe(true)
+      })
+    })
+
+    it('should support drawer toggle in contained mode', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <PageLayout
+              contained
+              drawer={{
+                left: {
+                  variant: 'collapsible',
+                  component: <div>Left Drawer</div>,
+                },
+              }}
+            >
+              <div>Content</div>
+            </PageLayout>
+          ),
+        })
+
+        await flushUpdates()
+
+        const pageLayout = document.querySelector('shade-page-layout') as HTMLElement & { injector: Injector }
+        const layoutService = pageLayout.injector.getInstance(LayoutService)
+
+        expect(pageLayout.hasAttribute('data-drawer-left-closed')).toBe(false)
+
+        layoutService.setDrawerOpen('left', false)
+        await flushUpdates()
+
+        expect(pageLayout.hasAttribute('data-drawer-left-closed')).toBe(true)
+      })
+    })
+
+    it('should support temporary drawer backdrop click in contained mode', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <PageLayout
+              contained
+              drawer={{
+                left: {
+                  variant: 'temporary',
+                  defaultOpen: true,
+                  component: <div>Temporary Drawer</div>,
+                },
+              }}
+            >
+              <div>Content</div>
+            </PageLayout>
+          ),
+        })
+
+        await flushUpdates()
+        const pageLayout = document.querySelector('shade-page-layout')
+        expect(pageLayout?.hasAttribute('data-backdrop-visible')).toBe(true)
+
+        const backdrop = document.querySelector('.page-layout-drawer-backdrop') as HTMLElement
+        backdrop.click()
+        await flushUpdates()
+
+        expect(pageLayout?.hasAttribute('data-drawer-left-closed')).toBe(true)
+      })
+    })
+  })
 })

package/src/components/page-layout/index.tsx

@@ -46,6 +46,12 @@ export type PageLayoutProps = {
   topGap?: string
   /** Gap between the drawers and the content area (CSS value). Default: '0px' */
   sideGap?: string
+  /**
+   * When true, uses `position: absolute` instead of `position: fixed` so the
+   * layout fills its nearest positioned ancestor rather than the viewport.
+   * This enables nesting PageLayout instances (e.g. in a showcase grid).
+   */
+  contained?: boolean
 }
 
 const DEFAULT_APPBAR_HEIGHT = '48px'
@@ -102,8 +108,8 @@ export const PageLayout = Shade<PageLayoutProps>({
       margin: '0',
     },
 
-    // AppBar container
-    '& .page-layout-appbar': {
+    // AppBar container (> * > scopes to the wrapper div to prevent bleeding into nested PageLayouts)
+    '& > * > .page-layout-appbar': {
       position: 'fixed',
       top: '0',
       left: '0',
@@ -114,18 +120,18 @@ export const PageLayout = Shade<PageLayoutProps>({
     },
 
     // Auto-hide AppBar styles (controlled via host data attributes)
-    '&[data-appbar-auto-hide] .page-layout-appbar': {
+    '&[data-appbar-auto-hide] > * > .page-layout-appbar': {
       top: 'calc(-1 * var(--layout-appbar-height, 48px))',
     },
-    '&[data-appbar-auto-hide] .page-layout-appbar:hover': {
+    '&[data-appbar-auto-hide] > * > .page-layout-appbar:hover': {
       top: '0',
     },
-    '&[data-appbar-auto-hide][data-appbar-visible] .page-layout-appbar': {
+    '&[data-appbar-auto-hide][data-appbar-visible] > * > .page-layout-appbar': {
       top: '0',
     },
 
     // Drawer containers - use CSS transitions
-    '& .page-layout-drawer': {
+    '& > * > .page-layout-drawer': {
       position: 'fixed',
       top: 'var(--layout-appbar-height, 48px)',
       bottom: '0',
@@ -135,13 +141,13 @@ export const PageLayout = Shade<PageLayoutProps>({
       backgroundImage: cssVariableTheme.background.paperImage,
       transition: `transform ${cssVariableTheme.transitions.duration.slow} ${cssVariableTheme.transitions.easing.easeInOut}`,
     },
-    '& .page-layout-drawer-left': {
+    '& > * > .page-layout-drawer-left': {
       left: '0',
       width: 'var(--layout-drawer-left-configured-width, 240px)',
       borderRight: `1px solid ${cssVariableTheme.divider}`,
       transform: 'translateX(0)',
     },
-    '& .page-layout-drawer-right': {
+    '& > * > .page-layout-drawer-right': {
       right: '0',
       width: 'var(--layout-drawer-right-configured-width, 240px)',
       borderLeft: `1px solid ${cssVariableTheme.divider}`,
@@ -149,17 +155,17 @@ export const PageLayout = Shade<PageLayoutProps>({
     },
 
     // Drawer closed states (controlled via host data attributes)
-    '&[data-drawer-left-closed] .page-layout-drawer-left': {
+    '&[data-drawer-left-closed] > * > .page-layout-drawer-left': {
       transform: 'translateX(-100%)',
       pointerEvents: 'none',
     },
-    '&[data-drawer-right-closed] .page-layout-drawer-right': {
+    '&[data-drawer-right-closed] > * > .page-layout-drawer-right': {
       transform: 'translateX(100%)',
       pointerEvents: 'none',
     },
 
     // Temporary drawer backdrop
-    '& .page-layout-drawer-backdrop': {
+    '& > * > .page-layout-drawer-backdrop': {
       position: 'fixed',
       top: '0',
       left: '0',
@@ -171,13 +177,28 @@ export const PageLayout = Shade<PageLayoutProps>({
       pointerEvents: 'none',
       transition: `opacity ${cssVariableTheme.transitions.duration.slow} ${cssVariableTheme.transitions.easing.easeInOut}`,
     },
-    '&[data-backdrop-visible] .page-layout-drawer-backdrop': {
+    '&[data-backdrop-visible] > * > .page-layout-drawer-backdrop': {
       opacity: '1',
       pointerEvents: 'auto',
     },
 
+    // Contained mode - use absolute positioning instead of fixed so the layout
+    // fills its nearest positioned ancestor rather than the viewport
+    '&[data-contained]': {
+      position: 'absolute',
+    },
+    '&[data-contained] > * > .page-layout-appbar': {
+      position: 'absolute',
+    },
+    '&[data-contained] > * > .page-layout-drawer': {
+      position: 'absolute',
+    },
+    '&[data-contained] > * > .page-layout-drawer-backdrop': {
+      position: 'absolute',
+    },
+
     // Content area - uses CSS variables for positioning
-    '& .page-layout-content': {
+    '& > * > .page-layout-content': {
       position: 'absolute',
       top: '0',
       bottom: '0',
@@ -327,6 +348,7 @@ export const PageLayout = Shade<PageLayoutProps>({
     const rightContentMargin = layoutService.getContentMarginForPosition('right')
 
     useHostProps({
+      ...(props.contained ? { 'data-contained': '' } : {}),
       ...(!isLeftOpen ? { 'data-drawer-left-closed': '' } : {}),
       ...(!isRightOpen ? { 'data-drawer-right-closed': '' } : {}),
       ...(props.appBar?.variant === 'auto-hide' ? { 'data-appbar-auto-hide': '' } : {}),

package/src/components/result.tsx

@@ -40,16 +40,19 @@ const statusColorMap: Record<ResultStatus, string> = {
   '500': paletteMainColors.error.main,
 }
 
-const defaultIcons: Record<ResultStatus, JSX.Element> = {
-  success: (<Icon icon={checkCircle} size={64} />) as unknown as JSX.Element,
-  error: (<Icon icon={errorCircle} size={64} />) as unknown as JSX.Element,
-  warning: (<Icon icon={warningIcon} size={64} />) as unknown as JSX.Element,
-  info: (<Icon icon={infoIcon} size={64} />) as unknown as JSX.Element,
-  '403': (<Icon icon={forbidden} size={64} />) as unknown as JSX.Element,
-  '404': (<Icon icon={searchOff} size={64} />) as unknown as JSX.Element,
-  '500': (<Icon icon={serverError} size={64} />) as unknown as JSX.Element,
+const defaultIconDefs: Record<ResultStatus, typeof checkCircle> = {
+  success: checkCircle,
+  error: errorCircle,
+  warning: warningIcon,
+  info: infoIcon,
+  '403': forbidden,
+  '404': searchOff,
+  '500': serverError,
 }
 
+const getDefaultIcon = (status: ResultStatus): JSX.Element =>
+  (<Icon icon={defaultIconDefs[status]} size={64} />) as unknown as JSX.Element
+
 const defaultTitles: Record<ResultStatus, string> = {
   success: 'Success',
   error: 'Error',
@@ -114,7 +117,7 @@ export const Result = Shade<ResultProps>({
   render: ({ props, children, useHostProps }) => {
     const { status, title, subtitle, icon, style } = props
 
-    const displayIcon = icon ?? defaultIcons[status]
+    const displayIcon = icon ?? getDefaultIcon(status)
     const statusColor = statusColorMap[status]
 
     useHostProps({
@@ -146,4 +149,8 @@ export const Result = Shade<ResultProps>({
   },
 })
 
-export { defaultIcons as resultDefaultIcons, defaultTitles as resultDefaultTitles }
+export {
+  getDefaultIcon as resultGetDefaultIcon,
+  defaultIconDefs as resultDefaultIconDefs,
+  defaultTitles as resultDefaultTitles,
+}

package/src/components/suggest/index.tsx

@@ -83,21 +83,23 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
     useHostProps({
       'data-opened': isOpened ? '' : undefined,
     })
-    manager.isLoading.subscribe((isLoading) => {
-      const loader = loaderRef.current
-      if (!loader) return
-      if (isLoading) {
-        void promisifyAnimation(loader, [{ opacity: 0 }, { opacity: 1 }], {
-          duration: 100,
-          fill: 'forwards',
-        })
-      } else {
-        void promisifyAnimation(loader, [{ opacity: 1 }, { opacity: 0 }], {
-          duration: 100,
-          fill: 'forwards',
-        })
-      }
-    })
+    useDisposable('isLoadingSubscription', () =>
+      manager.isLoading.subscribe((isLoading) => {
+        const loader = loaderRef.current
+        if (!loader) return
+        if (isLoading) {
+          void promisifyAnimation(loader, [{ opacity: 0 }, { opacity: 1 }], {
+            duration: 100,
+            fill: 'forwards',
+          })
+        } else {
+          void promisifyAnimation(loader, [{ opacity: 1 }, { opacity: 0 }], {
+            duration: 100,
+            fill: 'forwards',
+          })
+        }
+      }),
+    )
     useDisposable('onSelectSuggestion', () =>
       manager.subscribe('onSelectSuggestion', props.onSelectSuggestion as (entry: unknown) => void),
     )
@@ -133,6 +135,7 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
           <div className="post-controls">
             <span ref={loaderRef} style={{ display: 'inline-flex' }}>
               <Loader
+                // eslint-disable-next-line furystack/no-direct-get-value-in-render -- Initial opacity only; animated transitions handled by isLoadingSubscription via DOM
                 style={{ width: '20px', height: '20px', opacity: manager.isLoading.getValue() ? '1' : '0' }}
                 delay={0}
                 borderWidth={4}

package/src/components/tree/tree.tsx

@@ -89,6 +89,7 @@ export const Tree: <T>(props: TreeProps<T>, children: ChildrenList) => JSX.Eleme
 
     const [flattenedNodes] = useObservable('flattenedNodes', props.treeService.flattenedNodes)
 
+    // eslint-disable-next-line furystack/require-use-observable-for-render -- Used as persistent ref, not reactive state; read and written synchronously in same render cycle
     const previousItemsRef = useDisposable('previousTreeItems', () => new ObservableValue<Set<unknown>>(new Set()))
     const previousItems = previousItemsRef.getValue()
     const currentItems = new Set<unknown>(flattenedNodes.map((n) => n.item))