@solibo/solibo-ui 1.0.11 → 1.0.13

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 (78) hide show
  1. package/dist/assets/index12.css +1 -1
  2. package/dist/assets/index15.css +1 -1
  3. package/dist/assets/index17.css +1 -1
  4. package/dist/assets/index20.css +1 -1
  5. package/dist/assets/index28.css +1 -1
  6. package/dist/assets/index34.css +1 -1
  7. package/dist/assets/index36.css +1 -1
  8. package/dist/assets/index39.css +1 -1
  9. package/dist/assets/index4.css +1 -1
  10. package/dist/assets/index41.css +1 -1
  11. package/dist/assets/index47.css +1 -1
  12. package/dist/assets/index9.css +1 -1
  13. package/dist/components/badge/index.cjs +1 -1
  14. package/dist/components/badge/index.js +37 -37
  15. package/dist/components/checkbox/index.cjs +1 -1
  16. package/dist/components/checkbox/index.cjs.map +1 -1
  17. package/dist/components/checkbox/index.js +1 -1
  18. package/dist/components/checkbox/index.js.map +1 -1
  19. package/dist/components/chip/index.cjs +1 -1
  20. package/dist/components/chip/index.cjs.map +1 -1
  21. package/dist/components/chip/index.js +21 -14
  22. package/dist/components/chip/index.js.map +1 -1
  23. package/dist/components/controls/index.cjs +1 -1
  24. package/dist/components/controls/index.cjs.map +1 -1
  25. package/dist/components/controls/index.js +20 -20
  26. package/dist/components/controls/index.js.map +1 -1
  27. package/dist/components/dropdown/index.cjs +1 -1
  28. package/dist/components/dropdown/index.js +65 -65
  29. package/dist/components/editor/index.cjs +16 -16
  30. package/dist/components/editor/index.js +4 -4
  31. package/dist/components/header/index.cjs +1 -1
  32. package/dist/components/header/index.js +9 -9
  33. package/dist/components/icon/index.cjs +1 -1
  34. package/dist/components/icon/index.js +1 -1
  35. package/dist/components/input/index.cjs +1 -1
  36. package/dist/components/input/index.js +2 -2
  37. package/dist/components/menu/index.cjs +1 -1
  38. package/dist/components/menu/index.cjs.map +1 -1
  39. package/dist/components/menu/index.js +70 -58
  40. package/dist/components/menu/index.js.map +1 -1
  41. package/dist/components/message/index.cjs +1 -1
  42. package/dist/components/message/index.js +21 -21
  43. package/dist/components/nav/index.cjs +1 -1
  44. package/dist/components/nav/index.js +19 -19
  45. package/dist/components/popover/index.cjs +1 -1
  46. package/dist/components/popover/index.cjs.map +1 -1
  47. package/dist/components/popover/index.js +79 -80
  48. package/dist/components/popover/index.js.map +1 -1
  49. package/dist/components/search/index.cjs +1 -1
  50. package/dist/components/search/index.cjs.map +1 -1
  51. package/dist/components/search/index.js +75 -45
  52. package/dist/components/search/index.js.map +1 -1
  53. package/dist/components/select/index.cjs +1 -1
  54. package/dist/components/select/index.js +2 -2
  55. package/dist/components/toasts/index.cjs +1 -1
  56. package/dist/components/toasts/index.js +4 -4
  57. package/dist/{icons-BFgf_lJN.js → icons-Bq3diTRm.js} +11 -2
  58. package/dist/icons-Bq3diTRm.js.map +1 -0
  59. package/dist/icons-ovA21Oao.cjs +2 -0
  60. package/dist/icons-ovA21Oao.cjs.map +1 -0
  61. package/dist/index-BcY9DZZ8.cjs +2 -0
  62. package/dist/{index-CEzqxRIu.cjs.map → index-BcY9DZZ8.cjs.map} +1 -1
  63. package/dist/{index-BPIK2dxs.cjs → index-CjI8oRpS.cjs} +2 -2
  64. package/dist/{index-BPIK2dxs.cjs.map → index-CjI8oRpS.cjs.map} +1 -1
  65. package/dist/index-ClZkChEh.js +73 -0
  66. package/dist/{index-BHgGZxsR.js.map → index-ClZkChEh.js.map} +1 -1
  67. package/dist/{index-C_YiNpZP.js → index-DwzLUapm.js} +2 -2
  68. package/dist/{index-C_YiNpZP.js.map → index-DwzLUapm.js.map} +1 -1
  69. package/dist/index.cjs +1 -1
  70. package/dist/index.d.ts +46 -16
  71. package/dist/index.js +2 -2
  72. package/dist/tokens.json +1 -1
  73. package/package.json +1 -1
  74. package/dist/icons-BFgf_lJN.js.map +0 -1
  75. package/dist/icons-Dx0NQYLH.cjs +0 -2
  76. package/dist/icons-Dx0NQYLH.cjs.map +0 -1
  77. package/dist/index-BHgGZxsR.js +0 -73
  78. package/dist/index-CEzqxRIu.cjs +0 -2
@@ -10,7 +10,7 @@ import { File as I0 } from "../file/index.js";
10
10
  import { Button as $e } from "../button/index.js";
11
11
  import { Dropzone as P0 } from "../dropzone/index.js";
12
12
  import { Icon as We } from "../icon/index.js";
13
- import { I as Xs } from "../../index-BHgGZxsR.js";
13
+ import { I as Xs } from "../../index-ClZkChEh.js";
14
14
  import { Toolbar as D0 } from "../toolbar/index.js";
15
15
  function yn(n) {
16
16
  return {};
@@ -11405,17 +11405,17 @@ function ts(n) {
11405
11405
  return !1;
11406
11406
  }
11407
11407
  }
11408
- const Q1 = "_field_12mt8_3", Y1 = "_editor_12mt8_8", em = "_invalid_12mt8_31", tm = "_error_12mt8_35", nm = "_content_12mt8_41", rm = "_files_12mt8_45", um = "_placeholder_12mt8_57", im = "_fill_12mt8_65", sm = "_meta_12mt8_88", om = "_active_12mt8_97", am = "_submit_12mt8_109", lm = "_bold_12mt8_113", cm = "_italic_12mt8_117", fm = "_link_12mt8_121", dm = "_list_12mt8_127", hm = "_paragraph_12mt8_128", ce = {
11408
+ const Q1 = "_field_qqi01_3", Y1 = "_editor_qqi01_8", em = "_invalid_qqi01_31", tm = "_error_qqi01_35", nm = "_content_qqi01_41", rm = "_files_qqi01_45", um = "_placeholder_qqi01_57", im = "_fill_qqi01_65", sm = "_meta_qqi01_88", om = "_active_qqi01_97", am = "_submit_qqi01_109", lm = "_bold_qqi01_113", cm = "_italic_qqi01_117", fm = "_link_qqi01_121", dm = "_list_qqi01_127", hm = "_paragraph_qqi01_128", ce = {
11409
11409
  field: Q1,
11410
11410
  editor: Y1,
11411
11411
  invalid: em,
11412
11412
  error: tm,
11413
11413
  content: nm,
11414
11414
  files: rm,
11415
- "has-files": "_has-files_12mt8_53",
11415
+ "has-files": "_has-files_qqi01_53",
11416
11416
  placeholder: um,
11417
11417
  fill: im,
11418
- "fill-editor": "_fill-editor_12mt8_72",
11418
+ "fill-editor": "_fill-editor_qqi01_72",
11419
11419
  meta: sm,
11420
11420
  active: om,
11421
11421
  submit: am,
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index20.css');const s=require("react/jsx-runtime"),o=require("../../classix-5H4IWnMA.cjs"),c="_header_jyftr_1",i="_capitalize_jyftr_86",n="_jumbo_jyftr_98",e={header:c,capitalize:i,jumbo:n},u={default:e.default,jumbo:e.jumbo},d=({capitalize:t=!1,children:a,variant:r="default"})=>s.jsx("header",{className:o.t(e.header,u[r],t&&e.capitalize),"data-component":"header",children:a});exports.Header=d;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index20.css');const o=require("react/jsx-runtime"),r=require("../../classix-5H4IWnMA.cjs"),n="_header_17kn9_1",c="_capitalize_17kn9_80",i="_jumbo_17kn9_92",e={header:n,capitalize:c,jumbo:i},u={default:e.default,jumbo:e.jumbo},d=({capitalize:a=!1,children:t,variant:s="default"})=>o.jsx("header",{className:r.t(e.header,u[s],a&&e.capitalize),"data-component":"header",children:t});exports.Header=d;
2
2
  //# sourceMappingURL=index.cjs.map
@@ -1,18 +1,18 @@
1
1
  import { jsx as r } from "react/jsx-runtime";
2
- import { t as s } from "../../classix-DG18itHa.js";
3
- import '../../assets/index20.css';const c = "_header_jyftr_1", d = "_capitalize_jyftr_86", i = "_jumbo_jyftr_98", e = {
4
- header: c,
5
- capitalize: d,
6
- jumbo: i
7
- }, m = {
2
+ import { t as n } from "../../classix-DG18itHa.js";
3
+ import '../../assets/index20.css';const s = "_header_17kn9_1", c = "_capitalize_17kn9_80", d = "_jumbo_17kn9_92", e = {
4
+ header: s,
5
+ capitalize: c,
6
+ jumbo: d
7
+ }, i = {
8
8
  default: e.default,
9
9
  jumbo: e.jumbo
10
- }, f = ({
10
+ }, u = ({
11
11
  capitalize: a = !1,
12
12
  children: t,
13
13
  variant: o = "default"
14
- }) => /* @__PURE__ */ r("header", { className: s(e.header, m[o], a && e.capitalize), "data-component": "header", children: t });
14
+ }) => /* @__PURE__ */ r("header", { className: n(e.header, i[o], a && e.capitalize), "data-component": "header", children: t });
15
15
  export {
16
- f as Header
16
+ u as Header
17
17
  };
18
18
  //# sourceMappingURL=index.js.map
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index46.css');const m=require("react/jsx-runtime"),r=require("../../classix-5H4IWnMA.cjs"),t=require("../../icons-Dx0NQYLH.cjs"),l="_icon_ihnm9_1",_="_small_ihnm9_10",g="_medium_ihnm9_15",d="_large_ihnm9_20",u="_danger_ihnm9_25",n={icon:l,small:_,medium:g,large:d,danger:u,"gap-right":"_gap-right_ihnm9_29","gap-left":"_gap-left_ihnm9_33"},h={large:n.large,medium:n.medium,small:n.small},p={danger:n.danger},y=({fill:i,gap:e="none",name:o,size:a="medium",variant:s})=>{const c={maskImage:t.iconSVG(o,i??!1)};return m.jsx("span",{"aria-hidden":"true",className:r.t(e!=="none"&&n[`gap-${e}`],h[a],n.icon,s&&p[s]),style:c,"data-component":"icon"})},I=()=>Object.keys(t.iconPaths);exports.Icon=y;exports.Icons=I;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index46.css');const m=require("react/jsx-runtime"),r=require("../../classix-5H4IWnMA.cjs"),t=require("../../icons-ovA21Oao.cjs"),l="_icon_ihnm9_1",_="_small_ihnm9_10",g="_medium_ihnm9_15",d="_large_ihnm9_20",u="_danger_ihnm9_25",n={icon:l,small:_,medium:g,large:d,danger:u,"gap-right":"_gap-right_ihnm9_29","gap-left":"_gap-left_ihnm9_33"},h={large:n.large,medium:n.medium,small:n.small},p={danger:n.danger},y=({fill:i,gap:e="none",name:o,size:a="medium",variant:s})=>{const c={maskImage:t.iconSVG(o,i??!1)};return m.jsx("span",{"aria-hidden":"true",className:r.t(e!=="none"&&n[`gap-${e}`],h[a],n.icon,s&&p[s]),style:c,"data-component":"icon"})},I=()=>Object.keys(t.iconPaths);exports.Icon=y;exports.Icons=I;
2
2
  //# sourceMappingURL=index.cjs.map
@@ -1,6 +1,6 @@
1
1
  import { jsx as t } from "react/jsx-runtime";
2
2
  import { t as r } from "../../classix-DG18itHa.js";
3
- import { i as c, a as l } from "../../icons-BFgf_lJN.js";
3
+ import { i as c, a as l } from "../../icons-Bq3diTRm.js";
4
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,
@@ -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-Dx0NQYLH.cjs");const e=require("../../index-CEzqxRIu.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-ovA21Oao.cjs");const e=require("../../index-BcY9DZZ8.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-BFgf_lJN.js";
5
- import { I as a } from "../../index-BHgGZxsR.js";
4
+ import "../../icons-Bq3diTRm.js";
5
+ import { I as a } from "../../index-ClZkChEh.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/index16.css');const r=require("react/jsx-runtime"),m=require("../../classix-5H4IWnMA.cjs"),p=require("react"),b=require("../button/index.cjs"),x=require("../icon/index.cjs"),h=require("../list/index.cjs"),j=require("../popover/index.cjs"),v="_list_z7awx_3",y="_item_z7awx_15",w="_active_z7awx_38",D="_danger_z7awx_47",l={list:v,item:y,active:w,danger:D};function q(o){return o.filter(s=>!!(s&&!s.disabled))}const k=({close:o,initialFocus:s,items:u,menuAccessibleLabel:d,onItemSelect:a})=>{const c=p.useRef([]),t=p.useCallback(e=>{const n=q(c.current);if(n.length===0)return;if(e==="first"){n[0].focus();return}if(e==="last"){n[n.length-1].focus();return}const i=n.indexOf(document.activeElement),g=e==="next"?(i+1)%n.length:(i-1+n.length)%n.length;n[g].focus()},[]);p.useEffect(()=>{t(s??"first")},[t,s]);const f=e=>{if(e.key==="ArrowDown"){e.preventDefault(),t("next");return}if(e.key==="ArrowUp"){e.preventDefault(),t("previous");return}if(e.key==="Home"){e.preventDefault(),t("first");return}e.key==="End"&&(e.preventDefault(),t("last"))},_=e=>{var n;(n=e.onSelect)==null||n.call(e),a==null||a(e),o()};return r.jsx(h.List,{"aria-label":d,className:l.list,onKeyDown:f,role:"menu","data-component":"menupanel",children:u.map((e,n)=>r.jsx("li",{role:"none",children:r.jsxs(b.Button,{"aria-current":e.isActive?"true":void 0,"aria-label":e.accessibleLabel,className:m.t(l.item,e.isActive&&l.active,e.isDanger&&l.danger),disabled:e.disabled,onClick:()=>_(e),ref:i=>{c.current[n]=i},role:"menuitem",variant:"tertiary",children:[e.icon&&r.jsx(x.Icon,{fill:!0,gap:"right",name:e.icon,size:"small"}),r.jsx("span",{children:e.label})]})},e.id??n))})},z=({inline:o=!1,items:s,menuAccessibleLabel:u="Menu",onItemSelect:d,position:a="left",triggerAccessibleLabel:c="Open menu"})=>r.jsx(j.Popover,{inline:o,position:a,triggerAccessibleLabel:c,triggerAriaHasPopup:"menu",triggerButtonContent:r.jsx(x.Icon,{name:"dots",size:"medium"}),"data-component":"menu",children:({close:t,initialFocus:f})=>r.jsx(k,{close:t,initialFocus:f,items:s,menuAccessibleLabel:u,onItemSelect:d})});exports.Menu=z;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index16.css');const a=require("react/jsx-runtime"),h=require("../../classix-5H4IWnMA.cjs"),p=require("react"),v=require("../button/index.cjs"),g=require("../icon/index.cjs"),j=require("../list/index.cjs"),m=require("../popover/index.cjs"),D="_list_z7awx_3",y="_item_z7awx_15",w="_active_z7awx_38",q="_danger_z7awx_47",f={list:D,item:y,active:w,danger:q};function k(o){return[...o].sort((r,c)=>+!!r.isDanger-+!!c.isDanger)}const _=({itemRefs:o,items:r,menuAccessibleLabel:c,onKeyDown:i,onSelect:l,usesMenuSemantics:u=!1})=>a.jsx(j.List,{"aria-label":c,className:f.list,onKeyDown:i,role:u?"menu":void 0,"data-component":"menulist",children:k(r).map((e,t)=>a.jsx("li",{role:u?"none":void 0,children:a.jsxs(v.Button,{"aria-current":e.isActive?"true":void 0,"aria-label":e.accessibleLabel,className:h.t(f.item,e.isActive&&f.active,e.isDanger&&f.danger),disabled:e.disabled,onClick:()=>l(e),ref:d=>{o&&(o.current[t]=d)},role:u?"menuitem":void 0,variant:"tertiary",children:[e.icon&&a.jsx(g.Icon,{fill:!0,gap:"right",name:e.icon,size:"small"}),a.jsx("span",{children:e.label})]})},e.id??t))});function z(o){return o.filter(r=>!!(r&&!r.disabled))}const B=({close:o,initialFocus:r,items:c,menuAccessibleLabel:i,onItemSelect:l})=>{const u=p.useRef([]),e=p.useCallback(n=>{const s=z(u.current);if(s.length===0)return;if(n==="first"){s[0].focus();return}if(n==="last"){s[s.length-1].focus();return}const x=s.indexOf(document.activeElement),b=n==="next"?(x+1)%s.length:(x-1+s.length)%s.length;s[b].focus()},[]);p.useEffect(()=>{e(r??"first")},[e,r]);const t=n=>{if(n.key==="ArrowDown"){n.preventDefault(),e("next");return}if(n.key==="ArrowUp"){n.preventDefault(),e("previous");return}if(n.key==="Home"){n.preventDefault(),e("first");return}n.key==="End"&&(n.preventDefault(),e("last"))},d=n=>{var s;(s=n.onSelect)==null||s.call(n),l==null||l(n),o()};return a.jsx(_,{itemRefs:u,items:c,menuAccessibleLabel:i,onKeyDown:t,onSelect:d,usesMenuSemantics:!0,"data-component":"menupanel"})},M=({inline:o=!1,items:r,menuAccessibleLabel:c="Menu",onItemSelect:i,triggerAccessibleLabel:l="Open menu",variant:u="popover"})=>{if(u==="simple"){const e=t=>{var d;(d=t.onSelect)==null||d.call(t),i==null||i(t)};return a.jsx(_,{items:r,menuAccessibleLabel:c,onSelect:e,"data-component":"menu"})}return a.jsx(m.Popover,{inline:o,triggerAccessibleLabel:l,triggerAriaHasPopup:"menu",triggerButtonContent:a.jsx(g.Icon,{name:"dots",size:"medium"}),"data-component":"menu",children:({close:e,initialFocus:t})=>a.jsx(B,{close:e,initialFocus:t,items:r,menuAccessibleLabel:c,onItemSelect:i})})};exports.Menu=M;
2
2
  //# sourceMappingURL=index.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../../src/components/menu/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { Button } from '@/components/button';\nimport { Icon } from '@/components/icon';\nimport { type IconName } from '@/components/icon/icons';\nimport { List } from '@/components/list';\nimport { Popover, type PopoverInitialFocus, type PopoverRenderProps } from '@/components/popover';\n\nimport styles from './styles.module.css';\n\nexport type MenuItem = {\n accessibleLabel?: string;\n disabled?: boolean;\n icon?: IconName;\n id?: string;\n isActive?: boolean;\n isDanger?: boolean;\n label: React.ReactNode;\n onSelect?: () => void;\n};\n\nexport type MenuProps = {\n inline?: boolean;\n items: MenuItem[];\n menuAccessibleLabel?: string;\n onItemSelect?: (item: MenuItem) => void;\n position?: 'auto' | 'left' | 'right';\n triggerAccessibleLabel?: string;\n};\n\ntype MenuFocusTarget = 'first' | 'last' | 'next' | 'previous';\n\ntype MenuPanelProps = Pick<MenuProps, 'items' | 'menuAccessibleLabel' | 'onItemSelect'> & {\n close: PopoverRenderProps['close'];\n initialFocus?: PopoverInitialFocus;\n};\n\nfunction getFocusableItems(items: Array<HTMLButtonElement | null>) {\n return items.filter((item): item is HTMLButtonElement => Boolean(item && !item.disabled));\n}\n\nconst MenuPanel = ({\n close,\n initialFocus,\n items,\n menuAccessibleLabel,\n onItemSelect,\n}: MenuPanelProps) => {\n const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);\n\n const focusItem = useCallback((target: MenuFocusTarget) => {\n const focusableItems = getFocusableItems(itemRefs.current);\n\n if (focusableItems.length === 0) {\n return;\n }\n\n if (target === 'first') {\n focusableItems[0].focus();\n return;\n }\n\n if (target === 'last') {\n focusableItems[focusableItems.length - 1].focus();\n return;\n }\n\n const currentIndex = focusableItems.indexOf(document.activeElement as HTMLButtonElement);\n const nextIndex =\n target === 'next'\n ? (currentIndex + 1) % focusableItems.length\n : (currentIndex - 1 + focusableItems.length) % focusableItems.length;\n\n focusableItems[nextIndex].focus();\n }, []);\n\n useEffect(() => {\n focusItem(initialFocus ?? 'first');\n }, [focusItem, initialFocus]);\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n focusItem('next');\n return;\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault();\n focusItem('previous');\n return;\n }\n\n if (event.key === 'Home') {\n event.preventDefault();\n focusItem('first');\n return;\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n focusItem('last');\n }\n };\n\n const handleItemSelect = (item: MenuItem) => {\n item.onSelect?.();\n onItemSelect?.(item);\n close();\n };\n\n return (\n <List\n aria-label={menuAccessibleLabel}\n className={styles.list}\n onKeyDown={handleKeyDown}\n role='menu'\n >\n {items.map((item, index) => (\n <li\n key={item.id ?? index}\n role='none'\n >\n <Button\n aria-current={item.isActive ? 'true' : undefined}\n aria-label={item.accessibleLabel}\n className={cx(\n styles.item,\n item.isActive && styles.active,\n item.isDanger && styles.danger\n )}\n disabled={item.disabled}\n onClick={() => handleItemSelect(item)}\n ref={(node) => {\n itemRefs.current[index] = node;\n }}\n role='menuitem'\n variant='tertiary'\n >\n {item.icon && (\n <Icon\n fill\n gap='right'\n name={item.icon}\n size='small'\n />\n )}\n <span>{item.label}</span>\n </Button>\n </li>\n ))}\n </List>\n );\n};\n\nexport const Menu = ({\n inline = false,\n items,\n menuAccessibleLabel = 'Menu',\n onItemSelect,\n position = 'left',\n triggerAccessibleLabel = 'Open menu',\n}: MenuProps) => {\n return (\n <Popover\n inline={inline}\n position={position}\n triggerAccessibleLabel={triggerAccessibleLabel}\n triggerAriaHasPopup='menu'\n triggerButtonContent={\n <Icon\n name='dots'\n size='medium'\n />\n }\n >\n {({ close, initialFocus }) => (\n <MenuPanel\n close={close}\n initialFocus={initialFocus}\n items={items}\n menuAccessibleLabel={menuAccessibleLabel}\n onItemSelect={onItemSelect}\n />\n )}\n </Popover>\n );\n};\n"],"names":["getFocusableItems","items","filter","item","Boolean","disabled","MenuPanel","close","initialFocus","menuAccessibleLabel","onItemSelect","itemRefs","useRef","focusItem","useCallback","target","focusableItems","current","length","focus","currentIndex","indexOf","document","activeElement","nextIndex","useEffect","handleKeyDown","event","key","preventDefault","handleItemSelect","onSelect","jsx","List","styles","list","map","index","jsxs","Button","isActive","undefined","accessibleLabel","cx","active","isDanger","danger","node","icon","Icon","label","id","Menu","inline","position","triggerAccessibleLabel","Popover"],"mappings":"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"}
1
+ {"version":3,"file":"index.cjs","sources":["../../../src/components/menu/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { Button } from '@/components/button';\nimport { Icon } from '@/components/icon';\nimport { type IconName } from '@/components/icon/icons';\nimport { List } from '@/components/list';\nimport { Popover, type PopoverInitialFocus, type PopoverRenderProps } from '@/components/popover';\n\nimport styles from './styles.module.css';\n\nexport type MenuItem = {\n accessibleLabel?: string;\n disabled?: boolean;\n icon?: IconName;\n id?: string;\n isActive?: boolean;\n isDanger?: boolean;\n label: React.ReactNode;\n onSelect?: () => void;\n};\n\ntype MenuSharedProps = {\n items: MenuItem[];\n menuAccessibleLabel?: string;\n onItemSelect?: (item: MenuItem) => void;\n};\n\ntype PopoverMenuProps = {\n inline?: boolean;\n triggerAccessibleLabel?: string;\n variant?: 'popover';\n};\n\ntype SimpleMenuProps = {\n inline?: never;\n triggerAccessibleLabel?: never;\n variant: 'simple';\n};\n\nexport type MenuProps = MenuSharedProps & (PopoverMenuProps | SimpleMenuProps);\n\ntype MenuFocusTarget = 'first' | 'last' | 'next' | 'previous';\n\ntype MenuListProps = Pick<MenuSharedProps, 'items' | 'menuAccessibleLabel'> & {\n itemRefs?: React.RefObject<Array<HTMLButtonElement | null>>;\n onKeyDown?: React.KeyboardEventHandler<HTMLUListElement>;\n onSelect: (item: MenuItem) => void;\n usesMenuSemantics?: boolean;\n};\n\ntype MenuPanelProps = MenuSharedProps & {\n close: PopoverRenderProps['close'];\n initialFocus?: PopoverInitialFocus;\n};\n\nfunction sortDangerItemsLast(items: MenuItem[]) {\n return [...items].sort(\n (left, right) => Number(Boolean(left.isDanger)) - Number(Boolean(right.isDanger))\n );\n}\n\nconst MenuList = ({\n itemRefs,\n items,\n menuAccessibleLabel,\n onKeyDown,\n onSelect,\n usesMenuSemantics = false,\n}: MenuListProps) => (\n <List\n aria-label={menuAccessibleLabel}\n className={styles.list}\n onKeyDown={onKeyDown}\n role={usesMenuSemantics ? 'menu' : undefined}\n >\n {sortDangerItemsLast(items).map((item, index) => (\n <li\n key={item.id ?? index}\n role={usesMenuSemantics ? 'none' : undefined}\n >\n <Button\n aria-current={item.isActive ? 'true' : undefined}\n aria-label={item.accessibleLabel}\n className={cx(\n styles.item,\n item.isActive && styles.active,\n item.isDanger && styles.danger\n )}\n disabled={item.disabled}\n onClick={() => onSelect(item)}\n ref={(node) => {\n if (itemRefs) itemRefs.current[index] = node;\n }}\n role={usesMenuSemantics ? 'menuitem' : undefined}\n variant='tertiary'\n >\n {item.icon && (\n <Icon\n fill\n gap='right'\n name={item.icon}\n size='small'\n />\n )}\n <span>{item.label}</span>\n </Button>\n </li>\n ))}\n </List>\n);\n\nfunction getFocusableItems(items: Array<HTMLButtonElement | null>) {\n return items.filter((item): item is HTMLButtonElement => Boolean(item && !item.disabled));\n}\n\nconst MenuPanel = ({\n close,\n initialFocus,\n items,\n menuAccessibleLabel,\n onItemSelect,\n}: MenuPanelProps) => {\n const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);\n\n const focusItem = useCallback((target: MenuFocusTarget) => {\n const focusableItems = getFocusableItems(itemRefs.current);\n\n if (focusableItems.length === 0) {\n return;\n }\n\n if (target === 'first') {\n focusableItems[0].focus();\n return;\n }\n\n if (target === 'last') {\n focusableItems[focusableItems.length - 1].focus();\n return;\n }\n\n const currentIndex = focusableItems.indexOf(document.activeElement as HTMLButtonElement);\n const nextIndex =\n target === 'next'\n ? (currentIndex + 1) % focusableItems.length\n : (currentIndex - 1 + focusableItems.length) % focusableItems.length;\n\n focusableItems[nextIndex].focus();\n }, []);\n\n useEffect(() => {\n focusItem(initialFocus ?? 'first');\n }, [focusItem, initialFocus]);\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n focusItem('next');\n return;\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault();\n focusItem('previous');\n return;\n }\n\n if (event.key === 'Home') {\n event.preventDefault();\n focusItem('first');\n return;\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n focusItem('last');\n }\n };\n\n const handleItemSelect = (item: MenuItem) => {\n item.onSelect?.();\n onItemSelect?.(item);\n close();\n };\n\n return (\n <MenuList\n itemRefs={itemRefs}\n items={items}\n menuAccessibleLabel={menuAccessibleLabel}\n onKeyDown={handleKeyDown}\n onSelect={handleItemSelect}\n usesMenuSemantics\n />\n );\n};\n\nexport const Menu = ({\n inline = false,\n items,\n menuAccessibleLabel = 'Menu',\n onItemSelect,\n triggerAccessibleLabel = 'Open menu',\n variant = 'popover',\n}: MenuProps) => {\n if (variant === 'simple') {\n const handleItemSelect = (item: MenuItem) => {\n item.onSelect?.();\n onItemSelect?.(item);\n };\n\n return (\n <MenuList\n items={items}\n menuAccessibleLabel={menuAccessibleLabel}\n onSelect={handleItemSelect}\n />\n );\n }\n\n return (\n <Popover\n inline={inline}\n triggerAccessibleLabel={triggerAccessibleLabel}\n triggerAriaHasPopup='menu'\n triggerButtonContent={\n <Icon\n name='dots'\n size='medium'\n />\n }\n >\n {({ close, initialFocus }) => (\n <MenuPanel\n close={close}\n initialFocus={initialFocus}\n items={items}\n menuAccessibleLabel={menuAccessibleLabel}\n onItemSelect={onItemSelect}\n />\n )}\n </Popover>\n );\n};\n"],"names":["sortDangerItemsLast","items","sort","left","right","Number","Boolean","isDanger","MenuList","itemRefs","menuAccessibleLabel","onKeyDown","onSelect","usesMenuSemantics","jsx","List","styles","list","undefined","map","item","index","jsxs","Button","isActive","accessibleLabel","cx","active","danger","disabled","node","current","icon","Icon","label","id","getFocusableItems","filter","MenuPanel","close","initialFocus","onItemSelect","useRef","focusItem","useCallback","target","focusableItems","length","focus","currentIndex","indexOf","document","activeElement","nextIndex","useEffect","handleKeyDown","event","key","preventDefault","handleItemSelect","Menu","inline","triggerAccessibleLabel","variant","Popover"],"mappings":"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"}
@@ -1,80 +1,92 @@
1
- import { jsx as o, jsxs as h } from "react/jsx-runtime";
1
+ import { jsx as s, jsxs as v } from "react/jsx-runtime";
2
2
  import { t as x } from "../../classix-DG18itHa.js";
3
- import { useRef as _, useCallback as b, useEffect as w } from "react";
4
- import { Button as v } from "../button/index.js";
3
+ import { useRef as D, useCallback as _, useEffect as b } from "react";
4
+ import { Button as w } from "../button/index.js";
5
5
  import { Icon as m } from "../icon/index.js";
6
6
  import { List as y } from "../list/index.js";
7
- import { Popover as D } from "../popover/index.js";
8
- import '../../assets/index16.css';const k = "_list_z7awx_3", z = "_item_z7awx_15", A = "_active_z7awx_38", B = "_danger_z7awx_47", c = {
9
- list: k,
10
- item: z,
7
+ import { Popover as k } from "../popover/index.js";
8
+ import '../../assets/index16.css';const z = "_list_z7awx_3", B = "_item_z7awx_15", A = "_active_z7awx_38", N = "_danger_z7awx_47", d = {
9
+ list: z,
10
+ item: B,
11
11
  active: A,
12
- danger: B
12
+ danger: N
13
13
  };
14
- function C(a) {
15
- return a.filter((t) => !!(t && !t.disabled));
14
+ function C(t) {
15
+ return [...t].sort((r, l) => +!!r.isDanger - +!!l.isDanger);
16
16
  }
17
- const E = ({
18
- close: a,
19
- initialFocus: t,
20
- items: u,
21
- menuAccessibleLabel: f,
22
- onItemSelect: s
17
+ const g = ({
18
+ itemRefs: t,
19
+ items: r,
20
+ menuAccessibleLabel: l,
21
+ onKeyDown: i,
22
+ onSelect: u,
23
+ usesMenuSemantics: c = !1
24
+ }) => /* @__PURE__ */ s(y, { "aria-label": l, className: d.list, onKeyDown: i, role: c ? "menu" : void 0, "data-component": "menulist", children: C(r).map((e, a) => /* @__PURE__ */ s("li", { role: c ? "none" : void 0, children: /* @__PURE__ */ v(w, { "aria-current": e.isActive ? "true" : void 0, "aria-label": e.accessibleLabel, className: x(d.item, e.isActive && d.active, e.isDanger && d.danger), disabled: e.disabled, onClick: () => u(e), ref: (f) => {
25
+ t && (t.current[a] = f);
26
+ }, role: c ? "menuitem" : void 0, variant: "tertiary", children: [
27
+ e.icon && /* @__PURE__ */ s(m, { fill: !0, gap: "right", name: e.icon, size: "small" }),
28
+ /* @__PURE__ */ s("span", { children: e.label })
29
+ ] }) }, e.id ?? a)) });
30
+ function E(t) {
31
+ return t.filter((r) => !!(r && !r.disabled));
32
+ }
33
+ const K = ({
34
+ close: t,
35
+ initialFocus: r,
36
+ items: l,
37
+ menuAccessibleLabel: i,
38
+ onItemSelect: u
23
39
  }) => {
24
- const l = _([]), r = b((e) => {
25
- const n = C(l.current);
26
- if (n.length === 0)
40
+ const c = D([]), e = _((n) => {
41
+ const o = E(c.current);
42
+ if (o.length === 0)
27
43
  return;
28
- if (e === "first") {
29
- n[0].focus();
44
+ if (n === "first") {
45
+ o[0].focus();
30
46
  return;
31
47
  }
32
- if (e === "last") {
33
- n[n.length - 1].focus();
48
+ if (n === "last") {
49
+ o[o.length - 1].focus();
34
50
  return;
35
51
  }
36
- const i = n.indexOf(document.activeElement), g = e === "next" ? (i + 1) % n.length : (i - 1 + n.length) % n.length;
37
- n[g].focus();
52
+ const p = o.indexOf(document.activeElement), h = n === "next" ? (p + 1) % o.length : (p - 1 + o.length) % o.length;
53
+ o[h].focus();
38
54
  }, []);
39
- w(() => {
40
- r(t ?? "first");
41
- }, [r, t]);
42
- const d = (e) => {
43
- if (e.key === "ArrowDown") {
44
- e.preventDefault(), r("next");
55
+ return b(() => {
56
+ e(r ?? "first");
57
+ }, [e, r]), /* @__PURE__ */ s(g, { itemRefs: c, items: l, menuAccessibleLabel: i, onKeyDown: (n) => {
58
+ if (n.key === "ArrowDown") {
59
+ n.preventDefault(), e("next");
45
60
  return;
46
61
  }
47
- if (e.key === "ArrowUp") {
48
- e.preventDefault(), r("previous");
62
+ if (n.key === "ArrowUp") {
63
+ n.preventDefault(), e("previous");
49
64
  return;
50
65
  }
51
- if (e.key === "Home") {
52
- e.preventDefault(), r("first");
66
+ if (n.key === "Home") {
67
+ n.preventDefault(), e("first");
53
68
  return;
54
69
  }
55
- e.key === "End" && (e.preventDefault(), r("last"));
56
- }, p = (e) => {
57
- var n;
58
- (n = e.onSelect) == null || n.call(e), s == null || s(e), a();
59
- };
60
- return /* @__PURE__ */ o(y, { "aria-label": f, className: c.list, onKeyDown: d, role: "menu", "data-component": "menupanel", children: u.map((e, n) => /* @__PURE__ */ o("li", { role: "none", children: /* @__PURE__ */ h(v, { "aria-current": e.isActive ? "true" : void 0, "aria-label": e.accessibleLabel, className: x(c.item, e.isActive && c.active, e.isDanger && c.danger), disabled: e.disabled, onClick: () => p(e), ref: (i) => {
61
- l.current[n] = i;
62
- }, role: "menuitem", variant: "tertiary", children: [
63
- e.icon && /* @__PURE__ */ o(m, { fill: !0, gap: "right", name: e.icon, size: "small" }),
64
- /* @__PURE__ */ o("span", { children: e.label })
65
- ] }) }, e.id ?? n)) });
66
- }, N = ({
67
- inline: a = !1,
68
- items: t,
69
- menuAccessibleLabel: u = "Menu",
70
- onItemSelect: f,
71
- position: s = "left",
72
- triggerAccessibleLabel: l = "Open menu"
73
- }) => /* @__PURE__ */ o(D, { inline: a, position: s, triggerAccessibleLabel: l, triggerAriaHasPopup: "menu", triggerButtonContent: /* @__PURE__ */ o(m, { name: "dots", size: "medium" }), "data-component": "menu", children: ({
74
- close: r,
75
- initialFocus: d
76
- }) => /* @__PURE__ */ o(E, { close: r, initialFocus: d, items: t, menuAccessibleLabel: u, onItemSelect: f }) });
70
+ n.key === "End" && (n.preventDefault(), e("last"));
71
+ }, onSelect: (n) => {
72
+ var o;
73
+ (o = n.onSelect) == null || o.call(n), u == null || u(n), t();
74
+ }, usesMenuSemantics: !0, "data-component": "menupanel" });
75
+ }, R = ({
76
+ inline: t = !1,
77
+ items: r,
78
+ menuAccessibleLabel: l = "Menu",
79
+ onItemSelect: i,
80
+ triggerAccessibleLabel: u = "Open menu",
81
+ variant: c = "popover"
82
+ }) => c === "simple" ? /* @__PURE__ */ s(g, { items: r, menuAccessibleLabel: l, onSelect: (a) => {
83
+ var f;
84
+ (f = a.onSelect) == null || f.call(a), i == null || i(a);
85
+ }, "data-component": "menu" }) : /* @__PURE__ */ s(k, { inline: t, triggerAccessibleLabel: u, triggerAriaHasPopup: "menu", triggerButtonContent: /* @__PURE__ */ s(m, { name: "dots", size: "medium" }), "data-component": "menu", children: ({
86
+ close: e,
87
+ initialFocus: a
88
+ }) => /* @__PURE__ */ s(K, { close: e, initialFocus: a, items: r, menuAccessibleLabel: l, onItemSelect: i }) });
77
89
  export {
78
- N as Menu
90
+ R as Menu
79
91
  };
80
92
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../src/components/menu/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { Button } from '@/components/button';\nimport { Icon } from '@/components/icon';\nimport { type IconName } from '@/components/icon/icons';\nimport { List } from '@/components/list';\nimport { Popover, type PopoverInitialFocus, type PopoverRenderProps } from '@/components/popover';\n\nimport styles from './styles.module.css';\n\nexport type MenuItem = {\n accessibleLabel?: string;\n disabled?: boolean;\n icon?: IconName;\n id?: string;\n isActive?: boolean;\n isDanger?: boolean;\n label: React.ReactNode;\n onSelect?: () => void;\n};\n\nexport type MenuProps = {\n inline?: boolean;\n items: MenuItem[];\n menuAccessibleLabel?: string;\n onItemSelect?: (item: MenuItem) => void;\n position?: 'auto' | 'left' | 'right';\n triggerAccessibleLabel?: string;\n};\n\ntype MenuFocusTarget = 'first' | 'last' | 'next' | 'previous';\n\ntype MenuPanelProps = Pick<MenuProps, 'items' | 'menuAccessibleLabel' | 'onItemSelect'> & {\n close: PopoverRenderProps['close'];\n initialFocus?: PopoverInitialFocus;\n};\n\nfunction getFocusableItems(items: Array<HTMLButtonElement | null>) {\n return items.filter((item): item is HTMLButtonElement => Boolean(item && !item.disabled));\n}\n\nconst MenuPanel = ({\n close,\n initialFocus,\n items,\n menuAccessibleLabel,\n onItemSelect,\n}: MenuPanelProps) => {\n const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);\n\n const focusItem = useCallback((target: MenuFocusTarget) => {\n const focusableItems = getFocusableItems(itemRefs.current);\n\n if (focusableItems.length === 0) {\n return;\n }\n\n if (target === 'first') {\n focusableItems[0].focus();\n return;\n }\n\n if (target === 'last') {\n focusableItems[focusableItems.length - 1].focus();\n return;\n }\n\n const currentIndex = focusableItems.indexOf(document.activeElement as HTMLButtonElement);\n const nextIndex =\n target === 'next'\n ? (currentIndex + 1) % focusableItems.length\n : (currentIndex - 1 + focusableItems.length) % focusableItems.length;\n\n focusableItems[nextIndex].focus();\n }, []);\n\n useEffect(() => {\n focusItem(initialFocus ?? 'first');\n }, [focusItem, initialFocus]);\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n focusItem('next');\n return;\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault();\n focusItem('previous');\n return;\n }\n\n if (event.key === 'Home') {\n event.preventDefault();\n focusItem('first');\n return;\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n focusItem('last');\n }\n };\n\n const handleItemSelect = (item: MenuItem) => {\n item.onSelect?.();\n onItemSelect?.(item);\n close();\n };\n\n return (\n <List\n aria-label={menuAccessibleLabel}\n className={styles.list}\n onKeyDown={handleKeyDown}\n role='menu'\n >\n {items.map((item, index) => (\n <li\n key={item.id ?? index}\n role='none'\n >\n <Button\n aria-current={item.isActive ? 'true' : undefined}\n aria-label={item.accessibleLabel}\n className={cx(\n styles.item,\n item.isActive && styles.active,\n item.isDanger && styles.danger\n )}\n disabled={item.disabled}\n onClick={() => handleItemSelect(item)}\n ref={(node) => {\n itemRefs.current[index] = node;\n }}\n role='menuitem'\n variant='tertiary'\n >\n {item.icon && (\n <Icon\n fill\n gap='right'\n name={item.icon}\n size='small'\n />\n )}\n <span>{item.label}</span>\n </Button>\n </li>\n ))}\n </List>\n );\n};\n\nexport const Menu = ({\n inline = false,\n items,\n menuAccessibleLabel = 'Menu',\n onItemSelect,\n position = 'left',\n triggerAccessibleLabel = 'Open menu',\n}: MenuProps) => {\n return (\n <Popover\n inline={inline}\n position={position}\n triggerAccessibleLabel={triggerAccessibleLabel}\n triggerAriaHasPopup='menu'\n triggerButtonContent={\n <Icon\n name='dots'\n size='medium'\n />\n }\n >\n {({ close, initialFocus }) => (\n <MenuPanel\n close={close}\n initialFocus={initialFocus}\n items={items}\n menuAccessibleLabel={menuAccessibleLabel}\n onItemSelect={onItemSelect}\n />\n )}\n </Popover>\n );\n};\n"],"names":["getFocusableItems","items","filter","item","Boolean","disabled","MenuPanel","close","initialFocus","menuAccessibleLabel","onItemSelect","itemRefs","useRef","focusItem","useCallback","target","focusableItems","current","length","focus","currentIndex","indexOf","document","activeElement","nextIndex","useEffect","handleKeyDown","event","key","preventDefault","handleItemSelect","onSelect","jsx","List","styles","list","map","index","jsxs","Button","isActive","undefined","accessibleLabel","cx","active","isDanger","danger","node","icon","Icon","label","id","Menu","inline","position","triggerAccessibleLabel","Popover"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../../../src/components/menu/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { Button } from '@/components/button';\nimport { Icon } from '@/components/icon';\nimport { type IconName } from '@/components/icon/icons';\nimport { List } from '@/components/list';\nimport { Popover, type PopoverInitialFocus, type PopoverRenderProps } from '@/components/popover';\n\nimport styles from './styles.module.css';\n\nexport type MenuItem = {\n accessibleLabel?: string;\n disabled?: boolean;\n icon?: IconName;\n id?: string;\n isActive?: boolean;\n isDanger?: boolean;\n label: React.ReactNode;\n onSelect?: () => void;\n};\n\ntype MenuSharedProps = {\n items: MenuItem[];\n menuAccessibleLabel?: string;\n onItemSelect?: (item: MenuItem) => void;\n};\n\ntype PopoverMenuProps = {\n inline?: boolean;\n triggerAccessibleLabel?: string;\n variant?: 'popover';\n};\n\ntype SimpleMenuProps = {\n inline?: never;\n triggerAccessibleLabel?: never;\n variant: 'simple';\n};\n\nexport type MenuProps = MenuSharedProps & (PopoverMenuProps | SimpleMenuProps);\n\ntype MenuFocusTarget = 'first' | 'last' | 'next' | 'previous';\n\ntype MenuListProps = Pick<MenuSharedProps, 'items' | 'menuAccessibleLabel'> & {\n itemRefs?: React.RefObject<Array<HTMLButtonElement | null>>;\n onKeyDown?: React.KeyboardEventHandler<HTMLUListElement>;\n onSelect: (item: MenuItem) => void;\n usesMenuSemantics?: boolean;\n};\n\ntype MenuPanelProps = MenuSharedProps & {\n close: PopoverRenderProps['close'];\n initialFocus?: PopoverInitialFocus;\n};\n\nfunction sortDangerItemsLast(items: MenuItem[]) {\n return [...items].sort(\n (left, right) => Number(Boolean(left.isDanger)) - Number(Boolean(right.isDanger))\n );\n}\n\nconst MenuList = ({\n itemRefs,\n items,\n menuAccessibleLabel,\n onKeyDown,\n onSelect,\n usesMenuSemantics = false,\n}: MenuListProps) => (\n <List\n aria-label={menuAccessibleLabel}\n className={styles.list}\n onKeyDown={onKeyDown}\n role={usesMenuSemantics ? 'menu' : undefined}\n >\n {sortDangerItemsLast(items).map((item, index) => (\n <li\n key={item.id ?? index}\n role={usesMenuSemantics ? 'none' : undefined}\n >\n <Button\n aria-current={item.isActive ? 'true' : undefined}\n aria-label={item.accessibleLabel}\n className={cx(\n styles.item,\n item.isActive && styles.active,\n item.isDanger && styles.danger\n )}\n disabled={item.disabled}\n onClick={() => onSelect(item)}\n ref={(node) => {\n if (itemRefs) itemRefs.current[index] = node;\n }}\n role={usesMenuSemantics ? 'menuitem' : undefined}\n variant='tertiary'\n >\n {item.icon && (\n <Icon\n fill\n gap='right'\n name={item.icon}\n size='small'\n />\n )}\n <span>{item.label}</span>\n </Button>\n </li>\n ))}\n </List>\n);\n\nfunction getFocusableItems(items: Array<HTMLButtonElement | null>) {\n return items.filter((item): item is HTMLButtonElement => Boolean(item && !item.disabled));\n}\n\nconst MenuPanel = ({\n close,\n initialFocus,\n items,\n menuAccessibleLabel,\n onItemSelect,\n}: MenuPanelProps) => {\n const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);\n\n const focusItem = useCallback((target: MenuFocusTarget) => {\n const focusableItems = getFocusableItems(itemRefs.current);\n\n if (focusableItems.length === 0) {\n return;\n }\n\n if (target === 'first') {\n focusableItems[0].focus();\n return;\n }\n\n if (target === 'last') {\n focusableItems[focusableItems.length - 1].focus();\n return;\n }\n\n const currentIndex = focusableItems.indexOf(document.activeElement as HTMLButtonElement);\n const nextIndex =\n target === 'next'\n ? (currentIndex + 1) % focusableItems.length\n : (currentIndex - 1 + focusableItems.length) % focusableItems.length;\n\n focusableItems[nextIndex].focus();\n }, []);\n\n useEffect(() => {\n focusItem(initialFocus ?? 'first');\n }, [focusItem, initialFocus]);\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n focusItem('next');\n return;\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault();\n focusItem('previous');\n return;\n }\n\n if (event.key === 'Home') {\n event.preventDefault();\n focusItem('first');\n return;\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n focusItem('last');\n }\n };\n\n const handleItemSelect = (item: MenuItem) => {\n item.onSelect?.();\n onItemSelect?.(item);\n close();\n };\n\n return (\n <MenuList\n itemRefs={itemRefs}\n items={items}\n menuAccessibleLabel={menuAccessibleLabel}\n onKeyDown={handleKeyDown}\n onSelect={handleItemSelect}\n usesMenuSemantics\n />\n );\n};\n\nexport const Menu = ({\n inline = false,\n items,\n menuAccessibleLabel = 'Menu',\n onItemSelect,\n triggerAccessibleLabel = 'Open menu',\n variant = 'popover',\n}: MenuProps) => {\n if (variant === 'simple') {\n const handleItemSelect = (item: MenuItem) => {\n item.onSelect?.();\n onItemSelect?.(item);\n };\n\n return (\n <MenuList\n items={items}\n menuAccessibleLabel={menuAccessibleLabel}\n onSelect={handleItemSelect}\n />\n );\n }\n\n return (\n <Popover\n inline={inline}\n triggerAccessibleLabel={triggerAccessibleLabel}\n triggerAriaHasPopup='menu'\n triggerButtonContent={\n <Icon\n name='dots'\n size='medium'\n />\n }\n >\n {({ close, initialFocus }) => (\n <MenuPanel\n close={close}\n initialFocus={initialFocus}\n items={items}\n menuAccessibleLabel={menuAccessibleLabel}\n onItemSelect={onItemSelect}\n />\n )}\n </Popover>\n );\n};\n"],"names":["sortDangerItemsLast","items","sort","left","right","Number","Boolean","isDanger","MenuList","itemRefs","menuAccessibleLabel","onKeyDown","onSelect","usesMenuSemantics","jsx","List","styles","list","undefined","map","item","index","jsxs","Button","isActive","accessibleLabel","cx","active","danger","disabled","node","current","icon","Icon","label","id","getFocusableItems","filter","MenuPanel","close","initialFocus","onItemSelect","useRef","focusItem","useCallback","target","focusableItems","length","focus","currentIndex","indexOf","document","activeElement","nextIndex","useEffect","handleKeyDown","event","key","preventDefault","handleItemSelect","Menu","inline","triggerAccessibleLabel","variant","Popover"],"mappings":"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"}
@@ -1,2 +1,2 @@
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;
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"),j=require("../avatar/index.cjs"),h=require("../icon/index.cjs"),f="_message_txr62_1",w="_timestamp_txr62_87",S="_attachments_txr62_92",b="_preview_txr62_111",t={"message-group":"_message-group_txr62_1",message:f,timestamp:w,attachments:S,preview:b},q=({appearance:c="default",attachments:i,author:a,authorColor:o,authorImageUrl:l,authorRole:d,content:g,iconName:_="info",id:p,preview:x,timestamp:m,timestampText:u,type:s="default"})=>{const n=m?new Date(m):void 0,r=n?e.jsx("time",{className:t.timestamp,dateTime:n.toISOString(),children:u??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:o,imageUrl:l,name:a,role:d}),s==="system"&&r,e.jsxs("div",{className:v.t(t.message,x&&t.preview),"data-appearance":c,"data-id":p,"data-type":s,children:[s=="system"&&e.jsx(h.Icon,{fill:!0,gap:"right",name:_}),g]}),i&&e.jsx("div",{className:t.attachments,children:i}),s!=="system"&&r]})};exports.Message=q;
2
2
  //# sourceMappingURL=index.cjs.map
@@ -1,17 +1,17 @@
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",
1
+ import { jsx as s, jsxs as n } from "react/jsx-runtime";
2
+ import { t as h } 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_txr62_1", S = "_timestamp_txr62_87", b = "_attachments_txr62_92", j = "_preview_txr62_111", t = {
6
+ "message-group": "_message-group_txr62_1",
7
7
  message: N,
8
- timestamp: x,
9
- attachments: S,
10
- preview: b
11
- }, A = ({
12
- appearance: n = "default",
13
- attachments: c,
14
- author: t,
8
+ timestamp: S,
9
+ attachments: b,
10
+ preview: j
11
+ }, D = ({
12
+ appearance: c = "default",
13
+ attachments: r,
14
+ author: a,
15
15
  authorColor: l,
16
16
  authorImageUrl: d,
17
17
  authorRole: g,
@@ -20,22 +20,22 @@ import '../../assets/index15.css';const N = "_message_8sz6c_1", x = "_timestamp_
20
20
  id: v,
21
21
  preview: f,
22
22
  timestamp: i,
23
- timestampText: h,
23
+ timestampText: x,
24
24
  type: e = "default"
25
25
  }) => {
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 }),
26
+ const m = i ? new Date(i) : void 0, o = m ? /* @__PURE__ */ s("time", { className: t.timestamp, dateTime: m.toISOString(), children: x ?? m.toLocaleString() }) : null;
27
+ return /* @__PURE__ */ n("div", { className: t["message-group"], "data-message-type": e, "data-component": "message", children: [
28
+ a && /* @__PURE__ */ s(u, { accessibleLabel: a, color: l, imageUrl: d, name: a, role: g }),
29
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: _ }),
30
+ /* @__PURE__ */ n("div", { className: h(t.message, f && t.preview), "data-appearance": c, "data-id": v, "data-type": e, children: [
31
+ e == "system" && /* @__PURE__ */ s(w, { fill: !0, gap: "right", name: _ }),
32
32
  p
33
33
  ] }),
34
- c && /* @__PURE__ */ a("div", { className: s.attachments, children: c }),
34
+ r && /* @__PURE__ */ s("div", { className: t.attachments, children: r }),
35
35
  e !== "system" && o
36
36
  ] });
37
37
  };
38
38
  export {
39
- A as Message
39
+ D as Message
40
40
  };
41
41
  //# sourceMappingURL=index.js.map
@@ -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-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;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index12.css');const o=require("react/jsx-runtime"),r=require("../../classix-5H4IWnMA.cjs"),f=require("react"),p=require("../../icons-ovA21Oao.cjs"),h="_nav_ebhif_3",v="_label_ebhif_9",m="_horizontal_ebhif_17",N="_sidebar_ebhif_27",g="_tabs_ebhif_73",w="_pills_ebhif_94",e={nav:h,label:v,horizontal:m,sidebar:N,tabs:g,pills:w},x={default:e.default,pills:e.pills,sidebar:e.sidebar,tabs:e.tabs},j=({className:a,...n})=>o.jsx("span",{className:r.t(a,e.label),...n,"data-component":"navlabel"}),q=({animation:a,children:n,className:c,horizontal:i=!1,variant:s="default",...b})=>{const[d,l]=f.useState(!1),u={"--icon-svg":p.iconSVG("chevron")};return o.jsx("nav",{className:r.t(c,i&&e.horizontal,e.nav,x[s]),"data-animation":a,"data-open":d?"true":"false","data-orientation":i?"horizontal":"vertical",onBlurCapture:t=>{if(s!=="pills"||window.innerWidth>960)return;const _=t.relatedTarget;t.currentTarget.contains(_)||l(!1)},onClick:()=>{s!=="pills"||window.innerWidth>960||l(t=>!t)},style:u,...b,"data-component":"nav",children:n})};exports.Nav=q;exports.NavLabel=j;
2
2
  //# sourceMappingURL=index.cjs.map
@@ -1,9 +1,9 @@
1
- import { jsx as i } from "react/jsx-runtime";
1
+ import { jsx as l } from "react/jsx-runtime";
2
2
  import { t as r } from "../../classix-DG18itHa.js";
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,
3
+ import { useState as _ } from "react";
4
+ import { i as h } from "../../icons-Bq3diTRm.js";
5
+ import '../../assets/index12.css';const m = "_nav_ebhif_3", u = "_label_ebhif_9", v = "_horizontal_ebhif_17", w = "_sidebar_ebhif_27", z = "_tabs_ebhif_73", N = "_pills_ebhif_94", a = {
6
+ nav: m,
7
7
  label: u,
8
8
  horizontal: v,
9
9
  sidebar: w,
@@ -16,25 +16,25 @@ import '../../assets/index12.css';const h = "_nav_mhwz8_3", u = "_label_mhwz8_9"
16
16
  tabs: a.tabs
17
17
  }, T = ({
18
18
  className: n,
19
- ...s
20
- }) => /* @__PURE__ */ i("span", { className: r(n, a.label), ...s, "data-component": "navlabel" }), V = ({
19
+ ...e
20
+ }) => /* @__PURE__ */ l("span", { className: r(n, a.label), ...e, "data-component": "navlabel" }), V = ({
21
21
  animation: n,
22
- children: s,
22
+ children: e,
23
23
  className: c,
24
- horizontal: e = !1,
25
- variant: o = "default",
26
- ...m
24
+ horizontal: o = !1,
25
+ variant: s = "default",
26
+ ...b
27
27
  }) => {
28
- const [p, l] = b(!1), d = {
29
- "--icon-svg": f("chevron")
28
+ const [f, i] = _(!1), p = {
29
+ "--icon-svg": h("chevron")
30
30
  };
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);
31
+ return /* @__PURE__ */ l("nav", { className: r(c, o && a.horizontal, a.nav, g[s]), "data-animation": n, "data-open": f ? "true" : "false", "data-orientation": o ? "horizontal" : "vertical", onBlurCapture: (t) => {
32
+ if (s !== "pills" || window.innerWidth > 960) return;
33
+ const d = t.relatedTarget;
34
+ t.currentTarget.contains(d) || i(!1);
35
35
  }, onClick: () => {
36
- o !== "pills" || window.innerWidth > 960 || l((t) => !t);
37
- }, style: d, ...m, "data-component": "nav", children: s });
36
+ s !== "pills" || window.innerWidth > 960 || i((t) => !t);
37
+ }, style: p, ...b, "data-component": "nav", children: e });
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/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;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index17.css');const _=require("react/jsx-runtime"),j=require("../../classix-5H4IWnMA.cjs"),o=require("react"),S=require("react-dom"),I=require("../button/index.cjs"),K="_popover_1e3fx_1",O="_inline_1e3fx_6",N="_below_1e3fx_42",H="_above_1e3fx_47",W="_left_1e3fx_57",M="_right_1e3fx_62",U="_trigger_1e3fx_67",s={popover:K,inline:O,"popover-panel":"_popover-panel_1e3fx_21",below:N,above:H,"inline-panel":"_inline-panel_1e3fx_52",left:W,right:M,trigger:U,"inline-trigger":"_inline-trigger_1e3fx_77"},X=({children:w,inline:n=!1,triggerAccessibleLabel:z,triggerAriaHasPopup:C,triggerButtonContent:b})=>{var B;const x=o.useRef(null),y=o.useRef(void 0),m=o.useRef(null),P=o.useId(),l=o.useRef(null),[t,R]=o.useState(!1),[p,D]=o.useState(!1),[d,k]=o.useState("right"),g=({initialFocus:e}={})=>{y.current=e,D(!1),k("right"),R(!0)},c=o.useCallback(({restoreFocus:e=!0}={})=>{var i;R(!1),e&&((i=l.current)==null||i.focus())},[]),L=e=>{t&&e.key==="Escape"&&c()},F=e=>{if(!t){if(n&&(e.key==="Enter"||e.key===" ")){e.preventDefault(),g();return}if(e.key==="ArrowDown"){e.preventDefault(),g({initialFocus:"first"});return}e.key==="ArrowUp"&&(e.preventDefault(),g({initialFocus:"last"}))}};o.useEffect(()=>{if(!t)return;const e=i=>{var r,v;const f=i.target;(r=x.current)!=null&&r.contains(f)||(v=m.current)!=null&&v.contains(f)||c({restoreFocus:!1})};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[c,t]);const a=o.useCallback(()=>{const e=m.current,i=l.current;if(!e||!i)return;const f=e.getBoundingClientRect(),r=i.getBoundingClientRect(),v=r.top,T=window.innerHeight-r.bottom;D(f.height>T&&v>T),k(f.width>window.innerWidth-r.left&&r.right>window.innerWidth-r.left?"left":"right")},[]);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 q=e=>{e.preventDefault(),e.stopPropagation(),t?c({restoreFocus:!1}):g()},E={"aria-controls":t?P:void 0,"aria-expanded":t,"aria-haspopup":C,"aria-label":z,className:n?s["inline-trigger"]:s.trigger,onClick:q,onKeyDown:F},u=n?(B=l.current)==null?void 0:B.getBoundingClientRect():void 0,A=[d==="left"?"translateX(-100%)":"",p?"translateY(calc(-100% - var(--shape-spacing-2xs)))":""].filter(Boolean).join(" "),h=t?_.jsx("div",{className:j.t(s["popover-panel"],s[p?"above":"below"],n&&s["inline-panel"],!n&&s[d]),"data-horizontal-placement":d,"data-placement":p?"above":"below",id:P,ref:m,style:u?{left:d==="left"?u.right:u.left,position:"fixed",top:p?u.top:u.bottom,transform:A||void 0}:void 0,children:typeof w=="function"?w({close:c,initialFocus:y.current,isOpen:t}):w}):null;return _.jsxs("div",{className:j.t(s.popover,n&&s.inline),"data-open":t,onKeyDown:L,onClick:e=>{e.preventDefault(),e.stopPropagation()},ref:x,"data-component":"popover",children:[n?_.jsx("span",{...E,ref:l,role:"button",tabIndex:0,children:b}):_.jsx(I.Button,{...E,ref:l,variant:"simple",children:b}),n&&h&&typeof document<"u"?S.createPortal(h,document.body):h]})};exports.Popover=X;
2
2
  //# sourceMappingURL=index.cjs.map