@1771technologies/lytenyte-pro 0.0.55 → 0.0.57

package/dist/index.js

@@ -95,7 +95,7 @@ function useHeaderCellRenderer(api, column) {
   }, [base.headerRenderer, column.headerRenderer, column.id, defaultRenderer, renderers]);
   return Renderer;
 }
-function useHeaderMove(api, column, columnIndex) {
+function useHeaderMove(api, column, columnIndex, ref) {
   const gridId = api.getState().gridId.use();
   const dragProps = useDraggable({
     onDragStart: () => {
@@ -128,6 +128,14 @@ function useHeaderMove(api, column, columnIndex) {
       if (src.includes(target)) return;
       if (isBefore2) api.columnMoveBefore(src, target);
       else api.columnMoveAfter(src, target);
+      setTimeout(() => {
+        if (!ref.current) return;
+        const parent = ref.current.parentElement;
+        const movedEl = parent?.querySelector(
+          `[data-lng1771-column-id="${src[0]}"]`
+        );
+        movedEl?.focus();
+      }, 10);
     }
   });
   const dragData = dragState.dragData.use();
@@ -138,7 +146,7 @@ function useHeaderMove(api, column, columnIndex) {
   return { moveProps, dropProps, isBefore, canDrop, isOver, dragIndex };
 }
 function DragPlaceholder$1(c) {
-  return /* @__PURE__ */ jsxs("div", { className: "lng1771-pill-manager__drag-placeholder--default", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "lng1771-header-drag-placeholder--default", children: [
     /* @__PURE__ */ jsx(
       "svg",
       {
@@ -200,14 +208,15 @@ function HeaderCell({
     return style2;
   }, [columnIndex, isEnd, isStart, rowEnd, rowStart, rtl, viewportWidth, xPositions]);
   const Renderer = useHeaderCellRenderer(api, column);
+  const ref = useRef(null);
   const { moveProps, dropProps, isBefore, isOver, canDrop, dragIndex } = useHeaderMove(
     api,
     column,
-    columnIndex
+    columnIndex,
+    ref
   );
   const sx = api.getState();
   sx.sortModel.use();
-  const ref = useRef(null);
   const events = useHeaderFocus(api, ref, columnIndex);
   if (api.columnIsEmpty(column)) {
     return /* @__PURE__ */ jsx(

package/dist/lytenyte-pro.css

@@ -16,10 +16,6 @@
   padding-inline: 16px;
   padding-block: 12px;
 }
-.lng1771-header__cell,
-.lng1771-header__cell-expand,
-.lng1771-header__cell-floating,
-.lng1771-header__group,
 .lng1771-cell,
 .lng1771-cell__full-width {
   &:focus {
@@ -28,6 +24,16 @@
   }
 }
 
+.lng1771-header__cell,
+.lng1771-header__cell-expand,
+.lng1771-header__cell-floating,
+.lng1771-header__group {
+  &:focus {
+    outline: 1px solid var(--lng1771-focus-outline);
+    outline-offset: -3px;
+  }
+}
+
 .lng1771-drag-placeholder {
   padding-inline: 12px;
   padding-block: 8px;
@@ -93,7 +99,7 @@
 }
 
 .lng1771-header__cell--over-before::after {
-  inset-inline-start: 1px;
+  inset-inline-start: 0px;
 }
 .lng1771-header__cell--over-after::after {
   inset-inline-end: 1px;
@@ -101,8 +107,8 @@
 .lng1771-header__cell--over::after {
   top: 0px;
   position: absolute;
-  width: 2px;
-  border-radius: 9999px;
+  width: 4px;
+  border-radius: 8px;
   height: 100%;
   content: "";
   background-color: var(--lng1771-allowed-to-drop, var(--lng1771-primary-50));
@@ -111,6 +117,17 @@
 .lng1771-header__cell--over-not-allowed {
   --lng1771-allowed-to-drop: red;
 }
+
+.lng1771-header-drag-placeholder--default {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background-color: var(--lng1771-gray-05);
+  border: 1px solid var(--lng1771-primary-30);
+  border-radius: 6px;
+  padding-inline: 8px;
+  padding-block: 8px;
+}
 .lng1771-icon-button {
   display: flex;
   align-items: center;
@@ -1612,7 +1629,8 @@ body.lng1771-drag-on .lng1771-pill-manager__pill-outer[data-pill-active="false"]
   position: relative;
   border-radius: 9999px;
   box-sizing: border-box;
-  background-color: var(--lng1771-gray-05);
+  background-color: var(--lng1771-gray-02);
+  border: 1px solid var(--lng1771-gray-30);
   cursor: pointer;
 
   &:focus-within {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1771technologies/lytenyte-pro",
-  "version": "0.0.55",
+  "version": "0.0.57",
   "license": "COMMERCIAL",
   "type": "module",
   "files": [
@@ -70,20 +70,20 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@1771technologies/grid-client-data-source-pro": "0.0.55",
-    "@1771technologies/grid-core": "0.0.55",
-    "@1771technologies/grid-design": "0.0.55",
-    "@1771technologies/grid-provider": "0.0.55",
-    "@1771technologies/grid-store-pro": "0.0.55",
-    "@1771technologies/grid-tree-data-source": "0.0.55",
-    "@1771technologies/grid-types": "0.0.55",
-    "@1771technologies/js-utils": "0.0.55",
-    "@1771technologies/lytenyte-core": "0.0.55",
-    "@1771technologies/react-cascada": "0.0.55",
-    "@1771technologies/react-dragon": "0.0.55",
-    "@1771technologies/react-sizer": "0.0.55",
-    "@1771technologies/react-split-pane": "0.0.55",
-    "@1771technologies/react-utils": "0.0.55",
+    "@1771technologies/grid-client-data-source-pro": "0.0.57",
+    "@1771technologies/grid-core": "0.0.57",
+    "@1771technologies/grid-design": "0.0.57",
+    "@1771technologies/grid-provider": "0.0.57",
+    "@1771technologies/grid-store-pro": "0.0.57",
+    "@1771technologies/grid-tree-data-source": "0.0.57",
+    "@1771technologies/grid-types": "0.0.57",
+    "@1771technologies/js-utils": "0.0.57",
+    "@1771technologies/lytenyte-core": "0.0.57",
+    "@1771technologies/react-cascada": "0.0.57",
+    "@1771technologies/react-dragon": "0.0.57",
+    "@1771technologies/react-sizer": "0.0.57",
+    "@1771technologies/react-split-pane": "0.0.57",
+    "@1771technologies/react-utils": "0.0.57",
     "@base-ui-components/react": "1.0.0-alpha.7"
   },
   "devDependencies": {