@solibo/solibo-ui 1.0.5 → 1.0.7

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 (110) hide show
  1. package/dist/assets/index.css +1 -1
  2. package/dist/assets/index10.css +1 -1
  3. package/dist/assets/index11.css +1 -1
  4. package/dist/assets/index12.css +1 -1
  5. package/dist/assets/index13.css +1 -1
  6. package/dist/assets/index14.css +1 -1
  7. package/dist/assets/index15.css +1 -1
  8. package/dist/assets/index19.css +1 -1
  9. package/dist/assets/index20.css +1 -1
  10. package/dist/assets/index26.css +1 -1
  11. package/dist/assets/index3.css +1 -1
  12. package/dist/assets/index31.css +1 -1
  13. package/dist/assets/index32.css +1 -1
  14. package/dist/assets/index36.css +1 -1
  15. package/dist/assets/index38.css +1 -1
  16. package/dist/assets/index39.css +1 -1
  17. package/dist/assets/index4.css +1 -1
  18. package/dist/assets/index42.css +1 -1
  19. package/dist/assets/index5.css +1 -1
  20. package/dist/assets/index6.css +1 -1
  21. package/dist/assets/index7.css +1 -1
  22. package/dist/assets/index8.css +1 -1
  23. package/dist/assets/index9.css +1 -1
  24. package/dist/components/aside/index.cjs +1 -1
  25. package/dist/components/aside/index.js +15 -15
  26. package/dist/components/button/index.cjs +1 -1
  27. package/dist/components/button/index.cjs.map +1 -1
  28. package/dist/components/button/index.js +25 -22
  29. package/dist/components/button/index.js.map +1 -1
  30. package/dist/components/card/index.cjs +1 -1
  31. package/dist/components/card/index.js +38 -38
  32. package/dist/components/checkbox/index.cjs +1 -1
  33. package/dist/components/checkbox/index.js +1 -1
  34. package/dist/components/controls/index.cjs +1 -1
  35. package/dist/components/controls/index.cjs.map +1 -1
  36. package/dist/components/controls/index.js +15 -14
  37. package/dist/components/controls/index.js.map +1 -1
  38. package/dist/components/dialog/index.cjs +1 -1
  39. package/dist/components/dialog/index.cjs.map +1 -1
  40. package/dist/components/dialog/index.js +56 -24
  41. package/dist/components/dialog/index.js.map +1 -1
  42. package/dist/components/dropdown/index.cjs +1 -1
  43. package/dist/components/dropdown/index.js +101 -101
  44. package/dist/components/editor/index.cjs +1 -1
  45. package/dist/components/editor/index.js +1 -1
  46. package/dist/components/header/index.cjs +1 -1
  47. package/dist/components/header/index.js +10 -10
  48. package/dist/components/icon/index.cjs +1 -1
  49. package/dist/components/icon/index.js +1 -1
  50. package/dist/components/iframe/index.cjs +1 -1
  51. package/dist/components/iframe/index.cjs.map +1 -1
  52. package/dist/components/iframe/index.js +56 -58
  53. package/dist/components/iframe/index.js.map +1 -1
  54. package/dist/components/input/index.cjs +1 -1
  55. package/dist/components/input/index.js +2 -2
  56. package/dist/components/message/index.cjs +1 -1
  57. package/dist/components/message/index.cjs.map +1 -1
  58. package/dist/components/message/index.js +31 -30
  59. package/dist/components/message/index.js.map +1 -1
  60. package/dist/components/messages/index.cjs +1 -1
  61. package/dist/components/messages/index.cjs.map +1 -1
  62. package/dist/components/messages/index.js +34 -31
  63. package/dist/components/messages/index.js.map +1 -1
  64. package/dist/components/nav/index.cjs +1 -1
  65. package/dist/components/nav/index.js +22 -22
  66. package/dist/components/object/index.cjs +1 -1
  67. package/dist/components/object/index.js +1 -1
  68. package/dist/components/portal/index.cjs +1 -1
  69. package/dist/components/portal/index.js +17 -17
  70. package/dist/components/search/index.cjs +1 -1
  71. package/dist/components/search/index.cjs.map +1 -1
  72. package/dist/components/search/index.js +44 -50
  73. package/dist/components/search/index.js.map +1 -1
  74. package/dist/components/select/index.cjs +1 -1
  75. package/dist/components/select/index.js +2 -2
  76. package/dist/components/sortable/index.cjs +1 -1
  77. package/dist/components/sortable/index.js +1 -1
  78. package/dist/components/table/index.cjs +1 -1
  79. package/dist/components/table/index.js +1 -1
  80. package/dist/components/textarea/index.cjs +1 -1
  81. package/dist/components/textarea/index.js +1 -1
  82. package/dist/components/toast/index.cjs +1 -1
  83. package/dist/components/toast/index.js +1 -1
  84. package/dist/components/toasts/index.cjs +1 -1
  85. package/dist/components/toasts/index.js +1 -1
  86. package/dist/components/toggle/index.cjs +1 -1
  87. package/dist/components/toggle/index.js +1 -1
  88. package/dist/components/tooltip/index.cjs +1 -1
  89. package/dist/components/tooltip/index.js +6 -6
  90. package/dist/{icons-CH48JQqt.js → icons-BFgf_lJN.js} +13 -1
  91. package/dist/icons-BFgf_lJN.js.map +1 -0
  92. package/dist/icons-Dx0NQYLH.cjs +2 -0
  93. package/dist/icons-Dx0NQYLH.cjs.map +1 -0
  94. package/dist/{index-BrGCs_7h.js → index-BHgGZxsR.js} +2 -2
  95. package/dist/{index-BrGCs_7h.js.map → index-BHgGZxsR.js.map} +1 -1
  96. package/dist/{index-CIugi8vq.cjs → index-CEzqxRIu.cjs} +2 -2
  97. package/dist/{index-CIugi8vq.cjs.map → index-CEzqxRIu.cjs.map} +1 -1
  98. package/dist/{index-CRAuAHow.js → index-CMfR_USP.js} +2 -2
  99. package/dist/{index-CRAuAHow.js.map → index-CMfR_USP.js.map} +1 -1
  100. package/dist/{index-CSYOtiWJ.cjs → index-oL8GYbhj.cjs} +2 -2
  101. package/dist/{index-CSYOtiWJ.cjs.map → index-oL8GYbhj.cjs.map} +1 -1
  102. package/dist/index.cjs +1 -1
  103. package/dist/index.d.ts +20 -3
  104. package/dist/index.js +2 -2
  105. package/dist/tokens.css +7 -2
  106. package/dist/tokens.json +105 -33
  107. package/package.json +1 -1
  108. package/dist/icons-BROXUtPz.cjs +0 -2
  109. package/dist/icons-BROXUtPz.cjs.map +0 -1
  110. package/dist/icons-CH48JQqt.js.map +0 -1
@@ -1,89 +1,87 @@
1
- import { jsxs as I, jsx as s } from "react/jsx-runtime";
2
- import { t as N } from "../../classix-DG18itHa.js";
3
- import { useRef as v, useState as O, useCallback as H, useEffect as C } from "react";
4
- import { Button as S } from "../button/index.js";
1
+ import { jsxs as N, jsx as s } from "react/jsx-runtime";
2
+ import { t as O } from "../../classix-DG18itHa.js";
3
+ import { useRef as v, useState as C, useCallback as H, useEffect as S } from "react";
4
+ import { Button as U } from "../button/index.js";
5
5
  import { Dialog as L } from "../dialog/index.js";
6
- import '../../assets/index19.css';const K = "_wrapper_2h6kn_1", X = "_toolbar_2h6kn_6", D = "_iframe_2h6kn_16", o = {
7
- wrapper: K,
8
- toolbar: X,
9
- "fullscreen-toolbar": "_fullscreen-toolbar_2h6kn_7",
10
- iframe: D,
11
- "fullscreen-dialog": "_fullscreen-dialog_2h6kn_22",
12
- "fullscreen-iframe": "_fullscreen-iframe_2h6kn_39"
13
- }, u = 120, J = 12e3, Q = 8, R = ({
14
- accessibleLabel: d,
6
+ import '../../assets/index19.css';const X = "_wrapper_owo4o_1", J = "_toolbar_owo4o_6", K = "_iframe_owo4o_16", l = {
7
+ wrapper: X,
8
+ toolbar: J,
9
+ "fullscreen-toolbar": "_fullscreen-toolbar_owo4o_7",
10
+ iframe: K,
11
+ "fullscreen-dialog": "_fullscreen-dialog_owo4o_22",
12
+ "fullscreen-iframe": "_fullscreen-iframe_owo4o_40"
13
+ }, u = 120, Q = 12e3, W = 8, R = ({
14
+ accessibleLabel: m,
15
15
  autoResize: n = !1,
16
- className: y,
17
- closeFullscreenLabel: U = "Close fullscreen",
16
+ className: E,
17
+ closeFullscreenLabel: k = "Close fullscreen",
18
18
  fullscreenLabel: B = "View in fullscreen",
19
19
  hasFullscreenView: G = !0,
20
20
  loading: V = "lazy",
21
- onLoad: h,
22
- referrerPolicy: E = "no-referrer",
23
- sandbox: k = "",
24
- srcDoc: p,
25
- style: M,
26
- ...T
21
+ onLoad: d,
22
+ referrerPolicy: y = "no-referrer",
23
+ sandbox: M = "",
24
+ srcDoc: h,
25
+ style: T,
26
+ ...F
27
27
  }) => {
28
- const w = v(null), i = v(null), l = v(null), [$, F] = O(u), [A, f] = O(!1), g = H(() => {
29
- i.current !== null && (window.cancelAnimationFrame(i.current), i.current = null), l.current !== null && (window.clearTimeout(l.current), l.current = null);
28
+ const w = v(null), i = v(null), o = v(null), [$, A] = C(u), [b, p] = C(!1), g = H(() => {
29
+ i.current !== null && (window.cancelAnimationFrame(i.current), i.current = null), o.current !== null && (window.clearTimeout(o.current), o.current = null);
30
30
  }, []), _ = H(() => {
31
31
  if (!n) return;
32
- const e = w.current, r = e == null ? void 0 : e.contentDocument;
33
- if (!e || !r) return;
34
- const m = e.style.height;
32
+ const r = w.current, e = r == null ? void 0 : r.contentDocument;
33
+ if (!r || !e) return;
34
+ const f = r.style.height;
35
35
  try {
36
- e.style.height = `${u}px`;
37
- const c = r.querySelector("[data-iframe-content]") ?? r.body, a = c.getBoundingClientRect(), {
38
- body: b,
39
- documentElement: x
40
- } = r, q = Math.min(Math.max(Math.ceil(Math.max(c.scrollHeight, c.offsetHeight, a.height, b.scrollHeight, b.offsetHeight, x.scrollHeight, x.offsetHeight) + Q), u), J);
41
- F(q);
36
+ r.style.height = `${u}px`;
37
+ const c = e.querySelector("[data-iframe-content]") ?? e.body, a = c.getBoundingClientRect(), {
38
+ body: x,
39
+ documentElement: I
40
+ } = e, q = Math.min(Math.max(Math.ceil(Math.max(c.scrollHeight, c.offsetHeight, a.height, x.scrollHeight, x.offsetHeight, I.scrollHeight, I.offsetHeight) + W), u), Q);
41
+ A(q);
42
42
  } catch {
43
43
  } finally {
44
- e.style.height = m;
44
+ r.style.height = f;
45
45
  }
46
46
  }, [n]), t = H(() => {
47
47
  !n || i.current !== null || (i.current = window.requestAnimationFrame(() => {
48
- i.current = null, _(), l.current !== null && window.clearTimeout(l.current), l.current = window.setTimeout(() => {
49
- l.current = null, _();
48
+ i.current = null, _(), o.current !== null && window.clearTimeout(o.current), o.current = window.setTimeout(() => {
49
+ o.current = null, _();
50
50
  }, 250);
51
51
  }));
52
- }, [n, _]), j = (e) => {
53
- var m, c;
52
+ }, [n, _]), j = (r) => {
53
+ var f, c;
54
54
  t();
55
- const r = (m = w.current) == null ? void 0 : m.contentDocument;
56
- Array.from((r == null ? void 0 : r.images) ?? []).forEach((a) => {
55
+ const e = (f = w.current) == null ? void 0 : f.contentDocument;
56
+ Array.from((e == null ? void 0 : e.images) ?? []).forEach((a) => {
57
57
  a.complete || (a.addEventListener("load", t, {
58
58
  once: !0
59
59
  }), a.addEventListener("error", t, {
60
60
  once: !0
61
61
  }));
62
- }), (c = r == null ? void 0 : r.fonts) == null || c.ready.then(t).catch(() => {
63
- }), h == null || h(e);
62
+ }), (c = e == null ? void 0 : e.fonts) == null || c.ready.then(t).catch(() => {
63
+ }), d == null || d(r);
64
64
  };
65
- return C(() => {
65
+ return S(() => {
66
66
  if (n)
67
- return g(), F(u), t(), g;
68
- }, [n, g, t, p]), C(() => {
69
- var e;
67
+ return g(), A(u), t(), g;
68
+ }, [n, g, t, h]), S(() => {
69
+ var r;
70
70
  if (n)
71
- return window.addEventListener("resize", t), (e = window.visualViewport) == null || e.addEventListener("resize", t), () => {
72
- var r;
73
- window.removeEventListener("resize", t), (r = window.visualViewport) == null || r.removeEventListener("resize", t);
71
+ return window.addEventListener("resize", t), (r = window.visualViewport) == null || r.addEventListener("resize", t), () => {
72
+ var e;
73
+ window.removeEventListener("resize", t), (e = window.visualViewport) == null || e.removeEventListener("resize", t);
74
74
  };
75
- }, [n, t]), /* @__PURE__ */ I("div", { className: o.wrapper, "data-component": "iframe", children: [
76
- G && /* @__PURE__ */ s("div", { className: o.toolbar, children: /* @__PURE__ */ s(S, { "aria-expanded": A, "aria-haspopup": "dialog", onClick: () => f(!0), variant: "tertiary", children: B }) }),
77
- /* @__PURE__ */ s("iframe", { ...T, className: N(o.iframe, y), loading: V, onLoad: j, ref: w, referrerPolicy: E, sandbox: k, srcDoc: p, style: n ? {
78
- ...M,
75
+ }, [n, t]), /* @__PURE__ */ N("div", { className: l.wrapper, "data-component": "iframe", children: [
76
+ G && /* @__PURE__ */ s("div", { className: l.toolbar, children: /* @__PURE__ */ s(U, { "aria-expanded": b, "aria-haspopup": "dialog", onClick: () => p(!0), variant: "tertiary", children: B }) }),
77
+ /* @__PURE__ */ s("iframe", { ...F, className: O(l.iframe, E), loading: V, onLoad: j, ref: w, referrerPolicy: y, sandbox: M, srcDoc: h, style: n ? {
78
+ ...T,
79
79
  height: $,
80
80
  minHeight: u
81
- } : M, title: d }),
82
- A && /* @__PURE__ */ I(L, { "aria-label": `${d} fullscreen`, className: o["fullscreen-dialog"], onKeyDown: (e) => {
83
- e.key === "Escape" && f(!1);
84
- }, open: !0, setOpen: f, children: [
85
- /* @__PURE__ */ s("div", { className: o["fullscreen-toolbar"], children: /* @__PURE__ */ s(S, { autoFocus: !0, onClick: () => f(!1), children: U }) }),
86
- /* @__PURE__ */ s("iframe", { ...T, className: N(o.iframe, o["fullscreen-iframe"], y), loading: "eager", referrerPolicy: E, sandbox: k, srcDoc: p, title: `${d} fullscreen` })
81
+ } : T, title: m }),
82
+ b && /* @__PURE__ */ N(L, { "aria-label": `${m} fullscreen`, className: l["fullscreen-dialog"], open: !0, setOpen: p, children: [
83
+ /* @__PURE__ */ s("div", { className: l["fullscreen-toolbar"], children: /* @__PURE__ */ s(U, { autoFocus: !0, onClick: () => p(!1), children: k }) }),
84
+ /* @__PURE__ */ s("iframe", { ...F, className: O(l.iframe, l["fullscreen-iframe"], E), loading: "eager", referrerPolicy: y, sandbox: M, srcDoc: h, title: `${m} fullscreen` })
87
85
  ] })
88
86
  ] });
89
87
  };
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../src/components/iframe/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { type ComponentPropsWithoutRef, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { Button } from '../button';\nimport { Dialog } from '../dialog';\nimport styles from './styles.module.css';\n\nconst MIN_AUTO_HEIGHT = 120;\nconst MAX_AUTO_HEIGHT = 12000;\nconst AUTO_HEIGHT_BUFFER = 8;\n\nexport type IframeProps = Omit<ComponentPropsWithoutRef<'iframe'>, 'src' | 'srcDoc' | 'title'> & {\n accessibleLabel: string;\n autoResize?: boolean;\n closeFullscreenLabel?: string;\n fullscreenLabel?: string;\n hasFullscreenView?: boolean;\n srcDoc: string;\n};\n\nexport const Iframe = ({\n accessibleLabel,\n autoResize = false,\n className,\n closeFullscreenLabel = 'Close fullscreen',\n fullscreenLabel = 'View in fullscreen',\n hasFullscreenView = true,\n loading = 'lazy',\n onLoad,\n referrerPolicy = 'no-referrer',\n sandbox = '',\n srcDoc,\n style,\n ...props\n}: IframeProps) => {\n const iframeRef = useRef<HTMLIFrameElement>(null);\n const measurementFrameRef = useRef<number | null>(null);\n const followUpMeasurementTimeoutRef = useRef<number | null>(null);\n const [measuredHeight, setMeasuredHeight] = useState(MIN_AUTO_HEIGHT);\n const [isFullscreenOpen, setIsFullscreenOpen] = useState(false);\n\n const clearScheduledMeasurements = useCallback(() => {\n if (measurementFrameRef.current !== null) {\n window.cancelAnimationFrame(measurementFrameRef.current);\n measurementFrameRef.current = null;\n }\n\n if (followUpMeasurementTimeoutRef.current !== null) {\n window.clearTimeout(followUpMeasurementTimeoutRef.current);\n followUpMeasurementTimeoutRef.current = null;\n }\n }, []);\n\n const measureSize = useCallback(() => {\n if (!autoResize) return;\n\n const iframe = iframeRef.current;\n const iframeDocument = iframe?.contentDocument;\n if (!iframe || !iframeDocument) return;\n\n const renderedHeight = iframe.style.height;\n\n try {\n // measure from a stable viewport height so content sized with percentages or\n // viewport units cannot feed the iframe's previous height back into itself\n iframe.style.height = `${MIN_AUTO_HEIGHT}px`;\n\n const content =\n iframeDocument.querySelector<HTMLElement>('[data-iframe-content]') ?? iframeDocument.body;\n const contentRect = content.getBoundingClientRect();\n const { body, documentElement } = iframeDocument;\n const height = Math.min(\n Math.max(\n Math.ceil(\n Math.max(\n content.scrollHeight,\n content.offsetHeight,\n contentRect.height,\n body.scrollHeight,\n body.offsetHeight,\n documentElement.scrollHeight,\n documentElement.offsetHeight\n ) + AUTO_HEIGHT_BUFFER\n ),\n MIN_AUTO_HEIGHT\n ),\n MAX_AUTO_HEIGHT\n );\n\n setMeasuredHeight(height);\n } catch {\n // cross-origin iframe content cannot be measured; retain minimum height\n } finally {\n iframe.style.height = renderedHeight;\n }\n }, [autoResize]);\n\n const scheduleSizeMeasurement = useCallback(() => {\n if (!autoResize || measurementFrameRef.current !== null) return;\n\n measurementFrameRef.current = window.requestAnimationFrame(() => {\n measurementFrameRef.current = null;\n measureSize();\n\n if (followUpMeasurementTimeoutRef.current !== null) {\n window.clearTimeout(followUpMeasurementTimeoutRef.current);\n }\n\n followUpMeasurementTimeoutRef.current = window.setTimeout(() => {\n followUpMeasurementTimeoutRef.current = null;\n measureSize();\n }, 250);\n });\n }, [autoResize, measureSize]);\n\n const handleLoad: NonNullable<IframeProps['onLoad']> = (event) => {\n scheduleSizeMeasurement();\n\n const iframeDocument = iframeRef.current?.contentDocument;\n Array.from(iframeDocument?.images ?? []).forEach((image) => {\n if (image.complete) return;\n image.addEventListener('load', scheduleSizeMeasurement, { once: true });\n image.addEventListener('error', scheduleSizeMeasurement, { once: true });\n });\n iframeDocument?.fonts?.ready.then(scheduleSizeMeasurement).catch(() => undefined);\n\n onLoad?.(event);\n };\n\n useEffect(() => {\n if (!autoResize) return undefined;\n\n clearScheduledMeasurements();\n setMeasuredHeight(MIN_AUTO_HEIGHT);\n scheduleSizeMeasurement();\n\n return clearScheduledMeasurements;\n }, [autoResize, clearScheduledMeasurements, scheduleSizeMeasurement, srcDoc]);\n\n useEffect(() => {\n if (!autoResize) return undefined;\n\n window.addEventListener('resize', scheduleSizeMeasurement);\n window.visualViewport?.addEventListener('resize', scheduleSizeMeasurement);\n\n return () => {\n window.removeEventListener('resize', scheduleSizeMeasurement);\n window.visualViewport?.removeEventListener('resize', scheduleSizeMeasurement);\n };\n }, [autoResize, scheduleSizeMeasurement]);\n\n return (\n <div className={styles.wrapper}>\n {hasFullscreenView && (\n <div className={styles.toolbar}>\n <Button\n aria-expanded={isFullscreenOpen}\n aria-haspopup='dialog'\n onClick={() => setIsFullscreenOpen(true)}\n variant='tertiary'\n >\n {fullscreenLabel}\n </Button>\n </div>\n )}\n <iframe\n {...props}\n className={cx(styles.iframe, className)}\n loading={loading}\n onLoad={handleLoad}\n ref={iframeRef}\n referrerPolicy={referrerPolicy}\n sandbox={sandbox}\n srcDoc={srcDoc}\n style={\n autoResize\n ? {\n ...style,\n height: measuredHeight,\n minHeight: MIN_AUTO_HEIGHT,\n }\n : style\n }\n title={accessibleLabel}\n />\n {isFullscreenOpen && (\n <Dialog\n aria-label={`${accessibleLabel} fullscreen`}\n className={styles['fullscreen-dialog']}\n onKeyDown={(event) => {\n if (event.key === 'Escape') setIsFullscreenOpen(false);\n }}\n open\n setOpen={setIsFullscreenOpen}\n >\n <div className={styles['fullscreen-toolbar']}>\n <Button\n autoFocus\n onClick={() => setIsFullscreenOpen(false)}\n >\n {closeFullscreenLabel}\n </Button>\n </div>\n <iframe\n {...props}\n className={cx(styles.iframe, styles['fullscreen-iframe'], className)}\n loading='eager'\n referrerPolicy={referrerPolicy}\n sandbox={sandbox}\n srcDoc={srcDoc}\n title={`${accessibleLabel} fullscreen`}\n />\n </Dialog>\n )}\n </div>\n );\n};\n"],"names":["MIN_AUTO_HEIGHT","MAX_AUTO_HEIGHT","AUTO_HEIGHT_BUFFER","Iframe","accessibleLabel","autoResize","className","closeFullscreenLabel","fullscreenLabel","hasFullscreenView","loading","onLoad","referrerPolicy","sandbox","srcDoc","style","props","iframeRef","useRef","measurementFrameRef","followUpMeasurementTimeoutRef","measuredHeight","setMeasuredHeight","useState","isFullscreenOpen","setIsFullscreenOpen","clearScheduledMeasurements","useCallback","current","window","cancelAnimationFrame","clearTimeout","measureSize","iframe","iframeDocument","contentDocument","renderedHeight","height","content","querySelector","body","contentRect","getBoundingClientRect","documentElement","Math","min","max","ceil","scrollHeight","offsetHeight","scheduleSizeMeasurement","requestAnimationFrame","setTimeout","handleLoad","event","Array","from","images","forEach","image","complete","addEventListener","once","fonts","ready","then","catch","useEffect","visualViewport","removeEventListener","styles","wrapper","toolbar","jsx","Button","cx","minHeight","jsxs","Dialog","key"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../../../src/components/iframe/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { type ComponentPropsWithoutRef, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { Button } from '../button';\nimport { Dialog } from '../dialog';\nimport styles from './styles.module.css';\n\nconst MIN_AUTO_HEIGHT = 120;\nconst MAX_AUTO_HEIGHT = 12000;\nconst AUTO_HEIGHT_BUFFER = 8;\n\nexport type IframeProps = Omit<ComponentPropsWithoutRef<'iframe'>, 'src' | 'srcDoc' | 'title'> & {\n accessibleLabel: string;\n autoResize?: boolean;\n closeFullscreenLabel?: string;\n fullscreenLabel?: string;\n hasFullscreenView?: boolean;\n srcDoc: string;\n};\n\nexport const Iframe = ({\n accessibleLabel,\n autoResize = false,\n className,\n closeFullscreenLabel = 'Close fullscreen',\n fullscreenLabel = 'View in fullscreen',\n hasFullscreenView = true,\n loading = 'lazy',\n onLoad,\n referrerPolicy = 'no-referrer',\n sandbox = '',\n srcDoc,\n style,\n ...props\n}: IframeProps) => {\n const iframeRef = useRef<HTMLIFrameElement>(null);\n const measurementFrameRef = useRef<number | null>(null);\n const followUpMeasurementTimeoutRef = useRef<number | null>(null);\n const [measuredHeight, setMeasuredHeight] = useState(MIN_AUTO_HEIGHT);\n const [isFullscreenOpen, setIsFullscreenOpen] = useState(false);\n\n const clearScheduledMeasurements = useCallback(() => {\n if (measurementFrameRef.current !== null) {\n window.cancelAnimationFrame(measurementFrameRef.current);\n measurementFrameRef.current = null;\n }\n\n if (followUpMeasurementTimeoutRef.current !== null) {\n window.clearTimeout(followUpMeasurementTimeoutRef.current);\n followUpMeasurementTimeoutRef.current = null;\n }\n }, []);\n\n const measureSize = useCallback(() => {\n if (!autoResize) return;\n\n const iframe = iframeRef.current;\n const iframeDocument = iframe?.contentDocument;\n if (!iframe || !iframeDocument) return;\n\n const renderedHeight = iframe.style.height;\n\n try {\n // measure from a stable viewport height so content sized with percentages or\n // viewport units cannot feed the iframe's previous height back into itself\n iframe.style.height = `${MIN_AUTO_HEIGHT}px`;\n\n const content =\n iframeDocument.querySelector<HTMLElement>('[data-iframe-content]') ?? iframeDocument.body;\n const contentRect = content.getBoundingClientRect();\n const { body, documentElement } = iframeDocument;\n const height = Math.min(\n Math.max(\n Math.ceil(\n Math.max(\n content.scrollHeight,\n content.offsetHeight,\n contentRect.height,\n body.scrollHeight,\n body.offsetHeight,\n documentElement.scrollHeight,\n documentElement.offsetHeight\n ) + AUTO_HEIGHT_BUFFER\n ),\n MIN_AUTO_HEIGHT\n ),\n MAX_AUTO_HEIGHT\n );\n\n setMeasuredHeight(height);\n } catch {\n // cross-origin iframe content cannot be measured; retain minimum height\n } finally {\n iframe.style.height = renderedHeight;\n }\n }, [autoResize]);\n\n const scheduleSizeMeasurement = useCallback(() => {\n if (!autoResize || measurementFrameRef.current !== null) return;\n\n measurementFrameRef.current = window.requestAnimationFrame(() => {\n measurementFrameRef.current = null;\n measureSize();\n\n if (followUpMeasurementTimeoutRef.current !== null) {\n window.clearTimeout(followUpMeasurementTimeoutRef.current);\n }\n\n followUpMeasurementTimeoutRef.current = window.setTimeout(() => {\n followUpMeasurementTimeoutRef.current = null;\n measureSize();\n }, 250);\n });\n }, [autoResize, measureSize]);\n\n const handleLoad: NonNullable<IframeProps['onLoad']> = (event) => {\n scheduleSizeMeasurement();\n\n const iframeDocument = iframeRef.current?.contentDocument;\n Array.from(iframeDocument?.images ?? []).forEach((image) => {\n if (image.complete) return;\n image.addEventListener('load', scheduleSizeMeasurement, { once: true });\n image.addEventListener('error', scheduleSizeMeasurement, { once: true });\n });\n iframeDocument?.fonts?.ready.then(scheduleSizeMeasurement).catch(() => undefined);\n\n onLoad?.(event);\n };\n\n useEffect(() => {\n if (!autoResize) return undefined;\n\n clearScheduledMeasurements();\n setMeasuredHeight(MIN_AUTO_HEIGHT);\n scheduleSizeMeasurement();\n\n return clearScheduledMeasurements;\n }, [autoResize, clearScheduledMeasurements, scheduleSizeMeasurement, srcDoc]);\n\n useEffect(() => {\n if (!autoResize) return undefined;\n\n window.addEventListener('resize', scheduleSizeMeasurement);\n window.visualViewport?.addEventListener('resize', scheduleSizeMeasurement);\n\n return () => {\n window.removeEventListener('resize', scheduleSizeMeasurement);\n window.visualViewport?.removeEventListener('resize', scheduleSizeMeasurement);\n };\n }, [autoResize, scheduleSizeMeasurement]);\n\n return (\n <div className={styles.wrapper}>\n {hasFullscreenView && (\n <div className={styles.toolbar}>\n <Button\n aria-expanded={isFullscreenOpen}\n aria-haspopup='dialog'\n onClick={() => setIsFullscreenOpen(true)}\n variant='tertiary'\n >\n {fullscreenLabel}\n </Button>\n </div>\n )}\n <iframe\n {...props}\n className={cx(styles.iframe, className)}\n loading={loading}\n onLoad={handleLoad}\n ref={iframeRef}\n referrerPolicy={referrerPolicy}\n sandbox={sandbox}\n srcDoc={srcDoc}\n style={\n autoResize\n ? {\n ...style,\n height: measuredHeight,\n minHeight: MIN_AUTO_HEIGHT,\n }\n : style\n }\n title={accessibleLabel}\n />\n {isFullscreenOpen && (\n <Dialog\n aria-label={`${accessibleLabel} fullscreen`}\n className={styles['fullscreen-dialog']}\n open\n setOpen={setIsFullscreenOpen}\n >\n <div className={styles['fullscreen-toolbar']}>\n <Button\n autoFocus\n onClick={() => setIsFullscreenOpen(false)}\n >\n {closeFullscreenLabel}\n </Button>\n </div>\n <iframe\n {...props}\n className={cx(styles.iframe, styles['fullscreen-iframe'], className)}\n loading='eager'\n referrerPolicy={referrerPolicy}\n sandbox={sandbox}\n srcDoc={srcDoc}\n title={`${accessibleLabel} fullscreen`}\n />\n </Dialog>\n )}\n </div>\n );\n};\n"],"names":["MIN_AUTO_HEIGHT","MAX_AUTO_HEIGHT","AUTO_HEIGHT_BUFFER","Iframe","accessibleLabel","autoResize","className","closeFullscreenLabel","fullscreenLabel","hasFullscreenView","loading","onLoad","referrerPolicy","sandbox","srcDoc","style","props","iframeRef","useRef","measurementFrameRef","followUpMeasurementTimeoutRef","measuredHeight","setMeasuredHeight","useState","isFullscreenOpen","setIsFullscreenOpen","clearScheduledMeasurements","useCallback","current","window","cancelAnimationFrame","clearTimeout","measureSize","iframe","iframeDocument","contentDocument","renderedHeight","height","content","querySelector","body","contentRect","getBoundingClientRect","documentElement","Math","min","max","ceil","scrollHeight","offsetHeight","scheduleSizeMeasurement","requestAnimationFrame","setTimeout","handleLoad","event","Array","from","images","forEach","image","complete","addEventListener","once","fonts","ready","then","catch","useEffect","visualViewport","removeEventListener","styles","wrapper","toolbar","jsx","Button","cx","minHeight","jsxs","Dialog"],"mappings":"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"}
@@ -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-BROXUtPz.cjs");const e=require("../../index-CIugi8vq.cjs");require("../../use-touched-D_TJ8wDc.cjs");exports.Input=e.Input;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");require("../../classix-5H4IWnMA.cjs");require("react");require("../../icons-Dx0NQYLH.cjs");const e=require("../../index-CEzqxRIu.cjs");require("../../use-touched-D_TJ8wDc.cjs");exports.Input=e.Input;
2
2
  //# sourceMappingURL=index.cjs.map
@@ -1,8 +1,8 @@
1
1
  import "react/jsx-runtime";
2
2
  import "../../classix-DG18itHa.js";
3
3
  import "react";
4
- import "../../icons-CH48JQqt.js";
5
- import { I as a } from "../../index-BrGCs_7h.js";
4
+ import "../../icons-BFgf_lJN.js";
5
+ import { I as a } from "../../index-BHgGZxsR.js";
6
6
  import "../../use-touched-DXIJVVzz.js";
7
7
  export {
8
8
  a as Input
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index15.css');const e=require("react/jsx-runtime"),v=require("../../classix-5H4IWnMA.cjs"),x=require("../avatar/index.cjs"),b=require("../icon/index.cjs"),y="_message_ugbdy_1",j="_timestamp_ugbdy_78",h="_attachments_ugbdy_83",f="_preview_ugbdy_101",s={"message-group":"_message-group_ugbdy_1",message:y,timestamp:j,attachments:h,preview:f},w=({appearance:m="default",attachments:i,author:a,authorColor:r,authorImageUrl:o,authorRole:d,content:g,iconName:l="info",id:_,preview:u,timestamp:c,timestampText:p,type:t="default"})=>{const n=c?new Date(c):void 0;return e.jsxs("div",{className:s["message-group"],"data-message-type":t,"data-component":"message",children:[a&&e.jsx(x.Avatar,{accessibleLabel:a,color:r,imageUrl:o,name:a,role:d}),e.jsxs("div",{className:v.t(s.message,u&&s.preview),"data-appearance":m,"data-id":_,"data-type":t,children:[t=="system"&&e.jsx(b.Icon,{fill:!0,gap:"right",name:l}),g]}),i&&e.jsx("div",{className:s.attachments,children:i}),n&&e.jsx("time",{className:s.timestamp,dateTime:n.toISOString(),children:p??n.toLocaleString()})]})};exports.Message=w;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index15.css');const e=require("react/jsx-runtime"),v=require("../../classix-5H4IWnMA.cjs"),x=require("../avatar/index.cjs"),b=require("../icon/index.cjs"),j="_message_1bnsh_1",f="_timestamp_1bnsh_91",w="_attachments_1bnsh_96",S="_preview_1bnsh_115",t={"message-group":"_message-group_1bnsh_1",message:j,timestamp:f,attachments:w,preview:S},q=({appearance:o="default",attachments:i,author:a,authorColor:r,authorImageUrl:l,authorRole:d,content:g,iconName:_="info",id:p,preview:u,timestamp:m,timestampText:h,type:s="default"})=>{const n=m?new Date(m):void 0,c=n?e.jsx("time",{className:t.timestamp,dateTime:n.toISOString(),children:h??n.toLocaleString()}):null;return e.jsxs("div",{className:t["message-group"],"data-message-type":s,"data-component":"message",children:[a&&e.jsx(x.Avatar,{accessibleLabel:a,color:r,imageUrl:l,name:a,role:d}),s==="system"&&c,e.jsxs("div",{className:v.t(t.message,u&&t.preview),"data-appearance":o,"data-id":p,"data-type":s,children:[s=="system"&&e.jsx(b.Icon,{fill:!0,gap:"right",name:_}),g]}),i&&e.jsx("div",{className:t.attachments,children:i}),s!=="system"&&c]})};exports.Message=q;
2
2
  //# sourceMappingURL=index.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../../src/components/message/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { IconName } from '@/components/icon/icons.ts';\n\nimport { Avatar, type AvatarColor } from '../avatar';\nimport { Icon } from '../icon';\nimport styles from './styles.module.css';\n\nexport type MessageOptions = {\n appearance?: 'default' | 'document' | 'file';\n attachments?: React.ReactNode;\n author?: string;\n authorColor?: AvatarColor;\n authorImageUrl?: string;\n authorRole?: string;\n content: React.ReactNode;\n iconName?: IconName;\n id: string;\n preview?: boolean;\n timestamp?: Date | string;\n timestampText?: React.ReactNode;\n type?: 'default' | 'minimal' | 'system' | 'user';\n};\n\nexport const Message = ({\n appearance = 'default',\n attachments,\n author,\n authorColor,\n authorImageUrl,\n authorRole,\n content,\n iconName = 'info',\n id,\n preview,\n timestamp,\n timestampText,\n type = 'default',\n}: MessageOptions) => {\n const date = timestamp ? new Date(timestamp) : undefined;\n\n return (\n <div\n className={styles['message-group']}\n data-message-type={type}\n >\n {author && (\n <Avatar\n accessibleLabel={author}\n color={authorColor}\n imageUrl={authorImageUrl}\n name={author}\n role={authorRole}\n />\n )}\n <div\n className={cx(styles.message, preview && styles.preview)}\n data-appearance={appearance}\n data-id={id}\n data-type={type}\n >\n {type == 'system' && (\n <Icon\n fill\n gap='right'\n name={iconName}\n />\n )}\n {content}\n </div>\n {attachments && <div className={styles.attachments}>{attachments}</div>}\n {date && (\n <time\n className={styles.timestamp}\n dateTime={date.toISOString()}\n >\n {timestampText ?? date.toLocaleString()}\n </time>\n )}\n </div>\n );\n};\n"],"names":["Message","appearance","attachments","author","authorColor","authorImageUrl","authorRole","content","iconName","id","preview","timestamp","timestampText","type","date","Date","undefined","jsxs","styles","jsx","Avatar","cx","message","Icon","toISOString","toLocaleString"],"mappings":"sZAwBaA,EAAUA,CAAC,CACtBC,WAAAA,EAAa,UACbC,YAAAA,EACAC,OAAAA,EACAC,YAAAA,EACAC,eAAAA,EACAC,WAAAA,EACAC,QAAAA,EACAC,SAAAA,EAAW,OACXC,GAAAA,EACAC,QAAAA,EACAC,UAAAA,EACAC,cAAAA,EACAC,KAAAA,EAAO,SACO,IAAM,CACpB,MAAMC,EAAOH,EAAY,IAAII,KAAKJ,CAAS,EAAIK,OAE/C,OACEC,OAAC,OACC,UAAWC,EAAO,eAAe,EACjC,oBAAmBL,EAAK,iBAAA,UAEvBV,SAAAA,CAAAA,GACCgB,EAAAA,IAACC,EAAAA,OAAA,CACC,gBAAiBjB,EACjB,MAAOC,EACP,SAAUC,EACV,KAAMF,EACN,KAAMG,CAAAA,CAAW,EAGrBW,EAAAA,KAAC,MAAA,CACC,UAAWI,EAAAA,EAAGH,EAAOI,QAASZ,GAAWQ,EAAOR,OAAO,EACvD,kBAAiBT,EACjB,UAASQ,EACT,YAAWI,EAEVA,SAAAA,CAAAA,GAAQ,gBACNU,EAAAA,KAAA,CACC,KAAI,GACJ,IAAI,QACJ,KAAMf,CAAAA,CAAS,EAGlBD,CAAAA,EACH,EACCL,GAAeiB,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAOhB,YAAcA,SAAAA,EAAY,EAChEY,GACCK,EAAAA,IAAC,OAAA,CACC,UAAWD,EAAOP,UAClB,SAAUG,EAAKU,YAAAA,EAEdZ,SAAAA,GAAiBE,EAAKW,gBAAe,CACxC,CAAA,EAEJ,CAEJ"}
1
+ {"version":3,"file":"index.cjs","sources":["../../../src/components/message/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { IconName } from '@/components/icon/icons.ts';\n\nimport { Avatar, type AvatarColor } from '../avatar';\nimport { Icon } from '../icon';\nimport styles from './styles.module.css';\n\nexport type MessageOptions = {\n appearance?: 'default' | 'document' | 'file';\n attachments?: React.ReactNode;\n author?: string;\n authorColor?: AvatarColor;\n authorImageUrl?: string;\n authorRole?: string;\n content: React.ReactNode;\n iconName?: IconName;\n id: string;\n preview?: boolean;\n timestamp?: Date | string;\n timestampText?: React.ReactNode;\n type?: 'default' | 'minimal' | 'system' | 'user';\n};\n\nexport const Message = ({\n appearance = 'default',\n attachments,\n author,\n authorColor,\n authorImageUrl,\n authorRole,\n content,\n iconName = 'info',\n id,\n preview,\n timestamp,\n timestampText,\n type = 'default',\n}: MessageOptions) => {\n const date = timestamp ? new Date(timestamp) : undefined;\n const timestampElement = date ? (\n <time\n className={styles.timestamp}\n dateTime={date.toISOString()}\n >\n {timestampText ?? date.toLocaleString()}\n </time>\n ) : null;\n\n return (\n <div\n className={styles['message-group']}\n data-message-type={type}\n >\n {author && (\n <Avatar\n accessibleLabel={author}\n color={authorColor}\n imageUrl={authorImageUrl}\n name={author}\n role={authorRole}\n />\n )}\n {type === 'system' && timestampElement}\n <div\n className={cx(styles.message, preview && styles.preview)}\n data-appearance={appearance}\n data-id={id}\n data-type={type}\n >\n {type == 'system' && (\n <Icon\n fill\n gap='right'\n name={iconName}\n />\n )}\n {content}\n </div>\n {attachments && <div className={styles.attachments}>{attachments}</div>}\n {type !== 'system' && timestampElement}\n </div>\n );\n};\n"],"names":["Message","appearance","attachments","author","authorColor","authorImageUrl","authorRole","content","iconName","id","preview","timestamp","timestampText","type","date","Date","undefined","timestampElement","jsx","styles","toISOString","toLocaleString","jsxs","Avatar","cx","message","Icon"],"mappings":"sZAwBaA,EAAUA,CAAC,CACtBC,WAAAA,EAAa,UACbC,YAAAA,EACAC,OAAAA,EACAC,YAAAA,EACAC,eAAAA,EACAC,WAAAA,EACAC,QAAAA,EACAC,SAAAA,EAAW,OACXC,GAAAA,EACAC,QAAAA,EACAC,UAAAA,EACAC,cAAAA,EACAC,KAAAA,EAAO,SACO,IAAM,CACpB,MAAMC,EAAOH,EAAY,IAAII,KAAKJ,CAAS,EAAIK,OACzCC,EAAmBH,EACvBI,EAAAA,IAAC,OAAA,CACC,UAAWC,EAAOR,UAClB,SAAUG,EAAKM,cAEdR,SAAAA,GAAiBE,EAAKO,eAAAA,EACzB,EACE,KAEJ,OACEC,OAAC,OACC,UAAWH,EAAO,eAAe,EACjC,oBAAmBN,EAAK,iBAAA,UAEvBV,SAAAA,CAAAA,GACCe,EAAAA,IAACK,EAAAA,OAAA,CACC,gBAAiBpB,EACjB,MAAOC,EACP,SAAUC,EACV,KAAMF,EACN,KAAMG,CAAAA,CAAW,EAGpBO,IAAS,UAAYI,EACtBK,EAAAA,KAAC,MAAA,CACC,UAAWE,EAAAA,EAAGL,EAAOM,QAASf,GAAWS,EAAOT,OAAO,EACvD,kBAAiBT,EACjB,UAASQ,EACT,YAAWI,EAEVA,SAAAA,CAAAA,GAAQ,gBACNa,EAAAA,KAAA,CACC,KAAI,GACJ,IAAI,QACJ,KAAMlB,CAAAA,CAAS,EAGlBD,CAAAA,EACH,EACCL,GAAegB,EAAAA,IAAC,MAAA,CAAI,UAAWC,EAAOjB,YAAcA,SAAAA,EAAY,EAChEW,IAAS,UAAYI,CAAAA,EACxB,CAEJ"}
@@ -1,40 +1,41 @@
1
- import { jsxs as o, jsx as a } from "react/jsx-runtime";
2
- import { t as f } from "../../classix-DG18itHa.js";
3
- import { Avatar as b } from "../avatar/index.js";
4
- import { Icon as y } from "../icon/index.js";
5
- import '../../assets/index15.css';const h = "_message_ugbdy_1", w = "_timestamp_ugbdy_78", N = "_attachments_ugbdy_83", x = "_preview_ugbdy_101", e = {
6
- "message-group": "_message-group_ugbdy_1",
7
- message: h,
8
- timestamp: w,
9
- attachments: N,
10
- preview: x
11
- }, A = ({
1
+ import { jsx as a, jsxs as r } from "react/jsx-runtime";
2
+ import { t as b } from "../../classix-DG18itHa.js";
3
+ import { Avatar as u } from "../avatar/index.js";
4
+ import { Icon as w } from "../icon/index.js";
5
+ import '../../assets/index15.css';const N = "_message_1bnsh_1", x = "_timestamp_1bnsh_91", S = "_attachments_1bnsh_96", j = "_preview_1bnsh_115", s = {
6
+ "message-group": "_message-group_1bnsh_1",
7
+ message: N,
8
+ timestamp: x,
9
+ attachments: S,
10
+ preview: j
11
+ }, D = ({
12
12
  appearance: c = "default",
13
- attachments: i,
14
- author: s,
15
- authorColor: n,
13
+ attachments: n,
14
+ author: t,
15
+ authorColor: l,
16
16
  authorImageUrl: d,
17
17
  authorRole: g,
18
- content: l,
19
- iconName: p = "info",
20
- id: _,
21
- preview: u,
22
- timestamp: r,
23
- timestampText: v,
24
- type: t = "default"
18
+ content: p,
19
+ iconName: _ = "info",
20
+ id: h,
21
+ preview: v,
22
+ timestamp: i,
23
+ timestampText: f,
24
+ type: e = "default"
25
25
  }) => {
26
- const m = r ? new Date(r) : void 0;
27
- return /* @__PURE__ */ o("div", { className: e["message-group"], "data-message-type": t, "data-component": "message", children: [
28
- s && /* @__PURE__ */ a(b, { accessibleLabel: s, color: n, imageUrl: d, name: s, role: g }),
29
- /* @__PURE__ */ o("div", { className: f(e.message, u && e.preview), "data-appearance": c, "data-id": _, "data-type": t, children: [
30
- t == "system" && /* @__PURE__ */ a(y, { fill: !0, gap: "right", name: p }),
31
- l
26
+ const m = i ? new Date(i) : void 0, o = m ? /* @__PURE__ */ a("time", { className: s.timestamp, dateTime: m.toISOString(), children: f ?? m.toLocaleString() }) : null;
27
+ return /* @__PURE__ */ r("div", { className: s["message-group"], "data-message-type": e, "data-component": "message", children: [
28
+ t && /* @__PURE__ */ a(u, { accessibleLabel: t, color: l, imageUrl: d, name: t, role: g }),
29
+ e === "system" && o,
30
+ /* @__PURE__ */ r("div", { className: b(s.message, v && s.preview), "data-appearance": c, "data-id": h, "data-type": e, children: [
31
+ e == "system" && /* @__PURE__ */ a(w, { fill: !0, gap: "right", name: _ }),
32
+ p
32
33
  ] }),
33
- i && /* @__PURE__ */ a("div", { className: e.attachments, children: i }),
34
- m && /* @__PURE__ */ a("time", { className: e.timestamp, dateTime: m.toISOString(), children: v ?? m.toLocaleString() })
34
+ n && /* @__PURE__ */ a("div", { className: s.attachments, children: n }),
35
+ e !== "system" && o
35
36
  ] });
36
37
  };
37
38
  export {
38
- A as Message
39
+ D as Message
39
40
  };
40
41
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../src/components/message/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { IconName } from '@/components/icon/icons.ts';\n\nimport { Avatar, type AvatarColor } from '../avatar';\nimport { Icon } from '../icon';\nimport styles from './styles.module.css';\n\nexport type MessageOptions = {\n appearance?: 'default' | 'document' | 'file';\n attachments?: React.ReactNode;\n author?: string;\n authorColor?: AvatarColor;\n authorImageUrl?: string;\n authorRole?: string;\n content: React.ReactNode;\n iconName?: IconName;\n id: string;\n preview?: boolean;\n timestamp?: Date | string;\n timestampText?: React.ReactNode;\n type?: 'default' | 'minimal' | 'system' | 'user';\n};\n\nexport const Message = ({\n appearance = 'default',\n attachments,\n author,\n authorColor,\n authorImageUrl,\n authorRole,\n content,\n iconName = 'info',\n id,\n preview,\n timestamp,\n timestampText,\n type = 'default',\n}: MessageOptions) => {\n const date = timestamp ? new Date(timestamp) : undefined;\n\n return (\n <div\n className={styles['message-group']}\n data-message-type={type}\n >\n {author && (\n <Avatar\n accessibleLabel={author}\n color={authorColor}\n imageUrl={authorImageUrl}\n name={author}\n role={authorRole}\n />\n )}\n <div\n className={cx(styles.message, preview && styles.preview)}\n data-appearance={appearance}\n data-id={id}\n data-type={type}\n >\n {type == 'system' && (\n <Icon\n fill\n gap='right'\n name={iconName}\n />\n )}\n {content}\n </div>\n {attachments && <div className={styles.attachments}>{attachments}</div>}\n {date && (\n <time\n className={styles.timestamp}\n dateTime={date.toISOString()}\n >\n {timestampText ?? date.toLocaleString()}\n </time>\n )}\n </div>\n );\n};\n"],"names":["Message","appearance","attachments","author","authorColor","authorImageUrl","authorRole","content","iconName","id","preview","timestamp","timestampText","type","date","Date","undefined","jsxs","styles","jsx","Avatar","cx","message","Icon","toISOString","toLocaleString"],"mappings":";;;;;;;;;;GAwBaA,IAAUA,CAAC;AAAA,EACtBC,YAAAA,IAAa;AAAA,EACbC,aAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXC,IAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,MAAAA,IAAO;AACO,MAAM;AACpB,QAAMC,IAAOH,IAAY,IAAII,KAAKJ,CAAS,IAAIK;AAE/C,SACE,gBAAAC,EAAC,SACC,WAAWC,EAAO,eAAe,GACjC,qBAAmBL,GAAK,kBAAA,WAEvBV,UAAAA;AAAAA,IAAAA,KACC,gBAAAgB,EAACC,GAAA,EACC,iBAAiBjB,GACjB,OAAOC,GACP,UAAUC,GACV,MAAMF,GACN,MAAMG,EAAAA,CAAW;AAAA,IAGrB,gBAAAW,EAAC,OAAA,EACC,WAAWI,EAAGH,EAAOI,SAASZ,KAAWQ,EAAOR,OAAO,GACvD,mBAAiBT,GACjB,WAASQ,GACT,aAAWI,GAEVA,UAAAA;AAAAA,MAAAA,KAAQ,8BACNU,GAAA,EACC,MAAI,IACJ,KAAI,SACJ,MAAMf,EAAAA,CAAS;AAAA,MAGlBD;AAAAA,IAAAA,GACH;AAAA,IACCL,KAAe,gBAAAiB,EAAC,OAAA,EAAI,WAAWD,EAAOhB,aAAcA,UAAAA,GAAY;AAAA,IAChEY,KACC,gBAAAK,EAAC,QAAA,EACC,WAAWD,EAAOP,WAClB,UAAUG,EAAKU,YAAAA,GAEdZ,UAAAA,KAAiBE,EAAKW,iBAAe,CACxC;AAAA,EAAA,GAEJ;AAEJ;"}
1
+ {"version":3,"file":"index.js","sources":["../../../src/components/message/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { IconName } from '@/components/icon/icons.ts';\n\nimport { Avatar, type AvatarColor } from '../avatar';\nimport { Icon } from '../icon';\nimport styles from './styles.module.css';\n\nexport type MessageOptions = {\n appearance?: 'default' | 'document' | 'file';\n attachments?: React.ReactNode;\n author?: string;\n authorColor?: AvatarColor;\n authorImageUrl?: string;\n authorRole?: string;\n content: React.ReactNode;\n iconName?: IconName;\n id: string;\n preview?: boolean;\n timestamp?: Date | string;\n timestampText?: React.ReactNode;\n type?: 'default' | 'minimal' | 'system' | 'user';\n};\n\nexport const Message = ({\n appearance = 'default',\n attachments,\n author,\n authorColor,\n authorImageUrl,\n authorRole,\n content,\n iconName = 'info',\n id,\n preview,\n timestamp,\n timestampText,\n type = 'default',\n}: MessageOptions) => {\n const date = timestamp ? new Date(timestamp) : undefined;\n const timestampElement = date ? (\n <time\n className={styles.timestamp}\n dateTime={date.toISOString()}\n >\n {timestampText ?? date.toLocaleString()}\n </time>\n ) : null;\n\n return (\n <div\n className={styles['message-group']}\n data-message-type={type}\n >\n {author && (\n <Avatar\n accessibleLabel={author}\n color={authorColor}\n imageUrl={authorImageUrl}\n name={author}\n role={authorRole}\n />\n )}\n {type === 'system' && timestampElement}\n <div\n className={cx(styles.message, preview && styles.preview)}\n data-appearance={appearance}\n data-id={id}\n data-type={type}\n >\n {type == 'system' && (\n <Icon\n fill\n gap='right'\n name={iconName}\n />\n )}\n {content}\n </div>\n {attachments && <div className={styles.attachments}>{attachments}</div>}\n {type !== 'system' && timestampElement}\n </div>\n );\n};\n"],"names":["Message","appearance","attachments","author","authorColor","authorImageUrl","authorRole","content","iconName","id","preview","timestamp","timestampText","type","date","Date","undefined","timestampElement","jsx","styles","toISOString","toLocaleString","jsxs","Avatar","cx","message","Icon"],"mappings":";;;;;;;;;;GAwBaA,IAAUA,CAAC;AAAA,EACtBC,YAAAA,IAAa;AAAA,EACbC,aAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXC,IAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,MAAAA,IAAO;AACO,MAAM;AACpB,QAAMC,IAAOH,IAAY,IAAII,KAAKJ,CAAS,IAAIK,QACzCC,IAAmBH,IACvB,gBAAAI,EAAC,QAAA,EACC,WAAWC,EAAOR,WAClB,UAAUG,EAAKM,eAEdR,UAAAA,KAAiBE,EAAKO,eAAAA,GACzB,IACE;AAEJ,SACE,gBAAAC,EAAC,SACC,WAAWH,EAAO,eAAe,GACjC,qBAAmBN,GAAK,kBAAA,WAEvBV,UAAAA;AAAAA,IAAAA,KACC,gBAAAe,EAACK,GAAA,EACC,iBAAiBpB,GACjB,OAAOC,GACP,UAAUC,GACV,MAAMF,GACN,MAAMG,EAAAA,CAAW;AAAA,IAGpBO,MAAS,YAAYI;AAAAA,IACtB,gBAAAK,EAAC,OAAA,EACC,WAAWE,EAAGL,EAAOM,SAASf,KAAWS,EAAOT,OAAO,GACvD,mBAAiBT,GACjB,WAASQ,GACT,aAAWI,GAEVA,UAAAA;AAAAA,MAAAA,KAAQ,8BACNa,GAAA,EACC,MAAI,IACJ,KAAI,SACJ,MAAMlB,EAAAA,CAAS;AAAA,MAGlBD;AAAAA,IAAAA,GACH;AAAA,IACCL,KAAe,gBAAAgB,EAAC,OAAA,EAAI,WAAWC,EAAOjB,aAAcA,UAAAA,GAAY;AAAA,IAChEW,MAAS,YAAYI;AAAAA,EAAAA,GACxB;AAEJ;"}
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index14.css');const s=require("react/jsx-runtime"),S=require("../../classix-5H4IWnMA.cjs"),o=require("react"),v=require("../editor/index.cjs"),L=require("../list/index.cjs"),w=require("../message/index.cjs"),E="_messages_1e940_1",I="_fill_1e940_16",m={messages:E,fill:I},h=({fill:g=!1,files:i,handleUpload:f,maxEditorRows:p=5,message:r="",messages:t,minEditorRows:_=1,onChange:x,onFilesChange:n,onSubmit:q,placeholder:b,sending:j})=>{var u;const c=o.useRef(null),[y,R]=o.useState([]),l=i??y,a=(u=t[t.length-1])==null?void 0:u.id,M=r.replace(/<[^>]*>/g,"").replace(/&nbsp;/g," ").trim()==="";return o.useLayoutEffect(()=>{var d;const e=(d=c.current)==null?void 0:d.querySelector("[data-message-list]");!e||a===void 0||(e.scrollTop=e.scrollHeight)},[a]),s.jsxs("div",{className:S.t(m.messages,g&&m.fill),"data-component":"messages",ref:c,children:[s.jsx(L.List,{"data-message-list":!0,children:t.map(e=>s.jsx(w.Message,{...e},e.id))}),s.jsx(v.Editor,{autofocus:!0,content:r,disabled:j||M&&l.length===0,files:l,maxRows:p,minRows:_,onChange:x,onFilesChange:e=>{i===void 0&&R(e),n==null||n(e)},onSubmit:q,onUpload:f,placeholder:b,submitLabel:"Send message"})]})};exports.Messages=h;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index13.css');const s=require("react/jsx-runtime"),w=require("../../classix-5H4IWnMA.cjs"),o=require("react"),M=require("../editor/index.cjs"),S=require("../list/index.cjs"),E=require("../tooltip/index.cjs"),I=require("../message/index.cjs"),L="_messages_5h1dw_1",T="_fill_5h1dw_20",g={messages:L,fill:T},H=({fill:f=!1,files:i,handleUpload:p,maxEditorRows:_=5,message:r="",messages:t,minEditorRows:x=1,onChange:q,onFilesChange:n,onSubmit:j,placeholder:y,sending:R,tooltipLabel:c})=>{var u;const a=o.useRef(null),[b,h]=o.useState([]),l=i??b,d=(u=t[t.length-1])==null?void 0:u.id,v=r.replace(/<[^>]*>/g,"").replace(/&nbsp;/g," ").trim()==="";return o.useLayoutEffect(()=>{var m;const e=(m=a.current)==null?void 0:m.querySelector("[data-message-list]");!e||d===void 0||(e.scrollTop=e.scrollHeight)},[d]),s.jsxs("div",{className:w.t(g.messages,f&&g.fill),"data-component":"messages",ref:a,children:[s.jsx(S.List,{"data-message-list":!0,children:t.map(e=>s.jsx(I.Message,{...e},e.id))}),c&&s.jsx(E.Tooltip,{variant:"static",children:c}),s.jsx(M.Editor,{autofocus:!0,content:r,disabled:R||v&&l.length===0,files:l,maxRows:_,minRows:x,onChange:q,onFilesChange:e=>{i===void 0&&h(e),n==null||n(e)},onSubmit:j,onUpload:p,placeholder:y,submitLabel:"Send message"})]})};exports.Messages=H;
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 } from '@/components/editor';\nimport { List } from '@/components/list';\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 maxEditorRows?: number;\n message: string;\n messages: MessageItem[];\n minEditorRows?: number;\n onChange: (content: string) => void;\n onFilesChange?: (files: File[]) => void;\n onSubmit: () => Promise<void> | void;\n placeholder?: string;\n sending: boolean;\n};\n\nexport const Messages = ({\n fill = false,\n files,\n handleUpload,\n maxEditorRows = 5,\n message = '',\n messages,\n minEditorRows = 1,\n onChange,\n onFilesChange,\n onSubmit,\n placeholder,\n sending,\n}: MessagesProps) => {\n const messagesRef = useRef<HTMLDivElement>(null);\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(/&nbsp;/g, ' ')\n .trim() === '';\n\n useLayoutEffect(() => {\n const messageList = messagesRef.current?.querySelector<HTMLElement>('[data-message-list]');\n if (!messageList || newestMessageId === undefined) return;\n\n messageList.scrollTop = messageList.scrollHeight;\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 <Editor\n autofocus\n content={message}\n disabled={sending || (messageIsEmpty && queuedFiles.length === 0)}\n files={queuedFiles}\n maxRows={maxEditorRows}\n minRows={minEditorRows}\n onChange={onChange}\n onFilesChange={(nextFiles) => {\n if (files === undefined) setInternalFiles(nextFiles);\n onFilesChange?.(nextFiles);\n }}\n onSubmit={onSubmit}\n onUpload={handleUpload}\n placeholder={placeholder}\n submitLabel='Send message'\n />\n </div>\n );\n};\n"],"names":["Messages","fill","files","handleUpload","maxEditorRows","message","messages","minEditorRows","onChange","onFilesChange","onSubmit","placeholder","sending","messagesRef","useRef","internalFiles","setInternalFiles","useState","queuedFiles","newestMessageId","length","id","messageIsEmpty","replace","trim","useLayoutEffect","messageList","current","querySelector","undefined","scrollTop","scrollHeight","jsxs","cx","styles","jsx","List","map","Message","Editor","nextFiles"],"mappings":"iVA0BaA,EAAWA,CAAC,CACvBC,KAAAA,EAAO,GACPC,MAAAA,EACAC,aAAAA,EACAC,cAAAA,EAAgB,EAChBC,QAAAA,EAAU,GACVC,SAAAA,EACAC,cAAAA,EAAgB,EAChBC,SAAAA,EACAC,cAAAA,EACAC,SAAAA,EACAC,YAAAA,EACAC,QAAAA,CACa,IAAM,OACnB,MAAMC,EAAcC,EAAAA,OAAuB,IAAI,EACzC,CAACC,EAAeC,CAAgB,EAAIC,EAAAA,SAAiB,CAAA,CAAE,EACvDC,EAAchB,GAASa,EACvBI,GAAkBb,EAAAA,EAASA,EAASc,OAAS,CAAC,IAA5Bd,YAAAA,EAA+Be,GACjDC,EACJjB,EACGkB,QAAQ,WAAY,EAAE,EACtBA,QAAQ,UAAW,GAAG,EACtBC,KAAAA,IAAW,GAEhBC,OAAAA,EAAAA,gBAAgB,IAAM,OACpB,MAAMC,GAAcb,EAAAA,EAAYc,UAAZd,YAAAA,EAAqBe,cAA2B,uBAChE,CAACF,GAAeP,IAAoBU,SAExCH,EAAYI,UAAYJ,EAAYK,aACtC,EAAG,CAACZ,CAAe,CAAC,EAGlBa,EAAAA,KAAC,MAAA,CACC,UAAWC,EAAAA,EAAGC,EAAO5B,SAAUL,GAAQiC,EAAOjC,IAAI,EAClD,iBAAe,WACf,IAAKY,EAEL,SAAA,CAAAsB,EAAAA,IAACC,EAAAA,KAAA,CAAK,oBAAiB,GACpB9B,SAAAA,EAAS+B,IAAKhC,GACb8B,EAAAA,IAACG,EAAAA,QAAA,CAEC,GAAIjC,CAAAA,EADCA,EAAQgB,EACD,CAEf,EACH,EACAc,MAACI,EAAAA,QACC,UAAS,GACT,QAASlC,EACT,SAAUO,GAAYU,GAAkBJ,EAAYE,SAAW,EAC/D,MAAOF,EACP,QAASd,EACT,QAASG,EACT,SAAAC,EACA,cAAgBgC,GAAc,CACxBtC,IAAU2B,QAAWb,EAAiBwB,CAAS,EACnD/B,GAAAA,MAAAA,EAAgB+B,EAClB,EACA,SAAA9B,EACA,SAAUP,EACV,YAAAQ,EACA,YAAY,cAAA,CAAc,CAAA,EAE9B,CAEJ"}
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 } 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 maxEditorRows?: number;\n message: string;\n messages: MessageItem[];\n minEditorRows?: number;\n onChange: (content: string) => void;\n onFilesChange?: (files: File[]) => 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 maxEditorRows = 5,\n message = '',\n messages,\n minEditorRows = 1,\n onChange,\n onFilesChange,\n onSubmit,\n placeholder,\n sending,\n tooltipLabel,\n}: MessagesProps) => {\n const messagesRef = useRef<HTMLDivElement>(null);\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(/&nbsp;/g, ' ')\n .trim() === '';\n\n useLayoutEffect(() => {\n const messageList = messagesRef.current?.querySelector<HTMLElement>('[data-message-list]');\n if (!messageList || newestMessageId === undefined) return;\n\n messageList.scrollTop = messageList.scrollHeight;\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)}\n files={queuedFiles}\n maxRows={maxEditorRows}\n minRows={minEditorRows}\n onChange={onChange}\n onFilesChange={(nextFiles) => {\n if (files === undefined) setInternalFiles(nextFiles);\n onFilesChange?.(nextFiles);\n }}\n onSubmit={onSubmit}\n onUpload={handleUpload}\n placeholder={placeholder}\n submitLabel='Send message'\n />\n </div>\n );\n};\n"],"names":["Messages","fill","files","handleUpload","maxEditorRows","message","messages","minEditorRows","onChange","onFilesChange","onSubmit","placeholder","sending","tooltipLabel","messagesRef","useRef","internalFiles","setInternalFiles","useState","queuedFiles","newestMessageId","length","id","messageIsEmpty","replace","trim","useLayoutEffect","messageList","current","querySelector","undefined","scrollTop","scrollHeight","jsxs","cx","styles","jsx","List","map","Message","Tooltip","Editor","nextFiles"],"mappings":"mXA4BaA,EAAWA,CAAC,CACvBC,KAAAA,EAAO,GACPC,MAAAA,EACAC,aAAAA,EACAC,cAAAA,EAAgB,EAChBC,QAAAA,EAAU,GACVC,SAAAA,EACAC,cAAAA,EAAgB,EAChBC,SAAAA,EACAC,cAAAA,EACAC,SAAAA,EACAC,YAAAA,EACAC,QAAAA,EACAC,aAAAA,CACa,IAAM,OACnB,MAAMC,EAAcC,EAAAA,OAAuB,IAAI,EACzC,CAACC,EAAeC,CAAgB,EAAIC,EAAAA,SAAiB,CAAA,CAAE,EACvDC,EAAcjB,GAASc,EACvBI,GAAkBd,EAAAA,EAASA,EAASe,OAAS,CAAC,IAA5Bf,YAAAA,EAA+BgB,GACjDC,EACJlB,EACGmB,QAAQ,WAAY,EAAE,EACtBA,QAAQ,UAAW,GAAG,EACtBC,KAAAA,IAAW,GAEhBC,OAAAA,EAAAA,gBAAgB,IAAM,OACpB,MAAMC,GAAcb,EAAAA,EAAYc,UAAZd,YAAAA,EAAqBe,cAA2B,uBAChE,CAACF,GAAeP,IAAoBU,SAExCH,EAAYI,UAAYJ,EAAYK,aACtC,EAAG,CAACZ,CAAe,CAAC,EAGlBa,EAAAA,KAAC,MAAA,CACC,UAAWC,EAAAA,EAAGC,EAAO7B,SAAUL,GAAQkC,EAAOlC,IAAI,EAClD,iBAAe,WACf,IAAKa,EAEL,SAAA,CAAAsB,EAAAA,IAACC,EAAAA,KAAA,CAAK,oBAAiB,GACpB/B,SAAAA,EAASgC,IAAKjC,GACb+B,EAAAA,IAACG,EAAAA,QAAA,CAEC,GAAIlC,CAAAA,EADCA,EAAQiB,EACD,CAEf,EACH,EACCT,GAAgBuB,EAAAA,IAACI,UAAA,CAAQ,QAAQ,SAAU3B,SAAAA,EAAa,EACzDuB,MAACK,EAAAA,QACC,UAAS,GACT,QAASpC,EACT,SAAUO,GAAYW,GAAkBJ,EAAYE,SAAW,EAC/D,MAAOF,EACP,QAASf,EACT,QAASG,EACT,SAAAC,EACA,cAAgBkC,GAAc,CACxBxC,IAAU4B,QAAWb,EAAiByB,CAAS,EACnDjC,GAAAA,MAAAA,EAAgBiC,EAClB,EACA,SAAAhC,EACA,SAAUP,EACV,YAAAQ,EACA,YAAY,cAAA,CAAc,CAAA,EAE9B,CAEJ"}
@@ -1,40 +1,43 @@
1
- import { jsxs as x, jsx as o } from "react/jsx-runtime";
2
- import { t as E } from "../../classix-DG18itHa.js";
3
- import { useRef as I, useState as M, useLayoutEffect as S } from "react";
4
- import { Editor as h } from "../editor/index.js";
5
- import { List as j } from "../list/index.js";
6
- import { Message as q } from "../message/index.js";
7
- import '../../assets/index14.css';const H = "_messages_1e940_1", N = "_fill_1e940_16", f = {
8
- messages: H,
9
- fill: N
10
- }, D = ({
11
- fill: d = !1,
1
+ import { jsxs as E, jsx as e } from "react/jsx-runtime";
2
+ import { t as I } from "../../classix-DG18itHa.js";
3
+ import { useRef as L, useState as M, useLayoutEffect as S } from "react";
4
+ import { Editor as j } from "../editor/index.js";
5
+ import { List as q } from "../list/index.js";
6
+ import { Tooltip as T } from "../tooltip/index.js";
7
+ import { Message as H } from "../message/index.js";
8
+ import '../../assets/index13.css';const N = "_messages_5h1dw_1", U = "_fill_5h1dw_20", f = {
9
+ messages: N,
10
+ fill: U
11
+ }, K = ({
12
+ fill: p = !1,
12
13
  files: r,
13
14
  handleUpload: u,
14
- maxEditorRows: p = 5,
15
- message: l = "",
16
- messages: e,
17
- minEditorRows: g = 1,
18
- onChange: _,
19
- onFilesChange: t,
20
- onSubmit: b,
21
- placeholder: y,
22
- sending: L
15
+ maxEditorRows: g = 5,
16
+ message: i = "",
17
+ messages: t,
18
+ minEditorRows: _ = 1,
19
+ onChange: h,
20
+ onFilesChange: o,
21
+ onSubmit: w,
22
+ placeholder: v,
23
+ sending: y,
24
+ tooltipLabel: a
23
25
  }) => {
24
- var n;
25
- const i = I(null), [R, v] = M([]), a = r ?? R, m = (n = e[e.length - 1]) == null ? void 0 : n.id, w = l.replace(/<[^>]*>/g, "").replace(/&nbsp;/g, " ").trim() === "";
26
+ var c;
27
+ const l = L(null), [R, b] = M([]), m = r ?? R, n = (c = t[t.length - 1]) == null ? void 0 : c.id, x = i.replace(/<[^>]*>/g, "").replace(/&nbsp;/g, " ").trim() === "";
26
28
  return S(() => {
27
- var c;
28
- const s = (c = i.current) == null ? void 0 : c.querySelector("[data-message-list]");
29
- !s || m === void 0 || (s.scrollTop = s.scrollHeight);
30
- }, [m]), /* @__PURE__ */ x("div", { className: E(f.messages, d && f.fill), "data-component": "messages", ref: i, children: [
31
- /* @__PURE__ */ o(j, { "data-message-list": !0, children: e.map((s) => /* @__PURE__ */ o(q, { ...s }, s.id)) }),
32
- /* @__PURE__ */ o(h, { autofocus: !0, content: l, disabled: L || w && a.length === 0, files: a, maxRows: p, minRows: g, onChange: _, onFilesChange: (s) => {
33
- r === void 0 && v(s), t == null || t(s);
34
- }, onSubmit: b, onUpload: u, placeholder: y, submitLabel: "Send message" })
29
+ var d;
30
+ const s = (d = l.current) == null ? void 0 : d.querySelector("[data-message-list]");
31
+ !s || n === void 0 || (s.scrollTop = s.scrollHeight);
32
+ }, [n]), /* @__PURE__ */ E("div", { className: I(f.messages, p && f.fill), "data-component": "messages", ref: l, children: [
33
+ /* @__PURE__ */ e(q, { "data-message-list": !0, children: t.map((s) => /* @__PURE__ */ e(H, { ...s }, s.id)) }),
34
+ a && /* @__PURE__ */ e(T, { variant: "static", children: a }),
35
+ /* @__PURE__ */ e(j, { autofocus: !0, content: i, disabled: y || x && m.length === 0, files: m, maxRows: g, minRows: _, onChange: h, onFilesChange: (s) => {
36
+ r === void 0 && b(s), o == null || o(s);
37
+ }, onSubmit: w, onUpload: u, placeholder: v, submitLabel: "Send message" })
35
38
  ] });
36
39
  };
37
40
  export {
38
- D as Messages
41
+ K as Messages
39
42
  };
40
43
  //# 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 } from '@/components/editor';\nimport { List } from '@/components/list';\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 maxEditorRows?: number;\n message: string;\n messages: MessageItem[];\n minEditorRows?: number;\n onChange: (content: string) => void;\n onFilesChange?: (files: File[]) => void;\n onSubmit: () => Promise<void> | void;\n placeholder?: string;\n sending: boolean;\n};\n\nexport const Messages = ({\n fill = false,\n files,\n handleUpload,\n maxEditorRows = 5,\n message = '',\n messages,\n minEditorRows = 1,\n onChange,\n onFilesChange,\n onSubmit,\n placeholder,\n sending,\n}: MessagesProps) => {\n const messagesRef = useRef<HTMLDivElement>(null);\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(/&nbsp;/g, ' ')\n .trim() === '';\n\n useLayoutEffect(() => {\n const messageList = messagesRef.current?.querySelector<HTMLElement>('[data-message-list]');\n if (!messageList || newestMessageId === undefined) return;\n\n messageList.scrollTop = messageList.scrollHeight;\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 <Editor\n autofocus\n content={message}\n disabled={sending || (messageIsEmpty && queuedFiles.length === 0)}\n files={queuedFiles}\n maxRows={maxEditorRows}\n minRows={minEditorRows}\n onChange={onChange}\n onFilesChange={(nextFiles) => {\n if (files === undefined) setInternalFiles(nextFiles);\n onFilesChange?.(nextFiles);\n }}\n onSubmit={onSubmit}\n onUpload={handleUpload}\n placeholder={placeholder}\n submitLabel='Send message'\n />\n </div>\n );\n};\n"],"names":["Messages","fill","files","handleUpload","maxEditorRows","message","messages","minEditorRows","onChange","onFilesChange","onSubmit","placeholder","sending","messagesRef","useRef","internalFiles","setInternalFiles","useState","queuedFiles","newestMessageId","length","id","messageIsEmpty","replace","trim","useLayoutEffect","messageList","current","querySelector","undefined","scrollTop","scrollHeight","jsxs","cx","styles","jsx","List","map","Message","Editor","nextFiles"],"mappings":";;;;;;;;;GA0BaA,IAAWA,CAAC;AAAA,EACvBC,MAAAA,IAAO;AAAA,EACPC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,eAAAA,IAAgB;AAAA,EAChBC,SAAAA,IAAU;AAAA,EACVC,UAAAA;AAAAA,EACAC,eAAAA,IAAgB;AAAA,EAChBC,UAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,SAAAA;AACa,MAAM;;AACnB,QAAMC,IAAcC,EAAuB,IAAI,GACzC,CAACC,GAAeC,CAAgB,IAAIC,EAAiB,CAAA,CAAE,GACvDC,IAAchB,KAASa,GACvBI,KAAkBb,IAAAA,EAASA,EAASc,SAAS,CAAC,MAA5Bd,gBAAAA,EAA+Be,IACjDC,IACJjB,EACGkB,QAAQ,YAAY,EAAE,EACtBA,QAAQ,WAAW,GAAG,EACtBC,KAAAA,MAAW;AAEhBC,SAAAA,EAAgB,MAAM;;AACpB,UAAMC,KAAcb,IAAAA,EAAYc,YAAZd,gBAAAA,EAAqBe,cAA2B;AACpE,IAAI,CAACF,KAAeP,MAAoBU,WAExCH,EAAYI,YAAYJ,EAAYK;AAAAA,EACtC,GAAG,CAACZ,CAAe,CAAC,GAGlB,gBAAAa,EAAC,OAAA,EACC,WAAWC,EAAGC,EAAO5B,UAAUL,KAAQiC,EAAOjC,IAAI,GAClD,kBAAe,YACf,KAAKY,GAEL,UAAA;AAAA,IAAA,gBAAAsB,EAACC,GAAA,EAAK,qBAAiB,IACpB9B,UAAAA,EAAS+B,IAAKhC,CAAAA,MACb,gBAAA8B,EAACG,GAAA,EAEC,GAAIjC,EAAAA,GADCA,EAAQgB,EACD,CAEf,GACH;AAAA,IACA,gBAAAc,EAACI,KACC,WAAS,IACT,SAASlC,GACT,UAAUO,KAAYU,KAAkBJ,EAAYE,WAAW,GAC/D,OAAOF,GACP,SAASd,GACT,SAASG,GACT,UAAAC,GACA,eAAgBgC,CAAAA,MAAc;AAC5B,MAAItC,MAAU2B,UAAWb,EAAiBwB,CAAS,GACnD/B,KAAAA,QAAAA,EAAgB+B;AAAAA,IAClB,GACA,UAAA9B,GACA,UAAUP,GACV,aAAAQ,GACA,aAAY,eAAA,CAAc;AAAA,EAAA,GAE9B;AAEJ;"}
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 } 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 maxEditorRows?: number;\n message: string;\n messages: MessageItem[];\n minEditorRows?: number;\n onChange: (content: string) => void;\n onFilesChange?: (files: File[]) => 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 maxEditorRows = 5,\n message = '',\n messages,\n minEditorRows = 1,\n onChange,\n onFilesChange,\n onSubmit,\n placeholder,\n sending,\n tooltipLabel,\n}: MessagesProps) => {\n const messagesRef = useRef<HTMLDivElement>(null);\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(/&nbsp;/g, ' ')\n .trim() === '';\n\n useLayoutEffect(() => {\n const messageList = messagesRef.current?.querySelector<HTMLElement>('[data-message-list]');\n if (!messageList || newestMessageId === undefined) return;\n\n messageList.scrollTop = messageList.scrollHeight;\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)}\n files={queuedFiles}\n maxRows={maxEditorRows}\n minRows={minEditorRows}\n onChange={onChange}\n onFilesChange={(nextFiles) => {\n if (files === undefined) setInternalFiles(nextFiles);\n onFilesChange?.(nextFiles);\n }}\n onSubmit={onSubmit}\n onUpload={handleUpload}\n placeholder={placeholder}\n submitLabel='Send message'\n />\n </div>\n );\n};\n"],"names":["Messages","fill","files","handleUpload","maxEditorRows","message","messages","minEditorRows","onChange","onFilesChange","onSubmit","placeholder","sending","tooltipLabel","messagesRef","useRef","internalFiles","setInternalFiles","useState","queuedFiles","newestMessageId","length","id","messageIsEmpty","replace","trim","useLayoutEffect","messageList","current","querySelector","undefined","scrollTop","scrollHeight","jsxs","cx","styles","jsx","List","map","Message","Tooltip","Editor","nextFiles"],"mappings":";;;;;;;;;;GA4BaA,IAAWA,CAAC;AAAA,EACvBC,MAAAA,IAAO;AAAA,EACPC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,eAAAA,IAAgB;AAAA,EAChBC,SAAAA,IAAU;AAAA,EACVC,UAAAA;AAAAA,EACAC,eAAAA,IAAgB;AAAA,EAChBC,UAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,cAAAA;AACa,MAAM;;AACnB,QAAMC,IAAcC,EAAuB,IAAI,GACzC,CAACC,GAAeC,CAAgB,IAAIC,EAAiB,CAAA,CAAE,GACvDC,IAAcjB,KAASc,GACvBI,KAAkBd,IAAAA,EAASA,EAASe,SAAS,CAAC,MAA5Bf,gBAAAA,EAA+BgB,IACjDC,IACJlB,EACGmB,QAAQ,YAAY,EAAE,EACtBA,QAAQ,WAAW,GAAG,EACtBC,KAAAA,MAAW;AAEhBC,SAAAA,EAAgB,MAAM;;AACpB,UAAMC,KAAcb,IAAAA,EAAYc,YAAZd,gBAAAA,EAAqBe,cAA2B;AACpE,IAAI,CAACF,KAAeP,MAAoBU,WAExCH,EAAYI,YAAYJ,EAAYK;AAAAA,EACtC,GAAG,CAACZ,CAAe,CAAC,GAGlB,gBAAAa,EAAC,OAAA,EACC,WAAWC,EAAGC,EAAO7B,UAAUL,KAAQkC,EAAOlC,IAAI,GAClD,kBAAe,YACf,KAAKa,GAEL,UAAA;AAAA,IAAA,gBAAAsB,EAACC,GAAA,EAAK,qBAAiB,IACpB/B,UAAAA,EAASgC,IAAKjC,CAAAA,MACb,gBAAA+B,EAACG,GAAA,EAEC,GAAIlC,EAAAA,GADCA,EAAQiB,EACD,CAEf,GACH;AAAA,IACCT,KAAgB,gBAAAuB,EAACI,GAAA,EAAQ,SAAQ,UAAU3B,UAAAA,GAAa;AAAA,IACzD,gBAAAuB,EAACK,KACC,WAAS,IACT,SAASpC,GACT,UAAUO,KAAYW,KAAkBJ,EAAYE,WAAW,GAC/D,OAAOF,GACP,SAASf,GACT,SAASG,GACT,UAAAC,GACA,eAAgBkC,CAAAA,MAAc;AAC5B,MAAIxC,MAAU4B,UAAWb,EAAiByB,CAAS,GACnDjC,KAAAA,QAAAA,EAAgBiC;AAAAA,IAClB,GACA,UAAAhC,GACA,UAAUP,GACV,aAAAQ,GACA,aAAY,eAAA,CAAc;AAAA,EAAA,GAE9B;AAEJ;"}
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index13.css');const i=require("react/jsx-runtime"),r=require("../../classix-5H4IWnMA.cjs"),p=require("react"),v=require("../../icons-BROXUtPz.cjs"),f="_nav_1ecsd_3",h="_label_1ecsd_9",m="_horizontal_1ecsd_17",N="_sidebar_1ecsd_27",g="_tabs_1ecsd_73",w="_pills_1ecsd_93",e={nav:f,label:h,horizontal:m,sidebar:N,tabs:g,pills:w},x={default:e.default,pills:e.pills,sidebar:e.sidebar,tabs:e.tabs},j=({className:a,...s})=>i.jsx("span",{className:r.t(a,e.label),...s,"data-component":"navlabel"}),q=({animation:a,children:s,className:c,horizontal:l=!1,variant:n="default",...d})=>{const[b,o]=p.useState(!1),u={"--icon-svg":v.iconSVG("chevron")};return i.jsx("nav",{className:r.t(c,l&&e.horizontal,e.nav,x[n]),"data-animation":a,"data-open":b?"true":"false","data-orientation":l?"horizontal":"vertical",onBlurCapture:t=>{if(n!=="pills"||window.innerWidth>960)return;const _=t.relatedTarget;t.currentTarget.contains(_)||o(!1)},onClick:()=>{n!=="pills"||window.innerWidth>960||o(t=>!t)},style:u,...d,"data-component":"nav",children:s})};exports.Nav=q;exports.NavLabel=j;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index12.css');const i=require("react/jsx-runtime"),r=require("../../classix-5H4IWnMA.cjs"),p=require("react"),h=require("../../icons-Dx0NQYLH.cjs"),v="_nav_mhwz8_3",m="_label_mhwz8_9",f="_horizontal_mhwz8_17",w="_sidebar_mhwz8_27",z="_tabs_mhwz8_73",N="_pills_mhwz8_93",t={nav:v,label:m,horizontal:f,sidebar:w,tabs:z,pills:N},g={default:t.default,pills:t.pills,sidebar:t.sidebar,tabs:t.tabs},x=({className:e,...n})=>i.jsx("span",{className:r.t(e,t.label),...n,"data-component":"navlabel"}),j=({animation:e,children:n,className:c,horizontal:l=!1,variant:s="default",...d})=>{const[b,o]=p.useState(!1),u={"--icon-svg":h.iconSVG("chevron")};return i.jsx("nav",{className:r.t(c,l&&t.horizontal,t.nav,g[s]),"data-animation":e,"data-open":b?"true":"false","data-orientation":l?"horizontal":"vertical",onBlurCapture:a=>{if(s!=="pills"||window.innerWidth>960)return;const _=a.relatedTarget;a.currentTarget.contains(_)||o(!1)},onClick:()=>{s!=="pills"||window.innerWidth>960||o(a=>!a)},style:u,...d,"data-component":"nav",children:n})};exports.Nav=j;exports.NavLabel=x;
2
2
  //# sourceMappingURL=index.cjs.map
@@ -1,11 +1,11 @@
1
1
  import { jsx as i } from "react/jsx-runtime";
2
2
  import { t as r } from "../../classix-DG18itHa.js";
3
- import { useState as f } from "react";
4
- import { i as m } from "../../icons-CH48JQqt.js";
5
- import '../../assets/index13.css';const u = "_nav_1ecsd_3", v = "_label_1ecsd_9", h = "_horizontal_1ecsd_17", w = "_sidebar_1ecsd_27", z = "_tabs_1ecsd_73", N = "_pills_1ecsd_93", a = {
6
- nav: u,
7
- label: v,
8
- horizontal: h,
3
+ import { useState as b } from "react";
4
+ import { i as f } from "../../icons-BFgf_lJN.js";
5
+ import '../../assets/index12.css';const h = "_nav_mhwz8_3", u = "_label_mhwz8_9", v = "_horizontal_mhwz8_17", w = "_sidebar_mhwz8_27", z = "_tabs_mhwz8_73", N = "_pills_mhwz8_93", a = {
6
+ nav: h,
7
+ label: u,
8
+ horizontal: v,
9
9
  sidebar: w,
10
10
  tabs: z,
11
11
  pills: N
@@ -15,26 +15,26 @@ import '../../assets/index13.css';const u = "_nav_1ecsd_3", v = "_label_1ecsd_9"
15
15
  sidebar: a.sidebar,
16
16
  tabs: a.tabs
17
17
  }, T = ({
18
- className: s,
19
- ...n
20
- }) => /* @__PURE__ */ i("span", { className: r(s, a.label), ...n, "data-component": "navlabel" }), V = ({
21
- animation: s,
22
- children: n,
18
+ className: n,
19
+ ...s
20
+ }) => /* @__PURE__ */ i("span", { className: r(n, a.label), ...s, "data-component": "navlabel" }), V = ({
21
+ animation: n,
22
+ children: s,
23
23
  className: c,
24
- horizontal: o = !1,
25
- variant: e = "default",
26
- ...d
24
+ horizontal: e = !1,
25
+ variant: o = "default",
26
+ ...m
27
27
  }) => {
28
- const [p, l] = f(!1), _ = {
29
- "--icon-svg": m("chevron")
28
+ const [p, l] = b(!1), d = {
29
+ "--icon-svg": f("chevron")
30
30
  };
31
- return /* @__PURE__ */ i("nav", { className: r(c, o && a.horizontal, a.nav, g[e]), "data-animation": s, "data-open": p ? "true" : "false", "data-orientation": o ? "horizontal" : "vertical", onBlurCapture: (t) => {
32
- if (e !== "pills" || window.innerWidth > 960) return;
33
- const b = t.relatedTarget;
34
- t.currentTarget.contains(b) || l(!1);
31
+ return /* @__PURE__ */ i("nav", { className: r(c, e && a.horizontal, a.nav, g[o]), "data-animation": n, "data-open": p ? "true" : "false", "data-orientation": e ? "horizontal" : "vertical", onBlurCapture: (t) => {
32
+ if (o !== "pills" || window.innerWidth > 960) return;
33
+ const _ = t.relatedTarget;
34
+ t.currentTarget.contains(_) || l(!1);
35
35
  }, onClick: () => {
36
- e !== "pills" || window.innerWidth > 960 || l((t) => !t);
37
- }, style: _, ...d, "data-component": "nav", children: n });
36
+ o !== "pills" || window.innerWidth > 960 || l((t) => !t);
37
+ }, style: d, ...m, "data-component": "nav", children: s });
38
38
  };
39
39
  export {
40
40
  V as Nav,
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index12.css');const e=require("react/jsx-runtime"),n="_object_xxgm1_1",s={object:n},a=({accessibleLabel:c,url:t,...o})=>e.jsx("object",{"aria-label":c,className:s.object,data:t,type:"application/pdf",...o,"data-component":"objectcomponent",children:t&&e.jsxs(e.Fragment,{children:["We cannot show this file. You can try accessing it directly:",e.jsx("br",{}),e.jsx("a",{href:t,children:t})]})});exports.Object=a;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index11.css');const e=require("react/jsx-runtime"),n="_object_xxgm1_1",s={object:n},a=({accessibleLabel:c,url:t,...o})=>e.jsx("object",{"aria-label":c,className:s.object,data:t,type:"application/pdf",...o,"data-component":"objectcomponent",children:t&&e.jsxs(e.Fragment,{children:["We cannot show this file. You can try accessing it directly:",e.jsx("br",{}),e.jsx("a",{href:t,children:t})]})});exports.Object=a;
2
2
  //# sourceMappingURL=index.cjs.map