@progress/kendo-react-sortable 7.2.4-develop.3 → 7.2.4-develop.4

package/index.d.ts

@@ -1,13 +1,472 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2024 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the package root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Sortable } from './Sortable';
-import { SortableOnDragStartEvent } from './events/SortableOnDragStartEvent';
-import { SortableOnDragOverEvent } from './events/SortableOnDragOverEvent';
-import { SortableOnDragEndEvent } from './events/SortableOnDragEndEvent';
-import { type SortableProps } from './interfaces/SortableProps';
-import { type SortableItemUIProps } from './interfaces/SortableItemUIProps';
-import { type SortableEmptyItemUIProps } from './interfaces/SortableEmptyItemUIProps';
-import { SortableOnNavigateEvent } from './events/SortableOnNavigateEvent';
-export { Sortable, SortableProps, SortableItemUIProps, SortableEmptyItemUIProps, SortableOnDragStartEvent, SortableOnDragOverEvent, SortableOnDragEndEvent, SortableOnNavigateEvent };
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { DraggableDragEvent } from '@progress/kendo-react-common';
+import { DraggableDragStartEvent } from '@progress/kendo-react-common';
+import { DraggableReleaseEvent } from '@progress/kendo-react-common';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import PropTypes from 'prop-types';
+import * as React_2 from 'react';
+
+/**
+ * @hidden
+ */
+declare interface BaseEvent<T extends React.Component> {
+    /**
+     * An event target.
+     */
+    target: T;
+}
+
+/**
+ * @hidden
+ */
+declare abstract class PreventableEvent {
+    private prevented;
+    /**
+     * Prevents the default action for a specified event.
+     * In this way, the source component suppresses the built-in behavior that follows the event.
+     */
+    preventDefault(): void;
+    /**
+     * Returns `true` if the event was prevented by any of its subscribers.
+     *
+     * @returns - Returns `true` if the default action was prevented.
+     * Otherwise, returns `false`.
+     */
+    isDefaultPrevented(): boolean;
+}
+
+export declare class Sortable extends React_2.Component<SortableProps, SortableState> {
+    /**
+     * @hidden
+     */
+    static defaultProps: SortableDefaultProps;
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        idField: PropTypes.Validator<string>;
+        disabledField: PropTypes.Requireable<string>;
+        data: PropTypes.Validator<any[]>;
+        tabIndex: PropTypes.Requireable<number>;
+        navigation: PropTypes.Requireable<boolean>;
+        animation: PropTypes.Requireable<boolean>;
+        itemsWrapUI: PropTypes.Requireable<any>;
+        itemUI: PropTypes.Validator<(...args: any[]) => any>;
+        emptyItemUI: PropTypes.Requireable<(...args: any[]) => any>;
+        style: PropTypes.Requireable<object>;
+        className: PropTypes.Requireable<string>;
+        onDragStart: PropTypes.Requireable<(...args: any[]) => any>;
+        onDragOver: PropTypes.Requireable<(...args: any[]) => any>;
+        onDragEnd: PropTypes.Requireable<(...args: any[]) => any>;
+        onNavigate: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    /**
+     * @hidden
+     */
+    state: {
+        clientX: number;
+        clientY: number;
+        isDragging: boolean;
+        activeId: string;
+        dragCueWidth: number;
+        dragCueHeight: number;
+    };
+    private isRtl;
+    private get container();
+    private itemRefsMap;
+    private oldSizesMap;
+    private animatingItemMap;
+    private draggableRef;
+    private offsetParent;
+    private isUnmounted;
+    private focusActiveId;
+    private isKeyboardNavigated;
+    private isDragPrevented;
+    constructor(props: SortableProps);
+    /**
+     * @hidden
+     */
+    getSnapshotBeforeUpdate(): null;
+    /**
+     * @hidden
+     */
+    componentDidUpdate(previousProps: SortableProps): void;
+    /**
+     * @hidden
+     */
+    componentDidMount(): void;
+    /**
+     * @hidden
+     */
+    componentWillUnmount(): void;
+    /**
+     * @hidden
+     */
+    swapItems: (newState: object[], source: number, destination: number) => number;
+    /**
+     * @hidden
+     */
+    generateNewState: (prevIndex: number, nextIndex: number) => object[];
+    /**
+     * @hidden
+     */
+    closestSortableItem: (target: HTMLElement | null) => {
+        element: HTMLElement | null;
+        id: string;
+    };
+    /**
+     * @hidden
+     */
+    isSortable: (target: HTMLElement) => boolean;
+    /**
+     * @hidden
+     */
+    closestSortable: (target: HTMLElement | null) => HTMLElement | null;
+    /**
+     * @hidden
+     */
+    isSameSortable: (element: HTMLElement) => boolean;
+    /**
+     * @hidden
+     */
+    idComparer: (id1: any, id2: any) => boolean;
+    /**
+     * @hidden
+     */
+    findItem: (id: string) => object | undefined;
+    /**
+     * @hidden
+     */
+    findIndex: (id: string) => number;
+    /**
+     * @hidden
+     */
+    isItemDisabled: (item: any) => boolean;
+    /**
+     * @hidden
+     */
+    shouldResetActive: () => boolean;
+    /**
+     * @hidden
+     */
+    parentOffset(): any;
+    /**
+     * @hidden
+     */
+    widgetTarget: (target: any) => boolean;
+    /**
+     * @hidden
+     */
+    allowDrag: (target: HTMLElement) => boolean;
+    /**
+     * @hidden
+     */
+    onDragStart: (eventData: DraggableDragStartEvent) => void;
+    /**
+     * @hidden
+     */
+    onDragOver: (eventData: DraggableDragEvent) => void;
+    /**
+     * @hidden
+     */
+    onDragEnd: (eventData: DraggableReleaseEvent) => void;
+    /**
+     * @hidden
+     */
+    shouldReorder: (draggerOverElement: HTMLElement | null, clientX: number, clientY: number) => boolean | null;
+    /**
+     * @hidden
+     */
+    thresholdRect: (draggerOverElement: HTMLElement | null) => {
+        top: number;
+        left: number;
+        bottom: number;
+        right: number;
+    } | null;
+    /**
+     * @hidden
+     */
+    onItemBlur: () => void;
+    /**
+     * @hidden
+     */
+    onItemFocus: (event: React_2.FocusEvent<HTMLDivElement>) => void;
+    /**
+     * @hidden
+     */
+    onKeyDown: (event: React_2.KeyboardEvent<HTMLDivElement>) => void;
+    /**
+     * @hidden
+     */
+    resetState: (resetActive?: boolean) => void;
+    /**
+     * @hidden
+     */
+    renderData: () => JSX_2.Element[];
+    /**
+     * @hidden
+     */
+    renderNoData: () => JSX_2.Element | undefined;
+    /**
+     * @hidden
+     */
+    renderDragCue: () => JSX_2.Element | undefined;
+    /**
+     * @hidden
+     */
+    refAssign: (element: any, id: any) => void;
+    /**
+     * @hidden
+     */
+    draggableRefAssign: (ref: any) => void;
+    /**
+     * @hidden
+     */
+    render(): JSX_2.Element;
+}
+
+/**
+ * @hidden
+ */
+declare interface SortableDefaultProps {
+    /**
+     * Specifies the tab index of the Sortable items.
+     */
+    tabIndex?: number;
+    /**
+     * Enables or disables the [keyboard navigation]({% slug keyboard_navigation_sortable %}).
+     * Defaults to `true`.
+     */
+    navigation?: boolean;
+    /**
+     * Enables or disables the reorder animation of the Sortable items.
+     * defaults to `true`.
+     */
+    animation?: boolean;
+    /**
+     * The component that is rendered when no data is available.
+     */
+    emptyItemUI?: React.ComponentType<SortableEmptyItemUIProps>;
+}
+
+/**
+ * Represents the props of the UI component that is rendered when no data is available.
+ */
+export declare interface SortableEmptyItemUIProps {
+    /**
+     * The `noData` localization message.
+     */
+    message: string;
+}
+
+/**
+ * Represents the props of the Sortable item UI component.
+ */
+export declare interface SortableItemUIProps {
+    /**
+     * The data object that represents the current Sortable item.
+     */
+    dataItem: any;
+    /**
+     * The flag which describes that an item is disabled.
+     */
+    isDisabled: boolean;
+    /**
+     * The flag which describes that an item is active.
+     */
+    isActive: boolean;
+    /**
+     * The flag which describes that an item is dragged.
+     */
+    isDragged: boolean;
+    /**
+     * The flag which describes that an item is rendered inside the drag cue.
+     */
+    isDragCue: boolean;
+    /**
+     * The callback function that has to be passed to the `ref` property of the first child element.
+     */
+    forwardRef?: (element: HTMLElement) => void;
+    /**
+     * The atributes that have to be passed to the first child element.
+     */
+    attributes?: any;
+    /**
+     * The CSS styles that have to be passed to the first child element.
+     */
+    style: React.CSSProperties;
+}
+
+/**
+ * The `SortableOnDragEndEvent` event.
+ */
+export declare class SortableOnDragEndEvent implements BaseEvent<Sortable> {
+    /**
+     * The Sortable component.
+     */
+    target: Sortable;
+    /**
+     * The previous index of the dragged item.
+     */
+    prevIndex: number;
+    /**
+     * The new index of the dragged item.
+     */
+    nextIndex: number;
+    /**
+     * The new state of the Sortable data.
+     */
+    newState: Array<object>;
+    /**
+     * @hidden
+     */
+    constructor(target: Sortable, prevIndex: number, nextIndex: number, newState: Array<object>);
+}
+
+/**
+ * The `SortableOnDragOverEvent` event.
+ */
+export declare class SortableOnDragOverEvent implements BaseEvent<Sortable> {
+    /**
+     * The Sortable component.
+     */
+    target: Sortable;
+    /**
+     * The previous index of the dragged item.
+     */
+    prevIndex: number;
+    /**
+     * The new index of the dragged item.
+     */
+    nextIndex: number;
+    /**
+     * The new state of the Sortable data.
+     */
+    newState: Array<object>;
+    /**
+     * @hidden
+     */
+    constructor(target: Sortable, prevIndex: number, nextIndex: number, newState: Array<object>);
+}
+
+/**
+ * The `SortableOnDragStartEvent` event.
+ */
+export declare class SortableOnDragStartEvent extends PreventableEvent implements BaseEvent<Sortable> {
+    /**
+     * The Sortable component.
+     */
+    target: Sortable;
+    /**
+     * The target element.
+     */
+    element: HTMLElement;
+    /**
+     * The previous index of the dragged item.
+     */
+    prevIndex: number;
+    /**
+     * @hidden
+     */
+    constructor(target: Sortable, prevIndex: number, element: HTMLElement);
+}
+
+/**
+ * The `SortableOnNavigateEvent` event.
+ */
+export declare class SortableOnNavigateEvent implements BaseEvent<Sortable> {
+    /**
+     * The Sortable component.
+     */
+    target: Sortable;
+    /**
+     * The previous index of the dragged item.
+     */
+    prevIndex: number;
+    /**
+     * The new index of the dragged item.
+     */
+    nextIndex: number;
+    /**
+     * The new state of the Sortable data.
+     */
+    newState: Array<object>;
+    /**
+     * @hidden
+     */
+    constructor(target: Sortable, prevIndex: number, nextIndex: number, newState: Array<object>);
+}
+
+/**
+ * Represents the props of the [KendoReact Sortable component]({% slug overview_sortable %}).
+ */
+export declare interface SortableProps extends SortableDefaultProps {
+    /**
+     * (Required) The Sortable items UI.
+     */
+    itemUI: React.ComponentType<SortableItemUIProps>;
+    /**
+     * @hidden
+     *
+     * Use it to override the sortable items container component.
+     *
+     * @default 'div''
+     */
+    itemsWrapUI?: React.ForwardRefExoticComponent<any>;
+    /**
+     * (Required) The field which uniquely identifies the Sortable items.
+     */
+    idField: string;
+    /**
+     * The field which enables or disables an item.
+     */
+    disabledField?: string;
+    /**
+     * (Required) The data items of the Sortable.
+     */
+    data: Array<object>;
+    /**
+     * Defines the CSS styles which are applied to the Sortable element.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Defines the CSS class which is applied to the Sortable element.
+     */
+    className?: string;
+    /**
+     * Fires when the user starts dragging an item. This event is preventable.
+     */
+    onDragStart?: (event: SortableOnDragStartEvent) => void;
+    /**
+     * Fires when the user is dragging an item over another Sortable item.
+     */
+    onDragOver?: (event: SortableOnDragOverEvent) => void;
+    /**
+     * Fires when the user stops dragging an item.
+     */
+    onDragEnd?: (event: SortableOnDragEndEvent) => void;
+    /**
+     * Fires when the user is navigates within the Srotable by using the keyboard.
+     */
+    onNavigate?: (event: SortableOnNavigateEvent) => void;
+}
+
+/**
+ * @hidden
+ */
+declare interface SortableState {
+    clientX: number;
+    clientY: number;
+    isDragging: boolean;
+    activeId: string;
+    dragCueWidth: number;
+    dragCueHeight: number;
+}
+
+export { }

package/index.js

@@ -1,5 +1,8 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2024 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the package root for more information
-*-------------------------------------------------------------------------------------------*/
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const B=require("react"),F=require("react-dom"),h=require("prop-types"),u=require("@progress/kendo-react-common"),w=require("@progress/kendo-react-intl");function N(r){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(i,t,e.get?e:{enumerable:!0,get:()=>r[t]})}}return i.default=r,Object.freeze(i)}const p=N(B),K=N(F);class _{constructor(){this.prevented=!1}preventDefault(){this.prevented=!0}isDefaultPrevented(){return this.prevented}}class O extends _{constructor(i,t,e){super(),this.target=i,this.prevIndex=t,this.element=e}}class T{constructor(i,t,e,s){this.target=i,this.prevIndex=t,this.nextIndex=e,this.newState=s}}class A{constructor(i,t,e,s){this.target=i,this.prevIndex=t,this.nextIndex=e,this.newState=s}}class M{constructor(i,t,e,s){this.target=i,this.prevIndex=t,this.nextIndex=e,this.newState=s}}const E="sortable.noData",L={[E]:"No Data"},X=(r,i)=>{for(let t=0;t<r.length;t++)if(i(r[t]))return r[t]},y=(r,i)=>{for(let t=0;t<r.length;t++)if(i(r[t]))return t;return-1},C=r=>String(r).trim().split(" "),z=(r,i)=>{const t=C(i);return!!C(r.className).find(e=>t.indexOf(e)>=0)},Y=/^(?:a|input|select|option|textarea|button|object)$/i,q=r=>{if(r.tagName){const i=r.tagName.toLowerCase(),t=r.getAttribute("tabIndex"),e=t==="-1";let s=t!==null&&!e;return Y.test(i)&&(s=!r.disabled&&!e),s}return!1},W=(r,i)=>{for(;r&&!i(r);)r=r.parentNode;return r},H=u.hasRelativeStackingContext(),j=r=>{if(!r||!H)return null;let i=r.parentElement;for(;i;){if(window.getComputedStyle(i).transform!=="none")return i;i=i.parentElement}},G={name:"@progress/kendo-react-sortable",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},x=200,D="data-sortable-id",P="data-sortable-component",$={[P]:!0};class S extends p.Component{constructor(i){super(i),this.state={clientX:0,clientY:0,isDragging:!1,activeId:"",dragCueWidth:0,dragCueHeight:0},this.isRtl=!1,this.itemRefsMap={},this.oldSizesMap={},this.animatingItemMap={},this.draggableRef=null,this.isUnmounted=!1,this.focusActiveId=!1,this.isKeyboardNavigated=!1,this.isDragPrevented=!1,this.swapItems=(t,e,s)=>{let n=t[e];return t[e]=t[s],t[s]=n,e=s,e},this.generateNewState=(t,e)=>{const{data:s}=this.props,n=[...s];if(t>e)for(let l=t-1;l>=e;l--){const c=s[l];this.isItemDisabled(c)||(t=this.swapItems(n,t,l))}else for(let l=t+1;l<=e;l++){const c=s[l];this.isItemDisabled(c)||(t=this.swapItems(n,t,l))}return n},this.closestSortableItem=t=>{let e=t;for(;e;){const s=e.getAttribute(D);if(s&&this.itemRefsMap[s]===e)return{id:s,element:e};e=e.parentElement}return{id:"",element:null}},this.isSortable=t=>!!t.hasAttribute(P),this.closestSortable=t=>{let e=t;for(;e;){if(this.isSortable(e))return e;e=e.parentElement}return null},this.isSameSortable=t=>this.closestSortable(t)===this.container,this.idComparer=(t,e)=>t+""==e+"",this.findItem=t=>{const{data:e,idField:s}=this.props;if(!(t+""))return;const n=u.getter(s);return X(e,a=>this.idComparer(n(a),t))},this.findIndex=t=>{const{data:e,idField:s}=this.props;return t+""?y(e,n=>this.idComparer(n[s],t)):-1},this.isItemDisabled=t=>t&&t[this.props.disabledField||""]===!0,this.shouldResetActive=()=>{const t=u.getActiveElement(document);return t instanceof HTMLElement?!this.closestSortableItem(t).element:!1},this.widgetTarget=t=>{const e=W(t,s=>z(s,"k-widget")||this.isSortable(s));return e&&!this.isSortable(e)},this.allowDrag=t=>t.hasAttribute(D)||!(q(t)||this.widgetTarget(t)),this.onDragStart=t=>{const{event:e}=t,{onDragStart:s}=this.props,n=document.elementFromPoint(e.clientX,e.clientY),{id:a,element:l}=this.closestSortableItem(n),c=this.findItem(a);if(!a||c&&this.isItemDisabled(c)||!this.allowDrag(n)||!this.isSameSortable(n)){this.isDragPrevented=!0;return}e.isTouch&&e.originalEvent.preventDefault();const o=new O(this,this.findIndex(a),n);s&&s.call(void 0,o),this.isDragPrevented=o.isDefaultPrevented(),this.isDragPrevented?e.originalEvent.preventDefault():(this.offsetParent=j(this.container),this.setState({activeId:a,dragCueWidth:l&&l.clientWidth||0,dragCueHeight:l&&l.clientHeight||0}))},this.onDragOver=t=>{const{event:e}=t,{onDragOver:s,data:n}=this.props;if(this.isDragPrevented)return;e.originalEvent.preventDefault();const a=this.findIndex(this.state.activeId);if(a===-1){this.resetState();return}const l=document.elementFromPoint(e.clientX,e.clientY),c=this.closestSortableItem(l),o=this.findIndex(c.id),d=n[o];if(s&&o>-1&&a!==o&&!this.isItemDisabled(d)&&!this.animatingItemMap[c.id]&&this.shouldReorder(c.element,e.clientX,e.clientY)){const f=new T(this,a,o,this.generateNewState(a,o));s.call(void 0,f)}const g=this.parentOffset();this.setState({clientX:e.clientX-g.left,clientY:e.clientY-g.top,isDragging:!0})},this.onDragEnd=t=>{const{event:e}=t,s=this.shouldResetActive();if(this.isDragPrevented)return;const{onDragEnd:n,data:a}=this.props,l=document.elementFromPoint(e.clientX,e.clientY),c=this.closestSortableItem(l);let o=this.findIndex(c.id),d=this.findIndex(this.state.activeId);const g=this.isItemDisabled(a[o]);if((o===-1||g)&&(o=d),n){let f=this.generateNewState(d,o);if(!g){const m=this.thresholdRect(c.element);if(m&&(e.clientX<m.left||e.clientX>m.right||e.clientY<m.top||e.clientY>m.bottom)){const v=d;d=o,o=v,f=this.props.data.slice()}}const I=new A(this,d,o,f);n.call(void 0,I)}this.resetState(s)},this.shouldReorder=(t,e,s)=>{const n=this.thresholdRect(t);return n&&e>n.left&&e<n.right&&s>n.top&&s<n.bottom},this.thresholdRect=t=>{const e=this.state.activeId,s=this.container,a=(s?Array.from(s.childNodes):[]).find(m=>m instanceof HTMLElement&&m.getAttribute(D)===e);if(!t||!a)return null;const{width:l,height:c}=a.getBoundingClientRect(),o=t.getBoundingClientRect(),d=o.top+o.height/2-c/2,g=o.left+o.width/2-l/2,f=d+c,I=g+l;return{top:d,left:g,bottom:f,right:I}},this.onItemBlur=()=>{window.setTimeout(()=>{this.isUnmounted||this.shouldResetActive()&&!this.state.isDragging&&this.setState({activeId:""})})},this.onItemFocus=t=>{const{id:e,element:s}=this.closestSortableItem(t.currentTarget);!this.idComparer(e,this.state.activeId)&&this.isSameSortable(t.target)&&s===t.target&&this.setState({activeId:e})},this.onKeyDown=t=>{const{data:e,idField:s,onNavigate:n,navigation:a}=this.props,{activeId:l}=this.state;if(!a||!l||!this.isSameSortable(t.target))return;const c=this.isRtl,o=e.filter(b=>!this.isItemDisabled(b)),d=y(o,b=>this.idComparer(b[s],l)),g=o.length-1;let f=d;switch(t.keyCode===u.Keys.left&&(c?t.keyCode=u.Keys.down:t.keyCode=u.Keys.up),t.keyCode===u.Keys.right&&(c?t.keyCode=u.Keys.up:t.keyCode=u.Keys.down),t.keyCode){case u.Keys.up:d>0&&(f=d-1);break;case u.Keys.down:d<g&&(f=d+1);break}if(f===d)return;t.stopPropagation(),t.preventDefault();const I=o[f],m=I?I[s]:"",v=o[d],U=v?v[s]:"";if(t.ctrlKey){if(n){const b=this.findIndex(U),R=this.findIndex(m),k=new M(this,b,R,this.generateNewState(b,R));this.isKeyboardNavigated=!0,n.call(void 0,k)}}else this.focusActiveId=!0,this.setState({activeId:m+""})},this.resetState=t=>{this.isDragPrevented=!1,this.setState({clientX:0,clientY:0,isDragging:!1,dragCueWidth:0,dragCueHeight:0,activeId:t?"":this.state.activeId})},this.renderData=()=>{const{data:t,itemUI:e,idField:s,tabIndex:n}=this.props;return t.map(a=>{const c=u.getter(s)(a),o=this.isItemDisabled(a),d=this.idComparer(this.state.activeId,c);return p.createElement(e,{key:c,forwardRef:g=>this.refAssign(g,c),dataItem:a,isDisabled:o,isActive:d,isDragged:d&&this.state.isDragging,isDragCue:!1,attributes:{[D]:c,["aria-disabled"]:o,["aria-grabbed"]:d&&this.state.isDragging&&!this.isDragPrevented,["aria-dropeffect"]:o?"none":"move",tabIndex:u.getTabIndex(n,o),onFocus:this.onItemFocus,onBlur:this.onItemBlur},style:{cursor:o?"auto":"move",MozUserSelect:"none",msUserSelect:"none",WebkitUserSelect:"none",userSelect:"none"}})})},this.renderNoData=()=>{const{emptyItemUI:t}=this.props,s=w.provideLocalizationService(this).toLanguageString(E,L[E]);if(t)return p.createElement(t,{message:s})},this.renderDragCue=()=>{const{itemUI:t}=this.props,{isDragging:e,activeId:s,clientX:n,clientY:a}=this.state,l=this.findItem(s);if(!(!e||!l))return p.createElement(t,{dataItem:l,isDisabled:!1,isActive:!0,isDragged:!0,isDragCue:!0,style:{position:"fixed",top:a+10,left:n+10,width:this.state.dragCueWidth,height:this.state.dragCueHeight},attributes:{}})},this.refAssign=(t,e)=>{t?this.itemRefsMap[e]=t:delete this.itemRefsMap[e]},this.draggableRefAssign=t=>{this.draggableRef=t},u.validatePackage(G)}get container(){return this.draggableRef&&this.draggableRef.element}getSnapshotBeforeUpdate(){const{idField:i,animation:t}=this.props;return this.oldSizesMap={},t&&this.props.data.forEach(e=>{const s=e[i],n=this.itemRefsMap[s],a=K.findDOMNode(n);a&&(this.oldSizesMap[s]=a.getBoundingClientRect())}),null}componentDidUpdate(i){const{idField:t,animation:e}=this.props;this.focusActiveId&&(this.focusActiveId=!1,this.itemRefsMap[this.state.activeId].focus()),!(!e||!this.state.isDragging&&!this.isKeyboardNavigated)&&(this.isKeyboardNavigated=!1,i.data.forEach(s=>{const n=s[t],a=this.itemRefsMap[n];if(!a)return;const l=a.getBoundingClientRect(),c=this.oldSizesMap[n],o=c.left-l.left,d=c.top-l.top;o===0&&d===0||requestAnimationFrame(()=>{this.animatingItemMap[n]=!0,a.style.transform=`translate(${o}px, ${d}px)`,a.style.transition="transform 0s",requestAnimationFrame(()=>{a.style.transform="",a.style.transition=`transform ${x}ms cubic-bezier(0.2, 0, 0, 1) 0s`,window.setTimeout(()=>this.animatingItemMap[n]=!1,x)})})}))}componentDidMount(){this.isRtl=this.container&&getComputedStyle(this.container).direction==="rtl"||!1}componentWillUnmount(){this.isUnmounted=!0}parentOffset(){const i=this.offsetParent;if(i&&i.ownerDocument&&i!==i.ownerDocument.body){const t=i.getBoundingClientRect();return{left:t.left-i.scrollLeft,top:t.top-i.scrollTop}}return{left:0,top:0}}render(){const{data:i,style:t,className:e,itemsWrapUI:s}=this.props,n=s||"div";return p.createElement(u.Draggable,{onDragStart:this.onDragStart,onDrag:this.onDragOver,onDragEnd:this.onDragEnd,ref:this.draggableRefAssign},p.createElement(n,{...$,className:e,style:{touchAction:"none",...t},onKeyDown:this.onKeyDown},i&&i.length?this.renderData():this.renderNoData(),this.renderDragCue()))}}S.defaultProps={navigation:!0,animation:!0,emptyItemUI:r=>p.createElement("div",null,r.message)};S.propTypes={idField:h.string.isRequired,disabledField:h.string,data:h.array.isRequired,tabIndex:h.number,navigation:h.bool,animation:h.bool,itemsWrapUI:h.any,itemUI:h.func.isRequired,emptyItemUI:h.func,style:h.object,className:h.string,onDragStart:h.func,onDragOver:h.func,onDragEnd:h.func,onNavigate:h.func};w.registerForLocalization(S);exports.Sortable=S;exports.SortableOnDragEndEvent=A;exports.SortableOnDragOverEvent=T;exports.SortableOnDragStartEvent=O;exports.SortableOnNavigateEvent=M;
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Sortable.js"),t=require("./events/SortableOnDragStartEvent.js"),r=require("./events/SortableOnDragOverEvent.js"),a=require("./events/SortableOnDragEndEvent.js"),n=require("./events/SortableOnNavigateEvent.js");exports.Sortable=e.Sortable;exports.SortableOnDragStartEvent=t.SortableOnDragStartEvent;exports.SortableOnDragOverEvent=r.SortableOnDragOverEvent;exports.SortableOnDragEndEvent=a.SortableOnDragEndEvent;exports.SortableOnNavigateEvent=n.SortableOnNavigateEvent;