@zag-js/tabs 0.0.0-dev-20220714091855 → 0.0.0-dev-20220823143115

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 +177 -176
  2. package/dist/index.mjs +177 -176
  3. package/package.json +5 -5
package/dist/index.js CHANGED
@@ -103,9 +103,7 @@ function isFocusable(element) {
103
103
  }
104
104
  var rtlKeyMap = {
105
105
  ArrowLeft: "ArrowRight",
106
- ArrowRight: "ArrowLeft",
107
- Home: "End",
108
- End: "Home"
106
+ ArrowRight: "ArrowLeft"
109
107
  };
110
108
  var sameKeyMap = {
111
109
  Up: "ArrowUp",
@@ -382,199 +380,202 @@ function connect(state, send, normalize) {
382
380
  var import_core = require("@zag-js/core");
383
381
  var { not } = import_core.guards;
384
382
  function machine(ctx) {
385
- return (0, import_core.createMachine)({
386
- initial: "unknown",
387
- context: {
388
- dir: "ltr",
389
- orientation: "horizontal",
390
- activationMode: "automatic",
391
- value: null,
392
- focusedValue: null,
393
- previousValues: [],
394
- indicatorRect: { left: "0px", top: "0px", width: "0px", height: "0px" },
395
- hasMeasuredRect: false,
396
- isIndicatorRendered: false,
397
- loop: true,
398
- messages: {},
399
- ...ctx
400
- },
401
- computed: {
402
- isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
403
- isVertical: (ctx2) => ctx2.orientation === "vertical"
404
- },
405
- created: ["setPrevSelectedTabs"],
406
- watch: {
407
- focusedValue: "invokeOnFocus",
408
- value: ["invokeOnChange", "setPrevSelectedTabs", "setIndicatorRect", "setContentTabIndex"],
409
- dir: ["clearMeasured", "setIndicatorRect"]
410
- },
411
- on: {
412
- SET_VALUE: {
413
- actions: "setValue"
383
+ return (0, import_core.createMachine)(
384
+ {
385
+ initial: "unknown",
386
+ context: {
387
+ dir: "ltr",
388
+ orientation: "horizontal",
389
+ activationMode: "automatic",
390
+ value: null,
391
+ focusedValue: null,
392
+ previousValues: [],
393
+ indicatorRect: { left: "0px", top: "0px", width: "0px", height: "0px" },
394
+ hasMeasuredRect: false,
395
+ isIndicatorRendered: false,
396
+ loop: true,
397
+ messages: {},
398
+ ...ctx
414
399
  },
415
- DELETE: {
416
- actions: "deleteValue"
417
- }
418
- },
419
- states: {
420
- unknown: {
421
- on: {
422
- SETUP: {
423
- target: "idle",
424
- actions: ["checkRenderedElements", "setIndicatorRect", "setContentTabIndex"]
425
- }
426
- }
400
+ computed: {
401
+ isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
402
+ isVertical: (ctx2) => ctx2.orientation === "vertical"
427
403
  },
428
- idle: {
429
- on: {
430
- TAB_FOCUS: {
431
- guard: "selectOnFocus",
432
- target: "focused",
433
- actions: ["setFocusedValue", "setValue"]
434
- },
435
- TAB_CLICK: {
436
- target: "focused",
437
- actions: ["setFocusedValue", "setValue"]
438
- }
404
+ created: ["setPrevSelectedTabs"],
405
+ watch: {
406
+ focusedValue: "invokeOnFocus",
407
+ value: ["invokeOnChange", "setPrevSelectedTabs", "setIndicatorRect", "setContentTabIndex"],
408
+ dir: ["clearMeasured", "setIndicatorRect"]
409
+ },
410
+ on: {
411
+ SET_VALUE: {
412
+ actions: "setValue"
413
+ },
414
+ DELETE: {
415
+ actions: "deleteValue"
439
416
  }
440
417
  },
441
- focused: {
442
- on: {
443
- TAB_CLICK: {
444
- target: "focused",
445
- actions: ["setFocusedValue", "setValue"]
446
- },
447
- ARROW_LEFT: {
448
- guard: "isHorizontal",
449
- actions: "focusPrevTab"
450
- },
451
- ARROW_RIGHT: {
452
- guard: "isHorizontal",
453
- actions: "focusNextTab"
454
- },
455
- ARROW_UP: {
456
- guard: "isVertical",
457
- actions: "focusPrevTab"
458
- },
459
- ARROW_DOWN: {
460
- guard: "isVertical",
461
- actions: "focusNextTab"
462
- },
463
- HOME: {
464
- actions: "focusFirstTab"
465
- },
466
- END: {
467
- actions: "focusLastTab"
468
- },
469
- ENTER: {
470
- guard: not("selectOnFocus"),
471
- actions: "setValue"
472
- },
473
- TAB_FOCUS: [
474
- {
418
+ states: {
419
+ unknown: {
420
+ on: {
421
+ SETUP: {
422
+ target: "idle",
423
+ actions: ["checkRenderedElements", "setIndicatorRect", "setContentTabIndex"]
424
+ }
425
+ }
426
+ },
427
+ idle: {
428
+ on: {
429
+ TAB_FOCUS: {
475
430
  guard: "selectOnFocus",
431
+ target: "focused",
432
+ actions: ["setFocusedValue", "setValue"]
433
+ },
434
+ TAB_CLICK: {
435
+ target: "focused",
476
436
  actions: ["setFocusedValue", "setValue"]
437
+ }
438
+ }
439
+ },
440
+ focused: {
441
+ on: {
442
+ TAB_CLICK: {
443
+ target: "focused",
444
+ actions: ["setFocusedValue", "setValue"]
445
+ },
446
+ ARROW_LEFT: {
447
+ guard: "isHorizontal",
448
+ actions: "focusPrevTab"
477
449
  },
478
- { actions: "setFocusedValue" }
479
- ],
480
- TAB_BLUR: {
481
- target: "idle",
482
- actions: "clearFocusedValue"
450
+ ARROW_RIGHT: {
451
+ guard: "isHorizontal",
452
+ actions: "focusNextTab"
453
+ },
454
+ ARROW_UP: {
455
+ guard: "isVertical",
456
+ actions: "focusPrevTab"
457
+ },
458
+ ARROW_DOWN: {
459
+ guard: "isVertical",
460
+ actions: "focusNextTab"
461
+ },
462
+ HOME: {
463
+ actions: "focusFirstTab"
464
+ },
465
+ END: {
466
+ actions: "focusLastTab"
467
+ },
468
+ ENTER: {
469
+ guard: not("selectOnFocus"),
470
+ actions: "setValue"
471
+ },
472
+ TAB_FOCUS: [
473
+ {
474
+ guard: "selectOnFocus",
475
+ actions: ["setFocusedValue", "setValue"]
476
+ },
477
+ { actions: "setFocusedValue" }
478
+ ],
479
+ TAB_BLUR: {
480
+ target: "idle",
481
+ actions: "clearFocusedValue"
482
+ }
483
483
  }
484
484
  }
485
485
  }
486
- }
487
- }, {
488
- guards: {
489
- isVertical: (ctx2) => ctx2.isVertical,
490
- isHorizontal: (ctx2) => ctx2.isHorizontal,
491
- selectOnFocus: (ctx2) => ctx2.activationMode === "automatic"
492
486
  },
493
- actions: {
494
- setFocusedValue(ctx2, evt) {
495
- ctx2.focusedValue = evt.value;
496
- },
497
- clearFocusedValue(ctx2) {
498
- ctx2.focusedValue = null;
499
- },
500
- setValue(ctx2, evt) {
501
- ctx2.value = evt.value;
487
+ {
488
+ guards: {
489
+ isVertical: (ctx2) => ctx2.isVertical,
490
+ isHorizontal: (ctx2) => ctx2.isHorizontal,
491
+ selectOnFocus: (ctx2) => ctx2.activationMode === "automatic"
502
492
  },
503
- invokeOnDelete(ctx2, evt) {
504
- var _a;
505
- (_a = ctx2.onDelete) == null ? void 0 : _a.call(ctx2, { value: evt.value });
506
- },
507
- focusFirstTab(ctx2) {
508
- raf(() => {
509
- var _a;
510
- return (_a = dom.getFirstEl(ctx2)) == null ? void 0 : _a.focus();
511
- });
512
- },
513
- focusLastTab(ctx2) {
514
- raf(() => {
493
+ actions: {
494
+ setFocusedValue(ctx2, evt) {
495
+ ctx2.focusedValue = evt.value;
496
+ },
497
+ clearFocusedValue(ctx2) {
498
+ ctx2.focusedValue = null;
499
+ },
500
+ setValue(ctx2, evt) {
501
+ ctx2.value = evt.value;
502
+ },
503
+ invokeOnDelete(ctx2, evt) {
515
504
  var _a;
516
- return (_a = dom.getLastEl(ctx2)) == null ? void 0 : _a.focus();
517
- });
518
- },
519
- focusNextTab(ctx2) {
520
- if (!ctx2.focusedValue)
521
- return;
522
- const next = dom.getNextEl(ctx2, ctx2.focusedValue);
523
- raf(() => next == null ? void 0 : next.focus());
524
- },
525
- focusPrevTab(ctx2) {
526
- if (!ctx2.focusedValue)
527
- return;
528
- const prev = dom.getPrevEl(ctx2, ctx2.focusedValue);
529
- raf(() => prev == null ? void 0 : prev.focus());
530
- },
531
- setIndicatorRect(ctx2) {
532
- nextTick(() => {
533
- if (!ctx2.isIndicatorRendered || !ctx2.value)
505
+ (_a = ctx2.onDelete) == null ? void 0 : _a.call(ctx2, { value: evt.value });
506
+ },
507
+ focusFirstTab(ctx2) {
508
+ raf(() => {
509
+ var _a;
510
+ return (_a = dom.getFirstEl(ctx2)) == null ? void 0 : _a.focus();
511
+ });
512
+ },
513
+ focusLastTab(ctx2) {
514
+ raf(() => {
515
+ var _a;
516
+ return (_a = dom.getLastEl(ctx2)) == null ? void 0 : _a.focus();
517
+ });
518
+ },
519
+ focusNextTab(ctx2) {
520
+ if (!ctx2.focusedValue)
534
521
  return;
535
- ctx2.indicatorRect = dom.getRectById(ctx2, ctx2.value);
536
- if (ctx2.hasMeasuredRect)
522
+ const next = dom.getNextEl(ctx2, ctx2.focusedValue);
523
+ raf(() => next == null ? void 0 : next.focus());
524
+ },
525
+ focusPrevTab(ctx2) {
526
+ if (!ctx2.focusedValue)
537
527
  return;
528
+ const prev = dom.getPrevEl(ctx2, ctx2.focusedValue);
529
+ raf(() => prev == null ? void 0 : prev.focus());
530
+ },
531
+ setIndicatorRect(ctx2) {
538
532
  nextTick(() => {
539
- ctx2.hasMeasuredRect = true;
533
+ if (!ctx2.isIndicatorRendered || !ctx2.value)
534
+ return;
535
+ ctx2.indicatorRect = dom.getRectById(ctx2, ctx2.value);
536
+ if (ctx2.hasMeasuredRect)
537
+ return;
538
+ nextTick(() => {
539
+ ctx2.hasMeasuredRect = true;
540
+ });
540
541
  });
541
- });
542
- },
543
- checkRenderedElements(ctx2) {
544
- ctx2.isIndicatorRendered = !!dom.getIndicatorEl(ctx2);
545
- },
546
- clearMeasured(ctx2) {
547
- ctx2.hasMeasuredRect = false;
548
- },
549
- invokeOnChange(ctx2) {
550
- var _a;
551
- (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
552
- },
553
- invokeOnFocus(ctx2) {
554
- var _a;
555
- (_a = ctx2.onFocus) == null ? void 0 : _a.call(ctx2, { value: ctx2.focusedValue });
556
- },
557
- setPrevSelectedTabs(ctx2) {
558
- if (ctx2.value != null) {
559
- const newSelected = Array.from(ctx2.previousValues).concat(ctx2.value);
560
- ctx2.previousValues = Array.from(new Set(newSelected));
561
- }
562
- },
563
- setContentTabIndex(ctx2) {
564
- raf(() => {
565
- const panel = dom.getActiveContentEl(ctx2);
566
- if (!panel)
567
- return;
568
- const focusables = getFocusables(panel);
569
- if (focusables.length > 0) {
570
- panel.removeAttribute("tabindex");
571
- } else {
572
- panel.setAttribute("tabindex", "0");
542
+ },
543
+ checkRenderedElements(ctx2) {
544
+ ctx2.isIndicatorRendered = !!dom.getIndicatorEl(ctx2);
545
+ },
546
+ clearMeasured(ctx2) {
547
+ ctx2.hasMeasuredRect = false;
548
+ },
549
+ invokeOnChange(ctx2) {
550
+ var _a;
551
+ (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
552
+ },
553
+ invokeOnFocus(ctx2) {
554
+ var _a;
555
+ (_a = ctx2.onFocus) == null ? void 0 : _a.call(ctx2, { value: ctx2.focusedValue });
556
+ },
557
+ setPrevSelectedTabs(ctx2) {
558
+ if (ctx2.value != null) {
559
+ const newSelected = Array.from(ctx2.previousValues).concat(ctx2.value);
560
+ ctx2.previousValues = Array.from(new Set(newSelected));
573
561
  }
574
- });
562
+ },
563
+ setContentTabIndex(ctx2) {
564
+ raf(() => {
565
+ const panel = dom.getActiveContentEl(ctx2);
566
+ if (!panel)
567
+ return;
568
+ const focusables = getFocusables(panel);
569
+ if (focusables.length > 0) {
570
+ panel.removeAttribute("tabindex");
571
+ } else {
572
+ panel.setAttribute("tabindex", "0");
573
+ }
574
+ });
575
+ }
575
576
  }
576
577
  }
577
- });
578
+ );
578
579
  }
579
580
  // Annotate the CommonJS export names for ESM import in node:
580
581
  0 && (module.exports = {
package/dist/index.mjs CHANGED
@@ -76,9 +76,7 @@ function isFocusable(element) {
76
76
  }
77
77
  var rtlKeyMap = {
78
78
  ArrowLeft: "ArrowRight",
79
- ArrowRight: "ArrowLeft",
80
- Home: "End",
81
- End: "Home"
79
+ ArrowRight: "ArrowLeft"
82
80
  };
83
81
  var sameKeyMap = {
84
82
  Up: "ArrowUp",
@@ -355,199 +353,202 @@ function connect(state, send, normalize) {
355
353
  import { createMachine, guards } from "@zag-js/core";
356
354
  var { not } = guards;
357
355
  function machine(ctx) {
358
- return createMachine({
359
- initial: "unknown",
360
- context: {
361
- dir: "ltr",
362
- orientation: "horizontal",
363
- activationMode: "automatic",
364
- value: null,
365
- focusedValue: null,
366
- previousValues: [],
367
- indicatorRect: { left: "0px", top: "0px", width: "0px", height: "0px" },
368
- hasMeasuredRect: false,
369
- isIndicatorRendered: false,
370
- loop: true,
371
- messages: {},
372
- ...ctx
373
- },
374
- computed: {
375
- isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
376
- isVertical: (ctx2) => ctx2.orientation === "vertical"
377
- },
378
- created: ["setPrevSelectedTabs"],
379
- watch: {
380
- focusedValue: "invokeOnFocus",
381
- value: ["invokeOnChange", "setPrevSelectedTabs", "setIndicatorRect", "setContentTabIndex"],
382
- dir: ["clearMeasured", "setIndicatorRect"]
383
- },
384
- on: {
385
- SET_VALUE: {
386
- actions: "setValue"
356
+ return createMachine(
357
+ {
358
+ initial: "unknown",
359
+ context: {
360
+ dir: "ltr",
361
+ orientation: "horizontal",
362
+ activationMode: "automatic",
363
+ value: null,
364
+ focusedValue: null,
365
+ previousValues: [],
366
+ indicatorRect: { left: "0px", top: "0px", width: "0px", height: "0px" },
367
+ hasMeasuredRect: false,
368
+ isIndicatorRendered: false,
369
+ loop: true,
370
+ messages: {},
371
+ ...ctx
387
372
  },
388
- DELETE: {
389
- actions: "deleteValue"
390
- }
391
- },
392
- states: {
393
- unknown: {
394
- on: {
395
- SETUP: {
396
- target: "idle",
397
- actions: ["checkRenderedElements", "setIndicatorRect", "setContentTabIndex"]
398
- }
399
- }
373
+ computed: {
374
+ isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
375
+ isVertical: (ctx2) => ctx2.orientation === "vertical"
400
376
  },
401
- idle: {
402
- on: {
403
- TAB_FOCUS: {
404
- guard: "selectOnFocus",
405
- target: "focused",
406
- actions: ["setFocusedValue", "setValue"]
407
- },
408
- TAB_CLICK: {
409
- target: "focused",
410
- actions: ["setFocusedValue", "setValue"]
411
- }
377
+ created: ["setPrevSelectedTabs"],
378
+ watch: {
379
+ focusedValue: "invokeOnFocus",
380
+ value: ["invokeOnChange", "setPrevSelectedTabs", "setIndicatorRect", "setContentTabIndex"],
381
+ dir: ["clearMeasured", "setIndicatorRect"]
382
+ },
383
+ on: {
384
+ SET_VALUE: {
385
+ actions: "setValue"
386
+ },
387
+ DELETE: {
388
+ actions: "deleteValue"
412
389
  }
413
390
  },
414
- focused: {
415
- on: {
416
- TAB_CLICK: {
417
- target: "focused",
418
- actions: ["setFocusedValue", "setValue"]
419
- },
420
- ARROW_LEFT: {
421
- guard: "isHorizontal",
422
- actions: "focusPrevTab"
423
- },
424
- ARROW_RIGHT: {
425
- guard: "isHorizontal",
426
- actions: "focusNextTab"
427
- },
428
- ARROW_UP: {
429
- guard: "isVertical",
430
- actions: "focusPrevTab"
431
- },
432
- ARROW_DOWN: {
433
- guard: "isVertical",
434
- actions: "focusNextTab"
435
- },
436
- HOME: {
437
- actions: "focusFirstTab"
438
- },
439
- END: {
440
- actions: "focusLastTab"
441
- },
442
- ENTER: {
443
- guard: not("selectOnFocus"),
444
- actions: "setValue"
445
- },
446
- TAB_FOCUS: [
447
- {
391
+ states: {
392
+ unknown: {
393
+ on: {
394
+ SETUP: {
395
+ target: "idle",
396
+ actions: ["checkRenderedElements", "setIndicatorRect", "setContentTabIndex"]
397
+ }
398
+ }
399
+ },
400
+ idle: {
401
+ on: {
402
+ TAB_FOCUS: {
448
403
  guard: "selectOnFocus",
404
+ target: "focused",
405
+ actions: ["setFocusedValue", "setValue"]
406
+ },
407
+ TAB_CLICK: {
408
+ target: "focused",
449
409
  actions: ["setFocusedValue", "setValue"]
410
+ }
411
+ }
412
+ },
413
+ focused: {
414
+ on: {
415
+ TAB_CLICK: {
416
+ target: "focused",
417
+ actions: ["setFocusedValue", "setValue"]
418
+ },
419
+ ARROW_LEFT: {
420
+ guard: "isHorizontal",
421
+ actions: "focusPrevTab"
450
422
  },
451
- { actions: "setFocusedValue" }
452
- ],
453
- TAB_BLUR: {
454
- target: "idle",
455
- actions: "clearFocusedValue"
423
+ ARROW_RIGHT: {
424
+ guard: "isHorizontal",
425
+ actions: "focusNextTab"
426
+ },
427
+ ARROW_UP: {
428
+ guard: "isVertical",
429
+ actions: "focusPrevTab"
430
+ },
431
+ ARROW_DOWN: {
432
+ guard: "isVertical",
433
+ actions: "focusNextTab"
434
+ },
435
+ HOME: {
436
+ actions: "focusFirstTab"
437
+ },
438
+ END: {
439
+ actions: "focusLastTab"
440
+ },
441
+ ENTER: {
442
+ guard: not("selectOnFocus"),
443
+ actions: "setValue"
444
+ },
445
+ TAB_FOCUS: [
446
+ {
447
+ guard: "selectOnFocus",
448
+ actions: ["setFocusedValue", "setValue"]
449
+ },
450
+ { actions: "setFocusedValue" }
451
+ ],
452
+ TAB_BLUR: {
453
+ target: "idle",
454
+ actions: "clearFocusedValue"
455
+ }
456
456
  }
457
457
  }
458
458
  }
459
- }
460
- }, {
461
- guards: {
462
- isVertical: (ctx2) => ctx2.isVertical,
463
- isHorizontal: (ctx2) => ctx2.isHorizontal,
464
- selectOnFocus: (ctx2) => ctx2.activationMode === "automatic"
465
459
  },
466
- actions: {
467
- setFocusedValue(ctx2, evt) {
468
- ctx2.focusedValue = evt.value;
469
- },
470
- clearFocusedValue(ctx2) {
471
- ctx2.focusedValue = null;
472
- },
473
- setValue(ctx2, evt) {
474
- ctx2.value = evt.value;
460
+ {
461
+ guards: {
462
+ isVertical: (ctx2) => ctx2.isVertical,
463
+ isHorizontal: (ctx2) => ctx2.isHorizontal,
464
+ selectOnFocus: (ctx2) => ctx2.activationMode === "automatic"
475
465
  },
476
- invokeOnDelete(ctx2, evt) {
477
- var _a;
478
- (_a = ctx2.onDelete) == null ? void 0 : _a.call(ctx2, { value: evt.value });
479
- },
480
- focusFirstTab(ctx2) {
481
- raf(() => {
482
- var _a;
483
- return (_a = dom.getFirstEl(ctx2)) == null ? void 0 : _a.focus();
484
- });
485
- },
486
- focusLastTab(ctx2) {
487
- raf(() => {
466
+ actions: {
467
+ setFocusedValue(ctx2, evt) {
468
+ ctx2.focusedValue = evt.value;
469
+ },
470
+ clearFocusedValue(ctx2) {
471
+ ctx2.focusedValue = null;
472
+ },
473
+ setValue(ctx2, evt) {
474
+ ctx2.value = evt.value;
475
+ },
476
+ invokeOnDelete(ctx2, evt) {
488
477
  var _a;
489
- return (_a = dom.getLastEl(ctx2)) == null ? void 0 : _a.focus();
490
- });
491
- },
492
- focusNextTab(ctx2) {
493
- if (!ctx2.focusedValue)
494
- return;
495
- const next = dom.getNextEl(ctx2, ctx2.focusedValue);
496
- raf(() => next == null ? void 0 : next.focus());
497
- },
498
- focusPrevTab(ctx2) {
499
- if (!ctx2.focusedValue)
500
- return;
501
- const prev = dom.getPrevEl(ctx2, ctx2.focusedValue);
502
- raf(() => prev == null ? void 0 : prev.focus());
503
- },
504
- setIndicatorRect(ctx2) {
505
- nextTick(() => {
506
- if (!ctx2.isIndicatorRendered || !ctx2.value)
478
+ (_a = ctx2.onDelete) == null ? void 0 : _a.call(ctx2, { value: evt.value });
479
+ },
480
+ focusFirstTab(ctx2) {
481
+ raf(() => {
482
+ var _a;
483
+ return (_a = dom.getFirstEl(ctx2)) == null ? void 0 : _a.focus();
484
+ });
485
+ },
486
+ focusLastTab(ctx2) {
487
+ raf(() => {
488
+ var _a;
489
+ return (_a = dom.getLastEl(ctx2)) == null ? void 0 : _a.focus();
490
+ });
491
+ },
492
+ focusNextTab(ctx2) {
493
+ if (!ctx2.focusedValue)
507
494
  return;
508
- ctx2.indicatorRect = dom.getRectById(ctx2, ctx2.value);
509
- if (ctx2.hasMeasuredRect)
495
+ const next = dom.getNextEl(ctx2, ctx2.focusedValue);
496
+ raf(() => next == null ? void 0 : next.focus());
497
+ },
498
+ focusPrevTab(ctx2) {
499
+ if (!ctx2.focusedValue)
510
500
  return;
501
+ const prev = dom.getPrevEl(ctx2, ctx2.focusedValue);
502
+ raf(() => prev == null ? void 0 : prev.focus());
503
+ },
504
+ setIndicatorRect(ctx2) {
511
505
  nextTick(() => {
512
- ctx2.hasMeasuredRect = true;
506
+ if (!ctx2.isIndicatorRendered || !ctx2.value)
507
+ return;
508
+ ctx2.indicatorRect = dom.getRectById(ctx2, ctx2.value);
509
+ if (ctx2.hasMeasuredRect)
510
+ return;
511
+ nextTick(() => {
512
+ ctx2.hasMeasuredRect = true;
513
+ });
513
514
  });
514
- });
515
- },
516
- checkRenderedElements(ctx2) {
517
- ctx2.isIndicatorRendered = !!dom.getIndicatorEl(ctx2);
518
- },
519
- clearMeasured(ctx2) {
520
- ctx2.hasMeasuredRect = false;
521
- },
522
- invokeOnChange(ctx2) {
523
- var _a;
524
- (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
525
- },
526
- invokeOnFocus(ctx2) {
527
- var _a;
528
- (_a = ctx2.onFocus) == null ? void 0 : _a.call(ctx2, { value: ctx2.focusedValue });
529
- },
530
- setPrevSelectedTabs(ctx2) {
531
- if (ctx2.value != null) {
532
- const newSelected = Array.from(ctx2.previousValues).concat(ctx2.value);
533
- ctx2.previousValues = Array.from(new Set(newSelected));
534
- }
535
- },
536
- setContentTabIndex(ctx2) {
537
- raf(() => {
538
- const panel = dom.getActiveContentEl(ctx2);
539
- if (!panel)
540
- return;
541
- const focusables = getFocusables(panel);
542
- if (focusables.length > 0) {
543
- panel.removeAttribute("tabindex");
544
- } else {
545
- panel.setAttribute("tabindex", "0");
515
+ },
516
+ checkRenderedElements(ctx2) {
517
+ ctx2.isIndicatorRendered = !!dom.getIndicatorEl(ctx2);
518
+ },
519
+ clearMeasured(ctx2) {
520
+ ctx2.hasMeasuredRect = false;
521
+ },
522
+ invokeOnChange(ctx2) {
523
+ var _a;
524
+ (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
525
+ },
526
+ invokeOnFocus(ctx2) {
527
+ var _a;
528
+ (_a = ctx2.onFocus) == null ? void 0 : _a.call(ctx2, { value: ctx2.focusedValue });
529
+ },
530
+ setPrevSelectedTabs(ctx2) {
531
+ if (ctx2.value != null) {
532
+ const newSelected = Array.from(ctx2.previousValues).concat(ctx2.value);
533
+ ctx2.previousValues = Array.from(new Set(newSelected));
546
534
  }
547
- });
535
+ },
536
+ setContentTabIndex(ctx2) {
537
+ raf(() => {
538
+ const panel = dom.getActiveContentEl(ctx2);
539
+ if (!panel)
540
+ return;
541
+ const focusables = getFocusables(panel);
542
+ if (focusables.length > 0) {
543
+ panel.removeAttribute("tabindex");
544
+ } else {
545
+ panel.setAttribute("tabindex", "0");
546
+ }
547
+ });
548
+ }
548
549
  }
549
550
  }
550
- });
551
+ );
551
552
  }
552
553
  export {
553
554
  connect,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/tabs",
3
- "version": "0.0.0-dev-20220714091855",
3
+ "version": "0.0.0-dev-20220823143115",
4
4
  "description": "Core logic for the tabs widget implemented as a state machine",
5
5
  "keywords": [
6
6
  "js",
@@ -29,12 +29,12 @@
29
29
  "url": "https://github.com/chakra-ui/zag/issues"
30
30
  },
31
31
  "dependencies": {
32
- "@zag-js/core": "0.0.0-dev-20220714091855",
33
- "@zag-js/types": "0.0.0-dev-20220714091855"
32
+ "@zag-js/core": "0.0.0-dev-20220823143115",
33
+ "@zag-js/types": "0.2.4"
34
34
  },
35
35
  "devDependencies": {
36
- "@zag-js/dom-utils": "0.0.0-dev-20220714091855",
37
- "@zag-js/utils": "0.0.0-dev-20220714091855"
36
+ "@zag-js/dom-utils": "0.0.0-dev-20220823143115",
37
+ "@zag-js/utils": "0.1.3"
38
38
  },
39
39
  "scripts": {
40
40
  "build-fast": "tsup src/index.ts --format=esm,cjs",