no-frills-ui 0.0.14-alpha.1 → 0.0.14-alpha.11

package/lib-esm/components/Dialog/PromptDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"PromptDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/PromptDialog.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PromptDialog.js","sources":["../../../src/components/Dialog/PromptDialog.tsx"],"sourcesContent":["import React, { createRef } from 'react';\nimport styled from '@emotion/styled';\nimport { Button, ActionButton } from '../Button';\nimport { Input } from '../Input';\nimport Dialog, { DialogHeader, DialogBody, DialogFooter } from './Dialog';\n\ntype PromptOption = {\n    /** Shown as header of the dialog */\n    header: string;\n    /** Rendered as the body of the dialog */\n    body: string;\n    /** Default value for the input. */\n    defaultValue?: string;\n    /** Submit button text. Default value is 'Submit' */\n    submitText?: string;\n    /** Cancel button text. Default value is 'Cancel' */\n    cancelText?: string;\n    /** Props for the input. */\n    inputProps?: React.HTMLProps<HTMLInputElement>;\n    /** Additional props for the dialog. */\n    dialogProps?: React.ComponentProps<typeof Dialog>;\n};\n\nconst BodyText = styled.p`\n    margin-top: 0;\n`;\n\nconst InputContainer = styled.div`\n    display: flex;\n    flex: 1;\n    margin-top: 10px;\n\n    & > label {\n        flex: 1;\n        width: 100%;\n        padding: 0;\n\n        & > input {\n            width: 100%;\n            padding: 0 8px;\n            box-sizing: border-box;\n        }\n    }\n`;\n\nconst StyledInput = styled(Input)`\n    flex: 1;\n    padding: 0;\n`;\n\nexport default class PromptDialog extends React.Component<PromptOption, { value?: string }> {\n    static defaultProps = {\n        cancelText: 'Cancel',\n        submitText: 'Submit',\n        defaultValue: '',\n    };\n\n    constructor(props: PromptOption) {\n        super(props);\n        this.state = {\n            value: props.defaultValue,\n        };\n    }\n\n    private dialog = createRef<Dialog>();\n\n    private valueChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n        this.setState({\n            value: e.target.value,\n        });\n    };\n\n    private cancel = () => this.dialog.current?.close();\n\n    private submit = (e: React.FormEvent) => {\n        e.preventDefault();\n        this.dialog.current?.close(this.state.value);\n    };\n\n    public show = () => {\n        return new Promise((resolve, reject) => {\n            const onClose = (value: unknown) => {\n                if (value) {\n                    resolve(value);\n                } else {\n                    reject();\n                }\n                this.setState({\n                    value: this.props.defaultValue,\n                });\n            };\n            this.dialog.current?.open(onClose);\n        });\n    };\n\n    render() {\n        const { header, body, inputProps, submitText, cancelText, dialogProps } = this.props;\n\n        return (\n            <Dialog\n                {...dialogProps}\n                ref={this.dialog}\n                closeOnEsc={false}\n                closeOnOverlayClick={false}\n            >\n                <form onSubmit={this.submit}>\n                    {header && <DialogHeader>{header}</DialogHeader>}\n                    <DialogBody>\n                        <BodyText>{body}</BodyText>\n                        <InputContainer>\n                            <StyledInput\n                                value={this.state.value}\n                                onChange={this.valueChange}\n                                {...inputProps}\n                            />\n                        </InputContainer>\n                    </DialogBody>\n                    <DialogFooter>\n                        <Button type=\"button\" onClick={this.cancel}>\n                            {cancelText}\n                        </Button>\n                        <ActionButton>{submitText}</ActionButton>\n                    </DialogFooter>\n                </form>\n            </Dialog>\n        );\n    }\n}\n"],"names":["BodyText","styled","InputContainer","StyledInput","Input","PromptDialog","React","Component","render","header","body","inputProps","submitText","cancelText","dialogProps","props","_jsx","Dialog","ref","dialog","closeOnEsc","closeOnOverlayClick","_jsxs","form","onSubmit","submit","DialogHeader","DialogBody","value","state","onChange","valueChange","DialogFooter","Button","type","onClick","cancel","ActionButton","createRef","e","setState","target","current","close","preventDefault","show","Promise","resolve","reject","onClose","defaultValue","open","defaultProps"],"mappings":"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"}

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

@@ -1,45 +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;
-} & PropsWithChildren<{}>;
-/**
- * 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;
-    };
-}
+    /** 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
+     * @default 'Drag to reorder'
+     */
+    dragHandleAriaLabel?: string;
+    /**
+     * 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}
+     * @default 'Item moved to position {:position}'
+     */
+    movedAnnouncementTemplate?: string;
+    /**
+     * i18n: Template for dropped announcement. Placeholders: {:position}
+     * @default 'Item dropped at position {:position}'
+     */
+    droppedAnnouncementTemplate?: string;
+    /**
+     * i18n: Template for cancelled announcement
+     * @default 'Drag cancelled, item restored to original position'
+     */
+    cancelledAnnouncementTemplate?: string;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
 export default DragAndDrop;

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

@@ -1,16 +1,17 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
 import React, { useState } from 'react';
 import styled from '@emotion/styled';
-import DragItem from './DragItem';
-import { ORIENTATION, DragContext } from './types';
-/** Container Component */
-const Container = styled.div `
-    flex: 1;
-    display: flex;
-    position: relative;
-    flex-wrap: wrap;
-    flex-direction: ${props => props.orientation === ORIENTATION.HORIZONTAL ? 'row' : 'column'};
-`;
+import DragItem from './DragItem.js';
+import { ORIENTATION, DragContext } from './types.js';
+
+/** Container Component */ const Container$6 = /*#__PURE__*/ styled("div", {
+    target: "ec7q6t50",
+    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$2 = /*#__PURE__*/ styled("div", {
+    target: "ec7q6t51",
+    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;");
 /**
  * A drag and drop container component that enables reordering of child elements.
  *
@@ -28,34 +29,106 @@ const Container = styled.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
+ * @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
- */
-export default function DragAndDrop(props) {
-    const { orientation, children, onDrop, showIndicator } = props;
+ * @returns A draggable container with reorderable items
+ */ 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);
     const [dragOver, setDragOver] = useState(null);
+    const [announcement, setAnnouncement] = useState('');
+    const childrenArray = React.Children.toArray(children);
+    const totalItems = childrenArray.length;
+    /**
+     * Replace placeholders in i18n templates
+     */ const replacePlaceholders = (template, data)=>{
+        return template.replace(/\{:position\}/g, String(data.position ?? '')).replace(/\{:grabKey\}/g, data.grabKey ?? 'Space').replace(/\{:dropKey\}/g, data.dropKey ?? 'Space').replace(/\{:altDropKey\}/g, data.altDropKey ?? 'Enter').replace(/\{:cancelKey\}/g, data.cancelKey ?? 'Escape').replace(/\{:moveKeys\}/g, data.moveKeys ?? (orientation === ORIENTATION.VERTICAL ? 'Arrow Up/Down' : 'Arrow Left/Right'));
+    };
+    // i18n configuration object
+    const i18n = {
+        itemAriaLabelTemplate: itemAriaLabelTemplate ?? 'Item {:position}. Press {:grabKey} to grab, {:moveKeys} to move, {:dropKey} or {:altDropKey} to drop',
+        dragHandleAriaLabel: dragHandleAriaLabel ?? 'Drag to reorder',
+        grabbedAnnouncementTemplate: grabbedAnnouncementTemplate ?? 'Item {:position} grabbed. Use {:moveKeys} to move, {:dropKey} or {:altDropKey} to drop, {:cancelKey} to cancel',
+        movedAnnouncementTemplate: movedAnnouncementTemplate ?? 'Item moved to position {:position}',
+        droppedAnnouncementTemplate: droppedAnnouncementTemplate ?? 'Item dropped at position {:position}',
+        cancelledAnnouncementTemplate: cancelledAnnouncementTemplate ?? 'Drag cancelled, item restored to original position',
+        replacePlaceholders
+    };
     /**
      * Drop handler invoked when a draggable item is released.
      * @param index
-     */
-    const drop = (index) => {
-        startIndex !== null && (onDrop === null || onDrop === void 0 ? void 0 : onDrop(startIndex, index));
+     */ const drop = (index)=>{
+        if (startIndex !== null && index !== null) {
+            onDrop?.(startIndex, index);
+        }
         setStartIndex(null);
+        setOriginalIndex(null);
         setIsDragging(false);
     };
-    return (_jsx(DragContext.Provider, { value: { startIndex, setStartIndex, drop, isDragging, setIsDragging, setDragOver }, children: _jsx(Container, { orientation: orientation, children: React.Children.map(children, (child, index) => (_jsx(DragItem, { index: index, orientation: orientation, showIndicator: showIndicator, dragOver: dragOver, children: child }))) }) }));
+    /**
+     * Cancel handler to restore item to original position
+     */ const cancel = ()=>{
+        if (originalIndex !== null && startIndex !== null && startIndex !== originalIndex) {
+            onDrop?.(startIndex, originalIndex);
+        }
+        setStartIndex(null);
+        setOriginalIndex(null);
+        setIsDragging(false);
+    };
+    /**
+     * Start grab handler to track original position
+     */ const startGrab = (index)=>{
+        setStartIndex(index);
+        setOriginalIndex(index);
+        setIsDragging(true);
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(DragContext.Provider, {
+                value: {
+                    startIndex,
+                    setStartIndex,
+                    drop,
+                    onDrop,
+                    cancel,
+                    startGrab,
+                    isDragging,
+                    setIsDragging,
+                    setDragOver,
+                    i18n
+                },
+                children: /*#__PURE__*/ jsx(Container$6, {
+                    ...rest,
+                    ref: ref,
+                    orientation: orientation,
+                    role: "list",
+                    children: React.Children.map(childrenArray, (child, index)=>/*#__PURE__*/ jsx(DragItem, {
+                            index: index,
+                            orientation: orientation,
+                            showIndicator: showIndicator,
+                            dragOver: dragOver,
+                            totalItems: totalItems,
+                            setAnnouncement: setAnnouncement,
+                            children: child
+                        }))
+                })
+            }),
+            /*#__PURE__*/ jsx(VisuallyHidden$2, {
+                role: "status",
+                "aria-live": "polite",
+                "aria-atomic": "true",
+                children: announcement
+            })
+        ]
+    });
 }
-DragAndDrop.defaultProps = {
-    /** Orientation of the list layout */
-    orientation: ORIENTATION.VERTICAL,
-    /** Whether to display drag indicators for each list item */
-    showIndicator: false,
-};
-//# sourceMappingURL=DragAndDrop.js.map
+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","sourceRoot":"","sources":["../../../src/components/DragAndDrop/DragAndDrop.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAqB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAWnD,0BAA0B;AAC1B,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAA4B;;;;;sBAKlC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,KAAK,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;CAC7F,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAuB;IACvD,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC;IAC/D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAS,IAAI,CAAC,CAAC;IAC3D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAC7D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAS,IAAI,CAAC,CAAC;IAEvD;;;OAGG;IACH,MAAM,IAAI,GAAG,CAAC,KAAa,EAAE,EAAE;QAC3B,UAAU,KAAK,IAAI,KAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,UAAU,EAAE,KAAK,CAAC,CAAA,CAAC;QACnD,aAAa,CAAC,IAAI,CAAC,CAAC;QACpB,aAAa,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,CAAA;IAED,OAAO,CAAC,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,aAAa,EAAE,IAAI,EAAE,UAAU,EAAE,aAAa,EAAE,WAAW,EAAE,YAC5G,KAAC,SAAS,IAAC,WAAW,EAAE,WAAW,YAC9B,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5C,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,YAC7F,KAAK,GACC,CACd,CAAC,GACM,GACO,CAAC,CAAC;AAC7B,CAAC;AAED,WAAW,CAAC,YAAY,GAAG;IACvB,qCAAqC;IACrC,WAAW,EAAE,WAAW,CAAC,QAAQ;IACjC,4DAA4D;IAC5D,aAAa,EAAE,KAAK;CACvB,CAAA"}
+{"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 */\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,7 +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;
 }
 /**
  * A draggable item component that supports both mouse and touch interactions for drag-and-drop functionality.