@algolia/satellite 1.0.0-beta.134 → 1.0.0-beta.135

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 (134) hide show
  1. package/cjs/AutoComplete/AutoComplete.js +3 -1
  2. package/cjs/DatePicker/components/Modal.js +5 -4
  3. package/cjs/Dropdown/Dropdown.js +5 -4
  4. package/cjs/Dropdown/components/DropdownButtonItem.js +2 -2
  5. package/cjs/Dropdown/components/DropdownLinkItem.js +0 -1
  6. package/cjs/Dropdown/useDropdownItemProps.d.ts +9 -1
  7. package/cjs/Dropdown/useDropdownItemProps.js +16 -7
  8. package/cjs/Flag/Flags.d.ts +1 -1
  9. package/cjs/Flag/Flags.js +5 -4
  10. package/cjs/Link/ButtonLink.js +1 -10
  11. package/cjs/Modal/Modal.d.ts +1 -1
  12. package/cjs/Modal/Modal.js +3 -4
  13. package/cjs/Satellite/Satellite.d.ts +1 -0
  14. package/cjs/Satellite/Satellite.js +3 -1
  15. package/cjs/Satellite/SatelliteContext.d.ts +1 -0
  16. package/cjs/Satellite/index.d.ts +1 -0
  17. package/cjs/Satellite/index.js +14 -0
  18. package/cjs/Satellite/locale.d.ts +5 -3
  19. package/cjs/Satellite/useCreatePortal.d.ts +4 -0
  20. package/cjs/Satellite/useCreatePortal.js +29 -0
  21. package/cjs/ScrollIndicator/ScrollIndicator.js +2 -1
  22. package/cjs/Sidebar/Sidebar.d.ts +33 -12
  23. package/cjs/Sidebar/Sidebar.js +48 -38
  24. package/cjs/Sidebar/SidebarButtonLink.d.ts +14 -0
  25. package/cjs/Sidebar/SidebarButtonLink.js +110 -0
  26. package/cjs/Sidebar/SidebarContext.d.ts +7 -8
  27. package/cjs/Sidebar/SidebarContext.js +10 -11
  28. package/cjs/Sidebar/SidebarHeader.d.ts +6 -0
  29. package/cjs/Sidebar/SidebarHeader.js +29 -0
  30. package/cjs/Sidebar/SidebarHeading.d.ts +6 -0
  31. package/cjs/Sidebar/SidebarHeading.js +35 -0
  32. package/cjs/Sidebar/SidebarLink.d.ts +8 -0
  33. package/cjs/Sidebar/SidebarLink.js +58 -0
  34. package/cjs/Sidebar/SidebarLinksGroup/ActiveLinkIndicator.d.ts +8 -0
  35. package/cjs/Sidebar/SidebarLinksGroup/ActiveLinkIndicator.js +47 -0
  36. package/cjs/Sidebar/SidebarLinksGroup/SidebarGroupLink.d.ts +7 -0
  37. package/cjs/Sidebar/{components/SidebarHeader.js → SidebarLinksGroup/SidebarGroupLink.js} +14 -23
  38. package/cjs/Sidebar/SidebarLinksGroup/SidebarLinksGroup.d.ts +23 -0
  39. package/cjs/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js +120 -0
  40. package/cjs/Sidebar/SidebarLinksGroup/index.d.ts +2 -0
  41. package/cjs/Sidebar/SidebarLinksGroup/index.js +18 -0
  42. package/cjs/Sidebar/SidebarLinksGroup/types.d.ts +10 -0
  43. package/cjs/Sidebar/SidebarLinksGroup/types.js +5 -0
  44. package/cjs/Sidebar/SidebarNav.d.ts +9 -0
  45. package/cjs/Sidebar/SidebarNav.js +46 -0
  46. package/cjs/Sidebar/index.d.ts +7 -4
  47. package/cjs/Sidebar/index.js +61 -21
  48. package/cjs/Sidebar/types.d.ts +6 -2
  49. package/cjs/Tabs/Tabs.tailwind.js +8 -8
  50. package/cjs/Tabs/components/LinkTab.js +7 -9
  51. package/cjs/Tooltip/OverflowTooltipWrapper.js +5 -4
  52. package/cjs/Tooltip/TooltipWrapper.js +5 -4
  53. package/cjs/index.d.ts +0 -1
  54. package/cjs/index.js +0 -14
  55. package/cjs/styles/tailwind.config.js +1 -1
  56. package/cjs/utils/useLinkProps.d.ts +5 -2
  57. package/cjs/utils/useLinkProps.js +9 -2
  58. package/esm/AutoComplete/AutoComplete.js +3 -1
  59. package/esm/DatePicker/components/Modal.js +4 -3
  60. package/esm/Dropdown/Dropdown.js +4 -3
  61. package/esm/Dropdown/components/DropdownButtonItem.js +2 -2
  62. package/esm/Dropdown/components/DropdownLinkItem.js +0 -1
  63. package/esm/Dropdown/useDropdownItemProps.d.ts +9 -1
  64. package/esm/Dropdown/useDropdownItemProps.js +15 -7
  65. package/esm/Flag/Flags.d.ts +1 -1
  66. package/esm/Flag/Flags.js +4 -3
  67. package/esm/Link/ButtonLink.js +1 -10
  68. package/esm/Modal/Modal.d.ts +1 -1
  69. package/esm/Modal/Modal.js +4 -4
  70. package/esm/Satellite/Satellite.d.ts +1 -0
  71. package/esm/Satellite/Satellite.js +3 -1
  72. package/esm/Satellite/SatelliteContext.d.ts +1 -0
  73. package/esm/Satellite/index.d.ts +1 -0
  74. package/esm/Satellite/index.js +1 -0
  75. package/esm/Satellite/locale.d.ts +5 -3
  76. package/esm/Satellite/useCreatePortal.d.ts +4 -0
  77. package/esm/Satellite/useCreatePortal.js +16 -0
  78. package/esm/ScrollIndicator/ScrollIndicator.js +2 -1
  79. package/esm/Sidebar/Sidebar.d.ts +33 -12
  80. package/esm/Sidebar/Sidebar.js +44 -29
  81. package/esm/Sidebar/SidebarButtonLink.d.ts +14 -0
  82. package/esm/Sidebar/SidebarButtonLink.js +92 -0
  83. package/esm/Sidebar/SidebarContext.d.ts +7 -8
  84. package/esm/Sidebar/SidebarContext.js +9 -8
  85. package/esm/Sidebar/SidebarHeader.d.ts +6 -0
  86. package/esm/Sidebar/SidebarHeader.js +15 -0
  87. package/esm/Sidebar/SidebarHeading.d.ts +6 -0
  88. package/esm/Sidebar/SidebarHeading.js +20 -0
  89. package/esm/Sidebar/SidebarLink.d.ts +8 -0
  90. package/esm/Sidebar/SidebarLink.js +42 -0
  91. package/esm/Sidebar/SidebarLinksGroup/ActiveLinkIndicator.d.ts +8 -0
  92. package/esm/Sidebar/SidebarLinksGroup/ActiveLinkIndicator.js +32 -0
  93. package/esm/Sidebar/SidebarLinksGroup/SidebarGroupLink.d.ts +7 -0
  94. package/esm/Sidebar/{components/SidebarHeader.js → SidebarLinksGroup/SidebarGroupLink.js} +13 -19
  95. package/esm/Sidebar/SidebarLinksGroup/SidebarLinksGroup.d.ts +23 -0
  96. package/esm/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js +100 -0
  97. package/esm/Sidebar/SidebarLinksGroup/index.d.ts +2 -0
  98. package/esm/Sidebar/SidebarLinksGroup/index.js +2 -0
  99. package/esm/Sidebar/SidebarLinksGroup/types.d.ts +10 -0
  100. package/esm/Sidebar/SidebarLinksGroup/types.js +1 -0
  101. package/esm/Sidebar/SidebarNav.d.ts +9 -0
  102. package/esm/Sidebar/SidebarNav.js +31 -0
  103. package/esm/Sidebar/index.d.ts +7 -4
  104. package/esm/Sidebar/index.js +7 -4
  105. package/esm/Sidebar/types.d.ts +6 -2
  106. package/esm/Tabs/Tabs.tailwind.js +8 -8
  107. package/esm/Tabs/components/LinkTab.js +7 -9
  108. package/esm/Tooltip/OverflowTooltipWrapper.js +4 -3
  109. package/esm/Tooltip/TooltipWrapper.js +4 -3
  110. package/esm/index.d.ts +0 -1
  111. package/esm/index.js +0 -1
  112. package/esm/styles/tailwind.config.js +1 -1
  113. package/esm/utils/useLinkProps.d.ts +5 -2
  114. package/esm/utils/useLinkProps.js +9 -2
  115. package/package.json +1 -1
  116. package/satellite.min.css +1 -1
  117. package/cjs/Banner/Banner.d.ts +0 -86
  118. package/cjs/Banner/Banner.js +0 -176
  119. package/cjs/Banner/index.d.ts +0 -2
  120. package/cjs/Banner/index.js +0 -32
  121. package/cjs/Sidebar/Sidebar.tailwind.d.ts +0 -5
  122. package/cjs/Sidebar/Sidebar.tailwind.js +0 -66
  123. package/cjs/Sidebar/components/SidebarHeader.d.ts +0 -5
  124. package/cjs/Sidebar/components/SidebarLink.d.ts +0 -10
  125. package/cjs/Sidebar/components/SidebarLink.js +0 -98
  126. package/esm/Banner/Banner.d.ts +0 -86
  127. package/esm/Banner/Banner.js +0 -161
  128. package/esm/Banner/index.d.ts +0 -2
  129. package/esm/Banner/index.js +0 -2
  130. package/esm/Sidebar/Sidebar.tailwind.d.ts +0 -5
  131. package/esm/Sidebar/Sidebar.tailwind.js +0 -64
  132. package/esm/Sidebar/components/SidebarHeader.d.ts +0 -5
  133. package/esm/Sidebar/components/SidebarLink.d.ts +0 -10
  134. package/esm/Sidebar/components/SidebarLink.js +0 -78
@@ -0,0 +1,46 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.SidebarNav = void 0;
9
+
10
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
+
12
+ var _react = require("react");
13
+
14
+ var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
15
+
16
+ var _SidebarContext = require("./SidebarContext");
17
+
18
+ var _jsxRuntime = require("react/jsx-runtime");
19
+
20
+ var _templateObject;
21
+
22
+ var SidebarNav = function SidebarNav(_ref) {
23
+ var className = _ref.className,
24
+ spacingProp = _ref.spacing,
25
+ label = _ref.label,
26
+ children = _ref.children;
27
+
28
+ var _useSidebarContext = (0, _SidebarContext.useSidebarContext)(),
29
+ variant = _useSidebarContext.variant;
30
+
31
+ var spacing = typeof spacingProp === "string" ? spacingProp : variant === "primary" ? "small" : "large";
32
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("nav", {
33
+ className: className,
34
+ "aria-label": label,
35
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
36
+ className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["", ""])), spacing === "small" ? "space-y-2" : "px-3 space-y-8"),
37
+ children: _react.Children.map(children, function (child, index) {
38
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
39
+ children: child
40
+ }, index);
41
+ })
42
+ })
43
+ });
44
+ };
45
+
46
+ exports.SidebarNav = SidebarNav;
@@ -1,6 +1,9 @@
1
1
  export * from "./Sidebar";
2
+ export * from "./SidebarButtonLink";
3
+ export * from "./SidebarHeader";
4
+ export * from "./SidebarHeading";
5
+ export * from "./SidebarLink";
6
+ export * from "./SidebarLinksGroup";
7
+ export * from "./SidebarNav";
2
8
  export * from "./types";
3
- export * from "./SidebarContext";
4
- export * from "./components/SidebarLink";
5
- export * from "./components/SidebarHeader";
6
- export { default } from "./Sidebar";
9
+ export { useSidebarContext } from "./SidebarContext";
@@ -1,19 +1,19 @@
1
1
  "use strict";
2
2
 
3
- var _typeof = require("@babel/runtime/helpers/typeof");
4
-
5
3
  Object.defineProperty(exports, "__esModule", {
6
4
  value: true
7
5
  });
8
- var _exportNames = {};
9
- Object.defineProperty(exports, "default", {
6
+ var _exportNames = {
7
+ useSidebarContext: true
8
+ };
9
+ Object.defineProperty(exports, "useSidebarContext", {
10
10
  enumerable: true,
11
11
  get: function get() {
12
- return _Sidebar["default"];
12
+ return _SidebarContext.useSidebarContext;
13
13
  }
14
14
  });
15
15
 
16
- var _Sidebar = _interopRequireWildcard(require("./Sidebar"));
16
+ var _Sidebar = require("./Sidebar");
17
17
 
18
18
  Object.keys(_Sidebar).forEach(function (key) {
19
19
  if (key === "default" || key === "__esModule") return;
@@ -27,35 +27,49 @@ Object.keys(_Sidebar).forEach(function (key) {
27
27
  });
28
28
  });
29
29
 
30
- var _types = require("./types");
30
+ var _SidebarButtonLink = require("./SidebarButtonLink");
31
31
 
32
- Object.keys(_types).forEach(function (key) {
32
+ Object.keys(_SidebarButtonLink).forEach(function (key) {
33
33
  if (key === "default" || key === "__esModule") return;
34
34
  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
35
- if (key in exports && exports[key] === _types[key]) return;
35
+ if (key in exports && exports[key] === _SidebarButtonLink[key]) return;
36
36
  Object.defineProperty(exports, key, {
37
37
  enumerable: true,
38
38
  get: function get() {
39
- return _types[key];
39
+ return _SidebarButtonLink[key];
40
+ }
41
+ });
42
+ });
43
+
44
+ var _SidebarHeader = require("./SidebarHeader");
45
+
46
+ Object.keys(_SidebarHeader).forEach(function (key) {
47
+ if (key === "default" || key === "__esModule") return;
48
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
49
+ if (key in exports && exports[key] === _SidebarHeader[key]) return;
50
+ Object.defineProperty(exports, key, {
51
+ enumerable: true,
52
+ get: function get() {
53
+ return _SidebarHeader[key];
40
54
  }
41
55
  });
42
56
  });
43
57
 
44
- var _SidebarContext = require("./SidebarContext");
58
+ var _SidebarHeading = require("./SidebarHeading");
45
59
 
46
- Object.keys(_SidebarContext).forEach(function (key) {
60
+ Object.keys(_SidebarHeading).forEach(function (key) {
47
61
  if (key === "default" || key === "__esModule") return;
48
62
  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
49
- if (key in exports && exports[key] === _SidebarContext[key]) return;
63
+ if (key in exports && exports[key] === _SidebarHeading[key]) return;
50
64
  Object.defineProperty(exports, key, {
51
65
  enumerable: true,
52
66
  get: function get() {
53
- return _SidebarContext[key];
67
+ return _SidebarHeading[key];
54
68
  }
55
69
  });
56
70
  });
57
71
 
58
- var _SidebarLink = require("./components/SidebarLink");
72
+ var _SidebarLink = require("./SidebarLink");
59
73
 
60
74
  Object.keys(_SidebarLink).forEach(function (key) {
61
75
  if (key === "default" || key === "__esModule") return;
@@ -69,20 +83,46 @@ Object.keys(_SidebarLink).forEach(function (key) {
69
83
  });
70
84
  });
71
85
 
72
- var _SidebarHeader = require("./components/SidebarHeader");
86
+ var _SidebarLinksGroup = require("./SidebarLinksGroup");
73
87
 
74
- Object.keys(_SidebarHeader).forEach(function (key) {
88
+ Object.keys(_SidebarLinksGroup).forEach(function (key) {
75
89
  if (key === "default" || key === "__esModule") return;
76
90
  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
77
- if (key in exports && exports[key] === _SidebarHeader[key]) return;
91
+ if (key in exports && exports[key] === _SidebarLinksGroup[key]) return;
78
92
  Object.defineProperty(exports, key, {
79
93
  enumerable: true,
80
94
  get: function get() {
81
- return _SidebarHeader[key];
95
+ return _SidebarLinksGroup[key];
96
+ }
97
+ });
98
+ });
99
+
100
+ var _SidebarNav = require("./SidebarNav");
101
+
102
+ Object.keys(_SidebarNav).forEach(function (key) {
103
+ if (key === "default" || key === "__esModule") return;
104
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
105
+ if (key in exports && exports[key] === _SidebarNav[key]) return;
106
+ Object.defineProperty(exports, key, {
107
+ enumerable: true,
108
+ get: function get() {
109
+ return _SidebarNav[key];
82
110
  }
83
111
  });
84
112
  });
85
113
 
86
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
114
+ var _types = require("./types");
115
+
116
+ Object.keys(_types).forEach(function (key) {
117
+ if (key === "default" || key === "__esModule") return;
118
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
119
+ if (key in exports && exports[key] === _types[key]) return;
120
+ Object.defineProperty(exports, key, {
121
+ enumerable: true,
122
+ get: function get() {
123
+ return _types[key];
124
+ }
125
+ });
126
+ });
87
127
 
88
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
128
+ var _SidebarContext = require("./SidebarContext");
@@ -1,2 +1,6 @@
1
- export declare type SidebarVariant = "dark" | "light";
2
- export declare type SidebarCollapsed = boolean;
1
+ export declare type SidebarVariant = "primary" | "secondary";
2
+ export declare type SidebarLocation = Pick<Location, "pathname" | "hash" | "search">;
3
+ export declare type SidebarLocale = {
4
+ primarySidebarLabel?: string;
5
+ secondarySidebarLabel?: string;
6
+ };
@@ -10,25 +10,25 @@ var tabsPlugin = plugin(function (_ref) {
10
10
  ".tabs-tabbar": {
11
11
  scrollBehavior: "smooth"
12
12
  },
13
- ".tab[data-selected]": {
13
+ ".tab[aria-selected=true]": {
14
14
  color: theme("colors.grey.900")
15
15
  },
16
- ".tab-grey[data-selected], .tab-grey:hover, .tab-grey:focus": {
16
+ ".tab-grey[aria-selected=true], .tab-grey:hover, .tab-grey:focus": {
17
17
  borderBottomColor: theme("colors.grey.300")
18
18
  },
19
- ".tab-accent[data-selected], .tab-accent:hover, .tab-accent:focus": {
19
+ ".tab-accent[aria-selected=true], .tab-accent:hover, .tab-accent:focus": {
20
20
  borderBottomColor: theme("colors.accent.600")
21
21
  },
22
- ".tab-blue[data-selected], .tab-blue:hover, .tab-blue:focus": {
22
+ ".tab-blue[aria-selected=true], .tab-blue:hover, .tab-blue:focus": {
23
23
  borderBottomColor: theme("colors.blue.600")
24
24
  },
25
- ".tab-green[data-selected], .tab-green:hover, .tab-green:focus": {
25
+ ".tab-green[aria-selected=true], .tab-green:hover, .tab-green:focus": {
26
26
  borderBottomColor: theme("colors.green.600")
27
27
  },
28
- ".tab-orange[data-selected], .tab-orange:hover, .tab-orange:focus": {
28
+ ".tab-orange[aria-selected=true], .tab-orange:hover, .tab-orange:focus": {
29
29
  borderBottomColor: theme("colors.orange.600")
30
30
  },
31
- ".tab-red[data-selected], .tab-red:hover, .tab-red:focus": {
31
+ ".tab-red[aria-selected=true], .tab-red:hover, .tab-red:focus": {
32
32
  borderBottomColor: theme("colors.red.600")
33
33
  },
34
34
  ".tab": {
@@ -40,7 +40,7 @@ var tabsPlugin = plugin(function (_ref) {
40
40
  display: "inline-flex",
41
41
  justifyContent: "center",
42
42
  minWidth: theme("spacing.12"),
43
- "&[disabled], &[data-disabled=true]": {
43
+ "&[disabled], &[aria-disabled=true]": {
44
44
  color: theme("colors.grey.400"),
45
45
  borderBottomColor: "transparent",
46
46
  cursor: "not-allowed"
@@ -39,7 +39,7 @@ var getNextNonDisabledSibling = function getNextNonDisabledSibling(el) {
39
39
  var _next, _next$nextElementSibl, _next2, _next3, _next3$parentElement;
40
40
 
41
41
  next = (_next$nextElementSibl = (_next2 = next) === null || _next2 === void 0 ? void 0 : _next2.nextElementSibling) !== null && _next$nextElementSibl !== void 0 ? _next$nextElementSibl : (_next3 = next) === null || _next3 === void 0 ? void 0 : (_next3$parentElement = _next3.parentElement) === null || _next3$parentElement === void 0 ? void 0 : _next3$parentElement.firstElementChild;
42
- } while (Boolean((_next = next) === null || _next === void 0 ? void 0 : _next.getAttribute("data-disabled")));
42
+ } while (Boolean((_next = next) === null || _next === void 0 ? void 0 : _next.getAttribute("aria-disabled")));
43
43
 
44
44
  return (_ref = next) !== null && _ref !== void 0 ? _ref : null;
45
45
  };
@@ -54,7 +54,7 @@ var getPreviousNonDisabledSibling = function getPreviousNonDisabledSibling(el) {
54
54
  var _next4, _next$previousElement, _next5, _next6, _next6$parentElement;
55
55
 
56
56
  next = (_next$previousElement = (_next5 = next) === null || _next5 === void 0 ? void 0 : _next5.previousElementSibling) !== null && _next$previousElement !== void 0 ? _next$previousElement : (_next6 = next) === null || _next6 === void 0 ? void 0 : (_next6$parentElement = _next6.parentElement) === null || _next6$parentElement === void 0 ? void 0 : _next6$parentElement.lastElementChild;
57
- } while (Boolean((_next4 = next) === null || _next4 === void 0 ? void 0 : _next4.getAttribute("data-disabled")));
57
+ } while (Boolean((_next4 = next) === null || _next4 === void 0 ? void 0 : _next4.getAttribute("aria-disabled")));
58
58
 
59
59
  return (_ref2 = next) !== null && _ref2 !== void 0 ? _ref2 : null;
60
60
  };
@@ -66,16 +66,16 @@ var LinkTab = function LinkTab(_ref3) {
66
66
  var variant = tab.variant || "accent";
67
67
  var selectionProps = selected ? {
68
68
  "aria-selected": true,
69
- "data-selected": true
69
+ tabIndex: 0
70
70
  } : {
71
- "aria-selected": false
71
+ "aria-selected": false,
72
+ tabIndex: -1
72
73
  };
73
74
  var linkProps = (0, _useLinkProps["default"])({
74
75
  href: tab.to,
76
+ disabled: tab.disabled,
75
77
  onClick: function onClick(evt) {
76
- if (tab.disabled) {
77
- evt.preventDefault();
78
- } else if (_onClick) {
78
+ if (_onClick) {
79
79
  _onClick(evt);
80
80
  }
81
81
  }
@@ -84,8 +84,6 @@ var LinkTab = function LinkTab(_ref3) {
84
84
  id: tab.id,
85
85
  role: "tab",
86
86
  className: (0, _classnames["default"])(_utils.ACTIVE_UNDERLINE_VARIANT_CLASSNAMES[variant], (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["tab pb-3 text-base leading-sm hover:no-underline"]))), tab.className),
87
- tabIndex: selected ? 0 : -1,
88
- "data-disabled": tab.disabled,
89
87
  onKeyDown: function onKeyDown(evt) {
90
88
  if (tab.disabled) return;
91
89
 
@@ -19,10 +19,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
19
19
 
20
20
  var _react = require("react");
21
21
 
22
- var _reactDom = require("react-dom");
23
-
24
22
  var _reactPopper = require("react-popper");
25
23
 
24
+ var _Satellite = require("../Satellite");
25
+
26
26
  var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
27
27
 
28
28
  var _TextWrap = _interopRequireDefault(require("../TextWrap"));
@@ -58,6 +58,7 @@ var OverflowTooltipWrapper = function OverflowTooltipWrapper(_ref) {
58
58
  modifiers = _ref$modifiers === void 0 ? [] : _ref$modifiers,
59
59
  _ref$noArrow = _ref.noArrow,
60
60
  noArrow = _ref$noArrow === void 0 ? false : _ref$noArrow;
61
+ var createPortal = (0, _Satellite.useCreatePortal)();
61
62
 
62
63
  var _useState = (0, _react.useState)(null),
63
64
  _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -107,7 +108,7 @@ var OverflowTooltipWrapper = function OverflowTooltipWrapper(_ref) {
107
108
  onMouseEnter: onMouseEnter,
108
109
  onMouseLeave: onMouseLeave,
109
110
  children: children
110
- }), tooltipText && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, attributes.popper), {}, {
111
+ }), tooltipText && createPortal( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, attributes.popper), {}, {
111
112
  style: styles.popper,
112
113
  className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["tooltip-wrapper-popper"]))), tooltipClassName),
113
114
  ref: setPopperEl,
@@ -121,7 +122,7 @@ var OverflowTooltipWrapper = function OverflowTooltipWrapper(_ref) {
121
122
  children: tooltipText
122
123
  })
123
124
  })]
124
- })), document.body)]
125
+ })))]
125
126
  });
126
127
  };
127
128
 
@@ -21,10 +21,10 @@ var _lodash = _interopRequireDefault(require("lodash.throttle"));
21
21
 
22
22
  var _react = require("react");
23
23
 
24
- var _reactDom = require("react-dom");
25
-
26
24
  var _reactPopper = require("react-popper");
27
25
 
26
+ var _Satellite = require("../Satellite");
27
+
28
28
  var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
29
29
 
30
30
  var _Tooltip = _interopRequireDefault(require("./Tooltip"));
@@ -65,6 +65,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
65
65
  noArrow = _ref$noArrow === void 0 ? false : _ref$noArrow,
66
66
  _ref$interactive = _ref.interactive,
67
67
  interactive = _ref$interactive === void 0 ? true : _ref$interactive;
68
+ var createPortal = (0, _Satellite.useCreatePortal)();
68
69
  var isControlled = typeof show === "boolean";
69
70
 
70
71
  var _useState = (0, _react.useState)(!!show),
@@ -197,7 +198,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
197
198
  }
198
199
  }), {}, {
199
200
  children: children
200
- })), showTooltip && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, attributes.popper), {}, {
201
+ })), showTooltip && createPortal( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, attributes.popper), {}, {
201
202
  style: styles.popper,
202
203
  className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["tooltip-wrapper-popper"]))), tooltipClassName),
203
204
  ref: setPopperEl,
@@ -209,7 +210,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
209
210
  variant: tooltipVariant,
210
211
  children: tooltipContent
211
212
  })]
212
- })), document.body)]
213
+ })))]
213
214
  });
214
215
  };
215
216
 
package/cjs/index.d.ts CHANGED
@@ -8,7 +8,6 @@ export * from "./AnnouncementBadge";
8
8
  export * from "./AutoComplete";
9
9
  export * from "./Avatars";
10
10
  export * from "./Badge";
11
- export * from "./Banner";
12
11
  export * from "./Banners";
13
12
  export * from "./Button";
14
13
  export * from "./Card";
package/cjs/index.js CHANGED
@@ -128,20 +128,6 @@ Object.keys(_Badge).forEach(function (key) {
128
128
  });
129
129
  });
130
130
 
131
- var _Banner = require("./Banner");
132
-
133
- Object.keys(_Banner).forEach(function (key) {
134
- if (key === "default" || key === "__esModule") return;
135
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
136
- if (key in exports && exports[key] === _Banner[key]) return;
137
- Object.defineProperty(exports, key, {
138
- enumerable: true,
139
- get: function get() {
140
- return _Banner[key];
141
- }
142
- });
143
- });
144
-
145
131
  var _Banners = require("./Banners");
146
132
 
147
133
  Object.keys(_Banners).forEach(function (key) {
@@ -147,5 +147,5 @@ module.exports = {
147
147
  }
148
148
  }
149
149
  },
150
- plugins: [require("./base.tailwind"), require("../utilities/utilities.tailwind"), require("../Typography/Typography.tailwind"), require("../FlexGrid/FlexGrid.tailwind"), require("../AutoComplete/AutoComplete.tailwind"), require("../Button/Button.tailwind"), require("../Card/Card.tailwind"), require("../Checkbox/Checkbox.tailwind"), require("../EmptyState/EmptyState.tailwind"), require("../Flag/Flag.tailwind"), require("../HelpUnderline/HelpUnderline.tailwind"), require("../Input/Input.tailwind"), require("../InstantSearch/InstantSearch.tailwind"), require("../KeyboardKey/KeyboardKey.tailwind"), require("../Medallion/Medallion.tailwind"), require("../Modal/Modal.tailwind"), require("../ProgressBar/ProgressBar.tailwind"), require("../ProgressSpinner/ProgressSpinner.tailwind"), require("../RadioGroup/RadioButton.tailwind"), require("../RangeSlider/RangeSlider.tailwind"), require("../ScrollIndicator/ScrollIndicator.tailwind"), require("../Select/Select.tailwind"), require("../Sidebar/Sidebar.tailwind"), require("../Switch/Switch.tailwind"), require("../Tabs/Tabs.tailwind"), require("../Tables/DataTable/DataTable.tailwind"), require("../Tables/Table/Table.tailwind"), require("../Tag/Tag.tailwind"), require("../TextArea/TextArea.tailwind"), require("../Toggle/Toggle.tailwind"), require("../Tooltip/Tooltip.tailwind"), require("../UserContent/UserContent.tailwind"), require("../DatePicker/DatePicker.tailwind")]
150
+ plugins: [require("./base.tailwind"), require("../utilities/utilities.tailwind"), require("../Typography/Typography.tailwind"), require("../FlexGrid/FlexGrid.tailwind"), require("../AutoComplete/AutoComplete.tailwind"), require("../Button/Button.tailwind"), require("../Card/Card.tailwind"), require("../Checkbox/Checkbox.tailwind"), require("../EmptyState/EmptyState.tailwind"), require("../Flag/Flag.tailwind"), require("../HelpUnderline/HelpUnderline.tailwind"), require("../Input/Input.tailwind"), require("../InstantSearch/InstantSearch.tailwind"), require("../KeyboardKey/KeyboardKey.tailwind"), require("../Medallion/Medallion.tailwind"), require("../Modal/Modal.tailwind"), require("../ProgressBar/ProgressBar.tailwind"), require("../ProgressSpinner/ProgressSpinner.tailwind"), require("../RadioGroup/RadioButton.tailwind"), require("../RangeSlider/RangeSlider.tailwind"), require("../ScrollIndicator/ScrollIndicator.tailwind"), require("../Select/Select.tailwind"), require("../Switch/Switch.tailwind"), require("../Tabs/Tabs.tailwind"), require("../Tables/DataTable/DataTable.tailwind"), require("../Tables/Table/Table.tailwind"), require("../Tag/Tag.tailwind"), require("../TextArea/TextArea.tailwind"), require("../Toggle/Toggle.tailwind"), require("../Tooltip/Tooltip.tailwind"), require("../UserContent/UserContent.tailwind"), require("../DatePicker/DatePicker.tailwind")]
151
151
  };
@@ -1,4 +1,7 @@
1
1
  import type { AnchorHTMLAttributes } from "react";
2
- export declare type UseLinkProps = Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "onClick" | "target" | "rel">;
3
- export declare const useLinkProps: (props: UseLinkProps) => UseLinkProps;
2
+ export declare type UseLinkPropsArgs = Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "onClick" | "target" | "rel" | "role" | "tabIndex"> & {
3
+ disabled?: boolean;
4
+ };
5
+ export declare type UseLinkProps = Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "onClick" | "target" | "rel" | "role" | "tabIndex" | "aria-disabled">;
6
+ export declare const useLinkProps: (props: UseLinkPropsArgs) => UseLinkProps;
4
7
  export default useLinkProps;
@@ -47,11 +47,18 @@ var useLinkProps = function useLinkProps(props) {
47
47
  var isExternal = router.isExternalLocation(parsedLocation);
48
48
  var target = (_props$target = props.target) !== null && _props$target !== void 0 ? _props$target : router.shouldOpenInNewTab(parsedLocation) ? "_blank" : undefined;
49
49
  var rel = (_props$rel = props.rel) !== null && _props$rel !== void 0 ? _props$rel : isExternal ? "noopener noreferrer" : undefined;
50
- return {
50
+ return props.disabled ? {
51
+ role: "link",
52
+ target: target,
53
+ tabIndex: -1,
54
+ "aria-disabled": true
55
+ } : {
51
56
  target: target,
52
57
  href: href,
53
58
  rel: rel,
54
- onClick: onClick
59
+ onClick: onClick,
60
+ role: props.role,
61
+ tabIndex: props.tabIndex
55
62
  };
56
63
  };
57
64
 
@@ -556,6 +556,8 @@ export var AutoComplete = /*#__PURE__*/function (_Component) {
556
556
  });
557
557
 
558
558
  _defineProperty(_assertThisInitialized(_this), "renderSelect", function (autocompleteHelpers, fieldState) {
559
+ var _this$context$portalT;
560
+
559
561
  var _this$props5 = _this.props,
560
562
  className = _this$props5.className,
561
563
  options = _this$props5.options,
@@ -573,7 +575,7 @@ export var AutoComplete = /*#__PURE__*/function (_Component) {
573
575
 
574
576
  return /*#__PURE__*/_jsxs("div", {
575
577
  className: className,
576
- children: [_this.renderInput(results, autocompleteHelpers, fieldState), _this.inputContainerRef && /*#__PURE__*/createPortal(_this.renderMenu(results, autocompleteHelpers), document.body)]
578
+ children: [_this.renderInput(results, autocompleteHelpers, fieldState), _this.inputContainerRef && /*#__PURE__*/createPortal(_this.renderMenu(results, autocompleteHelpers), (_this$context$portalT = _this.context["portalTarget"]) !== null && _this$context$portalT !== void 0 ? _this$context$portalT : document.body)]
577
579
  });
578
580
  });
579
581
 
@@ -11,9 +11,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
11
11
 
12
12
  import cx from "classnames";
13
13
  import { useState } from "react";
14
- import { createPortal } from "react-dom";
15
14
  import { usePopper } from "react-popper";
16
15
  import { ClickAwayContainer } from "../../ClickAwayContainer";
16
+ import { useCreatePortal } from "../../Satellite";
17
17
  import stl from "../../styles/helpers/satellitePrefixer";
18
18
  import { jsx as _jsx } from "react/jsx-runtime";
19
19
  export var DEFAULT_DATE_PICKER_MODAL_POPPER_MODIFIERS = [{
@@ -33,6 +33,7 @@ var Modal = function Modal(_ref) {
33
33
  _ref$modifiers = _ref.modifiers,
34
34
  modifiers = _ref$modifiers === void 0 ? [] : _ref$modifiers,
35
35
  className = _ref.className;
36
+ var createPortal = useCreatePortal();
36
37
 
37
38
  var _useState = useState(null),
38
39
  _useState2 = _slicedToArray(_useState, 2),
@@ -51,7 +52,7 @@ var Modal = function Modal(_ref) {
51
52
  return null;
52
53
  }
53
54
 
54
- return /*#__PURE__*/createPortal( /*#__PURE__*/_jsx(ClickAwayContainer, {
55
+ return createPortal( /*#__PURE__*/_jsx(ClickAwayContainer, {
55
56
  element: datePickerElement,
56
57
  onClickAway: function onClickAway(evt) {
57
58
  return _onClickAway === null || _onClickAway === void 0 ? void 0 : _onClickAway(evt);
@@ -63,7 +64,7 @@ var Modal = function Modal(_ref) {
63
64
  style: styles.popper,
64
65
  children: children
65
66
  }))
66
- }), document.body);
67
+ }));
67
68
  };
68
69
 
69
70
  export default Modal;
@@ -11,10 +11,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
11
11
 
12
12
  import cx from "classnames";
13
13
  import { useState } from "react";
14
- import { createPortal } from "react-dom";
15
14
  import { usePopper } from "react-popper";
16
15
  import Card from "../Card";
17
16
  import { ClickAwayContainer } from "../ClickAwayContainer";
17
+ import { useCreatePortal } from "../Satellite";
18
18
  import stl from "../styles/helpers/satellitePrefixer";
19
19
  import DropdownButtonItem from "./components/DropdownButtonItem";
20
20
  import { DropdownCollapsibleItem, DropdownCollapsibleItemsSingleGroup } from "./components/DropdownCollapsibleItem";
@@ -55,6 +55,7 @@ export var Dropdown = function Dropdown(_ref) {
55
55
  renderTarget = _ref.renderTarget,
56
56
  renderFooter = _ref.renderFooter,
57
57
  children = _ref.children;
58
+ var createPortal = useCreatePortal();
58
59
 
59
60
  var _useState = useState(false),
60
61
  _useState2 = _slicedToArray(_useState, 2),
@@ -100,7 +101,7 @@ export var Dropdown = function Dropdown(_ref) {
100
101
  className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["inline-block leading-none"]))),
101
102
  ref: setTargetEl,
102
103
  children: target
103
- }), showMenu && targetEl && /*#__PURE__*/createPortal( /*#__PURE__*/_jsx(ClickAwayContainer, {
104
+ }), showMenu && targetEl && createPortal( /*#__PURE__*/_jsx(ClickAwayContainer, {
104
105
  element: menuContainerEl,
105
106
  onClickAway: function onClickAway(evt) {
106
107
  var isContainedInTarget = targetEl === null || targetEl === void 0 ? void 0 : targetEl.contains(evt.target);
@@ -122,7 +123,7 @@ export var Dropdown = function Dropdown(_ref) {
122
123
  }) : null]
123
124
  })
124
125
  }))
125
- }), document.body)]
126
+ }))]
126
127
  })
127
128
  });
128
129
  };
@@ -4,7 +4,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
4
4
 
5
5
  var _templateObject, _templateObject2, _templateObject3;
6
6
 
7
- var _excluded = ["children", "variant", "toggle", "startIcon"];
7
+ var _excluded = ["toggle", "children", "variant", "startIcon"];
8
8
 
9
9
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
10
10
 
@@ -19,9 +19,9 @@ export var DropdownButtonItem = function DropdownButtonItem(props) {
19
19
  var dropdownItemProps = useDropdownItemProps(props);
20
20
 
21
21
  var _props$dropdownItemPr = _objectSpread(_objectSpread({}, props), dropdownItemProps),
22
+ toggle = _props$dropdownItemPr.toggle,
22
23
  children = _props$dropdownItemPr.children,
23
24
  variant = _props$dropdownItemPr.variant,
24
- toggle = _props$dropdownItemPr.toggle,
25
25
  StartIcon = _props$dropdownItemPr.startIcon,
26
26
  mergedProps = _objectWithoutProperties(_props$dropdownItemPr, _excluded);
27
27
 
@@ -29,7 +29,6 @@ export var DropdownLinkItem = function DropdownLinkItem(props) {
29
29
  mergedProps = _objectWithoutProperties(_props$dropdownItemPr, _excluded);
30
30
 
31
31
  return /*#__PURE__*/_jsxs("a", _objectSpread(_objectSpread({
32
- tabIndex: disabled ? -1 : undefined,
33
32
  className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex items-center"]))), className)
34
33
  }, mergedProps), {}, {
35
34
  children: [StartIcon && /*#__PURE__*/_jsx(StartIcon, {
@@ -6,8 +6,16 @@ export interface DropdownBaseItemProps<T extends HTMLElement = HTMLElement> {
6
6
  onClick?: EventHandler<MouseEvent<T>>;
7
7
  }
8
8
  export declare const useDropdownItemProps: <T extends HTMLElement = HTMLElement>(props: DropdownBaseItemProps<T>) => {
9
+ disabled: boolean;
10
+ "aria-disabled": boolean;
11
+ tabIndex: number;
12
+ onClick: undefined;
9
13
  className: string;
14
+ } | {
15
+ disabled?: undefined;
16
+ "aria-disabled"?: undefined;
17
+ tabIndex?: undefined;
10
18
  onClick: (evt: MouseEvent<T, globalThis.MouseEvent>) => void;
11
- disabled: boolean | undefined;
19
+ className: string;
12
20
  };
13
21
  export default useDropdownItemProps;
@@ -1,7 +1,12 @@
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
1
2
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
3
 
3
4
  var _templateObject;
4
5
 
6
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
7
+
8
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
9
+
5
10
  import cx from "classnames";
6
11
  import stl from "../styles/helpers/satellitePrefixer";
7
12
  import { useDropdownContext } from "./DropdownContext";
@@ -10,11 +15,15 @@ export var useDropdownItemProps = function useDropdownItemProps(props) {
10
15
  showMenu = _useDropdownContext.showMenu;
11
16
 
12
17
  var className = cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n flex items-center\n min-h-10 px-4 text-left\n focus:no-underline hover:no-underline\n ", "\n "])), props.disabled ? "text-grey-300 cursor-not-allowed" : "text-inherit hover:bg-grey-100 focus:bg-grey-100 focus:outline-none cursor-pointer"), props.className);
13
- return {
18
+ var disabledProps = props.disabled ? {
19
+ disabled: true,
20
+ "aria-disabled": true,
21
+ tabIndex: -1,
22
+ onClick: undefined
23
+ } : {};
24
+ return _objectSpread({
14
25
  className: className,
15
- onClick: props.disabled ? function (evt) {
16
- return evt.preventDefault();
17
- } : function (evt) {
26
+ onClick: function onClick(evt) {
18
27
  if (props.onClick) {
19
28
  props.onClick(evt);
20
29
  }
@@ -22,8 +31,7 @@ export var useDropdownItemProps = function useDropdownItemProps(props) {
22
31
  if (!evt.defaultPrevented && props.toggle) {
23
32
  showMenu(false);
24
33
  }
25
- },
26
- disabled: props.disabled
27
- };
34
+ }
35
+ }, disabledProps);
28
36
  };
29
37
  export default useDropdownItemProps;