@zag-js/tabs 0.0.0-dev-20220628115342 → 0.0.0-dev-20220703193942

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 +44 -79
  2. package/dist/index.mjs +44 -79
  3. package/package.json +4 -4
package/dist/index.js CHANGED
@@ -43,94 +43,40 @@ module.exports = __toCommonJS(src_exports);
43
43
  var dataAttr = (guard) => {
44
44
  return guard ? "" : void 0;
45
45
  };
46
- function nextTick(fn) {
47
- const set = /* @__PURE__ */ new Set();
48
- function raf2(fn2) {
49
- const id = globalThis.requestAnimationFrame(fn2);
50
- set.add(() => globalThis.cancelAnimationFrame(id));
51
- }
52
- raf2(() => raf2(fn));
53
- return function cleanup() {
54
- set.forEach(function(fn2) {
55
- fn2();
56
- });
57
- };
58
- }
59
- function raf(fn) {
60
- const id = globalThis.requestAnimationFrame(fn);
61
- return function cleanup() {
62
- globalThis.cancelAnimationFrame(id);
63
- };
64
- }
65
- function getCache() {
66
- const g = globalThis;
67
- g.__styleCache__ = g.__styleCache__ || /* @__PURE__ */ new WeakMap();
68
- return g.__styleCache__;
69
- }
70
- function getComputedStyle(el) {
71
- var _a;
72
- if (!el)
73
- return {};
74
- const cache = getCache();
75
- let style = cache.get(el);
76
- if (!style) {
77
- const win = (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
78
- style = win.getComputedStyle(el);
79
- cache.set(el, style);
80
- }
81
- return style;
46
+ function isFrame(element) {
47
+ return element.localName === "iframe";
82
48
  }
83
49
  function isHTMLElement(v) {
84
50
  return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
85
51
  }
86
- var isDisabled = (el) => {
87
- return (el == null ? void 0 : el.getAttribute("disabled")) != null || !!(el == null ? void 0 : el.getAttribute("aria-disabled")) === true;
88
- };
89
- var focusableSelector = /* @__PURE__ */ [
90
- "input:not([disabled]):not([type=hidden])",
91
- "select:not([disabled])",
92
- "textarea:not([disabled])",
93
- "button:not([disabled])",
94
- "embed",
95
- "iframe",
96
- "object",
97
- "a[href]",
98
- "area[href]",
99
- "[tabindex]",
100
- "audio[controls]",
101
- "video[controls]",
102
- "*[tabindex]:not([aria-disabled])",
103
- "[contenteditable]:not([contenteditable=false])",
104
- "details > summary:first-of-type"
105
- ].join(",");
106
- function isHidden(el, until) {
107
- const style = getComputedStyle(el);
108
- if (!el || style.getPropertyValue("visibility") === "hidden")
109
- return true;
110
- while (el) {
111
- if (until != null && el === until)
112
- return false;
113
- if (style.getPropertyValue("display") === "none")
114
- return true;
115
- el = el.parentElement;
116
- }
117
- return false;
52
+ function isVisible(el) {
53
+ if (!isHTMLElement(el))
54
+ return false;
55
+ return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
118
56
  }
119
- var getFocusables = (el, includeContainer = false) => {
120
- if (!el)
57
+ var focusableSelector = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false']), details > summary:first-of-type";
58
+ var getFocusables = (container, includeContainer = false) => {
59
+ if (!container)
121
60
  return [];
122
- let els = Array.from(el.querySelectorAll(focusableSelector));
123
- const shouldAddContainer = includeContainer == true || includeContainer == "if-empty" && els.length === 0;
124
- if (shouldAddContainer && isHTMLElement(el)) {
125
- els.unshift(el);
61
+ const elements = Array.from(container.querySelectorAll(focusableSelector));
62
+ const include = includeContainer == true || includeContainer == "if-empty" && elements.length === 0;
63
+ if (include && isHTMLElement(container) && isFocusable(container)) {
64
+ elements.unshift(container);
126
65
  }
127
- return els.filter((el2) => isFocusable(el2) && !isHidden(el2));
66
+ const focusableElements = elements.filter(isFocusable);
67
+ focusableElements.forEach((element, i) => {
68
+ if (isFrame(element) && element.contentDocument) {
69
+ const frameBody = element.contentDocument.body;
70
+ focusableElements.splice(i, 1, ...getFocusables(frameBody));
71
+ }
72
+ });
73
+ return focusableElements;
128
74
  };
129
- var isFocusable = (el) => {
130
- if (!isHTMLElement(el) || isHidden(el) || isDisabled(el))
75
+ function isFocusable(element) {
76
+ if (!element)
131
77
  return false;
132
- return el == null ? void 0 : el.matches(focusableSelector);
133
- };
78
+ return element.matches(focusableSelector) && isVisible(element);
79
+ }
134
80
  var rtlKeyMap = {
135
81
  ArrowLeft: "ArrowRight",
136
82
  ArrowRight: "ArrowLeft",
@@ -157,6 +103,25 @@ function getEventKey(event, options = {}) {
157
103
  }
158
104
  return key;
159
105
  }
106
+ function nextTick(fn) {
107
+ const set = /* @__PURE__ */ new Set();
108
+ function raf2(fn2) {
109
+ const id = globalThis.requestAnimationFrame(fn2);
110
+ set.add(() => globalThis.cancelAnimationFrame(id));
111
+ }
112
+ raf2(() => raf2(fn));
113
+ return function cleanup() {
114
+ set.forEach(function(fn2) {
115
+ fn2();
116
+ });
117
+ };
118
+ }
119
+ function raf(fn) {
120
+ const id = globalThis.requestAnimationFrame(fn);
121
+ return function cleanup() {
122
+ globalThis.cancelAnimationFrame(id);
123
+ };
124
+ }
160
125
  function queryAll(root, selector) {
161
126
  var _a;
162
127
  return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
package/dist/index.mjs CHANGED
@@ -20,94 +20,40 @@ var __spreadValues = (a, b) => {
20
20
  var dataAttr = (guard) => {
21
21
  return guard ? "" : void 0;
22
22
  };
23
- function nextTick(fn) {
24
- const set = /* @__PURE__ */ new Set();
25
- function raf2(fn2) {
26
- const id = globalThis.requestAnimationFrame(fn2);
27
- set.add(() => globalThis.cancelAnimationFrame(id));
28
- }
29
- raf2(() => raf2(fn));
30
- return function cleanup() {
31
- set.forEach(function(fn2) {
32
- fn2();
33
- });
34
- };
35
- }
36
- function raf(fn) {
37
- const id = globalThis.requestAnimationFrame(fn);
38
- return function cleanup() {
39
- globalThis.cancelAnimationFrame(id);
40
- };
41
- }
42
- function getCache() {
43
- const g = globalThis;
44
- g.__styleCache__ = g.__styleCache__ || /* @__PURE__ */ new WeakMap();
45
- return g.__styleCache__;
46
- }
47
- function getComputedStyle(el) {
48
- var _a;
49
- if (!el)
50
- return {};
51
- const cache = getCache();
52
- let style = cache.get(el);
53
- if (!style) {
54
- const win = (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
55
- style = win.getComputedStyle(el);
56
- cache.set(el, style);
57
- }
58
- return style;
23
+ function isFrame(element) {
24
+ return element.localName === "iframe";
59
25
  }
60
26
  function isHTMLElement(v) {
61
27
  return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
62
28
  }
63
- var isDisabled = (el) => {
64
- return (el == null ? void 0 : el.getAttribute("disabled")) != null || !!(el == null ? void 0 : el.getAttribute("aria-disabled")) === true;
65
- };
66
- var focusableSelector = /* @__PURE__ */ [
67
- "input:not([disabled]):not([type=hidden])",
68
- "select:not([disabled])",
69
- "textarea:not([disabled])",
70
- "button:not([disabled])",
71
- "embed",
72
- "iframe",
73
- "object",
74
- "a[href]",
75
- "area[href]",
76
- "[tabindex]",
77
- "audio[controls]",
78
- "video[controls]",
79
- "*[tabindex]:not([aria-disabled])",
80
- "[contenteditable]:not([contenteditable=false])",
81
- "details > summary:first-of-type"
82
- ].join(",");
83
- function isHidden(el, until) {
84
- const style = getComputedStyle(el);
85
- if (!el || style.getPropertyValue("visibility") === "hidden")
86
- return true;
87
- while (el) {
88
- if (until != null && el === until)
89
- return false;
90
- if (style.getPropertyValue("display") === "none")
91
- return true;
92
- el = el.parentElement;
93
- }
94
- return false;
29
+ function isVisible(el) {
30
+ if (!isHTMLElement(el))
31
+ return false;
32
+ return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
95
33
  }
96
- var getFocusables = (el, includeContainer = false) => {
97
- if (!el)
34
+ var focusableSelector = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false']), details > summary:first-of-type";
35
+ var getFocusables = (container, includeContainer = false) => {
36
+ if (!container)
98
37
  return [];
99
- let els = Array.from(el.querySelectorAll(focusableSelector));
100
- const shouldAddContainer = includeContainer == true || includeContainer == "if-empty" && els.length === 0;
101
- if (shouldAddContainer && isHTMLElement(el)) {
102
- els.unshift(el);
38
+ const elements = Array.from(container.querySelectorAll(focusableSelector));
39
+ const include = includeContainer == true || includeContainer == "if-empty" && elements.length === 0;
40
+ if (include && isHTMLElement(container) && isFocusable(container)) {
41
+ elements.unshift(container);
103
42
  }
104
- return els.filter((el2) => isFocusable(el2) && !isHidden(el2));
43
+ const focusableElements = elements.filter(isFocusable);
44
+ focusableElements.forEach((element, i) => {
45
+ if (isFrame(element) && element.contentDocument) {
46
+ const frameBody = element.contentDocument.body;
47
+ focusableElements.splice(i, 1, ...getFocusables(frameBody));
48
+ }
49
+ });
50
+ return focusableElements;
105
51
  };
106
- var isFocusable = (el) => {
107
- if (!isHTMLElement(el) || isHidden(el) || isDisabled(el))
52
+ function isFocusable(element) {
53
+ if (!element)
108
54
  return false;
109
- return el == null ? void 0 : el.matches(focusableSelector);
110
- };
55
+ return element.matches(focusableSelector) && isVisible(element);
56
+ }
111
57
  var rtlKeyMap = {
112
58
  ArrowLeft: "ArrowRight",
113
59
  ArrowRight: "ArrowLeft",
@@ -134,6 +80,25 @@ function getEventKey(event, options = {}) {
134
80
  }
135
81
  return key;
136
82
  }
83
+ function nextTick(fn) {
84
+ const set = /* @__PURE__ */ new Set();
85
+ function raf2(fn2) {
86
+ const id = globalThis.requestAnimationFrame(fn2);
87
+ set.add(() => globalThis.cancelAnimationFrame(id));
88
+ }
89
+ raf2(() => raf2(fn));
90
+ return function cleanup() {
91
+ set.forEach(function(fn2) {
92
+ fn2();
93
+ });
94
+ };
95
+ }
96
+ function raf(fn) {
97
+ const id = globalThis.requestAnimationFrame(fn);
98
+ return function cleanup() {
99
+ globalThis.cancelAnimationFrame(id);
100
+ };
101
+ }
137
102
  function queryAll(root, selector) {
138
103
  var _a;
139
104
  return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/tabs",
3
- "version": "0.0.0-dev-20220628115342",
3
+ "version": "0.0.0-dev-20220703193942",
4
4
  "description": "Core logic for the tabs widget implemented as a state machine",
5
5
  "keywords": [
6
6
  "js",
@@ -29,9 +29,9 @@
29
29
  "url": "https://github.com/chakra-ui/zag/issues"
30
30
  },
31
31
  "dependencies": {
32
- "@zag-js/core": "0.0.0-dev-20220628115342",
33
- "@zag-js/dom-utils": "0.0.0-dev-20220628115342",
34
- "@zag-js/types": "0.0.0-dev-20220628115342",
32
+ "@zag-js/core": "0.0.0-dev-20220703193942",
33
+ "@zag-js/dom-utils": "0.0.0-dev-20220703193942",
34
+ "@zag-js/types": "0.0.0-dev-20220703193942",
35
35
  "@zag-js/utils": "0.1.2"
36
36
  },
37
37
  "scripts": {