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

package/cjs/Sidebar/SidebarButtonLink.js

@@ -0,0 +1,110 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SidebarButtonLink = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("react");
+
+var _Link = require("../Link");
+
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+
+var _Tooltip = require("../Tooltip");
+
+var _useLinkProps = _interopRequireDefault(require("../utils/useLinkProps"));
+
+var _SidebarContext = require("./SidebarContext");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+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 Tooltip = function Tooltip(_ref) {
+  var title = _ref.title,
+      children = _ref.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.TooltipWrapper, {
+    placement: "right",
+    delay: 0,
+    hideDelay: 0,
+    modifiers: [{
+      name: "offset",
+      options: {
+        offset: [0, 32]
+      }
+    }],
+    content: title,
+    wrapperClassName: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["block"]))),
+    interactive: false,
+    children: children
+  });
+};
+
+var SidebarButtonLink = function SidebarButtonLink(_ref2) {
+  var id = _ref2.id,
+      icon = _ref2.icon,
+      href = _ref2.href,
+      children = _ref2.children,
+      onClick = _ref2.onClick;
+
+  var _useSidebarContext = (0, _SidebarContext.useSidebarContext)(),
+      isLinkActive = _useSidebarContext.isLinkActive,
+      collapsed = _useSidebarContext.collapsed;
+
+  var linkProps = (0, _useLinkProps["default"])({
+    href: href,
+    onClick: onClick
+  });
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isInteractedWith = _useState2[0],
+      setIsInteractedWith = _useState2[1];
+
+  var isActive = isLinkActive(href);
+  var showColors = isActive || isInteractedWith;
+  var Icon = "active" in icon ? showColors ? icon.active : icon.inactive : icon;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, {
+    title: collapsed ? children : null,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Link.BaseLink, _objectSpread(_objectSpread({}, linkProps), {}, {
+      id: id,
+      onMouseEnter: function onMouseEnter() {
+        return setIsInteractedWith(true);
+      },
+      onFocus: function onFocus() {
+        return setIsInteractedWith(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setIsInteractedWith(false);
+      },
+      onBlur: function onBlur() {
+        return setIsInteractedWith(false);
+      },
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\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"),
+      "aria-current": isActive,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["", " ml-[-3px]"])), showColors ? "text-accent-600" : "text-grey-400"),
+        height: 20,
+        width: 20
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n              ", "\n              ", "\n              ", "\n            "])), collapsed && "sr-only", showColors ? "text-accent-600" : "typo-subdued", isActive && "font-bold"),
+        children: children
+      })]
+    }))
+  });
+};
+
+exports.SidebarButtonLink = SidebarButtonLink;

package/cjs/Sidebar/SidebarContext.d.ts

@@ -1,10 +1,9 @@
 /// <reference types="react" />
-import type { SidebarCollapsed, SidebarVariant } from "./types";
-export interface SideBarContextType {
+import type { SidebarVariant } from "./types";
+export declare type SidebarContextType = {
     variant: SidebarVariant;
-    collapsed: SidebarCollapsed;
-}
-export declare const SIDEBAR_CONTEXT_DEFAULT: SideBarContextType;
-export declare const SidebarContext: import("react").Context<SideBarContextType>;
-export declare const useSidebarContext: () => SideBarContextType;
-export default SidebarContext;
+    collapsed: boolean;
+    isLinkActive: (href: string) => boolean;
+};
+export declare const SidebarContext: import("react").Context<SidebarContextType | null>;
+export declare const useSidebarContext: () => SidebarContextType;

package/cjs/Sidebar/SidebarContext.js

@@ -3,22 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useSidebarContext = exports["default"] = exports.SidebarContext = exports.SIDEBAR_CONTEXT_DEFAULT = void 0;
+exports.useSidebarContext = exports.SidebarContext = void 0;
 
 var _react = require("react");
 
-var SIDEBAR_CONTEXT_DEFAULT = {
-  variant: "dark",
-  collapsed: false
-};
-exports.SIDEBAR_CONTEXT_DEFAULT = SIDEBAR_CONTEXT_DEFAULT;
-var SidebarContext = /*#__PURE__*/(0, _react.createContext)(SIDEBAR_CONTEXT_DEFAULT);
+var SidebarContext = /*#__PURE__*/(0, _react.createContext)(null);
 exports.SidebarContext = SidebarContext;
 
 var useSidebarContext = function useSidebarContext() {
-  return (0, _react.useContext)(SidebarContext);
+  var context = (0, _react.useContext)(SidebarContext);
+
+  if (!context) {
+    throw new Error("useSidebarContext used outside of Sidebar");
+  }
+
+  return context;
 };
 
-exports.useSidebarContext = useSidebarContext;
-var _default = SidebarContext;
-exports["default"] = _default;
+exports.useSidebarContext = useSidebarContext;

package/cjs/Sidebar/SidebarHeader.d.ts

@@ -0,0 +1,6 @@
+import type { FC, ReactNode } from "react";
+export declare type SidebarHeaderProps = {
+    className?: string;
+    children?: ReactNode;
+};
+export declare const SidebarHeader: FC<SidebarHeaderProps>;

package/cjs/Sidebar/SidebarHeader.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SidebarHeader = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject;
+
+var SidebarHeader = function SidebarHeader(_ref) {
+  var className = _ref.className,
+      children = _ref.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("header", {
+    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["h-[72px] shrink-0 border-b border-grey-200/50"]))), className),
+    children: children
+  });
+};
+
+exports.SidebarHeader = SidebarHeader;

package/cjs/Sidebar/SidebarHeading.d.ts

@@ -0,0 +1,6 @@
+import type { FC, ReactNode } from "react";
+export declare type SidebarHeadingProps = {
+    className?: string;
+    children: ReactNode;
+};
+export declare const SidebarHeading: FC<SidebarHeadingProps>;

package/cjs/Sidebar/SidebarHeading.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SidebarHeading = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+
+var _SidebarContext = require("./SidebarContext");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject;
+
+var SidebarHeading = function SidebarHeading(_ref) {
+  var className = _ref.className,
+      children = _ref.children;
+
+  var _useSidebarContext = (0, _SidebarContext.useSidebarContext)(),
+      collapsed = _useSidebarContext.collapsed;
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n          h-8 pl-2 block leading-[2rem]\n          display-subheading typo-subdued uppercase select-none\n          ", "\n        "])), collapsed && "invisible"), className),
+    children: children
+  });
+};
+
+exports.SidebarHeading = SidebarHeading;

package/cjs/Sidebar/SidebarLink.d.ts

@@ -0,0 +1,8 @@
+import type { FC, ReactNode } from "react";
+import type { IconComponentType } from "../types";
+export declare type SidebarLinkProps = {
+    icon: IconComponentType;
+    disabled?: boolean;
+    children: ReactNode;
+} & Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "id" | "className" | "href" | "target" | "rel" | "aria-label" | "onClick">;
+export declare const SidebarLink: FC<SidebarLinkProps>;

package/cjs/Sidebar/SidebarLink.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SidebarLink = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+
+var _useLinkProps = _interopRequireDefault(require("../utils/useLinkProps"));
+
+var _SidebarContext = require("./SidebarContext");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+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 SidebarLink = function SidebarLink(props) {
+  var _linkProps$href;
+
+  var _useSidebarContext = (0, _SidebarContext.useSidebarContext)(),
+      isLinkActive = _useSidebarContext.isLinkActive;
+
+  var id = props.id,
+      className = props.className,
+      disabled = props.disabled,
+      Icon = props.icon,
+      children = props.children;
+  var linkProps = (0, _useLinkProps["default"])(props);
+  var isActive = !disabled && isLinkActive((_linkProps$href = linkProps.href) !== null && _linkProps$href !== void 0 ? _linkProps$href : "");
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", _objectSpread(_objectSpread({}, linkProps), {}, {
+    id: id,
+    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n          flex items-center\n          group hover:no-underline focus:outline-none\n          ", "\n        "])), disabled ? "cursor-not-allowed" : "cursor-pointer"), className),
+    "aria-current": isActive,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 mr-3 ", ""])), disabled ? "text-grey-300" : "text-grey-500"),
+      width: "1rem",
+      height: "1rem"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\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"),
+      children: children
+    })]
+  }));
+};
+
+exports.SidebarLink = SidebarLink;

package/cjs/Sidebar/SidebarLinksGroup/ActiveLinkIndicator.d.ts

@@ -0,0 +1,8 @@
+import type { FC } from "react";
+declare type ActiveLinkIndicatorProps = {
+    className?: string;
+    activeIndex?: number;
+    linksCount: number;
+};
+export declare const ActiveLinkIndicator: FC<ActiveLinkIndicatorProps>;
+export {};

package/cjs/Sidebar/SidebarLinksGroup/ActiveLinkIndicator.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActiveLinkIndicator = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+var LINK_HEIGHT_PX = 24;
+var LINKS_SPACING_PX = 8;
+
+var ActiveLinkIndicator = function ActiveLinkIndicator(_ref) {
+  var className = _ref.className,
+      activeIndex = _ref.activeIndex,
+      linksCount = _ref.linksCount;
+  var showIndicator = typeof activeIndex === "number" && activeIndex >= 0;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["w-4 flex justify-center"]))), className),
+    style: {
+      height: linksCount * LINK_HEIGHT_PX + (linksCount - 1) * LINKS_SPACING_PX
+    },
+    "aria-hidden": true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["w-px h-full bg-grey-200"]))),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n            w-px bg-accent-500\n            transition-transform duration-100 ease-in-out\n            ", "\n          "])), showIndicator ? "visible" : "hidden"),
+        style: {
+          height: LINK_HEIGHT_PX,
+          transform: typeof activeIndex === "number" ? "translateY(".concat(activeIndex * (LINK_HEIGHT_PX + LINKS_SPACING_PX), "px)") : undefined
+        }
+      })
+    })
+  });
+};
+
+exports.ActiveLinkIndicator = ActiveLinkIndicator;

package/cjs/Sidebar/SidebarLinksGroup/SidebarGroupLink.d.ts

@@ -0,0 +1,7 @@
+import type { FC } from "react";
+import type { SidebarLinksGroupLink } from "./types";
+declare type LinkProps = SidebarLinksGroupLink & {
+    active: boolean;
+};
+export declare const SidebarGroupLink: FC<LinkProps>;
+export {};

package/cjs/Sidebar/{components/SidebarHeader.js → SidebarLinksGroup/SidebarGroupLink.js}

@@ -5,45 +5,36 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.SidebarHeader = void 0;
+exports.SidebarGroupLink = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 
-var _SidebarContext = require("../SidebarContext");
+var _useLinkProps = _interopRequireDefault(require("../../utils/useLinkProps"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
 
-var _excluded = ["className", "children"];
-
 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 SidebarHeader = function SidebarHeader(_ref) {
-  var className = _ref.className,
-      children = _ref.children,
-      headingProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-
-  var _useSidebarContext = (0, _SidebarContext.useSidebarContext)(),
-      variant = _useSidebarContext.variant,
-      collapsed = _useSidebarContext.collapsed;
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", _objectSpread(_objectSpread({}, headingProps), {}, {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\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),
-    children: children
+var SidebarGroupLink = function SidebarGroupLink(props) {
+  var label = props.label,
+      active = props.active,
+      id = props.id,
+      disabled = props.disabled;
+  var linkProps = (0, _useLinkProps["default"])(props);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("a", _objectSpread(_objectSpread({}, linkProps), {}, {
+    id: id,
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\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"),
+    "aria-current": active,
+    children: label
   }));
 };
 
-exports.SidebarHeader = SidebarHeader;
-var _default = SidebarHeader;
-exports["default"] = _default;
+exports.SidebarGroupLink = SidebarGroupLink;

package/cjs/Sidebar/SidebarLinksGroup/SidebarLinksGroup.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+import type { IconComponentType } from "../../types";
+import type { SidebarLinksGroupLink } from "./types";
+declare type SidebarLinksGroupBaseProps = {
+    id?: string;
+    className?: string;
+    links: SidebarLinksGroupLink[];
+};
+export declare type StaticSidebarLinksGroupProps = SidebarLinksGroupBaseProps & {
+    title?: never;
+    icon?: never;
+    initialIsOpen?: never;
+    onGroupToggle?: never;
+};
+export declare type CollapsibleSidebarLinksGroupProps = SidebarLinksGroupBaseProps & {
+    title: ReactNode;
+    icon: IconComponentType;
+    initialIsOpen?: boolean;
+    onGroupToggle?: (open: boolean) => void;
+};
+export declare type SidebarLinksGroupProps = StaticSidebarLinksGroupProps | CollapsibleSidebarLinksGroupProps;
+export declare const SidebarLinksGroup: (props: SidebarLinksGroupProps) => JSX.Element;
+export {};

package/cjs/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js

@@ -0,0 +1,120 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SidebarLinksGroup = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _lodash = require("lodash");
+
+var _react = require("react");
+
+var _reactFeather = require("react-feather");
+
+var _usePrevious = _interopRequireDefault(require("react-use/lib/usePrevious"));
+
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+
+var _SidebarContext = require("../SidebarContext");
+
+var _ActiveLinkIndicator = require("./ActiveLinkIndicator");
+
+var _SidebarGroupLink = require("./SidebarGroupLink");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+
+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 isCollapsibleSidebarLinksGroupProps = function isCollapsibleSidebarLinksGroupProps(props) {
+  return "title" in props && "icon" in props;
+};
+
+var SidebarLinksGroup = function SidebarLinksGroup(props) {
+  var _useSidebarContext = (0, _SidebarContext.useSidebarContext)(),
+      isLinkActive = _useSidebarContext.isLinkActive;
+
+  var id = props.id,
+      className = props.className,
+      links = props.links;
+  var contentId = (0, _react.useMemo)(function () {
+    return (0, _lodash.uniqueId)("links-group-");
+  }, []);
+  var activeLinkIndex = links.findIndex(function (link) {
+    return !link.disabled && isLinkActive(link.href);
+  });
+  var previousActiveLinkIndex = (0, _usePrevious["default"])(activeLinkIndex);
+  var hasMatchingLink = activeLinkIndex >= 0;
+
+  var _useState = (0, _react.useState)(!isCollapsibleSidebarLinksGroupProps(props) || hasMatchingLink || props.initialIsOpen !== false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    if (isCollapsibleSidebarLinksGroupProps(props)) {
+      var _props$onGroupToggle;
+
+      (_props$onGroupToggle = props.onGroupToggle) === null || _props$onGroupToggle === void 0 ? void 0 : _props$onGroupToggle.call(props, isOpen);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [isOpen]);
+  (0, _react.useEffect)(function () {
+    if (!isOpen && activeLinkIndex >= 0 && typeof previousActiveLinkIndex === "number" && activeLinkIndex !== previousActiveLinkIndex) {
+      setIsOpen(true);
+    }
+  }, [activeLinkIndex, previousActiveLinkIndex, isOpen]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    id: id,
+    className: className,
+    children: [isCollapsibleSidebarLinksGroupProps(props) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+      className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n          flex w-full text-left items-center mb-4 overflow-hidden focus:outline-none group cursor-pointer"]))),
+      onClick: function onClick() {
+        return setIsOpen(!isOpen);
+      },
+      "aria-expanded": isOpen,
+      "aria-controls": contentId,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(props.icon, {
+        className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 text-grey-500 mr-3"]))),
+        size: "1rem"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["truncate display-subheading uppercase text-grey-800 group-hover:text-accent-500 mr-2"]))),
+        children: props.title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.ChevronRight, {
+        className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 text-grey-500 transition-all duration-150 ease-in-out ", ""])), isOpen && "rotate-90"),
+        size: "1rem"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      id: contentId,
+      className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["flex ", ""])), !isOpen && "hidden"),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ActiveLinkIndicator.ActiveLinkIndicator, {
+        className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 mr-3"]))),
+        activeIndex: activeLinkIndex,
+        linksCount: links.length
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+        className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["flex-1 space-y-2 overflow-hidden"]))),
+        children: links.map(function (link, idx) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["truncate"]))),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SidebarGroupLink.SidebarGroupLink, _objectSpread(_objectSpread({}, link), {}, {
+              active: activeLinkIndex === idx
+            }))
+          }, "".concat(idx, "-").concat(link.href));
+        })
+      })]
+    })]
+  });
+};
+
+exports.SidebarLinksGroup = SidebarLinksGroup;

package/cjs/Sidebar/SidebarLinksGroup/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./SidebarLinksGroup";
+export type { SidebarLinksGroupLink } from "./types";

package/cjs/Sidebar/SidebarLinksGroup/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _SidebarLinksGroup = require("./SidebarLinksGroup");
+
+Object.keys(_SidebarLinksGroup).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SidebarLinksGroup[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SidebarLinksGroup[key];
+    }
+  });
+});

package/cjs/Sidebar/SidebarLinksGroup/types.d.ts

@@ -0,0 +1,10 @@
+import type { MouseEventHandler, ReactNode } from "react";
+export declare type SidebarLinksGroupLink = {
+    id?: string;
+    href: string;
+    target?: string;
+    rel?: string;
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+    disabled?: boolean;
+    label: ReactNode;
+};

package/cjs/Sidebar/SidebarLinksGroup/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/cjs/Sidebar/SidebarNav.d.ts

@@ -0,0 +1,9 @@
+import type { FC, ReactNode } from "react";
+export declare type SidebarNavSpacing = "small" | "large";
+export declare type SidebarNavProps = {
+    className?: string;
+    spacing?: SidebarNavSpacing;
+    label: string;
+    children: ReactNode;
+};
+export declare const SidebarNav: FC<SidebarNavProps>;