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

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 +25 -60
  2. package/dist/index.mjs +25 -60
  3. package/package.json +4 -4
package/dist/index.js CHANGED
@@ -62,75 +62,40 @@ function raf(fn) {
62
62
  globalThis.cancelAnimationFrame(id);
63
63
  };
64
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;
65
+ function isFrame(element) {
66
+ return element.localName === "iframe";
82
67
  }
83
68
  function isHTMLElement(v) {
84
69
  return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
85
70
  }
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;
71
+ function isVisible(el) {
72
+ if (!isHTMLElement(el))
73
+ return false;
74
+ return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
118
75
  }
119
- var getFocusables = (el, includeContainer = false) => {
120
- if (!el)
76
+ 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";
77
+ var getFocusables = (container, includeContainer = false) => {
78
+ if (!container)
121
79
  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);
80
+ const elements = Array.from(container.querySelectorAll(focusableSelector));
81
+ const include = includeContainer == true || includeContainer == "if-empty" && elements.length === 0;
82
+ if (include && isHTMLElement(container) && isFocusable(container)) {
83
+ elements.unshift(container);
126
84
  }
127
- return els.filter((el2) => isFocusable(el2) && !isHidden(el2));
85
+ const focusableElements = elements.filter(isFocusable);
86
+ focusableElements.forEach((element, i) => {
87
+ if (isFrame(element) && element.contentDocument) {
88
+ const frameBody = element.contentDocument.body;
89
+ focusableElements.splice(i, 1, ...getFocusables(frameBody));
90
+ }
91
+ });
92
+ return focusableElements;
128
93
  };
129
- var isFocusable = (el) => {
130
- if (!isHTMLElement(el) || isHidden(el) || isDisabled(el))
94
+ function isFocusable(element) {
95
+ if (!element)
131
96
  return false;
132
- return el == null ? void 0 : el.matches(focusableSelector);
133
- };
97
+ return element.matches(focusableSelector) && isVisible(element);
98
+ }
134
99
  var rtlKeyMap = {
135
100
  ArrowLeft: "ArrowRight",
136
101
  ArrowRight: "ArrowLeft",
package/dist/index.mjs CHANGED
@@ -39,75 +39,40 @@ function raf(fn) {
39
39
  globalThis.cancelAnimationFrame(id);
40
40
  };
41
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;
42
+ function isFrame(element) {
43
+ return element.localName === "iframe";
59
44
  }
60
45
  function isHTMLElement(v) {
61
46
  return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
62
47
  }
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;
48
+ function isVisible(el) {
49
+ if (!isHTMLElement(el))
50
+ return false;
51
+ return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
95
52
  }
96
- var getFocusables = (el, includeContainer = false) => {
97
- if (!el)
53
+ 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";
54
+ var getFocusables = (container, includeContainer = false) => {
55
+ if (!container)
98
56
  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);
57
+ const elements = Array.from(container.querySelectorAll(focusableSelector));
58
+ const include = includeContainer == true || includeContainer == "if-empty" && elements.length === 0;
59
+ if (include && isHTMLElement(container) && isFocusable(container)) {
60
+ elements.unshift(container);
103
61
  }
104
- return els.filter((el2) => isFocusable(el2) && !isHidden(el2));
62
+ const focusableElements = elements.filter(isFocusable);
63
+ focusableElements.forEach((element, i) => {
64
+ if (isFrame(element) && element.contentDocument) {
65
+ const frameBody = element.contentDocument.body;
66
+ focusableElements.splice(i, 1, ...getFocusables(frameBody));
67
+ }
68
+ });
69
+ return focusableElements;
105
70
  };
106
- var isFocusable = (el) => {
107
- if (!isHTMLElement(el) || isHidden(el) || isDisabled(el))
71
+ function isFocusable(element) {
72
+ if (!element)
108
73
  return false;
109
- return el == null ? void 0 : el.matches(focusableSelector);
110
- };
74
+ return element.matches(focusableSelector) && isVisible(element);
75
+ }
111
76
  var rtlKeyMap = {
112
77
  ArrowLeft: "ArrowRight",
113
78
  ArrowRight: "ArrowLeft",
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-20220703123907",
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-20220703123907",
33
+ "@zag-js/dom-utils": "0.0.0-dev-20220703123907",
34
+ "@zag-js/types": "0.0.0-dev-20220703123907",
35
35
  "@zag-js/utils": "0.1.2"
36
36
  },
37
37
  "scripts": {