@furystack/shades-common-components 10.0.35 → 12.0.0

package/esm/components/drawer/index.d.ts

@@ -0,0 +1,56 @@
+import { type ScreenSize } from '@furystack/shades';
+export { DrawerToggleButton, type DrawerToggleButtonProps } from './drawer-toggle-button.js';
+/**
+ * Props for the Drawer component.
+ */
+export type DrawerProps = {
+    /** Position of the drawer */
+    position: 'left' | 'right';
+    /** Drawer behavior variant */
+    variant: 'permanent' | 'collapsible' | 'temporary';
+    /** Width of the drawer (CSS value). Default: '240px' */
+    width?: string;
+    /** Initial open state for collapsible/temporary drawers. Default: true for collapsible, false for temporary */
+    defaultOpen?: boolean;
+    /** Auto-collapse the drawer below this breakpoint (uses ScreenService) */
+    collapseOnBreakpoint?: ScreenSize;
+};
+/**
+ * Standalone Drawer component for sidebars and navigation panels.
+ *
+ * Works with LayoutService for state management and supports three variants:
+ * - **permanent**: Always visible, cannot be closed
+ * - **collapsible**: Can be toggled open/closed, pushes content
+ * - **temporary**: Overlays content with backdrop, closes on backdrop click
+ *
+ * Supports responsive behavior via `collapseOnBreakpoint` prop which
+ * auto-collapses the drawer below a specified screen size.
+ *
+ * @example
+ * ```tsx
+ * // Simple collapsible drawer
+ * <Drawer position="left" variant="collapsible">
+ *   <nav>Navigation items...</nav>
+ * </Drawer>
+ *
+ * // Responsive drawer that collapses on mobile
+ * <Drawer
+ *   position="left"
+ *   variant="collapsible"
+ *   collapseOnBreakpoint="md"
+ * >
+ *   <nav>Navigation items...</nav>
+ * </Drawer>
+ *
+ * // Temporary drawer (mobile navigation)
+ * <Drawer position="left" variant="temporary">
+ *   <nav>Mobile navigation...</nav>
+ * </Drawer>
+ * ```
+ */
+export declare const Drawer: (props: DrawerProps & Omit<Partial<HTMLElement>, "style"> & {
+    style?: Partial<CSSStyleDeclaration>;
+} & {
+    ref?: import("@furystack/shades").RefObject<Element>;
+}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/esm/components/drawer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyC,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAK1F,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,MAAM,2BAA2B,CAAA;AAE5F;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,6BAA6B;IAC7B,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAA;IAC1B,8BAA8B;IAC9B,OAAO,EAAE,WAAW,GAAG,aAAa,GAAG,WAAW,CAAA;IAClD,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,+GAA+G;IAC/G,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,0EAA0E;IAC1E,oBAAoB,CAAC,EAAE,UAAU,CAAA;CAClC,CAAA;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,MAAM;;;;sEAwKjB,CAAA"}

package/esm/components/drawer/index.js

@@ -0,0 +1,172 @@
+import { ScreenService, Shade, createComponent } from '@furystack/shades';
+import { cssVariableTheme } from '../../services/css-variable-theme.js';
+import { LayoutService } from '../../services/layout-service.js';
+export { DrawerToggleButton } from './drawer-toggle-button.js';
+const DEFAULT_DRAWER_WIDTH = '240px';
+/**
+ * Standalone Drawer component for sidebars and navigation panels.
+ *
+ * Works with LayoutService for state management and supports three variants:
+ * - **permanent**: Always visible, cannot be closed
+ * - **collapsible**: Can be toggled open/closed, pushes content
+ * - **temporary**: Overlays content with backdrop, closes on backdrop click
+ *
+ * Supports responsive behavior via `collapseOnBreakpoint` prop which
+ * auto-collapses the drawer below a specified screen size.
+ *
+ * @example
+ * ```tsx
+ * // Simple collapsible drawer
+ * <Drawer position="left" variant="collapsible">
+ *   <nav>Navigation items...</nav>
+ * </Drawer>
+ *
+ * // Responsive drawer that collapses on mobile
+ * <Drawer
+ *   position="left"
+ *   variant="collapsible"
+ *   collapseOnBreakpoint="md"
+ * >
+ *   <nav>Navigation items...</nav>
+ * </Drawer>
+ *
+ * // Temporary drawer (mobile navigation)
+ * <Drawer position="left" variant="temporary">
+ *   <nav>Mobile navigation...</nav>
+ * </Drawer>
+ * ```
+ */
+export const Drawer = Shade({
+    shadowDomName: 'shade-drawer',
+    css: {
+        display: 'block',
+        // Drawer container
+        '& .drawer-container': {
+            position: 'fixed',
+            top: 'var(--layout-content-margin-top, 0px)',
+            bottom: '0',
+            zIndex: '1000',
+            overflow: 'hidden',
+            transition: `width ${cssVariableTheme.transitions.duration.slow} ${cssVariableTheme.transitions.easing.easeInOut}, transform ${cssVariableTheme.transitions.duration.slow} ${cssVariableTheme.transitions.easing.easeInOut}`,
+            background: cssVariableTheme.background.paper,
+        },
+        // Left drawer positioning
+        '& .drawer-container.drawer-left': {
+            left: '0',
+            borderRight: `1px solid ${cssVariableTheme.divider}`,
+        },
+        // Right drawer positioning
+        '& .drawer-container.drawer-right': {
+            right: '0',
+            borderLeft: `1px solid ${cssVariableTheme.divider}`,
+        },
+        // Closed state for permanent/collapsible
+        '& .drawer-container.closed': {
+            width: '0 !important',
+            overflow: 'hidden',
+        },
+        // Content wrapper for proper overflow
+        '& .drawer-content': {
+            height: '100%',
+            overflow: 'auto',
+        },
+        // Backdrop for temporary drawer
+        '& .drawer-backdrop': {
+            position: 'fixed',
+            top: '0',
+            left: '0',
+            right: '0',
+            bottom: '0',
+            backgroundColor: cssVariableTheme.action.backdrop,
+            zIndex: '999',
+            opacity: '0',
+            pointerEvents: 'none',
+            transition: `opacity ${cssVariableTheme.transitions.duration.slow} ${cssVariableTheme.transitions.easing.easeInOut}`,
+        },
+        '& .drawer-backdrop.visible': {
+            opacity: '1',
+            pointerEvents: 'auto',
+        },
+    },
+    render: ({ props, children, injector, useObservable, useDisposable }) => {
+        const layoutService = injector.getInstance(LayoutService);
+        const screenService = injector.getInstance(ScreenService);
+        const { position, variant, width = DEFAULT_DRAWER_WIDTH, defaultOpen, collapseOnBreakpoint } = props;
+        // Determine initial open state based on variant
+        const getInitialOpenState = () => {
+            if (variant === 'permanent')
+                return true;
+            if (variant === 'temporary')
+                return defaultOpen ?? false;
+            // collapsible defaults to true
+            return defaultOpen ?? true;
+        };
+        // Initialize drawer state if not already set
+        const currentState = layoutService.drawerState.getValue()[position];
+        if (!currentState) {
+            layoutService.initDrawer(position, {
+                open: getInitialOpenState(),
+                width,
+                variant,
+            });
+        }
+        else if (currentState.width !== width) {
+            // Update width if it changed
+            layoutService.setDrawerWidth(position, width);
+        }
+        // Subscribe to drawer state
+        const [drawerState] = useObservable('drawerState', layoutService.drawerState);
+        const isOpen = drawerState[position]?.open ?? false;
+        // Set up responsive breakpoint listener
+        useDisposable(`breakpoint-listener-${collapseOnBreakpoint}`, () => {
+            if (!collapseOnBreakpoint || variant === 'permanent') {
+                return { [Symbol.dispose]: () => { } };
+            }
+            const breakpointObservable = screenService.screenSize.atLeast[collapseOnBreakpoint];
+            const subscription = breakpointObservable.subscribe((isAtLeast) => {
+                // When screen becomes smaller than breakpoint, close the drawer
+                // When screen becomes larger than breakpoint, open the drawer (for collapsible)
+                if (variant === 'collapsible') {
+                    layoutService.setDrawerOpen(position, isAtLeast);
+                }
+                else if (variant === 'temporary' && isAtLeast) {
+                    // For temporary drawers, close when screen is large enough
+                    layoutService.setDrawerOpen(position, false);
+                }
+            });
+            return subscription;
+        });
+        // Handle backdrop click for temporary drawer
+        const handleBackdropClick = () => {
+            if (variant === 'temporary') {
+                layoutService.setDrawerOpen(position, false);
+            }
+        };
+        // Calculate drawer style
+        const getDrawerStyle = () => {
+            if (variant === 'temporary') {
+                // Temporary drawers use transform for slide animation
+                return {
+                    width,
+                    transform: isOpen ? 'translateX(0)' : position === 'left' ? 'translateX(-100%)' : 'translateX(100%)',
+                };
+            }
+            // Permanent and collapsible drawers animate width
+            return {
+                width: isOpen ? width : '0',
+            };
+        };
+        // Build container class list
+        const containerClasses = ['drawer-container', `drawer-${position}`];
+        if (!isOpen && variant !== 'temporary') {
+            containerClasses.push('closed');
+        }
+        // Show backdrop only for open temporary drawers
+        const showBackdrop = variant === 'temporary' && isOpen;
+        return (createComponent(createComponent, null,
+            variant === 'temporary' && (createComponent("div", { className: `drawer-backdrop ${showBackdrop ? 'visible' : ''}`, onclick: handleBackdropClick, "data-testid": `drawer-backdrop-${position}` })),
+            createComponent("div", { className: containerClasses.join(' '), style: getDrawerStyle(), "data-testid": `drawer-${position}`, "data-variant": variant, "data-open": isOpen ? 'true' : 'false' },
+                createComponent("div", { className: "drawer-content" }, children))));
+    },
+});
+//# sourceMappingURL=index.js.map

package/esm/components/drawer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/drawer/index.tsx"],"names":[],"mappings":"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"}

package/esm/components/drawer/index.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.spec.d.ts.map

package/esm/components/drawer/index.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.spec.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/index.spec.tsx"],"names":[],"mappings":""}