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

package/cjs/AutoComplete/AutoComplete.js

@@ -571,6 +571,8 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
       });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderSelect", function (autocompleteHelpers, fieldState) {
+      var _this$context$portalT;
+
       var _this$props5 = _this.props,
           className = _this$props5.className,
           options = _this$props5.options,
@@ -588,7 +590,7 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
 
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: className,
-        children: [_this.renderInput(results, autocompleteHelpers, fieldState), _this.inputContainerRef && /*#__PURE__*/(0, _reactDom.createPortal)(_this.renderMenu(results, autocompleteHelpers), document.body)]
+        children: [_this.renderInput(results, autocompleteHelpers, fieldState), _this.inputContainerRef && /*#__PURE__*/(0, _reactDom.createPortal)(_this.renderMenu(results, autocompleteHelpers), (_this$context$portalT = _this.context["portalTarget"]) !== null && _this$context$portalT !== void 0 ? _this$context$portalT : document.body)]
       });
     });
     return _this;

package/cjs/DatePicker/components/Modal.js

@@ -19,12 +19,12 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = require("react");
 
-var _reactDom = require("react-dom");
-
 var _reactPopper = require("react-popper");
 
 var _ClickAwayContainer = require("../../ClickAwayContainer");
 
+var _Satellite = require("../../Satellite");
+
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -53,6 +53,7 @@ var Modal = function Modal(_ref) {
       _ref$modifiers = _ref.modifiers,
       modifiers = _ref$modifiers === void 0 ? [] : _ref$modifiers,
       className = _ref.className;
+  var createPortal = (0, _Satellite.useCreatePortal)();
 
   var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -71,7 +72,7 @@ var Modal = function Modal(_ref) {
     return null;
   }
 
-  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayContainer.ClickAwayContainer, {
+  return createPortal( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayContainer.ClickAwayContainer, {
     element: datePickerElement,
     onClickAway: function onClickAway(evt) {
       return _onClickAway === null || _onClickAway === void 0 ? void 0 : _onClickAway(evt);
@@ -83,7 +84,7 @@ var Modal = function Modal(_ref) {
       style: styles.popper,
       children: children
     }))
-  }), document.body);
+  }));
 };
 
 var _default = Modal;

package/cjs/Dropdown/Dropdown.js

@@ -19,14 +19,14 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = require("react");
 
-var _reactDom = require("react-dom");
-
 var _reactPopper = require("react-popper");
 
 var _Card = _interopRequireDefault(require("../Card"));
 
 var _ClickAwayContainer = require("../ClickAwayContainer");
 
+var _Satellite = require("../Satellite");
+
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
 var _DropdownButtonItem = _interopRequireDefault(require("./components/DropdownButtonItem"));
@@ -85,6 +85,7 @@ var Dropdown = function Dropdown(_ref) {
       renderTarget = _ref.renderTarget,
       renderFooter = _ref.renderFooter,
       children = _ref.children;
+  var createPortal = (0, _Satellite.useCreatePortal)();
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -130,7 +131,7 @@ var Dropdown = function Dropdown(_ref) {
         className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["inline-block leading-none"]))),
         ref: setTargetEl,
         children: target
-      }), showMenu && targetEl && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayContainer.ClickAwayContainer, {
+      }), showMenu && targetEl && createPortal( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayContainer.ClickAwayContainer, {
         element: menuContainerEl,
         onClickAway: function onClickAway(evt) {
           var isContainedInTarget = targetEl === null || targetEl === void 0 ? void 0 : targetEl.contains(evt.target);
@@ -152,7 +153,7 @@ var Dropdown = function Dropdown(_ref) {
             }) : null]
           })
         }))
-      }), document.body)]
+      }))]
     })
   });
 };

package/cjs/Dropdown/components/DropdownButtonItem.js

@@ -23,7 +23,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2, _templateObject3;
 
-var _excluded = ["children", "variant", "toggle", "startIcon"];
+var _excluded = ["toggle", "children", "variant", "startIcon"];
 
 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; }
 
@@ -33,9 +33,9 @@ var DropdownButtonItem = function DropdownButtonItem(props) {
   var dropdownItemProps = (0, _useDropdownItemProps["default"])(props);
 
   var _props$dropdownItemPr = _objectSpread(_objectSpread({}, props), dropdownItemProps),
+      toggle = _props$dropdownItemPr.toggle,
       children = _props$dropdownItemPr.children,
       variant = _props$dropdownItemPr.variant,
-      toggle = _props$dropdownItemPr.toggle,
       StartIcon = _props$dropdownItemPr.startIcon,
       mergedProps = (0, _objectWithoutProperties2["default"])(_props$dropdownItemPr, _excluded);
 

package/cjs/Dropdown/components/DropdownLinkItem.js

@@ -44,7 +44,6 @@ var DropdownLinkItem = function DropdownLinkItem(props) {
       mergedProps = (0, _objectWithoutProperties2["default"])(_props$dropdownItemPr, _excluded);
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", _objectSpread(_objectSpread({
-    tabIndex: disabled ? -1 : undefined,
     className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex items-center"]))), className)
   }, mergedProps), {}, {
     children: [StartIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(StartIcon, {

package/cjs/Dropdown/useDropdownItemProps.d.ts

@@ -6,8 +6,16 @@ export interface DropdownBaseItemProps<T extends HTMLElement = HTMLElement> {
     onClick?: EventHandler<MouseEvent<T>>;
 }
 export declare const useDropdownItemProps: <T extends HTMLElement = HTMLElement>(props: DropdownBaseItemProps<T>) => {
+    disabled: boolean;
+    "aria-disabled": boolean;
+    tabIndex: number;
+    onClick: undefined;
     className: string;
+} | {
+    disabled?: undefined;
+    "aria-disabled"?: undefined;
+    tabIndex?: undefined;
     onClick: (evt: MouseEvent<T, globalThis.MouseEvent>) => void;
-    disabled: boolean | undefined;
+    className: string;
 };
 export default useDropdownItemProps;

package/cjs/Dropdown/useDropdownItemProps.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDropdownItemProps = exports["default"] = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -17,16 +19,24 @@ var _DropdownContext = require("./DropdownContext");
 
 var _templateObject;
 
+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; }
+
+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) { (0, _defineProperty2["default"])(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; }
+
 var useDropdownItemProps = function useDropdownItemProps(props) {
   var _useDropdownContext = (0, _DropdownContext.useDropdownContext)(),
       showMenu = _useDropdownContext.showMenu;
 
   var className = (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n      flex items-center\n      min-h-10 px-4 text-left\n      focus:no-underline hover:no-underline\n      ", "\n    "])), props.disabled ? "text-grey-300 cursor-not-allowed" : "text-inherit hover:bg-grey-100 focus:bg-grey-100 focus:outline-none cursor-pointer"), props.className);
-  return {
+  var disabledProps = props.disabled ? {
+    disabled: true,
+    "aria-disabled": true,
+    tabIndex: -1,
+    onClick: undefined
+  } : {};
+  return _objectSpread({
     className: className,
-    onClick: props.disabled ? function (evt) {
-      return evt.preventDefault();
-    } : function (evt) {
+    onClick: function onClick(evt) {
       if (props.onClick) {
         props.onClick(evt);
       }
@@ -34,9 +44,8 @@ var useDropdownItemProps = function useDropdownItemProps(props) {
       if (!evt.defaultPrevented && props.toggle) {
         showMenu(false);
       }
-    },
-    disabled: props.disabled
-  };
+    }
+  }, disabledProps);
 };
 
 exports.useDropdownItemProps = useDropdownItemProps;

package/cjs/Flag/Flags.d.ts

@@ -44,5 +44,5 @@ export interface FlagsProps {
  *
  * 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.
  */
-export declare const Flags: ({ notifications }: FlagsProps) => import("react").ReactPortal;
+export declare const Flags: ({ notifications }: FlagsProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 export default Flags;

package/cjs/Flag/Flags.js

@@ -13,10 +13,10 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _reactDom = require("react-dom");
-
 var _reactTransitionGroup = require("react-transition-group");
 
+var _Satellite = require("../Satellite");
+
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
 var _Flag = _interopRequireDefault(require("./Flag"));
@@ -73,7 +73,8 @@ var TRANSITION_TIMEOUT = 500;
 var Flags = function Flags(_ref) {
   var _ref$notifications = _ref.notifications,
       notifications = _ref$notifications === void 0 ? [] : _ref$notifications;
-  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.TransitionGroup, {
+  var createPortal = (0, _Satellite.useCreatePortal)();
+  return createPortal( /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.TransitionGroup, {
     className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["z-notification bottom-0 right-0 fixed flex flex-col items-end p-4"]))),
     component: "ul",
     children: notifications.map(function (_ref2) {
@@ -97,7 +98,7 @@ var Flags = function Flags(_ref) {
         })
       }, id);
     })
-  }), document.body);
+  }));
 };
 
 exports.Flags = Flags;

package/cjs/Link/ButtonLink.js

@@ -36,16 +36,7 @@ var ButtonLink = function ButtonLink(_ref) {
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], _objectSpread(_objectSpread(_objectSpread({}, props), linkProps), {}, {
     endIcon: EndIcon,
-    as: "a",
-    onClick: function onClick(evt) {
-      if (props.disabled) {
-        evt.preventDefault();
-      } else {
-        var _linkProps$onClick;
-
-        (_linkProps$onClick = linkProps.onClick) === null || _linkProps$onClick === void 0 ? void 0 : _linkProps$onClick.call(linkProps, evt);
-      }
-    }
+    as: "a"
   }));
 };
 

package/cjs/Modal/Modal.d.ts

@@ -17,7 +17,7 @@ export interface ModalProps {
     locale?: ModalLocale;
 }
 export declare const Modal: {
-    ({ title, className, children, open, fullBleed, onDismiss, animate, hideCloseIcon, size, centerY, locale: propsLocale, }: ModalProps): import("react").ReactPortal;
+    ({ title, className, children, open, fullBleed, onDismiss, animate, hideCloseIcon, size, centerY, locale: propsLocale, }: ModalProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     Footer: import("react").FunctionComponent<import("./components/ModalFooter").ModalFooterProps>;
 };
 export default Modal;

package/cjs/Modal/Modal.js

@@ -17,8 +17,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = require("react");
 
-var _reactDom = require("react-dom");
-
 var _reactFeather = require("react-feather");
 
 var _reactTransitionGroup = require("react-transition-group");
@@ -95,6 +93,7 @@ var Modal = function Modal(_ref) {
       _ref$centerY = _ref.centerY,
       centerY = _ref$centerY === void 0 ? false : _ref$centerY,
       propsLocale = _ref.locale;
+  var createPortal = (0, _Satellite.useCreatePortal)();
   var contextLocale = (0, _Satellite.useLocale)("modal");
 
   var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_MODAL_LOCALE), contextLocale), propsLocale);
@@ -150,7 +149,7 @@ var Modal = function Modal(_ref) {
     "aria-label": "Modal"
   });
 
-  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalContainer, {
+  return createPortal( /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalContainer, {
     "in": open,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -184,7 +183,7 @@ var Modal = function Modal(_ref) {
         })
       }))]
     })
-  }), document.body);
+  }));
 };
 
 exports.Modal = Modal;

package/cjs/Satellite/Satellite.d.ts

@@ -4,6 +4,7 @@ import type { SatelliteRouter } from "./SatelliteRouter";
 export interface SatelliteProps {
     router?: SatelliteRouter;
     locales?: ComponentsLocales;
+    portalTarget?: HTMLElement;
     children: ReactNode;
 }
 export declare const Satellite: FunctionComponent<SatelliteProps>;

package/cjs/Satellite/Satellite.js

@@ -17,11 +17,13 @@ var Satellite = function Satellite(_ref) {
   var _ref$router = _ref.router,
       router = _ref$router === void 0 ? _SatelliteRouter.router : _ref$router,
       locales = _ref.locales,
+      portalTarget = _ref.portalTarget,
       children = _ref.children;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SatelliteContext["default"].Provider, {
     value: {
       router: router,
-      locales: locales
+      locales: locales,
+      portalTarget: portalTarget
     },
     children: children
   });

package/cjs/Satellite/SatelliteContext.d.ts

@@ -4,6 +4,7 @@ import { SatelliteRouter } from "./SatelliteRouter";
 export interface SatelliteContextType {
     router: SatelliteRouter;
     locales?: ComponentsLocales;
+    portalTarget?: HTMLElement;
 }
 export declare const SatelliteContext: import("react").Context<SatelliteContextType>;
 export declare const useSatelliteContext: () => SatelliteContextType;

package/cjs/Satellite/index.d.ts

@@ -2,4 +2,5 @@ export * from "./Satellite";
 export * from "./SatelliteContext";
 export * from "./SatelliteRouter";
 export * from "./locale";
+export * from "./useCreatePortal";
 export { default } from "./Satellite";

package/cjs/Satellite/index.js

@@ -69,6 +69,20 @@ Object.keys(_locale).forEach(function (key) {
   });
 });
 
+var _useCreatePortal = require("./useCreatePortal");
+
+Object.keys(_useCreatePortal).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useCreatePortal[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useCreatePortal[key];
+    }
+  });
+});
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/cjs/Satellite/locale.d.ts

@@ -8,20 +8,22 @@ import type { ModalLocale } from "../Modal";
 import type { PaginationLocale } from "../Pagination";
 import type { CompactPaginationLocale } from "../Pagination/CompactPagination";
 import type { DotPaginationLocale } from "../Pagination/DotPagination";
+import type { SidebarLocale } from "../Sidebar";
 import type { DataTableLocale } from "../Tables/DataTable";
 import type { TagLocale } from "../Tag";
 export declare type ComponentsLocales = {
     announcementBadge?: AnnouncementBadgeLocale;
     autoComplete?: AutoCompleteLocale;
+    compactPagination?: CompactPaginationLocale;
+    dataTable?: DataTableLocale;
     datePicker?: DatePickerLocale;
+    dotPagination?: DotPaginationLocale;
     dropzone?: DropzoneLocale;
     flag?: FlagLocale;
     input?: InputPropsLocale;
     modal?: ModalLocale;
-    compactPagination?: CompactPaginationLocale;
-    dotPagination?: DotPaginationLocale;
     pagination?: PaginationLocale;
-    dataTable?: DataTableLocale;
+    sidebar?: SidebarLocale;
     tag?: TagLocale;
 };
 export declare const useLocale: <ComponentKey extends keyof ComponentsLocales>(componentKey: ComponentKey) => ComponentsLocales[ComponentKey];

package/cjs/Satellite/useCreatePortal.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement, ReactNode } from "react";
+declare type CreatePortal = (children: ReactNode) => ReactElement;
+export declare const useCreatePortal: () => CreatePortal;
+export {};

package/cjs/Satellite/useCreatePortal.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCreatePortal = void 0;
+
+var _react = require("react");
+
+var _reactDom = require("react-dom");
+
+var _SatelliteContext = require("./SatelliteContext");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var useCreatePortal = function useCreatePortal() {
+  var _useSatelliteContext = (0, _SatelliteContext.useSatelliteContext)(),
+      portalTarget = _useSatelliteContext.portalTarget; // SSR? Too bad! Abort, abort!
+
+
+  if (typeof document === "undefined") return function () {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
+  };
+  return function (children) {
+    return /*#__PURE__*/(0, _reactDom.createPortal)(children, portalTarget !== null && portalTarget !== void 0 ? portalTarget : document.body);
+  };
+};
+
+exports.useCreatePortal = useCreatePortal;

package/cjs/ScrollIndicator/ScrollIndicator.js

@@ -100,7 +100,8 @@ var ScrollIndicator = function ScrollIndicator(_ref) {
     children: /*#__PURE__*/(0, _react.createElement)(tagName, {
       style: style,
       className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["scroll-indicator-content"]))), className),
-      ref: setScrollIndicatorsRef
+      ref: setScrollIndicatorsRef,
+      tabIndex: 0
     }, children)
   });
 };

package/cjs/Sidebar/Sidebar.d.ts

@@ -1,14 +1,35 @@
-import type { DetailedHTMLProps, HTMLAttributes } from "react";
-import type { SidebarCollapsed, SidebarVariant } from "./types";
-export interface SidebarProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
-    /** @default "dark" */
+import type { FC, ReactNode } from "react";
+import type { SidebarLocale, SidebarLocation, SidebarVariant } from "./types";
+export interface SidebarProps {
+    id?: string;
+    className?: string;
+    label?: string;
+    locale?: SidebarLocale;
+    collapsed?: boolean;
+    /**
+     * As the name of the variants imply,
+     * - `primary` should be used for your first level of navigation
+     * - `secondary` should be used for your second level of navigation
+     */
     variant?: SidebarVariant;
-    /** @default false */
-    collapsed?: SidebarCollapsed;
+    /**
+     * Used to determine whether a link should be highlighted as "active"
+     * Ideally only one link should be shown as active at any given time.
+     *
+     * @example <caption>with a location of /foo/bar</caption>
+     * isLinkActive('/foo', location) // returns true
+     *
+     * @example <caption>with a location of /bar</caption>
+     * isLinkActive('/foo', location) // returns false
+     *
+     * */
+    isLinkActive?: (href: string, location: SidebarLocation) => boolean;
+    /**
+     * location is used in conjunction with `isLinkActive` to display active links properly.
+     * It is injected from outside so that it can work with different router libraries and
+     * re-render when necessary.
+     */
+    location: SidebarLocation;
+    children?: ReactNode;
 }
-export declare const Sidebar: {
-    ({ className, variant, collapsed, children, ...navProps }: SidebarProps): JSX.Element;
-    Header: ({ className, children, ...headingProps }: import("./components/SidebarHeader").SidebarHeaderProps) => JSX.Element;
-    Link: import("react").FunctionComponent<import("./components/SidebarLink").SidebarLinkProps>;
-};
-export default Sidebar;
+export declare const Sidebar: FC<SidebarProps>;

package/cjs/Sidebar/Sidebar.js

@@ -2,70 +2,80 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Sidebar = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+exports.Sidebar = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = require("react");
 
-var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
-
-var _SidebarHeader = _interopRequireDefault(require("./components/SidebarHeader"));
+var _Satellite = require("../Satellite");
 
-var _SidebarLink = _interopRequireDefault(require("./components/SidebarLink"));
+var _ScrollIndicator = _interopRequireDefault(require("../ScrollIndicator"));
 
-var _SidebarContext = _interopRequireWildcard(require("./SidebarContext"));
-
-var _jsxRuntime = require("react/jsx-runtime");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
-var _templateObject;
+var _matchLocation = _interopRequireDefault(require("../utils/matchLocation"));
 
-var _excluded = ["className", "variant", "collapsed", "children"];
+var _SidebarContext = require("./SidebarContext");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _jsxRuntime = require("react/jsx-runtime");
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _templateObject, _templateObject2, _templateObject3;
 
 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; }
 
 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) { (0, _defineProperty2["default"])(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; }
 
+var DEFAULT_SIDEBAR_LOCALE = {
+  primarySidebarLabel: "Primary Navigation Sidebar",
+  secondarySidebarLabel: "Secondary Navigation Sidebar"
+};
+
 var Sidebar = function Sidebar(_ref) {
-  var className = _ref.className,
+  var id = _ref.id,
+      className = _ref.className,
+      labelProp = _ref.label,
+      localeProp = _ref.locale,
       _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? _SidebarContext.SIDEBAR_CONTEXT_DEFAULT.variant : _ref$variant,
+      variant = _ref$variant === void 0 ? "primary" : _ref$variant,
       _ref$collapsed = _ref.collapsed,
-      collapsed = _ref$collapsed === void 0 ? _SidebarContext.SIDEBAR_CONTEXT_DEFAULT.collapsed : _ref$collapsed,
-      children = _ref.children,
-      navProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var sidebarContext = (0, _react.useMemo)(function () {
-    return {
+      collapsed = _ref$collapsed === void 0 ? false : _ref$collapsed,
+      _ref$isLinkActive = _ref.isLinkActive,
+      isLinkActiveProp = _ref$isLinkActive === void 0 ? _matchLocation["default"] : _ref$isLinkActive,
+      location = _ref.location,
+      children = _ref.children;
+  var isLinkActive = (0, _react.useCallback)(function (href) {
+    return isLinkActiveProp(href, location);
+  }, [isLinkActiveProp, location]);
+  var contextLocale = (0, _Satellite.useLocale)("sidebar");
+
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_SIDEBAR_LOCALE), contextLocale), localeProp);
+
+  var label = typeof labelProp === "string" ? labelProp : variant === "primary" ? locale.primarySidebarLabel : locale.secondarySidebarLabel;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SidebarContext.SidebarContext.Provider, {
+    value: {
+      collapsed: collapsed,
       variant: variant,
-      collapsed: collapsed
-    };
-  }, [variant, collapsed]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SidebarContext["default"].Provider, {
-    value: sidebarContext,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("nav", _objectSpread(_objectSpread({}, navProps), {}, {
-      className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["sidebar ", " ", " display-body"])), variant === "light" && "sidebar-light", collapsed && "sidebar-collapsed"), className),
-      children: children
-    }))
+      isLinkActive: isLinkActive
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("aside", {
+      id: id,
+      "aria-label": label,
+      className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\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),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollIndicator["default"], {
+        wrapperClassName: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["h-full"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["relative px-3 pb-7 flex flex-col no-scrollbar"]))),
+        children: children
+      })
+    })
   });
 };
 
-exports.Sidebar = Sidebar;
-Sidebar.Header = _SidebarHeader["default"];
-Sidebar.Link = _SidebarLink["default"];
-var _default = Sidebar;
-exports["default"] = _default;
+exports.Sidebar = Sidebar;

package/cjs/Sidebar/SidebarButtonLink.d.ts

@@ -0,0 +1,14 @@
+import type { FC, MouseEventHandler, ReactNode } from "react";
+import type { IconComponentType } from "../types";
+export declare type SidebarButtonLinkIcon = IconComponentType | {
+    active: IconComponentType;
+    inactive: IconComponentType;
+};
+export interface SidebarButtonLinkProps {
+    id?: string;
+    icon: SidebarButtonLinkIcon;
+    href: string;
+    children: ReactNode;
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+}
+export declare const SidebarButtonLink: FC<SidebarButtonLinkProps>;