@superdispatch/ui-lab 0.22.0 → 0.22.2

package/dist-src/chat/Chat.js

@@ -0,0 +1,45 @@
+import { Typography } from '@material-ui/core';
+import { Stack } from '@superdispatch/ui';
+import { Children, forwardRef } from 'react';
+import styled from 'styled-components';
+import { jsx as _jsx } from "react/jsx-runtime";
+var ChatContainer = /*#__PURE__*/styled('div').withConfig({
+  displayName: "Chat__ChatContainer",
+  componentId: "SD__sc-qksih8-0"
+})(_ref => {
+  var {
+    isEmpty,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight
+  } = _ref;
+  return "\n  display: flex;\n  flex-direction: column-reverse;\n  overflow: auto;\n  justify-content: ".concat(isEmpty ? 'center' : 'end', ";\n  width: 100%;\n  height: 100%;\n  min-width: ").concat(minWidth || 432, "px;\n  max-width: ").concat(maxWidth || 560, "px;\n  min-height: ").concat(minHeight || 368, "px;\n  max-height: ").concat(maxHeight || 696, "px;\n  padding: 16px;\n  box-sizing: border-box;\n");
+});
+
+function emptyPlaceholder(text) {
+  return /*#__PURE__*/_jsx(Typography, {
+    color: "textSecondary",
+    align: "center",
+    children: text
+  });
+}
+
+export var Chat = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  var {
+    children,
+    emptyText = 'No new messages'
+  } = _ref2;
+  var isEmpty = Children.toArray(children).length === 0;
+  return /*#__PURE__*/_jsx(ChatContainer, {
+    "data-testid": "chat-container",
+    isEmpty: isEmpty,
+    ref: ref,
+    children: /*#__PURE__*/_jsx(Stack, {
+      space: "small",
+      children: isEmpty ? emptyPlaceholder(emptyText) : children
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") Chat.displayName = "Chat";
+Chat.displayName = 'Chat';

package/dist-src/chat/ChatMessage.js

@@ -0,0 +1,46 @@
+import { Typography } from '@material-ui/core';
+import { Inline, Stack } from '@superdispatch/ui';
+import { Box } from '@superdispatch/ui-lab';
+import { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var ChatMessage = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    author,
+    role,
+    dateTime,
+    text,
+    variant
+  } = _ref;
+  return /*#__PURE__*/_jsxs(Stack, {
+    space: "xxsmall",
+    align: variant === 'outgoing' ? 'right' : 'left',
+    ref: ref,
+    "data-testid": "chat-message",
+    children: [/*#__PURE__*/_jsxs(Inline, {
+      verticalAlign: "center",
+      children: [/*#__PURE__*/_jsx(Typography, {
+        color: "textPrimary",
+        children: author
+      }), /*#__PURE__*/_jsx(Typography, {
+        color: "textSecondary",
+        children: role
+      }), /*#__PURE__*/_jsx(Typography, {
+        color: "textSecondary",
+        children: dateTime
+      })]
+    }), /*#__PURE__*/_jsx(Box, {
+      display: "inline-block",
+      padding: "xsmall",
+      marginTop: "none",
+      borderRadius: "medium",
+      backgroundColor: variant === 'outgoing' ? 'Blue50' : 'Silver200',
+      children: /*#__PURE__*/_jsx(Typography, {
+        color: "textPrimary",
+        children: text
+      })
+    })]
+  });
+});
+if (process.env.NODE_ENV !== "production") ChatMessage.displayName = "ChatMessage";
+ChatMessage.displayName = 'ChatMessage';

package/dist-src/navbar/NavbarList.js

@@ -67,7 +67,7 @@ export function NavbarMenuItem(_ref4) {
 var Content = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarList__Content",
   componentId: "SD__sc-19zrmxc-5"
-})(["height:100%;min-height:50px;overflow-y:auto;overflow-x:hidden;&[aria-expanded='false']{", ",", "{display:none;}}"], NavbarBadge, NavbarLabel);
+})(["height:100%;min-height:50px;overflow-y:auto;overflow-x:hidden;&[aria-expanded='false']{", ",", "{display:none;}}&::-webkit-scrollbar{width:10px;height:10px;}&::-webkit-scrollbar-track{background-color:transparent;}&::-webkit-scrollbar-thumb{background-color:", ";border-radius:100vw;margin-bottom:100px;}"], NavbarBadge, NavbarLabel, Color.Dark300);
 export function NavbarList(_ref5) {
   var {
     header,

package/dist-web/index.js

@@ -1326,7 +1326,7 @@ function NavbarMenuItem(_ref4) {
 var Content = /*#__PURE__*/styled.div.withConfig({
   displayName: "NavbarList__Content",
   componentId: "SD__sc-19zrmxc-5"
-})(["height:100%;min-height:50px;overflow-y:auto;overflow-x:hidden;&[aria-expanded='false']{", ",", "{display:none;}}"], NavbarBadge, NavbarLabel);
+})(["height:100%;min-height:50px;overflow-y:auto;overflow-x:hidden;&[aria-expanded='false']{", ",", "{display:none;}}&::-webkit-scrollbar{width:10px;height:10px;}&::-webkit-scrollbar-track{background-color:transparent;}&::-webkit-scrollbar-thumb{background-color:", ";border-radius:100vw;margin-bottom:100px;}"], NavbarBadge, NavbarLabel, Color.Dark300);
 function NavbarList(_ref5) {
   var {
     header,