@1771technologies/lytenyte-pro 0.0.56 → 0.0.57

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +13 -4
  2. package/dist/lytenyte-pro.css +16 -4
  3. package/package.json +15 -15
package/dist/index.js CHANGED
@@ -95,7 +95,7 @@ function useHeaderCellRenderer(api, column) {
95
95
  }, [base.headerRenderer, column.headerRenderer, column.id, defaultRenderer, renderers]);
96
96
  return Renderer;
97
97
  }
98
- function useHeaderMove(api, column, columnIndex) {
98
+ function useHeaderMove(api, column, columnIndex, ref) {
99
99
  const gridId = api.getState().gridId.use();
100
100
  const dragProps = useDraggable({
101
101
  onDragStart: () => {
@@ -128,6 +128,14 @@ function useHeaderMove(api, column, columnIndex) {
128
128
  if (src.includes(target)) return;
129
129
  if (isBefore2) api.columnMoveBefore(src, target);
130
130
  else api.columnMoveAfter(src, target);
131
+ setTimeout(() => {
132
+ if (!ref.current) return;
133
+ const parent = ref.current.parentElement;
134
+ const movedEl = parent?.querySelector(
135
+ `[data-lng1771-column-id="${src[0]}"]`
136
+ );
137
+ movedEl?.focus();
138
+ }, 10);
131
139
  }
132
140
  });
133
141
  const dragData = dragState.dragData.use();
@@ -138,7 +146,7 @@ function useHeaderMove(api, column, columnIndex) {
138
146
  return { moveProps, dropProps, isBefore, canDrop, isOver, dragIndex };
139
147
  }
140
148
  function DragPlaceholder$1(c) {
141
- return /* @__PURE__ */ jsxs("div", { className: "lng1771-pill-manager__drag-placeholder--default", children: [
149
+ return /* @__PURE__ */ jsxs("div", { className: "lng1771-header-drag-placeholder--default", children: [
142
150
  /* @__PURE__ */ jsx(
143
151
  "svg",
144
152
  {
@@ -200,14 +208,15 @@ function HeaderCell({
200
208
  return style2;
201
209
  }, [columnIndex, isEnd, isStart, rowEnd, rowStart, rtl, viewportWidth, xPositions]);
202
210
  const Renderer = useHeaderCellRenderer(api, column);
211
+ const ref = useRef(null);
203
212
  const { moveProps, dropProps, isBefore, isOver, canDrop, dragIndex } = useHeaderMove(
204
213
  api,
205
214
  column,
206
- columnIndex
215
+ columnIndex,
216
+ ref
207
217
  );
208
218
  const sx = api.getState();
209
219
  sx.sortModel.use();
210
- const ref = useRef(null);
211
220
  const events = useHeaderFocus(api, ref, columnIndex);
212
221
  if (api.columnIsEmpty(column)) {
213
222
  return /* @__PURE__ */ jsx(
package/dist/lytenyte-pro.css CHANGED
@@ -99,7 +99,7 @@
99
99
  }
100
100
 
101
101
  .lng1771-header__cell--over-before::after {
102
- inset-inline-start: 1px;
102
+ inset-inline-start: 0px;
103
103
  }
104
104
  .lng1771-header__cell--over-after::after {
105
105
  inset-inline-end: 1px;
@@ -107,8 +107,8 @@
107
107
  .lng1771-header__cell--over::after {
108
108
  top: 0px;
109
109
  position: absolute;
110
- width: 2px;
111
- border-radius: 9999px;
110
+ width: 4px;
111
+ border-radius: 8px;
112
112
  height: 100%;
113
113
  content: "";
114
114
  background-color: var(--lng1771-allowed-to-drop, var(--lng1771-primary-50));
@@ -117,6 +117,17 @@
117
117
  .lng1771-header__cell--over-not-allowed {
118
118
  --lng1771-allowed-to-drop: red;
119
119
  }
120
+
121
+ .lng1771-header-drag-placeholder--default {
122
+ display: flex;
123
+ align-items: center;
124
+ gap: 8px;
125
+ background-color: var(--lng1771-gray-05);
126
+ border: 1px solid var(--lng1771-primary-30);
127
+ border-radius: 6px;
128
+ padding-inline: 8px;
129
+ padding-block: 8px;
130
+ }
120
131
  .lng1771-icon-button {
121
132
  display: flex;
122
133
  align-items: center;
@@ -1618,7 +1629,8 @@ body.lng1771-drag-on .lng1771-pill-manager__pill-outer[data-pill-active="false"]
1618
1629
  position: relative;
1619
1630
  border-radius: 9999px;
1620
1631
  box-sizing: border-box;
1621
- background-color: var(--lng1771-gray-05);
1632
+ background-color: var(--lng1771-gray-02);
1633
+ border: 1px solid var(--lng1771-gray-30);
1622
1634
  cursor: pointer;
1623
1635
 
1624
1636
  &:focus-within {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@1771technologies/lytenyte-pro",
3
- "version": "0.0.56",
3
+ "version": "0.0.57",
4
4
  "license": "COMMERCIAL",
5
5
  "type": "module",
6
6
  "files": [
@@ -70,20 +70,20 @@
70
70
  "react-dom": "^18.0.0 || ^19.0.0"
71
71
  },
72
72
  "dependencies": {
73
- "@1771technologies/grid-client-data-source-pro": "0.0.56",
74
- "@1771technologies/grid-core": "0.0.56",
75
- "@1771technologies/grid-design": "0.0.56",
76
- "@1771technologies/grid-provider": "0.0.56",
77
- "@1771technologies/grid-store-pro": "0.0.56",
78
- "@1771technologies/grid-tree-data-source": "0.0.56",
79
- "@1771technologies/grid-types": "0.0.56",
80
- "@1771technologies/js-utils": "0.0.56",
81
- "@1771technologies/lytenyte-core": "0.0.56",
82
- "@1771technologies/react-cascada": "0.0.56",
83
- "@1771technologies/react-dragon": "0.0.56",
84
- "@1771technologies/react-sizer": "0.0.56",
85
- "@1771technologies/react-split-pane": "0.0.56",
86
- "@1771technologies/react-utils": "0.0.56",
73
+ "@1771technologies/grid-client-data-source-pro": "0.0.57",
74
+ "@1771technologies/grid-core": "0.0.57",
75
+ "@1771technologies/grid-design": "0.0.57",
76
+ "@1771technologies/grid-provider": "0.0.57",
77
+ "@1771technologies/grid-store-pro": "0.0.57",
78
+ "@1771technologies/grid-tree-data-source": "0.0.57",
79
+ "@1771technologies/grid-types": "0.0.57",
80
+ "@1771technologies/js-utils": "0.0.57",
81
+ "@1771technologies/lytenyte-core": "0.0.57",
82
+ "@1771technologies/react-cascada": "0.0.57",
83
+ "@1771technologies/react-dragon": "0.0.57",
84
+ "@1771technologies/react-sizer": "0.0.57",
85
+ "@1771technologies/react-split-pane": "0.0.57",
86
+ "@1771technologies/react-utils": "0.0.57",
87
87
  "@base-ui-components/react": "1.0.0-alpha.7"
88
88
  },
89
89
  "devDependencies": {