@superdispatch/ui-lab 0.23.2 → 0.23.4

package/dist-src/chat/Chat.js

@@ -8,13 +8,9 @@ var ChatContainer = /*#__PURE__*/styled('div').withConfig({
   componentId: "SD__sc-qksih8-0"
 })(_ref => {
   var {
-    isEmpty,
-    minWidth,
-    maxWidth,
-    minHeight,
-    maxHeight
+    isEmpty
   } = _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");
+  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: 300px;\n  max-width: 560px;\n  min-height: 368px;\n  max-height: 696px;\n  padding: 16px;\n  box-sizing: border-box;\n");
 });
 
 function emptyPlaceholder(text) {
@@ -28,6 +24,7 @@ function emptyPlaceholder(text) {
 export var Chat = /*#__PURE__*/forwardRef((_ref2, ref) => {
   var {
     children,
+    className,
     emptyText = 'No new messages'
   } = _ref2;
   var isEmpty = Children.toArray(children).length === 0;
@@ -35,6 +32,7 @@ export var Chat = /*#__PURE__*/forwardRef((_ref2, ref) => {
     "data-testid": "chat-container",
     isEmpty: isEmpty,
     ref: ref,
+    className: className,
     children: /*#__PURE__*/_jsx(Stack, {
       space: "small",
       children: isEmpty ? emptyPlaceholder(emptyText) : children

package/dist-src/chat/ChatMessage.js

@@ -1,4 +1,5 @@
 import { Typography } from '@material-ui/core';
+import { formatDate } from '@superdispatch/dates';
 import { Inline, Stack } from '@superdispatch/ui';
 import { Box } from '@superdispatch/ui-lab';
 import { forwardRef } from 'react';
@@ -12,6 +13,9 @@ export var ChatMessage = /*#__PURE__*/forwardRef((_ref, ref) => {
     text,
     variant
   } = _ref;
+  var time = formatDate(dateTime, {
+    variant: 'Time'
+  });
   return /*#__PURE__*/_jsxs(Stack, {
     space: "xxsmall",
     align: variant === 'outgoing' ? 'right' : 'left',
@@ -27,7 +31,7 @@ export var ChatMessage = /*#__PURE__*/forwardRef((_ref, ref) => {
         children: role
       }), /*#__PURE__*/_jsx(Typography, {
         color: "textSecondary",
-        children: dateTime
+        children: time
       })]
     }), /*#__PURE__*/_jsx(Box, {
       display: "inline-block",

package/dist-types/index.d.ts

@@ -5,6 +5,8 @@ import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
 import { SpaceProp, NegativeSpaceProp, ResponsiveProp, ColorProp } from '@superdispatch/ui';
 import { Property } from 'csstype';
 import { ButtonBaseProps, AvatarProps, IconButtonProps, TooltipProps } from '@material-ui/core';
+import { PrimitiveDateInput } from '@superdispatch/dates';
+import { DateTime } from 'luxon';
 import { FileRejection } from 'react-dropzone';
 import { StyledComponent, DefaultTheme } from 'styled-components';
 
@@ -121,16 +123,16 @@ declare const AnchorButton: ForwardRefExoticComponent<AnchorButtonProps & RefAtt
 
 
 interface ChatProps {
+    className?: string;
     children?: React.ReactNode | React.ReactNode[];
     emptyText?: string;
 }
 declare const Chat: ForwardRefExoticComponent<ChatProps & RefAttributes<HTMLDivElement>>;
 
-
 interface ChatMessageProps {
     author: string;
     role: string;
-    dateTime: string;
+    dateTime: Date | DateTime | PrimitiveDateInput;
     text: string;
     variant: 'incoming' | 'outgoing';
 }

package/dist-web/index.js

@@ -8,6 +8,7 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { CSSTransition } from 'react-transition-group';
 import { ButtonBase, Typography, CircularProgress, SvgIcon, Link, Tooltip, IconButton, BottomNavigation, BottomNavigationAction, Accordion, AccordionSummary, useTheme, useMediaQuery, Drawer, Avatar, MenuItem, Menu as Menu$1, Toolbar, AppBar, Divider as Divider$1, Checkbox } from '@material-ui/core';
+import { formatDate } from '@superdispatch/dates';
 import { Box as Box$1 } from '@superdispatch/ui-lab';
 import { mdiUpload, mdiFilePdfBox, mdiTextBox } from '@mdi/js';
 import Dropzone from 'react-dropzone';
@@ -530,13 +531,9 @@ var ChatContainer = /*#__PURE__*/styled('div').withConfig({
   componentId: "SD__sc-qksih8-0"
 })(_ref => {
   var {
-    isEmpty,
-    minWidth,
-    maxWidth,
-    minHeight,
-    maxHeight
+    isEmpty
   } = _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");
+  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: 300px;\n  max-width: 560px;\n  min-height: 368px;\n  max-height: 696px;\n  padding: 16px;\n  box-sizing: border-box;\n");
 });
 
 function emptyPlaceholder(text) {
@@ -550,6 +547,7 @@ function emptyPlaceholder(text) {
 var Chat = /*#__PURE__*/forwardRef((_ref2, ref) => {
   var {
     children,
+    className,
     emptyText = 'No new messages'
   } = _ref2;
   var isEmpty = Children.toArray(children).length === 0;
@@ -557,6 +555,7 @@ var Chat = /*#__PURE__*/forwardRef((_ref2, ref) => {
     "data-testid": "chat-container",
     isEmpty: isEmpty,
     ref: ref,
+    className: className,
     children: /*#__PURE__*/jsx(Stack, {
       space: "small",
       children: isEmpty ? emptyPlaceholder(emptyText) : children
@@ -574,6 +573,9 @@ var ChatMessage = /*#__PURE__*/forwardRef((_ref, ref) => {
     text,
     variant
   } = _ref;
+  var time = formatDate(dateTime, {
+    variant: 'Time'
+  });
   return /*#__PURE__*/jsxs(Stack, {
     space: "xxsmall",
     align: variant === 'outgoing' ? 'right' : 'left',
@@ -589,7 +591,7 @@ var ChatMessage = /*#__PURE__*/forwardRef((_ref, ref) => {
         children: role
       }), /*#__PURE__*/jsx(Typography, {
         color: "textSecondary",
-        children: dateTime
+        children: time
       })]
     }), /*#__PURE__*/jsx(Box$1, {
       display: "inline-block",