@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
@@ -44,5 +44,5 @@ export interface FlagsProps {
44
44
  *
45
45
  * When there are multiple flags, they will stack on top of one another with the most recent flag on top. When a user dismisses a flag, any older flags 'below' will come to the top. Careful consideration should be taken to take into account the ordering and priority of flags in the stack. Never use dismissible and non-dismissible flags in a stack as flags that automatically dismiss can do so and not be visible to the user.
46
46
  */
47
- export declare const Flags: ({ notifications }: FlagsProps) => import("react").ReactPortal;
47
+ export declare const Flags: ({ notifications }: FlagsProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
48
48
  export default Flags;
package/esm/Flag/Flags.js CHANGED
@@ -9,8 +9,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
9
9
 
10
10
  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; }
11
11
 
12
- import { createPortal } from "react-dom";
13
12
  import { CSSTransition, TransitionGroup } from "react-transition-group";
13
+ import { useCreatePortal } from "../Satellite";
14
14
  import stl from "../styles/helpers/satellitePrefixer";
15
15
  import Flag from "./Flag";
16
16
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -56,7 +56,8 @@ var TRANSITION_TIMEOUT = 500;
56
56
  export var Flags = function Flags(_ref) {
57
57
  var _ref$notifications = _ref.notifications,
58
58
  notifications = _ref$notifications === void 0 ? [] : _ref$notifications;
59
- return /*#__PURE__*/createPortal( /*#__PURE__*/_jsx(TransitionGroup, {
59
+ var createPortal = useCreatePortal();
60
+ return createPortal( /*#__PURE__*/_jsx(TransitionGroup, {
60
61
  className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["z-notification bottom-0 right-0 fixed flex flex-col items-end p-4"]))),
61
62
  component: "ul",
62
63
  children: notifications.map(function (_ref2) {
@@ -81,6 +82,6 @@ export var Flags = function Flags(_ref) {
81
82
  })
82
83
  }, id);
83
84
  })
84
- }), document.body);
85
+ }));
85
86
  };
86
87
  export default Flags;
@@ -22,16 +22,7 @@ export var ButtonLink = function ButtonLink(_ref) {
22
22
 
23
23
  return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread(_objectSpread({}, props), linkProps), {}, {
24
24
  endIcon: EndIcon,
25
- as: "a",
26
- onClick: function onClick(evt) {
27
- if (props.disabled) {
28
- evt.preventDefault();
29
- } else {
30
- var _linkProps$onClick;
31
-
32
- (_linkProps$onClick = linkProps.onClick) === null || _linkProps$onClick === void 0 ? void 0 : _linkProps$onClick.call(linkProps, evt);
33
- }
34
- }
25
+ as: "a"
35
26
  }));
36
27
  };
37
28
  export default ButtonLink;
@@ -17,7 +17,7 @@ export interface ModalProps {
17
17
  locale?: ModalLocale;
18
18
  }
19
19
  export declare const Modal: {
20
- ({ title, className, children, open, fullBleed, onDismiss, animate, hideCloseIcon, size, centerY, locale: propsLocale, }: ModalProps): import("react").ReactPortal;
20
+ ({ title, className, children, open, fullBleed, onDismiss, animate, hideCloseIcon, size, centerY, locale: propsLocale, }: ModalProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
21
21
  Footer: import("react").FunctionComponent<import("./components/ModalFooter").ModalFooterProps>;
22
22
  };
23
23
  export default Modal;
@@ -10,14 +10,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
10
10
 
11
11
  import cx from "classnames";
12
12
  import { useEffect, useMemo, useRef, useState } from "react";
13
- import { createPortal } from "react-dom";
14
13
  import { X } from "react-feather";
15
14
  import { CSSTransition } from "react-transition-group";
16
15
  import useKeyPressEvent from "react-use/lib/useKeyPressEvent";
17
16
  import useLockBodyScroll from "react-use/lib/useLockBodyScroll";
18
17
  import { IconButton } from "../Button";
19
18
  import Card from "../Card";
20
- import { useLocale } from "../Satellite";
19
+ import { useCreatePortal, useLocale } from "../Satellite";
21
20
  import stl from "../styles/helpers/satellitePrefixer";
22
21
  import uniqueId from "../utils/uniqueId";
23
22
  import ModalFooter from "./components/ModalFooter";
@@ -71,6 +70,7 @@ export var Modal = function Modal(_ref) {
71
70
  _ref$centerY = _ref.centerY,
72
71
  centerY = _ref$centerY === void 0 ? false : _ref$centerY,
73
72
  propsLocale = _ref.locale;
73
+ var createPortal = useCreatePortal();
74
74
  var contextLocale = useLocale("modal");
75
75
 
76
76
  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_MODAL_LOCALE), contextLocale), propsLocale);
@@ -126,7 +126,7 @@ export var Modal = function Modal(_ref) {
126
126
  "aria-label": "Modal"
127
127
  });
128
128
 
129
- return /*#__PURE__*/createPortal( /*#__PURE__*/_jsx(ModalContainer, {
129
+ return createPortal( /*#__PURE__*/_jsx(ModalContainer, {
130
130
  "in": open,
131
131
  children: /*#__PURE__*/_jsxs("div", {
132
132
  children: [/*#__PURE__*/_jsx("div", {
@@ -160,7 +160,7 @@ export var Modal = function Modal(_ref) {
160
160
  })
161
161
  }))]
162
162
  })
163
- }), document.body);
163
+ }));
164
164
  };
165
165
  Modal.Footer = ModalFooter;
166
166
  export default Modal;
@@ -4,6 +4,7 @@ import type { SatelliteRouter } from "./SatelliteRouter";
4
4
  export interface SatelliteProps {
5
5
  router?: SatelliteRouter;
6
6
  locales?: ComponentsLocales;
7
+ portalTarget?: HTMLElement;
7
8
  children: ReactNode;
8
9
  }
9
10
  export declare const Satellite: FunctionComponent<SatelliteProps>;
@@ -5,11 +5,13 @@ export var Satellite = function Satellite(_ref) {
5
5
  var _ref$router = _ref.router,
6
6
  router = _ref$router === void 0 ? defaultRouter : _ref$router,
7
7
  locales = _ref.locales,
8
+ portalTarget = _ref.portalTarget,
8
9
  children = _ref.children;
9
10
  return /*#__PURE__*/_jsx(SatelliteContext.Provider, {
10
11
  value: {
11
12
  router: router,
12
- locales: locales
13
+ locales: locales,
14
+ portalTarget: portalTarget
13
15
  },
14
16
  children: children
15
17
  });
@@ -4,6 +4,7 @@ import { SatelliteRouter } from "./SatelliteRouter";
4
4
  export interface SatelliteContextType {
5
5
  router: SatelliteRouter;
6
6
  locales?: ComponentsLocales;
7
+ portalTarget?: HTMLElement;
7
8
  }
8
9
  export declare const SatelliteContext: import("react").Context<SatelliteContextType>;
9
10
  export declare const useSatelliteContext: () => SatelliteContextType;
@@ -2,4 +2,5 @@ export * from "./Satellite";
2
2
  export * from "./SatelliteContext";
3
3
  export * from "./SatelliteRouter";
4
4
  export * from "./locale";
5
+ export * from "./useCreatePortal";
5
6
  export { default } from "./Satellite";
@@ -2,4 +2,5 @@ export * from "./Satellite";
2
2
  export * from "./SatelliteContext";
3
3
  export * from "./SatelliteRouter";
4
4
  export * from "./locale";
5
+ export * from "./useCreatePortal";
5
6
  export { default } from "./Satellite";
@@ -8,20 +8,22 @@ import type { ModalLocale } from "../Modal";
8
8
  import type { PaginationLocale } from "../Pagination";
9
9
  import type { CompactPaginationLocale } from "../Pagination/CompactPagination";
10
10
  import type { DotPaginationLocale } from "../Pagination/DotPagination";
11
+ import type { SidebarLocale } from "../Sidebar";
11
12
  import type { DataTableLocale } from "../Tables/DataTable";
12
13
  import type { TagLocale } from "../Tag";
13
14
  export declare type ComponentsLocales = {
14
15
  announcementBadge?: AnnouncementBadgeLocale;
15
16
  autoComplete?: AutoCompleteLocale;
17
+ compactPagination?: CompactPaginationLocale;
18
+ dataTable?: DataTableLocale;
16
19
  datePicker?: DatePickerLocale;
20
+ dotPagination?: DotPaginationLocale;
17
21
  dropzone?: DropzoneLocale;
18
22
  flag?: FlagLocale;
19
23
  input?: InputPropsLocale;
20
24
  modal?: ModalLocale;
21
- compactPagination?: CompactPaginationLocale;
22
- dotPagination?: DotPaginationLocale;
23
25
  pagination?: PaginationLocale;
24
- dataTable?: DataTableLocale;
26
+ sidebar?: SidebarLocale;
25
27
  tag?: TagLocale;
26
28
  };
27
29
  export declare const useLocale: <ComponentKey extends keyof ComponentsLocales>(componentKey: ComponentKey) => ComponentsLocales[ComponentKey];
@@ -0,0 +1,4 @@
1
+ import { ReactElement, ReactNode } from "react";
2
+ declare type CreatePortal = (children: ReactNode) => ReactElement;
3
+ export declare const useCreatePortal: () => CreatePortal;
4
+ export {};
@@ -0,0 +1,16 @@
1
+ import { Fragment } from "react";
2
+ import { createPortal } from "react-dom";
3
+ import { useSatelliteContext } from "./SatelliteContext";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ export var useCreatePortal = function useCreatePortal() {
6
+ var _useSatelliteContext = useSatelliteContext(),
7
+ portalTarget = _useSatelliteContext.portalTarget; // SSR? Too bad! Abort, abort!
8
+
9
+
10
+ if (typeof document === "undefined") return function () {
11
+ return /*#__PURE__*/_jsx(Fragment, {});
12
+ };
13
+ return function (children) {
14
+ return /*#__PURE__*/createPortal(children, portalTarget !== null && portalTarget !== void 0 ? portalTarget : document.body);
15
+ };
16
+ };
@@ -84,7 +84,8 @@ export var ScrollIndicator = function ScrollIndicator(_ref) {
84
84
  children: /*#__PURE__*/createElement(tagName, {
85
85
  style: style,
86
86
  className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["scroll-indicator-content"]))), className),
87
- ref: setScrollIndicatorsRef
87
+ ref: setScrollIndicatorsRef,
88
+ tabIndex: 0
88
89
  }, children)
89
90
  });
90
91
  };
@@ -1,14 +1,35 @@
1
- import type { DetailedHTMLProps, HTMLAttributes } from "react";
2
- import type { SidebarCollapsed, SidebarVariant } from "./types";
3
- export interface SidebarProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
4
- /** @default "dark" */
1
+ import type { FC, ReactNode } from "react";
2
+ import type { SidebarLocale, SidebarLocation, SidebarVariant } from "./types";
3
+ export interface SidebarProps {
4
+ id?: string;
5
+ className?: string;
6
+ label?: string;
7
+ locale?: SidebarLocale;
8
+ collapsed?: boolean;
9
+ /**
10
+ * As the name of the variants imply,
11
+ * - `primary` should be used for your first level of navigation
12
+ * - `secondary` should be used for your second level of navigation
13
+ */
5
14
  variant?: SidebarVariant;
6
- /** @default false */
7
- collapsed?: SidebarCollapsed;
15
+ /**
16
+ * Used to determine whether a link should be highlighted as "active"
17
+ * Ideally only one link should be shown as active at any given time.
18
+ *
19
+ * @example <caption>with a location of /foo/bar</caption>
20
+ * isLinkActive('/foo', location) // returns true
21
+ *
22
+ * @example <caption>with a location of /bar</caption>
23
+ * isLinkActive('/foo', location) // returns false
24
+ *
25
+ * */
26
+ isLinkActive?: (href: string, location: SidebarLocation) => boolean;
27
+ /**
28
+ * location is used in conjunction with `isLinkActive` to display active links properly.
29
+ * It is injected from outside so that it can work with different router libraries and
30
+ * re-render when necessary.
31
+ */
32
+ location: SidebarLocation;
33
+ children?: ReactNode;
8
34
  }
9
- export declare const Sidebar: {
10
- ({ className, variant, collapsed, children, ...navProps }: SidebarProps): JSX.Element;
11
- Header: ({ className, children, ...headingProps }: import("./components/SidebarHeader").SidebarHeaderProps) => JSX.Element;
12
- Link: import("react").FunctionComponent<import("./components/SidebarLink").SidebarLinkProps>;
13
- };
14
- export default Sidebar;
35
+ export declare const Sidebar: FC<SidebarProps>;
@@ -1,45 +1,60 @@
1
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
3
- import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
-
5
- var _templateObject;
2
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
6
3
 
7
- var _excluded = ["className", "variant", "collapsed", "children"];
4
+ var _templateObject, _templateObject2, _templateObject3;
8
5
 
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
10
  import cx from "classnames";
14
- import { useMemo } from "react";
11
+ import { useCallback } from "react";
12
+ import { useLocale } from "../Satellite";
13
+ import ScrollIndicator from "../ScrollIndicator";
15
14
  import stl from "../styles/helpers/satellitePrefixer";
16
- import SidebarHeader from "./components/SidebarHeader";
17
- import SidebarLink from "./components/SidebarLink";
18
- import SidebarContext, { SIDEBAR_CONTEXT_DEFAULT } from "./SidebarContext";
15
+ import matchLocation from "../utils/matchLocation";
16
+ import { SidebarContext } from "./SidebarContext";
19
17
  import { jsx as _jsx } from "react/jsx-runtime";
18
+ var DEFAULT_SIDEBAR_LOCALE = {
19
+ primarySidebarLabel: "Primary Navigation Sidebar",
20
+ secondarySidebarLabel: "Secondary Navigation Sidebar"
21
+ };
20
22
  export var Sidebar = function Sidebar(_ref) {
21
- var className = _ref.className,
23
+ var id = _ref.id,
24
+ className = _ref.className,
25
+ labelProp = _ref.label,
26
+ localeProp = _ref.locale,
22
27
  _ref$variant = _ref.variant,
23
- variant = _ref$variant === void 0 ? SIDEBAR_CONTEXT_DEFAULT.variant : _ref$variant,
28
+ variant = _ref$variant === void 0 ? "primary" : _ref$variant,
24
29
  _ref$collapsed = _ref.collapsed,
25
- collapsed = _ref$collapsed === void 0 ? SIDEBAR_CONTEXT_DEFAULT.collapsed : _ref$collapsed,
26
- children = _ref.children,
27
- navProps = _objectWithoutProperties(_ref, _excluded);
30
+ collapsed = _ref$collapsed === void 0 ? false : _ref$collapsed,
31
+ _ref$isLinkActive = _ref.isLinkActive,
32
+ isLinkActiveProp = _ref$isLinkActive === void 0 ? matchLocation : _ref$isLinkActive,
33
+ location = _ref.location,
34
+ children = _ref.children;
35
+ var isLinkActive = useCallback(function (href) {
36
+ return isLinkActiveProp(href, location);
37
+ }, [isLinkActiveProp, location]);
38
+ var contextLocale = useLocale("sidebar");
28
39
 
29
- var sidebarContext = useMemo(function () {
30
- return {
31
- variant: variant,
32
- collapsed: collapsed
33
- };
34
- }, [variant, collapsed]);
40
+ var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_SIDEBAR_LOCALE), contextLocale), localeProp);
41
+
42
+ var label = typeof labelProp === "string" ? labelProp : variant === "primary" ? locale.primarySidebarLabel : locale.secondarySidebarLabel;
35
43
  return /*#__PURE__*/_jsx(SidebarContext.Provider, {
36
- value: sidebarContext,
37
- children: /*#__PURE__*/_jsx("nav", _objectSpread(_objectSpread({}, navProps), {}, {
38
- className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["sidebar ", " ", " display-body"])), variant === "light" && "sidebar-light", collapsed && "sidebar-collapsed"), className),
39
- children: children
40
- }))
44
+ value: {
45
+ collapsed: collapsed,
46
+ variant: variant,
47
+ isLinkActive: isLinkActive
48
+ },
49
+ children: /*#__PURE__*/_jsx("aside", {
50
+ id: id,
51
+ "aria-label": label,
52
+ className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display-body border-r border-grey-200/50\n ", "\n ", "\n "])), collapsed ? "w-14" : "w-56", variant === "primary" ? "bg-grey-100" : "bg-white"), className),
53
+ children: /*#__PURE__*/_jsx(ScrollIndicator, {
54
+ wrapperClassName: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["h-full"]))),
55
+ className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["relative px-3 pb-7 flex flex-col no-scrollbar"]))),
56
+ children: children
57
+ })
58
+ })
41
59
  });
42
- };
43
- Sidebar.Header = SidebarHeader;
44
- Sidebar.Link = SidebarLink;
45
- export default Sidebar;
60
+ };
@@ -0,0 +1,14 @@
1
+ import type { FC, MouseEventHandler, ReactNode } from "react";
2
+ import type { IconComponentType } from "../types";
3
+ export declare type SidebarButtonLinkIcon = IconComponentType | {
4
+ active: IconComponentType;
5
+ inactive: IconComponentType;
6
+ };
7
+ export interface SidebarButtonLinkProps {
8
+ id?: string;
9
+ icon: SidebarButtonLinkIcon;
10
+ href: string;
11
+ children: ReactNode;
12
+ onClick?: MouseEventHandler<HTMLAnchorElement>;
13
+ }
14
+ export declare const SidebarButtonLink: FC<SidebarButtonLinkProps>;
@@ -0,0 +1,92 @@
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
+ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
4
+
5
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
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 { useState } from "react";
12
+ import { BaseLink } from "../Link";
13
+ import stl from "../styles/helpers/satellitePrefixer";
14
+ import { TooltipWrapper } from "../Tooltip";
15
+ import useLinkProps from "../utils/useLinkProps";
16
+ import { useSidebarContext } from "./SidebarContext";
17
+ import { jsx as _jsx } from "react/jsx-runtime";
18
+ import { jsxs as _jsxs } from "react/jsx-runtime";
19
+
20
+ var Tooltip = function Tooltip(_ref) {
21
+ var title = _ref.title,
22
+ children = _ref.children;
23
+ return /*#__PURE__*/_jsx(TooltipWrapper, {
24
+ placement: "right",
25
+ delay: 0,
26
+ hideDelay: 0,
27
+ modifiers: [{
28
+ name: "offset",
29
+ options: {
30
+ offset: [0, 32]
31
+ }
32
+ }],
33
+ content: title,
34
+ wrapperClassName: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["block"]))),
35
+ interactive: false,
36
+ children: children
37
+ });
38
+ };
39
+
40
+ export var SidebarButtonLink = function SidebarButtonLink(_ref2) {
41
+ var id = _ref2.id,
42
+ icon = _ref2.icon,
43
+ href = _ref2.href,
44
+ children = _ref2.children,
45
+ onClick = _ref2.onClick;
46
+
47
+ var _useSidebarContext = useSidebarContext(),
48
+ isLinkActive = _useSidebarContext.isLinkActive,
49
+ collapsed = _useSidebarContext.collapsed;
50
+
51
+ var linkProps = useLinkProps({
52
+ href: href,
53
+ onClick: onClick
54
+ });
55
+
56
+ var _useState = useState(false),
57
+ _useState2 = _slicedToArray(_useState, 2),
58
+ isInteractedWith = _useState2[0],
59
+ setIsInteractedWith = _useState2[1];
60
+
61
+ var isActive = isLinkActive(href);
62
+ var showColors = isActive || isInteractedWith;
63
+ var Icon = "active" in icon ? showColors ? icon.active : icon.inactive : icon;
64
+ return /*#__PURE__*/_jsx(Tooltip, {
65
+ title: collapsed ? children : null,
66
+ children: /*#__PURE__*/_jsxs(BaseLink, _objectSpread(_objectSpread({}, linkProps), {}, {
67
+ id: id,
68
+ onMouseEnter: function onMouseEnter() {
69
+ return setIsInteractedWith(true);
70
+ },
71
+ onFocus: function onFocus() {
72
+ return setIsInteractedWith(true);
73
+ },
74
+ onMouseLeave: function onMouseLeave() {
75
+ return setIsInteractedWith(false);
76
+ },
77
+ onBlur: function onBlur() {
78
+ return setIsInteractedWith(false);
79
+ },
80
+ className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n h-8 min-w-8 w-full rounded\n flex items-center space-x-3\n border border-transparent\n display-body hover:no-underline\n focus:outline-none focus:border-grey-500\n ", "\n ", "\n ", "\n "])), isActive ? "shadow-z100" : "hover:border-grey-200", isActive && "bg-gradient-to-b from-white to-grey-50", collapsed ? "pl-2" : "px-2"),
81
+ "aria-current": isActive,
82
+ children: [/*#__PURE__*/_jsx(Icon, {
83
+ className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["", " ml-[-3px]"])), showColors ? "text-accent-600" : "text-grey-400"),
84
+ height: 20,
85
+ width: 20
86
+ }), /*#__PURE__*/_jsx("span", {
87
+ className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), collapsed && "sr-only", showColors ? "text-accent-600" : "typo-subdued", isActive && "font-bold"),
88
+ children: children
89
+ })]
90
+ }))
91
+ });
92
+ };
@@ -1,10 +1,9 @@
1
1
  /// <reference types="react" />
2
- import type { SidebarCollapsed, SidebarVariant } from "./types";
3
- export interface SideBarContextType {
2
+ import type { SidebarVariant } from "./types";
3
+ export declare type SidebarContextType = {
4
4
  variant: SidebarVariant;
5
- collapsed: SidebarCollapsed;
6
- }
7
- export declare const SIDEBAR_CONTEXT_DEFAULT: SideBarContextType;
8
- export declare const SidebarContext: import("react").Context<SideBarContextType>;
9
- export declare const useSidebarContext: () => SideBarContextType;
10
- export default SidebarContext;
5
+ collapsed: boolean;
6
+ isLinkActive: (href: string) => boolean;
7
+ };
8
+ export declare const SidebarContext: import("react").Context<SidebarContextType | null>;
9
+ export declare const useSidebarContext: () => SidebarContextType;
@@ -1,10 +1,11 @@
1
1
  import { createContext, useContext } from "react";
2
- export var SIDEBAR_CONTEXT_DEFAULT = {
3
- variant: "dark",
4
- collapsed: false
5
- };
6
- export var SidebarContext = /*#__PURE__*/createContext(SIDEBAR_CONTEXT_DEFAULT);
2
+ export var SidebarContext = /*#__PURE__*/createContext(null);
7
3
  export var useSidebarContext = function useSidebarContext() {
8
- return useContext(SidebarContext);
9
- };
10
- export default SidebarContext;
4
+ var context = useContext(SidebarContext);
5
+
6
+ if (!context) {
7
+ throw new Error("useSidebarContext used outside of Sidebar");
8
+ }
9
+
10
+ return context;
11
+ };
@@ -0,0 +1,6 @@
1
+ import type { FC, ReactNode } from "react";
2
+ export declare type SidebarHeaderProps = {
3
+ className?: string;
4
+ children?: ReactNode;
5
+ };
6
+ export declare const SidebarHeader: FC<SidebarHeaderProps>;
@@ -0,0 +1,15 @@
1
+ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
+
3
+ var _templateObject;
4
+
5
+ import cx from "classnames";
6
+ import stl from "../styles/helpers/satellitePrefixer";
7
+ import { jsx as _jsx } from "react/jsx-runtime";
8
+ export var SidebarHeader = function SidebarHeader(_ref) {
9
+ var className = _ref.className,
10
+ children = _ref.children;
11
+ return /*#__PURE__*/_jsx("header", {
12
+ className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["h-[72px] shrink-0 border-b border-grey-200/50"]))), className),
13
+ children: children
14
+ });
15
+ };
@@ -0,0 +1,6 @@
1
+ import type { FC, ReactNode } from "react";
2
+ export declare type SidebarHeadingProps = {
3
+ className?: string;
4
+ children: ReactNode;
5
+ };
6
+ export declare const SidebarHeading: FC<SidebarHeadingProps>;
@@ -0,0 +1,20 @@
1
+ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
+
3
+ var _templateObject;
4
+
5
+ import cx from "classnames";
6
+ import stl from "../styles/helpers/satellitePrefixer";
7
+ import { useSidebarContext } from "./SidebarContext";
8
+ import { jsx as _jsx } from "react/jsx-runtime";
9
+ export var SidebarHeading = function SidebarHeading(_ref) {
10
+ var className = _ref.className,
11
+ children = _ref.children;
12
+
13
+ var _useSidebarContext = useSidebarContext(),
14
+ collapsed = _useSidebarContext.collapsed;
15
+
16
+ return /*#__PURE__*/_jsx("span", {
17
+ className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n h-8 pl-2 block leading-[2rem]\n display-subheading typo-subdued uppercase select-none\n ", "\n "])), collapsed && "invisible"), className),
18
+ children: children
19
+ });
20
+ };
@@ -0,0 +1,8 @@
1
+ import type { FC, ReactNode } from "react";
2
+ import type { IconComponentType } from "../types";
3
+ export declare type SidebarLinkProps = {
4
+ icon: IconComponentType;
5
+ disabled?: boolean;
6
+ children: ReactNode;
7
+ } & Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "id" | "className" | "href" | "target" | "rel" | "aria-label" | "onClick">;
8
+ export declare const SidebarLink: FC<SidebarLinkProps>;
@@ -0,0 +1,42 @@
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
+ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
3
+
4
+ var _templateObject, _templateObject2, _templateObject3;
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
+
10
+ import cx from "classnames";
11
+ import stl from "../styles/helpers/satellitePrefixer";
12
+ import useLinkProps from "../utils/useLinkProps";
13
+ import { useSidebarContext } from "./SidebarContext";
14
+ import { jsx as _jsx } from "react/jsx-runtime";
15
+ import { jsxs as _jsxs } from "react/jsx-runtime";
16
+ export var SidebarLink = function SidebarLink(props) {
17
+ var _linkProps$href;
18
+
19
+ var _useSidebarContext = useSidebarContext(),
20
+ isLinkActive = _useSidebarContext.isLinkActive;
21
+
22
+ var id = props.id,
23
+ className = props.className,
24
+ disabled = props.disabled,
25
+ Icon = props.icon,
26
+ children = props.children;
27
+ var linkProps = useLinkProps(props);
28
+ var isActive = !disabled && isLinkActive((_linkProps$href = linkProps.href) !== null && _linkProps$href !== void 0 ? _linkProps$href : "");
29
+ return /*#__PURE__*/_jsxs("a", _objectSpread(_objectSpread({}, linkProps), {}, {
30
+ id: id,
31
+ className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n flex items-center\n group hover:no-underline focus:outline-none\n ", "\n "])), disabled ? "cursor-not-allowed" : "cursor-pointer"), className),
32
+ "aria-current": isActive,
33
+ children: [/*#__PURE__*/_jsx(Icon, {
34
+ className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["shrink-0 mr-3 ", ""])), disabled ? "text-grey-300" : "text-grey-500"),
35
+ width: "1rem",
36
+ height: "1rem"
37
+ }), /*#__PURE__*/_jsx("span", {
38
+ className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n flex-1 truncate\n ", ""])), disabled ? "text-grey-300" : isActive ? "font-semibold text-accent-600" : "typo-subdued focus:text-accent-600 group-hover:text-accent-600"),
39
+ children: children
40
+ })]
41
+ }));
42
+ };
@@ -0,0 +1,8 @@
1
+ import type { FC } from "react";
2
+ declare type ActiveLinkIndicatorProps = {
3
+ className?: string;
4
+ activeIndex?: number;
5
+ linksCount: number;
6
+ };
7
+ export declare const ActiveLinkIndicator: FC<ActiveLinkIndicatorProps>;
8
+ export {};