@dashadmin/dash-admin 1.3.73 → 1.3.74-srcfree.2

package/src/components/misc/HorizontalScroller.tsx

@@ -1,225 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Box, IconButton, SxProps, Theme } from '@mui/material';
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-
-export interface IHorizontalScrollerProps {
-    children: React.ReactNode;
-    /** Pixels moved per arrow press. Default 240. */
-    step?: number;
-    /** Hide the arrows and rely on swipe/wheel alone. */
-    hideArrows?: boolean;
-    /** Width of the soft fade at each scrollable edge, in px. 0 disables it. */
-    fade?: number;
-    /** sx applied to the scrolling track (not the outer wrapper). */
-    trackSx?: SxProps<Theme>;
-    sx?: SxProps<Theme>;
-    className?: string;
-    ariaLabel?: string;
-}
-
-/**
- * A horizontally scrollable strip with end-aware arrows, swipe and drag.
- *
- * Extracted from the pattern kt-tabs' CategorySelector already proved on the
- * create-tab screen, so the dashboard shortcut strip behaves identically to the
- * category carousel rather than inventing a second set of scrolling manners.
- *
- * Three input methods, deliberately, because they cover different users on the
- * same screen: arrows for mouse users who expect affordances, touch drag for a
- * tablet on the counter, and mouse drag for a trackpad. Native wheel/trackpad
- * scrolling keeps working because the track is a real overflow container rather
- * than a transform.
- *
- * The arrows disable at each end instead of disappearing: a control that
- * vanishes shifts the layout under the pointer mid-interaction.
- */
-export const HorizontalScroller: React.FC<IHorizontalScrollerProps> = ({
-    children,
-    step = 240,
-    hideArrows = false,
-    fade = 56,
-    trackSx,
-    sx,
-    className,
-    ariaLabel,
-}) => {
-    const trackRef = useRef<HTMLDivElement>(null);
-
-    const [canScrollLeft, setCanScrollLeft] = useState(false);
-    const [canScrollRight, setCanScrollRight] = useState(false);
-
-    const [isDragging, setIsDragging] = useState(false);
-    const dragStartX = useRef(0);
-    const scrollStartX = useRef(0);
-
-    const updateArrows = useCallback(() => {
-        const el = trackRef.current;
-        if (!el) return;
-
-        const { scrollLeft, scrollWidth, clientWidth } = el;
-        setCanScrollLeft(scrollLeft > 1);
-        // -1 for sub-pixel rounding: at the exact end these can differ by a
-        // fraction and leave the right arrow enabled forever.
-        setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);
-    }, []);
-
-    useEffect(() => {
-        const el = trackRef.current;
-        if (!el) return undefined;
-
-        el.addEventListener('scroll', updateArrows, { passive: true });
-        updateArrows();
-
-        // Content and container both change after mount — resources load, the
-        // panel is resized, the window changes. Without observing, the arrows
-        // report the state at first paint forever.
-        const observer = new ResizeObserver(updateArrows);
-        observer.observe(el);
-        Array.from(el.children).forEach((child) => observer.observe(child));
-
-        return () => {
-            el.removeEventListener('scroll', updateArrows);
-            observer.disconnect();
-        };
-    }, [updateArrows, children]);
-
-    const scrollBy = useCallback((direction: 'left' | 'right') => {
-        trackRef.current?.scrollBy({
-            left: direction === 'left' ? -step : step,
-            behavior: 'smooth',
-        });
-    }, [step]);
-
-    const onTouchStart = useCallback((e: React.TouchEvent) => {
-        dragStartX.current = e.touches[0].clientX;
-        scrollStartX.current = trackRef.current?.scrollLeft ?? 0;
-    }, []);
-
-    const onTouchMove = useCallback((e: React.TouchEvent) => {
-        const el = trackRef.current;
-        if (!el) return;
-        el.scrollLeft = scrollStartX.current + (dragStartX.current - e.touches[0].clientX);
-    }, []);
-
-    const onMouseDown = useCallback((e: React.MouseEvent) => {
-        setIsDragging(true);
-        dragStartX.current = e.clientX;
-        scrollStartX.current = trackRef.current?.scrollLeft ?? 0;
-    }, []);
-
-    const onMouseMove = useCallback((e: React.MouseEvent) => {
-        const el = trackRef.current;
-        if (!isDragging || !el) return;
-        // Without this, dragging across cards selects their labels instead.
-        e.preventDefault();
-        el.scrollLeft = scrollStartX.current + (dragStartX.current - e.clientX);
-    }, [isDragging]);
-
-    const endDrag = useCallback(() => {
-        setIsDragging(false);
-        updateArrows();
-    }, [updateArrows]);
-
-    /**
-     * Arrows sit ON the strip rather than beside it.
-     *
-     * As flex siblings they stole ~80px of width from the track on every
-     * screen, including the ones with nothing to scroll. Overlaying them means
-     * the cards use the full width, and the arrow only appears where there is
-     * something in that direction — so it reads as an affordance rather than
-     * permanent chrome.
-     */
-    const arrowSx = (side: 'left' | 'right', enabled: boolean) => ({
-        position: 'absolute' as const,
-        top: '50%',
-        transform: 'translateY(-50%)',
-        [side]: 4,
-        zIndex: 2,
-        // Hidden, not just dimmed, at the end of its travel — an overlay
-        // control that cannot do anything is only covering a card.
-        opacity: enabled ? 1 : 0,
-        pointerEvents: enabled ? ('auto' as const) : ('none' as const),
-        transition: 'opacity 0.2s ease',
-        bgcolor: 'background.paper',
-        boxShadow: 2,
-        '&:hover': { bgcolor: 'background.paper' },
-    });
-
-    /**
-     * Fade the content itself at any edge that can still scroll.
-     *
-     * A mask rather than a gradient overlay: an overlay has to match whatever
-     * is behind the strip, and this sits on a themed gradient background where
-     * no single colour would. Masking makes the cards themselves go
-     * transparent, so it is correct on any backdrop and in either theme.
-     */
-    const maskImage = fade > 0 && (canScrollLeft || canScrollRight)
-        ? `linear-gradient(to right, ${
-              canScrollLeft ? `transparent 0, #000 ${fade}px` : '#000 0'
-          }, ${
-              canScrollRight ? `#000 calc(100% - ${fade}px), transparent 100%` : '#000 100%'
-          })`
-        : undefined;
-
-    return (
-        <Box className={className} sx={{ position: 'relative', minWidth: 0, ...sx }}>
-            {!hideArrows && (
-                <IconButton
-                    size="small"
-                    aria-label="scroll left"
-                    disabled={!canScrollLeft}
-                    onClick={() => scrollBy('left')}
-                    sx={arrowSx('left', canScrollLeft)}
-                >
-                    <ChevronLeftIcon />
-                </IconButton>
-            )}
-
-            <Box
-                ref={trackRef}
-                role="group"
-                aria-label={ariaLabel}
-                onTouchStart={onTouchStart}
-                onTouchMove={onTouchMove}
-                onTouchEnd={endDrag}
-                onMouseDown={onMouseDown}
-                onMouseMove={onMouseMove}
-                onMouseUp={endDrag}
-                onMouseLeave={endDrag}
-                sx={{
-                    minWidth: 0,
-                    overflowX: 'auto',
-                    ...(maskImage ? { maskImage, WebkitMaskImage: maskImage } : {}),
-                    overflowY: 'hidden',
-                    scrollBehavior: 'smooth',
-                    WebkitOverflowScrolling: 'touch',
-                    cursor: isDragging ? 'grabbing' : 'grab',
-                    userSelect: isDragging ? 'none' : 'auto',
-                    // Hidden: the fade and the arrows already say "there is
-                    // more", and a bar under a masked edge looks like a
-                    // rendering artefact.
-                    scrollbarWidth: 'none',
-                    '&::-webkit-scrollbar': { display: 'none' },
-                    ...trackSx,
-                }}
-            >
-                {children}
-            </Box>
-
-            {!hideArrows && (
-                <IconButton
-                    size="small"
-                    aria-label="scroll right"
-                    disabled={!canScrollRight}
-                    onClick={() => scrollBy('right')}
-                    sx={arrowSx('right', canScrollRight)}
-                >
-                    <ChevronRightIcon />
-                </IconButton>
-            )}
-        </Box>
-    );
-};
-
-export default HorizontalScroller;

package/src/components/misc/LanguageSwitcher.tsx

@@ -1,199 +0,0 @@
-import * as React from 'react';
-import { MouseEvent, useState, useRef, useEffect } from 'react';
-import { useLocaleState, useLocales } from 'react-admin';
-import { Avatar, useMediaQuery, useTheme } from '@mui/material';
-import LanguageIcon from '@mui/icons-material/Translate';
-import ReactDOM from 'react-dom';
-import { useWindowSize } from 'dash-utils';
-const DefaultIcon = <LanguageIcon />;
-
-export interface LanguageSwitcherButtonProps {
-    icon?: React.ReactNode;
-    languages?: { locale: string; name: string }[];
-}
-
-const LanguageSwitcher = (props: LanguageSwitcherButtonProps) => {
-    const { icon = DefaultIcon, languages: languagesProp } = props;
-    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-    const languages = useLocales({ locales: languagesProp });
-    const [locale, setLocale] = useLocaleState();
-
-    const theme = useTheme();
-    const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
-    const [webView, setWebView] = useState<boolean>(false);
-    const [open, setOpen] = useState(false);
-    const avatarRef = useRef<HTMLDivElement>(null);
-    const menuRef = useRef<HTMLDivElement>(null);
-    const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
-    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-    const windowSize = useWindowSize();
-    useEffect(() => {
-        if(document.body.classList.contains('webview')) {
-            setWebView(true)
-        } else {
-            setWebView(false)
-        }
-    }, []);
-
-    const getNameForLocale = (locale: string): string => {
-        const language = languages.find(language => language.locale === locale);
-        return language ? language.name : '';
-    };
-
-    const changeLocale = (locale: string) => (): void => {
-        setLocale(locale);
-        setOpen(false);
-    };
-
-  const calculateMenuPosition = () => {
-    if (avatarRef.current && windowSize.width) {
-        const rect = avatarRef.current.getBoundingClientRect();
-        const menuWidth = 200; // minWidth from styles
-        
-        let left = rect.left + window.scrollX;
-        
-        // Ensure menu doesn't go off-screen using windowSize
-        if (left + menuWidth > windowSize.width) {
-            left = windowSize.width - menuWidth - 10; // 10px margin
-        }
-        if (left < 10) {
-            left = 10; // 10px margin
-        }
-        
-        setMenuPosition({ 
-            top: rect.top + window.scrollY + 30, 
-            left: left
-        });
-    }
-};
-
-    const handleLanguageMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {
-        e.preventDefault();
-        
-        // Clear any existing timeout
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-            timeoutRef.current = null;
-        }
-        
-        setOpen(true);
-        calculateMenuPosition();
-    };
-
-    const handleLanguageClick = (e: React.MouseEvent<HTMLDivElement>) => {
-        e.preventDefault();
-        setOpen(prevOpen => !prevOpen);
-        calculateMenuPosition();
-    };
-
-    const handleMouseLeave = () => {
-        if (!webView) {
-            // Add a small delay before closing to allow moving to menu
-            timeoutRef.current = setTimeout(() => {
-                setOpen(false);
-            }, 100);
-        }
-    };
-
-    const handleMenuMouseEnter = () => {
-        // Clear timeout when entering menu
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-            timeoutRef.current = null;
-        }
-    };
-
-    const handleMenuMouseLeave = () => {
-        if (!webView) {
-            setOpen(false);
-        }
-    };
-
-    // Cleanup timeout on unmount
-    useEffect(() => {
-        return () => {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-        };
-    }, []);
-
-    // Recalculate position on screen resize
-    useEffect(() => {
-        const handleResize = () => {
-            if (open) {
-                calculateMenuPosition();
-            }
-        };
-
-        window.addEventListener('resize', handleResize);
-        return () => window.removeEventListener('resize', handleResize);
-    }, [open, isSmallScreen]);
-
-    return (
-        <>
-            <div
-                ref={avatarRef}
-              
-                {... !webView ? { 
-                    onMouseEnter: handleLanguageMouseEnter, 
-                    onMouseLeave: handleMouseLeave 
-                } : { 
-                    onClick: handleLanguageClick 
-                }}
-            >
-                <Avatar 
-                    sizes='small' 
-                    sx={{ fontSize: '1rem' }}
-                    style={{
-                        width: '30px',
-                        height: '30px',
-                        minHeight: '30px'
-                    }}
-                     className='dash-icon-button-color dash-icon-button-bg'
-                >
-                    {getNameForLocale(locale).substring(0, 2).toUpperCase()}
-                </Avatar>
-            </div>
-
-            {open && ReactDOM.createPortal(
-                <div 
-                    ref={menuRef}
-                    className="dash-language-menu-portal"
-                    onMouseEnter={!webView ? handleMenuMouseEnter : undefined}
-                    onMouseLeave={!webView ? handleMenuMouseLeave : undefined}
-                >
-                    <div
-                        className={`dash-language-menu ${open ? 'show' : ''}`}
-                        style={{
-                            zIndex: 10000,
-                            position: 'absolute',
-                            top: menuPosition.top,
-                            left: menuPosition.left,
-                        }}
-                    >
-                        {languages.map(language => (
-                            <div
-                                key={language.locale}
-                                className={`dash-language-menu-item ${language.locale === locale ? 'selected' : ''}`}
-                                onClick={changeLocale(language.locale)}
-                                style={{
-                                    padding: '8px 16px',
-                                    cursor: 'pointer',
-                                    backgroundColor: language.locale === locale ? 'rgba(0, 0, 0, 0.08)' : 'transparent',
-                                    minWidth: '150px'
-                                }}
-                            >
-                                {language.name}
-                            </div>
-                        ))}
-                    </div>
-                </div>,
-                document.body
-            )}
-        </>
-    );
-};
-
-export default LanguageSwitcher;

package/src/components/misc/MUIHtmlToolTip.tsx

@@ -1,15 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
-
-const MUIHtmlTooltip = styled(({ className, ...props }: TooltipProps) => (
-	<Tooltip {...props} classes={{ popper: className }} />
-))(({ theme }) => ({
-	[`& .${tooltipClasses.tooltip}`]: {
-		backgroundColor: '#f5f5f9',
-		color: 'rgba(0, 0, 0, 0.87)',
-		maxWidth: 220,
-		fontSize: theme.typography.pxToRem(12),
-		border: '1px solid #dadde9',
-	},
-}));
-export default MUIHtmlTooltip;