@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,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
+ };
@@ -0,0 +1,7 @@
1
+ import type { FC } from "react";
2
+ import type { SidebarLinksGroupLink } from "./types";
3
+ declare type LinkProps = SidebarLinksGroupLink & {
4
+ active: boolean;
5
+ };
6
+ export declare const SidebarGroupLink: FC<LinkProps>;
7
+ export {};
@@ -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 { useSidebarContext } from "../SidebarContext";
11
+ import useLinkProps from "../../utils/useLinkProps";
16
12
  import { jsx as _jsx } from "react/jsx-runtime";
17
- export var SidebarHeader = function SidebarHeader(_ref) {
18
- var className = _ref.className,
19
- children = _ref.children,
20
- headingProps = _objectWithoutProperties(_ref, _excluded);
21
-
22
- var _useSidebarContext = useSidebarContext(),
23
- variant = _useSidebarContext.variant,
24
- collapsed = _useSidebarContext.collapsed;
25
-
26
- return /*#__PURE__*/_jsx("h3", _objectSpread(_objectSpread({}, headingProps), {}, {
27
- className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n h-10 pl-8\n flex items-center\n display-subheading uppercase\n ", "\n ", "\n "])), variant === "dark" ? "text-white" : "text-grey-900", collapsed && "invisible overflow-hidden"), className),
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,2 @@
1
+ export * from "./SidebarLinksGroup";
2
+ export type { SidebarLinksGroupLink } from "./types";
@@ -0,0 +1,2 @@
1
+ export * from "./SidebarLinksGroup";
2
+ export {};
@@ -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
+ };
@@ -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,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,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
+ };
@@ -8,25 +8,25 @@ var tabsPlugin = plugin(function (_ref) {
8
8
  ".tabs-tabbar": {
9
9
  scrollBehavior: "smooth"
10
10
  },
11
- ".tab[data-selected]": {
11
+ ".tab[aria-selected=true]": {
12
12
  color: theme("colors.grey.900")
13
13
  },
14
- ".tab-grey[data-selected], .tab-grey:hover, .tab-grey:focus": {
14
+ ".tab-grey[aria-selected=true], .tab-grey:hover, .tab-grey:focus": {
15
15
  borderBottomColor: theme("colors.grey.300")
16
16
  },
17
- ".tab-accent[data-selected], .tab-accent:hover, .tab-accent:focus": {
17
+ ".tab-accent[aria-selected=true], .tab-accent:hover, .tab-accent:focus": {
18
18
  borderBottomColor: theme("colors.accent.600")
19
19
  },
20
- ".tab-blue[data-selected], .tab-blue:hover, .tab-blue:focus": {
20
+ ".tab-blue[aria-selected=true], .tab-blue:hover, .tab-blue:focus": {
21
21
  borderBottomColor: theme("colors.blue.600")
22
22
  },
23
- ".tab-green[data-selected], .tab-green:hover, .tab-green:focus": {
23
+ ".tab-green[aria-selected=true], .tab-green:hover, .tab-green:focus": {
24
24
  borderBottomColor: theme("colors.green.600")
25
25
  },
26
- ".tab-orange[data-selected], .tab-orange:hover, .tab-orange:focus": {
26
+ ".tab-orange[aria-selected=true], .tab-orange:hover, .tab-orange:focus": {
27
27
  borderBottomColor: theme("colors.orange.600")
28
28
  },
29
- ".tab-red[data-selected], .tab-red:hover, .tab-red:focus": {
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], &[data-disabled=true]": {
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("data-disabled")));
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("data-disabled")));
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
- "data-selected": true
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 (tab.disabled) {
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 && /*#__PURE__*/createPortal( /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, attributes.popper), {}, {
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
- })), document.body)]
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 && /*#__PURE__*/createPortal( /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, attributes.popper), {}, {
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
- })), document.body)]
193
+ })))]
193
194
  });
194
195
  };
195
196
  export default TooltipWrapper;
package/esm/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/esm/index.js 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";
@@ -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("../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")]
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 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;
@@ -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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@algolia/satellite",
3
- "version": "1.0.0-beta.134",
3
+ "version": "1.0.0-beta.135",
4
4
  "description": "Algolia design system React components",
5
5
  "scripts": {
6
6
  "clean": "rimraf dist",