@solibo/solibo-ui 1.0.6 → 1.0.9

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 (81) hide show
  1. package/dist/assets/index.css +1 -1
  2. package/dist/assets/index15.css +1 -1
  3. package/dist/assets/index19.css +1 -1
  4. package/dist/assets/index31.css +1 -1
  5. package/dist/assets/index32.css +1 -1
  6. package/dist/assets/index36.css +1 -1
  7. package/dist/assets/index38.css +1 -1
  8. package/dist/assets/index39.css +1 -1
  9. package/dist/assets/index46.css +1 -1
  10. package/dist/assets/index51.css +1 -1
  11. package/dist/assets/index8.css +1 -1
  12. package/dist/assets/index9.css +1 -1
  13. package/dist/components/button/index.cjs +1 -1
  14. package/dist/components/button/index.cjs.map +1 -1
  15. package/dist/components/button/index.js +25 -22
  16. package/dist/components/button/index.js.map +1 -1
  17. package/dist/components/card/index.cjs +1 -1
  18. package/dist/components/card/index.js +45 -45
  19. package/dist/components/checkbox/index.cjs +1 -1
  20. package/dist/components/checkbox/index.js +1 -1
  21. package/dist/components/controls/index.cjs +1 -1
  22. package/dist/components/controls/index.cjs.map +1 -1
  23. package/dist/components/controls/index.js +15 -14
  24. package/dist/components/controls/index.js.map +1 -1
  25. package/dist/components/dialog/index.cjs +1 -1
  26. package/dist/components/dialog/index.cjs.map +1 -1
  27. package/dist/components/dialog/index.js +58 -24
  28. package/dist/components/dialog/index.js.map +1 -1
  29. package/dist/components/dropdown/index.cjs +1 -1
  30. package/dist/components/dropdown/index.js +70 -70
  31. package/dist/components/editor/index.cjs +1 -1
  32. package/dist/components/editor/index.js +1 -1
  33. package/dist/components/icon/index.cjs +1 -1
  34. package/dist/components/icon/index.js +22 -22
  35. package/dist/components/iframe/index.cjs +1 -1
  36. package/dist/components/iframe/index.cjs.map +1 -1
  37. package/dist/components/iframe/index.js +62 -67
  38. package/dist/components/iframe/index.js.map +1 -1
  39. package/dist/components/input/index.cjs +1 -1
  40. package/dist/components/input/index.js +2 -2
  41. package/dist/components/message/index.cjs +1 -1
  42. package/dist/components/message/index.cjs.map +1 -1
  43. package/dist/components/message/index.js +34 -33
  44. package/dist/components/message/index.js.map +1 -1
  45. package/dist/components/nav/index.cjs +1 -1
  46. package/dist/components/nav/index.js +1 -1
  47. package/dist/components/popover/index.cjs +1 -1
  48. package/dist/components/popover/index.cjs.map +1 -1
  49. package/dist/components/popover/index.js +10 -10
  50. package/dist/components/popover/index.js.map +1 -1
  51. package/dist/components/search/index.cjs +1 -1
  52. package/dist/components/search/index.cjs.map +1 -1
  53. package/dist/components/search/index.js +41 -47
  54. package/dist/components/search/index.js.map +1 -1
  55. package/dist/components/select/index.cjs +1 -1
  56. package/dist/components/select/index.js +2 -2
  57. package/dist/components/sortable/index.cjs +1 -1
  58. package/dist/components/sortable/index.cjs.map +1 -1
  59. package/dist/components/sortable/index.js +141 -134
  60. package/dist/components/sortable/index.js.map +1 -1
  61. package/dist/{icons-Dhj9mAkR.js → icons-BFgf_lJN.js} +10 -1
  62. package/dist/icons-BFgf_lJN.js.map +1 -0
  63. package/dist/icons-Dx0NQYLH.cjs +2 -0
  64. package/dist/icons-Dx0NQYLH.cjs.map +1 -0
  65. package/dist/{index-D4LZQ-JF.js → index-BHgGZxsR.js} +2 -2
  66. package/dist/{index-D4LZQ-JF.js.map → index-BHgGZxsR.js.map} +1 -1
  67. package/dist/{index-Ct0mJ-KK.cjs → index-BPIK2dxs.cjs} +2 -2
  68. package/dist/{index-Ct0mJ-KK.cjs.map → index-BPIK2dxs.cjs.map} +1 -1
  69. package/dist/{index-D9Hq7ewF.cjs → index-CEzqxRIu.cjs} +2 -2
  70. package/dist/{index-D9Hq7ewF.cjs.map → index-CEzqxRIu.cjs.map} +1 -1
  71. package/dist/{index-uQRsVtP-.js → index-C_YiNpZP.js} +9 -9
  72. package/dist/{index-uQRsVtP-.js.map → index-C_YiNpZP.js.map} +1 -1
  73. package/dist/index.cjs +1 -1
  74. package/dist/index.d.ts +27 -3
  75. package/dist/index.js +38 -37
  76. package/dist/tokens.css +3 -1
  77. package/dist/tokens.json +46 -19
  78. package/package.json +1 -1
  79. package/dist/icons-BoBeAmLe.cjs +0 -2
  80. package/dist/icons-BoBeAmLe.cjs.map +0 -1
  81. package/dist/icons-Dhj9mAkR.js.map +0 -1
@@ -1,34 +1,34 @@
1
- import { jsx as r } from "react/jsx-runtime";
2
- import { t as c } from "../../classix-DG18itHa.js";
3
- import { i, a as l } from "../../icons-Dhj9mAkR.js";
4
- import '../../assets/index46.css';const _ = "_icon_vhz6u_1", g = "_small_vhz6u_10", u = "_medium_vhz6u_15", d = "_large_vhz6u_20", h = "_danger_vhz6u_25", n = {
1
+ import { jsx as t } from "react/jsx-runtime";
2
+ import { t as r } from "../../classix-DG18itHa.js";
3
+ import { i as c, a as l } from "../../icons-BFgf_lJN.js";
4
+ import '../../assets/index46.css';const _ = "_icon_ihnm9_1", g = "_small_ihnm9_10", d = "_medium_ihnm9_15", h = "_large_ihnm9_20", p = "_danger_ihnm9_25", n = {
5
5
  icon: _,
6
6
  small: g,
7
- medium: u,
8
- large: d,
9
- danger: h,
10
- "gap-right": "_gap-right_vhz6u_29",
11
- "gap-left": "_gap-left_vhz6u_33"
12
- }, p = {
7
+ medium: d,
8
+ large: h,
9
+ danger: p,
10
+ "gap-right": "_gap-right_ihnm9_29",
11
+ "gap-left": "_gap-left_ihnm9_33"
12
+ }, u = {
13
13
  large: n.large,
14
14
  medium: n.medium,
15
15
  small: n.small
16
- }, z = {
16
+ }, f = {
17
17
  danger: n.danger
18
- }, I = ({
19
- fill: s,
18
+ }, k = ({
19
+ fill: a,
20
20
  gap: e = "none",
21
- name: o,
22
- size: t = "medium",
23
- variant: a
21
+ name: s,
22
+ size: o = "medium",
23
+ variant: m
24
24
  }) => {
25
- const m = {
26
- maskImage: i(o, s ?? !1)
25
+ const i = {
26
+ maskImage: c(s, a ?? !1)
27
27
  };
28
- return /* @__PURE__ */ r("span", { "aria-hidden": "true", className: c(e !== "none" && n[`gap-${e}`], p[t], n.icon, a && z[a]), style: m, "data-component": "icon" });
29
- }, j = () => Object.keys(l);
28
+ return /* @__PURE__ */ t("span", { "aria-hidden": "true", className: r(e !== "none" && n[`gap-${e}`], u[o], n.icon, m && f[m]), style: i, "data-component": "icon" });
29
+ }, x = () => Object.keys(l);
30
30
  export {
31
- I as Icon,
32
- j as Icons
31
+ k as Icon,
32
+ x as Icons
33
33
  };
34
34
  //# sourceMappingURL=index.js.map
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index19.css');const s=require("react/jsx-runtime"),F=require("../../classix-5H4IWnMA.cjs"),r=require("react"),S=require("../button/index.cjs"),B=require("../dialog/index.cjs"),G="_wrapper_2h6kn_1",R="_toolbar_2h6kn_6",V="_iframe_2h6kn_16",i={wrapper:G,toolbar:R,"fullscreen-toolbar":"_fullscreen-toolbar_2h6kn_7",iframe:V,"fullscreen-dialog":"_fullscreen-dialog_2h6kn_22","fullscreen-iframe":"_fullscreen-iframe_2h6kn_39"},f=120,$=12e3,L=8,K=({accessibleLabel:h,autoResize:l=!1,className:y,closeFullscreenLabel:q="Close fullscreen",fullscreenLabel:A="View in fullscreen",hasFullscreenView:C=!0,loading:I="lazy",onLoad:_,referrerPolicy:H="no-referrer",sandbox:x="",srcDoc:g,style:E,...k})=>{const w=r.useRef(null),o=r.useRef(null),c=r.useRef(null),[O,b]=r.useState(f),[M,d]=r.useState(!1),p=r.useCallback(()=>{o.current!==null&&(window.cancelAnimationFrame(o.current),o.current=null),c.current!==null&&(window.clearTimeout(c.current),c.current=null)},[]),v=r.useCallback(()=>{if(!l)return;const e=w.current,t=e==null?void 0:e.contentDocument;if(!e||!t)return;const m=e.style.height;try{e.style.height=`${f}px`;const a=t.querySelector("[data-iframe-content]")??t.body,u=a.getBoundingClientRect(),{body:T,documentElement:j}=t,U=Math.min(Math.max(Math.ceil(Math.max(a.scrollHeight,a.offsetHeight,u.height,T.scrollHeight,T.offsetHeight,j.scrollHeight,j.offsetHeight)+L),f),$);b(U)}catch{}finally{e.style.height=m}},[l]),n=r.useCallback(()=>{!l||o.current!==null||(o.current=window.requestAnimationFrame(()=>{o.current=null,v(),c.current!==null&&window.clearTimeout(c.current),c.current=window.setTimeout(()=>{c.current=null,v()},250)}))},[l,v]),N=e=>{var m,a;n();const t=(m=w.current)==null?void 0:m.contentDocument;Array.from((t==null?void 0:t.images)??[]).forEach(u=>{u.complete||(u.addEventListener("load",n,{once:!0}),u.addEventListener("error",n,{once:!0}))}),(a=t==null?void 0:t.fonts)==null||a.ready.then(n).catch(()=>{}),_==null||_(e)};return r.useEffect(()=>{if(l)return p(),b(f),n(),p},[l,p,n,g]),r.useEffect(()=>{var e;if(l)return window.addEventListener("resize",n),(e=window.visualViewport)==null||e.addEventListener("resize",n),()=>{var t;window.removeEventListener("resize",n),(t=window.visualViewport)==null||t.removeEventListener("resize",n)}},[l,n]),s.jsxs("div",{className:i.wrapper,"data-component":"iframe",children:[C&&s.jsx("div",{className:i.toolbar,children:s.jsx(S.Button,{"aria-expanded":M,"aria-haspopup":"dialog",onClick:()=>d(!0),variant:"tertiary",children:A})}),s.jsx("iframe",{...k,className:F.t(i.iframe,y),loading:I,onLoad:N,ref:w,referrerPolicy:H,sandbox:x,srcDoc:g,style:l?{...E,height:O,minHeight:f}:E,title:h}),M&&s.jsxs(B.Dialog,{"aria-label":`${h} fullscreen`,className:i["fullscreen-dialog"],onKeyDown:e=>{e.key==="Escape"&&d(!1)},open:!0,setOpen:d,children:[s.jsx("div",{className:i["fullscreen-toolbar"],children:s.jsx(S.Button,{autoFocus:!0,onClick:()=>d(!1),children:q})}),s.jsx("iframe",{...k,className:F.t(i.iframe,i["fullscreen-iframe"],y),loading:"eager",referrerPolicy:H,sandbox:x,srcDoc:g,title:`${h} fullscreen`})]})]})};exports.Iframe=K;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index19.css');const r=require("react/jsx-runtime"),S=require("../../classix-5H4IWnMA.cjs"),s=require("react"),A=require("../button/index.cjs"),N=require("../controls/index.cjs"),z=require("../dialog/index.cjs"),G=require("../header/index.cjs"),R="_wrapper_29z62_1",V="_toolbar_29z62_6",$="_iframe_29z62_12",a={wrapper:R,toolbar:V,iframe:$,"fullscreen-iframe":"_fullscreen-iframe_29z62_18"},d=120,L=12e3,X=8,J=({accessibleLabel:f,autoResize:l=!1,className:v,closeFullscreenLabel:F="Close fullscreen",fullscreenLabel:I="View in fullscreen",hasFullscreenView:O=!0,loading:b="lazy",onLoad:h,referrerPolicy:H="no-referrer",sandbox:y="",srcDoc:w,style:E,...j})=>{const _=s.useRef(null),c=s.useRef(null),i=s.useRef(null),[k,M]=s.useState(d),[T,p]=s.useState(!1),g=s.useCallback(()=>{c.current!==null&&(window.cancelAnimationFrame(c.current),c.current=null),i.current!==null&&(window.clearTimeout(i.current),i.current=null)},[]),x=s.useCallback(()=>{if(!l)return;const t=_.current,e=t==null?void 0:t.contentDocument;if(!t||!e)return;const m=t.style.height;try{t.style.height=`${d}px`;const o=e.querySelector("[data-iframe-content]")??e.body,u=o.getBoundingClientRect(),{body:q,documentElement:C}=e,B=Math.min(Math.max(Math.ceil(Math.max(o.scrollHeight,o.offsetHeight,u.height,q.scrollHeight,q.offsetHeight,C.scrollHeight,C.offsetHeight)+X),d),L);M(B)}catch{}finally{t.style.height=m}},[l]),n=s.useCallback(()=>{!l||c.current!==null||(c.current=window.requestAnimationFrame(()=>{c.current=null,x(),i.current!==null&&window.clearTimeout(i.current),i.current=window.setTimeout(()=>{i.current=null,x()},250)}))},[l,x]),U=t=>{var m,o;n();const e=(m=_.current)==null?void 0:m.contentDocument;Array.from((e==null?void 0:e.images)??[]).forEach(u=>{u.complete||(u.addEventListener("load",n,{once:!0}),u.addEventListener("error",n,{once:!0}))}),(o=e==null?void 0:e.fonts)==null||o.ready.then(n).catch(()=>{}),h==null||h(t)};return s.useEffect(()=>{if(l)return g(),M(d),n(),g},[l,g,n,w]),s.useEffect(()=>{var t;if(l)return window.addEventListener("resize",n),(t=window.visualViewport)==null||t.addEventListener("resize",n),()=>{var e;window.removeEventListener("resize",n),(e=window.visualViewport)==null||e.removeEventListener("resize",n)}},[l,n]),r.jsxs("div",{className:a.wrapper,"data-component":"iframe",children:[O&&r.jsx("div",{className:a.toolbar,children:r.jsx(A.Button,{"aria-expanded":T,"aria-haspopup":"dialog",onClick:()=>p(!0),variant:"tertiary",children:I})}),r.jsx("iframe",{...j,className:S.t(a.iframe,v),loading:b,onLoad:U,ref:_,referrerPolicy:H,sandbox:y,srcDoc:w,style:l?{...E,height:k,minHeight:d}:E,title:f}),T&&r.jsx(z.Dialog,{"aria-label":`${f} fullscreen`,controls:r.jsx(N.Controls,{children:r.jsx(A.Button,{onClick:()=>p(!1),children:F})}),fullscreen:!0,header:r.jsx(G.Header,{children:r.jsx("h2",{children:f})}),open:!0,setOpen:p,children:r.jsx("iframe",{...j,className:S.t(a.iframe,a["fullscreen-iframe"],v),loading:"eager",referrerPolicy:H,sandbox:y,srcDoc:w,title:`${f} fullscreen`})})]})};exports.Iframe=J;
2
2
  //# sourceMappingURL=index.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","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.cjs","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 { Controls } from '../controls';\nimport { Dialog } from '../dialog';\nimport { Header } from '../header';\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 controls={\n <Controls>\n <Button onClick={() => setIsFullscreenOpen(false)}>{closeFullscreenLabel}</Button>\n </Controls>\n }\n fullscreen\n header={\n <Header>\n <h2>{accessibleLabel}</h2>\n </Header>\n }\n open\n setOpen={setIsFullscreenOpen}\n >\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","Dialog","Controls","Header"],"mappings":"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"}
@@ -1,93 +1,88 @@
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 q, jsx as l } from "react/jsx-runtime";
2
+ import { t as O } from "../../classix-DG18itHa.js";
3
+ import { useRef as H, useState as S, useCallback as v, useEffect as U } from "react";
4
+ import { Button as N } from "../button/index.js";
5
+ import { Controls as b } from "../controls/index.js";
5
6
  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,
7
+ import { Header as X } from "../header/index.js";
8
+ import '../../assets/index19.css';const J = "_wrapper_29z62_1", K = "_toolbar_29z62_6", Q = "_iframe_29z62_12", a = {
9
+ wrapper: J,
10
+ toolbar: K,
11
+ iframe: Q,
12
+ "fullscreen-iframe": "_fullscreen-iframe_29z62_18"
13
+ }, u = 120, W = 12e3, Y = 8, ne = ({
14
+ accessibleLabel: f,
15
15
  autoResize: n = !1,
16
- className: y,
17
- closeFullscreenLabel: U = "Close fullscreen",
18
- fullscreenLabel: B = "View in fullscreen",
19
- hasFullscreenView: G = !0,
20
- loading: V = "lazy",
21
- onLoad: h,
22
- referrerPolicy: E = "no-referrer",
23
- sandbox: k = "",
24
- srcDoc: p,
25
- style: M,
26
- ...T
16
+ className: E,
17
+ closeFullscreenLabel: k = "Close fullscreen",
18
+ fullscreenLabel: z = "View in fullscreen",
19
+ hasFullscreenView: B = !0,
20
+ loading: G = "lazy",
21
+ onLoad: d,
22
+ referrerPolicy: y = "no-referrer",
23
+ sandbox: M = "",
24
+ srcDoc: h,
25
+ style: T,
26
+ ...A
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);
30
- }, []), _ = H(() => {
28
+ const p = H(null), o = H(null), i = H(null), [V, F] = S(u), [x, w] = S(!1), g = v(() => {
29
+ o.current !== null && (window.cancelAnimationFrame(o.current), o.current = null), i.current !== null && (window.clearTimeout(i.current), i.current = null);
30
+ }, []), _ = v(() => {
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 = p.current, e = r == null ? void 0 : r.contentDocument;
33
+ if (!r || !e) return;
34
+ const m = 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, s = c.getBoundingClientRect(), {
38
+ body: C,
39
+ documentElement: I
40
+ } = e, j = Math.min(Math.max(Math.ceil(Math.max(c.scrollHeight, c.offsetHeight, s.height, C.scrollHeight, C.offsetHeight, I.scrollHeight, I.offsetHeight) + Y), u), W);
41
+ F(j);
42
42
  } catch {
43
43
  } finally {
44
- e.style.height = m;
44
+ r.style.height = m;
45
45
  }
46
- }, [n]), t = H(() => {
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, _();
46
+ }, [n]), t = v(() => {
47
+ !n || o.current !== null || (o.current = window.requestAnimationFrame(() => {
48
+ o.current = null, _(), i.current !== null && window.clearTimeout(i.current), i.current = window.setTimeout(() => {
49
+ i.current = null, _();
50
50
  }, 250);
51
51
  }));
52
- }, [n, _]), j = (e) => {
52
+ }, [n, _]), $ = (r) => {
53
53
  var m, 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) => {
57
- a.complete || (a.addEventListener("load", t, {
55
+ const e = (m = p.current) == null ? void 0 : m.contentDocument;
56
+ Array.from((e == null ? void 0 : e.images) ?? []).forEach((s) => {
57
+ s.complete || (s.addEventListener("load", t, {
58
58
  once: !0
59
- }), a.addEventListener("error", t, {
59
+ }), s.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 U(() => {
66
66
  if (n)
67
67
  return g(), F(u), t(), g;
68
- }, [n, g, t, p]), C(() => {
69
- var e;
68
+ }, [n, g, t, h]), U(() => {
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,
79
- height: $,
75
+ }, [n, t]), /* @__PURE__ */ q("div", { className: a.wrapper, "data-component": "iframe", children: [
76
+ B && /* @__PURE__ */ l("div", { className: a.toolbar, children: /* @__PURE__ */ l(N, { "aria-expanded": x, "aria-haspopup": "dialog", onClick: () => w(!0), variant: "tertiary", children: z }) }),
77
+ /* @__PURE__ */ l("iframe", { ...A, className: O(a.iframe, E), loading: G, onLoad: $, ref: p, referrerPolicy: y, sandbox: M, srcDoc: h, style: n ? {
78
+ ...T,
79
+ height: V,
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` })
87
- ] })
81
+ } : T, title: f }),
82
+ x && /* @__PURE__ */ l(L, { "aria-label": `${f} fullscreen`, controls: /* @__PURE__ */ l(b, { children: /* @__PURE__ */ l(N, { onClick: () => w(!1), children: k }) }), fullscreen: !0, header: /* @__PURE__ */ l(X, { children: /* @__PURE__ */ l("h2", { children: f }) }), open: !0, setOpen: w, children: /* @__PURE__ */ l("iframe", { ...A, className: O(a.iframe, a["fullscreen-iframe"], E), loading: "eager", referrerPolicy: y, sandbox: M, srcDoc: h, title: `${f} fullscreen` }) })
88
83
  ] });
89
84
  };
90
85
  export {
91
- R as Iframe
86
+ ne as Iframe
92
87
  };
93
88
  //# sourceMappingURL=index.js.map
@@ -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 { Controls } from '../controls';\nimport { Dialog } from '../dialog';\nimport { Header } from '../header';\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 controls={\n <Controls>\n <Button onClick={() => setIsFullscreenOpen(false)}>{closeFullscreenLabel}</Button>\n </Controls>\n }\n fullscreen\n header={\n <Header>\n <h2>{accessibleLabel}</h2>\n </Header>\n }\n open\n setOpen={setIsFullscreenOpen}\n >\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","Dialog","Controls","Header"],"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-BoBeAmLe.cjs");const e=require("../../index-D9Hq7ewF.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-Dhj9mAkR.js";
5
- import { I as a } from "../../index-D4LZQ-JF.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"),q=require("../icon/index.cjs"),j="_message_q630z_1",h="_timestamp_q630z_81",f="_attachments_q630z_86",w="_preview_q630z_105",s={"message-group":"_message-group_q630z_1",message:j,timestamp:h,attachments:f,preview:w},z=({appearance:m="default",attachments:i,author:a,authorColor:r,authorImageUrl:o,authorRole:l,content:d,iconName:g="info",id:_,preview:p,timestamp:c,timestampText:u,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:l}),e.jsxs("div",{className:v.t(s.message,p&&s.preview),"data-appearance":m,"data-id":_,"data-type":t,children:[t=="system"&&e.jsx(q.Icon,{fill:!0,gap:"right",name:g}),d]}),i&&e.jsx("div",{className:s.attachments,children:i}),n&&e.jsx("time",{className:s.timestamp,dateTime:n.toISOString(),children:u??n.toLocaleString()})]})};exports.Message=z;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index15.css');const e=require("react/jsx-runtime"),x=require("../../classix-5H4IWnMA.cjs"),j=require("../avatar/index.cjs"),h=require("../icon/index.cjs"),f="_message_8sz6c_1",w="_timestamp_8sz6c_87",z="_attachments_8sz6c_92",S="_preview_8sz6c_111",t={"message-group":"_message-group_8sz6c_1",message:f,timestamp:w,attachments:z,preview:S},b=({appearance:o="default",attachments:c,author:a,authorColor:r,authorImageUrl:l,authorRole:d,content:g,iconName:_="info",id:p,preview:u,timestamp:i,timestampText:v,type:s="default"})=>{const n=i?new Date(i):void 0,m=n?e.jsx("time",{className:t.timestamp,dateTime:n.toISOString(),children:v??n.toLocaleString()}):null;return e.jsxs("div",{className:t["message-group"],"data-message-type":s,"data-component":"message",children:[a&&e.jsx(j.Avatar,{accessibleLabel:a,color:r,imageUrl:l,name:a,role:d}),s==="system"&&m,e.jsxs("div",{className:x.t(t.message,u&&t.preview),"data-appearance":o,"data-id":p,"data-type":s,children:[s=="system"&&e.jsx(h.Icon,{fill:!0,gap:"right",name:_}),g]}),c&&e.jsx("div",{className:t.attachments,children:c}),s!=="system"&&m]})};exports.Message=b;
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 h } from "../../classix-DG18itHa.js";
3
- import { Avatar as q } from "../avatar/index.js";
4
- import { Icon as u } from "../icon/index.js";
5
- import '../../assets/index15.css';const w = "_message_q630z_1", z = "_timestamp_q630z_81", N = "_attachments_q630z_86", x = "_preview_q630z_105", e = {
6
- "message-group": "_message-group_q630z_1",
7
- message: w,
8
- timestamp: z,
9
- attachments: N,
10
- preview: x
11
- }, I = ({
12
- appearance: c = "default",
13
- attachments: i,
14
- author: s,
15
- authorColor: n,
16
- authorImageUrl: l,
17
- authorRole: p,
18
- content: d,
19
- iconName: g = "info",
20
- id: _,
21
- preview: v,
22
- timestamp: r,
23
- timestampText: f,
24
- type: t = "default"
1
+ import { jsx as a, jsxs as r } from "react/jsx-runtime";
2
+ import { t as u } from "../../classix-DG18itHa.js";
3
+ import { Avatar as w } from "../avatar/index.js";
4
+ import { Icon as z } from "../icon/index.js";
5
+ import '../../assets/index15.css';const N = "_message_8sz6c_1", x = "_timestamp_8sz6c_87", S = "_attachments_8sz6c_92", b = "_preview_8sz6c_111", s = {
6
+ "message-group": "_message-group_8sz6c_1",
7
+ message: N,
8
+ timestamp: x,
9
+ attachments: S,
10
+ preview: b
11
+ }, A = ({
12
+ appearance: n = "default",
13
+ attachments: c,
14
+ author: t,
15
+ authorColor: l,
16
+ authorImageUrl: d,
17
+ authorRole: g,
18
+ content: p,
19
+ iconName: _ = "info",
20
+ id: v,
21
+ preview: f,
22
+ timestamp: i,
23
+ timestampText: h,
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(q, { accessibleLabel: s, color: n, imageUrl: l, name: s, role: p }),
29
- /* @__PURE__ */ o("div", { className: h(e.message, v && e.preview), "data-appearance": c, "data-id": _, "data-type": t, children: [
30
- t == "system" && /* @__PURE__ */ a(u, { fill: !0, gap: "right", name: g }),
31
- d
26
+ const m = i ? new Date(i) : void 0, o = m ? /* @__PURE__ */ a("time", { className: s.timestamp, dateTime: m.toISOString(), children: h ?? m.toLocaleString() }) : null;
27
+ return /* @__PURE__ */ r("div", { className: s["message-group"], "data-message-type": e, "data-component": "message", children: [
28
+ t && /* @__PURE__ */ a(w, { accessibleLabel: t, color: l, imageUrl: d, name: t, role: g }),
29
+ e === "system" && o,
30
+ /* @__PURE__ */ r("div", { className: u(s.message, f && s.preview), "data-appearance": n, "data-id": v, "data-type": e, children: [
31
+ e == "system" && /* @__PURE__ */ a(z, { 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: f ?? m.toLocaleString() })
34
+ c && /* @__PURE__ */ a("div", { className: s.attachments, children: c }),
35
+ e !== "system" && o
35
36
  ] });
36
37
  };
37
38
  export {
38
- I as Message
39
+ A 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/index12.css');const i=require("react/jsx-runtime"),r=require("../../classix-5H4IWnMA.cjs"),p=require("react"),h=require("../../icons-BoBeAmLe.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;
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,7 +1,7 @@
1
1
  import { jsx as i } from "react/jsx-runtime";
2
2
  import { t as r } from "../../classix-DG18itHa.js";
3
3
  import { useState as b } from "react";
4
- import { i as f } from "../../icons-Dhj9mAkR.js";
4
+ import { i as f } from "../../icons-BFgf_lJN.js";
5
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
6
  nav: h,
7
7
  label: u,
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index17.css');const w=require("react/jsx-runtime"),C=require("../../classix-5H4IWnMA.cjs"),o=require("react"),K=require("react-dom"),O=require("../button/index.cjs"),H="_popover_1szho_1",N="_inline_1szho_6",W="_below_1szho_38",M="_above_1szho_43",U="_left_1szho_53",X="_right_1szho_58",Y="_trigger_1szho_63",s={popover:H,inline:N,"popover-panel":"_popover-panel_1szho_21",below:W,above:M,"inline-panel":"_inline-panel_1szho_48",left:U,right:X,trigger:Y,"inline-trigger":"_inline-trigger_1szho_77"},G=({children:m,inline:n=!1,position:p="left",triggerAccessibleLabel:L,triggerAriaHasPopup:F,triggerButtonContent:z})=>{var T;const P=o.useRef(null),R=o.useRef(void 0),b=o.useRef(null),D=o.useId(),l=o.useRef(null),[t,x]=o.useState(!1),[d,k]=o.useState(!1),g=p==="auto"?"right":p,[v,E]=o.useState(g),h=({initialFocus:e}={})=>{R.current=e,k(!1),E(g),x(!0)},c=o.useCallback(({restoreFocus:e=!0}={})=>{var a;x(!1),e&&((a=l.current)==null||a.focus())},[]),q=e=>{t&&e.key==="Escape"&&c()},A=e=>{if(!t){if(n&&(e.key==="Enter"||e.key===" ")){e.preventDefault(),h();return}if(e.key==="ArrowDown"){e.preventDefault(),h({initialFocus:"first"});return}e.key==="ArrowUp"&&(e.preventDefault(),h({initialFocus:"last"}))}};o.useEffect(()=>{if(!t)return;const e=a=>{var r,_;const f=a.target;(r=P.current)!=null&&r.contains(f)||(_=b.current)!=null&&_.contains(f)||c({restoreFocus:!1})};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[c,t]);const i=o.useCallback(()=>{const e=b.current,a=l.current;if(!e||!a)return;const f=e.getBoundingClientRect(),r=a.getBoundingClientRect(),_=r.top,j=window.innerHeight-r.bottom;k(f.height>j&&_>j),E(p==="auto"&&f.width>window.innerWidth-r.left&&r.right>window.innerWidth-r.left?"left":g)},[p,g]);o.useLayoutEffect(()=>{if(t)return i(),window.addEventListener("resize",i),window.addEventListener("scroll",i,!0),()=>{window.removeEventListener("resize",i),window.removeEventListener("scroll",i,!0)}},[t,i]);const S=e=>{n&&e.preventDefault(),e.stopPropagation(),t?c({restoreFocus:!1}):h()},B={"aria-controls":t?D:void 0,"aria-expanded":t,"aria-haspopup":F,"aria-label":L,className:n?s["inline-trigger"]:s.trigger,onClick:S,onKeyDown:A},u=n?(T=l.current)==null?void 0:T.getBoundingClientRect():void 0,I=[v==="left"?"translateX(-100%)":"",d?"translateY(calc(-100% - var(--shape-spacing-2xs)))":""].filter(Boolean).join(" "),y=t?w.jsx("div",{className:C.t(s["popover-panel"],s[d?"above":"below"],n&&s["inline-panel"],!n&&s[v]),"data-horizontal-placement":v,"data-placement":d?"above":"below",id:D,ref:b,style:u?{left:v==="left"?u.right:u.left,position:"fixed",top:d?u.top:u.bottom,transform:I||void 0}:void 0,children:typeof m=="function"?m({close:c,initialFocus:R.current,isOpen:t}):m}):null;return w.jsxs("div",{className:C.t(s.popover,n&&s.inline),"data-open":t,onKeyDown:q,onClick:e=>{n&&e.preventDefault(),e.stopPropagation()},ref:P,"data-component":"popover",children:[n?w.jsx("span",{...B,ref:l,role:"button",tabIndex:0,children:z}):w.jsx(O.Button,{...B,ref:l,variant:"secondary",children:z}),n&&y&&typeof document<"u"?K.createPortal(y,document.body):y]})};exports.Popover=G;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index17.css');const m=require("react/jsx-runtime"),C=require("../../classix-5H4IWnMA.cjs"),o=require("react"),K=require("react-dom"),O=require("../button/index.cjs"),H="_popover_1szho_1",N="_inline_1szho_6",W="_below_1szho_38",M="_above_1szho_43",U="_left_1szho_53",X="_right_1szho_58",Y="_trigger_1szho_63",s={popover:H,inline:N,"popover-panel":"_popover-panel_1szho_21",below:W,above:M,"inline-panel":"_inline-panel_1szho_48",left:U,right:X,trigger:Y,"inline-trigger":"_inline-trigger_1szho_77"},G=({children:w,inline:n=!1,position:f="left",triggerAccessibleLabel:L,triggerAriaHasPopup:F,triggerButtonContent:y})=>{var T;const P=o.useRef(null),R=o.useRef(void 0),b=o.useRef(null),D=o.useId(),l=o.useRef(null),[t,x]=o.useState(!1),[d,k]=o.useState(!1),g=f==="auto"?"right":f,[v,E]=o.useState(g),h=({initialFocus:e}={})=>{R.current=e,k(!1),E(g),x(!0)},c=o.useCallback(({restoreFocus:e=!0}={})=>{var i;x(!1),e&&((i=l.current)==null||i.focus())},[]),q=e=>{t&&e.key==="Escape"&&c()},A=e=>{if(!t){if(n&&(e.key==="Enter"||e.key===" ")){e.preventDefault(),h();return}if(e.key==="ArrowDown"){e.preventDefault(),h({initialFocus:"first"});return}e.key==="ArrowUp"&&(e.preventDefault(),h({initialFocus:"last"}))}};o.useEffect(()=>{if(!t)return;const e=i=>{var r,_;const p=i.target;(r=P.current)!=null&&r.contains(p)||(_=b.current)!=null&&_.contains(p)||c({restoreFocus:!1})};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[c,t]);const a=o.useCallback(()=>{const e=b.current,i=l.current;if(!e||!i)return;const p=e.getBoundingClientRect(),r=i.getBoundingClientRect(),_=r.top,j=window.innerHeight-r.bottom;k(p.height>j&&_>j),E(f==="auto"&&p.width>window.innerWidth-r.left&&r.right>window.innerWidth-r.left?"left":g)},[f,g]);o.useLayoutEffect(()=>{if(t)return a(),window.addEventListener("resize",a),window.addEventListener("scroll",a,!0),()=>{window.removeEventListener("resize",a),window.removeEventListener("scroll",a,!0)}},[t,a]);const S=e=>{n&&e.preventDefault(),e.stopPropagation(),t?c({restoreFocus:!1}):h()},B={"aria-controls":t?D:void 0,"aria-expanded":t,"aria-haspopup":F,"aria-label":L,className:n?s["inline-trigger"]:s.trigger,onClick:S,onKeyDown:A},u=n?(T=l.current)==null?void 0:T.getBoundingClientRect():void 0,I=[v==="left"?"translateX(-100%)":"",d?"translateY(calc(-100% - var(--shape-spacing-2xs)))":""].filter(Boolean).join(" "),z=t?m.jsx("div",{className:C.t(s["popover-panel"],s[d?"above":"below"],n&&s["inline-panel"],!n&&s[v]),"data-horizontal-placement":v,"data-placement":d?"above":"below",id:D,ref:b,style:u?{left:v==="left"?u.right:u.left,position:"fixed",top:d?u.top:u.bottom,transform:I||void 0}:void 0,children:typeof w=="function"?w({close:c,initialFocus:R.current,isOpen:t}):w}):null;return m.jsxs("div",{className:C.t(s.popover,n&&s.inline),"data-open":t,onKeyDown:q,onClick:e=>{n&&e.preventDefault(),e.stopPropagation()},ref:P,"data-component":"popover",children:[n?m.jsx("span",{...B,ref:l,role:"button",tabIndex:0,children:y}):m.jsx(O.Button,{...B,ref:l,variant:"simple",children:y}),n&&z&&typeof document<"u"?K.createPortal(z,document.body):z]})};exports.Popover=G;
2
2
  //# sourceMappingURL=index.cjs.map