@solibo/solibo-ui 1.1.3 → 1.1.4
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.
- package/dist/assets/index10.css +1 -1
- package/dist/assets/index29.css +1 -1
- package/dist/assets/index31.css +1 -1
- package/dist/assets/index37.css +1 -1
- package/dist/assets/index39.css +1 -1
- package/dist/assets/index47.css +1 -1
- package/dist/assets/index48.css +1 -1
- package/dist/assets/index51.css +1 -1
- package/dist/components/button/index.cjs +1 -1
- package/dist/components/button/index.cjs.map +1 -1
- package/dist/components/button/index.js +40 -32
- package/dist/components/button/index.js.map +1 -1
- package/dist/components/checkbox/index.cjs +1 -1
- package/dist/components/checkbox/index.cjs.map +1 -1
- package/dist/components/checkbox/index.js +12 -12
- package/dist/components/checkbox/index.js.map +1 -1
- package/dist/components/chip/index.cjs.map +1 -1
- package/dist/components/chip/index.js.map +1 -1
- package/dist/components/controls/index.cjs +1 -1
- package/dist/components/controls/index.cjs.map +1 -1
- package/dist/components/controls/index.js +2 -3
- package/dist/components/controls/index.js.map +1 -1
- package/dist/components/dialog/index.cjs +1 -1
- package/dist/components/dialog/index.cjs.map +1 -1
- package/dist/components/dialog/index.js +13 -13
- package/dist/components/dialog/index.js.map +1 -1
- package/dist/components/dropdown/index.cjs +1 -1
- package/dist/components/dropdown/index.js +79 -79
- package/dist/components/editor/index.cjs +25 -25
- package/dist/components/editor/index.cjs.map +1 -1
- package/dist/components/editor/index.js +2999 -2995
- package/dist/components/editor/index.js.map +1 -1
- package/dist/components/file/index.cjs +1 -1
- package/dist/components/file/index.cjs.map +1 -1
- package/dist/components/file/index.js +6 -6
- package/dist/components/file/index.js.map +1 -1
- package/dist/components/icon/index.cjs +1 -1
- package/dist/components/icon/index.js +1 -1
- package/dist/components/input/index.cjs +1 -1
- package/dist/components/input/index.js +2 -2
- package/dist/components/list/index.cjs +1 -1
- package/dist/components/list/index.js +37 -37
- package/dist/components/loading/index.cjs +1 -1
- package/dist/components/loading/index.cjs.map +1 -1
- package/dist/components/loading/index.js +20 -20
- package/dist/components/loading/index.js.map +1 -1
- package/dist/components/messages/index.cjs +1 -1
- package/dist/components/messages/index.cjs.map +1 -1
- package/dist/components/messages/index.js +48 -47
- package/dist/components/messages/index.js.map +1 -1
- package/dist/components/nav/index.cjs +1 -1
- package/dist/components/nav/index.js +1 -1
- package/dist/components/portal/index.cjs +1 -1
- package/dist/components/portal/index.js +10 -10
- package/dist/components/search/index.cjs +1 -1
- package/dist/components/search/index.js +1 -1
- package/dist/components/select/index.cjs +1 -1
- package/dist/components/select/index.js +2 -2
- package/dist/components/toggle/index.cjs +1 -1
- package/dist/components/toggle/index.cjs.map +1 -1
- package/dist/components/toggle/index.js +6 -6
- package/dist/components/toggle/index.js.map +1 -1
- package/dist/components/toolbar/index.cjs +1 -1
- package/dist/components/toolbar/index.js +5 -5
- package/dist/{icons-DKV6nOkW.js → icons-BpYV3Qdj.js} +7 -1
- package/dist/{icons-DKV6nOkW.js.map → icons-BpYV3Qdj.js.map} +1 -1
- package/dist/{icons-DLOPU0OZ.cjs → icons-DTP9D75O.cjs} +2 -2
- package/dist/{icons-DLOPU0OZ.cjs.map → icons-DTP9D75O.cjs.map} +1 -1
- package/dist/{index-Ce06AE41.js → index-C9_dM53L.js} +2 -2
- package/dist/{index-Ce06AE41.js.map → index-C9_dM53L.js.map} +1 -1
- package/dist/{index-CProY0qU.cjs → index-CfdjkXVw.cjs} +2 -2
- package/dist/{index-CProY0qU.cjs.map → index-CfdjkXVw.cjs.map} +1 -1
- package/dist/{index-Bwq0cPOt.cjs → index-Dk9p49nt.cjs} +2 -2
- package/dist/{index-Bwq0cPOt.cjs.map → index-Dk9p49nt.cjs.map} +1 -1
- package/dist/{index-B-cKCIKU.js → index-ky7bIz5x.js} +2 -2
- package/dist/{index-B-cKCIKU.js.map → index-ky7bIz5x.js.map} +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +27 -6
- package/dist/index.js +2 -2
- package/dist/tokens.json +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index43.css');const e=require("react/jsx-runtime"),j=require("../figure/index.cjs"),_=require("../icon/index.cjs"),f=require("../button/index.cjs"),N="_file_1427u_1",F="_action_1427u_14",b="_details_1427u_62",g="_name_1427u_69",I="_extension_1427u_81",P="_subtitle_1427u_91",t={file:N,action:F,delete:"_delete_1427u_15",details:b,"name-line":"_name-line_1427u_69",name:g,extension:I,subtitle:P},
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index43.css');const e=require("react/jsx-runtime"),j=require("../figure/index.cjs"),_=require("../icon/index.cjs"),f=require("../button/index.cjs"),N="_file_1427u_1",F="_action_1427u_14",b="_details_1427u_62",g="_name_1427u_69",I="_extension_1427u_81",P="_subtitle_1427u_91",t={file:N,action:F,delete:"_delete_1427u_15",details:b,"name-line":"_name-line_1427u_69",name:g,extension:I,subtitle:P},y={".doc":"FileDoc",".docx":"FileDoc",".pdf":"FilePdf",".ppt":"FilePpt",".pptx":"FilePpt",".xls":"FileXls",".xlsx":"FileXls"},q=({deleteAccessibleLabel:u,name:s,onClick:n,onDelete:a,ref:m,subtitle:r,url:d})=>{const i=s.lastIndexOf("."),x=i>0&&i<s.length-1,p=x?s.slice(0,i):s,c=x?s.slice(i):"",h=y[c.toLowerCase()]??"FileText",o=e.jsxs(e.Fragment,{children:[e.jsx(j.Figure,{children:e.jsx(_.Icon,{name:h})}),e.jsxs("span",{className:t.details,children:[e.jsxs("span",{className:t["name-line"],children:[e.jsx("span",{className:t.name,children:p}),c&&e.jsx("span",{className:t.extension,children:c})]}),r&&e.jsx("span",{className:t.subtitle,children:r})]})]});return e.jsxs("div",{className:t.file,ref:m,"data-component":"file",children:[d?e.jsx("a",{className:t.action,href:d,onClick:l=>{l.stopPropagation(),n&&(l.preventDefault(),n())},title:s,children:o}):n?e.jsx("button",{"aria-label":s,className:t.action,"data-actionable":"true",onClick:l=>{l.stopPropagation(),n()},title:s,type:"button",children:o}):e.jsx("div",{className:t.action,title:s,children:o}),a&&e.jsx(f.Button,{"aria-label":u??`Delete ${s}`,className:t.delete,onClick:()=>a(),variant:"tertiary",children:e.jsx(_.Icon,{name:"Trash",size:"small"})})]})};exports.File=q;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/file/index.tsx"],"sourcesContent":["import { Figure } from '@/components/figure';\nimport { Icon, type IconName } from '@/components/icon';\n\nimport { Button } from '../button';\nimport styles from './styles.module.css';\n\nconst documentIconNames: Record<string, IconName> = {\n '.doc': 'FileDoc',\n '.docx': 'FileDoc',\n '.pdf': 'FilePdf',\n '.ppt': 'FilePpt',\n '.pptx': 'FilePpt',\n '.xls': 'FileXls',\n '.xlsx': 'FileXls',\n};\n\nexport type FileProps = React.ComponentPropsWithRef<'div'> & {\n deleteAccessibleLabel?: string;\n name: string;\n onClick?: () => void;\n onDelete?: () => void;\n subtitle?: string;\n url?: string;\n};\n\nexport const File = ({\n deleteAccessibleLabel,\n name,\n onClick,\n onDelete,\n ref,\n subtitle,\n url,\n}: FileProps) => {\n const extensionIndex = name.lastIndexOf('.');\n const hasExtension = extensionIndex > 0 && extensionIndex < name.length - 1;\n const fileName = hasExtension ? name.slice(0, extensionIndex) : name;\n const extension = hasExtension ? name.slice(extensionIndex) : '';\n const documentIconName = documentIconNames[extension.toLowerCase()] ?? 'FileText';\n const content = (\n <>\n <Figure>\n <Icon
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/components/file/index.tsx"],"sourcesContent":["import { Figure } from '@/components/figure';\nimport { Icon, type IconName } from '@/components/icon';\n\nimport { Button } from '../button';\nimport styles from './styles.module.css';\n\nconst documentIconNames: Record<string, IconName> = {\n '.doc': 'FileDoc',\n '.docx': 'FileDoc',\n '.pdf': 'FilePdf',\n '.ppt': 'FilePpt',\n '.pptx': 'FilePpt',\n '.xls': 'FileXls',\n '.xlsx': 'FileXls',\n};\n\nexport type FileProps = React.ComponentPropsWithRef<'div'> & {\n deleteAccessibleLabel?: string;\n name: string;\n onClick?: () => void;\n onDelete?: () => void;\n subtitle?: string;\n url?: string;\n};\n\nexport const File = ({\n deleteAccessibleLabel,\n name,\n onClick,\n onDelete,\n ref,\n subtitle,\n url,\n}: FileProps) => {\n const extensionIndex = name.lastIndexOf('.');\n const hasExtension = extensionIndex > 0 && extensionIndex < name.length - 1;\n const fileName = hasExtension ? name.slice(0, extensionIndex) : name;\n const extension = hasExtension ? name.slice(extensionIndex) : '';\n const documentIconName = documentIconNames[extension.toLowerCase()] ?? 'FileText';\n const content = (\n <>\n <Figure>\n <Icon name={documentIconName} />\n </Figure>\n <span className={styles.details}>\n <span className={styles['name-line']}>\n <span className={styles.name}>{fileName}</span>\n {extension && <span className={styles.extension}>{extension}</span>}\n </span>\n {subtitle && <span className={styles.subtitle}>{subtitle}</span>}\n </span>\n </>\n );\n\n return (\n <div\n className={styles.file}\n ref={ref}\n >\n {url ? (\n <a\n className={styles.action}\n href={url}\n onClick={(event) => {\n event.stopPropagation();\n\n if (onClick) {\n event.preventDefault();\n onClick();\n }\n }}\n title={name}\n >\n {content}\n </a>\n ) : onClick ? (\n <button\n aria-label={name}\n className={styles.action}\n data-actionable='true'\n onClick={(event) => {\n event.stopPropagation();\n onClick();\n }}\n title={name}\n type='button'\n >\n {content}\n </button>\n ) : (\n <div\n className={styles.action}\n title={name}\n >\n {content}\n </div>\n )}\n {onDelete && (\n <Button\n aria-label={deleteAccessibleLabel ?? `Delete ${name}`}\n className={styles.delete}\n onClick={() => onDelete()}\n variant='tertiary'\n >\n <Icon\n name='Trash'\n size='small'\n />\n </Button>\n )}\n </div>\n );\n};\n"],"names":["documentIconNames","File","deleteAccessibleLabel","name","onClick","onDelete","ref","subtitle","url","extensionIndex","lastIndexOf","hasExtension","length","fileName","slice","extension","documentIconName","toLowerCase","content","jsxs","Fragment","jsx","Figure","Icon","styles","details","file","action","event","stopPropagation","preventDefault","Button","delete"],"mappings":"6cAMMA,EAA8C,CAClD,OAAQ,UACR,QAAS,UACT,OAAQ,UACR,OAAQ,UACR,QAAS,UACT,OAAQ,UACR,QAAS,SACX,EAWaC,EAAOA,CAAC,CACnBC,sBAAAA,EACAC,KAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,IAAAA,EACAC,SAAAA,EACAC,IAAAA,CACS,IAAM,CACf,MAAMC,EAAiBN,EAAKO,YAAY,GAAG,EACrCC,EAAeF,EAAiB,GAAKA,EAAiBN,EAAKS,OAAS,EACpEC,EAAWF,EAAeR,EAAKW,MAAM,EAAGL,CAAc,EAAIN,EAC1DY,EAAYJ,EAAeR,EAAKW,MAAML,CAAc,EAAI,GACxDO,EAAmBhB,EAAkBe,EAAUE,YAAAA,CAAa,GAAK,WACjEC,EACJC,EAAAA,KAAAC,EAAAA,SAAA,CACE,SAAA,CAAAC,MAACC,EAAAA,OAAA,CACC,SAAAD,EAAAA,IAACE,EAAAA,KAAA,CAAK,KAAMP,EAAiB,EAC/B,EACAG,EAAAA,KAAC,OAAA,CAAK,UAAWK,EAAOC,QACtB,SAAA,CAAAN,EAAAA,KAAC,OAAA,CAAK,UAAWK,EAAO,WAAW,EACjC,SAAA,CAAAH,EAAAA,IAAC,OAAA,CAAK,UAAWG,EAAOrB,KAAOU,SAAAA,EAAS,EACvCE,GAAaM,EAAAA,IAAC,OAAA,CAAK,UAAWG,EAAOT,UAAYA,SAAAA,CAAAA,CAAU,CAAA,EAC9D,EACCR,GAAYc,EAAAA,IAAC,OAAA,CAAK,UAAWG,EAAOjB,SAAWA,SAAAA,CAAAA,CAAS,CAAA,CAAA,CAC3D,CAAA,EACF,EAGF,cACG,MAAA,CACC,UAAWiB,EAAOE,KAClB,IAAApB,EAAS,iBAAA,OAERE,SAAAA,CAAAA,EACCa,EAAAA,IAAC,KACC,UAAWG,EAAOG,OAClB,KAAMnB,EACN,QAAUoB,GAAU,CAClBA,EAAMC,gBAAAA,EAEFzB,IACFwB,EAAME,eAAAA,EACN1B,EAAAA,EAEJ,EACA,MAAOD,EAENe,SAAAA,CAAAA,CACH,EACEd,EACFiB,EAAAA,IAAC,SAAA,CACC,aAAYlB,EACZ,UAAWqB,EAAOG,OAClB,kBAAgB,OAChB,QAAUC,GAAU,CAClBA,EAAMC,gBAAAA,EACNzB,EAAAA,CACF,EACA,MAAOD,EACP,KAAK,SAEJe,SAAAA,CAAAA,CACH,EAEAG,EAAAA,IAAC,MAAA,CACC,UAAWG,EAAOG,OAClB,MAAOxB,EAENe,SAAAA,EACH,EAEDb,SACE0B,SAAA,CACC,aAAY7B,GAAyB,UAAUC,CAAI,GACnD,UAAWqB,EAAOQ,OAClB,QAAS,IAAM3B,IACf,QAAQ,WAER,SAAAgB,EAAAA,IAACE,QACC,KAAK,QACL,KAAK,OAAA,CAAO,CAAA,CAEhB,CAAA,EAEJ,CAEJ"}
|
|
@@ -2,16 +2,16 @@ import { jsxs as a, jsx as t, Fragment as N } from "react/jsx-runtime";
|
|
|
2
2
|
import { Figure as F } from "../figure/index.js";
|
|
3
3
|
import { Icon as _ } from "../icon/index.js";
|
|
4
4
|
import { Button as b } from "../button/index.js";
|
|
5
|
-
import '../../assets/index43.css';const g = "_file_1427u_1", I = "_action_1427u_14", P = "_details_1427u_62", v = "_name_1427u_69",
|
|
5
|
+
import '../../assets/index43.css';const g = "_file_1427u_1", I = "_action_1427u_14", P = "_details_1427u_62", v = "_name_1427u_69", y = "_extension_1427u_81", D = "_subtitle_1427u_91", n = {
|
|
6
6
|
file: g,
|
|
7
7
|
action: I,
|
|
8
8
|
delete: "_delete_1427u_15",
|
|
9
9
|
details: P,
|
|
10
10
|
"name-line": "_name-line_1427u_69",
|
|
11
11
|
name: v,
|
|
12
|
-
extension:
|
|
13
|
-
subtitle:
|
|
14
|
-
},
|
|
12
|
+
extension: y,
|
|
13
|
+
subtitle: D
|
|
14
|
+
}, j = {
|
|
15
15
|
".doc": "FileDoc",
|
|
16
16
|
".docx": "FileDoc",
|
|
17
17
|
".pdf": "FilePdf",
|
|
@@ -28,7 +28,7 @@ import '../../assets/index43.css';const g = "_file_1427u_1", I = "_action_1427u_
|
|
|
28
28
|
subtitle: d,
|
|
29
29
|
url: m
|
|
30
30
|
}) => {
|
|
31
|
-
const i = e.lastIndexOf("."), p = i > 0 && i < e.length - 1, f = p ? e.slice(0, i) : e, o = p ? e.slice(i) : "", h =
|
|
31
|
+
const i = e.lastIndexOf("."), p = i > 0 && i < e.length - 1, f = p ? e.slice(0, i) : e, o = p ? e.slice(i) : "", h = j[o.toLowerCase()] ?? "FileText", c = /* @__PURE__ */ a(N, { children: [
|
|
32
32
|
/* @__PURE__ */ t(F, { children: /* @__PURE__ */ t(_, { name: h }) }),
|
|
33
33
|
/* @__PURE__ */ a("span", { className: n.details, children: [
|
|
34
34
|
/* @__PURE__ */ a("span", { className: n["name-line"], children: [
|
|
@@ -44,7 +44,7 @@ import '../../assets/index43.css';const g = "_file_1427u_1", I = "_action_1427u_
|
|
|
44
44
|
}, title: e, children: c }) : s ? /* @__PURE__ */ t("button", { "aria-label": e, className: n.action, "data-actionable": "true", onClick: (l) => {
|
|
45
45
|
l.stopPropagation(), s();
|
|
46
46
|
}, title: e, type: "button", children: c }) : /* @__PURE__ */ t("div", { className: n.action, title: e, children: c }),
|
|
47
|
-
r && /* @__PURE__ */ t(b, { "aria-label": u ?? `Delete ${e}`, className: n.delete, onClick: () => r(), variant: "
|
|
47
|
+
r && /* @__PURE__ */ t(b, { "aria-label": u ?? `Delete ${e}`, className: n.delete, onClick: () => r(), variant: "tertiary", children: /* @__PURE__ */ t(_, { name: "Trash", size: "small" }) })
|
|
48
48
|
] });
|
|
49
49
|
};
|
|
50
50
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/file/index.tsx"],"sourcesContent":["import { Figure } from '@/components/figure';\nimport { Icon, type IconName } from '@/components/icon';\n\nimport { Button } from '../button';\nimport styles from './styles.module.css';\n\nconst documentIconNames: Record<string, IconName> = {\n '.doc': 'FileDoc',\n '.docx': 'FileDoc',\n '.pdf': 'FilePdf',\n '.ppt': 'FilePpt',\n '.pptx': 'FilePpt',\n '.xls': 'FileXls',\n '.xlsx': 'FileXls',\n};\n\nexport type FileProps = React.ComponentPropsWithRef<'div'> & {\n deleteAccessibleLabel?: string;\n name: string;\n onClick?: () => void;\n onDelete?: () => void;\n subtitle?: string;\n url?: string;\n};\n\nexport const File = ({\n deleteAccessibleLabel,\n name,\n onClick,\n onDelete,\n ref,\n subtitle,\n url,\n}: FileProps) => {\n const extensionIndex = name.lastIndexOf('.');\n const hasExtension = extensionIndex > 0 && extensionIndex < name.length - 1;\n const fileName = hasExtension ? name.slice(0, extensionIndex) : name;\n const extension = hasExtension ? name.slice(extensionIndex) : '';\n const documentIconName = documentIconNames[extension.toLowerCase()] ?? 'FileText';\n const content = (\n <>\n <Figure>\n <Icon
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/file/index.tsx"],"sourcesContent":["import { Figure } from '@/components/figure';\nimport { Icon, type IconName } from '@/components/icon';\n\nimport { Button } from '../button';\nimport styles from './styles.module.css';\n\nconst documentIconNames: Record<string, IconName> = {\n '.doc': 'FileDoc',\n '.docx': 'FileDoc',\n '.pdf': 'FilePdf',\n '.ppt': 'FilePpt',\n '.pptx': 'FilePpt',\n '.xls': 'FileXls',\n '.xlsx': 'FileXls',\n};\n\nexport type FileProps = React.ComponentPropsWithRef<'div'> & {\n deleteAccessibleLabel?: string;\n name: string;\n onClick?: () => void;\n onDelete?: () => void;\n subtitle?: string;\n url?: string;\n};\n\nexport const File = ({\n deleteAccessibleLabel,\n name,\n onClick,\n onDelete,\n ref,\n subtitle,\n url,\n}: FileProps) => {\n const extensionIndex = name.lastIndexOf('.');\n const hasExtension = extensionIndex > 0 && extensionIndex < name.length - 1;\n const fileName = hasExtension ? name.slice(0, extensionIndex) : name;\n const extension = hasExtension ? name.slice(extensionIndex) : '';\n const documentIconName = documentIconNames[extension.toLowerCase()] ?? 'FileText';\n const content = (\n <>\n <Figure>\n <Icon name={documentIconName} />\n </Figure>\n <span className={styles.details}>\n <span className={styles['name-line']}>\n <span className={styles.name}>{fileName}</span>\n {extension && <span className={styles.extension}>{extension}</span>}\n </span>\n {subtitle && <span className={styles.subtitle}>{subtitle}</span>}\n </span>\n </>\n );\n\n return (\n <div\n className={styles.file}\n ref={ref}\n >\n {url ? (\n <a\n className={styles.action}\n href={url}\n onClick={(event) => {\n event.stopPropagation();\n\n if (onClick) {\n event.preventDefault();\n onClick();\n }\n }}\n title={name}\n >\n {content}\n </a>\n ) : onClick ? (\n <button\n aria-label={name}\n className={styles.action}\n data-actionable='true'\n onClick={(event) => {\n event.stopPropagation();\n onClick();\n }}\n title={name}\n type='button'\n >\n {content}\n </button>\n ) : (\n <div\n className={styles.action}\n title={name}\n >\n {content}\n </div>\n )}\n {onDelete && (\n <Button\n aria-label={deleteAccessibleLabel ?? `Delete ${name}`}\n className={styles.delete}\n onClick={() => onDelete()}\n variant='tertiary'\n >\n <Icon\n name='Trash'\n size='small'\n />\n </Button>\n )}\n </div>\n );\n};\n"],"names":["documentIconNames","File","deleteAccessibleLabel","name","onClick","onDelete","ref","subtitle","url","extensionIndex","lastIndexOf","hasExtension","length","fileName","slice","extension","documentIconName","toLowerCase","content","jsxs","Fragment","jsx","Figure","Icon","styles","details","file","action","event","stopPropagation","preventDefault","Button","delete"],"mappings":";;;;;;;;;;;;;GAMMA,IAA8C;AAAA,EAClD,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AACX,GAWaC,IAAOA,CAAC;AAAA,EACnBC,uBAAAA;AAAAA,EACAC,MAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,KAAAA;AACS,MAAM;AACf,QAAMC,IAAiBN,EAAKO,YAAY,GAAG,GACrCC,IAAeF,IAAiB,KAAKA,IAAiBN,EAAKS,SAAS,GACpEC,IAAWF,IAAeR,EAAKW,MAAM,GAAGL,CAAc,IAAIN,GAC1DY,IAAYJ,IAAeR,EAAKW,MAAML,CAAc,IAAI,IACxDO,IAAmBhB,EAAkBe,EAAUE,YAAAA,CAAa,KAAK,YACjEC,IACJ,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EACC,UAAA,gBAAAD,EAACE,GAAA,EAAK,MAAMP,GAAiB,GAC/B;AAAA,IACA,gBAAAG,EAAC,QAAA,EAAK,WAAWK,EAAOC,SACtB,UAAA;AAAA,MAAA,gBAAAN,EAAC,QAAA,EAAK,WAAWK,EAAO,WAAW,GACjC,UAAA;AAAA,QAAA,gBAAAH,EAAC,QAAA,EAAK,WAAWG,EAAOrB,MAAOU,UAAAA,GAAS;AAAA,QACvCE,KAAa,gBAAAM,EAAC,QAAA,EAAK,WAAWG,EAAOT,WAAYA,UAAAA,EAAAA,CAAU;AAAA,MAAA,GAC9D;AAAA,MACCR,KAAY,gBAAAc,EAAC,QAAA,EAAK,WAAWG,EAAOjB,UAAWA,UAAAA,EAAAA,CAAS;AAAA,IAAA,EAAA,CAC3D;AAAA,EAAA,GACF;AAGF,2BACG,OAAA,EACC,WAAWiB,EAAOE,MAClB,KAAApB,GAAS,kBAAA,QAERE,UAAAA;AAAAA,IAAAA,IACC,gBAAAa,EAAC,OACC,WAAWG,EAAOG,QAClB,MAAMnB,GACN,SAAUoB,CAAAA,MAAU;AAClBA,MAAAA,EAAMC,gBAAAA,GAEFzB,MACFwB,EAAME,eAAAA,GACN1B,EAAAA;AAAAA,IAEJ,GACA,OAAOD,GAENe,UAAAA,EAAAA,CACH,IACEd,IACF,gBAAAiB,EAAC,UAAA,EACC,cAAYlB,GACZ,WAAWqB,EAAOG,QAClB,mBAAgB,QAChB,SAAUC,CAAAA,MAAU;AAClBA,MAAAA,EAAMC,gBAAAA,GACNzB,EAAAA;AAAAA,IACF,GACA,OAAOD,GACP,MAAK,UAEJe,UAAAA,EAAAA,CACH,IAEA,gBAAAG,EAAC,OAAA,EACC,WAAWG,EAAOG,QAClB,OAAOxB,GAENe,UAAAA,GACH;AAAA,IAEDb,uBACE0B,GAAA,EACC,cAAY7B,KAAyB,UAAUC,CAAI,IACnD,WAAWqB,EAAOQ,QAClB,SAAS,MAAM3B,KACf,SAAQ,YAER,UAAA,gBAAAgB,EAACE,KACC,MAAK,SACL,MAAK,QAAA,CAAO,EAAA,CAEhB;AAAA,EAAA,GAEJ;AAEJ;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index44.css');const i=require("react/jsx-runtime"),g=require("../../classix-5H4IWnMA.cjs"),r=require("../../icons-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index44.css');const i=require("react/jsx-runtime"),g=require("../../classix-5H4IWnMA.cjs"),r=require("../../icons-DTP9D75O.cjs"),l="_icon_1dkgk_1",d="_small_1dkgk_10",m="_medium_1dkgk_15",_="_large_1dkgk_20",k="_danger_1dkgk_25",e={icon:l,small:d,medium:m,large:_,danger:k,"gap-right":"_gap-right_1dkgk_29","gap-left":"_gap-left_1dkgk_33"},u={large:e.large,medium:e.medium,small:e.small},p={danger:e.danger},y=({gap:n="none",name:o,size:t="medium",variant:s,weight:a})=>{const c={maskImage:r.iconSVG(o,void 0,a)};return i.jsx("span",{"aria-hidden":"true",className:g.t(n!=="none"&&e[`gap-${n}`],u[t],e.icon,s&&p[s]),style:c,"data-component":"icon"})};exports.Icon=y;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as g } from "react/jsx-runtime";
|
|
2
2
|
import { t as i } from "../../classix-DG18itHa.js";
|
|
3
|
-
import { i as r } from "../../icons-
|
|
3
|
+
import { i as r } from "../../icons-BpYV3Qdj.js";
|
|
4
4
|
import '../../assets/index44.css';const d = "_icon_1dkgk_1", l = "_small_1dkgk_10", _ = "_medium_1dkgk_15", c = "_large_1dkgk_20", k = "_danger_1dkgk_25", n = {
|
|
5
5
|
icon: d,
|
|
6
6
|
small: l,
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");require("../../classix-5H4IWnMA.cjs");require("react");require("../../icons-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");require("../../classix-5H4IWnMA.cjs");require("react");require("../../icons-DTP9D75O.cjs");require("../../use-touched-Bq5Gjbpz.cjs");const e=require("../../index-CfdjkXVw.cjs");exports.Input=e.Input;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import "react/jsx-runtime";
|
|
2
2
|
import "../../classix-DG18itHa.js";
|
|
3
3
|
import "react";
|
|
4
|
-
import "../../icons-
|
|
4
|
+
import "../../icons-BpYV3Qdj.js";
|
|
5
5
|
import "../../use-touched-B999bBr8.js";
|
|
6
|
-
import { I as a } from "../../index-
|
|
6
|
+
import { I as a } from "../../index-C9_dM53L.js";
|
|
7
7
|
export {
|
|
8
8
|
a as Input
|
|
9
9
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index47.css');const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index47.css');const i=require("react/jsx-runtime"),g=require("../../classix-5H4IWnMA.cjs"),n=require("react");function d(t){return n.isValidElement(t)&&t.type===n.Fragment}function E(t,s=[]){return n.Children.forEach(t,e=>{d(e)?E(e.props.children,s):s.push(e)}),s}function x(t,{wrapper:s="li"}={}){return E(t).filter(l=>l!==null).map((l,r)=>{if(n.isValidElement(l)&&l.type===s)return l;const c=n.isValidElement(l)&&l.key!=null?l.key:r;return n.createElement(s,{key:c},l)})}const z="_controls_1i7ll_1",F="_horizontal_1i7ll_6",V="_list_1i7ll_17",b="_columns_1i7ll_57",k="_compact_1i7ll_74",o={controls:z,horizontal:F,list:V,columns:b,compact:k},j=(t,s)=>{typeof t=="function"?t(s):t&&(t.current=s)};function q({children:t,className:s,columns:e=1,compact:u=!1,controls:l,horizontal:r,ordered:c,ref:m,style:N,...f}){const _=Number.isFinite(e)?Math.max(1,Math.floor(e)):1,y=g.t(s,o.list,_>1&&o.columns,r&&o.horizontal,u&&o.compact),p={...N,"--list-columns":_},h=c?i.jsx("ol",{className:y,ref:a=>j(m,a),style:p,...f,children:x(t)}):i.jsx("ul",{className:y,ref:a=>j(m,a),style:p,...f,children:x(t)});return l==null?h:i.jsxs(i.Fragment,{children:[i.jsx("div",{className:o.controls,children:l}),h]})}exports.List=q;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,57 +1,57 @@
|
|
|
1
|
-
import { jsx as a, jsxs as
|
|
2
|
-
import { t as
|
|
1
|
+
import { jsx as a, jsxs as F, Fragment as V } from "react/jsx-runtime";
|
|
2
|
+
import { t as d } from "../../classix-DG18itHa.js";
|
|
3
3
|
import e from "react";
|
|
4
|
-
import '../../assets/index47.css';function
|
|
4
|
+
import '../../assets/index47.css';function g(t) {
|
|
5
5
|
return e.isValidElement(t) && t.type === e.Fragment;
|
|
6
6
|
}
|
|
7
|
-
function
|
|
8
|
-
return e.Children.forEach(t, (
|
|
9
|
-
|
|
10
|
-
}),
|
|
7
|
+
function x(t, n = []) {
|
|
8
|
+
return e.Children.forEach(t, (s) => {
|
|
9
|
+
g(s) ? x(s.props.children, n) : n.push(s);
|
|
10
|
+
}), n;
|
|
11
11
|
}
|
|
12
|
-
function
|
|
13
|
-
wrapper:
|
|
12
|
+
function E(t, {
|
|
13
|
+
wrapper: n = "li"
|
|
14
14
|
} = {}) {
|
|
15
|
-
return
|
|
16
|
-
if (e.isValidElement(
|
|
17
|
-
return
|
|
18
|
-
const
|
|
19
|
-
return e.createElement(
|
|
20
|
-
key:
|
|
21
|
-
},
|
|
15
|
+
return x(t).filter((l) => l !== null).map((l, i) => {
|
|
16
|
+
if (e.isValidElement(l) && l.type === n)
|
|
17
|
+
return l;
|
|
18
|
+
const r = e.isValidElement(l) && l.key != null ? l.key : i;
|
|
19
|
+
return e.createElement(n, {
|
|
20
|
+
key: r
|
|
21
|
+
}, l);
|
|
22
22
|
});
|
|
23
23
|
}
|
|
24
|
-
const
|
|
25
|
-
controls:
|
|
26
|
-
horizontal:
|
|
27
|
-
list:
|
|
28
|
-
columns:
|
|
29
|
-
compact:
|
|
30
|
-
},
|
|
31
|
-
typeof t == "function" ? t(
|
|
24
|
+
const k = "_controls_1i7ll_1", C = "_horizontal_1i7ll_6", j = "_list_1i7ll_17", v = "_columns_1i7ll_57", L = "_compact_1i7ll_74", o = {
|
|
25
|
+
controls: k,
|
|
26
|
+
horizontal: C,
|
|
27
|
+
list: j,
|
|
28
|
+
columns: v,
|
|
29
|
+
compact: L
|
|
30
|
+
}, N = (t, n) => {
|
|
31
|
+
typeof t == "function" ? t(n) : t && (t.current = n);
|
|
32
32
|
};
|
|
33
|
-
function
|
|
33
|
+
function w({
|
|
34
34
|
children: t,
|
|
35
|
-
className:
|
|
36
|
-
columns:
|
|
35
|
+
className: n,
|
|
36
|
+
columns: s = 1,
|
|
37
37
|
compact: m = !1,
|
|
38
|
-
controls:
|
|
39
|
-
horizontal:
|
|
40
|
-
ordered:
|
|
38
|
+
controls: l,
|
|
39
|
+
horizontal: i,
|
|
40
|
+
ordered: r,
|
|
41
41
|
ref: u,
|
|
42
|
-
style:
|
|
42
|
+
style: z,
|
|
43
43
|
...f
|
|
44
44
|
}) {
|
|
45
|
-
const _ = Number.isFinite(
|
|
46
|
-
...
|
|
45
|
+
const _ = Number.isFinite(s) ? Math.max(1, Math.floor(s)) : 1, p = d(n, o.list, _ > 1 && o.columns, i && o.horizontal, m && o.compact), y = {
|
|
46
|
+
...z,
|
|
47
47
|
"--list-columns": _
|
|
48
|
-
}, h =
|
|
49
|
-
return
|
|
50
|
-
/* @__PURE__ */ a("div", { className: o.controls, children:
|
|
48
|
+
}, h = r ? /* @__PURE__ */ a("ol", { className: p, ref: (c) => N(u, c), style: y, ...f, children: E(t) }) : /* @__PURE__ */ a("ul", { className: p, ref: (c) => N(u, c), style: y, ...f, children: E(t) });
|
|
49
|
+
return l == null ? h : /* @__PURE__ */ F(V, { children: [
|
|
50
|
+
/* @__PURE__ */ a("div", { className: o.controls, children: l }),
|
|
51
51
|
h
|
|
52
52
|
] });
|
|
53
53
|
}
|
|
54
54
|
export {
|
|
55
|
-
|
|
55
|
+
w as List
|
|
56
56
|
};
|
|
57
57
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index48.css');const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index48.css');const l=require("react/jsx-runtime"),n=require("../../classix-5H4IWnMA.cjs"),o="_loading_107mr_23",m="_spin_107mr_1",r="_small_107mr_40",c="_large_107mr_46",_="_ping_107mr_52",d="_sticky_107mr_78",s={loading:o,default:"_default_107mr_29",spin:m,small:r,large:c,ping:_,sticky:d},g={large:s.large,medium:s.medium,small:s.small},u=({variant:a="default",size:e="medium",sticky:i=!1,...t})=>l.jsx("div",{className:n.t(s.loading,i&&s.sticky),"data-component":"loading",children:l.jsx("span",{className:n.t(s.loading,s[a],g[e]),...t})});exports.Loading=u;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/loading/index.tsx"],"sourcesContent":["import { cx } from 'classix';\n\nimport styles from './styles.module.css';\n\nexport type LoadingProps = {\n size?:
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/components/loading/index.tsx"],"sourcesContent":["import { cx } from 'classix';\n\nimport styles from './styles.module.css';\n\nconst sizes = {\n large: styles.large,\n medium: styles.medium,\n small: styles.small,\n};\n\nexport type LoadingProps = {\n size?: keyof typeof sizes;\n sticky?: boolean;\n variant?: 'default' | 'ping';\n};\n\nexport const Loading = ({\n variant = 'default',\n size = 'medium',\n sticky = false,\n ...props\n}: LoadingProps) => {\n return (\n <div className={cx(styles.loading, sticky && styles.sticky)}>\n <span\n className={cx(styles.loading, styles[variant], sizes[size])}\n {...props}\n />\n </div>\n );\n};\n"],"names":["sizes","large","styles","medium","small","Loading","variant","size","sticky","props","jsx","cx","loading"],"mappings":"sWAIMA,EAAQ,CACZC,MAAOC,EAAOD,MACdE,OAAQD,EAAOC,OACfC,MAAOF,EAAOE,KAChB,EAQaC,EAAUA,CAAC,CACtBC,QAAAA,EAAU,UACVC,KAAAA,EAAO,SACPC,OAAAA,EAAS,GACT,GAAGC,CACS,IAEVC,EAAAA,IAAC,MAAA,CAAI,UAAWC,EAAAA,EAAGT,EAAOU,QAASJ,GAAUN,EAAOM,MAAM,EAAE,iBAAA,UAC1D,SAAAE,EAAAA,IAAC,OAAA,CACC,UAAWC,EAAAA,EAAGT,EAAOU,QAASV,EAAOI,CAAO,EAAGN,EAAMO,CAAI,CAAC,EAC1D,GAAIE,CAAAA,CAAM,CAAA,CAEd"}
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { t } from "../../classix-DG18itHa.js";
|
|
3
|
-
import '../../assets/index48.css';const
|
|
4
|
-
loading:
|
|
5
|
-
default: "
|
|
1
|
+
import { jsx as l } from "react/jsx-runtime";
|
|
2
|
+
import { t as a } from "../../classix-DG18itHa.js";
|
|
3
|
+
import '../../assets/index48.css';const o = "_loading_107mr_23", _ = "_spin_107mr_1", e = "_small_107mr_40", r = "_large_107mr_46", c = "_ping_107mr_52", d = "_sticky_107mr_78", s = {
|
|
4
|
+
loading: o,
|
|
5
|
+
default: "_default_107mr_29",
|
|
6
6
|
spin: _,
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
};
|
|
7
|
+
small: e,
|
|
8
|
+
large: r,
|
|
9
|
+
ping: c,
|
|
10
|
+
sticky: d
|
|
11
|
+
}, g = {
|
|
12
|
+
large: s.large,
|
|
13
|
+
medium: s.medium,
|
|
14
|
+
small: s.small
|
|
15
|
+
}, f = ({
|
|
16
|
+
variant: n = "default",
|
|
17
|
+
size: i = "medium",
|
|
18
|
+
sticky: m = !1,
|
|
19
|
+
...t
|
|
20
|
+
}) => /* @__PURE__ */ l("div", { className: a(s.loading, m && s.sticky), "data-component": "loading", children: /* @__PURE__ */ l("span", { className: a(s.loading, s[n], g[i]), ...t }) });
|
|
21
21
|
export {
|
|
22
|
-
|
|
22
|
+
f as Loading
|
|
23
23
|
};
|
|
24
24
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/loading/index.tsx"],"sourcesContent":["import { cx } from 'classix';\n\nimport styles from './styles.module.css';\n\nexport type LoadingProps = {\n size?:
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/loading/index.tsx"],"sourcesContent":["import { cx } from 'classix';\n\nimport styles from './styles.module.css';\n\nconst sizes = {\n large: styles.large,\n medium: styles.medium,\n small: styles.small,\n};\n\nexport type LoadingProps = {\n size?: keyof typeof sizes;\n sticky?: boolean;\n variant?: 'default' | 'ping';\n};\n\nexport const Loading = ({\n variant = 'default',\n size = 'medium',\n sticky = false,\n ...props\n}: LoadingProps) => {\n return (\n <div className={cx(styles.loading, sticky && styles.sticky)}>\n <span\n className={cx(styles.loading, styles[variant], sizes[size])}\n {...props}\n />\n </div>\n );\n};\n"],"names":["sizes","large","styles","medium","small","Loading","variant","size","sticky","props","jsx","cx","loading"],"mappings":";;;;;;;;;;GAIMA,IAAQ;AAAA,EACZC,OAAOC,EAAOD;AAAAA,EACdE,QAAQD,EAAOC;AAAAA,EACfC,OAAOF,EAAOE;AAChB,GAQaC,IAAUA,CAAC;AAAA,EACtBC,SAAAA,IAAU;AAAA,EACVC,MAAAA,IAAO;AAAA,EACPC,QAAAA,IAAS;AAAA,EACT,GAAGC;AACS,MAEV,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAGT,EAAOU,SAASJ,KAAUN,EAAOM,MAAM,GAAE,kBAAA,WAC1D,UAAA,gBAAAE,EAAC,QAAA,EACC,WAAWC,EAAGT,EAAOU,SAASV,EAAOI,CAAO,GAAGN,EAAMO,CAAI,CAAC,GAC1D,GAAIE,EAAAA,CAAM,EAAA,CAEd;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index13.css');const r=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index13.css');const r=require("react/jsx-runtime"),D=require("../../classix-5H4IWnMA.cjs"),n=require("react"),G=require("../editor/index.cjs"),I=require("../list/index.cjs"),J=require("../tooltip/index.cjs"),K=require("../message/index.cjs"),Q="_messages_pqp89_1",V="_fill_pqp89_20",j={messages:Q,fill:V},X=({fill:M=!1,files:u,handleUpload:y,inlineImages:c,maxEditorRows:Y=5,message:d="",messages:l,minEditorRows:b=1,onChange:H,onFilesChange:a,onInlineImagesChange:B,onSubmit:N,placeholder:O,sending:m,submitLabel:P="Send message",tooltipLabel:f})=>{var L;const v=n.useRef(null),o=n.useRef(!0),h=n.useRef(!1),[U,W]=n.useState([]),p=u??U,g=(L=l[l.length-1])==null?void 0:L.id,k=d.replace(/<[^>]*>/g,"").replace(/ /g," ").trim()==="";return n.useLayoutEffect(()=>{var R;const e=(R=v.current)==null?void 0:R.querySelector("[data-message-list]");if(!e||g===void 0)return;const z=e.scrollHeight-e.scrollTop-e.clientHeight<450,_=!h.current||z;o.current=_,h.current=!0;const A=window.setTimeout(()=>{o.current=!1},5e3),E=()=>{e.scrollTop=e.scrollHeight};_&&E();const T=t=>{o.current&&t.target instanceof HTMLImageElement&&E()},q=t=>{t.deltaY<0&&(o.current=!1)};let i;const x=t=>{var s;i=(s=t.touches[0])==null?void 0:s.clientY},w=t=>{var S;const s=(S=t.touches[0])==null?void 0:S.clientY;s!==void 0&&i!==void 0&&s>i&&(o.current=!1),i=s};return e.addEventListener("load",T,!0),e.addEventListener("wheel",q,{passive:!0}),e.addEventListener("touchstart",x,{passive:!0}),e.addEventListener("touchmove",w,{passive:!0}),()=>{window.clearTimeout(A),e.removeEventListener("load",T,!0),e.removeEventListener("wheel",q),e.removeEventListener("touchstart",x),e.removeEventListener("touchmove",w)}},[g]),r.jsxs("div",{className:D.t(j.messages,M&&j.fill),"data-component":"messages",ref:v,children:[r.jsx(I.List,{"data-message-list":!0,children:l.map(e=>r.jsx(K.Message,{...e},e.id))}),f&&r.jsx(J.Tooltip,{variant:"static",children:f}),r.jsx(G.Editor,{autofocus:!0,content:d,disabled:m||k&&p.length===0&&!(c!=null&&c.length),files:p,inlineImages:c,isSubmitting:m,maxRows:Y,minRows:b,onChange:H,onFilesChange:e=>{u===void 0&&W(e),a==null||a(e)},onInlineImagesChange:B,onSubmit:N,onUpload:y,placeholder:O,submitLabel:P})]})};exports.Messages=X;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/messages/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useLayoutEffect, useRef, useState } from 'react';\n\nimport { Editor, type PendingInlineImage } from '@/components/editor';\nimport { List } from '@/components/list';\nimport { Tooltip } from '@/components/tooltip';\n\nimport { Message, type MessageOptions } from '../message';\nimport styles from './styles.module.css';\n\nexport type MessageItem = MessageOptions;\n\nexport type MessagesProps = {\n fill?: boolean;\n files?: readonly File[];\n handleUpload: (files: FileList) => Promise<void> | void;\n inlineImages?: readonly PendingInlineImage[];\n maxEditorRows?: number;\n message: string;\n messages: MessageItem[];\n minEditorRows?: number;\n onChange: (content: string) => void;\n onFilesChange?: (files: File[]) => void;\n onInlineImagesChange?: (images: PendingInlineImage[]) => void;\n onSubmit: () => Promise<void> | void;\n placeholder?: string;\n sending: boolean;\n tooltipLabel?: string;\n};\n\nexport const Messages = ({\n fill = false,\n files,\n handleUpload,\n inlineImages,\n maxEditorRows = 5,\n message = '',\n messages,\n minEditorRows = 1,\n onChange,\n onFilesChange,\n onInlineImagesChange,\n onSubmit,\n placeholder,\n sending,\n tooltipLabel,\n}: MessagesProps) => {\n const messagesRef = useRef<HTMLDivElement>(null);\n const followImageLoadsRef = useRef(true);\n const hasLoadedRef = useRef(false);\n const [internalFiles, setInternalFiles] = useState<File[]>([]);\n const queuedFiles = files ?? internalFiles;\n const newestMessageId = messages[messages.length - 1]?.id;\n const messageIsEmpty =\n message\n .replace(/<[^>]*>/g, '')\n .replace(/ /g, ' ')\n .trim() === '';\n\n useLayoutEffect(() => {\n const messageList = messagesRef.current?.querySelector<HTMLElement>('[data-message-list]');\n if (!messageList || newestMessageId === undefined) return;\n\n const isNearBottom =\n messageList.scrollHeight - messageList.scrollTop - messageList.clientHeight <\n 450; /* 🌝 preview image max height plus allowance */\n const shouldScrollToBottom = !hasLoadedRef.current || isNearBottom;\n\n followImageLoadsRef.current = shouldScrollToBottom;\n hasLoadedRef.current = true;\n\n const timeout = window.setTimeout(() => {\n followImageLoadsRef.current = false;\n }, 5000);\n\n const scrollToBottom = () => {\n messageList.scrollTop = messageList.scrollHeight;\n };\n\n if (shouldScrollToBottom) scrollToBottom();\n\n const handleLoad = (event: Event) => {\n if (followImageLoadsRef.current && event.target instanceof HTMLImageElement) {\n scrollToBottom();\n }\n };\n\n const handleWheel = (event: WheelEvent) => {\n if (event.deltaY < 0) {\n followImageLoadsRef.current = false;\n }\n };\n\n let previousTouchY: number | undefined;\n\n const handleTouchStart = (event: TouchEvent) => {\n previousTouchY = event.touches[0]?.clientY;\n };\n\n const handleTouchMove = (event: TouchEvent) => {\n const touchY = event.touches[0]?.clientY;\n if (touchY !== undefined && previousTouchY !== undefined && touchY > previousTouchY) {\n followImageLoadsRef.current = false;\n }\n previousTouchY = touchY;\n };\n\n messageList.addEventListener('load', handleLoad, true);\n messageList.addEventListener('wheel', handleWheel, { passive: true });\n messageList.addEventListener('touchstart', handleTouchStart, { passive: true });\n messageList.addEventListener('touchmove', handleTouchMove, { passive: true });\n\n return () => {\n window.clearTimeout(timeout);\n messageList.removeEventListener('load', handleLoad, true);\n messageList.removeEventListener('wheel', handleWheel);\n messageList.removeEventListener('touchstart', handleTouchStart);\n messageList.removeEventListener('touchmove', handleTouchMove);\n };\n }, [newestMessageId]);\n\n return (\n <div\n className={cx(styles.messages, fill && styles.fill)}\n data-component='messages'\n ref={messagesRef}\n >\n <List data-message-list>\n {messages.map((message) => (\n <Message\n key={message.id}\n {...message}\n />\n ))}\n </List>\n {tooltipLabel && <Tooltip variant='static'>{tooltipLabel}</Tooltip>}\n <Editor\n autofocus\n content={message}\n disabled={sending || (messageIsEmpty && queuedFiles.length === 0 && !inlineImages?.length)}\n files={queuedFiles}\n inlineImages={inlineImages}\n maxRows={maxEditorRows}\n minRows={minEditorRows}\n onChange={onChange}\n onFilesChange={(nextFiles) => {\n if (files === undefined) setInternalFiles(nextFiles);\n onFilesChange?.(nextFiles);\n }}\n onInlineImagesChange={onInlineImagesChange}\n onSubmit={onSubmit}\n onUpload={handleUpload}\n placeholder={placeholder}\n submitLabel=
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/components/messages/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useLayoutEffect, useRef, useState } from 'react';\n\nimport { Editor, type PendingInlineImage } from '@/components/editor';\nimport { List } from '@/components/list';\nimport { Tooltip } from '@/components/tooltip';\n\nimport { Message, type MessageOptions } from '../message';\nimport styles from './styles.module.css';\n\nexport type MessageItem = MessageOptions;\n\nexport type MessagesProps = {\n fill?: boolean;\n files?: readonly File[];\n handleUpload: (files: FileList) => Promise<void> | void;\n inlineImages?: readonly PendingInlineImage[];\n maxEditorRows?: number;\n message: string;\n messages: MessageItem[];\n minEditorRows?: number;\n onChange: (content: string) => void;\n onFilesChange?: (files: File[]) => void;\n onInlineImagesChange?: (images: PendingInlineImage[]) => void;\n onSubmit: () => Promise<void> | void;\n placeholder?: string;\n sending: boolean;\n submitLabel?: string;\n tooltipLabel?: string;\n};\n\nexport const Messages = ({\n fill = false,\n files,\n handleUpload,\n inlineImages,\n maxEditorRows = 5,\n message = '',\n messages,\n minEditorRows = 1,\n onChange,\n onFilesChange,\n onInlineImagesChange,\n onSubmit,\n placeholder,\n sending,\n submitLabel = 'Send message',\n tooltipLabel,\n}: MessagesProps) => {\n const messagesRef = useRef<HTMLDivElement>(null);\n const followImageLoadsRef = useRef(true);\n const hasLoadedRef = useRef(false);\n const [internalFiles, setInternalFiles] = useState<File[]>([]);\n const queuedFiles = files ?? internalFiles;\n const newestMessageId = messages[messages.length - 1]?.id;\n const messageIsEmpty =\n message\n .replace(/<[^>]*>/g, '')\n .replace(/ /g, ' ')\n .trim() === '';\n\n useLayoutEffect(() => {\n const messageList = messagesRef.current?.querySelector<HTMLElement>('[data-message-list]');\n if (!messageList || newestMessageId === undefined) return;\n\n const isNearBottom =\n messageList.scrollHeight - messageList.scrollTop - messageList.clientHeight <\n 450; /* 🌝 preview image max height plus allowance */\n const shouldScrollToBottom = !hasLoadedRef.current || isNearBottom;\n\n followImageLoadsRef.current = shouldScrollToBottom;\n hasLoadedRef.current = true;\n\n const timeout = window.setTimeout(() => {\n followImageLoadsRef.current = false;\n }, 5000);\n\n const scrollToBottom = () => {\n messageList.scrollTop = messageList.scrollHeight;\n };\n\n if (shouldScrollToBottom) scrollToBottom();\n\n const handleLoad = (event: Event) => {\n if (followImageLoadsRef.current && event.target instanceof HTMLImageElement) {\n scrollToBottom();\n }\n };\n\n const handleWheel = (event: WheelEvent) => {\n if (event.deltaY < 0) {\n followImageLoadsRef.current = false;\n }\n };\n\n let previousTouchY: number | undefined;\n\n const handleTouchStart = (event: TouchEvent) => {\n previousTouchY = event.touches[0]?.clientY;\n };\n\n const handleTouchMove = (event: TouchEvent) => {\n const touchY = event.touches[0]?.clientY;\n if (touchY !== undefined && previousTouchY !== undefined && touchY > previousTouchY) {\n followImageLoadsRef.current = false;\n }\n previousTouchY = touchY;\n };\n\n messageList.addEventListener('load', handleLoad, true);\n messageList.addEventListener('wheel', handleWheel, { passive: true });\n messageList.addEventListener('touchstart', handleTouchStart, { passive: true });\n messageList.addEventListener('touchmove', handleTouchMove, { passive: true });\n\n return () => {\n window.clearTimeout(timeout);\n messageList.removeEventListener('load', handleLoad, true);\n messageList.removeEventListener('wheel', handleWheel);\n messageList.removeEventListener('touchstart', handleTouchStart);\n messageList.removeEventListener('touchmove', handleTouchMove);\n };\n }, [newestMessageId]);\n\n return (\n <div\n className={cx(styles.messages, fill && styles.fill)}\n data-component='messages'\n ref={messagesRef}\n >\n <List data-message-list>\n {messages.map((message) => (\n <Message\n key={message.id}\n {...message}\n />\n ))}\n </List>\n {tooltipLabel && <Tooltip variant='static'>{tooltipLabel}</Tooltip>}\n <Editor\n autofocus\n content={message}\n disabled={sending || (messageIsEmpty && queuedFiles.length === 0 && !inlineImages?.length)}\n files={queuedFiles}\n inlineImages={inlineImages}\n isSubmitting={sending}\n maxRows={maxEditorRows}\n minRows={minEditorRows}\n onChange={onChange}\n onFilesChange={(nextFiles) => {\n if (files === undefined) setInternalFiles(nextFiles);\n onFilesChange?.(nextFiles);\n }}\n onInlineImagesChange={onInlineImagesChange}\n onSubmit={onSubmit}\n onUpload={handleUpload}\n placeholder={placeholder}\n submitLabel={submitLabel}\n />\n </div>\n );\n};\n"],"names":["Messages","fill","files","handleUpload","inlineImages","maxEditorRows","message","messages","minEditorRows","onChange","onFilesChange","onInlineImagesChange","onSubmit","placeholder","sending","submitLabel","tooltipLabel","messagesRef","useRef","followImageLoadsRef","hasLoadedRef","internalFiles","setInternalFiles","useState","queuedFiles","newestMessageId","length","id","messageIsEmpty","replace","trim","useLayoutEffect","messageList","current","querySelector","undefined","isNearBottom","scrollHeight","scrollTop","clientHeight","shouldScrollToBottom","timeout","window","setTimeout","scrollToBottom","handleLoad","event","target","HTMLImageElement","handleWheel","deltaY","previousTouchY","handleTouchStart","touches","clientY","handleTouchMove","touchY","addEventListener","passive","clearTimeout","removeEventListener","jsxs","cx","styles","jsx","List","map","Message","Tooltip","Editor","nextFiles"],"mappings":"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"}
|
|
@@ -1,76 +1,77 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { t as
|
|
3
|
-
import { useRef as i, useState as
|
|
4
|
-
import { Editor as
|
|
5
|
-
import { List as
|
|
6
|
-
import { Tooltip as
|
|
7
|
-
import { Message as
|
|
8
|
-
import '../../assets/index13.css';const
|
|
9
|
-
messages:
|
|
10
|
-
fill:
|
|
11
|
-
},
|
|
12
|
-
fill:
|
|
1
|
+
import { jsxs as I, jsx as c } from "react/jsx-runtime";
|
|
2
|
+
import { t as J } from "../../classix-DG18itHa.js";
|
|
3
|
+
import { useRef as i, useState as K, useLayoutEffect as O } from "react";
|
|
4
|
+
import { Editor as P } from "../editor/index.js";
|
|
5
|
+
import { List as Q } from "../list/index.js";
|
|
6
|
+
import { Tooltip as V } from "../tooltip/index.js";
|
|
7
|
+
import { Message as X } from "../message/index.js";
|
|
8
|
+
import '../../assets/index13.css';const Z = "_messages_pqp89_1", $ = "_fill_pqp89_20", q = {
|
|
9
|
+
messages: Z,
|
|
10
|
+
fill: $
|
|
11
|
+
}, ne = ({
|
|
12
|
+
fill: y = !1,
|
|
13
13
|
files: u,
|
|
14
|
-
handleUpload:
|
|
14
|
+
handleUpload: H,
|
|
15
15
|
inlineImages: r,
|
|
16
|
-
maxEditorRows:
|
|
16
|
+
maxEditorRows: x = 5,
|
|
17
17
|
message: d = "",
|
|
18
18
|
messages: l,
|
|
19
|
-
minEditorRows:
|
|
20
|
-
onChange:
|
|
19
|
+
minEditorRows: B = 1,
|
|
20
|
+
onChange: b,
|
|
21
21
|
onFilesChange: a,
|
|
22
|
-
onInlineImagesChange:
|
|
23
|
-
onSubmit:
|
|
24
|
-
placeholder:
|
|
25
|
-
sending:
|
|
26
|
-
|
|
22
|
+
onInlineImagesChange: j,
|
|
23
|
+
onSubmit: N,
|
|
24
|
+
placeholder: U,
|
|
25
|
+
sending: m,
|
|
26
|
+
submitLabel: W = "Send message",
|
|
27
|
+
tooltipLabel: f
|
|
27
28
|
}) => {
|
|
28
|
-
var
|
|
29
|
-
const
|
|
30
|
-
return
|
|
29
|
+
var g;
|
|
30
|
+
const h = i(null), o = i(!0), p = i(!1), [k, z] = K([]), v = u ?? k, L = (g = l[l.length - 1]) == null ? void 0 : g.id, A = d.replace(/<[^>]*>/g, "").replace(/ /g, " ").trim() === "";
|
|
31
|
+
return O(() => {
|
|
31
32
|
var M;
|
|
32
|
-
const e = (M =
|
|
33
|
-
if (!e ||
|
|
34
|
-
const
|
|
35
|
-
o.current =
|
|
36
|
-
const
|
|
33
|
+
const e = (M = h.current) == null ? void 0 : M.querySelector("[data-message-list]");
|
|
34
|
+
if (!e || L === void 0) return;
|
|
35
|
+
const D = e.scrollHeight - e.scrollTop - e.clientHeight < 450, E = !p.current || D;
|
|
36
|
+
o.current = E, p.current = !0;
|
|
37
|
+
const G = window.setTimeout(() => {
|
|
37
38
|
o.current = !1;
|
|
38
|
-
}, 5e3),
|
|
39
|
+
}, 5e3), T = () => {
|
|
39
40
|
e.scrollTop = e.scrollHeight;
|
|
40
41
|
};
|
|
41
|
-
|
|
42
|
-
const
|
|
43
|
-
o.current && t.target instanceof HTMLImageElement &&
|
|
44
|
-
},
|
|
42
|
+
E && T();
|
|
43
|
+
const w = (t) => {
|
|
44
|
+
o.current && t.target instanceof HTMLImageElement && T();
|
|
45
|
+
}, R = (t) => {
|
|
45
46
|
t.deltaY < 0 && (o.current = !1);
|
|
46
47
|
};
|
|
47
48
|
let n;
|
|
48
|
-
const
|
|
49
|
+
const S = (t) => {
|
|
49
50
|
var s;
|
|
50
51
|
n = (s = t.touches[0]) == null ? void 0 : s.clientY;
|
|
51
52
|
}, _ = (t) => {
|
|
52
|
-
var
|
|
53
|
-
const s = (
|
|
53
|
+
var Y;
|
|
54
|
+
const s = (Y = t.touches[0]) == null ? void 0 : Y.clientY;
|
|
54
55
|
s !== void 0 && n !== void 0 && s > n && (o.current = !1), n = s;
|
|
55
56
|
};
|
|
56
|
-
return e.addEventListener("load",
|
|
57
|
+
return e.addEventListener("load", w, !0), e.addEventListener("wheel", R, {
|
|
57
58
|
passive: !0
|
|
58
|
-
}), e.addEventListener("touchstart",
|
|
59
|
+
}), e.addEventListener("touchstart", S, {
|
|
59
60
|
passive: !0
|
|
60
61
|
}), e.addEventListener("touchmove", _, {
|
|
61
62
|
passive: !0
|
|
62
63
|
}), () => {
|
|
63
|
-
window.clearTimeout(
|
|
64
|
+
window.clearTimeout(G), e.removeEventListener("load", w, !0), e.removeEventListener("wheel", R), e.removeEventListener("touchstart", S), e.removeEventListener("touchmove", _);
|
|
64
65
|
};
|
|
65
|
-
}, [
|
|
66
|
-
/* @__PURE__ */ c(
|
|
67
|
-
|
|
68
|
-
/* @__PURE__ */ c(
|
|
69
|
-
u === void 0 &&
|
|
70
|
-
}, onInlineImagesChange:
|
|
66
|
+
}, [L]), /* @__PURE__ */ I("div", { className: J(q.messages, y && q.fill), "data-component": "messages", ref: h, children: [
|
|
67
|
+
/* @__PURE__ */ c(Q, { "data-message-list": !0, children: l.map((e) => /* @__PURE__ */ c(X, { ...e }, e.id)) }),
|
|
68
|
+
f && /* @__PURE__ */ c(V, { variant: "static", children: f }),
|
|
69
|
+
/* @__PURE__ */ c(P, { autofocus: !0, content: d, disabled: m || A && v.length === 0 && !(r != null && r.length), files: v, inlineImages: r, isSubmitting: m, maxRows: x, minRows: B, onChange: b, onFilesChange: (e) => {
|
|
70
|
+
u === void 0 && z(e), a == null || a(e);
|
|
71
|
+
}, onInlineImagesChange: j, onSubmit: N, onUpload: H, placeholder: U, submitLabel: W })
|
|
71
72
|
] });
|
|
72
73
|
};
|
|
73
74
|
export {
|
|
74
|
-
|
|
75
|
+
ne as Messages
|
|
75
76
|
};
|
|
76
77
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/messages/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useLayoutEffect, useRef, useState } from 'react';\n\nimport { Editor, type PendingInlineImage } from '@/components/editor';\nimport { List } from '@/components/list';\nimport { Tooltip } from '@/components/tooltip';\n\nimport { Message, type MessageOptions } from '../message';\nimport styles from './styles.module.css';\n\nexport type MessageItem = MessageOptions;\n\nexport type MessagesProps = {\n fill?: boolean;\n files?: readonly File[];\n handleUpload: (files: FileList) => Promise<void> | void;\n inlineImages?: readonly PendingInlineImage[];\n maxEditorRows?: number;\n message: string;\n messages: MessageItem[];\n minEditorRows?: number;\n onChange: (content: string) => void;\n onFilesChange?: (files: File[]) => void;\n onInlineImagesChange?: (images: PendingInlineImage[]) => void;\n onSubmit: () => Promise<void> | void;\n placeholder?: string;\n sending: boolean;\n tooltipLabel?: string;\n};\n\nexport const Messages = ({\n fill = false,\n files,\n handleUpload,\n inlineImages,\n maxEditorRows = 5,\n message = '',\n messages,\n minEditorRows = 1,\n onChange,\n onFilesChange,\n onInlineImagesChange,\n onSubmit,\n placeholder,\n sending,\n tooltipLabel,\n}: MessagesProps) => {\n const messagesRef = useRef<HTMLDivElement>(null);\n const followImageLoadsRef = useRef(true);\n const hasLoadedRef = useRef(false);\n const [internalFiles, setInternalFiles] = useState<File[]>([]);\n const queuedFiles = files ?? internalFiles;\n const newestMessageId = messages[messages.length - 1]?.id;\n const messageIsEmpty =\n message\n .replace(/<[^>]*>/g, '')\n .replace(/ /g, ' ')\n .trim() === '';\n\n useLayoutEffect(() => {\n const messageList = messagesRef.current?.querySelector<HTMLElement>('[data-message-list]');\n if (!messageList || newestMessageId === undefined) return;\n\n const isNearBottom =\n messageList.scrollHeight - messageList.scrollTop - messageList.clientHeight <\n 450; /* 🌝 preview image max height plus allowance */\n const shouldScrollToBottom = !hasLoadedRef.current || isNearBottom;\n\n followImageLoadsRef.current = shouldScrollToBottom;\n hasLoadedRef.current = true;\n\n const timeout = window.setTimeout(() => {\n followImageLoadsRef.current = false;\n }, 5000);\n\n const scrollToBottom = () => {\n messageList.scrollTop = messageList.scrollHeight;\n };\n\n if (shouldScrollToBottom) scrollToBottom();\n\n const handleLoad = (event: Event) => {\n if (followImageLoadsRef.current && event.target instanceof HTMLImageElement) {\n scrollToBottom();\n }\n };\n\n const handleWheel = (event: WheelEvent) => {\n if (event.deltaY < 0) {\n followImageLoadsRef.current = false;\n }\n };\n\n let previousTouchY: number | undefined;\n\n const handleTouchStart = (event: TouchEvent) => {\n previousTouchY = event.touches[0]?.clientY;\n };\n\n const handleTouchMove = (event: TouchEvent) => {\n const touchY = event.touches[0]?.clientY;\n if (touchY !== undefined && previousTouchY !== undefined && touchY > previousTouchY) {\n followImageLoadsRef.current = false;\n }\n previousTouchY = touchY;\n };\n\n messageList.addEventListener('load', handleLoad, true);\n messageList.addEventListener('wheel', handleWheel, { passive: true });\n messageList.addEventListener('touchstart', handleTouchStart, { passive: true });\n messageList.addEventListener('touchmove', handleTouchMove, { passive: true });\n\n return () => {\n window.clearTimeout(timeout);\n messageList.removeEventListener('load', handleLoad, true);\n messageList.removeEventListener('wheel', handleWheel);\n messageList.removeEventListener('touchstart', handleTouchStart);\n messageList.removeEventListener('touchmove', handleTouchMove);\n };\n }, [newestMessageId]);\n\n return (\n <div\n className={cx(styles.messages, fill && styles.fill)}\n data-component='messages'\n ref={messagesRef}\n >\n <List data-message-list>\n {messages.map((message) => (\n <Message\n key={message.id}\n {...message}\n />\n ))}\n </List>\n {tooltipLabel && <Tooltip variant='static'>{tooltipLabel}</Tooltip>}\n <Editor\n autofocus\n content={message}\n disabled={sending || (messageIsEmpty && queuedFiles.length === 0 && !inlineImages?.length)}\n files={queuedFiles}\n inlineImages={inlineImages}\n maxRows={maxEditorRows}\n minRows={minEditorRows}\n onChange={onChange}\n onFilesChange={(nextFiles) => {\n if (files === undefined) setInternalFiles(nextFiles);\n onFilesChange?.(nextFiles);\n }}\n onInlineImagesChange={onInlineImagesChange}\n onSubmit={onSubmit}\n onUpload={handleUpload}\n placeholder={placeholder}\n submitLabel=
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/messages/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useLayoutEffect, useRef, useState } from 'react';\n\nimport { Editor, type PendingInlineImage } from '@/components/editor';\nimport { List } from '@/components/list';\nimport { Tooltip } from '@/components/tooltip';\n\nimport { Message, type MessageOptions } from '../message';\nimport styles from './styles.module.css';\n\nexport type MessageItem = MessageOptions;\n\nexport type MessagesProps = {\n fill?: boolean;\n files?: readonly File[];\n handleUpload: (files: FileList) => Promise<void> | void;\n inlineImages?: readonly PendingInlineImage[];\n maxEditorRows?: number;\n message: string;\n messages: MessageItem[];\n minEditorRows?: number;\n onChange: (content: string) => void;\n onFilesChange?: (files: File[]) => void;\n onInlineImagesChange?: (images: PendingInlineImage[]) => void;\n onSubmit: () => Promise<void> | void;\n placeholder?: string;\n sending: boolean;\n submitLabel?: string;\n tooltipLabel?: string;\n};\n\nexport const Messages = ({\n fill = false,\n files,\n handleUpload,\n inlineImages,\n maxEditorRows = 5,\n message = '',\n messages,\n minEditorRows = 1,\n onChange,\n onFilesChange,\n onInlineImagesChange,\n onSubmit,\n placeholder,\n sending,\n submitLabel = 'Send message',\n tooltipLabel,\n}: MessagesProps) => {\n const messagesRef = useRef<HTMLDivElement>(null);\n const followImageLoadsRef = useRef(true);\n const hasLoadedRef = useRef(false);\n const [internalFiles, setInternalFiles] = useState<File[]>([]);\n const queuedFiles = files ?? internalFiles;\n const newestMessageId = messages[messages.length - 1]?.id;\n const messageIsEmpty =\n message\n .replace(/<[^>]*>/g, '')\n .replace(/ /g, ' ')\n .trim() === '';\n\n useLayoutEffect(() => {\n const messageList = messagesRef.current?.querySelector<HTMLElement>('[data-message-list]');\n if (!messageList || newestMessageId === undefined) return;\n\n const isNearBottom =\n messageList.scrollHeight - messageList.scrollTop - messageList.clientHeight <\n 450; /* 🌝 preview image max height plus allowance */\n const shouldScrollToBottom = !hasLoadedRef.current || isNearBottom;\n\n followImageLoadsRef.current = shouldScrollToBottom;\n hasLoadedRef.current = true;\n\n const timeout = window.setTimeout(() => {\n followImageLoadsRef.current = false;\n }, 5000);\n\n const scrollToBottom = () => {\n messageList.scrollTop = messageList.scrollHeight;\n };\n\n if (shouldScrollToBottom) scrollToBottom();\n\n const handleLoad = (event: Event) => {\n if (followImageLoadsRef.current && event.target instanceof HTMLImageElement) {\n scrollToBottom();\n }\n };\n\n const handleWheel = (event: WheelEvent) => {\n if (event.deltaY < 0) {\n followImageLoadsRef.current = false;\n }\n };\n\n let previousTouchY: number | undefined;\n\n const handleTouchStart = (event: TouchEvent) => {\n previousTouchY = event.touches[0]?.clientY;\n };\n\n const handleTouchMove = (event: TouchEvent) => {\n const touchY = event.touches[0]?.clientY;\n if (touchY !== undefined && previousTouchY !== undefined && touchY > previousTouchY) {\n followImageLoadsRef.current = false;\n }\n previousTouchY = touchY;\n };\n\n messageList.addEventListener('load', handleLoad, true);\n messageList.addEventListener('wheel', handleWheel, { passive: true });\n messageList.addEventListener('touchstart', handleTouchStart, { passive: true });\n messageList.addEventListener('touchmove', handleTouchMove, { passive: true });\n\n return () => {\n window.clearTimeout(timeout);\n messageList.removeEventListener('load', handleLoad, true);\n messageList.removeEventListener('wheel', handleWheel);\n messageList.removeEventListener('touchstart', handleTouchStart);\n messageList.removeEventListener('touchmove', handleTouchMove);\n };\n }, [newestMessageId]);\n\n return (\n <div\n className={cx(styles.messages, fill && styles.fill)}\n data-component='messages'\n ref={messagesRef}\n >\n <List data-message-list>\n {messages.map((message) => (\n <Message\n key={message.id}\n {...message}\n />\n ))}\n </List>\n {tooltipLabel && <Tooltip variant='static'>{tooltipLabel}</Tooltip>}\n <Editor\n autofocus\n content={message}\n disabled={sending || (messageIsEmpty && queuedFiles.length === 0 && !inlineImages?.length)}\n files={queuedFiles}\n inlineImages={inlineImages}\n isSubmitting={sending}\n maxRows={maxEditorRows}\n minRows={minEditorRows}\n onChange={onChange}\n onFilesChange={(nextFiles) => {\n if (files === undefined) setInternalFiles(nextFiles);\n onFilesChange?.(nextFiles);\n }}\n onInlineImagesChange={onInlineImagesChange}\n onSubmit={onSubmit}\n onUpload={handleUpload}\n placeholder={placeholder}\n submitLabel={submitLabel}\n />\n </div>\n );\n};\n"],"names":["Messages","fill","files","handleUpload","inlineImages","maxEditorRows","message","messages","minEditorRows","onChange","onFilesChange","onInlineImagesChange","onSubmit","placeholder","sending","submitLabel","tooltipLabel","messagesRef","useRef","followImageLoadsRef","hasLoadedRef","internalFiles","setInternalFiles","useState","queuedFiles","newestMessageId","length","id","messageIsEmpty","replace","trim","useLayoutEffect","messageList","current","querySelector","undefined","isNearBottom","scrollHeight","scrollTop","clientHeight","shouldScrollToBottom","timeout","window","setTimeout","scrollToBottom","handleLoad","event","target","HTMLImageElement","handleWheel","deltaY","previousTouchY","handleTouchStart","touches","clientY","handleTouchMove","touchY","addEventListener","passive","clearTimeout","removeEventListener","jsxs","cx","styles","jsx","List","map","Message","Tooltip","Editor","nextFiles"],"mappings":"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"}
|