@superdispatch/ui-lab 0.18.0 → 0.18.3

package/dist-src/linked-text/LinkedText.js

@@ -0,0 +1,40 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["color", "target", "rel"],
+    _excluded2 = ["children", "linkComponent"];
+import { Link } from '@material-ui/core';
+import { forwardRef } from 'react';
+import { Anchorme } from 'react-anchorme';
+import { jsx as _jsx } from "react/jsx-runtime";
+var DefaultLinkComponent = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    color,
+    target = '_blank',
+    rel = 'noreferrer noopener'
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_jsx(Link, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    rel: rel,
+    target: target
+  }));
+});
+if (process.env.NODE_ENV !== "production") DefaultLinkComponent.displayName = "DefaultLinkComponent";
+DefaultLinkComponent.displayName = 'DefaultLinkComponent';
+export function LinkedText(_ref2) {
+  var {
+    children,
+    linkComponent = DefaultLinkComponent
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
+  if (!children) {
+    return null;
+  }
+
+  return /*#__PURE__*/_jsx(Anchorme, _objectSpread(_objectSpread({}, props), {}, {
+    linkComponent: linkComponent,
+    children: children
+  }));
+}

package/dist-src/navbar/Navbar.js

@@ -15,7 +15,7 @@ var Aside = /*#__PURE__*/styled.aside.withConfig({
 var Main = /*#__PURE__*/styled.main.withConfig({
   displayName: "Navbar__Main",
   componentId: "SD__sc-1oiqig8-1"
-})(["flex:1;display:flex;flex-direction:column;overflow:auto;"]);
+})(["flex:1;display:flex;flex-direction:column;overflow:scroll;"]);
 export function Navbar(_ref) {
   var {
     footer,

package/dist-src/navbar/NavbarAvatar.js

@@ -37,8 +37,10 @@ export function NavbarAvatar(_ref) {
         children: /*#__PURE__*/_jsxs(Stack, {
           space: "none",
           children: [/*#__PURE__*/_jsx(StyledTypography, {
+            variant: "caption",
             children: title
           }), /*#__PURE__*/_jsx(StyledTypography, {
+            variant: "caption",
             children: subtitle
           })]
         })

package/dist-src/navbar/NavbarList.js

@@ -1,17 +1,18 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import { IconButton } from '@material-ui/core';
-import { Menu as MenuIcon, MenuOpen, MoreHoriz } from '@material-ui/icons';
-import { AdaptiveVerticalToolbar, Color, Inline, useResponsiveValue } from '@superdispatch/ui';
+import { Menu as MenuIcon, MenuOpen } from '@material-ui/icons';
+import { Color, Inline, useResponsiveValue } from '@superdispatch/ui';
 import { useMemo } from 'react';
 import styled from 'styled-components';
 import { useNavbarContext } from "./NavbarContext.js";
 import { NavbarBadge, NavbarItem, NavbarLabel } from "./NavbarItem.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 var Header = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarList__Header",
   componentId: "SD__sc-19zrmxc-0"
-})(["margin:0 16px 8px;display:flex;flex-shrink:0;align-items:center;justify-content:space-between;"]);
+})(["margin:0 16px 8px;display:flex;flex-shrink:0;align-items:center;justify-content:space-between;position:sticky;"]);
 var Wrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarList__Wrapper",
   componentId: "SD__sc-19zrmxc-1"
@@ -38,7 +39,7 @@ var ExpandIconButton = /*#__PURE__*/styled(IconButton).withConfig({
 var Footer = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarList__Footer",
   componentId: "SD__sc-19zrmxc-3"
-})(["flex-grow:1;display:flex;align-items:flex-end;margin:16px 0 8px;"]);
+})(["flex-grow:1;display:flex;align-items:flex-end;margin:16px 0 8px;position:sticky;"]);
 var Root = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarList__Root",
   componentId: "SD__sc-19zrmxc-4"
@@ -65,7 +66,7 @@ export function NavbarMenuItem(_ref4) {
 var Content = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarList__Content",
   componentId: "SD__sc-19zrmxc-5"
-})(["height:100%;min-height:50px;&[aria-expanded='false']{", ",", "{visibility:hidden;}}"], NavbarBadge, NavbarLabel);
+})(["height:100%;min-height:50px;overflow:scroll;&[aria-expanded='false']{", ",", "{visibility:hidden;}}"], NavbarBadge, NavbarLabel);
 export function NavbarList(_ref5) {
   var {
     header,
@@ -102,41 +103,22 @@ export function NavbarList(_ref5) {
       })]
     }), /*#__PURE__*/_jsx(Content, {
       "aria-expanded": isSidebarOpened,
-      children: /*#__PURE__*/_jsx(AdaptiveVerticalToolbar, {
-        disableGutters: true,
-        items: filteredItems,
-        renderItem: item => {
-          var navbarItem = item;
-          var index = filteredItems.indexOf(navbarItem);
-          var prev = filteredItems[index - 1];
-          return /*#__PURE__*/_jsx(NavbarItem, _objectSpread(_objectSpread({}, item), {}, {
-            gutter: prev && prev.groupKey !== navbarItem.groupKey,
-            onClick: event => {
-              var _item$onClick;
-
-              (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, event);
-
-              if (!event.isDefaultPrevented()) {
-                setDrawerOpen(false);
-              }
-            }
-          }));
-        },
-        renderMenuItem: item => /*#__PURE__*/_jsx(NavbarMenuItem, _objectSpread(_objectSpread({}, item), {}, {
+      children: filteredItems.map(item => {
+        var index = filteredItems.indexOf(item);
+        var prev = filteredItems[index - 1];
+        return /*#__PURE__*/_createElement(NavbarItem, _objectSpread(_objectSpread({}, item), {}, {
+          key: item.key,
+          gutter: prev && prev.groupKey !== item.groupKey,
           onClick: event => {
-            var _item$onClick2;
+            var _item$onClick;
 
-            (_item$onClick2 = item.onClick) === null || _item$onClick2 === void 0 ? void 0 : _item$onClick2.call(item, event);
+            (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, event);
 
             if (!event.isDefaultPrevented()) {
               setDrawerOpen(false);
             }
           }
-        })),
-        moreElement: /*#__PURE__*/_jsx(NavbarItem, {
-          icon: /*#__PURE__*/_jsx(MoreHoriz, {}),
-          label: "More"
-        })
+        }));
       })
     }), /*#__PURE__*/_jsx(Footer, {
       children: footer

package/dist-web/index.js

@@ -1,6 +1,6 @@
-import { CheckCircle, Info, Error, Image, Refresh, Delete, Menu, MenuOpen, MoreHoriz, OpenInNew } from '@material-ui/icons';
+import { CheckCircle, Info, Error, Image, Refresh, Delete, Menu, MenuOpen, OpenInNew } from '@material-ui/icons';
 import { Alert as Alert$1 } from '@material-ui/lab';
-import { Color, parseResponsiveProp, isColorProp, parseSpaceProp, Stack, mergeRefs, useUID, isEmptyReactNode, Columns, Column, Inline, CardButton, useResponsiveValue, AdaptiveVerticalToolbar } from '@superdispatch/ui';
+import { Color, parseResponsiveProp, isColorProp, parseSpaceProp, Stack, mergeRefs, useUID, isEmptyReactNode, Columns, Column, Inline, CardButton, useResponsiveValue } from '@superdispatch/ui';
 import { forwardRef, useState, useEffect, useRef, useLayoutEffect, Suspense, memo, useContext, createContext, useMemo, createElement } from 'react';
 import styled, { css, keyframes } from 'styled-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -1123,7 +1123,7 @@ function NavbarItem(_ref) {
 var Header = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarList__Header",
   componentId: "SD__sc-19zrmxc-0"
-})(["margin:0 16px 8px;display:flex;flex-shrink:0;align-items:center;justify-content:space-between;"]);
+})(["margin:0 16px 8px;display:flex;flex-shrink:0;align-items:center;justify-content:space-between;position:sticky;"]);
 var Wrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarList__Wrapper",
   componentId: "SD__sc-19zrmxc-1"
@@ -1150,7 +1150,7 @@ var ExpandIconButton = /*#__PURE__*/styled(IconButton).withConfig({
 var Footer = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarList__Footer",
   componentId: "SD__sc-19zrmxc-3"
-})(["flex-grow:1;display:flex;align-items:flex-end;margin:16px 0 8px;"]);
+})(["flex-grow:1;display:flex;align-items:flex-end;margin:16px 0 8px;position:sticky;"]);
 var Root = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarList__Root",
   componentId: "SD__sc-19zrmxc-4"
@@ -1177,7 +1177,7 @@ function NavbarMenuItem(_ref4) {
 var Content = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarList__Content",
   componentId: "SD__sc-19zrmxc-5"
-})(["height:100%;min-height:50px;&[aria-expanded='false']{", ",", "{visibility:hidden;}}"], NavbarBadge, NavbarLabel);
+})(["height:100%;min-height:50px;overflow:scroll;&[aria-expanded='false']{", ",", "{visibility:hidden;}}"], NavbarBadge, NavbarLabel);
 function NavbarList(_ref5) {
   var {
     header,
@@ -1214,41 +1214,22 @@ function NavbarList(_ref5) {
       })]
     }), /*#__PURE__*/jsx(Content, {
       "aria-expanded": isSidebarOpened,
-      children: /*#__PURE__*/jsx(AdaptiveVerticalToolbar, {
-        disableGutters: true,
-        items: filteredItems,
-        renderItem: item => {
-          var navbarItem = item;
-          var index = filteredItems.indexOf(navbarItem);
-          var prev = filteredItems[index - 1];
-          return /*#__PURE__*/jsx(NavbarItem, _objectSpread(_objectSpread({}, item), {}, {
-            gutter: prev && prev.groupKey !== navbarItem.groupKey,
-            onClick: event => {
-              var _item$onClick;
-
-              (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, event);
-
-              if (!event.isDefaultPrevented()) {
-                setDrawerOpen(false);
-              }
-            }
-          }));
-        },
-        renderMenuItem: item => /*#__PURE__*/jsx(NavbarMenuItem, _objectSpread(_objectSpread({}, item), {}, {
+      children: filteredItems.map(item => {
+        var index = filteredItems.indexOf(item);
+        var prev = filteredItems[index - 1];
+        return /*#__PURE__*/createElement(NavbarItem, _objectSpread(_objectSpread({}, item), {}, {
+          key: item.key,
+          gutter: prev && prev.groupKey !== item.groupKey,
           onClick: event => {
-            var _item$onClick2;
+            var _item$onClick;
 
-            (_item$onClick2 = item.onClick) === null || _item$onClick2 === void 0 ? void 0 : _item$onClick2.call(item, event);
+            (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, event);
 
             if (!event.isDefaultPrevented()) {
               setDrawerOpen(false);
             }
           }
-        })),
-        moreElement: /*#__PURE__*/jsx(NavbarItem, {
-          icon: /*#__PURE__*/jsx(MoreHoriz, {}),
-          label: "More"
-        })
+        }));
       })
     }), /*#__PURE__*/jsx(Footer, {
       children: footer
@@ -1263,7 +1244,7 @@ var Aside = /*#__PURE__*/styled.aside.withConfig({
 var Main = /*#__PURE__*/styled.main.withConfig({
   displayName: "Navbar__Main",
   componentId: "SD__sc-1oiqig8-1"
-})(["flex:1;display:flex;flex-direction:column;overflow:auto;"]);
+})(["flex:1;display:flex;flex-direction:column;overflow:scroll;"]);
 function Navbar(_ref) {
   var {
     footer,
@@ -1361,8 +1342,10 @@ function NavbarAvatar(_ref) {
         children: /*#__PURE__*/jsxs(Stack, {
           space: "none",
           children: [/*#__PURE__*/jsx(StyledTypography, {
+            variant: "caption",
             children: title
           }), /*#__PURE__*/jsx(StyledTypography, {
+            variant: "caption",
             children: subtitle
           })]
         })