@szum-tech/design-system
Version:
Szum-Tech design system with tailwindcss support
1 lines • 4.37 kB
JavaScript
import {a}from'./chunk-JUNHRB4B.js';import*as e from'react';import {Slot}from'radix-ui';import {createPortal}from'react-dom';import {defaultDropAnimationSideEffects,useSensors,useSensor,MouseSensor,TouchSensor,KeyboardSensor,DndContext,MeasuringStrategy,DragOverlay}from'@dnd-kit/core';import {sortableKeyboardCoordinates,arrayMove,SortableContext,useSortable,verticalListSortingStrategy,rectSortingStrategy,defaultAnimateLayoutChanges}from'@dnd-kit/sortable';import {jsx,jsxs}from'react/jsx-runtime';import {CSS}from'@dnd-kit/utilities';var h="Sortable",w="SortableItem",B="SortableItemHandle",q="SortableOverlay",z=t=>defaultAnimateLayoutChanges({...t,wasDragging:true}),y={sideEffects:defaultDropAnimationSideEffects({styles:{active:{opacity:"0.4"}}})};var R=e.createContext(null);function M(t){let o=e.useContext(R);if(!o)throw new Error(`\`${t}\` must be used within \`${w}\``);return o}var b=e.createContext(false),N=e.createContext(null);function H(t){let o=e.useContext(N);if(!o)throw new Error(`\`${t}\` must be used within \`${h}\``);return o}function _t({value:t,onValueChange:o,getItemValue:r,className:a$1,asChild:m=false,onMove:s,strategy:l="vertical",onDragStart:d,onDragEnd:f,modifiers:g,children:S,...D}){let[n,v]=e.useState(null),[A,O]=e.useState(false);e.useLayoutEffect(()=>O(true),[]);let K=useSensors(useSensor(MouseSensor,{activationConstraint:{distance:10}}),useSensor(TouchSensor,{activationConstraint:{delay:250,tolerance:5}}),useSensor(KeyboardSensor,{coordinateGetter:sortableKeyboardCoordinates})),Y=e.useCallback(c=>{v(c.active.id),d?.(c);},[d]),G=e.useCallback(c=>{let{active:p,over:_}=c;if(v(null),f?.(c),!_)return;let P=t.findIndex(C=>r(C)===p.id),T=t.findIndex(C=>r(C)===_.id);if(P!==T)if(s)s({event:c,activeIndex:P,overIndex:T});else {let C=arrayMove(t,P,T);o(C);}},[t,r,o,s,f]),F=e.useCallback(()=>{v(null);},[]),J=()=>{switch(l){case "horizontal":return rectSortingStrategy;case "grid":return rectSortingStrategy;default:return verticalListSortingStrategy}},Q=e.useMemo(()=>t.map(r),[t,r]),W=e.useMemo(()=>({activeId:n,modifiers:g}),[n,g]),X=e.useMemo(()=>{if(!n)return null;let c=null;return e.Children.forEach(S,p=>{e.isValidElement(p)&&p.props.value===n&&(c=e.cloneElement(p,{...p.props,className:a(p.props.className,"z-50")}));}),c},[n,S]),Z=m?Slot.Root:"div";return jsx(N.Provider,{value:W,children:jsxs(DndContext,{sensors:K,modifiers:g,measuring:{droppable:{strategy:MeasuringStrategy.Always}},onDragStart:Y,onDragEnd:G,onDragCancel:F,children:[jsx(SortableContext,{items:Q,strategy:J(),children:jsx(Z,{"data-slot":"sortable","data-dragging":n!==null,className:a(n!==null&&"cursor-grabbing!",a$1),...D,children:S})}),A&&createPortal(jsx(DragOverlay,{dropAnimation:y,modifiers:g,className:a("z-50",n&&"cursor-grabbing"),children:jsx(b.Provider,{value:true,children:X})}),document.body)]})})}function $t({value:t,className:o,asChild:r=false,disabled:a$1,children:m,...s}){let l=e.useContext(b),{setNodeRef:d,transform:f,transition:g,attributes:S,listeners:D,isDragging:n}=useSortable({id:t,disabled:a$1||l,animateLayoutChanges:z});if(l){let O=r?Slot.Root:"div";return jsx(R.Provider,{value:{listeners:void 0,isDragging:true,disabled:false},children:jsx(O,{"data-slot":"sortable-item","data-value":t,"data-dragging":true,className:a(o),...s,children:m})})}let v={transition:g,transform:CSS.Transform.toString(f)},A=r?Slot.Root:"div";return jsx(R.Provider,{value:{listeners:D,isDragging:n,disabled:a$1},children:jsx(A,{"data-slot":"sortable-item","data-value":t,"data-dragging":n,"data-disabled":a$1,ref:d,style:v,...S,className:a(n&&"z-50 opacity-50",a$1&&"opacity-50",o),...s,children:m})})}function Qt({className:t,asChild:o=false,cursor:r=true,children:a$1,...m}){let{listeners:s,isDragging:l,disabled:d}=M(B),f=o?Slot.Root:"div";return jsx(f,{"data-slot":"sortable-item-handle","data-dragging":l,"data-disabled":d,...s,className:a(r&&(l?"cursor-grabbing!":"cursor-grab!"),t),...m,children:a$1})}function re({children:t,className:o,...r}){let{activeId:a$1,modifiers:m}=H(q),[s,l]=e.useState(false);e.useLayoutEffect(()=>l(true),[]);let d=a$1&&t?typeof t=="function"?t({value:a$1}):t:null;return s?createPortal(jsx(DragOverlay,{dropAnimation:y,modifiers:m,className:a("z-50",a$1&&"cursor-grabbing",o),...r,children:jsx(b.Provider,{value:true,children:d})}),document.body):null}export{M as a,_t as b,$t as c,Qt as d,re as e};