@window-splitter/state 0.2.2 → 0.2.3--canary.823a479.0

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 (43) hide show
  1. package/.tshy/commonjs.json +1 -0
  2. package/.tshy/esm.json +1 -0
  3. package/.tshy-build/esm/index.d.ts +327 -0
  4. package/.tshy-build/esm/index.d.ts.map +1 -0
  5. package/.tshy-build/esm/index.js +964 -0
  6. package/.tshy-build/esm/index.js.map +1 -0
  7. package/.tshy-build/esm/package.json +3 -0
  8. package/.turbo/turbo-build.log +1 -1
  9. package/.turbo/turbo-lint.log +1 -1
  10. package/.turbo/turbo-test.log +1023 -129
  11. package/coverage/clover.xml +358 -345
  12. package/coverage/coverage-final.json +1 -1
  13. package/coverage/index.html +18 -18
  14. package/coverage/index.ts.html +624 -402
  15. package/dist/commonjs/index.d.ts +22 -9
  16. package/dist/commonjs/index.d.ts.map +1 -1
  17. package/dist/commonjs/index.js +189 -134
  18. package/dist/commonjs/index.js.map +1 -1
  19. package/dist/esm/index.d.ts +22 -9
  20. package/dist/esm/index.d.ts.map +1 -1
  21. package/dist/esm/index.js +188 -114
  22. package/dist/esm/index.js.map +1 -1
  23. package/package.json +6 -6
  24. package/src/index.ts +279 -153
  25. package/src/machine.test.ts +174 -85
  26. package/src/package.json +3 -0
  27. package/src/utils.test.ts +22 -9
  28. package/dist/commonjs/machine.test.d.ts +0 -5
  29. package/dist/commonjs/machine.test.d.ts.map +0 -1
  30. package/dist/commonjs/machine.test.js +0 -1038
  31. package/dist/commonjs/machine.test.js.map +0 -1
  32. package/dist/commonjs/utils.test.d.ts +0 -2
  33. package/dist/commonjs/utils.test.d.ts.map +0 -1
  34. package/dist/commonjs/utils.test.js +0 -79
  35. package/dist/commonjs/utils.test.js.map +0 -1
  36. package/dist/esm/machine.test.d.ts +0 -5
  37. package/dist/esm/machine.test.d.ts.map +0 -1
  38. package/dist/esm/machine.test.js +0 -1036
  39. package/dist/esm/machine.test.js.map +0 -1
  40. package/dist/esm/utils.test.d.ts +0 -2
  41. package/dist/esm/utils.test.d.ts.map +0 -1
  42. package/dist/esm/utils.test.js +0 -77
  43. package/dist/esm/utils.test.js.map +0 -1
@@ -9,20 +9,16 @@ import {
9
9
  groupMachine,
10
10
  GroupMachineEvent,
11
11
  initializePanel,
12
+ initializePanelHandleData,
12
13
  isPanelHandle,
13
14
  } from "./index.js";
14
15
  import { Actor, createActor } from "xstate";
15
- // import { spring } from "framer-motion";
16
+ import { spring } from "framer-motion";
16
17
 
17
18
  function getTemplate(actor: Actor<typeof groupMachine>) {
18
19
  return buildTemplate(actor.getSnapshot().context);
19
20
  }
20
21
 
21
- const handleSize = {
22
- type: "pixel" as const,
23
- value: 10,
24
- };
25
-
26
22
  function dragHandle(
27
23
  actor: Actor<typeof groupMachine>,
28
24
  options: {
@@ -136,6 +132,17 @@ function initializeSizes(
136
132
  });
137
133
  }
138
134
 
135
+ function waitForCondition(condition: () => boolean) {
136
+ return new Promise<void>((resolve) => {
137
+ const interval = setInterval(() => {
138
+ if (condition()) {
139
+ clearInterval(interval);
140
+ resolve();
141
+ }
142
+ }, 100);
143
+ });
144
+ }
145
+
139
146
  describe("constraints", () => {
140
147
  test("works with 2 simple panels - horizontal", () => {
141
148
  const actor = createActor(groupMachine, {
@@ -146,7 +153,7 @@ describe("constraints", () => {
146
153
  { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
147
154
  {
148
155
  type: "registerPanelHandle",
149
- data: { id: "resizer-1", size: handleSize },
156
+ data: { id: "resizer-1", size: "10px" },
150
157
  },
151
158
  { type: "registerPanel", data: initializePanel({ id: "panel-2" }) },
152
159
  ]);
@@ -164,7 +171,7 @@ describe("constraints", () => {
164
171
  });
165
172
 
166
173
  expect(getTemplate(actor)).toMatchInlineSnapshot(
167
- `"minmax(0px, min(calc(0.5204081632653061 * (100% - 10px)), 100%)) 10px minmax(0px, min(calc(0.47959183673469385 * (100% - 10px)), 100%))"`
174
+ `"minmax(0px, min(calc(0.52040816326530612245 * (100% - 10px)), 100%)) 10px minmax(0px, min(calc(0.47959183673469387755 * (100% - 10px)), 100%))"`
168
175
  );
169
176
 
170
177
  // Drag the resizer to the left
@@ -175,7 +182,7 @@ describe("constraints", () => {
175
182
  });
176
183
 
177
184
  expect(getTemplate(actor)).toMatchInlineSnapshot(
178
- `"minmax(0px, min(calc(0.47959183673469385 * (100% - 10px)), 100%)) 10px minmax(0px, min(calc(0.5204081632653061 * (100% - 10px)), 100%))"`
185
+ `"minmax(0px, min(calc(0.47959183673469387755 * (100% - 10px)), 100%)) 10px minmax(0px, min(calc(0.52040816326530612245 * (100% - 10px)), 100%))"`
179
186
  );
180
187
  });
181
188
 
@@ -188,7 +195,7 @@ describe("constraints", () => {
188
195
  { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
189
196
  {
190
197
  type: "registerPanelHandle",
191
- data: { id: "resizer-1", size: handleSize },
198
+ data: { id: "resizer-1", size: "10px" },
192
199
  },
193
200
  { type: "registerPanel", data: initializePanel({ id: "panel-2" }) },
194
201
  ]);
@@ -210,7 +217,7 @@ describe("constraints", () => {
210
217
  });
211
218
 
212
219
  expect(getTemplate(actor)).toMatchInlineSnapshot(
213
- `"minmax(0px, min(calc(0.5204081632653061 * (100% - 10px)), 100%)) 10px minmax(0px, min(calc(0.47959183673469385 * (100% - 10px)), 100%))"`
220
+ `"minmax(0px, min(calc(0.52040816326530612245 * (100% - 10px)), 100%)) 10px minmax(0px, min(calc(0.47959183673469387755 * (100% - 10px)), 100%))"`
214
221
  );
215
222
 
216
223
  // Drag the resizer to the up
@@ -225,7 +232,7 @@ describe("constraints", () => {
225
232
  });
226
233
 
227
234
  expect(getTemplate(actor)).toMatchInlineSnapshot(
228
- `"minmax(0px, min(calc(0.47959183673469385 * (100% - 10px)), 100%)) 10px minmax(0px, min(calc(0.5204081632653061 * (100% - 10px)), 100%))"`
235
+ `"minmax(0px, min(calc(0.47959183673469387755 * (100% - 10px)), 100%)) 10px minmax(0px, min(calc(0.52040816326530612245 * (100% - 10px)), 100%))"`
229
236
  );
230
237
  });
231
238
 
@@ -251,11 +258,7 @@ describe("constraints", () => {
251
258
  groupId: "group",
252
259
  initialItems: [
253
260
  initializePanel({ id: "panel-1" }),
254
- {
255
- type: "handle",
256
- id: "resizer-1",
257
- size: { type: "pixel", value: 10 },
258
- },
261
+ initializePanelHandleData({ id: "resizer-1", size: "10px" }),
259
262
  initializePanel({ id: "panel-2" }),
260
263
  ],
261
264
  },
@@ -277,11 +280,7 @@ describe("constraints", () => {
277
280
  groupId: "group",
278
281
  initialItems: [
279
282
  initializePanel({ id: "panel-1" }),
280
- {
281
- type: "handle",
282
- id: "resizer-1",
283
- size: { type: "pixel", value: 10 },
284
- },
283
+ initializePanelHandleData({ id: "resizer-1", size: "10px" }),
285
284
  initializePanel({ id: "panel-2" }),
286
285
  ],
287
286
  },
@@ -305,11 +304,7 @@ describe("constraints", () => {
305
304
  groupId: "group",
306
305
  initialItems: [
307
306
  initializePanel({ id: "panel-1" }),
308
- {
309
- type: "handle",
310
- id: "resizer-1",
311
- size: { type: "pixel", value: 10 },
312
- },
307
+ initializePanelHandleData({ id: "resizer-1", size: "10px" }),
313
308
  initializePanel({ id: "panel-2" }),
314
309
  ],
315
310
  },
@@ -329,11 +324,7 @@ describe("constraints", () => {
329
324
  groupId: "group",
330
325
  initialItems: [
331
326
  initializePanel({ id: "panel-1", min: "40%" }),
332
- {
333
- type: "handle",
334
- id: "resizer-1",
335
- size: { type: "pixel", value: 10 },
336
- },
327
+ initializePanelHandleData({ id: "resizer-1", size: "10px" }),
337
328
  initializePanel({ id: "panel-2", min: "10%", default: "30%" }),
338
329
  ],
339
330
  },
@@ -357,11 +348,7 @@ describe("constraints", () => {
357
348
  groupId: "group",
358
349
  initialItems: [
359
350
  initializePanel({ id: "panel-1", max: "90%" }),
360
- {
361
- type: "handle",
362
- id: "resizer-1",
363
- size: { type: "pixel", value: 10 },
364
- },
351
+ initializePanelHandleData({ id: "resizer-1", size: "10px" }),
365
352
  initializePanel({ id: "panel-2", default: "30%" }),
366
353
  ],
367
354
  },
@@ -373,12 +360,9 @@ describe("constraints", () => {
373
360
  initializeSizes(actor, { width: 500, height: 200 });
374
361
 
375
362
  capturePixelValues(actor, () => {
376
- dragHandle(actor, { id: "resizer-1", delta: 400 });
363
+ dragHandle(actor, { id: "resizer-1", delta: 500 });
364
+ expect(getTemplate(actor)).toMatchInlineSnapshot(`"450px 10px 40px"`);
377
365
  });
378
-
379
- expect(getTemplate(actor)).toMatchInlineSnapshot(
380
- `"minmax(0px, min(calc(0.9183673469387755 * (100% - 10px)), 90%)) 10px minmax(0px, min(calc(0.08163265306122448 * (100% - 10px)), 100%))"`
381
- );
382
366
  });
383
367
 
384
368
  test("panel can have a min", () => {
@@ -390,7 +374,7 @@ describe("constraints", () => {
390
374
  { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
391
375
  {
392
376
  type: "registerPanelHandle",
393
- data: { id: "resizer-1", size: handleSize },
377
+ data: { id: "resizer-1", size: "10px" },
394
378
  },
395
379
  {
396
380
  type: "registerPanel",
@@ -419,7 +403,7 @@ describe("constraints", () => {
419
403
  { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
420
404
  {
421
405
  type: "registerPanelHandle",
422
- data: { id: "resizer-1", size: handleSize },
406
+ data: { id: "resizer-1", size: "10px" },
423
407
  },
424
408
  {
425
409
  type: "registerPanel",
@@ -450,7 +434,7 @@ describe("constraints", () => {
450
434
  { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
451
435
  {
452
436
  type: "registerPanelHandle",
453
- data: { id: "resizer-1", size: handleSize },
437
+ data: { id: "resizer-1", size: "10px" },
454
438
  },
455
439
  {
456
440
  type: "registerPanel",
@@ -460,7 +444,7 @@ describe("constraints", () => {
460
444
  initializeSizes(actor, { width: 500, height: 200 });
461
445
 
462
446
  expect(getTemplate(actor)).toMatchInlineSnapshot(
463
- `"minmax(0px, min(calc(1 * (100% - 310px)), 100%)) 10px minmax(0px, min(calc(1.5789473684210527 * (100% - 310px)), 100%))"`
447
+ `"minmax(0px, min(calc(1 * (100% - 310px)), 100%)) 10px minmax(0px, min(calc(1.57894736842105263158 * (100% - 310px)), 100%))"`
464
448
  );
465
449
 
466
450
  capturePixelValues(actor, () => {
@@ -477,7 +461,7 @@ describe("constraints", () => {
477
461
  { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
478
462
  {
479
463
  type: "registerPanelHandle",
480
- data: { id: "resizer-1", size: handleSize },
464
+ data: { id: "resizer-1", size: "10px" },
481
465
  },
482
466
  {
483
467
  type: "registerPanel",
@@ -489,7 +473,7 @@ describe("constraints", () => {
489
473
  },
490
474
  {
491
475
  type: "registerPanelHandle",
492
- data: { id: "resizer-2", size: handleSize },
476
+ data: { id: "resizer-2", size: "10px" },
493
477
  },
494
478
  {
495
479
  type: "registerPanel",
@@ -516,11 +500,7 @@ describe("constraints", () => {
516
500
  groupId: "group",
517
501
  initialItems: [
518
502
  initializePanel({ id: "panel-1" }),
519
- {
520
- type: "handle",
521
- id: "resizer-1",
522
- size: { type: "pixel", value: 10 },
523
- },
503
+ initializePanelHandleData({ id: "resizer-1", size: "10px" }),
524
504
  initializePanel({ id: "panel-2" }),
525
505
  ],
526
506
  },
@@ -557,7 +537,7 @@ describe("constraints", () => {
557
537
  { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
558
538
  {
559
539
  type: "registerPanelHandle",
560
- data: { id: "resizer-1", size: handleSize },
540
+ data: { id: "resizer-1", size: "10px" },
561
541
  },
562
542
  { type: "registerPanel", data: initializePanel({ id: "panel-2" }) },
563
543
  ]);
@@ -577,20 +557,19 @@ describe("constraints", () => {
577
557
  });
578
558
 
579
559
  describe("collapsible panel", () => {
580
- // const springAnimation = spring({
581
- // keyframes: [0, 1],
582
- // velocity: 1,
583
- // stiffness: 100,
584
- // damping: 10,
585
- // mass: 1.0,
586
- // });
587
- // const springEasing = (t: number) => springAnimation.next(t * 1000).value;
560
+ const springAnimation = spring({
561
+ keyframes: [0, 1],
562
+ velocity: 1,
563
+ stiffness: 100,
564
+ damping: 10,
565
+ mass: 1.0,
566
+ });
567
+ const springEasing = (t: number) => springAnimation.next(t * 1000).value;
588
568
 
589
569
  test.each([
590
570
  undefined,
591
571
  "ease-in-out" as const,
592
- // The math is wrong, enable after Decimal128
593
- // { duration: 1000, easing: springEasing },
572
+ { duration: 1000, easing: springEasing },
594
573
  ])("panel can be collapsible: %s", async (animation) => {
595
574
  const actor = createActor(groupMachine, {
596
575
  input: { groupId: "group" },
@@ -600,7 +579,7 @@ describe("collapsible panel", () => {
600
579
  { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
601
580
  {
602
581
  type: "registerPanelHandle",
603
- data: { id: "resizer-1", size: handleSize },
582
+ data: { id: "resizer-1", size: "10px" },
604
583
  },
605
584
  {
606
585
  type: "registerPanel",
@@ -654,6 +633,35 @@ describe("collapsible panel", () => {
654
633
  });
655
634
  });
656
635
 
636
+ test("throws when you collapse a panel and there are no handles", async () => {
637
+ const actor = createActor(groupMachine, {
638
+ input: {
639
+ groupId: "group",
640
+ initialItems: [initializePanel({ id: "panel-1" })],
641
+ },
642
+ }).start();
643
+
644
+ initializeSizes(actor, { width: 500, height: 200 });
645
+
646
+ const spy = vi.fn();
647
+ let didError = false;
648
+
649
+ actor.subscribe({
650
+ error: (e) => {
651
+ spy(e);
652
+ didError = true;
653
+ },
654
+ });
655
+
656
+ actor.send({ type: "collapsePanel", panelId: "panel-1" });
657
+
658
+ await waitForCondition(() => didError);
659
+
660
+ expect(spy).toHaveBeenCalledWith(
661
+ new Error("Cant find handle for panel: panel-1")
662
+ );
663
+ });
664
+
657
665
  test("collapsible panel can have collapsed size - right", async () => {
658
666
  const actor = createActor(groupMachine, {
659
667
  input: { groupId: "group" },
@@ -663,7 +671,7 @@ describe("collapsible panel", () => {
663
671
  { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
664
672
  {
665
673
  type: "registerPanelHandle",
666
- data: { id: "resizer-1", size: handleSize },
674
+ data: { id: "resizer-1", size: "10px" },
667
675
  },
668
676
  {
669
677
  type: "registerPanel",
@@ -703,6 +711,49 @@ describe("collapsible panel", () => {
703
711
  });
704
712
  });
705
713
 
714
+ test("non collapsible panels should have drag overflow too", async () => {
715
+ const actor = createActor(groupMachine, {
716
+ input: { groupId: "group" },
717
+ }).start();
718
+
719
+ sendAll(actor, [
720
+ { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
721
+ {
722
+ type: "registerPanelHandle",
723
+ data: { id: "resizer-1", size: "10px" },
724
+ },
725
+ {
726
+ type: "registerPanel",
727
+ data: initializePanel({
728
+ id: "panel-2",
729
+ default: "200px",
730
+ min: "200px",
731
+ }),
732
+ },
733
+ ]);
734
+
735
+ expect(getTemplate(actor)).toMatchInlineSnapshot(
736
+ `"minmax(0px, 1fr) 10px 200px"`
737
+ );
738
+ initializeSizes(actor, { width: 500, height: 200 });
739
+
740
+ capturePixelValues(actor, () => {
741
+ expect(getTemplate(actor)).toMatchInlineSnapshot(`"290px 10px 200px"`);
742
+
743
+ // Drag into the the panel
744
+ dragHandle(actor, { id: "resizer-1", delta: 50 });
745
+ expect(getTemplate(actor)).toMatchInlineSnapshot(`"290px 10px 200px"`);
746
+
747
+ // Drag into the start
748
+ dragHandle(actor, { id: "resizer-1", delta: -50 });
749
+ expect(getTemplate(actor)).toMatchInlineSnapshot(`"290px 10px 200px"`);
750
+
751
+ // Drag into the drag buffer but not past it
752
+ dragHandle(actor, { id: "resizer-1", delta: -25 });
753
+ expect(getTemplate(actor)).toMatchInlineSnapshot(`"265px 10px 225px"`);
754
+ });
755
+ });
756
+
706
757
  test("can expand default collapsed panel via event", async () => {
707
758
  const actor = createActor(groupMachine, {
708
759
  input: { groupId: "group" },
@@ -712,7 +763,7 @@ describe("collapsible panel", () => {
712
763
  { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
713
764
  {
714
765
  type: "registerPanelHandle",
715
- data: { id: "resizer-1", size: handleSize },
766
+ data: { id: "resizer-1", size: "10px" },
716
767
  },
717
768
  {
718
769
  type: "registerPanel",
@@ -753,7 +804,7 @@ describe("collapsible panel", () => {
753
804
  },
754
805
  {
755
806
  type: "registerPanelHandle",
756
- data: { id: "resizer-1", size: handleSize },
807
+ data: { id: "resizer-1", size: "10px" },
757
808
  },
758
809
  { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
759
810
  ]);
@@ -793,7 +844,7 @@ describe("collapsible panel", () => {
793
844
  { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
794
845
  {
795
846
  type: "registerPanelHandle",
796
- data: { id: "resizer-1", size: handleSize },
847
+ data: { id: "resizer-1", size: "10px" },
797
848
  },
798
849
  {
799
850
  type: "registerPanel",
@@ -840,7 +891,7 @@ describe("collapsible panel", () => {
840
891
  { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
841
892
  {
842
893
  type: "registerPanelHandle",
843
- data: { id: "resizer-1", size: handleSize },
894
+ data: { id: "resizer-1", size: "10px" },
844
895
  },
845
896
  {
846
897
  type: "registerPanel",
@@ -904,7 +955,7 @@ describe("collapsible panel", () => {
904
955
  { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
905
956
  {
906
957
  type: "registerPanelHandle",
907
- data: { id: "resizer-1", size: handleSize },
958
+ data: { id: "resizer-1", size: "10px" },
908
959
  },
909
960
  {
910
961
  type: "registerPanel",
@@ -952,7 +1003,7 @@ describe("collapsible panel", () => {
952
1003
  { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
953
1004
  {
954
1005
  type: "registerPanelHandle",
955
- data: { id: "resizer-1", size: handleSize },
1006
+ data: { id: "resizer-1", size: "10px" },
956
1007
  },
957
1008
  {
958
1009
  type: "registerPanel",
@@ -1013,25 +1064,25 @@ describe("collapsible panel", () => {
1013
1064
  panelId: "panel-2",
1014
1065
  controlled: true,
1015
1066
  });
1016
- expect(getTemplate(actor)).toMatchInlineSnapshot(`"319px 10px 171px"`);
1067
+ expect(getTemplate(actor)).toMatchInlineSnapshot(`"321px 10px 169px"`);
1017
1068
  });
1018
1069
 
1019
1070
  spy.mockReset();
1020
1071
 
1021
- actor.send({ type: "collapsePanel", panelId: "panel-2" });
1072
+ actor.send({ type: "collapsePanel", panelId: "panel-2", controlled: true });
1022
1073
  await waitForIdle(actor);
1023
1074
 
1024
1075
  // collapse the panel via drag
1025
1076
  capturePixelValues(actor, () => {
1026
- expect(getTemplate(actor)).toMatchInlineSnapshot(`"319px 10px 171px"`);
1077
+ expect(getTemplate(actor)).toMatchInlineSnapshot(`"470px 10px 20px"`);
1027
1078
  });
1028
1079
 
1029
- actor.send({ type: "expandPanel", panelId: "panel-2" });
1080
+ actor.send({ type: "expandPanel", panelId: "panel-2", controlled: true });
1030
1081
  await waitForIdle(actor);
1031
1082
 
1032
1083
  // collapse the panel via drag
1033
1084
  capturePixelValues(actor, () => {
1034
- expect(getTemplate(actor)).toMatchInlineSnapshot(`"319px 10px 171px"`);
1085
+ expect(getTemplate(actor)).toMatchInlineSnapshot(`"321px 10px 169px"`);
1035
1086
  });
1036
1087
  });
1037
1088
  });
@@ -1046,7 +1097,7 @@ describe("conditional panel", () => {
1046
1097
  { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
1047
1098
  {
1048
1099
  type: "registerPanelHandle",
1049
- data: { id: "resizer-1", size: handleSize },
1100
+ data: { id: "resizer-1", size: "10px" },
1050
1101
  },
1051
1102
  { type: "registerPanel", data: initializePanel({ id: "panel-2" }) },
1052
1103
  ]);
@@ -1060,7 +1111,7 @@ describe("conditional panel", () => {
1060
1111
  sendAll(actor, [
1061
1112
  {
1062
1113
  type: "registerPanelHandle",
1063
- data: { id: "resizer-2", size: handleSize },
1114
+ data: { id: "resizer-2", size: "10px" },
1064
1115
  },
1065
1116
  {
1066
1117
  type: "registerDynamicPanel",
@@ -1093,7 +1144,7 @@ describe("conditional panel", () => {
1093
1144
  { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
1094
1145
  {
1095
1146
  type: "registerPanelHandle",
1096
- data: { id: "resizer-1", size: handleSize },
1147
+ data: { id: "resizer-1", size: "10px" },
1097
1148
  },
1098
1149
  {
1099
1150
  type: "registerPanel",
@@ -1110,7 +1161,7 @@ describe("conditional panel", () => {
1110
1161
  sendAll(actor, [
1111
1162
  {
1112
1163
  type: "registerPanelHandle",
1113
- data: { id: "resizer-2", size: handleSize },
1164
+ data: { id: "resizer-2", size: "10px" },
1114
1165
  },
1115
1166
  {
1116
1167
  type: "registerDynamicPanel",
@@ -1148,7 +1199,7 @@ describe("conditional panel", () => {
1148
1199
  { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
1149
1200
  {
1150
1201
  type: "registerPanelHandle",
1151
- data: { id: "resizer-1", size: handleSize },
1202
+ data: { id: "resizer-1", size: "10px" },
1152
1203
  },
1153
1204
  {
1154
1205
  type: "registerPanel",
@@ -1165,7 +1216,7 @@ describe("conditional panel", () => {
1165
1216
  sendAll(actor, [
1166
1217
  {
1167
1218
  type: "registerPanelHandle",
1168
- data: { id: "resizer-2", size: handleSize },
1219
+ data: { id: "resizer-2", size: "10px" },
1169
1220
  },
1170
1221
  {
1171
1222
  type: "registerDynamicPanel",
@@ -1201,7 +1252,7 @@ describe("conditional panel", () => {
1201
1252
  { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
1202
1253
  {
1203
1254
  type: "registerPanelHandle",
1204
- data: { id: "resizer-1", size: handleSize },
1255
+ data: { id: "resizer-1", size: "10px" },
1205
1256
  },
1206
1257
  { type: "registerPanel", data: initializePanel({ id: "panel-2" }) },
1207
1258
  ]);
@@ -1215,7 +1266,7 @@ describe("conditional panel", () => {
1215
1266
  sendAll(actor, [
1216
1267
  {
1217
1268
  type: "registerPanelHandle",
1218
- data: { id: "resizer-2", size: handleSize, order: 1 },
1269
+ data: { id: "resizer-2", size: "10px", order: 1 },
1219
1270
  },
1220
1271
  {
1221
1272
  type: "registerDynamicPanel",
@@ -1250,6 +1301,44 @@ describe("conditional panel", () => {
1250
1301
  expect(getTemplate(actor)).toMatchInlineSnapshot(`"240px 10px 250px"`);
1251
1302
  });
1252
1303
  });
1304
+
1305
+ test("distributes space on both sides of dynamic panel as needed", async () => {
1306
+ const actor = createActor(groupMachine, {
1307
+ input: {
1308
+ groupId: "group",
1309
+ initialItems: [
1310
+ initializePanel({ id: "panel-1" }),
1311
+ initializePanelHandleData({ id: "resizer-1", size: "10px" }),
1312
+ initializePanel({ id: "panel-2", max: "50px" }),
1313
+ initializePanelHandleData({ id: "resizer-2", size: "10px" }),
1314
+ initializePanel({ id: "panel-3", default: "300px" }),
1315
+ initializePanelHandleData({ id: "resizer-3", size: "10px" }),
1316
+ initializePanel({ id: "panel-4", max: "50px" }),
1317
+ initializePanelHandleData({ id: "resizer-4", size: "10px" }),
1318
+ initializePanel({ id: "panel-5", max: "300px" }),
1319
+ ],
1320
+ },
1321
+ }).start();
1322
+
1323
+ initializeSizes(actor, { width: 500, height: 200 });
1324
+
1325
+ capturePixelValues(actor, () => {
1326
+ expect(getTemplate(actor)).toMatchInlineSnapshot(
1327
+ `"0px 10px 50px 10px 300px 10px 50px 10px 60px"`
1328
+ );
1329
+ });
1330
+
1331
+ sendAll(actor, [
1332
+ { type: "unregisterPanelHandle", id: "resizer-2" },
1333
+ { type: "unregisterPanel", id: "panel-3" },
1334
+ ]);
1335
+
1336
+ capturePixelValues(actor, () => {
1337
+ expect(getTemplate(actor)).toMatchInlineSnapshot(
1338
+ `"70px 10px 50px 10px 50px 10px 300px"`
1339
+ );
1340
+ });
1341
+ });
1253
1342
  });
1254
1343
 
1255
1344
  describe("errors", () => {
@@ -0,0 +1,3 @@
1
+ {
2
+ "type": "commonjs"
3
+ }
package/src/utils.test.ts CHANGED
@@ -7,18 +7,31 @@ import {
7
7
  initializePanel,
8
8
  } from "./index.js";
9
9
  import { createActor } from "xstate";
10
+ import Big from "big.js";
10
11
 
11
12
  describe("getUnitPercentageValue", () => {
12
13
  test("works with pixels", () => {
13
- expect(getUnitPercentageValue(100, { type: "pixel", value: 100 })).toBe(1);
14
- expect(getUnitPercentageValue(100, { type: "pixel", value: 50 })).toBe(0.5);
14
+ expect(
15
+ getUnitPercentageValue(100, { type: "pixel", value: new Big(100) })
16
+ ).toBe(1);
17
+ expect(
18
+ getUnitPercentageValue(100, { type: "pixel", value: new Big(50) })
19
+ ).toBe(0.5);
15
20
  });
16
21
 
17
22
  test("works with percentages", () => {
18
- expect(getUnitPercentageValue(100, { type: "percent", value: 1 })).toBe(1);
19
- expect(getUnitPercentageValue(100, { type: "percent", value: 0.5 })).toBe(
20
- 0.5
21
- );
23
+ expect(
24
+ getUnitPercentageValue(100, { type: "percent", value: new Big(1) })
25
+ ).toBe(1);
26
+ expect(
27
+ getUnitPercentageValue(100, { type: "percent", value: new Big(0.5) })
28
+ ).toBe(0.5);
29
+ });
30
+
31
+ test("works with 0", () => {
32
+ expect(
33
+ getUnitPercentageValue(0, { type: "pixel", value: new Big(1) })
34
+ ).toBe(0);
22
35
  });
23
36
  });
24
37
 
@@ -32,7 +45,7 @@ describe("getCollapsiblePanelForHandleId", () => {
32
45
  {
33
46
  type: "handle",
34
47
  id: "resizer-1",
35
- size: { type: "pixel", value: 10 },
48
+ size: { type: "pixel", value: new Big(10) },
36
49
  },
37
50
  initializePanel({ id: "panel-2" }),
38
51
  ],
@@ -54,7 +67,7 @@ describe("getCollapsiblePanelForHandleId", () => {
54
67
  {
55
68
  type: "handle",
56
69
  id: "resizer-1",
57
- size: { type: "pixel", value: 10 },
70
+ size: { type: "pixel", value: new Big(10) },
58
71
  },
59
72
  initializePanel({ id: "panel-2", collapsible: true }),
60
73
  ],
@@ -89,7 +102,7 @@ describe("getCollapsiblePanelForHandleId", () => {
89
102
  {
90
103
  type: "handle",
91
104
  id: "resizer-1",
92
- size: { type: "pixel", value: 10 },
105
+ size: { type: "pixel", value: new Big(10) },
93
106
  },
94
107
  ],
95
108
  },
@@ -1,5 +0,0 @@
1
- /**
2
- * @vitest-environment jsdom
3
- */
4
- export {};
5
- //# sourceMappingURL=machine.test.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"machine.test.d.ts","sourceRoot":"","sources":["../../src/machine.test.ts"],"names":[],"mappings":"AAAA;;GAEG"}