norma-library 0.5.78 → 0.5.79

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/esm/components/ChatMessageBalloon/ChatMessageBalloon.js +11 -3
  2. package/dist/esm/components/ChatMessageBalloon/ChatMessageBalloon.js.map +1 -1
  3. package/dist/esm/components/ChatMessageBalloon/ChatMessageBalloon.style.js +1 -1
  4. package/dist/esm/components/ChatMessageBalloon/ChatMessageBalloon.style.js.map +1 -1
  5. package/dist/esm/interfaces/ChatMessageBalloon.d.ts +1 -0
  6. package/package.json +1 -1
  7. package/src/components/ChatMessageBalloon/ChatMessageBalloon.style.ts +4 -0
  8. package/src/components/ChatMessageBalloon/ChatMessageBalloon.tsx +23 -3
  9. package/src/interfaces/ChatMessageBalloon.ts +1 -0
package/dist/esm/components/ChatMessageBalloon/ChatMessageBalloon.js CHANGED
@@ -1,12 +1,20 @@
1
1
  import { __assign, __rest } from "tslib";
2
- import React from 'react';
2
+ import React, { useMemo } from 'react';
3
3
  import { Typography } from '@mui/material';
4
4
  import * as S from './ChatMessageBalloon.style';
5
5
  export var ChatMessageBalloon = function (_a) {
6
- var label = _a.label, description = _a.description, date = _a.date, direction = _a.direction, children = _a.children, className = _a.className, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onRowMouseEnter = _a.onRowMouseEnter, onRowMouseLeave = _a.onRowMouseLeave, rest = __rest(_a, ["label", "description", "date", "direction", "children", "className", "onMouseEnter", "onMouseLeave", "onRowMouseEnter", "onRowMouseLeave"]);
6
+ var label = _a.label, description = _a.description, date = _a.date, direction = _a.direction, children = _a.children, className = _a.className, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onRowMouseEnter = _a.onRowMouseEnter, onRowMouseLeave = _a.onRowMouseLeave, highlight = _a.highlight, rest = __rest(_a, ["label", "description", "date", "direction", "children", "className", "onMouseEnter", "onMouseLeave", "onRowMouseEnter", "onRowMouseLeave", "highlight"]);
7
+ var ballonClassNames = useMemo(function () {
8
+ var classNames = [];
9
+ if (!!onMouseEnter)
10
+ classNames.push('is-interactive');
11
+ if (!!highlight)
12
+ classNames.push('is-highlight');
13
+ return classNames.join(" ");
14
+ }, [highlight, onMouseEnter]);
7
15
  return (React.createElement(S.ChatMessageBalloonContainerStyle, __assign({ className: className }, rest),
8
16
  React.createElement(S.ChatMessageBalloonRowStyle, { direction: direction, onMouseLeave: onRowMouseLeave, onMouseEnter: onRowMouseEnter },
9
- React.createElement(S.ChatMessageBalloonStyle, { onMouseLeave: onMouseLeave, onMouseEnter: onMouseEnter, direction: direction, className: !!onMouseEnter ? 'is-interactive' : "" },
17
+ React.createElement(S.ChatMessageBalloonStyle, { onMouseLeave: onMouseLeave, onMouseEnter: onMouseEnter, direction: direction, className: ballonClassNames },
10
18
  React.createElement(Typography, { variant: "subtitle2", style: {
11
19
  fontSize: "1rem",
12
20
  fontWeight: "600",
package/dist/esm/components/ChatMessageBalloon/ChatMessageBalloon.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ChatMessageBalloon.js","sourceRoot":"","sources":["../../../../src/components/ChatMessageBalloon/ChatMessageBalloon.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,KAAK,CAAC,MAAM,4BAA4B,CAAA;AAG/C,MAAM,CAAC,IAAM,kBAAkB,GAAsC,UAAC,EAAmI;IAAjI,IAAA,KAAK,WAAA,EAAE,WAAW,iBAAA,EAAE,IAAI,UAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,YAAY,kBAAA,EAAE,YAAY,kBAAA,EAAE,eAAe,qBAAA,EAAE,eAAe,qBAAA,EAAK,IAAI,cAAjI,4IAAmI,CAAF;IACrM,OAAO,CACL,oBAAC,CAAC,CAAC,gCAAgC,aAAC,SAAS,EAAE,SAAS,IAAM,IAAI;QAChE,oBAAC,CAAC,CAAC,0BAA0B,IAAC,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,eAAe;YAC9G,oBAAC,CAAC,CAAC,uBAAuB,IAAC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE;gBACxJ,oBAAC,UAAU,IACT,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE;wBACL,QAAQ,EAAE,MAAM;wBAChB,UAAU,EAAE,KAAK;wBACjB,YAAY,EAAE,KAAK;qBACpB,IAEA,KAAK,CACK;gBACZ,WAAW,CACc;YAC5B,oBAAC,CAAC,CAAC,wBAAwB,IAAC,SAAS,EAAE,SAAS,IAC7C,QAAQ,CACkB,CACA;QAC/B,oBAAC,CAAC,CAAC,0BAA0B,IAAC,SAAS,EAAE,SAAS;YAChD,oBAAC,CAAC,CAAC,oBAAoB,IAAC,QAAQ,EAAE,QAAQ,IAAG,IAAI,CAA0B,CAC9C,CACI,CACtC,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"ChatMessageBalloon.js","sourceRoot":"","sources":["../../../../src/components/ChatMessageBalloon/ChatMessageBalloon.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,KAAK,CAAC,MAAM,4BAA4B,CAAA;AAE/C,MAAM,CAAC,IAAM,kBAAkB,GAAsC,UAAC,EAanE;IAZC,IAAA,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,IAAI,UAAA,EACJ,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,YAAY,kBAAA,EACZ,YAAY,kBAAA,EACZ,eAAe,qBAAA,EACf,eAAe,qBAAA,EACf,SAAS,eAAA,EACN,IAAI,cAZ2D,yJAanE,CADQ;IAGT,IAAM,gBAAgB,GAAG,OAAO,CAAC;QAC/B,IAAM,UAAU,GAAG,EAAE,CAAA;QACrB,IAAG,CAAC,CAAC,YAAY;YAAE,UAAU,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;QACpD,IAAG,CAAC,CAAC,SAAS;YAAE,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA;QAC/C,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAC7B,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,CAAA;IAE7B,OAAO,CACL,oBAAC,CAAC,CAAC,gCAAgC,aAAC,SAAS,EAAE,SAAS,IAAM,IAAI;QAChE,oBAAC,CAAC,CAAC,0BAA0B,IAAC,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,eAAe;YAC9G,oBAAC,CAAC,CAAC,uBAAuB,IAAC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,gBAAgB;gBAClI,oBAAC,UAAU,IACT,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE;wBACL,QAAQ,EAAE,MAAM;wBAChB,UAAU,EAAE,KAAK;wBACjB,YAAY,EAAE,KAAK;qBACpB,IAEA,KAAK,CACK;gBACZ,WAAW,CACc;YAC5B,oBAAC,CAAC,CAAC,wBAAwB,IAAC,SAAS,EAAE,SAAS,IAC7C,QAAQ,CACkB,CACA;QAC/B,oBAAC,CAAC,CAAC,0BAA0B,IAAC,SAAS,EAAE,SAAS;YAChD,oBAAC,CAAC,CAAC,oBAAoB,IAAC,QAAQ,EAAE,QAAQ,IAAG,IAAI,CAA0B,CAC9C,CACI,CACtC,CAAC;AACJ,CAAC,CAAC"}
package/dist/esm/components/ChatMessageBalloon/ChatMessageBalloon.style.js CHANGED
@@ -6,7 +6,7 @@ export var ChatMessageBalloonContainerStyle = styled(Box)({
6
6
  flexDirection: "column",
7
7
  });
8
8
  export var ChatMessageBalloonRowStyle = styled('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n margin-bottom: 8px;\n flex-direction: ", ";\n\n &:last-child {\n margin-bottom: 0px;\n }\n"], ["\n display: flex;\n margin-bottom: 8px;\n flex-direction: ", ";\n\n &:last-child {\n margin-bottom: 0px;\n }\n"])), function (props) { return (props.direction === "I") ? "row-reverse" : "row"; });
9
- export var ChatMessageBalloonStyle = styled('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid transparent;\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\n flex-direction: column;\n padding: 12px 24px;\n width: 60%;\n transition: border 0.6s cubic-bezier(0.16, 1, 0.3, 1);\n\n &.is-interactive {\n cursor: pointer;\n\n &:hover {\n border: 1px solid #000;\n }\n }\n"], ["\n background-color: ", ";\n border: 1px solid transparent;\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\n flex-direction: column;\n padding: 12px 24px;\n width: 60%;\n transition: border 0.6s cubic-bezier(0.16, 1, 0.3, 1);\n\n &.is-interactive {\n cursor: pointer;\n\n &:hover {\n border: 1px solid #000;\n }\n }\n"])), function (props) { return (props.direction === "I") ? "#FFF" : "#E18B50"; }, function (props) { return (props.direction === "I") ? "20px 20px 0px 20px" : "20px 20px 20px 0px"; }, function (props) { return (props.direction === "I") ? "#4D4F5B" : "#FFF"; });
9
+ export var ChatMessageBalloonStyle = styled('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid transparent;\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\n flex-direction: column;\n padding: 12px 24px;\n width: 60%;\n transition: border 0.6s cubic-bezier(0.16, 1, 0.3, 1);\n\n &.is-highlight {\n border: 1px solid #000;\n }\n\n &.is-interactive {\n cursor: pointer;\n\n &:hover {\n border: 1px solid #000;\n }\n }\n"], ["\n background-color: ", ";\n border: 1px solid transparent;\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\n flex-direction: column;\n padding: 12px 24px;\n width: 60%;\n transition: border 0.6s cubic-bezier(0.16, 1, 0.3, 1);\n\n &.is-highlight {\n border: 1px solid #000;\n }\n\n &.is-interactive {\n cursor: pointer;\n\n &:hover {\n border: 1px solid #000;\n }\n }\n"])), function (props) { return (props.direction === "I") ? "#FFF" : "#E18B50"; }, function (props) { return (props.direction === "I") ? "20px 20px 0px 20px" : "20px 20px 20px 0px"; }, function (props) { return (props.direction === "I") ? "#4D4F5B" : "#FFF"; });
10
10
  export var ChatMessageDateStyle = styled(Typography)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: #43425D;\n opacity: .5;\n"], ["\n color: #43425D;\n opacity: .5;\n"])));
11
11
  export var ChatMessageChildrenStyle = styled('div')(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n box-sizing: border-box;\n display: flex;\n flex: 1;\n justify-content: ", ";\n padding: 8px;\n"], ["\n align-items: center;\n box-sizing: border-box;\n display: flex;\n flex: 1;\n justify-content: ", ";\n padding: 8px;\n"])), function (props) { return (props.direction === "I") ? "end" : "start"; });
12
12
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/dist/esm/components/ChatMessageBalloon/ChatMessageBalloon.style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ChatMessageBalloon.style.js","sourceRoot":"","sources":["../../../../src/components/ChatMessageBalloon/ChatMessageBalloon.style.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,CAAC,IAAM,gCAAgC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAC1D,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;CACxB,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,0BAA0B,GAAG,MAAM,CAAC,KAAK,CAAC,2LAAuB,+DAG1D,EAA4D,uDAK/E,KALmB,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,EAAjD,CAAiD,CAK/E,CAAA;AAED,MAAM,CAAC,IAAM,uBAAuB,GAAG,MAAM,CAAC,KAAK,CAAC,8bAAuB,wBACrD,EAAyD,wDAE5D,EAAkF,yCAE1F,EAAyD,4PAcnE,KAlBqB,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAA9C,CAA8C,EAE5D,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,oBAAoB,EAAvE,CAAuE,EAE1F,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,EAA9C,CAA8C,CAcnE,CAAA;AAED,MAAM,CAAC,IAAM,oBAAoB,GAAG,MAAM,CAAC,UAAU,CAAC,0GAAA,uCAGrD,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,wBAAwB,GAAG,MAAM,CAAC,KAAK,CAAC,mMAAuB,wGAKvD,EAAsD,sBAE1E,KAFoB,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,EAA3C,CAA2C,CAE1E,CAAC"}
1
+ {"version":3,"file":"ChatMessageBalloon.style.js","sourceRoot":"","sources":["../../../../src/components/ChatMessageBalloon/ChatMessageBalloon.style.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,CAAC,IAAM,gCAAgC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAC1D,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;CACxB,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,0BAA0B,GAAG,MAAM,CAAC,KAAK,CAAC,2LAAuB,+DAG1D,EAA4D,uDAK/E,KALmB,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,EAAjD,CAAiD,CAK/E,CAAA;AAED,MAAM,CAAC,IAAM,uBAAuB,GAAG,MAAM,CAAC,KAAK,CAAC,sfAAuB,wBACrD,EAAyD,wDAE5D,EAAkF,yCAE1F,EAAyD,oTAkBnE,KAtBqB,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAA9C,CAA8C,EAE5D,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,oBAAoB,EAAvE,CAAuE,EAE1F,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,EAA9C,CAA8C,CAkBnE,CAAA;AAED,MAAM,CAAC,IAAM,oBAAoB,GAAG,MAAM,CAAC,UAAU,CAAC,0GAAA,uCAGrD,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,wBAAwB,GAAG,MAAM,CAAC,KAAK,CAAC,mMAAuB,wGAKvD,EAAsD,sBAE1E,KAFoB,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,EAA3C,CAA2C,CAE1E,CAAC"}
package/dist/esm/interfaces/ChatMessageBalloon.d.ts CHANGED
@@ -8,6 +8,7 @@ export interface ChatMessageBalloonProps {
8
8
  onMouseLeave?: MouseEventHandler<HTMLDivElement>;
9
9
  onRowMouseEnter?: MouseEventHandler<HTMLDivElement>;
10
10
  onRowMouseLeave?: MouseEventHandler<HTMLDivElement>;
11
+ highlight?: boolean;
11
12
  attachments?: string[];
12
13
  children?: ReactNode;
13
14
  className?: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "norma-library",
3
- "version": "0.5.78",
3
+ "version": "0.5.79",
4
4
  "private": false,
5
5
  "description": "Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.",
6
6
  "scripts": {
package/src/components/ChatMessageBalloon/ChatMessageBalloon.style.ts CHANGED
@@ -28,6 +28,10 @@ export const ChatMessageBalloonStyle = styled('div')<{ direction: string }>`
28
28
  width: 60%;
29
29
  transition: border 0.6s cubic-bezier(0.16, 1, 0.3, 1);
30
30
 
31
+ &.is-highlight {
32
+ border: 1px solid #000;
33
+ }
34
+
31
35
  &.is-interactive {
32
36
  cursor: pointer;
33
37
 
package/src/components/ChatMessageBalloon/ChatMessageBalloon.tsx CHANGED
@@ -1,14 +1,34 @@
1
- import React from 'react';
1
+ import React, { useMemo } from 'react';
2
2
  import { Typography } from '@mui/material';
3
3
  import { ChatMessageBalloonProps } from '../../interfaces';
4
4
  import * as S from './ChatMessageBalloon.style'
5
5
 
6
+ export const ChatMessageBalloon: React.FC<ChatMessageBalloonProps> = ({
7
+ label,
8
+ description,
9
+ date,
10
+ direction,
11
+ children,
12
+ className,
13
+ onMouseEnter,
14
+ onMouseLeave,
15
+ onRowMouseEnter,
16
+ onRowMouseLeave,
17
+ highlight,
18
+ ...rest
19
+ }) => {
20
+
21
+ const ballonClassNames = useMemo(() => {
22
+ const classNames = []
23
+ if(!!onMouseEnter) classNames.push('is-interactive')
24
+ if(!!highlight) classNames.push('is-highlight')
25
+ return classNames.join(" ")
26
+ }, [highlight, onMouseEnter])
6
27
 
7
- export const ChatMessageBalloon: React.FC<ChatMessageBalloonProps> = ({ label, description, date, direction, children, className, onMouseEnter, onMouseLeave, onRowMouseEnter, onRowMouseLeave, ...rest }) => {
8
28
  return (
9
29
  <S.ChatMessageBalloonContainerStyle className={className} {...rest}>
10
30
  <S.ChatMessageBalloonRowStyle direction={direction} onMouseLeave={onRowMouseLeave} onMouseEnter={onRowMouseEnter}>
11
- <S.ChatMessageBalloonStyle onMouseLeave={onMouseLeave} onMouseEnter={onMouseEnter} direction={direction} className={!!onMouseEnter ? 'is-interactive' : ""}>
31
+ <S.ChatMessageBalloonStyle onMouseLeave={onMouseLeave} onMouseEnter={onMouseEnter} direction={direction} className={ballonClassNames}>
12
32
  <Typography
13
33
  variant="subtitle2"
14
34
  style={{
package/src/interfaces/ChatMessageBalloon.ts CHANGED
@@ -9,6 +9,7 @@ export interface ChatMessageBalloonProps {
9
9
  onMouseLeave?: MouseEventHandler<HTMLDivElement>;
10
10
  onRowMouseEnter?: MouseEventHandler<HTMLDivElement>;
11
11
  onRowMouseLeave?: MouseEventHandler<HTMLDivElement>;
12
+ highlight?: boolean;
12
13
  attachments?: string[];
13
14
  children?:ReactNode;
14
15
  className?:string;