@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,32 @@
|
|
1
|
+
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
2
|
+
|
3
|
+
var _templateObject, _templateObject2, _templateObject3;
|
4
|
+
|
5
|
+
import cx from "classnames";
|
6
|
+
import stl from "../../styles/helpers/satellitePrefixer";
|
7
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
8
|
+
var LINK_HEIGHT_PX = 24;
|
9
|
+
var LINKS_SPACING_PX = 8;
|
10
|
+
export var ActiveLinkIndicator = function ActiveLinkIndicator(_ref) {
|
11
|
+
var className = _ref.className,
|
12
|
+
activeIndex = _ref.activeIndex,
|
13
|
+
linksCount = _ref.linksCount;
|
14
|
+
var showIndicator = typeof activeIndex === "number" && activeIndex >= 0;
|
15
|
+
return /*#__PURE__*/_jsx("div", {
|
16
|
+
className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["w-4 flex justify-center"]))), className),
|
17
|
+
style: {
|
18
|
+
height: linksCount * LINK_HEIGHT_PX + (linksCount - 1) * LINKS_SPACING_PX
|
19
|
+
},
|
20
|
+
"aria-hidden": true,
|
21
|
+
children: /*#__PURE__*/_jsx("div", {
|
22
|
+
className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["w-px h-full bg-grey-200"]))),
|
23
|
+
children: /*#__PURE__*/_jsx("div", {
|
24
|
+
className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n w-px bg-accent-500\n transition-transform duration-100 ease-in-out\n ", "\n "])), showIndicator ? "visible" : "hidden"),
|
25
|
+
style: {
|
26
|
+
height: LINK_HEIGHT_PX,
|
27
|
+
transform: typeof activeIndex === "number" ? "translateY(".concat(activeIndex * (LINK_HEIGHT_PX + LINKS_SPACING_PX), "px)") : undefined
|
28
|
+
}
|
29
|
+
})
|
30
|
+
})
|
31
|
+
});
|
32
|
+
};
|
@@ -1,31 +1,25 @@
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
2
2
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
3
|
-
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
4
3
|
|
5
4
|
var _templateObject;
|
6
5
|
|
7
|
-
var _excluded = ["className", "children"];
|
8
|
-
|
9
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; }
|
10
7
|
|
11
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; }
|
12
9
|
|
13
|
-
import cx from "classnames";
|
14
10
|
import stl from "../../styles/helpers/satellitePrefixer";
|
15
|
-
import
|
11
|
+
import useLinkProps from "../../utils/useLinkProps";
|
16
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
17
|
-
export var
|
18
|
-
var
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
var
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
children: children
|
13
|
+
export var SidebarGroupLink = function SidebarGroupLink(props) {
|
14
|
+
var label = props.label,
|
15
|
+
active = props.active,
|
16
|
+
id = props.id,
|
17
|
+
disabled = props.disabled;
|
18
|
+
var linkProps = useLinkProps(props);
|
19
|
+
return /*#__PURE__*/_jsx("a", _objectSpread(_objectSpread({}, linkProps), {}, {
|
20
|
+
id: id,
|
21
|
+
className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n block hover:no-underline focus:outline-none leading-md\n ", "\n ", ""])), disabled ? "cursor-not-allowed" : "cursor-pointer", disabled ? "text-grey-300" : active ? "font-semibold text-accent-600" : "typo-subdued hover:text-accent-600 focus:text-accent-600"),
|
22
|
+
"aria-current": active,
|
23
|
+
children: label
|
29
24
|
}));
|
30
|
-
};
|
31
|
-
export default SidebarHeader;
|
25
|
+
};
|
@@ -0,0 +1,23 @@
|
|
1
|
+
import type { ReactNode } from "react";
|
2
|
+
import type { IconComponentType } from "../../types";
|
3
|
+
import type { SidebarLinksGroupLink } from "./types";
|
4
|
+
declare type SidebarLinksGroupBaseProps = {
|
5
|
+
id?: string;
|
6
|
+
className?: string;
|
7
|
+
links: SidebarLinksGroupLink[];
|
8
|
+
};
|
9
|
+
export declare type StaticSidebarLinksGroupProps = SidebarLinksGroupBaseProps & {
|
10
|
+
title?: never;
|
11
|
+
icon?: never;
|
12
|
+
initialIsOpen?: never;
|
13
|
+
onGroupToggle?: never;
|
14
|
+
};
|
15
|
+
export declare type CollapsibleSidebarLinksGroupProps = SidebarLinksGroupBaseProps & {
|
16
|
+
title: ReactNode;
|
17
|
+
icon: IconComponentType;
|
18
|
+
initialIsOpen?: boolean;
|
19
|
+
onGroupToggle?: (open: boolean) => void;
|
20
|
+
};
|
21
|
+
export declare type SidebarLinksGroupProps = StaticSidebarLinksGroupProps | CollapsibleSidebarLinksGroupProps;
|
22
|
+
export declare const SidebarLinksGroup: (props: SidebarLinksGroupProps) => JSX.Element;
|
23
|
+
export {};
|
@@ -0,0 +1,100 @@
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
2
|
+
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
3
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
4
|
+
|
5
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
6
|
+
|
7
|
+
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; }
|
8
|
+
|
9
|
+
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; }
|
10
|
+
|
11
|
+
import { uniqueId } from "lodash";
|
12
|
+
import { useEffect, useMemo, useState } from "react";
|
13
|
+
import { ChevronRight } from "react-feather";
|
14
|
+
import usePrevious from "react-use/lib/usePrevious";
|
15
|
+
import stl from "../../styles/helpers/satellitePrefixer";
|
16
|
+
import { useSidebarContext } from "../SidebarContext";
|
17
|
+
import { ActiveLinkIndicator } from "./ActiveLinkIndicator";
|
18
|
+
import { SidebarGroupLink } from "./SidebarGroupLink";
|
19
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
20
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
21
|
+
|
22
|
+
var isCollapsibleSidebarLinksGroupProps = function isCollapsibleSidebarLinksGroupProps(props) {
|
23
|
+
return "title" in props && "icon" in props;
|
24
|
+
};
|
25
|
+
|
26
|
+
export var SidebarLinksGroup = function SidebarLinksGroup(props) {
|
27
|
+
var _useSidebarContext = useSidebarContext(),
|
28
|
+
isLinkActive = _useSidebarContext.isLinkActive;
|
29
|
+
|
30
|
+
var id = props.id,
|
31
|
+
className = props.className,
|
32
|
+
links = props.links;
|
33
|
+
var contentId = useMemo(function () {
|
34
|
+
return uniqueId("links-group-");
|
35
|
+
}, []);
|
36
|
+
var activeLinkIndex = links.findIndex(function (link) {
|
37
|
+
return !link.disabled && isLinkActive(link.href);
|
38
|
+
});
|
39
|
+
var previousActiveLinkIndex = usePrevious(activeLinkIndex);
|
40
|
+
var hasMatchingLink = activeLinkIndex >= 0;
|
41
|
+
|
42
|
+
var _useState = useState(!isCollapsibleSidebarLinksGroupProps(props) || hasMatchingLink || props.initialIsOpen !== false),
|
43
|
+
_useState2 = _slicedToArray(_useState, 2),
|
44
|
+
isOpen = _useState2[0],
|
45
|
+
setIsOpen = _useState2[1];
|
46
|
+
|
47
|
+
useEffect(function () {
|
48
|
+
if (isCollapsibleSidebarLinksGroupProps(props)) {
|
49
|
+
var _props$onGroupToggle;
|
50
|
+
|
51
|
+
(_props$onGroupToggle = props.onGroupToggle) === null || _props$onGroupToggle === void 0 ? void 0 : _props$onGroupToggle.call(props, isOpen);
|
52
|
+
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
53
|
+
|
54
|
+
}, [isOpen]);
|
55
|
+
useEffect(function () {
|
56
|
+
if (!isOpen && activeLinkIndex >= 0 && typeof previousActiveLinkIndex === "number" && activeLinkIndex !== previousActiveLinkIndex) {
|
57
|
+
setIsOpen(true);
|
58
|
+
}
|
59
|
+
}, [activeLinkIndex, previousActiveLinkIndex, isOpen]);
|
60
|
+
return /*#__PURE__*/_jsxs("div", {
|
61
|
+
id: id,
|
62
|
+
className: className,
|
63
|
+
children: [isCollapsibleSidebarLinksGroupProps(props) && /*#__PURE__*/_jsxs("button", {
|
64
|
+
className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n flex w-full text-left items-center mb-4 overflow-hidden focus:outline-none group cursor-pointer"]))),
|
65
|
+
onClick: function onClick() {
|
66
|
+
return setIsOpen(!isOpen);
|
67
|
+
},
|
68
|
+
"aria-expanded": isOpen,
|
69
|
+
"aria-controls": contentId,
|
70
|
+
children: [/*#__PURE__*/_jsx(props.icon, {
|
71
|
+
className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["shrink-0 text-grey-500 mr-3"]))),
|
72
|
+
size: "1rem"
|
73
|
+
}), /*#__PURE__*/_jsx("span", {
|
74
|
+
className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["truncate display-subheading uppercase text-grey-800 group-hover:text-accent-500 mr-2"]))),
|
75
|
+
children: props.title
|
76
|
+
}), /*#__PURE__*/_jsx(ChevronRight, {
|
77
|
+
className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["shrink-0 text-grey-500 transition-all duration-150 ease-in-out ", ""])), isOpen && "rotate-90"),
|
78
|
+
size: "1rem"
|
79
|
+
})]
|
80
|
+
}), /*#__PURE__*/_jsxs("div", {
|
81
|
+
id: contentId,
|
82
|
+
className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flex ", ""])), !isOpen && "hidden"),
|
83
|
+
children: [/*#__PURE__*/_jsx(ActiveLinkIndicator, {
|
84
|
+
className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["shrink-0 mr-3"]))),
|
85
|
+
activeIndex: activeLinkIndex,
|
86
|
+
linksCount: links.length
|
87
|
+
}), /*#__PURE__*/_jsx("ul", {
|
88
|
+
className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["flex-1 space-y-2 overflow-hidden"]))),
|
89
|
+
children: links.map(function (link, idx) {
|
90
|
+
return /*#__PURE__*/_jsx("li", {
|
91
|
+
className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["truncate"]))),
|
92
|
+
children: /*#__PURE__*/_jsx(SidebarGroupLink, _objectSpread(_objectSpread({}, link), {}, {
|
93
|
+
active: activeLinkIndex === idx
|
94
|
+
}))
|
95
|
+
}, "".concat(idx, "-").concat(link.href));
|
96
|
+
})
|
97
|
+
})]
|
98
|
+
})]
|
99
|
+
});
|
100
|
+
};
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import type { MouseEventHandler, ReactNode } from "react";
|
2
|
+
export declare type SidebarLinksGroupLink = {
|
3
|
+
id?: string;
|
4
|
+
href: string;
|
5
|
+
target?: string;
|
6
|
+
rel?: string;
|
7
|
+
onClick?: MouseEventHandler<HTMLAnchorElement>;
|
8
|
+
disabled?: boolean;
|
9
|
+
label: ReactNode;
|
10
|
+
};
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import type { FC, ReactNode } from "react";
|
2
|
+
export declare type SidebarNavSpacing = "small" | "large";
|
3
|
+
export declare type SidebarNavProps = {
|
4
|
+
className?: string;
|
5
|
+
spacing?: SidebarNavSpacing;
|
6
|
+
label: string;
|
7
|
+
children: ReactNode;
|
8
|
+
};
|
9
|
+
export declare const SidebarNav: FC<SidebarNavProps>;
|
@@ -0,0 +1,31 @@
|
|
1
|
+
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
2
|
+
|
3
|
+
var _templateObject;
|
4
|
+
|
5
|
+
import { Children } from "react";
|
6
|
+
import stl from "../styles/helpers/satellitePrefixer";
|
7
|
+
import { useSidebarContext } from "./SidebarContext";
|
8
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
9
|
+
export var SidebarNav = function SidebarNav(_ref) {
|
10
|
+
var className = _ref.className,
|
11
|
+
spacingProp = _ref.spacing,
|
12
|
+
label = _ref.label,
|
13
|
+
children = _ref.children;
|
14
|
+
|
15
|
+
var _useSidebarContext = useSidebarContext(),
|
16
|
+
variant = _useSidebarContext.variant;
|
17
|
+
|
18
|
+
var spacing = typeof spacingProp === "string" ? spacingProp : variant === "primary" ? "small" : "large";
|
19
|
+
return /*#__PURE__*/_jsx("nav", {
|
20
|
+
className: className,
|
21
|
+
"aria-label": label,
|
22
|
+
children: /*#__PURE__*/_jsx("ul", {
|
23
|
+
className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["", ""])), spacing === "small" ? "space-y-2" : "px-3 space-y-8"),
|
24
|
+
children: Children.map(children, function (child, index) {
|
25
|
+
return /*#__PURE__*/_jsx("li", {
|
26
|
+
children: child
|
27
|
+
}, index);
|
28
|
+
})
|
29
|
+
})
|
30
|
+
});
|
31
|
+
};
|
package/esm/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/esm/Sidebar/index.js
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/esm/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
|
+
};
|
@@ -8,25 +8,25 @@ var tabsPlugin = plugin(function (_ref) {
|
|
8
8
|
".tabs-tabbar": {
|
9
9
|
scrollBehavior: "smooth"
|
10
10
|
},
|
11
|
-
".tab[
|
11
|
+
".tab[aria-selected=true]": {
|
12
12
|
color: theme("colors.grey.900")
|
13
13
|
},
|
14
|
-
".tab-grey[
|
14
|
+
".tab-grey[aria-selected=true], .tab-grey:hover, .tab-grey:focus": {
|
15
15
|
borderBottomColor: theme("colors.grey.300")
|
16
16
|
},
|
17
|
-
".tab-accent[
|
17
|
+
".tab-accent[aria-selected=true], .tab-accent:hover, .tab-accent:focus": {
|
18
18
|
borderBottomColor: theme("colors.accent.600")
|
19
19
|
},
|
20
|
-
".tab-blue[
|
20
|
+
".tab-blue[aria-selected=true], .tab-blue:hover, .tab-blue:focus": {
|
21
21
|
borderBottomColor: theme("colors.blue.600")
|
22
22
|
},
|
23
|
-
".tab-green[
|
23
|
+
".tab-green[aria-selected=true], .tab-green:hover, .tab-green:focus": {
|
24
24
|
borderBottomColor: theme("colors.green.600")
|
25
25
|
},
|
26
|
-
".tab-orange[
|
26
|
+
".tab-orange[aria-selected=true], .tab-orange:hover, .tab-orange:focus": {
|
27
27
|
borderBottomColor: theme("colors.orange.600")
|
28
28
|
},
|
29
|
-
".tab-red[
|
29
|
+
".tab-red[aria-selected=true], .tab-red:hover, .tab-red:focus": {
|
30
30
|
borderBottomColor: theme("colors.red.600")
|
31
31
|
},
|
32
32
|
".tab": {
|
@@ -38,7 +38,7 @@ var tabsPlugin = plugin(function (_ref) {
|
|
38
38
|
display: "inline-flex",
|
39
39
|
justifyContent: "center",
|
40
40
|
minWidth: theme("spacing.12"),
|
41
|
-
"&[disabled], &[
|
41
|
+
"&[disabled], &[aria-disabled=true]": {
|
42
42
|
color: theme("colors.grey.400"),
|
43
43
|
borderBottomColor: "transparent",
|
44
44
|
cursor: "not-allowed"
|
@@ -25,7 +25,7 @@ var getNextNonDisabledSibling = function getNextNonDisabledSibling(el) {
|
|
25
25
|
var _next, _next$nextElementSibl, _next2, _next3, _next3$parentElement;
|
26
26
|
|
27
27
|
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;
|
28
|
-
} while (Boolean((_next = next) === null || _next === void 0 ? void 0 : _next.getAttribute("
|
28
|
+
} while (Boolean((_next = next) === null || _next === void 0 ? void 0 : _next.getAttribute("aria-disabled")));
|
29
29
|
|
30
30
|
return (_ref = next) !== null && _ref !== void 0 ? _ref : null;
|
31
31
|
};
|
@@ -40,7 +40,7 @@ var getPreviousNonDisabledSibling = function getPreviousNonDisabledSibling(el) {
|
|
40
40
|
var _next4, _next$previousElement, _next5, _next6, _next6$parentElement;
|
41
41
|
|
42
42
|
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;
|
43
|
-
} while (Boolean((_next4 = next) === null || _next4 === void 0 ? void 0 : _next4.getAttribute("
|
43
|
+
} while (Boolean((_next4 = next) === null || _next4 === void 0 ? void 0 : _next4.getAttribute("aria-disabled")));
|
44
44
|
|
45
45
|
return (_ref2 = next) !== null && _ref2 !== void 0 ? _ref2 : null;
|
46
46
|
};
|
@@ -52,16 +52,16 @@ export var LinkTab = function LinkTab(_ref3) {
|
|
52
52
|
var variant = tab.variant || "accent";
|
53
53
|
var selectionProps = selected ? {
|
54
54
|
"aria-selected": true,
|
55
|
-
|
55
|
+
tabIndex: 0
|
56
56
|
} : {
|
57
|
-
"aria-selected": false
|
57
|
+
"aria-selected": false,
|
58
|
+
tabIndex: -1
|
58
59
|
};
|
59
60
|
var linkProps = useLinkProps({
|
60
61
|
href: tab.to,
|
62
|
+
disabled: tab.disabled,
|
61
63
|
onClick: function onClick(evt) {
|
62
|
-
if (
|
63
|
-
evt.preventDefault();
|
64
|
-
} else if (_onClick) {
|
64
|
+
if (_onClick) {
|
65
65
|
_onClick(evt);
|
66
66
|
}
|
67
67
|
}
|
@@ -70,8 +70,6 @@ export var LinkTab = function LinkTab(_ref3) {
|
|
70
70
|
id: tab.id,
|
71
71
|
role: "tab",
|
72
72
|
className: cx(ACTIVE_UNDERLINE_VARIANT_CLASSNAMES[variant], stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["tab pb-3 text-base leading-sm hover:no-underline"]))), tab.className),
|
73
|
-
tabIndex: selected ? 0 : -1,
|
74
|
-
"data-disabled": tab.disabled,
|
75
73
|
onKeyDown: function onKeyDown(evt) {
|
76
74
|
if (tab.disabled) return;
|
77
75
|
|
@@ -11,8 +11,8 @@ 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";
|
15
|
+
import { useCreatePortal } from "../Satellite";
|
16
16
|
import stl from "../styles/helpers/satellitePrefixer";
|
17
17
|
import TextWrap from "../TextWrap";
|
18
18
|
import Tooltip from "./Tooltip";
|
@@ -37,6 +37,7 @@ export var OverflowTooltipWrapper = function OverflowTooltipWrapper(_ref) {
|
|
37
37
|
modifiers = _ref$modifiers === void 0 ? [] : _ref$modifiers,
|
38
38
|
_ref$noArrow = _ref.noArrow,
|
39
39
|
noArrow = _ref$noArrow === void 0 ? false : _ref$noArrow;
|
40
|
+
var createPortal = useCreatePortal();
|
40
41
|
|
41
42
|
var _useState = useState(null),
|
42
43
|
_useState2 = _slicedToArray(_useState, 2),
|
@@ -86,7 +87,7 @@ export var OverflowTooltipWrapper = function OverflowTooltipWrapper(_ref) {
|
|
86
87
|
onMouseEnter: onMouseEnter,
|
87
88
|
onMouseLeave: onMouseLeave,
|
88
89
|
children: children
|
89
|
-
}), tooltipText &&
|
90
|
+
}), tooltipText && createPortal( /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, attributes.popper), {}, {
|
90
91
|
style: styles.popper,
|
91
92
|
className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["tooltip-wrapper-popper"]))), tooltipClassName),
|
92
93
|
ref: setPopperEl,
|
@@ -100,7 +101,7 @@ export var OverflowTooltipWrapper = function OverflowTooltipWrapper(_ref) {
|
|
100
101
|
children: tooltipText
|
101
102
|
})
|
102
103
|
})]
|
103
|
-
}))
|
104
|
+
})))]
|
104
105
|
});
|
105
106
|
};
|
106
107
|
export default OverflowTooltipWrapper;
|
@@ -12,8 +12,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
12
12
|
import cx from "classnames";
|
13
13
|
import throttle from "lodash.throttle";
|
14
14
|
import { useCallback, useEffect, useRef, useState } from "react";
|
15
|
-
import { createPortal } from "react-dom";
|
16
15
|
import { usePopper } from "react-popper";
|
16
|
+
import { useCreatePortal } from "../Satellite";
|
17
17
|
import stl from "../styles/helpers/satellitePrefixer";
|
18
18
|
import Tooltip from "./Tooltip";
|
19
19
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
@@ -45,6 +45,7 @@ export var TooltipWrapper = function TooltipWrapper(_ref) {
|
|
45
45
|
noArrow = _ref$noArrow === void 0 ? false : _ref$noArrow,
|
46
46
|
_ref$interactive = _ref.interactive,
|
47
47
|
interactive = _ref$interactive === void 0 ? true : _ref$interactive;
|
48
|
+
var createPortal = useCreatePortal();
|
48
49
|
var isControlled = typeof show === "boolean";
|
49
50
|
|
50
51
|
var _useState = useState(!!show),
|
@@ -177,7 +178,7 @@ export var TooltipWrapper = function TooltipWrapper(_ref) {
|
|
177
178
|
}
|
178
179
|
}), {}, {
|
179
180
|
children: children
|
180
|
-
})), showTooltip &&
|
181
|
+
})), showTooltip && createPortal( /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, attributes.popper), {}, {
|
181
182
|
style: styles.popper,
|
182
183
|
className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["tooltip-wrapper-popper"]))), tooltipClassName),
|
183
184
|
ref: setPopperEl,
|
@@ -189,7 +190,7 @@ export var TooltipWrapper = function TooltipWrapper(_ref) {
|
|
189
190
|
variant: tooltipVariant,
|
190
191
|
children: tooltipContent
|
191
192
|
})]
|
192
|
-
}))
|
193
|
+
})))]
|
193
194
|
});
|
194
195
|
};
|
195
196
|
export default TooltipWrapper;
|
package/esm/index.d.ts
CHANGED
package/esm/index.js
CHANGED
@@ -143,5 +143,5 @@ export default {
|
|
143
143
|
}
|
144
144
|
}
|
145
145
|
},
|
146
|
-
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("../
|
146
|
+
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")]
|
147
147
|
};
|
@@ -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;
|
@@ -35,11 +35,18 @@ export var useLinkProps = function useLinkProps(props) {
|
|
35
35
|
var isExternal = router.isExternalLocation(parsedLocation);
|
36
36
|
var target = (_props$target = props.target) !== null && _props$target !== void 0 ? _props$target : router.shouldOpenInNewTab(parsedLocation) ? "_blank" : undefined;
|
37
37
|
var rel = (_props$rel = props.rel) !== null && _props$rel !== void 0 ? _props$rel : isExternal ? "noopener noreferrer" : undefined;
|
38
|
-
return {
|
38
|
+
return props.disabled ? {
|
39
|
+
role: "link",
|
40
|
+
target: target,
|
41
|
+
tabIndex: -1,
|
42
|
+
"aria-disabled": true
|
43
|
+
} : {
|
39
44
|
target: target,
|
40
45
|
href: href,
|
41
46
|
rel: rel,
|
42
|
-
onClick: onClick
|
47
|
+
onClick: onClick,
|
48
|
+
role: props.role,
|
49
|
+
tabIndex: props.tabIndex
|
43
50
|
};
|
44
51
|
};
|
45
52
|
export default useLinkProps;
|