@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.
- package/cjs/AutoComplete/AutoComplete.js +3 -1
- package/cjs/DatePicker/components/Modal.js +5 -4
- package/cjs/Dropdown/Dropdown.js +5 -4
- package/cjs/Dropdown/components/DropdownButtonItem.js +2 -2
- package/cjs/Dropdown/components/DropdownLinkItem.js +0 -1
- package/cjs/Dropdown/useDropdownItemProps.d.ts +9 -1
- package/cjs/Dropdown/useDropdownItemProps.js +16 -7
- package/cjs/Flag/Flags.d.ts +1 -1
- package/cjs/Flag/Flags.js +5 -4
- package/cjs/Link/ButtonLink.js +1 -10
- package/cjs/Modal/Modal.d.ts +1 -1
- package/cjs/Modal/Modal.js +3 -4
- package/cjs/Satellite/Satellite.d.ts +1 -0
- package/cjs/Satellite/Satellite.js +3 -1
- package/cjs/Satellite/SatelliteContext.d.ts +1 -0
- package/cjs/Satellite/index.d.ts +1 -0
- package/cjs/Satellite/index.js +14 -0
- package/cjs/Satellite/locale.d.ts +5 -3
- package/cjs/Satellite/useCreatePortal.d.ts +4 -0
- package/cjs/Satellite/useCreatePortal.js +29 -0
- package/cjs/ScrollIndicator/ScrollIndicator.js +2 -1
- package/cjs/Sidebar/Sidebar.d.ts +33 -12
- package/cjs/Sidebar/Sidebar.js +48 -38
- package/cjs/Sidebar/SidebarButtonLink.d.ts +14 -0
- package/cjs/Sidebar/SidebarButtonLink.js +110 -0
- package/cjs/Sidebar/SidebarContext.d.ts +7 -8
- package/cjs/Sidebar/SidebarContext.js +10 -11
- package/cjs/Sidebar/SidebarHeader.d.ts +6 -0
- package/cjs/Sidebar/SidebarHeader.js +29 -0
- package/cjs/Sidebar/SidebarHeading.d.ts +6 -0
- package/cjs/Sidebar/SidebarHeading.js +35 -0
- package/cjs/Sidebar/SidebarLink.d.ts +8 -0
- package/cjs/Sidebar/SidebarLink.js +58 -0
- package/cjs/Sidebar/SidebarLinksGroup/ActiveLinkIndicator.d.ts +8 -0
- package/cjs/Sidebar/SidebarLinksGroup/ActiveLinkIndicator.js +47 -0
- package/cjs/Sidebar/SidebarLinksGroup/SidebarGroupLink.d.ts +7 -0
- package/cjs/Sidebar/{components/SidebarHeader.js → SidebarLinksGroup/SidebarGroupLink.js} +14 -23
- package/cjs/Sidebar/SidebarLinksGroup/SidebarLinksGroup.d.ts +23 -0
- package/cjs/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js +120 -0
- package/cjs/Sidebar/SidebarLinksGroup/index.d.ts +2 -0
- package/cjs/Sidebar/SidebarLinksGroup/index.js +18 -0
- package/cjs/Sidebar/SidebarLinksGroup/types.d.ts +10 -0
- package/cjs/Sidebar/SidebarLinksGroup/types.js +5 -0
- package/cjs/Sidebar/SidebarNav.d.ts +9 -0
- package/cjs/Sidebar/SidebarNav.js +46 -0
- package/cjs/Sidebar/index.d.ts +7 -4
- package/cjs/Sidebar/index.js +61 -21
- package/cjs/Sidebar/types.d.ts +6 -2
- package/cjs/Tabs/Tabs.tailwind.js +8 -8
- package/cjs/Tabs/components/LinkTab.js +7 -9
- package/cjs/Tooltip/OverflowTooltipWrapper.js +5 -4
- package/cjs/Tooltip/TooltipWrapper.js +5 -4
- package/cjs/index.d.ts +0 -1
- package/cjs/index.js +0 -14
- package/cjs/styles/tailwind.config.js +1 -1
- package/cjs/utils/useLinkProps.d.ts +5 -2
- package/cjs/utils/useLinkProps.js +9 -2
- package/esm/AutoComplete/AutoComplete.js +3 -1
- package/esm/DatePicker/components/Modal.js +4 -3
- package/esm/Dropdown/Dropdown.js +4 -3
- package/esm/Dropdown/components/DropdownButtonItem.js +2 -2
- package/esm/Dropdown/components/DropdownLinkItem.js +0 -1
- package/esm/Dropdown/useDropdownItemProps.d.ts +9 -1
- package/esm/Dropdown/useDropdownItemProps.js +15 -7
- package/esm/Flag/Flags.d.ts +1 -1
- package/esm/Flag/Flags.js +4 -3
- package/esm/Link/ButtonLink.js +1 -10
- package/esm/Modal/Modal.d.ts +1 -1
- package/esm/Modal/Modal.js +4 -4
- package/esm/Satellite/Satellite.d.ts +1 -0
- package/esm/Satellite/Satellite.js +3 -1
- package/esm/Satellite/SatelliteContext.d.ts +1 -0
- package/esm/Satellite/index.d.ts +1 -0
- package/esm/Satellite/index.js +1 -0
- package/esm/Satellite/locale.d.ts +5 -3
- package/esm/Satellite/useCreatePortal.d.ts +4 -0
- package/esm/Satellite/useCreatePortal.js +16 -0
- package/esm/ScrollIndicator/ScrollIndicator.js +2 -1
- package/esm/Sidebar/Sidebar.d.ts +33 -12
- package/esm/Sidebar/Sidebar.js +44 -29
- package/esm/Sidebar/SidebarButtonLink.d.ts +14 -0
- package/esm/Sidebar/SidebarButtonLink.js +92 -0
- package/esm/Sidebar/SidebarContext.d.ts +7 -8
- package/esm/Sidebar/SidebarContext.js +9 -8
- package/esm/Sidebar/SidebarHeader.d.ts +6 -0
- package/esm/Sidebar/SidebarHeader.js +15 -0
- package/esm/Sidebar/SidebarHeading.d.ts +6 -0
- package/esm/Sidebar/SidebarHeading.js +20 -0
- package/esm/Sidebar/SidebarLink.d.ts +8 -0
- package/esm/Sidebar/SidebarLink.js +42 -0
- package/esm/Sidebar/SidebarLinksGroup/ActiveLinkIndicator.d.ts +8 -0
- package/esm/Sidebar/SidebarLinksGroup/ActiveLinkIndicator.js +32 -0
- package/esm/Sidebar/SidebarLinksGroup/SidebarGroupLink.d.ts +7 -0
- package/esm/Sidebar/{components/SidebarHeader.js → SidebarLinksGroup/SidebarGroupLink.js} +13 -19
- package/esm/Sidebar/SidebarLinksGroup/SidebarLinksGroup.d.ts +23 -0
- package/esm/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js +100 -0
- package/esm/Sidebar/SidebarLinksGroup/index.d.ts +2 -0
- package/esm/Sidebar/SidebarLinksGroup/index.js +2 -0
- package/esm/Sidebar/SidebarLinksGroup/types.d.ts +10 -0
- package/esm/Sidebar/SidebarLinksGroup/types.js +1 -0
- package/esm/Sidebar/SidebarNav.d.ts +9 -0
- package/esm/Sidebar/SidebarNav.js +31 -0
- package/esm/Sidebar/index.d.ts +7 -4
- package/esm/Sidebar/index.js +7 -4
- package/esm/Sidebar/types.d.ts +6 -2
- package/esm/Tabs/Tabs.tailwind.js +8 -8
- package/esm/Tabs/components/LinkTab.js +7 -9
- package/esm/Tooltip/OverflowTooltipWrapper.js +4 -3
- package/esm/Tooltip/TooltipWrapper.js +4 -3
- package/esm/index.d.ts +0 -1
- package/esm/index.js +0 -1
- package/esm/styles/tailwind.config.js +1 -1
- package/esm/utils/useLinkProps.d.ts +5 -2
- package/esm/utils/useLinkProps.js +9 -2
- package/package.json +1 -1
- package/satellite.min.css +1 -1
- package/cjs/Banner/Banner.d.ts +0 -86
- package/cjs/Banner/Banner.js +0 -176
- package/cjs/Banner/index.d.ts +0 -2
- package/cjs/Banner/index.js +0 -32
- package/cjs/Sidebar/Sidebar.tailwind.d.ts +0 -5
- package/cjs/Sidebar/Sidebar.tailwind.js +0 -66
- package/cjs/Sidebar/components/SidebarHeader.d.ts +0 -5
- package/cjs/Sidebar/components/SidebarLink.d.ts +0 -10
- package/cjs/Sidebar/components/SidebarLink.js +0 -98
- package/esm/Banner/Banner.d.ts +0 -86
- package/esm/Banner/Banner.js +0 -161
- package/esm/Banner/index.d.ts +0 -2
- package/esm/Banner/index.js +0 -2
- package/esm/Sidebar/Sidebar.tailwind.d.ts +0 -5
- package/esm/Sidebar/Sidebar.tailwind.js +0 -64
- package/esm/Sidebar/components/SidebarHeader.d.ts +0 -5
- package/esm/Sidebar/components/SidebarLink.d.ts +0 -10
- 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;
|
package/cjs/Sidebar/index.d.ts
CHANGED
@@ -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
|
4
|
-
export * from "./components/SidebarLink";
|
5
|
-
export * from "./components/SidebarHeader";
|
6
|
-
export { default } from "./Sidebar";
|
9
|
+
export { useSidebarContext } from "./SidebarContext";
|
package/cjs/Sidebar/index.js
CHANGED
@@ -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
|
-
|
6
|
+
var _exportNames = {
|
7
|
+
useSidebarContext: true
|
8
|
+
};
|
9
|
+
Object.defineProperty(exports, "useSidebarContext", {
|
10
10
|
enumerable: true,
|
11
11
|
get: function get() {
|
12
|
-
return
|
12
|
+
return _SidebarContext.useSidebarContext;
|
13
13
|
}
|
14
14
|
});
|
15
15
|
|
16
|
-
var _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
|
30
|
+
var _SidebarButtonLink = require("./SidebarButtonLink");
|
31
31
|
|
32
|
-
Object.keys(
|
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] ===
|
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
|
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
|
58
|
+
var _SidebarHeading = require("./SidebarHeading");
|
45
59
|
|
46
|
-
Object.keys(
|
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] ===
|
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
|
67
|
+
return _SidebarHeading[key];
|
54
68
|
}
|
55
69
|
});
|
56
70
|
});
|
57
71
|
|
58
|
-
var _SidebarLink = require("./
|
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
|
86
|
+
var _SidebarLinksGroup = require("./SidebarLinksGroup");
|
73
87
|
|
74
|
-
Object.keys(
|
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] ===
|
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
|
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
|
-
|
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
|
-
|
128
|
+
var _SidebarContext = require("./SidebarContext");
|
package/cjs/Sidebar/types.d.ts
CHANGED
@@ -1,2 +1,6 @@
|
|
1
|
-
export declare type SidebarVariant = "
|
2
|
-
export declare type
|
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[
|
13
|
+
".tab[aria-selected=true]": {
|
14
14
|
color: theme("colors.grey.900")
|
15
15
|
},
|
16
|
-
".tab-grey[
|
16
|
+
".tab-grey[aria-selected=true], .tab-grey:hover, .tab-grey:focus": {
|
17
17
|
borderBottomColor: theme("colors.grey.300")
|
18
18
|
},
|
19
|
-
".tab-accent[
|
19
|
+
".tab-accent[aria-selected=true], .tab-accent:hover, .tab-accent:focus": {
|
20
20
|
borderBottomColor: theme("colors.accent.600")
|
21
21
|
},
|
22
|
-
".tab-blue[
|
22
|
+
".tab-blue[aria-selected=true], .tab-blue:hover, .tab-blue:focus": {
|
23
23
|
borderBottomColor: theme("colors.blue.600")
|
24
24
|
},
|
25
|
-
".tab-green[
|
25
|
+
".tab-green[aria-selected=true], .tab-green:hover, .tab-green:focus": {
|
26
26
|
borderBottomColor: theme("colors.green.600")
|
27
27
|
},
|
28
|
-
".tab-orange[
|
28
|
+
".tab-orange[aria-selected=true], .tab-orange:hover, .tab-orange:focus": {
|
29
29
|
borderBottomColor: theme("colors.orange.600")
|
30
30
|
},
|
31
|
-
".tab-red[
|
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], &[
|
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("
|
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("
|
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
|
-
|
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 (
|
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 &&
|
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
|
-
}))
|
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 &&
|
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
|
-
}))
|
213
|
+
})))]
|
213
214
|
});
|
214
215
|
};
|
215
216
|
|
package/cjs/index.d.ts
CHANGED
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("../
|
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
|
3
|
-
|
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
|
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
|
-
})
|
67
|
+
}));
|
67
68
|
};
|
68
69
|
|
69
70
|
export default Modal;
|
package/esm/Dropdown/Dropdown.js
CHANGED
@@ -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 &&
|
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
|
-
})
|
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 = ["
|
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
|
-
|
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
|
-
|
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:
|
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
|
-
|
27
|
-
};
|
34
|
+
}
|
35
|
+
}, disabledProps);
|
28
36
|
};
|
29
37
|
export default useDropdownItemProps;
|