@synerise/ds-sortable 1.1.2 → 1.2.0

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.2.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-sortable@1.1.3...@synerise/ds-sortable@1.2.0) (2025-06-05)
+
+
+### Features
+
+* **column-manager:** removed unnecessary features ([152d3c0](https://github.com/Synerise/synerise-design/commit/152d3c0d87449977f8c4264bb7abd278210470e9))
+* **filter:** change dnd lib and update ux ([f5a979e](https://github.com/Synerise/synerise-design/commit/f5a979e6c9e5d9c8251c3f57da8ce57c416dadab))
+
+
+
+
+
+## [1.1.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-sortable@1.1.2...@synerise/ds-sortable@1.1.3) (2025-05-26)
+
+**Note:** Version bump only for package @synerise/ds-sortable
+
+
+
+
+
 ## [1.1.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-sortable@1.1.1...@synerise/ds-sortable@1.1.2) (2025-05-07)
 
 **Note:** Version bump only for package @synerise/ds-sortable

package/dist/Sortable.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { SortableProps, BaseItem } from './Sortable.types';
-export declare const Sortable: <ItemType extends BaseItem>({ items, onOrderChange, ItemComponent, axis, }: SortableProps<ItemType>) => React.JSX.Element;
+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,43 +1,26 @@
 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, { useMemo, useState, useEffect } from 'react';
 import { v4 as uuid } from 'uuid';
-import { DndContext, closestCenter, KeyboardSensor, PointerSensor, MouseSensor, useSensor, useSensors, DragOverlay } from '@dnd-kit/core';
-import { arrayMove, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, horizontalListSortingStrategy, rectSortingStrategy } from '@dnd-kit/sortable';
-import { restrictToVerticalAxis, restrictToHorizontalAxis, restrictToParentElement } from '@dnd-kit/modifiers';
+import { DragOverlay } from '@dnd-kit/core';
+import { restrictToParentElement } from '@dnd-kit/modifiers';
 import { SortableItem } from './SortableItem';
+import { SortableContainer } from './SortableContainer';
 export var Sortable = function Sortable(_ref) {
   var items = _ref.items,
     onOrderChange = _ref.onOrderChange,
     ItemComponent = _ref.ItemComponent,
-    axis = _ref.axis;
+    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 sensors = useSensors(useSensor(MouseSensor), useSensor(PointerSensor), useSensor(KeyboardSensor, {
-    coordinateGetter: sortableKeyboardCoordinates
-  }));
   var sortableId = useMemo(function () {
     return uuid();
   }, []);
-  var handleDragEnd = function handleDragEnd(event) {
-    var active = event.active,
-      over = event.over;
-    if (active.id !== (over == null ? void 0 : over.id)) {
-      setOrder(function (oldOrder) {
-        var oldIndex = oldOrder.findIndex(function (item) {
-          return item.id === active.id;
-        });
-        var newIndex = oldOrder.findIndex(function (item) {
-          return item.id === (over == null ? void 0 : over.id);
-        });
-        var updatedOrder = arrayMove(oldOrder, oldIndex, newIndex);
-        onOrderChange && onOrderChange(updatedOrder);
-        return updatedOrder;
-      });
-    }
+  var handleDragEnd = function handleDragEnd() {
     setActiveItem(undefined);
   };
   var handleDragStart = function handleDragStart(event) {
@@ -48,37 +31,17 @@ export var Sortable = function Sortable(_ref) {
   useEffect(function () {
     setOrder(items);
   }, [items]);
-  var contextModifiers = useMemo(function () {
-    if (axis === 'x') {
-      return [restrictToHorizontalAxis];
-    }
-    if (axis === 'y') {
-      return [restrictToVerticalAxis];
-    }
-    return [];
-  }, [axis]);
-  var sortingStrategy = useMemo(function () {
-    if (axis === 'x') {
-      return horizontalListSortingStrategy;
-    }
-    if (axis === 'y') {
-      return verticalListSortingStrategy;
-    }
-    return rectSortingStrategy;
-  }, [axis]);
-  return /*#__PURE__*/React.createElement(DndContext, {
-    sensors: sensors,
-    collisionDetection: closestCenter,
+  return /*#__PURE__*/React.createElement(SortableContainer, {
+    axis: axis,
+    items: items,
     onDragEnd: handleDragEnd,
     onDragStart: handleDragStart,
-    modifiers: contextModifiers
-  }, /*#__PURE__*/React.createElement(SortableContext, {
-    items: order,
-    strategy: sortingStrategy
+    onOrderChange: onOrderChange
   }, order.map(function (item, index) {
     return /*#__PURE__*/React.createElement(SortableItem, {
       id: item.id,
       index: index,
+      placeholderCss: placeholderCss,
       isDragged: (activeItem == null ? void 0 : activeItem.id) === item.id,
       key: "sortable-item-" + sortableId + "-" + item.id,
       data: item,
@@ -88,6 +51,6 @@ export var Sortable = function Sortable(_ref) {
     modifiers: [restrictToParentElement]
   }, activeItem && /*#__PURE__*/React.createElement(ItemComponent, _extends({}, activeItem, {
     index: -1
-  })))));
+  }))));
 };
 export default Sortable;

package/dist/Sortable.styles.d.ts

@@ -1,6 +1,9 @@
+import { ThemeProps } from '@synerise/ds-core';
+import { Interpolation } from 'styled-components';
 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>;

package/dist/Sortable.styles.js

@@ -7,7 +7,7 @@ export var SortableItemWrapper = 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']);
+  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);
 });

package/dist/Sortable.types.d.ts

@@ -1,12 +1,16 @@
 import type { ReactNode, ReactElement, ComponentType } from 'react';
-import type { DraggableAttributes, DraggableSyntheticListeners } from '@dnd-kit/core';
+import type { DndContextProps, DraggableAttributes, DraggableSyntheticListeners } from '@dnd-kit/core';
+import type { Interpolation } from 'styled-components';
 import type { WithHTMLAttributes } from '@synerise/ds-utils';
+import type { ThemeProps } from '@synerise/ds-core';
 export type DragHandlePropType = DraggableAttributes & DraggableSyntheticListeners;
-export type BaseItem = {
+export type RawBaseItem = {
     id: string | number;
-    dragHandleProps?: DragHandlePropType;
 };
-type WithIndex<T> = T & {
+export type BaseItem = RawBaseItem & {
+    dragHandleProps?: DraggableAttributes & DraggableSyntheticListeners;
+};
+export type WithIndex<T> = T & {
     index: number;
 };
 type ItemComponent<ItemType extends WithIndex<BaseItem>> = ComponentType<ItemType> | ((props: ItemType) => ReactElement);
@@ -14,6 +18,7 @@ export type SortableItemProps<ItemType extends BaseItem> = WithHTMLAttributes<HT
     children?: ReactNode;
     id: string | number;
     index: number;
+    placeholderCss?: Interpolation<ThemeProps>;
     component: ItemComponent<WithIndex<ItemType>>;
     data: ItemType;
     isDragged?: boolean;
@@ -23,5 +28,11 @@ export type SortableProps<ItemType extends BaseItem> = {
     axis?: 'x' | 'y';
     ItemComponent: ItemComponent<WithIndex<ItemType>>;
     onOrderChange?: (newOrder: ItemType[]) => void;
+    placeholderCss?: Interpolation<ThemeProps>;
+};
+export type SortableContainerProps<ItemType extends BaseItem> = Omit<DndContextProps, 'sensors' | 'collisionDetection' | 'modifiers'> & {
+    items: ItemType[];
+    axis?: 'x' | 'y';
+    onOrderChange?: (newOrder: ItemType[]) => void;
 };
 export {};

package/dist/SortableContainer.d.ts

@@ -0,0 +1,4 @@
+import 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

@@ -0,0 +1,76 @@
+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, { useMemo, useState, useEffect } from 'react';
+import { DndContext, closestCenter, KeyboardSensor, PointerSensor, MouseSensor, useSensor, useSensors } from '@dnd-kit/core';
+import { arrayMove, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, horizontalListSortingStrategy, rectSortingStrategy } from '@dnd-kit/sortable';
+import { restrictToVerticalAxis, restrictToHorizontalAxis } from '@dnd-kit/modifiers';
+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, {
+    coordinateGetter: sortableKeyboardCoordinates
+  }));
+  var handleDragEnd = function handleDragEnd(event) {
+    var active = event.active,
+      over = event.over;
+    if (active.id !== (over == null ? void 0 : over.id)) {
+      setOrder(function (oldOrder) {
+        var oldIndex = oldOrder.findIndex(function (item) {
+          return item.id === active.id;
+        });
+        var newIndex = oldOrder.findIndex(function (item) {
+          return item.id === (over == null ? void 0 : over.id);
+        });
+        var updatedOrder = arrayMove(oldOrder, oldIndex, newIndex);
+        onOrderChange && onOrderChange(updatedOrder);
+        return updatedOrder;
+      });
+    }
+    onDragEnd && onDragEnd(event);
+  };
+  var handleDragStart = function handleDragStart(event) {
+    onDragStart && onDragStart(event);
+  };
+  useEffect(function () {
+    setOrder(items);
+  }, [items]);
+  var contextModifiers = useMemo(function () {
+    if (axis === 'x') {
+      return [restrictToHorizontalAxis];
+    }
+    if (axis === 'y') {
+      return [restrictToVerticalAxis];
+    }
+    return [];
+  }, [axis]);
+  var sortingStrategy = useMemo(function () {
+    if (axis === 'x') {
+      return horizontalListSortingStrategy;
+    }
+    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));
+};
+export default SortableContainer;

package/dist/SortableItem.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { SortableItemProps, BaseItem } from './Sortable.types';
-export declare const SortableItem: <ItemType extends BaseItem>({ id, data, index, isDragged, component: Component, style, ...htmlAttributes }: SortableItemProps<ItemType>) => React.JSX.Element;
+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,4 +1,4 @@
-var _excluded = ["id", "data", "index", "isDragged", "component", "style"];
+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';
@@ -13,6 +13,7 @@ export var SortableItem = function SortableItem(_ref) {
     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
@@ -33,10 +34,13 @@ export var SortableItem = function SortableItem(_ref) {
     "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
+    dragHandleProps: handleProps,
+    isGrabbed: index === -1,
+    isDragged: isDragged
   }))));
 };

package/dist/index.d.ts

@@ -1,2 +1,5 @@
+export { useDndMonitor } from '@dnd-kit/core';
+export { arrayMove } from '@dnd-kit/sortable';
 export { default } from './Sortable';
-export type { DragHandlePropType, SortableItemProps, SortableProps, BaseItem } from './Sortable.types';
+export { SortableContainer } from './SortableContainer';
+export type { DragHandlePropType, SortableItemProps, SortableProps, BaseItem, WithIndex } from './Sortable.types';

package/dist/index.js

@@ -1 +1,4 @@
-export { default } from './Sortable';
+export { useDndMonitor } from '@dnd-kit/core';
+export { arrayMove } from '@dnd-kit/sortable';
+export { default } from './Sortable';
+export { SortableContainer } from './SortableContainer';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-sortable",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Sortable UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -38,7 +38,7 @@
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@synerise/ds-utils": "^1.1.0",
+    "@synerise/ds-utils": "^1.2.0",
     "uuid": "^8.3.2"
   },
   "peerDependencies": {
@@ -46,5 +46,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "90af7549cf0f556340bdd0deec4bb59bacf3e95e"
+  "gitHead": "93bc81d59d20bc8f3bc80c5d56ae7f7c0838380d"
 }