no-frills-ui 0.0.14-alpha.8 → 0.0.14-rc.1

package/lib-esm/components/DragAndDrop/DragItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragItem.js","sources":["../../../src/components/DragAndDrop/DragItem.tsx"],"sourcesContent":["import {\n    DragEventHandler,\n    PropsWithChildren,\n    useContext,\n    useState,\n    useEffect,\n    TouchEventHandler,\n    useRef,\n} from 'react';\nimport styled from '@emotion/styled';\nimport { DragIndicator } from '../../icons';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport { ORIENTATION, DragContext } from './types';\n\ninterface DragItemProps {\n    /** Position index of the draggable item */\n    index: number;\n    /** Orientation of the drag operation (VERTICAL or HORIZONTAL) */\n    orientation: ORIENTATION;\n    /** Whether to show a drag handle indicator instead of making the entire item draggable */\n    showIndicator: boolean;\n    /** The index of the item currently being dragged over */\n    dragOver: number;\n    /** Total number of items in the list */\n    totalItems: number;\n    /** Callback to set announcement for screen readers */\n    setAnnouncement: (message: string) => void;\n}\n\n/** Styled component for the draggable item container */\nconst Item = styled.div<{\n    active: number;\n    orientation: ORIENTATION;\n    showIndicator: boolean;\n    dragging: boolean;\n}>`\n    cursor: ${(props) => (props.showIndicator ? 'default' : 'move')};\n    display: flex;\n    user-select: ${(props) => (props.showIndicator ? 'auto' : 'none')};\n    border-top: 2px dashed\n        ${(props) =>\n            props.orientation === ORIENTATION.VERTICAL && props.active > 0\n                ? getThemeValue(THEME_NAME.PRIMARY)\n                : 'transparent'};\n    border-bottom: 2px dashed\n        ${(props) =>\n            props.orientation === ORIENTATION.VERTICAL && props.active < 0\n                ? getThemeValue(THEME_NAME.PRIMARY)\n                : 'transparent'};\n    border-left: 2px dashed\n        ${(props) =>\n            props.orientation === ORIENTATION.HORIZONTAL && props.active > 0\n                ? getThemeValue(THEME_NAME.PRIMARY)\n                : 'transparent'};\n    border-right: 2px dashed\n        ${(props) =>\n            props.orientation === ORIENTATION.HORIZONTAL && props.active < 0\n                ? getThemeValue(THEME_NAME.PRIMARY)\n                : 'transparent'};\n    opacity: ${(props) => (props.dragging ? 0.5 : 1)};\n    border-radius: 10px;\n\n    &:focus {\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    &:focus:not(:focus-visible) {\n        box-shadow: none;\n    }\n\n    &:focus-visible {\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n`;\n\n/** Styled component for the drag handle indicator */\nconst DragKnob = styled.div`\n    padding-top: 8px;\n    cursor: move;\n    touch-action: none;\n    color: ${getThemeValue(THEME_NAME.DISABLED)};\n`;\n\n/** Container for the children */\nconst Container = styled.div`\n    flex: 1;\n`;\n\n/**\n * A draggable item component that supports both mouse and touch interactions for drag-and-drop functionality.\n *\n * @component\n * @example\n * ```tsx\n * <DragItem\n *   index={0}\n *   orientation={ORIENTATION.VERTICAL}\n *   showIndicator={true}\n *   dragOver={-1}\n * >\n *   <div>Draggable content</div>\n * </DragItem>\n * ```\n *\n * @param props - The component props\n * @param props.index - The position index of this item in the draggable list\n * @param props.orientation - The orientation of the drag operation (VERTICAL or HORIZONTAL)\n * @param props.showIndicator - Whether to show a drag handle indicator instead of making the entire item draggable\n * @param props.dragOver - The index of the item currently being dragged over\n * @param props.children - The content to be rendered inside the draggable item\n *\n * @remarks\n * - Uses the DragContext to manage drag state across items\n * - Provides visual feedback with borders during drag operations\n * - Supports haptic feedback (vibration) on touch devices\n * - For touch devices, requires a 200ms hold before drag starts\n * - When showIndicator is true, only the drag handle can initiate drag operations\n *\n * @returns A draggable item with optional drag indicator and visual feedback\n */\nexport default function DragItem(props: PropsWithChildren<DragItemProps>) {\n    const { index, orientation, children, showIndicator, dragOver, totalItems, setAnnouncement } =\n        props;\n    const [active, setActive] = useState(0);\n    const touchTimerRef = useRef<NodeJS.Timeout | null>(null);\n    const context = useContext(DragContext);\n\n    /**\n     * Vibrate the device for haptic feedback\n     * @param duration Duration of the vibration in milliseconds\n     */\n    const vibrate = (duration: number) => {\n        if (navigator.vibrate) {\n            navigator.vibrate(duration);\n        }\n    };\n\n    /**\n     * Drag start event handler\n     * @param e Event\n     */\n    const dragStartHandler: DragEventHandler<HTMLDivElement> = () => {\n        context.setStartIndex(index);\n        context.setIsDragging(true);\n    };\n\n    /**\n     * Drag over event handler\n     * @param e Event\n     */\n    const dragOverHandler: DragEventHandler<HTMLDivElement> = (e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        setActive(context.startIndex - index);\n    };\n\n    /**\n     * Drag leave event handler\n     */\n    const dragExitHandler: DragEventHandler<HTMLDivElement> = () => {\n        setActive(0);\n    };\n\n    /**\n     * Drop event handler\n     * @param e Event\n     */\n    const dropHandler: DragEventHandler<HTMLDivElement> = (e) => {\n        e.preventDefault();\n        setActive(0);\n        context.drop(index);\n        context.setIsDragging(false);\n    };\n\n    /**\n     * Touch start event handler\n     * @param e Event\n     */\n    const touchStartHandler: TouchEventHandler<HTMLDivElement> = () => {\n        // Clear any existing timer first\n        if (touchTimerRef.current) {\n            clearTimeout(touchTimerRef.current);\n        }\n\n        touchTimerRef.current = setTimeout(() => {\n            context.setStartIndex(index);\n            context.setIsDragging(true);\n            context.setDragOver(index);\n            document.body.style.overflow = 'hidden';\n            vibrate(50);\n        }, 200);\n    };\n\n    /**\n     * Touch move event handler\n     * @param e Event\n     * @returns void\n     */\n    const touchMoveHandler: TouchEventHandler<HTMLDivElement> = (e) => {\n        const touch = e.touches[0];\n        if (!touch) return;\n\n        if (context.isDragging) {\n            e.preventDefault();\n\n            // get the element under the touch point\n            const el = document.elementFromPoint(\n                touch.clientX,\n                touch.clientY,\n            ) as HTMLElement | null;\n            const overAttr = el?.closest('[data-drag-index]')?.getAttribute('data-drag-index');\n            const overIndex = overAttr != null ? parseInt(overAttr, 10) : null;\n\n            // if we know which index we're over, update visual state\n            if (overIndex !== null) {\n                context.setDragOver(overIndex);\n            }\n        } else if (touchTimerRef.current) {\n            clearTimeout(touchTimerRef.current);\n            touchTimerRef.current = null;\n        }\n    };\n\n    /**\n     * Touch end event handler\n     * @param e Event\n     */\n    const touchEndHandler: TouchEventHandler<HTMLDivElement> = () => {\n        if (touchTimerRef.current) {\n            clearTimeout(touchTimerRef.current);\n            touchTimerRef.current = null;\n        }\n\n        if (context.isDragging) {\n            context.drop(dragOver);\n            vibrate(50);\n            context.setIsDragging(false);\n            document.body.style.overflow = 'auto';\n        }\n    };\n\n    /**\n     * Keyboard navigation handler for reordering items\n     * @param e Keyboard event\n     */\n    const handleKeyDown = (e: React.KeyboardEvent) => {\n        const isVertical = orientation === ORIENTATION.VERTICAL;\n        const moveUp = isVertical ? 'ArrowUp' : 'ArrowLeft';\n        const moveDown = isVertical ? 'ArrowDown' : 'ArrowRight';\n\n        const isGrabbed = context.isDragging && context.startIndex === index;\n\n        // Space to grab/drop\n        if (e.key === ' ' || e.key === 'Spacebar') {\n            e.preventDefault();\n            if (isGrabbed) {\n                // Drop at current position\n                context.drop(index);\n                setAnnouncement(\n                    context.i18n.replacePlaceholders(context.i18n.droppedAnnouncementTemplate, {\n                        position: index + 1,\n                    }),\n                );\n            } else {\n                // Grab item\n                context.startGrab(index);\n                setAnnouncement(\n                    context.i18n.replacePlaceholders(context.i18n.grabbedAnnouncementTemplate, {\n                        position: index + 1,\n                    }),\n                );\n            }\n        }\n        // Enter to drop\n        else if (e.key === 'Enter' && isGrabbed) {\n            e.preventDefault();\n            context.drop(index);\n            setAnnouncement(\n                context.i18n.replacePlaceholders(context.i18n.droppedAnnouncementTemplate, {\n                    position: index + 1,\n                }),\n            );\n        }\n        // Escape to cancel\n        else if (e.key === 'Escape' && isGrabbed) {\n            e.preventDefault();\n            context.cancel();\n            setAnnouncement(context.i18n.cancelledAnnouncementTemplate);\n        }\n        // Arrow keys to move while grabbed\n        else if (isGrabbed) {\n            if (e.key === moveUp && index > 0) {\n                e.preventDefault();\n                // Move without dropping - just reorder and update startIndex\n                const newIndex = index - 1;\n                context.onDrop(context.startIndex, newIndex);\n                context.setStartIndex(newIndex);\n                setAnnouncement(\n                    context.i18n.replacePlaceholders(context.i18n.movedAnnouncementTemplate, {\n                        position: newIndex + 1,\n                    }),\n                );\n            } else if (e.key === moveDown && index < totalItems - 1) {\n                e.preventDefault();\n                // Move without dropping - just reorder and update startIndex\n                const newIndex = index + 1;\n                context.onDrop(context.startIndex, newIndex);\n                context.setStartIndex(newIndex);\n                setAnnouncement(\n                    context.i18n.replacePlaceholders(context.i18n.movedAnnouncementTemplate, {\n                        position: newIndex + 1,\n                    }),\n                );\n            }\n        }\n    };\n\n    /** Cleanup touch timer and body overflow on unmount */\n    useEffect(() => {\n        return () => {\n            if (touchTimerRef.current) {\n                clearTimeout(touchTimerRef.current);\n                touchTimerRef.current = null;\n            }\n            document.body.style.overflow = 'auto';\n        };\n    }, []);\n\n    /** Update active state based on dragOver changes */\n    useEffect(() => {\n        if (context.isDragging && dragOver === index) {\n            setActive(context.startIndex - index);\n        } else {\n            setActive(0);\n        }\n    }, [dragOver, context.startIndex, index, context.isDragging]);\n\n    return (\n        <Item\n            draggable={!showIndicator}\n            showIndicator={showIndicator}\n            active={active}\n            dragging={context.isDragging && context.startIndex === index}\n            orientation={orientation}\n            data-drag-index={index}\n            tabIndex={0}\n            role=\"listitem\"\n            aria-label={context.i18n.replacePlaceholders(context.i18n.itemAriaLabelTemplate, {\n                position: index + 1,\n            })}\n            aria-grabbed={context.isDragging && context.startIndex === index}\n            onKeyDown={handleKeyDown}\n            onDragStart={!showIndicator ? dragStartHandler : undefined}\n            onDragOver={dragOverHandler}\n            onDragLeave={dragExitHandler}\n            onDrop={dropHandler}\n            onTouchStart={!showIndicator ? touchStartHandler : undefined}\n            onTouchMove={touchMoveHandler}\n            onTouchEnd={touchEndHandler}\n            onTouchCancel={touchEndHandler}\n        >\n            {showIndicator && (\n                <DragKnob\n                    draggable\n                    role=\"button\"\n                    aria-label={context.i18n.dragHandleAriaLabel}\n                    onDragStart={dragStartHandler}\n                    onTouchStart={touchStartHandler}\n                    onKeyDown={handleKeyDown}\n                    tabIndex={-1}\n                >\n                    <DragIndicator />\n                </DragKnob>\n            )}\n            <Container>{children}</Container>\n        </Item>\n    );\n}\n"],"names":["Item","styled","props","showIndicator","orientation","ORIENTATION","VERTICAL","active","getThemeValue","THEME_NAME","PRIMARY","HORIZONTAL","dragging","PRIMARY_LIGHT","DragKnob","DISABLED","Container","DragItem","index","children","dragOver","totalItems","setAnnouncement","setActive","useState","touchTimerRef","useRef","context","useContext","DragContext","vibrate","duration","navigator","dragStartHandler","setStartIndex","setIsDragging","dragOverHandler","e","preventDefault","stopPropagation","startIndex","dragExitHandler","dropHandler","drop","touchStartHandler","current","clearTimeout","setTimeout","setDragOver","document","body","style","overflow","touchMoveHandler","touch","touches","isDragging","el","elementFromPoint","clientX","clientY","overAttr","closest","getAttribute","overIndex","parseInt","touchEndHandler","handleKeyDown","isVertical","moveUp","moveDown","isGrabbed","key","i18n","replacePlaceholders","droppedAnnouncementTemplate","position","startGrab","grabbedAnnouncementTemplate","cancel","cancelledAnnouncementTemplate","newIndex","onDrop","movedAnnouncementTemplate","useEffect","_jsxs","draggable","data-drag-index","tabIndex","role","aria-label","itemAriaLabelTemplate","aria-grabbed","onKeyDown","onDragStart","undefined","onDragOver","onDragLeave","onTouchStart","onTouchMove","onTouchEnd","onTouchCancel","_jsx","dragHandleAriaLabel","DragIndicator"],"mappings":"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"}
+{"version":3,"file":"DragItem.js","sources":["../../../src/components/DragAndDrop/DragItem.tsx"],"sourcesContent":["import {\n    DragEventHandler,\n    PropsWithChildren,\n    useContext,\n    useState,\n    useEffect,\n    TouchEventHandler,\n    useRef,\n} from 'react';\nimport styled from '@emotion/styled';\nimport { DragIndicator } from '../../icons';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport { ORIENTATION, DragContext } from './types';\n\ninterface DragItemProps {\n    /** Position index of the draggable item */\n    index: number;\n    /** Orientation of the drag operation (VERTICAL or HORIZONTAL) */\n    orientation: ORIENTATION;\n    /** Whether to show a drag handle indicator instead of making the entire item draggable */\n    showIndicator: boolean;\n    /** The index of the item currently being dragged over */\n    dragOver: number | null;\n    /** Total number of items in the list */\n    totalItems: number;\n    /** Callback to set announcement for screen readers */\n    setAnnouncement: (message?: string) => void;\n}\n\n/** Styled component for the draggable item container */\nconst Item = styled.div<{\n    active: number | null;\n    orientation: ORIENTATION;\n    showIndicator: boolean;\n    dragging: boolean;\n}>`\n    cursor: ${(props) => (props.showIndicator ? 'default' : 'move')};\n    display: flex;\n    user-select: ${(props) => (props.showIndicator ? 'auto' : 'none')};\n    border-top: 2px dashed\n        ${(props) =>\n            props.orientation === ORIENTATION.VERTICAL && props.active !== null && props.active > 0\n                ? getThemeValue(THEME_NAME.PRIMARY)\n                : 'transparent'};\n    border-bottom: 2px dashed\n        ${(props) =>\n            props.orientation === ORIENTATION.VERTICAL && props.active !== null && props.active < 0\n                ? getThemeValue(THEME_NAME.PRIMARY)\n                : 'transparent'};\n    border-left: 2px dashed\n        ${(props) =>\n            props.orientation === ORIENTATION.HORIZONTAL &&\n            props.active !== null &&\n            props.active > 0\n                ? getThemeValue(THEME_NAME.PRIMARY)\n                : 'transparent'};\n    border-right: 2px dashed\n        ${(props) =>\n            props.orientation === ORIENTATION.HORIZONTAL &&\n            props.active !== null &&\n            props.active < 0\n                ? getThemeValue(THEME_NAME.PRIMARY)\n                : 'transparent'};\n    opacity: ${(props) => (props.dragging ? 0.5 : 1)};\n    border-radius: 10px;\n\n    &:focus {\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    &:focus:not(:focus-visible) {\n        box-shadow: none;\n    }\n\n    &:focus-visible {\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n`;\n\n/** Styled component for the drag handle indicator */\nconst DragKnob = styled.div`\n    padding-top: 8px;\n    cursor: move;\n    touch-action: none;\n    color: ${getThemeValue(THEME_NAME.DISABLED)};\n`;\n\n/** Container for the children */\nconst Container = styled.div`\n    flex: 1;\n`;\n\n/**\n * A draggable item component that supports both mouse and touch interactions for drag-and-drop functionality.\n *\n * @component\n * @example\n * ```tsx\n * <DragItem\n *   index={0}\n *   orientation={ORIENTATION.VERTICAL}\n *   showIndicator={true}\n *   dragOver={-1}\n * >\n *   <div>Draggable content</div>\n * </DragItem>\n * ```\n *\n * @param props - The component props\n * @param props.index - The position index of this item in the draggable list\n * @param props.orientation - The orientation of the drag operation (VERTICAL or HORIZONTAL)\n * @param props.showIndicator - Whether to show a drag handle indicator instead of making the entire item draggable\n * @param props.dragOver - The index of the item currently being dragged over\n * @param props.children - The content to be rendered inside the draggable item\n *\n * @remarks\n * - Uses the DragContext to manage drag state across items\n * - Provides visual feedback with borders during drag operations\n * - Supports haptic feedback (vibration) on touch devices\n * - For touch devices, requires a 200ms hold before drag starts\n * - When showIndicator is true, only the drag handle can initiate drag operations\n *\n * @returns A draggable item with optional drag indicator and visual feedback\n */\nexport default function DragItem(props: PropsWithChildren<DragItemProps>) {\n    const { index, orientation, children, showIndicator, dragOver, totalItems, setAnnouncement } =\n        props;\n    const [active, setActive] = useState<number | null>(0);\n    const touchTimerRef = useRef<NodeJS.Timeout | null>(null);\n    const context = useContext(DragContext);\n\n    /**\n     * Vibrate the device for haptic feedback\n     * @param duration Duration of the vibration in milliseconds\n     */\n    const vibrate = (duration: number) => {\n        if (navigator.vibrate) {\n            navigator.vibrate(duration);\n        }\n    };\n\n    /**\n     * Drag start event handler\n     * @param e Event\n     */\n    const dragStartHandler: DragEventHandler<HTMLDivElement> = () => {\n        context?.setStartIndex(index);\n        context?.setIsDragging(true);\n    };\n\n    /**\n     * Drag over event handler\n     * @param e Event\n     */\n    const dragOverHandler: DragEventHandler<HTMLDivElement> = (e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        if (context && context.startIndex !== null) {\n            setActive(context.startIndex - index);\n        }\n    };\n\n    /**\n     * Drag leave event handler\n     */\n    const dragExitHandler: DragEventHandler<HTMLDivElement> = () => {\n        setActive(0);\n    };\n\n    /**\n     * Drop event handler\n     * @param e Event\n     */\n    const dropHandler: DragEventHandler<HTMLDivElement> = (e) => {\n        e.preventDefault();\n        setActive(0);\n        context?.drop(index);\n        context?.setIsDragging(false);\n    };\n\n    /**\n     * Touch start event handler\n     * @param e Event\n     */\n    const touchStartHandler: TouchEventHandler<HTMLDivElement> = () => {\n        // Clear any existing timer first\n        if (touchTimerRef.current) {\n            clearTimeout(touchTimerRef.current);\n        }\n\n        touchTimerRef.current = setTimeout(() => {\n            context?.setStartIndex(index);\n            context?.setIsDragging(true);\n            context?.setDragOver(index);\n            document.body.style.overflow = 'hidden';\n            vibrate(50);\n        }, 200);\n    };\n\n    /**\n     * Touch move event handler\n     * @param e Event\n     * @returns void\n     */\n    const touchMoveHandler: TouchEventHandler<HTMLDivElement> = (e) => {\n        const touch = e.touches[0];\n        if (!touch) return;\n\n        if (context?.isDragging) {\n            e.preventDefault();\n\n            // get the element under the touch point\n            const el = document.elementFromPoint(\n                touch.clientX,\n                touch.clientY,\n            ) as HTMLElement | null;\n            const overAttr = el?.closest('[data-drag-index]')?.getAttribute('data-drag-index');\n            const overIndex = overAttr != null ? parseInt(overAttr, 10) : null;\n\n            // if we know which index we're over, update visual state\n            if (overIndex !== null) {\n                context?.setDragOver(overIndex);\n            }\n        } else if (touchTimerRef.current) {\n            clearTimeout(touchTimerRef.current);\n            touchTimerRef.current = null;\n        }\n    };\n\n    /**\n     * Touch end event handler\n     * @param e Event\n     */\n    const touchEndHandler: TouchEventHandler<HTMLDivElement> = () => {\n        if (touchTimerRef.current) {\n            clearTimeout(touchTimerRef.current);\n            touchTimerRef.current = null;\n        }\n\n        if (context?.isDragging) {\n            context?.drop(dragOver);\n            vibrate(50);\n            context?.setIsDragging(false);\n            document.body.style.overflow = 'auto';\n        }\n    };\n\n    /**\n     * Keyboard navigation handler for reordering items\n     * @param e Keyboard event\n     */\n    const handleKeyDown = (e: React.KeyboardEvent) => {\n        const isVertical = orientation === ORIENTATION.VERTICAL;\n        const moveUp = isVertical ? 'ArrowUp' : 'ArrowLeft';\n        const moveDown = isVertical ? 'ArrowDown' : 'ArrowRight';\n\n        const isGrabbed = context?.isDragging && context?.startIndex === index;\n\n        // Space to grab/drop\n        if (e.key === ' ' || e.key === 'Spacebar') {\n            e.preventDefault();\n            if (isGrabbed) {\n                // Drop at current position\n                context?.drop(index);\n                setAnnouncement(\n                    context?.i18n.replacePlaceholders(context?.i18n.droppedAnnouncementTemplate, {\n                        position: index + 1,\n                    }),\n                );\n            } else {\n                // Grab item\n                context?.startGrab(index);\n                setAnnouncement(\n                    context?.i18n.replacePlaceholders(context?.i18n.grabbedAnnouncementTemplate, {\n                        position: index + 1,\n                    }),\n                );\n            }\n        }\n        // Enter to drop\n        else if (e.key === 'Enter' && isGrabbed) {\n            e.preventDefault();\n            context?.drop(index);\n            setAnnouncement(\n                context?.i18n.replacePlaceholders(context?.i18n.droppedAnnouncementTemplate, {\n                    position: index + 1,\n                }),\n            );\n        }\n        // Escape to cancel\n        else if (e.key === 'Escape' && isGrabbed) {\n            e.preventDefault();\n            context?.cancel();\n            setAnnouncement(context?.i18n.cancelledAnnouncementTemplate);\n        }\n        // Arrow keys to move while grabbed\n        else if (isGrabbed) {\n            if (e.key === moveUp && index > 0 && context.startIndex !== null) {\n                e.preventDefault();\n                // Move without dropping - just reorder and update startIndex\n                const newIndex = index - 1;\n                context.onDrop(context.startIndex, newIndex);\n                context.setStartIndex(newIndex);\n                setAnnouncement(\n                    context.i18n.replacePlaceholders(context.i18n.movedAnnouncementTemplate, {\n                        position: newIndex + 1,\n                    }),\n                );\n            } else if (\n                e.key === moveDown &&\n                index < totalItems - 1 &&\n                context.startIndex !== null\n            ) {\n                e.preventDefault();\n                // Move without dropping - just reorder and update startIndex\n                const newIndex = index + 1;\n                context.onDrop(context.startIndex, newIndex);\n                context.setStartIndex(newIndex);\n                setAnnouncement(\n                    context.i18n.replacePlaceholders(context.i18n.movedAnnouncementTemplate, {\n                        position: newIndex + 1,\n                    }),\n                );\n            }\n        }\n    };\n\n    /** Cleanup touch timer and body overflow on unmount */\n    useEffect(() => {\n        return () => {\n            if (touchTimerRef.current) {\n                clearTimeout(touchTimerRef.current);\n                touchTimerRef.current = null;\n            }\n            document.body.style.overflow = 'auto';\n        };\n    }, []);\n\n    /** Update active state based on dragOver changes */\n    useEffect(() => {\n        if (context?.isDragging && context?.startIndex !== null && dragOver === index) {\n            setActive(context?.startIndex - index);\n        } else {\n            setActive(0);\n        }\n    }, [dragOver, context?.startIndex, index, context?.isDragging]);\n\n    return (\n        <Item\n            draggable={!showIndicator}\n            showIndicator={showIndicator}\n            active={active}\n            dragging={!!(context?.isDragging && context.startIndex === index)}\n            orientation={orientation}\n            data-drag-index={index}\n            tabIndex={0}\n            role=\"listitem\"\n            aria-label={context?.i18n.replacePlaceholders(context.i18n.itemAriaLabelTemplate, {\n                position: index + 1,\n            })}\n            aria-grabbed={context?.isDragging && context.startIndex === index}\n            onKeyDown={handleKeyDown}\n            onDragStart={!showIndicator ? dragStartHandler : undefined}\n            onDragOver={dragOverHandler}\n            onDragLeave={dragExitHandler}\n            onDrop={dropHandler}\n            onTouchStart={!showIndicator ? touchStartHandler : undefined}\n            onTouchMove={touchMoveHandler}\n            onTouchEnd={touchEndHandler}\n            onTouchCancel={touchEndHandler}\n        >\n            {showIndicator && (\n                <DragKnob\n                    draggable\n                    role=\"button\"\n                    aria-label={context?.i18n.dragHandleAriaLabel}\n                    onDragStart={dragStartHandler}\n                    onTouchStart={touchStartHandler}\n                    onKeyDown={handleKeyDown}\n                    tabIndex={-1}\n                >\n                    <DragIndicator />\n                </DragKnob>\n            )}\n            <Container>{children}</Container>\n        </Item>\n    );\n}\n"],"names":["Item","styled","props","showIndicator","orientation","ORIENTATION","VERTICAL","active","getThemeValue","THEME_NAME","PRIMARY","HORIZONTAL","dragging","PRIMARY_LIGHT","DragKnob","DISABLED","Container","DragItem","index","children","dragOver","totalItems","setAnnouncement","setActive","useState","touchTimerRef","useRef","context","useContext","DragContext","vibrate","duration","navigator","dragStartHandler","setStartIndex","setIsDragging","dragOverHandler","e","preventDefault","stopPropagation","startIndex","dragExitHandler","dropHandler","drop","touchStartHandler","current","clearTimeout","setTimeout","setDragOver","document","body","style","overflow","touchMoveHandler","touch","touches","isDragging","el","elementFromPoint","clientX","clientY","overAttr","closest","getAttribute","overIndex","parseInt","touchEndHandler","handleKeyDown","isVertical","moveUp","moveDown","isGrabbed","key","i18n","replacePlaceholders","droppedAnnouncementTemplate","position","startGrab","grabbedAnnouncementTemplate","cancel","cancelledAnnouncementTemplate","newIndex","onDrop","movedAnnouncementTemplate","useEffect","_jsxs","draggable","data-drag-index","tabIndex","role","aria-label","itemAriaLabelTemplate","aria-grabbed","onKeyDown","onDragStart","undefined","onDragOver","onDragLeave","onTouchStart","onTouchMove","onTouchEnd","onTouchCancel","_jsx","dragHandleAriaLabel","DragIndicator"],"mappings":";;;;;;;AA6BA,yDACA,MAAMA,IAAAA,iBAAOC,MAAAA,CAAAA,KAAAA,EAAAA;;;cAMC,CAACC,KAAAA,GAAWA,KAAAA,CAAMC,aAAa,GAAG,SAAA,GAAY,sCAEzC,CAACD,KAAAA,GAAWA,KAAAA,CAAMC,aAAa,GAAG,MAAA,GAAS,4CAEpD,CAACD,KAAAA,GACCA,KAAAA,CAAME,WAAW,KAAKC,WAAAA,CAAYC,QAAQ,IAAIJ,KAAAA,CAAMK,MAAM,KAAK,IAAA,IAAQL,KAAAA,CAAMK,MAAM,GAAG,CAAA,GAChFC,aAAAA,CAAcC,UAAAA,CAAWC,OAAO,CAAA,GAChC,sDAER,CAACR,KAAAA,GACCA,KAAAA,CAAME,WAAW,KAAKC,WAAAA,CAAYC,QAAQ,IAAIJ,KAAAA,CAAMK,MAAM,KAAK,IAAA,IAAQL,KAAAA,CAAMK,MAAM,GAAG,CAAA,GAChFC,aAAAA,CAAcC,UAAAA,CAAWC,OAAO,CAAA,GAChC,aAAA,EAAA,mCAAA,EAER,CAACR,KAAAA,GACCA,KAAAA,CAAME,WAAW,KAAKC,WAAAA,CAAYM,UAAU,IAC5CT,KAAAA,CAAMK,MAAM,KAAK,IAAA,IACjBL,KAAAA,CAAMK,MAAM,GAAG,CAAA,GACTC,aAAAA,CAAcC,UAAAA,CAAWC,OAAO,CAAA,GAChC,aAAA,EAAA,oCAAA,EAER,CAACR,KAAAA,GACCA,KAAAA,CAAME,WAAW,KAAKC,WAAAA,CAAYM,UAAU,IAC5CT,KAAAA,CAAMK,MAAM,KAAK,IAAA,IACjBL,KAAAA,CAAMK,MAAM,GAAG,CAAA,GACTC,aAAAA,CAAcC,UAAAA,CAAWC,OAAO,CAAA,GAChC,aAAA,EAAA,WAAA,EACH,CAACR,KAAAA,GAAWA,KAAAA,CAAMU,QAAQ,GAAG,GAAA,GAAM,CAAA,EAAA,mDAAA,EAIlBJ,aAAAA,CAAcC,UAAAA,CAAWI,aAAa,CAAA,EAAA,sFAAA,EAQtCL,aAAAA,CAAcC,UAAAA,CAAWI,aAAa,CAAA,EAAA,IAAA,CAAA;AAItE,sDACA,MAAMC,QAAAA,iBAAWb,MAAAA,CAAAA,KAAAA,EAAAA;;;AAIJO,CAAAA,CAAAA,CAAAA,sDAAAA,EAAAA,aAAAA,CAAcC,WAAWM,QAAQ,CAAA,EAAA,GAAA,CAAA;AAG9C,kCACA,MAAMC,WAAAA,iBAAYf,MAAAA,CAAAA,KAAAA,EAAAA;;;;AAIlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgCe,SAASgB,QAAAA,CAASf,KAAuC,EAAA;AACpE,IAAA,MAAM,EAAEgB,KAAK,EAAEd,WAAW,EAAEe,QAAQ,EAAEhB,aAAa,EAAEiB,QAAQ,EAAEC,UAAU,EAAEC,eAAe,EAAE,GACxFpB,KAAAA;AACJ,IAAA,MAAM,CAACK,MAAAA,EAAQgB,SAAAA,CAAU,GAAGC,QAAAA,CAAwB,CAAA,CAAA;AACpD,IAAA,MAAMC,gBAAgBC,MAAAA,CAA8B,IAAA,CAAA;AACpD,IAAA,MAAMC,UAAUC,UAAAA,CAAWC,WAAAA,CAAAA;AAE3B;;;QAIA,MAAMC,UAAU,CAACC,QAAAA,GAAAA;QACb,IAAIC,SAAAA,CAAUF,OAAO,EAAE;AACnBE,YAAAA,SAAAA,CAAUF,OAAO,CAACC,QAAAA,CAAAA;AACtB,QAAA;AACJ,IAAA,CAAA;AAEA;;;AAGC,QACD,MAAME,gBAAAA,GAAqD,IAAA;AACvDN,QAAAA,OAAAA,EAASO,aAAAA,CAAchB,KAAAA,CAAAA;AACvBS,QAAAA,OAAAA,EAASQ,aAAAA,CAAc,IAAA,CAAA;AAC3B,IAAA,CAAA;AAEA;;;QAIA,MAAMC,kBAAoD,CAACC,CAAAA,GAAAA;AACvDA,QAAAA,CAAAA,CAAEC,cAAc,EAAA;AAChBD,QAAAA,CAAAA,CAAEE,eAAe,EAAA;AACjB,QAAA,IAAIZ,OAAAA,IAAWA,OAAAA,CAAQa,UAAU,KAAK,IAAA,EAAM;YACxCjB,SAAAA,CAAUI,OAAAA,CAAQa,UAAU,GAAGtB,KAAAA,CAAAA;AACnC,QAAA;AACJ,IAAA,CAAA;AAEA;;AAEC,QACD,MAAMuB,eAAAA,GAAoD,IAAA;QACtDlB,SAAAA,CAAU,CAAA,CAAA;AACd,IAAA,CAAA;AAEA;;;QAIA,MAAMmB,cAAgD,CAACL,CAAAA,GAAAA;AACnDA,QAAAA,CAAAA,CAAEC,cAAc,EAAA;QAChBf,SAAAA,CAAU,CAAA,CAAA;AACVI,QAAAA,OAAAA,EAASgB,IAAAA,CAAKzB,KAAAA,CAAAA;AACdS,QAAAA,OAAAA,EAASQ,aAAAA,CAAc,KAAA,CAAA;AAC3B,IAAA,CAAA;AAEA;;;AAGC,QACD,MAAMS,iBAAAA,GAAuD,IAAA;;QAEzD,IAAInB,aAAAA,CAAcoB,OAAO,EAAE;AACvBC,YAAAA,YAAAA,CAAarB,cAAcoB,OAAO,CAAA;AACtC,QAAA;QAEApB,aAAAA,CAAcoB,OAAO,GAAGE,UAAAA,CAAW,IAAA;AAC/BpB,YAAAA,OAAAA,EAASO,aAAAA,CAAchB,KAAAA,CAAAA;AACvBS,YAAAA,OAAAA,EAASQ,aAAAA,CAAc,IAAA,CAAA;AACvBR,YAAAA,OAAAA,EAASqB,WAAAA,CAAY9B,KAAAA,CAAAA;AACrB+B,YAAAA,QAAAA,CAASC,IAAI,CAACC,KAAK,CAACC,QAAQ,GAAG,QAAA;YAC/BtB,OAAAA,CAAQ,EAAA,CAAA;QACZ,CAAA,EAAG,GAAA,CAAA;AACP,IAAA,CAAA;AAEA;;;;QAKA,MAAMuB,mBAAsD,CAAChB,CAAAA,GAAAA;AACzD,QAAA,MAAMiB,KAAAA,GAAQjB,CAAAA,CAAEkB,OAAO,CAAC,CAAA,CAAE;AAC1B,QAAA,IAAI,CAACD,KAAAA,EAAO;AAEZ,QAAA,IAAI3B,SAAS6B,UAAAA,EAAY;AACrBnB,YAAAA,CAAAA,CAAEC,cAAc,EAAA;;YAGhB,MAAMmB,EAAAA,GAAKR,SAASS,gBAAgB,CAChCJ,MAAMK,OAAO,EACbL,MAAMM,OAAO,CAAA;AAEjB,YAAA,MAAMC,QAAAA,GAAWJ,EAAAA,EAAIK,OAAAA,CAAQ,mBAAA,CAAA,EAAsBC,YAAAA,CAAa,iBAAA,CAAA;AAChE,YAAA,MAAMC,SAAAA,GAAYH,QAAAA,IAAY,IAAA,GAAOI,QAAAA,CAASJ,UAAU,EAAA,CAAA,GAAM,IAAA;;AAG9D,YAAA,IAAIG,cAAc,IAAA,EAAM;AACpBrC,gBAAAA,OAAAA,EAASqB,WAAAA,CAAYgB,SAAAA,CAAAA;AACzB,YAAA;QACJ,CAAA,MAAO,IAAIvC,aAAAA,CAAcoB,OAAO,EAAE;AAC9BC,YAAAA,YAAAA,CAAarB,cAAcoB,OAAO,CAAA;AAClCpB,YAAAA,aAAAA,CAAcoB,OAAO,GAAG,IAAA;AAC5B,QAAA;AACJ,IAAA,CAAA;AAEA;;;AAGC,QACD,MAAMqB,eAAAA,GAAqD,IAAA;QACvD,IAAIzC,aAAAA,CAAcoB,OAAO,EAAE;AACvBC,YAAAA,YAAAA,CAAarB,cAAcoB,OAAO,CAAA;AAClCpB,YAAAA,aAAAA,CAAcoB,OAAO,GAAG,IAAA;AAC5B,QAAA;AAEA,QAAA,IAAIlB,SAAS6B,UAAAA,EAAY;AACrB7B,YAAAA,OAAAA,EAASgB,IAAAA,CAAKvB,QAAAA,CAAAA;YACdU,OAAAA,CAAQ,EAAA,CAAA;AACRH,YAAAA,OAAAA,EAASQ,aAAAA,CAAc,KAAA,CAAA;AACvBc,YAAAA,QAAAA,CAASC,IAAI,CAACC,KAAK,CAACC,QAAQ,GAAG,MAAA;AACnC,QAAA;AACJ,IAAA,CAAA;AAEA;;;QAIA,MAAMe,gBAAgB,CAAC9B,CAAAA,GAAAA;QACnB,MAAM+B,UAAAA,GAAahE,WAAAA,KAAgBC,WAAAA,CAAYC,QAAQ;QACvD,MAAM+D,MAAAA,GAASD,aAAa,SAAA,GAAY,WAAA;QACxC,MAAME,QAAAA,GAAWF,aAAa,WAAA,GAAc,YAAA;AAE5C,QAAA,MAAMG,SAAAA,GAAY5C,OAAAA,EAAS6B,UAAAA,IAAc7B,OAAAA,EAASa,UAAAA,KAAetB,KAAAA;;AAGjE,QAAA,IAAImB,EAAEmC,GAAG,KAAK,OAAOnC,CAAAA,CAAEmC,GAAG,KAAK,UAAA,EAAY;AACvCnC,YAAAA,CAAAA,CAAEC,cAAc,EAAA;AAChB,YAAA,IAAIiC,SAAAA,EAAW;;AAEX5C,gBAAAA,OAAAA,EAASgB,IAAAA,CAAKzB,KAAAA,CAAAA;AACdI,gBAAAA,eAAAA,CACIK,OAAAA,EAAS8C,IAAAA,CAAKC,mBAAAA,CAAoB/C,OAAAA,EAAS8C,KAAKE,2BAAAA,EAA6B;AACzEC,oBAAAA,QAAAA,EAAU1D,KAAAA,GAAQ;AACtB,iBAAA,CAAA,CAAA;YAER,CAAA,MAAO;;AAEHS,gBAAAA,OAAAA,EAASkD,SAAAA,CAAU3D,KAAAA,CAAAA;AACnBI,gBAAAA,eAAAA,CACIK,OAAAA,EAAS8C,IAAAA,CAAKC,mBAAAA,CAAoB/C,OAAAA,EAAS8C,KAAKK,2BAAAA,EAA6B;AACzEF,oBAAAA,QAAAA,EAAU1D,KAAAA,GAAQ;AACtB,iBAAA,CAAA,CAAA;AAER,YAAA;AACJ,QAAA,CAAA,MAEK,IAAImB,CAAAA,CAAEmC,GAAG,KAAK,WAAWD,SAAAA,EAAW;AACrClC,YAAAA,CAAAA,CAAEC,cAAc,EAAA;AAChBX,YAAAA,OAAAA,EAASgB,IAAAA,CAAKzB,KAAAA,CAAAA;AACdI,YAAAA,eAAAA,CACIK,OAAAA,EAAS8C,IAAAA,CAAKC,mBAAAA,CAAoB/C,OAAAA,EAAS8C,KAAKE,2BAAAA,EAA6B;AACzEC,gBAAAA,QAAAA,EAAU1D,KAAAA,GAAQ;AACtB,aAAA,CAAA,CAAA;AAER,QAAA,CAAA,MAEK,IAAImB,CAAAA,CAAEmC,GAAG,KAAK,YAAYD,SAAAA,EAAW;AACtClC,YAAAA,CAAAA,CAAEC,cAAc,EAAA;YAChBX,OAAAA,EAASoD,MAAAA,EAAAA;AACTzD,YAAAA,eAAAA,CAAgBK,SAAS8C,IAAAA,CAAKO,6BAAAA,CAAAA;AAClC,QAAA,CAAA,MAEK,IAAIT,SAAAA,EAAW;YAChB,IAAIlC,CAAAA,CAAEmC,GAAG,KAAKH,MAAAA,IAAUnD,QAAQ,CAAA,IAAKS,OAAAA,CAAQa,UAAU,KAAK,IAAA,EAAM;AAC9DH,gBAAAA,CAAAA,CAAEC,cAAc,EAAA;;AAEhB,gBAAA,MAAM2C,WAAW/D,KAAAA,GAAQ,CAAA;AACzBS,gBAAAA,OAAAA,CAAQuD,MAAM,CAACvD,OAAAA,CAAQa,UAAU,EAAEyC,QAAAA,CAAAA;AACnCtD,gBAAAA,OAAAA,CAAQO,aAAa,CAAC+C,QAAAA,CAAAA;gBACtB3D,eAAAA,CACIK,OAAAA,CAAQ8C,IAAI,CAACC,mBAAmB,CAAC/C,OAAAA,CAAQ8C,IAAI,CAACU,yBAAyB,EAAE;AACrEP,oBAAAA,QAAAA,EAAUK,QAAAA,GAAW;AACzB,iBAAA,CAAA,CAAA;YAER,CAAA,MAAO,IACH5C,CAAAA,CAAEmC,GAAG,KAAKF,QAAAA,IACVpD,KAAAA,GAAQG,UAAAA,GAAa,CAAA,IACrBM,OAAAA,CAAQa,UAAU,KAAK,IAAA,EACzB;AACEH,gBAAAA,CAAAA,CAAEC,cAAc,EAAA;;AAEhB,gBAAA,MAAM2C,WAAW/D,KAAAA,GAAQ,CAAA;AACzBS,gBAAAA,OAAAA,CAAQuD,MAAM,CAACvD,OAAAA,CAAQa,UAAU,EAAEyC,QAAAA,CAAAA;AACnCtD,gBAAAA,OAAAA,CAAQO,aAAa,CAAC+C,QAAAA,CAAAA;gBACtB3D,eAAAA,CACIK,OAAAA,CAAQ8C,IAAI,CAACC,mBAAmB,CAAC/C,OAAAA,CAAQ8C,IAAI,CAACU,yBAAyB,EAAE;AACrEP,oBAAAA,QAAAA,EAAUK,QAAAA,GAAW;AACzB,iBAAA,CAAA,CAAA;AAER,YAAA;AACJ,QAAA;AACJ,IAAA,CAAA;AAEA,4DACAG,SAAAA,CAAU,IAAA;QACN,OAAO,IAAA;YACH,IAAI3D,aAAAA,CAAcoB,OAAO,EAAE;AACvBC,gBAAAA,YAAAA,CAAarB,cAAcoB,OAAO,CAAA;AAClCpB,gBAAAA,aAAAA,CAAcoB,OAAO,GAAG,IAAA;AAC5B,YAAA;AACAI,YAAAA,QAAAA,CAASC,IAAI,CAACC,KAAK,CAACC,QAAQ,GAAG,MAAA;AACnC,QAAA,CAAA;AACJ,IAAA,CAAA,EAAG,EAAE,CAAA;AAEL,yDACAgC,SAAAA,CAAU,IAAA;AACN,QAAA,IAAIzD,SAAS6B,UAAAA,IAAc7B,OAAAA,EAASa,UAAAA,KAAe,IAAA,IAAQpB,aAAaF,KAAAA,EAAO;AAC3EK,YAAAA,SAAAA,CAAUI,SAASa,UAAAA,GAAatB,KAAAA,CAAAA;QACpC,CAAA,MAAO;YACHK,SAAAA,CAAU,CAAA,CAAA;AACd,QAAA;IACJ,CAAA,EAAG;AAACH,QAAAA,QAAAA;QAAUO,OAAAA,EAASa,UAAAA;AAAYtB,QAAAA,KAAAA;QAAOS,OAAAA,EAAS6B;AAAW,KAAA,CAAA;AAE9D,IAAA,qBACI6B,IAAA,CAACrF,IAAAA,EAAAA;AACGsF,QAAAA,SAAAA,EAAW,CAACnF,aAAAA;QACZA,aAAAA,EAAeA,aAAAA;QACfI,MAAAA,EAAQA,MAAAA;QACRK,QAAAA,EAAU,CAAC,EAAEe,OAAAA,EAAS6B,cAAc7B,OAAAA,CAAQa,UAAU,KAAKtB,KAAI,CAAA;QAC/Dd,WAAAA,EAAaA,WAAAA;QACbmF,iBAAAA,EAAiBrE,KAAAA;QACjBsE,QAAAA,EAAU,CAAA;QACVC,IAAAA,EAAK,UAAA;AACLC,QAAAA,YAAAA,EAAY/D,SAAS8C,IAAAA,CAAKC,mBAAAA,CAAoB/C,QAAQ8C,IAAI,CAACkB,qBAAqB,EAAE;AAC9Ef,YAAAA,QAAAA,EAAU1D,KAAAA,GAAQ;AACtB,SAAA,CAAA;AACA0E,QAAAA,cAAAA,EAAcjE,OAAAA,EAAS6B,UAAAA,IAAc7B,OAAAA,CAAQa,UAAU,KAAKtB,KAAAA;QAC5D2E,SAAAA,EAAW1B,aAAAA;QACX2B,WAAAA,EAAa,CAAC3F,gBAAgB8B,gBAAAA,GAAmB8D,SAAAA;QACjDC,UAAAA,EAAY5D,eAAAA;QACZ6D,WAAAA,EAAaxD,eAAAA;QACbyC,MAAAA,EAAQxC,WAAAA;QACRwD,YAAAA,EAAc,CAAC/F,gBAAgByC,iBAAAA,GAAoBmD,SAAAA;QACnDI,WAAAA,EAAa9C,gBAAAA;QACb+C,UAAAA,EAAYlC,eAAAA;QACZmC,aAAAA,EAAenC,eAAAA;;AAEd/D,YAAAA,aAAAA,kBACGmG,GAAA,CAACxF,QAAAA,EAAAA;gBACGwE,SAAS,EAAA,IAAA;gBACTG,IAAAA,EAAK,QAAA;AACLC,gBAAAA,YAAAA,EAAY/D,SAAS8C,IAAAA,CAAK8B,mBAAAA;gBAC1BT,WAAAA,EAAa7D,gBAAAA;gBACbiE,YAAAA,EAActD,iBAAAA;gBACdiD,SAAAA,EAAW1B,aAAAA;AACXqB,gBAAAA,QAAAA,EAAU,EAAC;AAEX,gBAAA,QAAA,gBAAAc,GAAA,CAACE,WAAAA,EAAAA,EAAAA;;0BAGTF,GAAA,CAACtF,WAAAA,EAAAA;AAAWG,gBAAAA,QAAAA,EAAAA;;;;AAGxB;;;;"}

package/lib-esm/components/DragAndDrop/types.d.ts

@@ -3,9 +3,9 @@ export declare enum ORIENTATION {
     VERTICAL = "vertical"
 }
 export declare const DragContext: import("react").Context<{
-    startIndex: number;
+    startIndex: number | null;
     setStartIndex: (value: number) => void;
-    drop: (index: number) => void;
+    drop: (index: number | null) => void;
     onDrop: (start: number, end: number) => void;
     cancel: () => void;
     startGrab: (index: number) => void;
@@ -28,4 +28,4 @@ export declare const DragContext: import("react").Context<{
             moveKeys?: string;
         }) => string;
     };
-}>;
+} | null>;

package/lib-esm/components/DragAndDrop/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../src/components/DragAndDrop/types.ts"],"sourcesContent":["import { createContext } from 'react';\n\nexport enum ORIENTATION {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n}\n\nexport const DragContext = createContext<{\n    startIndex: number;\n    setStartIndex: (value: number) => void;\n    drop: (index: number) => void;\n    onDrop: (start: number, end: number) => void;\n    cancel: () => void;\n    startGrab: (index: number) => void;\n    isDragging: boolean;\n    setIsDragging: (value: boolean) => void;\n    setDragOver: (value: number) => void;\n    i18n: {\n        itemAriaLabelTemplate: string;\n        dragHandleAriaLabel: string;\n        grabbedAnnouncementTemplate: string;\n        movedAnnouncementTemplate: string;\n        droppedAnnouncementTemplate: string;\n        cancelledAnnouncementTemplate: string;\n        replacePlaceholders: (\n            template: string,\n            data: {\n                position?: number;\n                grabKey?: string;\n                dropKey?: string;\n                altDropKey?: string;\n                cancelKey?: string;\n                moveKeys?: string;\n            },\n        ) => string;\n    };\n}>(null);\n"],"names":["ORIENTATION","DragContext","createContext"],"mappings":";;AAEO,IAAA,WAAKA,iBAAAA,SAAAA,WAAAA,EAAAA;;;AAAAA,IAAAA,OAAAA,WAAAA;AAGX,CAAA,CAAA,EAAA;AAEM,MAAMC,WAAAA,GAAcC,aAAAA,CA6BxB,IAAA;;;;"}
+{"version":3,"file":"types.js","sources":["../../../src/components/DragAndDrop/types.ts"],"sourcesContent":["import { createContext } from 'react';\n\nexport enum ORIENTATION {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n}\n\nexport const DragContext = createContext<{\n    startIndex: number | null;\n    setStartIndex: (value: number) => void;\n    drop: (index: number | null) => void;\n    onDrop: (start: number, end: number) => void;\n    cancel: () => void;\n    startGrab: (index: number) => void;\n    isDragging: boolean;\n    setIsDragging: (value: boolean) => void;\n    setDragOver: (value: number) => void;\n    i18n: {\n        itemAriaLabelTemplate: string;\n        dragHandleAriaLabel: string;\n        grabbedAnnouncementTemplate: string;\n        movedAnnouncementTemplate: string;\n        droppedAnnouncementTemplate: string;\n        cancelledAnnouncementTemplate: string;\n        replacePlaceholders: (\n            template: string,\n            data: {\n                position?: number;\n                grabKey?: string;\n                dropKey?: string;\n                altDropKey?: string;\n                cancelKey?: string;\n                moveKeys?: string;\n            },\n        ) => string;\n    };\n} | null>(null);\n"],"names":["ORIENTATION","DragContext","createContext"],"mappings":";;AAEO,IAAA,WAAKA,iBAAAA,SAAAA,WAAAA,EAAAA;;;AAAAA,IAAAA,OAAAA,WAAAA;AAGX,CAAA,CAAA,EAAA;AAEM,MAAMC,WAAAA,GAAcC,aAAAA,CA6BjB,IAAA;;;;"}

package/lib-esm/components/Drawer/Drawer.d.ts

@@ -1,28 +1,28 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 export { Header as DrawerHeader, Body as DrawerBody, Footer as DrawerFooter, } from '../../shared/styles';
 export declare enum DRAWER_POSITION {
     LEFT = "LEFT",
     RIGHT = "RIGHT",
     BOTTOM = "BOTTOM"
 }
-declare const drawerPropTypes: {
+type DrawerProps = {
     /** Opens the drawer */
-    open: PropTypes.Validator<boolean>;
+    open: boolean;
     /** position of the drawer */
-    position: PropTypes.Requireable<DRAWER_POSITION>;
+    position: DRAWER_POSITION;
     /** size of the drawer */
-    size: PropTypes.Requireable<string>;
+    size?: string;
     /** Shows an overlay behind the drawer. */
-    overlay: PropTypes.Requireable<boolean>;
+    overlay?: boolean;
     /** Closes the drawer on esc */
-    closeOnEsc: PropTypes.Requireable<boolean>;
+    closeOnEsc?: boolean;
     /** Closes the drawer on overlay click */
-    closeOnOverlayClick: PropTypes.Requireable<boolean>;
+    closeOnOverlayClick?: boolean;
     /** Call back function called when the drawer closes. */
-    onClose: PropTypes.Requireable<(...args: any[]) => any>;
+    onClose?: () => void;
+    /** Ref forwarded to the underlying HTMLDivElement of the drawer container */
+    forwardRef?: React.Ref<HTMLDivElement> | React.MutableRefObject<HTMLDivElement | null>;
 };
-type DrawerProps = PropTypes.InferProps<typeof drawerPropTypes>;
 interface DrawerState {
     open: boolean;
 }
@@ -42,22 +42,6 @@ export default class Drawer extends React.Component<React.PropsWithChildren<Draw
     state: {
         open: boolean;
     };
-    static propTypes: {
-        /** Opens the drawer */
-        open: PropTypes.Validator<boolean>;
-        /** position of the drawer */
-        position: PropTypes.Requireable<DRAWER_POSITION>;
-        /** size of the drawer */
-        size: PropTypes.Requireable<string>;
-        /** Shows an overlay behind the drawer. */
-        overlay: PropTypes.Requireable<boolean>;
-        /** Closes the drawer on esc */
-        closeOnEsc: PropTypes.Requireable<boolean>;
-        /** Closes the drawer on overlay click */
-        closeOnOverlayClick: PropTypes.Requireable<boolean>;
-        /** Call back function called when the drawer closes. */
-        onClose: PropTypes.Requireable<(...args: any[]) => any>;
-    };
     static defaultProps: {
         overlay: boolean;
         position: DRAWER_POSITION;
@@ -69,9 +53,9 @@ export default class Drawer extends React.Component<React.PropsWithChildren<Draw
      */
     static getDerivedStateFromProps(props: DrawerProps): {
         open: boolean;
-    };
-    private layer;
-    private closeCallback;
+    } | null;
+    private layer?;
+    private closeCallback?;
     /**
      * Internal close handler.
      * Restores focus and calls the external onClose callback.
@@ -92,6 +76,10 @@ export default class Drawer extends React.Component<React.PropsWithChildren<Draw
      * Lifecycle method to save the currently focused element when the drawer mounts while open.
      */
     componentDidMount(): void;
+    /**
+     * Handles opening the drawer by creating the layer.
+     */
+    private handleOpen;
     /**
      * Lifecycle method to restore focus when the drawer unmounts.
      */
@@ -114,9 +102,14 @@ export default class Drawer extends React.Component<React.PropsWithChildren<Draw
      * Lifecycle method to handle Drawer updates.
      * Manages opening/closing logic via LayerManager and focus preservation.
      */
-    getSnapshotBeforeUpdate(prevProps: DrawerProps): void;
+    getSnapshotBeforeUpdate(prevProps: DrawerProps): null;
+    /**
+     * Sets the ref prop passed to the Drawer Container component.
+     * @param node
+     */
+    setRefProp: (node: HTMLDivElement | null) => void;
     /**
      * Renders the Drawer component via the LayerManager portal.
      */
-    render(): import("@emotion/react/jsx-runtime").JSX.Element;
+    render(): import("@emotion/react/jsx-runtime").JSX.Element | null;
 }

package/lib-esm/components/Drawer/Drawer.js

@@ -1,6 +1,5 @@
 import { jsx } from '@emotion/react/jsx-runtime';
 import React from 'react';
-import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 import LayerManager, { LAYER_POSITION } from '../../shared/LayerManager.js';
@@ -11,7 +10,7 @@ var DRAWER_POSITION = /*#__PURE__*/ function(DRAWER_POSITION) {
     DRAWER_POSITION["BOTTOM"] = "BOTTOM";
     return DRAWER_POSITION;
 }({});
-const positionStyle = (size)=>({
+const positionStyle$1 = (size)=>({
         ["LEFT"]: {
             before: `height: 100vh; min-width: ${size || '300px'}; transform: translateX(-100%);`,
             after: 'transform: translateX(0%);'
@@ -33,23 +32,10 @@ const positionStyle = (size)=>({
         }
     });
 const DrawerDiv = /*#__PURE__*/ styled("div", {
-    target: "ehe19t90",
+    target: "e1topccf0",
     label: "DrawerDiv"
-})("display:flex;flex-direction:column;background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";transition:transform 0.3s ease;box-shadow:", getThemeValue(THEME_NAME.MODAL_SHADOW), ";", (props)=>positionStyle(props.size)[props.position].before, "    .nf-layer-enter &{transform:translateX(0%);", (props)=>positionStyle(props.size)[props.position].after, "}");
-const drawerPropTypes = {
-    /** Opens the drawer */ open: PropTypes.bool.isRequired,
-    /** position of the drawer */ position: PropTypes.oneOf([
-        "LEFT",
-        "RIGHT",
-        "BOTTOM"
-    ]),
-    /** size of the drawer */ size: PropTypes.string,
-    /** Shows an overlay behind the drawer. */ overlay: PropTypes.bool,
-    /** Closes the drawer on esc */ closeOnEsc: PropTypes.bool,
-    /** Closes the drawer on overlay click */ closeOnOverlayClick: PropTypes.bool,
-    /** Call back function called when the drawer closes. */ onClose: PropTypes.func
-};
-const positionMap = {
+})("display:flex;flex-direction:column;background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";transition:transform 0.3s ease;box-shadow:", getThemeValue(THEME_NAME.MODAL_SHADOW), ";", (props)=>positionStyle$1(props.size)[props.position].before, "    .nf-layer-enter &{transform:translateX(0%);", (props)=>positionStyle$1(props.size)[props.position].after, "}");
+const positionMap$1 = {
     ["LEFT"]: LAYER_POSITION.TOP_LEFT,
     ["RIGHT"]: LAYER_POSITION.TOP_RIGHT,
     ["BOTTOM"]: LAYER_POSITION.BOTTOM_LEFT
@@ -70,6 +56,8 @@ class Drawer extends React.Component {
      */ componentDidMount() {
         if (this.props.open) {
             this.lastFocusedElement = document.activeElement;
+            // Handle initial open state
+            this.handleOpen();
         }
     }
     /**
@@ -83,7 +71,7 @@ class Drawer extends React.Component {
      * Lifecycle method to handle Drawer updates.
      * Manages opening/closing logic via LayerManager and focus preservation.
      */ getSnapshotBeforeUpdate(prevProps) {
-        const { open, closeOnEsc, closeOnOverlayClick, overlay, position, children, size, ...rest } = this.props;
+        const { open } = this.props;
         if (prevProps.open && !open) {
             this.closeCallback?.();
             this.restoreFocus();
@@ -91,36 +79,18 @@ class Drawer extends React.Component {
         if (!prevProps.open && open) {
             // Save current focus
             this.lastFocusedElement = document.activeElement;
-            this.layer = LayerManager.renderLayer({
-                overlay,
-                exitDelay: 300,
-                position: positionMap[position],
-                closeCallback: this.onClose,
-                closeOnEsc,
-                closeOnOverlayClick,
-                component: /*#__PURE__*/ jsx(DrawerDiv, {
-                    ...rest,
-                    ref: this.setDrawerRef,
-                    role: "dialog",
-                    "aria-modal": "true",
-                    tabIndex: -1,
-                    onKeyDown: this.handleKeyDown,
-                    position: position,
-                    size: size,
-                    onClick: (e)=>e.stopPropagation(),
-                    children: children
-                })
-            });
-            this.closeCallback = this.layer[1];
-            this.forceUpdate();
+            this.handleOpen();
         }
+        return null;
     }
     /**
      * Renders the Drawer component via the LayerManager portal.
      */ render() {
         if (this.state.open && this.layer) {
             const [Component] = this.layer;
-            return /*#__PURE__*/ jsx(Component, {});
+            return /*#__PURE__*/ jsx(Component, {
+                ref: this.setRefProp
+            });
         }
         return null;
     }
@@ -136,8 +106,8 @@ class Drawer extends React.Component {
                 open: false
             });
             this.props.onClose?.();
-            this.closeCallback = null;
-            this.layer = null;
+            this.closeCallback = undefined;
+            this.layer = undefined;
         }, this.lastFocusedElement = null, this.drawerRef = /*#__PURE__*/ React.createRef(), /**
      * Retrieves all focusable elements within the drawer.
      */ this.getFocusableElements = ()=>{
@@ -165,6 +135,32 @@ class Drawer extends React.Component {
                 }
             }
         }, /**
+     * Handles opening the drawer by creating the layer.
+     */ this.handleOpen = ()=>{
+            const { closeOnEsc, closeOnOverlayClick, position, size, overlay, children, ...rest } = this.props;
+            this.layer = LayerManager.renderLayer({
+                overlay,
+                exitDelay: 300,
+                position: positionMap$1[position],
+                closeCallback: this.onClose,
+                closeOnEsc,
+                closeOnOverlayClick,
+                component: /*#__PURE__*/ jsx(DrawerDiv, {
+                    ...rest,
+                    ref: this.setDrawerRef,
+                    role: "dialog",
+                    "aria-modal": "true",
+                    tabIndex: -1,
+                    onKeyDown: this.handleKeyDown,
+                    position: position,
+                    size: size,
+                    onClick: (e)=>e.stopPropagation(),
+                    children: children
+                })
+            });
+            this.closeCallback = this.layer[1];
+            this.forceUpdate();
+        }, /**
      * Restores focus to the element that was focused before the drawer opened.
      */ this.restoreFocus = ()=>{
             if (this.lastFocusedElement) {
@@ -209,10 +205,18 @@ class Drawer extends React.Component {
                 // Fallback to container
                 root.focus();
             }
+        }, /**
+     * Sets the ref prop passed to the Drawer Container component.
+     * @param node
+     */ this.setRefProp = (node)=>{
+            if (this.props.forwardRef && typeof this.props.forwardRef === 'function') {
+                this.props.forwardRef(node);
+            } else if (this.props.forwardRef && typeof this.props.forwardRef === 'object') {
+                this.props.forwardRef.current = node;
+            }
         };
     }
 }
-Drawer.propTypes = drawerPropTypes;
 Drawer.defaultProps = {
     overlay: true,
     position: "LEFT",

package/lib-esm/components/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';\n\nexport {\n    Header as DrawerHeader,\n    Body as DrawerBody,\n    Footer as DrawerFooter,\n} from '../../shared/styles';\n\nexport enum DRAWER_POSITION {\n    LEFT = 'LEFT',\n    RIGHT = 'RIGHT',\n    BOTTOM = 'BOTTOM',\n}\n\nconst positionStyle = (size: string) => ({\n    [DRAWER_POSITION.LEFT]: {\n        before: `height: 100vh; min-width: ${size || '300px'}; transform: translateX(-100%);`,\n        after: 'transform: translateX(0%);',\n    },\n    [DRAWER_POSITION.RIGHT]: {\n        before: `height: 100vh; min-width: ${size || '300px'}; transform: translateX(100%);`,\n        after: 'transform: translateX(0%);',\n    },\n    [DRAWER_POSITION.BOTTOM]: {\n        before: `\n            position: absolute;\n            bottom: 0;\n            width: 100%;\n            height: ${size || '90vh'};\n            transform: translateY(100%);\n            border-radius: 15px 15px 0 0; \n        `,\n        after: 'transform: translateX(0%);',\n    },\n});\n\nconst DrawerDiv = styled.div<{ position: DRAWER_POSITION; size: string }>`\n    display: flex;\n    flex-direction: column;\n    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n    transition: transform 0.3s ease;\n    box-shadow: ${getThemeValue(THEME_NAME.MODAL_SHADOW)};\n    ${(props) => positionStyle(props.size)[props.position].before}\n\n    .nf-layer-enter & {\n        transform: translateX(0%);\n        ${(props) => positionStyle(props.size)[props.position].after}\n    }\n`;\n\nconst drawerPropTypes = {\n    /** Opens the drawer */\n    open: PropTypes.bool.isRequired,\n    /** position of the drawer */\n    position: PropTypes.oneOf([\n        DRAWER_POSITION.LEFT,\n        DRAWER_POSITION.RIGHT,\n        DRAWER_POSITION.BOTTOM,\n    ]),\n    /** size of the drawer */\n    size: PropTypes.string,\n    /** Shows an overlay behind the drawer. */\n    overlay: PropTypes.bool,\n    /** Closes the drawer on esc */\n    closeOnEsc: PropTypes.bool,\n    /** Closes the drawer on overlay click */\n    closeOnOverlayClick: PropTypes.bool,\n    /** Call back function called when the drawer closes. */\n    onClose: PropTypes.func,\n};\n\ntype DrawerProps = PropTypes.InferProps<typeof drawerPropTypes>;\n\ninterface DrawerState {\n    open: boolean;\n}\n\nconst positionMap = {\n    [DRAWER_POSITION.LEFT]: LAYER_POSITION.TOP_LEFT,\n    [DRAWER_POSITION.RIGHT]: LAYER_POSITION.TOP_RIGHT,\n    [DRAWER_POSITION.BOTTOM]: LAYER_POSITION.BOTTOM_LEFT,\n};\n\n/**\n * Drawer component\n *\n * A panel that slides in from the edge of the screen.\n * It sits on top of the application content and is often used for navigation or details.\n *\n * Accessibility:\n * - Implements ARIA `role=\"dialog\"` and `aria-modal=\"true\"`.\n * - Traps focus effectively within the drawer while open.\n * - Restores focus to the triggering element upon closure.\n * - Supports closing via ESC key and overlay click.\n */\nexport default class Drawer extends React.Component<\n    React.PropsWithChildren<DrawerProps>,\n    DrawerState\n> {\n    state = {\n        open: false,\n    };\n\n    static propTypes = drawerPropTypes;\n\n    static defaultProps = {\n        overlay: true,\n        position: DRAWER_POSITION.LEFT,\n        closeOnEsc: true,\n        closeOnOverlayClick: true,\n    };\n\n    /**\n     * Syncs state with props.\n     */\n    static getDerivedStateFromProps(props: DrawerProps) {\n        if (props.open) {\n            return {\n                open: true,\n            };\n        }\n        return null;\n    }\n\n    private layer: ReturnType<typeof LayerManager.renderLayer>;\n\n    private closeCallback: (resp?: unknown) => void;\n\n    /**\n     * Internal close handler.\n     * Restores focus and calls the external onClose callback.\n     */\n    private onClose = () => {\n        this.restoreFocus();\n        this.setState({\n            open: false,\n        });\n        this.props.onClose?.();\n        this.closeCallback = null;\n        this.layer = null;\n    };\n\n    private lastFocusedElement: HTMLElement | null = null;\n    private drawerRef = React.createRef<HTMLDivElement>();\n\n    /**\n     * Retrieves all focusable elements within the drawer.\n     */\n    private getFocusableElements = (): HTMLElement[] => {\n        if (!this.drawerRef.current) return [];\n        return Array.from(\n            this.drawerRef.current.querySelectorAll(\n                'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n            ),\n        ) as HTMLElement[];\n    };\n\n    /**\n     * Handles keydown events to implement the focus trap.\n     * Traps Tab and Shift+Tab within the drawer.\n     */\n    private handleKeyDown = (e: React.KeyboardEvent) => {\n        if (e.key === 'Tab') {\n            const focusableElements = this.getFocusableElements();\n            if (focusableElements.length === 0) return;\n\n            const firstElement = focusableElements[0];\n            const lastElement = focusableElements[focusableElements.length - 1];\n\n            if (e.shiftKey) {\n                if (document.activeElement === firstElement) {\n                    lastElement.focus();\n                    e.preventDefault();\n                }\n            } else {\n                if (document.activeElement === lastElement) {\n                    firstElement.focus();\n                    e.preventDefault();\n                }\n            }\n        }\n    };\n\n    /**\n     * Lifecycle method to save the currently focused element when the drawer mounts while open.\n     */\n    componentDidMount() {\n        if (this.props.open) {\n            this.lastFocusedElement = document.activeElement as HTMLElement;\n        }\n    }\n\n    /**\n     * Lifecycle method to restore focus when the drawer unmounts.\n     */\n    componentWillUnmount() {\n        if (this.props.open) {\n            this.restoreFocus();\n        }\n    }\n\n    /**\n     * Restores focus to the element that was focused before the drawer opened.\n     */\n    private restoreFocus = () => {\n        if (this.lastFocusedElement) {\n            // Check if the element is still in the document\n            const elementToBeFocused = this.lastFocusedElement;\n            this.lastFocusedElement = null;\n            setTimeout(() => {\n                if (document.body.contains(elementToBeFocused)) {\n                    elementToBeFocused.focus();\n                }\n            }, 100);\n        }\n    };\n\n    /**\n     * Callback ref to capture the Drawer DOM element.\n     * Triggers initial focus setting when the element mounts.\n     */\n    private setDrawerRef = (node: HTMLDivElement | null) => {\n        // Update ref\n        (this.drawerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n\n        if (node) {\n            // Set initial focus when the node is mounted\n            this.setInitialFocus(node);\n        }\n    };\n\n    /**\n     * Sets initial focus within the drawer.\n     * Tries to focus the header first, then the first interactive element, or falls back to the container.\n     */\n    private setInitialFocus = (root: HTMLElement) => {\n        // Try to find the header (assumed to be the first child)\n        const firstChild = root.firstElementChild as HTMLElement;\n        if (firstChild) {\n            // Ensure it's focusable\n            if (firstChild.getAttribute('tabindex') === null) {\n                firstChild.setAttribute('tabindex', '-1');\n            }\n            firstChild.focus();\n            return;\n        }\n\n        // Fallback to focusable elements\n        const focusableElements = this.getFocusableElements();\n        if (focusableElements.length > 0) {\n            focusableElements[0].focus();\n        } else {\n            // Fallback to container\n            root.focus();\n        }\n    };\n\n    /**\n     * Lifecycle method to handle Drawer updates.\n     * Manages opening/closing logic via LayerManager and focus preservation.\n     */\n    getSnapshotBeforeUpdate(prevProps: DrawerProps) {\n        const {\n            open,\n            closeOnEsc,\n            closeOnOverlayClick,\n            overlay,\n            position,\n            children,\n            size,\n            ...rest\n        } = this.props;\n\n        if (prevProps.open && !open) {\n            this.closeCallback?.();\n            this.restoreFocus();\n        }\n\n        if (!prevProps.open && open) {\n            // Save current focus\n            this.lastFocusedElement = document.activeElement as HTMLElement;\n\n            this.layer = LayerManager.renderLayer({\n                overlay,\n                exitDelay: 300,\n                position: positionMap[position],\n                closeCallback: this.onClose,\n                closeOnEsc,\n                closeOnOverlayClick,\n                component: (\n                    <DrawerDiv\n                        {...rest}\n                        ref={this.setDrawerRef}\n                        role=\"dialog\"\n                        aria-modal=\"true\"\n                        tabIndex={-1}\n                        onKeyDown={this.handleKeyDown}\n                        position={position}\n                        size={size}\n                        onClick={(e) => e.stopPropagation()}\n                    >\n                        {children}\n                    </DrawerDiv>\n                ),\n            });\n            this.closeCallback = this.layer[1];\n            this.forceUpdate();\n        }\n    }\n\n    /**\n     * Renders the Drawer component via the LayerManager portal.\n     */\n    render() {\n        if (this.state.open && this.layer) {\n            const [Component] = this.layer;\n            return <Component />;\n        }\n\n        return null;\n    }\n}\n"],"names":["DRAWER_POSITION","positionStyle","size","before","after","DrawerDiv","styled","getThemeValue","THEME_NAME","BACKGROUND","MODAL_SHADOW","props","position","drawerPropTypes","open","PropTypes","bool","isRequired","oneOf","string","overlay","closeOnEsc","closeOnOverlayClick","onClose","func","positionMap","LAYER_POSITION","TOP_LEFT","TOP_RIGHT","BOTTOM_LEFT","Drawer","React","Component","getDerivedStateFromProps","componentDidMount","lastFocusedElement","document","activeElement","componentWillUnmount","restoreFocus","getSnapshotBeforeUpdate","prevProps","children","rest","closeCallback","layer","LayerManager","renderLayer","exitDelay","component","_jsx","ref","setDrawerRef","role","aria-modal","tabIndex","onKeyDown","handleKeyDown","onClick","e","stopPropagation","forceUpdate","render","state","setState","drawerRef","createRef","getFocusableElements","current","Array","from","querySelectorAll","key","focusableElements","length","firstElement","lastElement","shiftKey","focus","preventDefault","elementToBeFocused","setTimeout","body","contains","node","setInitialFocus","root","firstChild","firstElementChild","getAttribute","setAttribute","propTypes","defaultProps"],"mappings":"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"}
+{"version":3,"file":"Drawer.js","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';\n\nexport {\n    Header as DrawerHeader,\n    Body as DrawerBody,\n    Footer as DrawerFooter,\n} from '../../shared/styles';\n\nexport enum DRAWER_POSITION {\n    LEFT = 'LEFT',\n    RIGHT = 'RIGHT',\n    BOTTOM = 'BOTTOM',\n}\n\nconst positionStyle = (size?: string) => ({\n    [DRAWER_POSITION.LEFT]: {\n        before: `height: 100vh; min-width: ${size || '300px'}; transform: translateX(-100%);`,\n        after: 'transform: translateX(0%);',\n    },\n    [DRAWER_POSITION.RIGHT]: {\n        before: `height: 100vh; min-width: ${size || '300px'}; transform: translateX(100%);`,\n        after: 'transform: translateX(0%);',\n    },\n    [DRAWER_POSITION.BOTTOM]: {\n        before: `\n            position: absolute;\n            bottom: 0;\n            width: 100%;\n            height: ${size || '90vh'};\n            transform: translateY(100%);\n            border-radius: 15px 15px 0 0; \n        `,\n        after: 'transform: translateX(0%);',\n    },\n});\n\nconst DrawerDiv = styled.div<{ position: DRAWER_POSITION; size?: string }>`\n    display: flex;\n    flex-direction: column;\n    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n    transition: transform 0.3s ease;\n    box-shadow: ${getThemeValue(THEME_NAME.MODAL_SHADOW)};\n    ${(props) => positionStyle(props.size)[props.position].before}\n\n    .nf-layer-enter & {\n        transform: translateX(0%);\n        ${(props) => positionStyle(props.size)[props.position].after}\n    }\n`;\n\ntype DrawerProps = {\n    /** Opens the drawer */\n    open: boolean;\n    /** position of the drawer */\n    position: DRAWER_POSITION;\n    /** size of the drawer */\n    size?: string;\n    /** Shows an overlay behind the drawer. */\n    overlay?: boolean;\n    /** Closes the drawer on esc */\n    closeOnEsc?: boolean;\n    /** Closes the drawer on overlay click */\n    closeOnOverlayClick?: boolean;\n    /** Call back function called when the drawer closes. */\n    onClose?: () => void;\n    /** Ref forwarded to the underlying HTMLDivElement of the drawer container */\n    forwardRef?: React.Ref<HTMLDivElement> | React.MutableRefObject<HTMLDivElement | null>;\n};\n\ninterface DrawerState {\n    open: boolean;\n}\n\nconst positionMap = {\n    [DRAWER_POSITION.LEFT]: LAYER_POSITION.TOP_LEFT,\n    [DRAWER_POSITION.RIGHT]: LAYER_POSITION.TOP_RIGHT,\n    [DRAWER_POSITION.BOTTOM]: LAYER_POSITION.BOTTOM_LEFT,\n};\n\n/**\n * Drawer component\n *\n * A panel that slides in from the edge of the screen.\n * It sits on top of the application content and is often used for navigation or details.\n *\n * Accessibility:\n * - Implements ARIA `role=\"dialog\"` and `aria-modal=\"true\"`.\n * - Traps focus effectively within the drawer while open.\n * - Restores focus to the triggering element upon closure.\n * - Supports closing via ESC key and overlay click.\n */\nexport default class Drawer extends React.Component<\n    React.PropsWithChildren<DrawerProps>,\n    DrawerState\n> {\n    state = {\n        open: false,\n    };\n\n    static defaultProps = {\n        overlay: true,\n        position: DRAWER_POSITION.LEFT,\n        closeOnEsc: true,\n        closeOnOverlayClick: true,\n    };\n\n    /**\n     * Syncs state with props.\n     */\n    static getDerivedStateFromProps(props: DrawerProps) {\n        if (props.open) {\n            return {\n                open: true,\n            };\n        }\n        return null;\n    }\n\n    private layer?: ReturnType<typeof LayerManager.renderLayer>;\n\n    private closeCallback?: (resp?: unknown) => void;\n\n    /**\n     * Internal close handler.\n     * Restores focus and calls the external onClose callback.\n     */\n    private onClose = () => {\n        this.restoreFocus();\n        this.setState({\n            open: false,\n        });\n        this.props.onClose?.();\n        this.closeCallback = undefined;\n        this.layer = undefined;\n    };\n\n    private lastFocusedElement: HTMLElement | null = null;\n    private drawerRef = React.createRef<HTMLDivElement>();\n\n    /**\n     * Retrieves all focusable elements within the drawer.\n     */\n    private getFocusableElements = (): HTMLElement[] => {\n        if (!this.drawerRef.current) return [];\n        return Array.from(\n            this.drawerRef.current.querySelectorAll(\n                'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n            ),\n        ) as HTMLElement[];\n    };\n\n    /**\n     * Handles keydown events to implement the focus trap.\n     * Traps Tab and Shift+Tab within the drawer.\n     */\n    private handleKeyDown = (e: React.KeyboardEvent) => {\n        if (e.key === 'Tab') {\n            const focusableElements = this.getFocusableElements();\n            if (focusableElements.length === 0) return;\n\n            const firstElement = focusableElements[0];\n            const lastElement = focusableElements[focusableElements.length - 1];\n\n            if (e.shiftKey) {\n                if (document.activeElement === firstElement) {\n                    lastElement.focus();\n                    e.preventDefault();\n                }\n            } else {\n                if (document.activeElement === lastElement) {\n                    firstElement.focus();\n                    e.preventDefault();\n                }\n            }\n        }\n    };\n\n    /**\n     * Lifecycle method to save the currently focused element when the drawer mounts while open.\n     */\n    componentDidMount() {\n        if (this.props.open) {\n            this.lastFocusedElement = document.activeElement as HTMLElement;\n            // Handle initial open state\n            this.handleOpen();\n        }\n    }\n\n    /**\n     * Handles opening the drawer by creating the layer.\n     */\n    private handleOpen = () => {\n        const { closeOnEsc, closeOnOverlayClick, position, size, overlay, children, ...rest } =\n            this.props;\n\n        this.layer = LayerManager.renderLayer({\n            overlay,\n            exitDelay: 300,\n            position: positionMap[position],\n            closeCallback: this.onClose,\n            closeOnEsc,\n            closeOnOverlayClick,\n            component: (\n                <DrawerDiv\n                    {...rest}\n                    ref={this.setDrawerRef}\n                    role=\"dialog\"\n                    aria-modal=\"true\"\n                    tabIndex={-1}\n                    onKeyDown={this.handleKeyDown}\n                    position={position}\n                    size={size}\n                    onClick={(e) => e.stopPropagation()}\n                >\n                    {children}\n                </DrawerDiv>\n            ),\n        });\n        this.closeCallback = this.layer[1];\n        this.forceUpdate();\n    };\n\n    /**\n     * Lifecycle method to restore focus when the drawer unmounts.\n     */\n    componentWillUnmount() {\n        if (this.props.open) {\n            this.restoreFocus();\n        }\n    }\n\n    /**\n     * Restores focus to the element that was focused before the drawer opened.\n     */\n    private restoreFocus = () => {\n        if (this.lastFocusedElement) {\n            // Check if the element is still in the document\n            const elementToBeFocused = this.lastFocusedElement;\n            this.lastFocusedElement = null;\n            setTimeout(() => {\n                if (document.body.contains(elementToBeFocused)) {\n                    elementToBeFocused.focus();\n                }\n            }, 100);\n        }\n    };\n\n    /**\n     * Callback ref to capture the Drawer DOM element.\n     * Triggers initial focus setting when the element mounts.\n     */\n    private setDrawerRef = (node: HTMLDivElement | null) => {\n        // Update ref\n        (this.drawerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n\n        if (node) {\n            // Set initial focus when the node is mounted\n            this.setInitialFocus(node);\n        }\n    };\n\n    /**\n     * Sets initial focus within the drawer.\n     * Tries to focus the header first, then the first interactive element, or falls back to the container.\n     */\n    private setInitialFocus = (root: HTMLElement) => {\n        // Try to find the header (assumed to be the first child)\n        const firstChild = root.firstElementChild as HTMLElement;\n        if (firstChild) {\n            // Ensure it's focusable\n            if (firstChild.getAttribute('tabindex') === null) {\n                firstChild.setAttribute('tabindex', '-1');\n            }\n            firstChild.focus();\n            return;\n        }\n\n        // Fallback to focusable elements\n        const focusableElements = this.getFocusableElements();\n        if (focusableElements.length > 0) {\n            focusableElements[0].focus();\n        } else {\n            // Fallback to container\n            root.focus();\n        }\n    };\n\n    /**\n     * Lifecycle method to handle Drawer updates.\n     * Manages opening/closing logic via LayerManager and focus preservation.\n     */\n    getSnapshotBeforeUpdate(prevProps: DrawerProps) {\n        const { open } = this.props;\n\n        if (prevProps.open && !open) {\n            this.closeCallback?.();\n            this.restoreFocus();\n        }\n\n        if (!prevProps.open && open) {\n            // Save current focus\n            this.lastFocusedElement = document.activeElement as HTMLElement;\n            this.handleOpen();\n        }\n\n        return null;\n    }\n\n    /**\n     * Sets the ref prop passed to the Drawer Container component.\n     * @param node\n     */\n    setRefProp = (node: HTMLDivElement | null) => {\n        if (this.props.forwardRef && typeof this.props.forwardRef === 'function') {\n            this.props.forwardRef(node);\n        } else if (this.props.forwardRef && typeof this.props.forwardRef === 'object') {\n            (this.props.forwardRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n        }\n    };\n\n    /**\n     * Renders the Drawer component via the LayerManager portal.\n     */\n    render() {\n        if (this.state.open && this.layer) {\n            const [Component] = this.layer;\n            return <Component ref={this.setRefProp} />;\n        }\n\n        return null;\n    }\n}\n"],"names":["DRAWER_POSITION","positionStyle","size","before","after","DrawerDiv","styled","getThemeValue","THEME_NAME","BACKGROUND","MODAL_SHADOW","props","position","positionMap","LAYER_POSITION","TOP_LEFT","TOP_RIGHT","BOTTOM_LEFT","Drawer","React","Component","getDerivedStateFromProps","open","componentDidMount","lastFocusedElement","document","activeElement","handleOpen","componentWillUnmount","restoreFocus","getSnapshotBeforeUpdate","prevProps","closeCallback","render","state","layer","_jsx","ref","setRefProp","onClose","setState","undefined","drawerRef","createRef","getFocusableElements","current","Array","from","querySelectorAll","handleKeyDown","e","key","focusableElements","length","firstElement","lastElement","shiftKey","focus","preventDefault","closeOnEsc","closeOnOverlayClick","overlay","children","rest","LayerManager","renderLayer","exitDelay","component","setDrawerRef","role","aria-modal","tabIndex","onKeyDown","onClick","stopPropagation","forceUpdate","elementToBeFocused","setTimeout","body","contains","node","setInitialFocus","root","firstChild","firstElementChild","getAttribute","setAttribute","forwardRef","defaultProps"],"mappings":"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"}

package/lib-esm/components/Groups/Group.d.ts

@@ -1,10 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-declare function Group(props: React.PropsWithChildren<PropTypes.InferProps<typeof Group.propTypes>>): import("@emotion/react/jsx-runtime").JSX.Element;
-declare namespace Group {
-    var propTypes: {
-        /** Error Message for the group */
-        errorText: PropTypes.Requireable<string>;
-    };
-}
+declare const Group: React.ForwardRefExoticComponent<{
+    /** Error Message for the group */
+    errorText?: string;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
 export default Group;

package/lib-esm/components/Groups/Group.js

@@ -1,11 +1,10 @@
 import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
-import { useId } from 'react';
-import PropTypes from 'prop-types';
+import React, { useId } from 'react';
 import styled from '@emotion/styled';
 import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
-const Container = /*#__PURE__*/ styled("div", {
-    target: "e10z40ez0",
+const Container$3 = /*#__PURE__*/ styled("div", {
+    target: "eahc3qe0",
     label: "Container"
 })("display:inline-flex;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";border-radius:3px;margin:5px;& button,& label{margin:0;border:none;border-radius:0;border-left:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";box-shadow:none;height:32px;}& > div button{border-left:none;}& input,& select{border:none;height:32px;}& input,& select{border-radius:0;}& input:active,& select:active{box-shadow:none;}& > div > span{top:8px;}& > *:first-child,& > label:first-child input,& > label:first-child select,& > *:first-child label,& > *:first-child input{border-left:none;border-radius:2px 0 0 2px;}& > *:last-child,& > label:last-child input,& > label:last-child select,& > *:last-child label,& > *:last-child input{border-radius:0 2px 2px 0;}& *:focus,& *:focus + span{z-index:1;}&:focus-within,&:hover{box-shadow:", getThemeValue(THEME_NAME.HOVER_SHADOW), ";}", (props)=>props.errorText ? `
         border-color: ${getThemeValue(THEME_NAME.ERROR)};
@@ -15,15 +14,20 @@ const Container = /*#__PURE__*/ styled("div", {
         }
     ` : '');
 const ErrorContainer = /*#__PURE__*/ styled("div", {
-    target: "e10z40ez1",
+    target: "eahc3qe1",
     label: "ErrorContainer"
 })("color:", getThemeValue(THEME_NAME.ERROR), ";margin-left:8px;font-size:12px;");
-function Group(props) {
+/**
+ * Group Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLDivElement
+ */ function GroupComponent(props, ref) {
     const errorId = useId();
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            /*#__PURE__*/ jsx(Container, {
+            /*#__PURE__*/ jsx(Container$3, {
                 ...props,
+                ref: ref,
                 "aria-describedby": props.errorText ? errorId : undefined,
                 children: props.children
             }),
@@ -34,9 +38,7 @@ function Group(props) {
         ]
     });
 }
-Group.propTypes = {
-    /** Error Message for the group */ errorText: PropTypes.string
-};
+const Group = /*#__PURE__*/ React.forwardRef(GroupComponent);
 
 export { Group as default };
 //# sourceMappingURL=Group.js.map

package/lib-esm/components/Groups/Group.js.map

@@ -1 +1 @@
-{"version":3,"file":"Group.js","sources":["../../../src/components/Groups/Group.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst Container = styled.div<PropTypes.InferProps<typeof Group.propTypes>>`\n    display: inline-flex;\n    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n    border-radius: 3px;\n    margin: 5px;\n\n    /* overrides */\n    & button,\n    & label {\n        margin: 0;\n        border: none;\n        border-radius: 0;\n        border-left: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n        box-shadow: none;\n        height: 32px;\n    }\n\n    & > div button {\n        border-left: none;\n    }\n\n    & input,\n    & select {\n        border: none;\n        height: 32px;\n    }\n\n    & input,\n    & select {\n        border-radius: 0;\n    }\n\n    & input:active,\n    & select:active {\n        box-shadow: none;\n    }\n\n    & > div > span {\n        top: 8px;\n    }\n\n    /* Handling for first and last child */\n    & > *:first-child,\n    & > label:first-child input,\n    & > label:first-child select,\n    & > *:first-child label,\n    & > *:first-child input {\n        border-left: none;\n        border-radius: 2px 0 0 2px;\n    }\n\n    & > *:last-child,\n    & > label:last-child input,\n    & > label:last-child select,\n    & > *:last-child label,\n    & > *:last-child input {\n        border-radius: 0 2px 2px 0;\n    }\n\n    /* focus */\n    & *:focus,\n    & *:focus + span {\n        z-index: 1;\n    }\n\n    &:focus-within,\n    &:hover {\n        box-shadow: ${getThemeValue(THEME_NAME.HOVER_SHADOW)};\n    }\n\n    ${(props) =>\n        props.errorText\n            ? `\n        border-color: ${getThemeValue(THEME_NAME.ERROR)};\n\n        & > button, & > label {\n            border-color: ${getThemeValue(THEME_NAME.ERROR)};\n        }\n    `\n            : ''}\n`;\n\nconst ErrorContainer = styled.div`\n    color: ${getThemeValue(THEME_NAME.ERROR)};\n    margin-left: 8px;\n    font-size: 12px;\n`;\n\nexport default function Group(\n    props: React.PropsWithChildren<PropTypes.InferProps<typeof Group.propTypes>>,\n) {\n    const errorId = useId();\n\n    return (\n        <>\n            <Container {...props} aria-describedby={props.errorText ? errorId : undefined}>\n                {props.children}\n            </Container>\n            {props.errorText && <ErrorContainer id={errorId}>{props.errorText}</ErrorContainer>}\n        </>\n    );\n}\n\nGroup.propTypes = {\n    /** Error Message for the group */\n    errorText: PropTypes.string,\n};\n"],"names":["Container","styled","getThemeValue","THEME_NAME","BORDER_COLOR","HOVER_SHADOW","props","errorText","ERROR","ErrorContainer","Group","errorId","useId","_jsxs","_Fragment","_jsx","aria-describedby","undefined","children","id","propTypes","PropTypes","string"],"mappings":";;;;;;AAKA,MAAMA,SAAAA,iBAAYC,MAAAA,CAAAA,KAAAA,EAAAA;;;AAEMC,CAAAA,CAAAA,CAAAA,uCAAAA,EAAAA,aAAAA,CAAcC,WAAWC,YAAY,CAAA,EAAA,4GAAA,EAU5BF,aAAAA,CAAcC,UAAAA,CAAWC,YAAY,CAAA,EAAA,qlBAAA,EAuDhDF,aAAAA,CAAcC,UAAAA,CAAWE,YAAY,SAGrD,CAACC,KAAAA,GACCA,KAAAA,CAAMC,SAAS,GACT;sBACQ,EAAEL,aAAAA,CAAcC,UAAAA,CAAWK,KAAK,CAAA,CAAE;;;0BAG9B,EAAEN,aAAAA,CAAcC,UAAAA,CAAWK,KAAK,CAAA,CAAE;;AAExD,IAAA,CAAC,GACS,EAAA,CAAA;AAGd,MAAMC,cAAAA,iBAAiBR,MAAAA,CAAAA,KAAAA,EAAAA;;;AACVC,CAAAA,CAAAA,CAAAA,QAAAA,EAAAA,aAAAA,CAAcC,WAAWK,KAAK,CAAA,EAAA,kCAAA,CAAA;AAK5B,SAASE,MACpBJ,KAA4E,EAAA;AAE5E,IAAA,MAAMK,OAAAA,GAAUC,KAAAA,EAAAA;IAEhB,qBACIC,IAAA,CAAAC,QAAA,EAAA;;0BACIC,GAAA,CAACf,SAAAA,EAAAA;AAAW,gBAAA,GAAGM,KAAK;gBAAEU,kBAAAA,EAAkBV,KAAAA,CAAMC,SAAS,GAAGI,OAAAA,GAAUM,SAAAA;AAC/DX,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMY;;YAEVZ,KAAAA,CAAMC,SAAS,kBAAIQ,GAAA,CAACN,cAAAA,EAAAA;gBAAeU,EAAAA,EAAIR,OAAAA;AAAUL,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMC;;;;AAGpE;AAEAG,KAAAA,CAAMU,SAAS,GAAG;uCAEdb,SAAAA,EAAWc,SAAAA,CAAUC;AACzB,CAAA;;;;"}
+{"version":3,"file":"Group.js","sources":["../../../src/components/Groups/Group.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst Container = styled.div<GroupProps>`\n    display: inline-flex;\n    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n    border-radius: 3px;\n    margin: 5px;\n\n    /* overrides */\n    & button,\n    & label {\n        margin: 0;\n        border: none;\n        border-radius: 0;\n        border-left: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n        box-shadow: none;\n        height: 32px;\n    }\n\n    & > div button {\n        border-left: none;\n    }\n\n    & input,\n    & select {\n        border: none;\n        height: 32px;\n    }\n\n    & input,\n    & select {\n        border-radius: 0;\n    }\n\n    & input:active,\n    & select:active {\n        box-shadow: none;\n    }\n\n    & > div > span {\n        top: 8px;\n    }\n\n    /* Handling for first and last child */\n    & > *:first-child,\n    & > label:first-child input,\n    & > label:first-child select,\n    & > *:first-child label,\n    & > *:first-child input {\n        border-left: none;\n        border-radius: 2px 0 0 2px;\n    }\n\n    & > *:last-child,\n    & > label:last-child input,\n    & > label:last-child select,\n    & > *:last-child label,\n    & > *:last-child input {\n        border-radius: 0 2px 2px 0;\n    }\n\n    /* focus */\n    & *:focus,\n    & *:focus + span {\n        z-index: 1;\n    }\n\n    &:focus-within,\n    &:hover {\n        box-shadow: ${getThemeValue(THEME_NAME.HOVER_SHADOW)};\n    }\n\n    ${(props) =>\n        props.errorText\n            ? `\n        border-color: ${getThemeValue(THEME_NAME.ERROR)};\n\n        & > button, & > label {\n            border-color: ${getThemeValue(THEME_NAME.ERROR)};\n        }\n    `\n            : ''}\n`;\n\nconst ErrorContainer = styled.div`\n    color: ${getThemeValue(THEME_NAME.ERROR)};\n    margin-left: 8px;\n    font-size: 12px;\n`;\n\ntype GroupProps = React.PropsWithChildren<{\n    /** Error Message for the group */\n    errorText?: string;\n}>;\n\n/**\n * Group Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLDivElement\n */\nfunction GroupComponent(\n    props: React.PropsWithChildren<GroupProps>,\n    ref: React.Ref<HTMLDivElement>,\n) {\n    const errorId = useId();\n\n    return (\n        <>\n            <Container\n                {...props}\n                ref={ref}\n                aria-describedby={props.errorText ? errorId : undefined}\n            >\n                {props.children}\n            </Container>\n            {props.errorText && <ErrorContainer id={errorId}>{props.errorText}</ErrorContainer>}\n        </>\n    );\n}\n\nconst Group = React.forwardRef<HTMLDivElement, GroupProps>(GroupComponent);\nexport default Group;\n"],"names":["Container","styled","getThemeValue","THEME_NAME","BORDER_COLOR","HOVER_SHADOW","props","errorText","ERROR","ErrorContainer","GroupComponent","ref","errorId","useId","_jsxs","_Fragment","_jsx","aria-describedby","undefined","children","id","Group","React","forwardRef"],"mappings":";;;;;AAIA,MAAMA,WAAAA,iBAAYC,MAAAA,CAAAA,KAAAA,EAAAA;;;AAEMC,CAAAA,CAAAA,CAAAA,uCAAAA,EAAAA,aAAAA,CAAcC,WAAWC,YAAY,CAAA,EAAA,4GAAA,EAU5BF,aAAAA,CAAcC,UAAAA,CAAWC,YAAY,CAAA,EAAA,qlBAAA,EAuDhDF,aAAAA,CAAcC,UAAAA,CAAWE,YAAY,SAGrD,CAACC,KAAAA,GACCA,KAAAA,CAAMC,SAAS,GACT;sBACQ,EAAEL,aAAAA,CAAcC,UAAAA,CAAWK,KAAK,CAAA,CAAE;;;0BAG9B,EAAEN,aAAAA,CAAcC,UAAAA,CAAWK,KAAK,CAAA,CAAE;;AAExD,IAAA,CAAC,GACS,EAAA,CAAA;AAGd,MAAMC,cAAAA,iBAAiBR,MAAAA,CAAAA,KAAAA,EAAAA;;;AACVC,CAAAA,CAAAA,CAAAA,QAAAA,EAAAA,aAAAA,CAAcC,WAAWK,KAAK,CAAA,EAAA,kCAAA,CAAA;AAU3C;;;;AAIC,IACD,SAASE,cAAAA,CACLJ,KAA0C,EAC1CK,GAA8B,EAAA;AAE9B,IAAA,MAAMC,OAAAA,GAAUC,KAAAA,EAAAA;IAEhB,qBACIC,IAAA,CAAAC,QAAA,EAAA;;0BACIC,GAAA,CAAChB,WAAAA,EAAAA;AACI,gBAAA,GAAGM,KAAK;gBACTK,GAAAA,EAAKA,GAAAA;gBACLM,kBAAAA,EAAkBX,KAAAA,CAAMC,SAAS,GAAGK,OAAAA,GAAUM,SAAAA;AAE7CZ,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMa;;YAEVb,KAAAA,CAAMC,SAAS,kBAAIS,GAAA,CAACP,cAAAA,EAAAA;gBAAeW,EAAAA,EAAIR,OAAAA;AAAUN,gBAAAA,QAAAA,EAAAA,KAAAA,CAAMC;;;;AAGpE;AAEA,MAAMc,KAAAA,iBAAQC,KAAAA,CAAMC,UAAU,CAA6Bb,cAAAA;;;;"}

package/lib-esm/components/Input/Checkbox.d.ts

@@ -1,17 +1,14 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-type CheckboxProps = Omit<React.HTMLProps<HTMLInputElement>, 'as'> & PropTypes.InferProps<typeof Checkbox.propTypes>;
-declare function Checkbox(props: CheckboxProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare namespace Checkbox {
-    var propTypes: {
-        /** Label for the field */
-        label: PropTypes.Requireable<string>;
-        /** If the field is in indeterminate state */
-        indeterminate: PropTypes.Requireable<boolean>;
-    };
-    var defaultProps: {
-        indeterminate: boolean;
-        label: string;
-    };
-}
+declare const Checkbox: React.ForwardRefExoticComponent<{
+    /**
+     * Label for the field
+     * @default ''
+     */
+    label?: string;
+    /**
+     * If the field is in indeterminate state
+     * @default false
+     */
+    indeterminate?: boolean;
+} & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
 export default Checkbox;