@zag-js/splitter 0.0.0-dev-20230525221231 → 0.0.0-dev-20230526205409

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.
@@ -7,7 +7,7 @@ var dom = createScope({
7
7
  getLabelId: (ctx) => ctx.ids?.label ?? `splitter:${ctx.id}:label`,
8
8
  getPanelId: (ctx, id) => ctx.ids?.panel?.(id) ?? `splitter:${ctx.id}:panel:${id}`,
9
9
  globalCursorId: (ctx) => `splitter:${ctx.id}:global-cursor`,
10
- getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
10
+ getRootEl: (ctx) => dom.queryById(ctx, dom.getRootId(ctx)),
11
11
  getResizeTriggerEl: (ctx, id) => dom.getById(ctx, dom.getResizeTriggerId(ctx, id)),
12
12
  getPanelEl: (ctx, id) => dom.getById(ctx, dom.getPanelId(ctx, id)),
13
13
  getCursor(ctx) {
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  dom
3
- } from "./chunk-G4OIUPPJ.mjs";
3
+ } from "./chunk-3GDOPT5W.mjs";
4
4
  import {
5
5
  clamp,
6
6
  getHandleBounds,
@@ -11,7 +11,7 @@ import {
11
11
 
12
12
  // src/splitter.machine.ts
13
13
  import { createMachine } from "@zag-js/core";
14
- import { getRelativePointPercent, trackPointerMove } from "@zag-js/dom-event";
14
+ import { getRelativePoint, trackPointerMove } from "@zag-js/dom-event";
15
15
  import { raf } from "@zag-js/dom-query";
16
16
  import { compact } from "@zag-js/utils";
17
17
  function machine(userContext) {
@@ -268,10 +268,15 @@ function machine(userContext) {
268
268
  setPointerValue(ctx2, evt) {
269
269
  const panels = getHandlePanels(ctx2);
270
270
  const bounds = getHandleBounds(ctx2);
271
- const rootEl = dom.getRootEl(ctx2);
272
- if (!panels || !rootEl || !bounds)
271
+ if (!panels || !bounds)
273
272
  return;
274
- let pointValue = getRelativePointPercent(evt.point, rootEl).normalize(ctx2) * 100;
273
+ const rootEl = dom.getRootEl(ctx2);
274
+ const relativePoint = getRelativePoint(evt.point, rootEl);
275
+ const percentValue = relativePoint.getPercentValue({
276
+ dir: ctx2.dir,
277
+ orientation: ctx2.orientation
278
+ });
279
+ let pointValue = percentValue * 100;
275
280
  ctx2.activeResizeState = {
276
281
  isAtMin: pointValue < bounds.min,
277
282
  isAtMax: pointValue > bounds.max
@@ -3,7 +3,7 @@ import {
3
3
  } from "./chunk-HPRMFGOY.mjs";
4
4
  import {
5
5
  dom
6
- } from "./chunk-G4OIUPPJ.mjs";
6
+ } from "./chunk-3GDOPT5W.mjs";
7
7
  import {
8
8
  getHandleBounds
9
9
  } from "./chunk-MV44GBQY.mjs";
package/dist/index.js CHANGED
@@ -44,7 +44,7 @@ var dom = (0, import_dom_query.createScope)({
44
44
  getLabelId: (ctx) => ctx.ids?.label ?? `splitter:${ctx.id}:label`,
45
45
  getPanelId: (ctx, id) => ctx.ids?.panel?.(id) ?? `splitter:${ctx.id}:panel:${id}`,
46
46
  globalCursorId: (ctx) => `splitter:${ctx.id}:global-cursor`,
47
- getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
47
+ getRootEl: (ctx) => dom.queryById(ctx, dom.getRootId(ctx)),
48
48
  getResizeTriggerEl: (ctx, id) => dom.getById(ctx, dom.getResizeTriggerId(ctx, id)),
49
49
  getPanelEl: (ctx, id) => dom.getById(ctx, dom.getPanelId(ctx, id)),
50
50
  getCursor(ctx) {
@@ -659,10 +659,15 @@ function machine(userContext) {
659
659
  setPointerValue(ctx2, evt) {
660
660
  const panels = getHandlePanels(ctx2);
661
661
  const bounds = getHandleBounds(ctx2);
662
- const rootEl = dom.getRootEl(ctx2);
663
- if (!panels || !rootEl || !bounds)
662
+ if (!panels || !bounds)
664
663
  return;
665
- let pointValue = (0, import_dom_event2.getRelativePointPercent)(evt.point, rootEl).normalize(ctx2) * 100;
664
+ const rootEl = dom.getRootEl(ctx2);
665
+ const relativePoint = (0, import_dom_event2.getRelativePoint)(evt.point, rootEl);
666
+ const percentValue = relativePoint.getPercentValue({
667
+ dir: ctx2.dir,
668
+ orientation: ctx2.orientation
669
+ });
670
+ let pointValue = percentValue * 100;
666
671
  ctx2.activeResizeState = {
667
672
  isAtMin: pointValue < bounds.min,
668
673
  isAtMax: pointValue > bounds.max
package/dist/index.mjs CHANGED
@@ -1,13 +1,13 @@
1
1
  import {
2
2
  connect
3
- } from "./chunk-ECKRJG7O.mjs";
3
+ } from "./chunk-FCVFZHPC.mjs";
4
4
  import {
5
5
  anatomy
6
6
  } from "./chunk-HPRMFGOY.mjs";
7
7
  import {
8
8
  machine
9
- } from "./chunk-PI3URGYH.mjs";
10
- import "./chunk-G4OIUPPJ.mjs";
9
+ } from "./chunk-64C2WGI5.mjs";
10
+ import "./chunk-3GDOPT5W.mjs";
11
11
  import "./chunk-MV44GBQY.mjs";
12
12
  export {
13
13
  anatomy,
@@ -40,7 +40,7 @@ var dom = (0, import_dom_query.createScope)({
40
40
  getLabelId: (ctx) => ctx.ids?.label ?? `splitter:${ctx.id}:label`,
41
41
  getPanelId: (ctx, id) => ctx.ids?.panel?.(id) ?? `splitter:${ctx.id}:panel:${id}`,
42
42
  globalCursorId: (ctx) => `splitter:${ctx.id}:global-cursor`,
43
- getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
43
+ getRootEl: (ctx) => dom.queryById(ctx, dom.getRootId(ctx)),
44
44
  getResizeTriggerEl: (ctx, id) => dom.getById(ctx, dom.getResizeTriggerId(ctx, id)),
45
45
  getPanelEl: (ctx, id) => dom.getById(ctx, dom.getPanelId(ctx, id)),
46
46
  getCursor(ctx) {
@@ -1,8 +1,8 @@
1
1
  import {
2
2
  connect
3
- } from "./chunk-ECKRJG7O.mjs";
3
+ } from "./chunk-FCVFZHPC.mjs";
4
4
  import "./chunk-HPRMFGOY.mjs";
5
- import "./chunk-G4OIUPPJ.mjs";
5
+ import "./chunk-3GDOPT5W.mjs";
6
6
  import "./chunk-MV44GBQY.mjs";
7
7
  export {
8
8
  connect
@@ -28,7 +28,7 @@ declare const dom: {
28
28
  getLabelId: (ctx: MachineContext) => string | ((id: string) => string);
29
29
  getPanelId: (ctx: MachineContext, id: string | number) => string;
30
30
  globalCursorId: (ctx: MachineContext) => string;
31
- getRootEl: (ctx: MachineContext) => HTMLElement | null;
31
+ getRootEl: (ctx: MachineContext) => HTMLElement;
32
32
  getResizeTriggerEl: (ctx: MachineContext, id: string) => HTMLElement | null;
33
33
  getPanelEl: (ctx: MachineContext, id: string | number) => HTMLElement | null;
34
34
  getCursor(ctx: MachineContext): (string & {}) | "col-resize" | "e-resize" | "n-resize" | "row-resize" | "s-resize" | "w-resize";
@@ -31,7 +31,7 @@ var dom = (0, import_dom_query.createScope)({
31
31
  getLabelId: (ctx) => ctx.ids?.label ?? `splitter:${ctx.id}:label`,
32
32
  getPanelId: (ctx, id) => ctx.ids?.panel?.(id) ?? `splitter:${ctx.id}:panel:${id}`,
33
33
  globalCursorId: (ctx) => `splitter:${ctx.id}:global-cursor`,
34
- getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
34
+ getRootEl: (ctx) => dom.queryById(ctx, dom.getRootId(ctx)),
35
35
  getResizeTriggerEl: (ctx, id) => dom.getById(ctx, dom.getResizeTriggerId(ctx, id)),
36
36
  getPanelEl: (ctx, id) => dom.getById(ctx, dom.getPanelId(ctx, id)),
37
37
  getCursor(ctx) {
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  dom
3
- } from "./chunk-G4OIUPPJ.mjs";
3
+ } from "./chunk-3GDOPT5W.mjs";
4
4
  export {
5
5
  dom
6
6
  };
@@ -37,7 +37,7 @@ var dom = (0, import_dom_query.createScope)({
37
37
  getLabelId: (ctx) => ctx.ids?.label ?? `splitter:${ctx.id}:label`,
38
38
  getPanelId: (ctx, id) => ctx.ids?.panel?.(id) ?? `splitter:${ctx.id}:panel:${id}`,
39
39
  globalCursorId: (ctx) => `splitter:${ctx.id}:global-cursor`,
40
- getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
40
+ getRootEl: (ctx) => dom.queryById(ctx, dom.getRootId(ctx)),
41
41
  getResizeTriggerEl: (ctx, id) => dom.getById(ctx, dom.getResizeTriggerId(ctx, id)),
42
42
  getPanelEl: (ctx, id) => dom.getById(ctx, dom.getPanelId(ctx, id)),
43
43
  getCursor(ctx) {
@@ -462,10 +462,15 @@ function machine(userContext) {
462
462
  setPointerValue(ctx2, evt) {
463
463
  const panels = getHandlePanels(ctx2);
464
464
  const bounds = getHandleBounds(ctx2);
465
- const rootEl = dom.getRootEl(ctx2);
466
- if (!panels || !rootEl || !bounds)
465
+ if (!panels || !bounds)
467
466
  return;
468
- let pointValue = (0, import_dom_event.getRelativePointPercent)(evt.point, rootEl).normalize(ctx2) * 100;
467
+ const rootEl = dom.getRootEl(ctx2);
468
+ const relativePoint = (0, import_dom_event.getRelativePoint)(evt.point, rootEl);
469
+ const percentValue = relativePoint.getPercentValue({
470
+ dir: ctx2.dir,
471
+ orientation: ctx2.orientation
472
+ });
473
+ let pointValue = percentValue * 100;
469
474
  ctx2.activeResizeState = {
470
475
  isAtMin: pointValue < bounds.min,
471
476
  isAtMax: pointValue > bounds.max
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  machine
3
- } from "./chunk-PI3URGYH.mjs";
4
- import "./chunk-G4OIUPPJ.mjs";
3
+ } from "./chunk-64C2WGI5.mjs";
4
+ import "./chunk-3GDOPT5W.mjs";
5
5
  import "./chunk-MV44GBQY.mjs";
6
6
  export {
7
7
  machine
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/splitter",
3
- "version": "0.0.0-dev-20230525221231",
3
+ "version": "0.0.0-dev-20230526205409",
4
4
  "description": "Core logic for the splitter widget implemented as a state machine",
5
5
  "keywords": [
6
6
  "js",
@@ -27,13 +27,13 @@
27
27
  "url": "https://github.com/chakra-ui/zag/issues"
28
28
  },
29
29
  "dependencies": {
30
- "@zag-js/anatomy": "0.0.0-dev-20230525221231",
31
- "@zag-js/core": "0.0.0-dev-20230525221231",
32
- "@zag-js/types": "0.0.0-dev-20230525221231",
33
- "@zag-js/dom-query": "0.0.0-dev-20230525221231",
34
- "@zag-js/dom-event": "0.0.0-dev-20230525221231",
35
- "@zag-js/number-utils": "0.0.0-dev-20230525221231",
36
- "@zag-js/utils": "0.0.0-dev-20230525221231"
30
+ "@zag-js/anatomy": "0.0.0-dev-20230526205409",
31
+ "@zag-js/core": "0.0.0-dev-20230526205409",
32
+ "@zag-js/types": "0.0.0-dev-20230526205409",
33
+ "@zag-js/dom-query": "0.0.0-dev-20230526205409",
34
+ "@zag-js/dom-event": "0.0.0-dev-20230526205409",
35
+ "@zag-js/number-utils": "0.0.0-dev-20230526205409",
36
+ "@zag-js/utils": "0.0.0-dev-20230526205409"
37
37
  },
38
38
  "devDependencies": {
39
39
  "clean-package": "2.2.0"