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

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

@@ -1,69 +1,47 @@
-import { PropsWithChildren } from 'react';
+import React from 'react';
 import { ORIENTATION } from './types';
-type DragAndDropProps = {
-    /** Orientation of the list layout */
-    orientation: ORIENTATION;
+declare const DragAndDrop: React.ForwardRefExoticComponent<{
+    /**
+     * Orientation of the list layout
+     * @default ORIENTATION.VERTICAL
+     */
+    orientation?: ORIENTATION;
     /** Drop event handler */
     onDrop: (start: number, end: number) => void;
-    /** Shows drag indicator against each list item */
-    showIndicator: boolean;
-    /** i18n: Template for item aria-label. Placeholders: {:position}, {:grabKey}, {:moveKeys}, {:dropKey}, {:altDropKey} */
+    /** Shows drag indicator against each list item
+     * @default false
+     */
+    showIndicator?: boolean;
+    /**
+     * i18n: Template for item aria-label. Placeholders: {:position}, {:grabKey}, {:moveKeys}, {:dropKey}, {:altDropKey}
+     * @default 'Item {:position}. Press {:grabKey} to grab, {:moveKeys} to move, {:dropKey} or {:altDropKey} to drop'
+     */
     itemAriaLabelTemplate?: string;
-    /** i18n: Aria label for drag handle */
+    /** i18n: Aria label for drag handle
+     * @default 'Drag to reorder'
+     */
     dragHandleAriaLabel?: string;
-    /** i18n: Template for grabbed announcement. Placeholders: {:position}, {:moveKeys}, {:dropKey}, {:altDropKey}, {:cancelKey} */
+    /**
+     * i18n: Template for grabbed announcement. Placeholders: {:position}, {:moveKeys}, {:dropKey}, {:altDropKey}, {:cancelKey}
+     * @default 'Item {:position} grabbed. Use {:moveKeys} to move, {:dropKey} or {:altDropKey} to drop, {:cancelKey} to cancel'
+     */
     grabbedAnnouncementTemplate?: string;
-    /** i18n: Template for moved announcement. Placeholders: {:position} */
+    /**
+     * i18n: Template for moved announcement. Placeholders: {:position}
+     * @default 'Item moved to position {:position}'
+     */
     movedAnnouncementTemplate?: string;
-    /** i18n: Template for dropped announcement. Placeholders: {:position} */
+    /**
+     * i18n: Template for dropped announcement. Placeholders: {:position}
+     * @default 'Item dropped at position {:position}'
+     */
     droppedAnnouncementTemplate?: string;
-    /** i18n: Template for cancelled announcement */
+    /**
+     * i18n: Template for cancelled announcement
+     * @default 'Drag cancelled, item restored to original position'
+     */
     cancelledAnnouncementTemplate?: string;
-} & PropsWithChildren<unknown>;
-/**
- * A drag and drop container component that enables reordering of child elements.
- *
- * @component
- * @example
- * ```tsx
- * <DragAndDrop
- *   orientation={ORIENTATION.VERTICAL}
- *   onDrop={(start, end) => handleReorder(start, end)}
- *   showIndicator={true}
- * >
- *   <div>Item 1</div>
- *   <div>Item 2</div>
- *   <div>Item 3</div>
- * </DragAndDrop>
- * ```
- *
- * @param {DragAndDropProps} props - The component props
- * @param {ORIENTATION} props.orientation - Determines the layout direction (horizontal or vertical). Defaults to VERTICAL.
- * @param {(start: number, end: number) => void} props.onDrop - Callback fired when an item is dropped, receives the start and end indices
- * @param {boolean} props.showIndicator - Whether to display drag indicators for each list item. Defaults to false.
- * @param {React.ReactNode} props.children - Child elements to be rendered as draggable items
- *
- * @returns {JSX.Element} A draggable container with reorderable items
- */
-declare function DragAndDrop(props: DragAndDropProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare namespace DragAndDrop {
-    var defaultProps: {
-        /** Orientation of the list layout */
-        orientation: ORIENTATION;
-        /** Whether to display drag indicators for each list item */
-        showIndicator: boolean;
-        /** Default item aria-label template */
-        itemAriaLabelTemplate: string;
-        /** Default drag handle aria-label */
-        dragHandleAriaLabel: string;
-        /** Default grabbed announcement template */
-        grabbedAnnouncementTemplate: string;
-        /** Default moved announcement template */
-        movedAnnouncementTemplate: string;
-        /** Default dropped announcement template */
-        droppedAnnouncementTemplate: string;
-        /** Default cancelled announcement template */
-        cancelledAnnouncementTemplate: string;
-    };
-}
+} & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
 export default DragAndDrop;

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

@@ -2,14 +2,14 @@ import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
 import React, { useState } from 'react';
 import styled from '@emotion/styled';
 import DragItem from './DragItem.js';
-import { DragContext, ORIENTATION } from './types.js';
+import { ORIENTATION, DragContext } from './types.js';
 
-/** Container Component */ const Container = /*#__PURE__*/ styled("div", {
-    target: "emx1u4x0",
+/** Container Component */ const Container$6 = /*#__PURE__*/ styled("div", {
+    target: "e18d6tqk0",
     label: "Container"
 })("flex:1;display:flex;position:relative;flex-wrap:wrap;flex-direction:", (props)=>props.orientation === ORIENTATION.HORIZONTAL ? 'row' : 'column', ";");
-/** Visually hidden but accessible to screen readers */ const VisuallyHidden = /*#__PURE__*/ styled("div", {
-    target: "emx1u4x1",
+/** Visually hidden but accessible to screen readers */ const VisuallyHidden$2 = /*#__PURE__*/ styled("div", {
+    target: "e18d6tqk1",
     label: "VisuallyHidden"
 })("position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;");
 /**
@@ -29,15 +29,19 @@ import { DragContext, ORIENTATION } from './types.js';
  * </DragAndDrop>
  * ```
  *
- * @param {DragAndDropProps} props - The component props
- * @param {ORIENTATION} props.orientation - Determines the layout direction (horizontal or vertical). Defaults to VERTICAL.
- * @param {(start: number, end: number) => void} props.onDrop - Callback fired when an item is dropped, receives the start and end indices
- * @param {boolean} props.showIndicator - Whether to display drag indicators for each list item. Defaults to false.
- * @param {React.ReactNode} props.children - Child elements to be rendered as draggable items
+ * @param props - The component props
+ * @param props.orientation - Determines the layout direction (horizontal or vertical). Defaults to VERTICAL.
+ * @param props.onDrop - Callback fired when an item is dropped, receives the start and end indices
+ * @param props.showIndicator - Whether to display drag indicators for each list item. Defaults to false.
+ * @param props.children - Child elements to be rendered as draggable items
  *
- * @returns {JSX.Element} A draggable container with reorderable items
- */ function DragAndDrop(props) {
-    const { orientation, children, onDrop, showIndicator, itemAriaLabelTemplate, dragHandleAriaLabel, grabbedAnnouncementTemplate, movedAnnouncementTemplate, droppedAnnouncementTemplate, cancelledAnnouncementTemplate } = props;
+ * @returns A draggable container with reorderable items
+ */ /**
+ * DragAndDrop Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLDivElement
+ */ function DragAndDropComponent(props, ref) {
+    const { orientation = ORIENTATION.VERTICAL, children, onDrop, showIndicator = false, itemAriaLabelTemplate = 'Item {:position}. Press {:grabKey} to grab, {:moveKeys} to move, {:dropKey} or {:altDropKey} to drop', dragHandleAriaLabel = 'Drag to reorder', grabbedAnnouncementTemplate = 'Item {:position} grabbed. Use {:moveKeys} to move, {:dropKey} or {:altDropKey} to drop, {:cancelKey} to cancel', movedAnnouncementTemplate = 'Item moved to position {:position}', droppedAnnouncementTemplate = 'Item dropped at position {:position}', cancelledAnnouncementTemplate = 'Drag cancelled, item restored to original position', ...rest } = props;
     const [startIndex, setStartIndex] = useState(null);
     const [originalIndex, setOriginalIndex] = useState(null);
     const [isDragging, setIsDragging] = useState(false);
@@ -64,7 +68,7 @@ import { DragContext, ORIENTATION } from './types.js';
      * Drop handler invoked when a draggable item is released.
      * @param index
      */ const drop = (index)=>{
-        if (startIndex !== null) {
+        if (startIndex !== null && index !== null) {
             onDrop?.(startIndex, index);
         }
         setStartIndex(null);
@@ -103,7 +107,9 @@ import { DragContext, ORIENTATION } from './types.js';
                     setDragOver,
                     i18n
                 },
-                children: /*#__PURE__*/ jsx(Container, {
+                children: /*#__PURE__*/ jsx(Container$6, {
+                    ...rest,
+                    ref: ref,
                     orientation: orientation,
                     role: "list",
                     children: React.Children.map(childrenArray, (child, index)=>/*#__PURE__*/ jsx(DragItem, {
@@ -117,7 +123,7 @@ import { DragContext, ORIENTATION } from './types.js';
                         }))
                 })
             }),
-            /*#__PURE__*/ jsx(VisuallyHidden, {
+            /*#__PURE__*/ jsx(VisuallyHidden$2, {
                 role: "status",
                 "aria-live": "polite",
                 "aria-atomic": "true",
@@ -126,16 +132,7 @@ import { DragContext, ORIENTATION } from './types.js';
         ]
     });
 }
-DragAndDrop.defaultProps = {
-    /** Orientation of the list layout */ orientation: ORIENTATION.VERTICAL,
-    /** Whether to display drag indicators for each list item */ showIndicator: false,
-    /** Default item aria-label template */ itemAriaLabelTemplate: 'Item {:position}. Press {:grabKey} to grab, {:moveKeys} to move, {:dropKey} or {:altDropKey} to drop',
-    /** Default drag handle aria-label */ dragHandleAriaLabel: 'Drag to reorder',
-    /** Default grabbed announcement template */ grabbedAnnouncementTemplate: 'Item {:position} grabbed. Use {:moveKeys} to move, {:dropKey} or {:altDropKey} to drop, {:cancelKey} to cancel',
-    /** Default moved announcement template */ movedAnnouncementTemplate: 'Item moved to position {:position}',
-    /** Default dropped announcement template */ droppedAnnouncementTemplate: 'Item dropped at position {:position}',
-    /** Default cancelled announcement template */ cancelledAnnouncementTemplate: 'Drag cancelled, item restored to original position'
-};
+const DragAndDrop = /*#__PURE__*/ React.forwardRef(DragAndDropComponent);
 
 export { DragAndDrop as default };
 //# sourceMappingURL=DragAndDrop.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DragAndDrop.js","sources":["../../../src/components/DragAndDrop/DragAndDrop.tsx"],"sourcesContent":["import React, { PropsWithChildren, useState } from 'react';\nimport styled from '@emotion/styled';\nimport DragItem from './DragItem';\nimport { ORIENTATION, DragContext } from './types';\n\ntype DragAndDropProps = {\n    /** Orientation of the list layout */\n    orientation: ORIENTATION;\n    /** Drop event handler */\n    onDrop: (start: number, end: number) => void;\n    /** Shows drag indicator against each list item */\n    showIndicator: boolean;\n    /** i18n: Template for item aria-label. Placeholders: {:position}, {:grabKey}, {:moveKeys}, {:dropKey}, {:altDropKey} */\n    itemAriaLabelTemplate?: string;\n    /** i18n: Aria label for drag handle */\n    dragHandleAriaLabel?: string;\n    /** i18n: Template for grabbed announcement. Placeholders: {:position}, {:moveKeys}, {:dropKey}, {:altDropKey}, {:cancelKey} */\n    grabbedAnnouncementTemplate?: string;\n    /** i18n: Template for moved announcement. Placeholders: {:position} */\n    movedAnnouncementTemplate?: string;\n    /** i18n: Template for dropped announcement. Placeholders: {:position} */\n    droppedAnnouncementTemplate?: string;\n    /** i18n: Template for cancelled announcement */\n    cancelledAnnouncementTemplate?: string;\n} & PropsWithChildren<unknown>;\n\n/** Container Component */\nconst Container = styled.div<{ orientation: ORIENTATION }>`\n    flex: 1;\n    display: flex;\n    position: relative;\n    flex-wrap: wrap;\n    flex-direction: ${(props) => (props.orientation === ORIENTATION.HORIZONTAL ? 'row' : 'column')};\n`;\n\n/** Visually hidden but accessible to screen readers */\nconst VisuallyHidden = styled.div`\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n`;\n\n/**\n * A drag and drop container component that enables reordering of child elements.\n *\n * @component\n * @example\n * ```tsx\n * <DragAndDrop\n *   orientation={ORIENTATION.VERTICAL}\n *   onDrop={(start, end) => handleReorder(start, end)}\n *   showIndicator={true}\n * >\n *   <div>Item 1</div>\n *   <div>Item 2</div>\n *   <div>Item 3</div>\n * </DragAndDrop>\n * ```\n *\n * @param {DragAndDropProps} props - The component props\n * @param {ORIENTATION} props.orientation - Determines the layout direction (horizontal or vertical). Defaults to VERTICAL.\n * @param {(start: number, end: number) => void} props.onDrop - Callback fired when an item is dropped, receives the start and end indices\n * @param {boolean} props.showIndicator - Whether to display drag indicators for each list item. Defaults to false.\n * @param {React.ReactNode} props.children - Child elements to be rendered as draggable items\n *\n * @returns {JSX.Element} A draggable container with reorderable items\n */\nexport default function DragAndDrop(props: DragAndDropProps) {\n    const {\n        orientation,\n        children,\n        onDrop,\n        showIndicator,\n        itemAriaLabelTemplate,\n        dragHandleAriaLabel,\n        grabbedAnnouncementTemplate,\n        movedAnnouncementTemplate,\n        droppedAnnouncementTemplate,\n        cancelledAnnouncementTemplate,\n    } = props;\n    const [startIndex, setStartIndex] = useState<number>(null);\n    const [originalIndex, setOriginalIndex] = useState<number>(null);\n    const [isDragging, setIsDragging] = useState<boolean>(false);\n    const [dragOver, setDragOver] = useState<number>(null);\n    const [announcement, setAnnouncement] = useState('');\n    const childrenArray = React.Children.toArray(children);\n    const totalItems = childrenArray.length;\n\n    /**\n     * Replace placeholders in i18n templates\n     */\n    const 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        return template\n            .replace(/\\{:position\\}/g, String(data.position ?? ''))\n            .replace(/\\{:grabKey\\}/g, data.grabKey ?? 'Space')\n            .replace(/\\{:dropKey\\}/g, data.dropKey ?? 'Space')\n            .replace(/\\{:altDropKey\\}/g, data.altDropKey ?? 'Enter')\n            .replace(/\\{:cancelKey\\}/g, data.cancelKey ?? 'Escape')\n            .replace(\n                /\\{:moveKeys\\}/g,\n                data.moveKeys ??\n                    (orientation === ORIENTATION.VERTICAL ? 'Arrow Up/Down' : 'Arrow Left/Right'),\n            );\n    };\n\n    // i18n configuration object\n    const i18n = {\n        itemAriaLabelTemplate:\n            itemAriaLabelTemplate ??\n            'Item {:position}. Press {:grabKey} to grab, {:moveKeys} to move, {:dropKey} or {:altDropKey} to drop',\n        dragHandleAriaLabel: dragHandleAriaLabel ?? 'Drag to reorder',\n        grabbedAnnouncementTemplate:\n            grabbedAnnouncementTemplate ??\n            'Item {:position} grabbed. Use {:moveKeys} to move, {:dropKey} or {:altDropKey} to drop, {:cancelKey} to cancel',\n        movedAnnouncementTemplate:\n            movedAnnouncementTemplate ?? 'Item moved to position {:position}',\n        droppedAnnouncementTemplate:\n            droppedAnnouncementTemplate ?? 'Item dropped at position {:position}',\n        cancelledAnnouncementTemplate:\n            cancelledAnnouncementTemplate ?? 'Drag cancelled, item restored to original position',\n        replacePlaceholders,\n    };\n\n    /**\n     * Drop handler invoked when a draggable item is released.\n     * @param index\n     */\n    const drop = (index: number) => {\n        if (startIndex !== null) {\n            onDrop?.(startIndex, index);\n        }\n        setStartIndex(null);\n        setOriginalIndex(null);\n        setIsDragging(false);\n    };\n\n    /**\n     * Cancel handler to restore item to original position\n     */\n    const cancel = () => {\n        if (originalIndex !== null && startIndex !== null && startIndex !== originalIndex) {\n            onDrop?.(startIndex, originalIndex);\n        }\n        setStartIndex(null);\n        setOriginalIndex(null);\n        setIsDragging(false);\n    };\n\n    /**\n     * Start grab handler to track original position\n     */\n    const startGrab = (index: number) => {\n        setStartIndex(index);\n        setOriginalIndex(index);\n        setIsDragging(true);\n    };\n\n    return (\n        <>\n            <DragContext.Provider\n                value={{\n                    startIndex,\n                    setStartIndex,\n                    drop,\n                    onDrop,\n                    cancel,\n                    startGrab,\n                    isDragging,\n                    setIsDragging,\n                    setDragOver,\n                    i18n,\n                }}\n            >\n                <Container orientation={orientation} role=\"list\">\n                    {React.Children.map(childrenArray, (child, index) => (\n                        <DragItem\n                            index={index}\n                            orientation={orientation}\n                            showIndicator={showIndicator}\n                            dragOver={dragOver}\n                            totalItems={totalItems}\n                            setAnnouncement={setAnnouncement}\n                        >\n                            {child}\n                        </DragItem>\n                    ))}\n                </Container>\n            </DragContext.Provider>\n            <VisuallyHidden role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n                {announcement}\n            </VisuallyHidden>\n        </>\n    );\n}\n\nDragAndDrop.defaultProps = {\n    /** Orientation of the list layout */\n    orientation: ORIENTATION.VERTICAL,\n    /** Whether to display drag indicators for each list item */\n    showIndicator: false,\n    /** Default item aria-label template */\n    itemAriaLabelTemplate:\n        'Item {:position}. Press {:grabKey} to grab, {:moveKeys} to move, {:dropKey} or {:altDropKey} to drop',\n    /** Default drag handle aria-label */\n    dragHandleAriaLabel: 'Drag to reorder',\n    /** Default grabbed announcement template */\n    grabbedAnnouncementTemplate:\n        'Item {:position} grabbed. Use {:moveKeys} to move, {:dropKey} or {:altDropKey} to drop, {:cancelKey} to cancel',\n    /** Default moved announcement template */\n    movedAnnouncementTemplate: 'Item moved to position {:position}',\n    /** Default dropped announcement template */\n    droppedAnnouncementTemplate: 'Item dropped at position {:position}',\n    /** Default cancelled announcement template */\n    cancelledAnnouncementTemplate: 'Drag cancelled, item restored to original position',\n};\n"],"names":["Container","styled","props","orientation","ORIENTATION","HORIZONTAL","VisuallyHidden","DragAndDrop","children","onDrop","showIndicator","itemAriaLabelTemplate","dragHandleAriaLabel","grabbedAnnouncementTemplate","movedAnnouncementTemplate","droppedAnnouncementTemplate","cancelledAnnouncementTemplate","startIndex","setStartIndex","useState","originalIndex","setOriginalIndex","isDragging","setIsDragging","dragOver","setDragOver","announcement","setAnnouncement","childrenArray","React","Children","toArray","totalItems","length","replacePlaceholders","template","data","replace","String","position","grabKey","dropKey","altDropKey","cancelKey","moveKeys","VERTICAL","i18n","drop","index","cancel","startGrab","_jsxs","_Fragment","_jsx","DragContext","Provider","value","role","map","child","DragItem","aria-live","aria-atomic","defaultProps"],"mappings":"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"}
+{"version":3,"file":"DragAndDrop.js","sources":["../../../src/components/DragAndDrop/DragAndDrop.tsx"],"sourcesContent":["import React, { PropsWithChildren, useState } from 'react';\nimport styled from '@emotion/styled';\nimport DragItem from './DragItem';\nimport { ORIENTATION, DragContext } from './types';\n\ntype DragAndDropProps = {\n    /**\n     * Orientation of the list layout\n     * @default ORIENTATION.VERTICAL\n     */\n    orientation?: ORIENTATION;\n    /** Drop event handler */\n    onDrop: (start: number, end: number) => void;\n    /** Shows drag indicator against each list item\n     * @default false\n     */\n    showIndicator?: boolean;\n    /**\n     * i18n: Template for item aria-label. Placeholders: {:position}, {:grabKey}, {:moveKeys}, {:dropKey}, {:altDropKey}\n     * @default 'Item {:position}. Press {:grabKey} to grab, {:moveKeys} to move, {:dropKey} or {:altDropKey} to drop'\n     */\n    itemAriaLabelTemplate?: string;\n    /** i18n: Aria label for drag handle\n     * @default 'Drag to reorder'\n     */\n    dragHandleAriaLabel?: string;\n    /**\n     * i18n: Template for grabbed announcement. Placeholders: {:position}, {:moveKeys}, {:dropKey}, {:altDropKey}, {:cancelKey}\n     * @default 'Item {:position} grabbed. Use {:moveKeys} to move, {:dropKey} or {:altDropKey} to drop, {:cancelKey} to cancel'\n     */\n    grabbedAnnouncementTemplate?: string;\n    /**\n     * i18n: Template for moved announcement. Placeholders: {:position}\n     * @default 'Item moved to position {:position}'\n     */\n    movedAnnouncementTemplate?: string;\n    /**\n     * i18n: Template for dropped announcement. Placeholders: {:position}\n     * @default 'Item dropped at position {:position}'\n     */\n    droppedAnnouncementTemplate?: string;\n    /**\n     * i18n: Template for cancelled announcement\n     * @default 'Drag cancelled, item restored to original position'\n     */\n    cancelledAnnouncementTemplate?: string;\n} & PropsWithChildren<unknown>;\n\n/** Container Component */\nconst Container = styled.div<{ orientation: ORIENTATION }>`\n    flex: 1;\n    display: flex;\n    position: relative;\n    flex-wrap: wrap;\n    flex-direction: ${(props) => (props.orientation === ORIENTATION.HORIZONTAL ? 'row' : 'column')};\n`;\n\n/** Visually hidden but accessible to screen readers */\nconst VisuallyHidden = styled.div`\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n`;\n\n/**\n * A drag and drop container component that enables reordering of child elements.\n *\n * @component\n * @example\n * ```tsx\n * <DragAndDrop\n *   orientation={ORIENTATION.VERTICAL}\n *   onDrop={(start, end) => handleReorder(start, end)}\n *   showIndicator={true}\n * >\n *   <div>Item 1</div>\n *   <div>Item 2</div>\n *   <div>Item 3</div>\n * </DragAndDrop>\n * ```\n *\n * @param props - The component props\n * @param props.orientation - Determines the layout direction (horizontal or vertical). Defaults to VERTICAL.\n * @param props.onDrop - Callback fired when an item is dropped, receives the start and end indices\n * @param props.showIndicator - Whether to display drag indicators for each list item. Defaults to false.\n * @param props.children - Child elements to be rendered as draggable items\n *\n * @returns A draggable container with reorderable items\n */\n/**\n * DragAndDrop Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLDivElement\n */\nfunction DragAndDropComponent(props: DragAndDropProps, ref: React.Ref<HTMLDivElement>) {\n    const {\n        orientation = ORIENTATION.VERTICAL,\n        children,\n        onDrop,\n        showIndicator = false,\n        itemAriaLabelTemplate = 'Item {:position}. Press {:grabKey} to grab, {:moveKeys} to move, {:dropKey} or {:altDropKey} to drop',\n        dragHandleAriaLabel = 'Drag to reorder',\n        grabbedAnnouncementTemplate = 'Item {:position} grabbed. Use {:moveKeys} to move, {:dropKey} or {:altDropKey} to drop, {:cancelKey} to cancel',\n        movedAnnouncementTemplate = 'Item moved to position {:position}',\n        droppedAnnouncementTemplate = 'Item dropped at position {:position}',\n        cancelledAnnouncementTemplate = 'Drag cancelled, item restored to original position',\n        ...rest\n    } = props;\n    const [startIndex, setStartIndex] = useState<number | null>(null);\n    const [originalIndex, setOriginalIndex] = useState<number | null>(null);\n    const [isDragging, setIsDragging] = useState<boolean>(false);\n    const [dragOver, setDragOver] = useState<number | null>(null);\n    const [announcement, setAnnouncement] = useState<string | undefined>('');\n    const childrenArray = React.Children.toArray(children);\n    const totalItems = childrenArray.length;\n\n    /**\n     * Replace placeholders in i18n templates\n     */\n    const 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        return template\n            .replace(/\\{:position\\}/g, String(data.position ?? ''))\n            .replace(/\\{:grabKey\\}/g, data.grabKey ?? 'Space')\n            .replace(/\\{:dropKey\\}/g, data.dropKey ?? 'Space')\n            .replace(/\\{:altDropKey\\}/g, data.altDropKey ?? 'Enter')\n            .replace(/\\{:cancelKey\\}/g, data.cancelKey ?? 'Escape')\n            .replace(\n                /\\{:moveKeys\\}/g,\n                data.moveKeys ??\n                    (orientation === ORIENTATION.VERTICAL ? 'Arrow Up/Down' : 'Arrow Left/Right'),\n            );\n    };\n\n    // i18n configuration object\n    const i18n = {\n        itemAriaLabelTemplate:\n            itemAriaLabelTemplate ??\n            'Item {:position}. Press {:grabKey} to grab, {:moveKeys} to move, {:dropKey} or {:altDropKey} to drop',\n        dragHandleAriaLabel: dragHandleAriaLabel ?? 'Drag to reorder',\n        grabbedAnnouncementTemplate:\n            grabbedAnnouncementTemplate ??\n            'Item {:position} grabbed. Use {:moveKeys} to move, {:dropKey} or {:altDropKey} to drop, {:cancelKey} to cancel',\n        movedAnnouncementTemplate:\n            movedAnnouncementTemplate ?? 'Item moved to position {:position}',\n        droppedAnnouncementTemplate:\n            droppedAnnouncementTemplate ?? 'Item dropped at position {:position}',\n        cancelledAnnouncementTemplate:\n            cancelledAnnouncementTemplate ?? 'Drag cancelled, item restored to original position',\n        replacePlaceholders,\n    };\n\n    /**\n     * Drop handler invoked when a draggable item is released.\n     * @param index\n     */\n    const drop = (index: number | null) => {\n        if (startIndex !== null && index !== null) {\n            onDrop?.(startIndex, index);\n        }\n        setStartIndex(null);\n        setOriginalIndex(null);\n        setIsDragging(false);\n    };\n\n    /**\n     * Cancel handler to restore item to original position\n     */\n    const cancel = () => {\n        if (originalIndex !== null && startIndex !== null && startIndex !== originalIndex) {\n            onDrop?.(startIndex, originalIndex);\n        }\n        setStartIndex(null);\n        setOriginalIndex(null);\n        setIsDragging(false);\n    };\n\n    /**\n     * Start grab handler to track original position\n     */\n    const startGrab = (index: number) => {\n        setStartIndex(index);\n        setOriginalIndex(index);\n        setIsDragging(true);\n    };\n\n    return (\n        <>\n            <DragContext.Provider\n                value={{\n                    startIndex,\n                    setStartIndex,\n                    drop,\n                    onDrop,\n                    cancel,\n                    startGrab,\n                    isDragging,\n                    setIsDragging,\n                    setDragOver,\n                    i18n,\n                }}\n            >\n                <Container {...rest} ref={ref} orientation={orientation} role=\"list\">\n                    {React.Children.map(childrenArray, (child, index) => (\n                        <DragItem\n                            index={index}\n                            orientation={orientation}\n                            showIndicator={showIndicator}\n                            dragOver={dragOver}\n                            totalItems={totalItems}\n                            setAnnouncement={setAnnouncement}\n                        >\n                            {child}\n                        </DragItem>\n                    ))}\n                </Container>\n            </DragContext.Provider>\n            <VisuallyHidden role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n                {announcement}\n            </VisuallyHidden>\n        </>\n    );\n}\n\nconst DragAndDrop = React.forwardRef(DragAndDropComponent);\nexport default DragAndDrop;\n"],"names":["Container","styled","props","orientation","ORIENTATION","HORIZONTAL","VisuallyHidden","DragAndDropComponent","ref","VERTICAL","children","onDrop","showIndicator","itemAriaLabelTemplate","dragHandleAriaLabel","grabbedAnnouncementTemplate","movedAnnouncementTemplate","droppedAnnouncementTemplate","cancelledAnnouncementTemplate","rest","startIndex","setStartIndex","useState","originalIndex","setOriginalIndex","isDragging","setIsDragging","dragOver","setDragOver","announcement","setAnnouncement","childrenArray","React","Children","toArray","totalItems","length","replacePlaceholders","template","data","replace","String","position","grabKey","dropKey","altDropKey","cancelKey","moveKeys","i18n","drop","index","cancel","startGrab","_jsxs","_Fragment","_jsx","DragContext","Provider","value","role","map","child","DragItem","aria-live","aria-atomic","DragAndDrop","forwardRef"],"mappings":"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"}

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

@@ -8,11 +8,11 @@ interface DragItemProps {
     /** Whether to show a drag handle indicator instead of making the entire item draggable */
     showIndicator: boolean;
     /** The index of the item currently being dragged over */
-    dragOver: number;
+    dragOver: number | null;
     /** Total number of items in the list */
     totalItems: number;
     /** Callback to set announcement for screen readers */
-    setAnnouncement: (message: string) => void;
+    setAnnouncement: (message?: string) => void;
 }
 /**
  * A draggable item component that supports both mouse and touch interactions for drag-and-drop functionality.

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

@@ -6,15 +6,15 @@ import { DragContext, ORIENTATION } from './types.js';
 import CheckCircle from '../../icons/DragIndicator.js';
 
 /** Styled component for the draggable item container */ const Item = /*#__PURE__*/ styled("div", {
-    target: "ews8uza0",
+    target: "ertl9d70",
     label: "Item"
-})("cursor:", (props)=>props.showIndicator ? 'default' : 'move', ";display:flex;user-select:", (props)=>props.showIndicator ? 'auto' : 'none', ";border-top:2px dashed\n        ", (props)=>props.orientation === ORIENTATION.VERTICAL && props.active > 0 ? getThemeValue(THEME_NAME.PRIMARY) : 'transparent', ";border-bottom:2px dashed\n        ", (props)=>props.orientation === ORIENTATION.VERTICAL && props.active < 0 ? getThemeValue(THEME_NAME.PRIMARY) : 'transparent', ";border-left:2px dashed\n        ", (props)=>props.orientation === ORIENTATION.HORIZONTAL && props.active > 0 ? getThemeValue(THEME_NAME.PRIMARY) : 'transparent', ";border-right:2px dashed\n        ", (props)=>props.orientation === ORIENTATION.HORIZONTAL && props.active < 0 ? getThemeValue(THEME_NAME.PRIMARY) : 'transparent', ";opacity:", (props)=>props.dragging ? 0.5 : 1, ";border-radius:10px;&:focus{box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:focus:not(:focus-visible){box-shadow:none;}&:focus-visible{box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}");
+})("cursor:", (props)=>props.showIndicator ? 'default' : 'move', ";display:flex;user-select:", (props)=>props.showIndicator ? 'auto' : 'none', ";border-top:2px dashed\n        ", (props)=>props.orientation === ORIENTATION.VERTICAL && props.active !== null && props.active > 0 ? getThemeValue(THEME_NAME.PRIMARY) : 'transparent', ";border-bottom:2px dashed\n        ", (props)=>props.orientation === ORIENTATION.VERTICAL && props.active !== null && props.active < 0 ? getThemeValue(THEME_NAME.PRIMARY) : 'transparent', ";border-left:2px dashed\n        ", (props)=>props.orientation === ORIENTATION.HORIZONTAL && props.active !== null && props.active > 0 ? getThemeValue(THEME_NAME.PRIMARY) : 'transparent', ";border-right:2px dashed\n        ", (props)=>props.orientation === ORIENTATION.HORIZONTAL && props.active !== null && props.active < 0 ? getThemeValue(THEME_NAME.PRIMARY) : 'transparent', ";opacity:", (props)=>props.dragging ? 0.5 : 1, ";border-radius:10px;&:focus{box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:focus:not(:focus-visible){box-shadow:none;}&:focus-visible{box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}");
 /** Styled component for the drag handle indicator */ const DragKnob = /*#__PURE__*/ styled("div", {
-    target: "ews8uza1",
+    target: "ertl9d71",
     label: "DragKnob"
 })("padding-top:8px;cursor:move;touch-action:none;color:", getThemeValue(THEME_NAME.DISABLED), ";");
-/** Container for the children */ const Container = /*#__PURE__*/ styled("div", {
-    target: "ews8uza2",
+/** Container for the children */ const Container$7 = /*#__PURE__*/ styled("div", {
+    target: "ertl9d72",
     label: "Container"
 })("flex:1;");
 /**
@@ -65,8 +65,8 @@ import CheckCircle from '../../icons/DragIndicator.js';
      * Drag start event handler
      * @param e Event
      */ const dragStartHandler = ()=>{
-        context.setStartIndex(index);
-        context.setIsDragging(true);
+        context?.setStartIndex(index);
+        context?.setIsDragging(true);
     };
     /**
      * Drag over event handler
@@ -74,7 +74,9 @@ import CheckCircle from '../../icons/DragIndicator.js';
      */ const dragOverHandler = (e)=>{
         e.preventDefault();
         e.stopPropagation();
-        setActive(context.startIndex - index);
+        if (context && context.startIndex !== null) {
+            setActive(context.startIndex - index);
+        }
     };
     /**
      * Drag leave event handler
@@ -87,8 +89,8 @@ import CheckCircle from '../../icons/DragIndicator.js';
      */ const dropHandler = (e)=>{
         e.preventDefault();
         setActive(0);
-        context.drop(index);
-        context.setIsDragging(false);
+        context?.drop(index);
+        context?.setIsDragging(false);
     };
     /**
      * Touch start event handler
@@ -99,9 +101,9 @@ import CheckCircle from '../../icons/DragIndicator.js';
             clearTimeout(touchTimerRef.current);
         }
         touchTimerRef.current = setTimeout(()=>{
-            context.setStartIndex(index);
-            context.setIsDragging(true);
-            context.setDragOver(index);
+            context?.setStartIndex(index);
+            context?.setIsDragging(true);
+            context?.setDragOver(index);
             document.body.style.overflow = 'hidden';
             vibrate(50);
         }, 200);
@@ -113,7 +115,7 @@ import CheckCircle from '../../icons/DragIndicator.js';
      */ const touchMoveHandler = (e)=>{
         const touch = e.touches[0];
         if (!touch) return;
-        if (context.isDragging) {
+        if (context?.isDragging) {
             e.preventDefault();
             // get the element under the touch point
             const el = document.elementFromPoint(touch.clientX, touch.clientY);
@@ -121,7 +123,7 @@ import CheckCircle from '../../icons/DragIndicator.js';
             const overIndex = overAttr != null ? parseInt(overAttr, 10) : null;
             // if we know which index we're over, update visual state
             if (overIndex !== null) {
-                context.setDragOver(overIndex);
+                context?.setDragOver(overIndex);
             }
         } else if (touchTimerRef.current) {
             clearTimeout(touchTimerRef.current);
@@ -136,10 +138,10 @@ import CheckCircle from '../../icons/DragIndicator.js';
             clearTimeout(touchTimerRef.current);
             touchTimerRef.current = null;
         }
-        if (context.isDragging) {
-            context.drop(dragOver);
+        if (context?.isDragging) {
+            context?.drop(dragOver);
             vibrate(50);
-            context.setIsDragging(false);
+            context?.setIsDragging(false);
             document.body.style.overflow = 'auto';
         }
     };
@@ -150,35 +152,35 @@ import CheckCircle from '../../icons/DragIndicator.js';
         const isVertical = orientation === ORIENTATION.VERTICAL;
         const moveUp = isVertical ? 'ArrowUp' : 'ArrowLeft';
         const moveDown = isVertical ? 'ArrowDown' : 'ArrowRight';
-        const isGrabbed = context.isDragging && context.startIndex === index;
+        const isGrabbed = context?.isDragging && context?.startIndex === index;
         // Space to grab/drop
         if (e.key === ' ' || e.key === 'Spacebar') {
             e.preventDefault();
             if (isGrabbed) {
                 // Drop at current position
-                context.drop(index);
-                setAnnouncement(context.i18n.replacePlaceholders(context.i18n.droppedAnnouncementTemplate, {
+                context?.drop(index);
+                setAnnouncement(context?.i18n.replacePlaceholders(context?.i18n.droppedAnnouncementTemplate, {
                     position: index + 1
                 }));
             } else {
                 // Grab item
-                context.startGrab(index);
-                setAnnouncement(context.i18n.replacePlaceholders(context.i18n.grabbedAnnouncementTemplate, {
+                context?.startGrab(index);
+                setAnnouncement(context?.i18n.replacePlaceholders(context?.i18n.grabbedAnnouncementTemplate, {
                     position: index + 1
                 }));
             }
         } else if (e.key === 'Enter' && isGrabbed) {
             e.preventDefault();
-            context.drop(index);
-            setAnnouncement(context.i18n.replacePlaceholders(context.i18n.droppedAnnouncementTemplate, {
+            context?.drop(index);
+            setAnnouncement(context?.i18n.replacePlaceholders(context?.i18n.droppedAnnouncementTemplate, {
                 position: index + 1
             }));
         } else if (e.key === 'Escape' && isGrabbed) {
             e.preventDefault();
-            context.cancel();
-            setAnnouncement(context.i18n.cancelledAnnouncementTemplate);
+            context?.cancel();
+            setAnnouncement(context?.i18n.cancelledAnnouncementTemplate);
         } else if (isGrabbed) {
-            if (e.key === moveUp && index > 0) {
+            if (e.key === moveUp && index > 0 && context.startIndex !== null) {
                 e.preventDefault();
                 // Move without dropping - just reorder and update startIndex
                 const newIndex = index - 1;
@@ -187,7 +189,7 @@ import CheckCircle from '../../icons/DragIndicator.js';
                 setAnnouncement(context.i18n.replacePlaceholders(context.i18n.movedAnnouncementTemplate, {
                     position: newIndex + 1
                 }));
-            } else if (e.key === moveDown && index < totalItems - 1) {
+            } else if (e.key === moveDown && index < totalItems - 1 && context.startIndex !== null) {
                 e.preventDefault();
                 // Move without dropping - just reorder and update startIndex
                 const newIndex = index + 1;
@@ -209,30 +211,30 @@ import CheckCircle from '../../icons/DragIndicator.js';
         };
     }, []);
     /** Update active state based on dragOver changes */ useEffect(()=>{
-        if (context.isDragging && dragOver === index) {
-            setActive(context.startIndex - index);
+        if (context?.isDragging && context?.startIndex !== null && dragOver === index) {
+            setActive(context?.startIndex - index);
         } else {
             setActive(0);
         }
     }, [
         dragOver,
-        context.startIndex,
+        context?.startIndex,
         index,
-        context.isDragging
+        context?.isDragging
     ]);
     return /*#__PURE__*/ jsxs(Item, {
         draggable: !showIndicator,
         showIndicator: showIndicator,
         active: active,
-        dragging: context.isDragging && context.startIndex === index,
+        dragging: !!(context?.isDragging && context.startIndex === index),
         orientation: orientation,
         "data-drag-index": index,
         tabIndex: 0,
         role: "listitem",
-        "aria-label": context.i18n.replacePlaceholders(context.i18n.itemAriaLabelTemplate, {
+        "aria-label": context?.i18n.replacePlaceholders(context.i18n.itemAriaLabelTemplate, {
             position: index + 1
         }),
-        "aria-grabbed": context.isDragging && context.startIndex === index,
+        "aria-grabbed": context?.isDragging && context.startIndex === index,
         onKeyDown: handleKeyDown,
         onDragStart: !showIndicator ? dragStartHandler : undefined,
         onDragOver: dragOverHandler,
@@ -246,14 +248,14 @@ import CheckCircle from '../../icons/DragIndicator.js';
             showIndicator && /*#__PURE__*/ jsx(DragKnob, {
                 draggable: true,
                 role: "button",
-                "aria-label": context.i18n.dragHandleAriaLabel,
+                "aria-label": context?.i18n.dragHandleAriaLabel,
                 onDragStart: dragStartHandler,
                 onTouchStart: touchStartHandler,
                 onKeyDown: handleKeyDown,
                 tabIndex: -1,
                 children: /*#__PURE__*/ jsx(CheckCircle, {})
             }),
-            /*#__PURE__*/ jsx(Container, {
+            /*#__PURE__*/ jsx(Container$7, {
                 children: children
             })
         ]

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":"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"}