@reportportal/ui-kit 0.0.1-alpha.135 → 0.0.1-alpha.136

package/dist/common/constants/sortable.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_SORTABLE_TYPE = "SORTABLE_ITEM";

package/dist/common/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export { useOnClickOutside } from './useOnClickOutside';
+export { useSortable } from './useSortable';
 export { useWindowResize } from './useWindowResize';

package/dist/common/hooks/useSortable.d.ts

@@ -0,0 +1,3 @@
+import { UseSortableOptions, UseSortableReturn } from '../types';
+
+export declare const useSortable: ({ id, index, type, isDisabled, onDrop, hideDefaultPreview, }: UseSortableOptions) => UseSortableReturn;

package/dist/common/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './commonTypes';
+export * from './sortableTypes';

package/dist/common/types/sortableTypes.d.ts

@@ -0,0 +1,69 @@
+import { ReactNode, Ref } from 'react';
+import { XYCoord, ConnectDragSource, ConnectDropTarget, ConnectDragPreview } from 'react-dnd';
+
+export interface SortableItemData {
+    id: string | number;
+    index: number;
+}
+export interface DragItem extends SortableItemData {
+    type: string;
+}
+export interface UseSortableOptions {
+    id: string | number;
+    index: number;
+    type?: string;
+    isDisabled?: boolean;
+    onDrop?: (fromIndex: number, toIndex: number) => void;
+    hideDefaultPreview?: boolean;
+}
+export interface UseSortableReturn {
+    isDragging: boolean;
+    isOver: boolean;
+    draggedItemIndex: number | null;
+    dropPosition: 'top' | 'bottom' | null;
+    dragRef: ConnectDragSource;
+    dropRef: ConnectDropTarget;
+    previewRef: ConnectDragPreview;
+}
+export interface SortableItemRenderProps {
+    isDragging: boolean;
+    isOver: boolean;
+    dragRef: Ref<HTMLElement>;
+}
+export interface SortableItemProps {
+    id: string | number;
+    index: number;
+    type?: string;
+    isDisabled?: boolean;
+    className?: string;
+    draggingClassName?: string;
+    dropTargetClassName?: string;
+    onDrop?: (fromIndex: number, toIndex: number) => void;
+    hideDefaultPreview?: boolean;
+    children: ReactNode | ((props: SortableItemRenderProps) => ReactNode);
+}
+export interface SortableListProps<T extends {
+    id: string | number;
+}> {
+    items: T[];
+    type?: string;
+    isDisabled?: boolean;
+    className?: string;
+    itemClassName?: string;
+    onReorder: (reorderedItems: T[]) => void;
+    renderItem: (item: T, index: number, dragRef: Ref<HTMLElement>, isDragging: boolean) => ReactNode;
+    keyExtractor?: (item: T) => string | number;
+}
+export interface DragLayerProps {
+    type: string;
+    renderPreview: (item: DragItem) => ReactNode;
+    className?: string;
+    previewClassName?: string;
+    portalTarget?: Element | null;
+}
+export interface DragLayerCollectedProps {
+    item: DragItem | null;
+    itemType: string | symbol | null;
+    clientOffset: XYCoord | null;
+    isDragging: boolean;
+}

package/dist/common/utils/testUtils.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from 'react';
+
+export declare const renderWithDnd: (ui: ReactElement) => import('@testing-library/react').RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;

package/dist/components/autocompletes/multipleAutocomplete/selectedItems/selectedItems.d.ts

@@ -37,5 +37,5 @@ type SelectedItemsProps<T> = Omit<SelectedItemProps<T>, 'item' | 'editItem'> & {
     selectedItemClassName?: string;
     selectedItemTextClassName?: string;
 };
-export declare const SelectedItems: <T>({ items, parseValueToString, getItemValidationErrorType, storedItemsMap, highlightUnStoredItem, renderCustomSelectedItem, selectedItemSingleLine, selectedItemClassName, selectedItemTextClassName, ...props }: SelectedItemsProps<T>) => (string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined)[];
+export declare const SelectedItems: <T>({ items, parseValueToString, getItemValidationErrorType, storedItemsMap, highlightUnStoredItem, renderCustomSelectedItem, selectedItemSingleLine, selectedItemClassName, selectedItemTextClassName, ...props }: SelectedItemsProps<T>) => (string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined)[];
 export {};

package/dist/components/index.d.ts

@@ -22,6 +22,7 @@ export { SpinLoader } from './spinLoader';
 export { SystemAlert } from './systemAlert';
 export { SystemMessage } from './systemMessage';
 export { SingleAutocomplete } from './autocompletes/singleAutocomplete';
+export { SortableItem, SortableList, DragLayer } from './sortable';
 export { Table } from './table';
 export { ThemeProvider } from './themeProvider';
 export { Toggle } from './toggle';

package/dist/components/sortable/dragLayer/dragLayer.d.ts

@@ -0,0 +1,3 @@
+import { DragLayerProps } from '../../../common/types';
+
+export declare const DragLayer: ({ type, renderPreview, className, previewClassName, portalTarget, }: DragLayerProps) => import('react').ReactPortal | null;

package/dist/components/sortable/dragLayer/index.d.ts

@@ -0,0 +1 @@
+export { DragLayer } from './dragLayer';

package/dist/components/sortable/helpers.d.ts

@@ -0,0 +1,4 @@
+import { CSSProperties } from 'react';
+import { XYCoord } from 'react-dnd';
+
+export declare const getPreviewStyles: (clientOffset: XYCoord | null) => CSSProperties;

package/dist/components/sortable/index.d.ts

@@ -0,0 +1,3 @@
+export { SortableItem } from './sortableItem';
+export { SortableList } from './sortableList';
+export { DragLayer } from './dragLayer';

package/dist/components/sortable/sortableItem/index.d.ts

@@ -0,0 +1 @@
+export { SortableItem } from './sortableItem';

package/dist/components/sortable/sortableItem/sortableItem.d.ts

@@ -0,0 +1,3 @@
+import { SortableItemProps } from '../../../common/types';
+
+export declare const SortableItem: ({ id, index, type, isDisabled, className, draggingClassName, dropTargetClassName, onDrop, hideDefaultPreview, children, }: SortableItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/sortable/sortableList/index.d.ts

@@ -0,0 +1 @@
+export { SortableList } from './sortableList';

package/dist/components/sortable/sortableList/sortableList.d.ts

@@ -0,0 +1,5 @@
+import { SortableListProps } from '../../../common/types';
+
+export declare const SortableList: <T extends {
+    id: string | number;
+}>({ items, type, isDisabled, className, itemClassName, onReorder, renderItem, keyExtractor, }: SortableListProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/index.js

@@ -1,46 +1,47 @@
-import { A as P } from "./index-1a874a8b.js";
-import { B as F } from "./baseIconButton-251479f7.js";
-import { B as D } from "./breadcrumbs-8e5ca8d7.js";
-import { B } from "./bubblesLoader-f3ffa240.js";
-import { B as b } from "./button-97d9e587.js";
-import { C as A } from "./checkbox-ed6cc375.js";
-import { D as M } from "./datePicker-926c9cae.js";
+import { A as F } from "./index-1a874a8b.js";
+import { B as D } from "./baseIconButton-251479f7.js";
+import { B as y } from "./breadcrumbs-8e5ca8d7.js";
+import { B as T } from "./bubblesLoader-f3ffa240.js";
+import { B as A } from "./button-97d9e587.js";
+import { C as M } from "./checkbox-ed6cc375.js";
+import { D as L } from "./datePicker-926c9cae.js";
 import "react-datepicker";
-import { D as k } from "./dropdown-360803d5.js";
-import { FieldLabel as L } from "./fieldLabel.js";
-import { F as O } from "./fieldNumber-d1b5a7a1.js";
-import { F as H } from "./fieldText-1749da7a.js";
-import { F as N } from "./fieldTextFlex-2f51c173.js";
-import { FileDropArea as G } from "./fileDropArea.js";
-import { FiltersButton as X } from "./filtersButton.js";
-import { Modal as q } from "./modal.js";
-import { MultipleAutocomplete as Q, SingleAutocomplete as V } from "./autocompletes.js";
-import { P as Z } from "./pagination-a3dee614.js";
-import { Popover as $ } from "./popover.js";
-import { R as ro } from "./radio-62546efa.js";
-import { S as no } from "./selection-9124d029.js";
-import { S as ao } from "./spinLoader-c4a53718.js";
-import { SystemAlert as po } from "./systemAlert.js";
-import { S as mo } from "./systemMessage-924fdaa6.js";
-import { T as Io } from "./table-fc9f095d.js";
-import { T as xo } from "./themeProvider-46c2be7b.js";
-import { T as uo } from "./toggle-304107fa.js";
-import { Tooltip as Po } from "./tooltip.js";
-import { SidePanel as Fo } from "./sidePanel.js";
-import { AddCsvIcon as Do, AddImageIcon as yo, AddJarIcon as Bo, BreadcrumbsTreeIcon as To, CalendarIcon as bo, CheckmarkIcon as ho, ChevronRightBreadcrumbsIcon as Ao, ConfigurationIcon as vo, CopyIcon as Mo, CoverageFullIcon as wo, CoveragePartialIcon as ko, CoveredManuallyIcon as Eo, DeleteIcon as Lo, DragAndDropIcon as Ro, DragNDropIcon as Oo, DurationIcon as Uo, EditIcon as Ho, ExportIcon as Jo, FlagIcon as No, GroupByIcon as zo, HideIcon as Go, LaunchTypeIcon as Wo, MaximizeIcon as Xo, MoveToFolderIcon as jo, PinFilledIcon as qo, PinOutlineIcon as Ko, PriorityBlockerIcon as Qo, PriorityCriticalIcon as Vo, PriorityHighIcon as Yo, PriorityLowIcon as Zo, PriorityMediumIcon as _o, PriorityUnspecifiedIcon as $o, RefreshIcon as or, RerunIcon as rr, RunManualIcon as er, SearchIcon as nr, SortIcon as tr, StatusSuccessIcon as ar, TestPlanIcon as cr, UserIcon as pr, WarningIcon as ir } from "./icons.js";
-import { S as sr, a as Ir, b as lr } from "./chevronDownDropdown-66f5b1af.js";
-import { S as fr } from "./calendarArrow-44c7e60e.js";
-import { S as ur } from "./clear-53660571.js";
-import { S as Pr, a as Cr } from "./openEye-950159cb.js";
-import { S as gr } from "./close-4d480ef7.js";
-import { S as yr, a as Br, b as Tr, c as br, d as hr, e as Ar, f as vr } from "./xls-995781cc.js";
-import { S as wr } from "./dropdown-0260bb66.js";
-import { S as Er, a as Lr, b as Rr } from "./success-8fd8bd2c.js";
-import { S as Ur, a as Hr } from "./filterOutline-819b4b0d.js";
-import { S as Nr, a as zr } from "./tree-c3dd3d45.js";
-import { S as Wr } from "./minus-2857540f.js";
-import { S as jr } from "./plus-199fb2a8.js";
-import { S as Kr, a as Qr } from "./prevPage-87faf576.js";
+import { D as E } from "./dropdown-360803d5.js";
+import { FieldLabel as O } from "./fieldLabel.js";
+import { F as H } from "./fieldNumber-d1b5a7a1.js";
+import { F as N } from "./fieldText-1749da7a.js";
+import { F as G } from "./fieldTextFlex-2f51c173.js";
+import { FileDropArea as X } from "./fileDropArea.js";
+import { FiltersButton as q } from "./filtersButton.js";
+import { Modal as Q } from "./modal.js";
+import { MultipleAutocomplete as Y, SingleAutocomplete as Z } from "./autocompletes.js";
+import { P as $ } from "./pagination-a3dee614.js";
+import { Popover as ro } from "./popover.js";
+import { R as to } from "./radio-62546efa.js";
+import { S as ao } from "./selection-9124d029.js";
+import { S as po } from "./spinLoader-c4a53718.js";
+import { SystemAlert as mo } from "./systemAlert.js";
+import { S as Io } from "./systemMessage-924fdaa6.js";
+import { DragLayer as xo, SortableItem as fo, SortableList as uo } from "./sortable.js";
+import { T as Po } from "./table-fc9f095d.js";
+import { T as Fo } from "./themeProvider-46c2be7b.js";
+import { T as Do } from "./toggle-304107fa.js";
+import { Tooltip as yo } from "./tooltip.js";
+import { SidePanel as To } from "./sidePanel.js";
+import { AddCsvIcon as Ao, AddImageIcon as vo, AddJarIcon as Mo, BreadcrumbsTreeIcon as wo, CalendarIcon as Lo, CheckmarkIcon as ko, ChevronRightBreadcrumbsIcon as Eo, ConfigurationIcon as Ro, CopyIcon as Oo, CoverageFullIcon as Uo, CoveragePartialIcon as Ho, CoveredManuallyIcon as Jo, DeleteIcon as No, DragAndDropIcon as zo, DragNDropIcon as Go, DurationIcon as Wo, EditIcon as Xo, ExportIcon as jo, FlagIcon as qo, GroupByIcon as Ko, HideIcon as Qo, LaunchTypeIcon as Vo, MaximizeIcon as Yo, MoveToFolderIcon as Zo, PinFilledIcon as _o, PinOutlineIcon as $o, PriorityBlockerIcon as or, PriorityCriticalIcon as rr, PriorityHighIcon as er, PriorityLowIcon as tr, PriorityMediumIcon as nr, PriorityUnspecifiedIcon as ar, RefreshIcon as cr, RerunIcon as pr, RunManualIcon as ir, SearchIcon as mr, SortIcon as sr, StatusSuccessIcon as Ir, TestPlanIcon as lr, UserIcon as xr, WarningIcon as fr } from "./icons.js";
+import { S as ur, a as Sr, b as Pr } from "./chevronDownDropdown-66f5b1af.js";
+import { S as Fr } from "./calendarArrow-44c7e60e.js";
+import { S as Dr } from "./clear-53660571.js";
+import { S as yr, a as Br } from "./openEye-950159cb.js";
+import { S as hr } from "./close-4d480ef7.js";
+import { S as vr, a as Mr, b as wr, c as Lr, d as kr, e as Er, f as Rr } from "./xls-995781cc.js";
+import { S as Ur } from "./dropdown-0260bb66.js";
+import { S as Jr, a as Nr, b as zr } from "./success-8fd8bd2c.js";
+import { S as Wr, a as Xr } from "./filterOutline-819b4b0d.js";
+import { S as qr, a as Kr } from "./tree-c3dd3d45.js";
+import { S as Vr } from "./minus-2857540f.js";
+import { S as Zr } from "./plus-199fb2a8.js";
+import { S as $r, a as oe } from "./prevPage-87faf576.js";
 import "react/jsx-runtime";
 import "react";
 import "./bind-06a7ff84.js";
@@ -54,104 +55,109 @@ import "./maxValueDisplay-9be01a75.js";
 import "./isEmpty-ccacb5ff.js";
 import "react-dropzone";
 import "framer-motion";
+import "react-dnd";
+import "react-dnd-html5-backend";
 import "@floating-ui/react";
 import "./floatingUi-41f8c7b5.js";
 export {
-  Do as AddCsvIcon,
-  yo as AddImageIcon,
-  Bo as AddJarIcon,
-  sr as ArrowDownIcon,
-  Ir as ArrowUpIcon,
-  P as AttachedFile,
-  F as BaseIconButton,
-  D as Breadcrumbs,
-  To as BreadcrumbsTreeIcon,
-  B as BubblesLoader,
-  b as Button,
-  fr as CalendarArrowIcon,
-  bo as CalendarIcon,
-  A as Checkbox,
-  ho as CheckmarkIcon,
-  lr as ChevronDownDropdownIcon,
-  Ao as ChevronRightBreadcrumbsIcon,
-  ur as ClearIcon,
-  Pr as CloseEyeIcon,
-  gr as CloseIcon,
-  vo as ConfigurationIcon,
-  Mo as CopyIcon,
-  wo as CoverageFullIcon,
-  ko as CoveragePartialIcon,
-  Eo as CoveredManuallyIcon,
-  yr as CsvIcon,
-  M as DatePicker,
-  Lo as DeleteIcon,
-  Ro as DragAndDropIcon,
-  Oo as DragNDropIcon,
-  k as Dropdown,
-  wr as DropdownIcon,
-  Uo as DurationIcon,
-  Ho as EditIcon,
-  Er as ErrorIcon,
-  Jo as ExportIcon,
-  Br as ExternalLinkIcon,
-  L as FieldLabel,
-  O as FieldNumber,
-  H as FieldText,
-  N as FieldTextFlex,
-  G as FileDropArea,
-  Tr as FileOtherIcon,
-  Ur as FilterFilledIcon,
-  Hr as FilterOutlineIcon,
-  X as FiltersButton,
-  No as FlagIcon,
-  zo as GroupByIcon,
-  Go as HideIcon,
-  br as ImageIcon,
-  Lr as InfoIcon,
-  hr as JarIcon,
-  Wo as LaunchTypeIcon,
-  Xo as MaximizeIcon,
-  Nr as MeatballMenuIcon,
-  Wr as MinusIcon,
-  q as Modal,
-  jo as MoveToFolderIcon,
-  Q as MultipleAutocomplete,
-  Cr as OpenEyeIcon,
-  Z as Pagination,
-  Ar as PdfIcon,
-  qo as PinFilledIcon,
-  Ko as PinOutlineIcon,
-  jr as PlusIcon,
-  $ as Popover,
-  Kr as PrevChapterIcon,
-  Qr as PrevPageIcon,
-  Qo as PriorityBlockerIcon,
-  Vo as PriorityCriticalIcon,
-  Yo as PriorityHighIcon,
-  Zo as PriorityLowIcon,
-  _o as PriorityMediumIcon,
-  $o as PriorityUnspecifiedIcon,
-  ro as Radio,
-  or as RefreshIcon,
-  rr as RerunIcon,
-  er as RunManualIcon,
-  nr as SearchIcon,
-  no as Selection,
-  Fo as SidePanel,
-  V as SingleAutocomplete,
-  tr as SortIcon,
-  ao as SpinLoader,
-  ar as StatusSuccessIcon,
-  Rr as SuccessIcon,
-  po as SystemAlert,
-  mo as SystemMessage,
-  Io as Table,
-  cr as TestPlanIcon,
-  xo as ThemeProvider,
-  uo as Toggle,
-  Po as Tooltip,
-  zr as TreeIcon,
-  pr as UserIcon,
-  ir as WarningIcon,
-  vr as XlsIcon
+  Ao as AddCsvIcon,
+  vo as AddImageIcon,
+  Mo as AddJarIcon,
+  ur as ArrowDownIcon,
+  Sr as ArrowUpIcon,
+  F as AttachedFile,
+  D as BaseIconButton,
+  y as Breadcrumbs,
+  wo as BreadcrumbsTreeIcon,
+  T as BubblesLoader,
+  A as Button,
+  Fr as CalendarArrowIcon,
+  Lo as CalendarIcon,
+  M as Checkbox,
+  ko as CheckmarkIcon,
+  Pr as ChevronDownDropdownIcon,
+  Eo as ChevronRightBreadcrumbsIcon,
+  Dr as ClearIcon,
+  yr as CloseEyeIcon,
+  hr as CloseIcon,
+  Ro as ConfigurationIcon,
+  Oo as CopyIcon,
+  Uo as CoverageFullIcon,
+  Ho as CoveragePartialIcon,
+  Jo as CoveredManuallyIcon,
+  vr as CsvIcon,
+  L as DatePicker,
+  No as DeleteIcon,
+  zo as DragAndDropIcon,
+  xo as DragLayer,
+  Go as DragNDropIcon,
+  E as Dropdown,
+  Ur as DropdownIcon,
+  Wo as DurationIcon,
+  Xo as EditIcon,
+  Jr as ErrorIcon,
+  jo as ExportIcon,
+  Mr as ExternalLinkIcon,
+  O as FieldLabel,
+  H as FieldNumber,
+  N as FieldText,
+  G as FieldTextFlex,
+  X as FileDropArea,
+  wr as FileOtherIcon,
+  Wr as FilterFilledIcon,
+  Xr as FilterOutlineIcon,
+  q as FiltersButton,
+  qo as FlagIcon,
+  Ko as GroupByIcon,
+  Qo as HideIcon,
+  Lr as ImageIcon,
+  Nr as InfoIcon,
+  kr as JarIcon,
+  Vo as LaunchTypeIcon,
+  Yo as MaximizeIcon,
+  qr as MeatballMenuIcon,
+  Vr as MinusIcon,
+  Q as Modal,
+  Zo as MoveToFolderIcon,
+  Y as MultipleAutocomplete,
+  Br as OpenEyeIcon,
+  $ as Pagination,
+  Er as PdfIcon,
+  _o as PinFilledIcon,
+  $o as PinOutlineIcon,
+  Zr as PlusIcon,
+  ro as Popover,
+  $r as PrevChapterIcon,
+  oe as PrevPageIcon,
+  or as PriorityBlockerIcon,
+  rr as PriorityCriticalIcon,
+  er as PriorityHighIcon,
+  tr as PriorityLowIcon,
+  nr as PriorityMediumIcon,
+  ar as PriorityUnspecifiedIcon,
+  to as Radio,
+  cr as RefreshIcon,
+  pr as RerunIcon,
+  ir as RunManualIcon,
+  mr as SearchIcon,
+  ao as Selection,
+  To as SidePanel,
+  Z as SingleAutocomplete,
+  sr as SortIcon,
+  fo as SortableItem,
+  uo as SortableList,
+  po as SpinLoader,
+  Ir as StatusSuccessIcon,
+  zr as SuccessIcon,
+  mo as SystemAlert,
+  Io as SystemMessage,
+  Po as Table,
+  lr as TestPlanIcon,
+  Fo as ThemeProvider,
+  Do as Toggle,
+  yo as Tooltip,
+  Kr as TreeIcon,
+  xr as UserIcon,
+  fr as WarningIcon,
+  Rr as XlsIcon
 };

package/dist/modal.js

@@ -3,6 +3,8 @@ import { useRef as C, useEffect as w, useState as y, useMemo as G } from "react"
 import { Scrollbars as K } from "rc-scrollbars";
 import { AnimatePresence as U, motion as Y } from "framer-motion";
 import { c as x } from "./bind-06a7ff84.js";
+import "react-dnd";
+import "react-dnd-html5-backend";
 import { a as X } from "./dropdown-360803d5.js";
 import { K as J } from "./keyCodes-f63c0e11.js";
 import { B as D } from "./button-97d9e587.js";
@@ -105,7 +107,7 @@ const et = () => {
   "size-default": "_size-default_yxql5_57",
   "size-small": "_size-small_yxql5_69",
   "size-large": "_size-large_yxql5_81"
-}, g = x.bind(_t), ut = 0.9, ht = 32 + 24, wt = 32 + 8, ft = 36 + 16, pt = 32 * 2, $t = ({
+}, g = x.bind(_t), ut = 0.9, ht = 32 + 24, wt = 32 + 8, ft = 36 + 16, pt = 32 * 2, Wt = ({
   title: e,
   children: o,
   footerNode: n,
@@ -183,7 +185,7 @@ const et = () => {
   ) }) });
 };
 export {
-  $t as Modal,
+  Wt as Modal,
   S as ModalContent,
   lt as ModalFooter,
   rt as ModalHeader

package/dist/sortable.js

@@ -0,0 +1,160 @@
+import { jsx as u } from "react/jsx-runtime";
+import { c as I } from "./bind-06a7ff84.js";
+import { useEffect as O, useCallback as x } from "react";
+import { useDrag as S, useDrop as T, useDragLayer as h } from "react-dnd";
+import { getEmptyImage as E } from "react-dnd-html5-backend";
+import { createPortal as L } from "react-dom";
+const D = "SORTABLE_ITEM", w = ({
+  id: e,
+  index: r,
+  type: s = D,
+  isDisabled: i = !1,
+  onDrop: l,
+  hideDefaultPreview: c = !1
+}) => {
+  const [{ isDragging: d }, g, a] = S(
+    () => ({
+      type: s,
+      item: { id: e, index: r, type: s },
+      collect: (p) => ({
+        isDragging: p.isDragging()
+      }),
+      canDrag: () => !i
+    }),
+    [e, r, s, i]
+  );
+  O(() => {
+    c && a(E(), { captureDraggingState: !0 });
+  }, [c, a]);
+  const [{ isOver: o, draggedItemIndex: t }, n] = T(
+    () => ({
+      accept: s,
+      collect: (p) => {
+        const m = p.getItem(), b = (m == null ? void 0 : m.id) !== e ? p.isOver() : !1;
+        return {
+          isOver: b,
+          draggedItemIndex: b ? (m == null ? void 0 : m.index) ?? null : null
+        };
+      },
+      drop: (p) => {
+        p.id !== e && l && l(p.index, r);
+      }
+    }),
+    [e, r, s, l]
+  ), _ = (() => t === null ? null : t > r ? "top" : "bottom")();
+  return {
+    isDragging: d,
+    isOver: o,
+    draggedItemIndex: t,
+    dropPosition: _,
+    dragRef: g,
+    dropRef: n,
+    previewRef: a
+  };
+}, P = {
+  "sortable-item": "_sortable-item_8p4ra_1",
+  "sortable-item--drop-target-top": "_sortable-item--drop-target-top_8p4ra_6",
+  "sortable-item--drop-target-bottom": "_sortable-item--drop-target-bottom_8p4ra_17",
+  "drag-handle": "_drag-handle_8p4ra_29",
+  "drag-handle--disabled": "_drag-handle--disabled_8p4ra_36"
+}, C = I.bind(P), N = ({
+  id: e,
+  index: r,
+  type: s = D,
+  isDisabled: i = !1,
+  className: l,
+  draggingClassName: c,
+  dropTargetClassName: d,
+  onDrop: g,
+  hideDefaultPreview: a = !1,
+  children: o
+}) => {
+  const { isDragging: t, dropPosition: n, dragRef: f, dropRef: _, previewRef: p } = w({
+    id: e,
+    index: r,
+    type: s,
+    isDisabled: i,
+    onDrop: g,
+    hideDefaultPreview: a
+  }), m = typeof o == "function", y = C("sortable-item", l, {
+    "sortable-item--dragging": t,
+    "sortable-item--drop-target-top": n === "top",
+    "sortable-item--drop-target-bottom": n === "bottom",
+    [c || ""]: t && c,
+    [d || ""]: n && d
+  });
+  return /* @__PURE__ */ u("div", { ref: (v) => {
+    _(v), a || p(v), m || f(v);
+  }, className: y, children: m ? o({
+    isDragging: t,
+    isOver: n !== null,
+    dragRef: f
+  }) : o });
+}, W = ({
+  items: e,
+  type: r = D,
+  isDisabled: s = !1,
+  className: i,
+  itemClassName: l,
+  onReorder: c,
+  renderItem: d,
+  keyExtractor: g = (a) => a.id
+}) => {
+  const a = x(
+    (o, t) => {
+      const n = [...e], [f] = n.splice(o, 1);
+      n.splice(t, 0, f), c(n);
+    },
+    [e, c]
+  );
+  return /* @__PURE__ */ u("div", { className: i, children: e.map((o, t) => /* @__PURE__ */ u(
+    N,
+    {
+      id: g(o),
+      index: t,
+      type: r,
+      isDisabled: s,
+      className: l,
+      onDrop: a,
+      children: ({ dragRef: n, isDragging: f }) => d(o, t, n, f)
+    },
+    g(o)
+  )) });
+}, $ = (e) => {
+  if (!e)
+    return {
+      display: "none"
+    };
+  const { x: r, y: s } = e, i = `translate(${r}px, ${s}px)`;
+  return {
+    transform: i,
+    WebkitTransform: i
+  };
+}, A = {
+  "drag-layer": "_drag-layer_1izcx_1",
+  "drag-preview": "_drag-preview_1izcx_11"
+}, R = I.bind(A), Y = ({
+  type: e,
+  renderPreview: r,
+  className: s,
+  previewClassName: i,
+  portalTarget: l = document.body
+}) => {
+  const { itemType: c, isDragging: d, item: g, clientOffset: a } = h(
+    (t) => ({
+      item: t.getItem(),
+      itemType: t.getItemType(),
+      clientOffset: t.getClientOffset(),
+      isDragging: t.isDragging()
+    })
+  );
+  if (!d || c !== e || !g || !l)
+    return null;
+  const o = /* @__PURE__ */ u("div", { className: R("drag-layer", s), children: /* @__PURE__ */ u("div", { className: R("drag-preview", i), style: $(a), children: r(g) }) });
+  return L(o, l);
+};
+export {
+  Y as DragLayer,
+  N as SortableItem,
+  W as SortableList
+};