@synerise/ds-sortable 1.3.13 → 1.3.15

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.15](https://github.com/Synerise/synerise-design/compare/@synerise/ds-sortable@1.3.14...@synerise/ds-sortable@1.3.15) (2026-04-10)
+
+**Note:** Version bump only for package @synerise/ds-sortable
+
+## [1.3.14](https://github.com/Synerise/synerise-design/compare/@synerise/ds-sortable@1.3.13...@synerise/ds-sortable@1.3.14) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-sortable
+
 ## [1.3.13](https://github.com/Synerise/synerise-design/compare/@synerise/ds-sortable@1.3.12...@synerise/ds-sortable@1.3.13) (2026-03-20)
 
 **Note:** Version bump only for package @synerise/ds-sortable

package/dist/Sortable.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type BaseItem, type SortableProps } from './Sortable.types';
+import { default as React } from 'react';
+import { BaseItem, SortableProps } from './Sortable.types';
 export declare const Sortable: <ItemType extends BaseItem>({ items, onOrderChange, ItemComponent, axis, placeholderCss, }: SortableProps<ItemType>) => React.JSX.Element;
 export default Sortable;

package/dist/Sortable.js

@@ -1,60 +1,39 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useEffect, useMemo, useState } from 'react';
-import { v4 as uuid } from 'uuid';
-import { DragOverlay } from '@dnd-kit/core';
-import { restrictToParentElement } from '@dnd-kit/modifiers';
-import { SortableContainer } from './SortableContainer';
-import { SortableItem } from './SortableItem';
-export var Sortable = function Sortable(_ref) {
-  var items = _ref.items,
-    onOrderChange = _ref.onOrderChange,
-    ItemComponent = _ref.ItemComponent,
-    axis = _ref.axis,
-    placeholderCss = _ref.placeholderCss;
-  var _useState = useState(items),
-    order = _useState[0],
-    setOrder = _useState[1];
-  var _useState2 = useState(),
-    activeItem = _useState2[0],
-    setActiveItem = _useState2[1];
-  var sortableId = useMemo(function () {
-    return uuid();
-  }, []);
-  var handleDragEnd = function handleDragEnd() {
-    setActiveItem(undefined);
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useMemo, useEffect } from "react";
+import { v4 } from "uuid";
+import { DragOverlay } from "@dnd-kit/core";
+import { restrictToParentElement } from "@dnd-kit/modifiers";
+import { SortableContainer } from "./SortableContainer.js";
+import { SortableItem } from "./SortableItem.js";
+const Sortable = ({
+  items,
+  onOrderChange,
+  ItemComponent,
+  axis,
+  placeholderCss
+}) => {
+  const [order, setOrder] = useState(items);
+  const [activeItem, setActiveItem] = useState();
+  const sortableId = useMemo(() => v4(), []);
+  const handleDragEnd = () => {
+    setActiveItem(void 0);
   };
-  var handleDragStart = function handleDragStart(event) {
-    setActiveItem(items.find(function (item) {
-      return item.id === event.active.id;
-    }));
+  const handleDragStart = (event) => {
+    setActiveItem(items.find((item) => item.id === event.active.id));
   };
-  var handleOrderChange = function handleOrderChange(newOrder) {
-    onOrderChange == null || onOrderChange(newOrder);
+  const handleOrderChange = (newOrder) => {
+    onOrderChange?.(newOrder);
     setOrder(newOrder);
   };
-  useEffect(function () {
+  useEffect(() => {
     setOrder(items);
   }, [items]);
-  return /*#__PURE__*/React.createElement(SortableContainer, {
-    axis: axis,
-    items: items,
-    onDragEnd: handleDragEnd,
-    onDragStart: handleDragStart,
-    onOrderChange: handleOrderChange
-  }, order.map(function (item, index) {
-    return /*#__PURE__*/React.createElement(SortableItem, {
-      id: item.id,
-      index: index,
-      placeholderCss: placeholderCss,
-      isDragged: activeItem && (activeItem == null ? void 0 : activeItem.id) === item.id,
-      key: "sortable-item-" + sortableId + "-" + item.id,
-      data: item,
-      component: ItemComponent
-    });
-  }), /*#__PURE__*/React.createElement(DragOverlay, {
-    modifiers: [restrictToParentElement]
-  }, activeItem && /*#__PURE__*/React.createElement(ItemComponent, _extends({}, activeItem, {
-    index: -1
-  }))));
+  return /* @__PURE__ */ jsxs(SortableContainer, { axis, items, onDragEnd: handleDragEnd, onDragStart: handleDragStart, onOrderChange: handleOrderChange, children: [
+    order.map((item, index) => /* @__PURE__ */ jsx(SortableItem, { id: item.id, index, placeholderCss, isDragged: activeItem && activeItem?.id === item.id, data: item, component: ItemComponent }, `sortable-item-${sortableId}-${item.id}`)),
+    /* @__PURE__ */ jsx(DragOverlay, { modifiers: [restrictToParentElement], children: activeItem && /* @__PURE__ */ jsx(ItemComponent, { ...activeItem, index: -1 }) })
+  ] });
+};
+export {
+  Sortable,
+  Sortable as default
 };
-export default Sortable;

package/dist/Sortable.styles.d.ts

@@ -1,9 +1,9 @@
-import { type Interpolation } from 'styled-components';
-import { type ThemeProps } from '@synerise/ds-core';
-export declare const SortableItemContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SortableItemWrapper: import("styled-components").StyledComponent<"div", any, {
+import { Interpolation } from 'styled-components';
+import { ThemeProps } from '@synerise/ds-core';
+export declare const SortableItemContent: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const SortableItemWrapper: import('styled-components').StyledComponent<"div", any, {
     isGrabbed: boolean;
     isDragged: boolean;
     placeholderCss?: Interpolation<ThemeProps>;
 }, never>;
-export declare const SortableItemHandle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SortableItemHandle: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/Sortable.styles.js

@@ -1,17 +1,18 @@
-import styled, { css } from 'styled-components';
-export var SortableItemContent = styled.div.withConfig({
+import styled, { css } from "styled-components";
+const SortableItemContent = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Sortablestyles__SortableItemContent",
   componentId: "sc-1ggkbms-0"
 })([""]);
-export var SortableItemWrapper = styled.div.withConfig({
+const SortableItemWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Sortablestyles__SortableItemWrapper",
   componentId: "sc-1ggkbms-1"
-})(["", " ", ""], function (props) {
-  return props.isDragged && css(["", "{visibility:hidden;opacity:0;poiner-events:none;}position:relative;&:before{content:'';position:absolute;width:100%;height:100%;border:1px dashed ", ";background-color:", ";border-radius:3px;", "}"], SortableItemContent, props.theme.palette['blue-300'], props.theme.palette['blue-050'], props.placeholderCss);
-}, function (props) {
-  return props.isGrabbed && css(["", "{background:", ";box-shadow:0px 16px 32px 0px rgba(35,41,54,0.1);}"], SortableItemContent, props.theme.palette.white);
-});
-export var SortableItemHandle = styled.div.withConfig({
+})(["", " ", ""], (props) => props.isDragged && css(["", "{visibility:hidden;opacity:0;poiner-events:none;}position:relative;&:before{content:'';position:absolute;width:100%;height:100%;border:1px dashed ", ";background-color:", ";border-radius:3px;", "}"], SortableItemContent, props.theme.palette["blue-300"], props.theme.palette["blue-050"], props.placeholderCss), (props) => props.isGrabbed && css(["", "{background:", ";box-shadow:0px 16px 32px 0px rgba(35,41,54,0.1);}"], SortableItemContent, props.theme.palette.white));
+const SortableItemHandle = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Sortablestyles__SortableItemHandle",
   componentId: "sc-1ggkbms-2"
-})(["cursor:grab;"]);
+})(["cursor:grab;"]);
+export {
+  SortableItemContent,
+  SortableItemHandle,
+  SortableItemWrapper
+};

package/dist/Sortable.types.d.ts

@@ -1,8 +1,8 @@
-import type { ComponentType, ReactElement, ReactNode } from 'react';
-import type { Interpolation } from 'styled-components';
-import type { DndContextProps, DraggableAttributes, DraggableSyntheticListeners } from '@dnd-kit/core';
-import type { ThemeProps } from '@synerise/ds-core';
-import type { WithHTMLAttributes } from '@synerise/ds-utils';
+import { ComponentType, ReactElement, ReactNode } from 'react';
+import { Interpolation } from 'styled-components';
+import { DndContextProps, DraggableAttributes, DraggableSyntheticListeners } from '@dnd-kit/core';
+import { ThemeProps } from '@synerise/ds-core';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
 export type DragHandlePropType = DraggableAttributes & DraggableSyntheticListeners;
 export type RawBaseItem = {
     id: string | number;

package/dist/Sortable.types.js

@@ -1 +1 @@
-export {};
+

package/dist/SortableContainer.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type RawBaseItem, type SortableContainerProps } from './Sortable.types';
+import { default as React } from 'react';
+import { RawBaseItem, SortableContainerProps } from './Sortable.types';
 export declare const SortableContainer: <ItemType extends RawBaseItem>({ items, onOrderChange, onDragStart, onDragEnd, axis, children, ...props }: SortableContainerProps<ItemType>) => React.JSX.Element;
 export default SortableContainer;

package/dist/SortableContainer.js

@@ -1,74 +1,62 @@
-var _excluded = ["items", "onOrderChange", "onDragStart", "onDragEnd", "axis", "children"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { useEffect, useMemo, useState } from 'react';
-import { DndContext, KeyboardSensor, MouseSensor, PointerSensor, closestCenter, useSensor, useSensors } from '@dnd-kit/core';
-import { restrictToHorizontalAxis, restrictToVerticalAxis } from '@dnd-kit/modifiers';
-import { SortableContext, arrayMove, horizontalListSortingStrategy, rectSortingStrategy, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable';
-export var SortableContainer = function SortableContainer(_ref) {
-  var items = _ref.items,
-    onOrderChange = _ref.onOrderChange,
-    onDragStart = _ref.onDragStart,
-    onDragEnd = _ref.onDragEnd,
-    axis = _ref.axis,
-    children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var _useState = useState(items),
-    order = _useState[0],
-    setOrder = _useState[1];
-  var sensors = useSensors(useSensor(MouseSensor), useSensor(PointerSensor), useSensor(KeyboardSensor, {
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from "react";
+import { useSensors, useSensor, MouseSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from "@dnd-kit/core";
+import { restrictToHorizontalAxis, restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { sortableKeyboardCoordinates, horizontalListSortingStrategy, verticalListSortingStrategy, rectSortingStrategy, SortableContext, arrayMove } from "@dnd-kit/sortable";
+const SortableContainer = ({
+  items,
+  onOrderChange,
+  onDragStart,
+  onDragEnd,
+  axis,
+  children,
+  ...props
+}) => {
+  const [order, setOrder] = useState(items);
+  const sensors = useSensors(useSensor(MouseSensor), useSensor(PointerSensor), useSensor(KeyboardSensor, {
     coordinateGetter: sortableKeyboardCoordinates
   }));
-  var handleDragEnd = function handleDragEnd(event) {
-    var active = event.active,
-      over = event.over;
+  const handleDragEnd = (event) => {
+    const {
+      active,
+      over
+    } = event;
     if (over && active.id !== over.id) {
-      var oldIndex = order.findIndex(function (item) {
-        return item.id === active.id;
-      });
-      var newIndex = order.findIndex(function (item) {
-        return item.id === (over == null ? void 0 : over.id);
-      });
-      var updatedOrder = arrayMove(order, oldIndex, newIndex);
+      const oldIndex = order.findIndex((item) => item.id === active.id);
+      const newIndex = order.findIndex((item) => item.id === over?.id);
+      const updatedOrder = arrayMove(order, oldIndex, newIndex);
       setOrder(updatedOrder);
-      onOrderChange == null || onOrderChange(updatedOrder);
+      onOrderChange?.(updatedOrder);
     }
     onDragEnd && onDragEnd(event);
   };
-  var handleDragStart = function handleDragStart(event) {
+  const handleDragStart = (event) => {
     onDragStart && onDragStart(event);
   };
-  useEffect(function () {
+  useEffect(() => {
     setOrder(items);
   }, [items]);
-  var contextModifiers = useMemo(function () {
-    if (axis === 'x') {
+  const contextModifiers = useMemo(() => {
+    if (axis === "x") {
       return [restrictToHorizontalAxis];
     }
-    if (axis === 'y') {
+    if (axis === "y") {
       return [restrictToVerticalAxis];
     }
     return [];
   }, [axis]);
-  var sortingStrategy = useMemo(function () {
-    if (axis === 'x') {
+  const sortingStrategy = useMemo(() => {
+    if (axis === "x") {
       return horizontalListSortingStrategy;
     }
-    if (axis === 'y') {
+    if (axis === "y") {
       return verticalListSortingStrategy;
     }
     return rectSortingStrategy;
   }, [axis]);
-  return /*#__PURE__*/React.createElement(DndContext, _extends({
-    sensors: sensors,
-    collisionDetection: closestCenter,
-    modifiers: contextModifiers
-  }, props, {
-    onDragEnd: handleDragEnd,
-    onDragStart: handleDragStart
-  }), /*#__PURE__*/React.createElement(SortableContext, {
-    items: order,
-    strategy: sortingStrategy
-  }, children));
+  return /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: closestCenter, modifiers: contextModifiers, ...props, onDragEnd: handleDragEnd, onDragStart: handleDragStart, children: /* @__PURE__ */ jsx(SortableContext, { items: order, strategy: sortingStrategy, children }) });
+};
+export {
+  SortableContainer,
+  SortableContainer as default
 };
-export default SortableContainer;

package/dist/SortableItem.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
-import { type BaseItem, type SortableItemProps } from './Sortable.types';
+import { default as React } from 'react';
+import { BaseItem, SortableItemProps } from './Sortable.types';
 export declare const SortableItem: <ItemType extends BaseItem>({ id, data, index, isDragged, component: Component, style, placeholderCss, ...htmlAttributes }: SortableItemProps<ItemType>) => React.JSX.Element;

package/dist/SortableItem.js

@@ -1,46 +1,38 @@
-var _excluded = ["id", "data", "index", "isDragged", "component", "style", "placeholderCss"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React from 'react';
-import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import * as S from './Sortable.styles';
-export var SortableItem = function SortableItem(_ref) {
-  var id = _ref.id,
-    data = _ref.data,
-    index = _ref.index,
-    _ref$isDragged = _ref.isDragged,
-    isDragged = _ref$isDragged === void 0 ? false : _ref$isDragged,
-    Component = _ref.component,
-    style = _ref.style,
-    placeholderCss = _ref.placeholderCss,
-    htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var _useSortable = useSortable({
-      id: id
-    }),
-    attributes = _useSortable.attributes,
-    listeners = _useSortable.listeners,
-    setNodeRef = _useSortable.setNodeRef,
-    transform = _useSortable.transform,
-    transition = _useSortable.transition;
-  var itemStyle = _extends({}, style, {
+import { jsx } from "react/jsx-runtime";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { SortableItemWrapper, SortableItemContent } from "./Sortable.styles.js";
+const SortableItem = ({
+  id,
+  data,
+  index,
+  isDragged = false,
+  component: Component,
+  style,
+  placeholderCss,
+  ...htmlAttributes
+}) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition
+  } = useSortable({
+    id
+  });
+  const itemStyle = {
+    ...style,
     transform: CSS.Translate.toString(transform),
-    transition: transition,
+    transition,
     opacity: 1
-  });
-  var handleProps = _extends({}, attributes, listeners);
-  return /*#__PURE__*/React.createElement(S.SortableItemWrapper, _extends({
-    style: itemStyle,
-    "data-testid": "ds-sortable-item"
-  }, htmlAttributes, {
-    isGrabbed: index === -1,
-    placeholderCss: placeholderCss,
-    isDragged: isDragged,
-    ref: setNodeRef
-  }), /*#__PURE__*/React.createElement(S.SortableItemContent, null, /*#__PURE__*/React.createElement(Component, _extends({}, data, {
-    index: index,
-    dragHandleProps: handleProps,
-    isGrabbed: index === -1,
-    isDragged: isDragged
-  }))));
-};
+  };
+  const handleProps = {
+    ...attributes,
+    ...listeners
+  };
+  return /* @__PURE__ */ jsx(SortableItemWrapper, { style: itemStyle, "data-testid": "ds-sortable-item", ...htmlAttributes, isGrabbed: index === -1, placeholderCss, isDragged, ref: setNodeRef, children: /* @__PURE__ */ jsx(SortableItemContent, { children: /* @__PURE__ */ jsx(Component, { ...data, index, dragHandleProps: handleProps, isGrabbed: index === -1, isDragged }) }) });
+};
+export {
+  SortableItem
+};

package/dist/index.js

@@ -1,5 +1,14 @@
-export { useDndMonitor, DragOverlay } from '@dnd-kit/core';
-export { arrayMove, useSortable } from '@dnd-kit/sortable';
-export { CSS } from '@dnd-kit/utilities';
-export { default } from './Sortable';
-export { SortableContainer } from './SortableContainer';
+import { DragOverlay, useDndMonitor } from "@dnd-kit/core";
+import { arrayMove, useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Sortable } from "./Sortable.js";
+import { SortableContainer } from "./SortableContainer.js";
+export {
+  CSS,
+  DragOverlay,
+  SortableContainer,
+  arrayMove,
+  Sortable as default,
+  useDndMonitor,
+  useSortable
+};

package/dist/modules.d.js

@@ -1 +1 @@
-import '@testing-library/jest-dom/extend-expect';
+import "@testing-library/jest-dom/extend-expect";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-sortable",
-  "version": "1.3.13",
+  "version": "1.3.15",
   "description": "Sortable UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -16,15 +16,12 @@
     "access": "public"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
-    "build:css": "node ../../../scripts/style/less.js",
-    "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
-    "build:watch": "pnpm run build:js -- --watch",
-    "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
+    "build": "vite build",
+    "build:watch": "vite build --watch",
     "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
     "prepublish": "pnpm run build",
-    "test": "jest",
-    "test:watch": "pnpm run test -- --watchAll",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "types": "tsc --noEmit",
     "check:circular-dependencies": "madge --circular --extensions ts,tsx,js,jsx --ts-config tsconfig.json src/ --exclude '/dist/'",
     "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
@@ -39,13 +36,14 @@
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@synerise/ds-utils": "^1.7.0",
+    "@synerise/ds-utils": "^1.8.0",
     "uuid": "^8.3.2"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 <= 18.3.1",
-    "styled-components": "^5.3.3"
+    "styled-components": "^5.3.3",
+    "vitest": "4"
   },
-  "gitHead": "8efc031fa688c0b87c7b3915bae93546bb63bcac"
+  "gitHead": "ce3c6d75efe8573a2b274853636f959b75a6cd32"
 }