@mattermost/compass-ui 0.1.0-alpha.21 → 0.1.0-alpha.22

package/dist/index.js

@@ -15,8 +15,8 @@ import { default as E } from "./components/checkbox/Checkbox.js";
 import { default as _ } from "./components/chip/Chip.js";
 import { default as N } from "./components/chip/ChipGroup.js";
 import { default as R } from "./components/combobox/Combobox.js";
-import { default as D } from "./components/date-range-picker/DateRangePicker.js";
-import { default as U } from "./components/divider/Divider.js";
+import { default as y } from "./components/date-range-picker/DateRangePicker.js";
+import { default as F } from "./components/divider/Divider.js";
 import { default as k } from "./components/dropdown/Dropdown.js";
 import { default as Z } from "./components/emoji/Emoji.js";
 import { EMOJI_BUTTON_EMOJI_SIZES as L, default as V } from "./components/emoji-button/EmojiButton.js";
@@ -40,48 +40,49 @@ import { default as Oe } from "./components/message-header/MessageHeader.js";
 import { default as Ge } from "./components/reactions-row/ReactionsRow.js";
 import { default as we } from "./components/reaction-button/ReactionButton.js";
 import { default as He } from "./components/message-separator/MessageSeparator.js";
-import { default as Fe } from "./components/modal/Modal.js";
-import { default as ye } from "./components/modal/ModalOverlay.module.scss.js";
-import { default as je } from "./components/modal-footer/ModalFooter.js";
-import { default as Je } from "./components/modal-header/ModalHeader.js";
-import { default as Ve } from "./components/more-unreads-banner/MoreUnreadsBanner.js";
-import { default as qe } from "./components/new-message-banner/NewMessageBanner.js";
-import { default as Qe } from "./components/pagination-dots/PaginationDots.js";
-import { default as Xe } from "./components/permalink-preview/PermalinkPreview.js";
-import { default as $e } from "./components/pinned-saved-indicators/PinnedSavedIndicators.js";
-import { default as oo, PopoverMenuDivider as ro, PopoverMenuGroup as to, PopoverMenuGroupTitle as ao, PopoverMenuScroll as fo, PopoverMenuTitle as so } from "./components/popover-menu/PopoverMenu.js";
-import { default as uo } from "./components/popover-notice/PopoverNotice.js";
-import { default as mo } from "./components/profile-popover/ProfilePopover.js";
-import { default as no } from "./components/progress-bar/ProgressBar.js";
-import { default as Po } from "./components/radio/Radio.js";
-import { default as Mo } from "./components/right-sidebar-header/RightSidebarHeader.js";
-import { default as Io } from "./components/scrollbar/Scrollbar.js";
-import { default as vo } from "./components/password-input/PasswordInput.js";
-import { default as Bo } from "./components/search-input/SearchInput.js";
-import { default as ho } from "./components/search-tip-banner/SearchTipBanner.js";
-import { default as bo, ShortcutTagGroup as Eo } from "./components/shortcut-tag/ShortcutTag.js";
-import { default as _o } from "./components/section-notice/SectionNotice.js";
-import { default as No } from "./components/select/Select.js";
-import { default as Ro } from "./components/spinner/Spinner.js";
-import { default as Do } from "./components/status-badge/StatusBadge.js";
-import { default as Uo } from "./components/switch/Switch.js";
-import { default as ko } from "./components/tabs/Tabs.js";
-import { default as Zo } from "./components/team-avatar/TeamAvatar.js";
-import { default as Lo } from "./components/text-area/TextArea.js";
-import { default as Ko } from "./components/text-input/TextInput.js";
-import { default as zo } from "./components/thread-footer/ThreadFooter.js";
-import { default as Wo } from "./components/thread-list-item/ThreadListItem.js";
-import { default as Yo } from "./components/toast/Toast.js";
-import { default as er } from "./components/tooltip/Tooltip.js";
-import { default as rr } from "./components/tour-point/TourPoint.js";
-import { default as ar } from "./components/unread-badge/UnreadBadge.js";
-import { default as sr } from "./components/user-avatar/UserAvatar.js";
-import { default as lr } from "./components/user-avatar-group/UserAvatarGroup.js";
-import { useControllable as pr } from "./hooks/use-controllable.js";
-import { useExitAnimation as xr } from "./hooks/use-exit-animation.js";
-import { useOutsideClose as ir } from "./hooks/use-outside-close.js";
-import { POPOVER_TRANSITION_MS as Sr, usePopoverTransition as Mr } from "./hooks/use-popover-transition.js";
-import { toKebab as Ir } from "./utils/string.js";
+import { default as De } from "./components/modal/Modal.js";
+import { default as Ue } from "./components/modal/ModalOverlay.js";
+import { default as je } from "./components/modal/ModalOverlay.module.scss.js";
+import { default as Je } from "./components/modal-footer/ModalFooter.js";
+import { default as Ve } from "./components/modal-header/ModalHeader.js";
+import { default as qe } from "./components/more-unreads-banner/MoreUnreadsBanner.js";
+import { default as Qe } from "./components/new-message-banner/NewMessageBanner.js";
+import { default as Xe } from "./components/pagination-dots/PaginationDots.js";
+import { default as $e } from "./components/permalink-preview/PermalinkPreview.js";
+import { default as oo } from "./components/pinned-saved-indicators/PinnedSavedIndicators.js";
+import { default as to, PopoverMenuDivider as ao, PopoverMenuGroup as fo, PopoverMenuGroupTitle as so, PopoverMenuScroll as lo, PopoverMenuTitle as uo } from "./components/popover-menu/PopoverMenu.js";
+import { default as mo } from "./components/popover-notice/PopoverNotice.js";
+import { default as no } from "./components/profile-popover/ProfilePopover.js";
+import { default as Po } from "./components/progress-bar/ProgressBar.js";
+import { default as Mo } from "./components/radio/Radio.js";
+import { default as Io } from "./components/right-sidebar-header/RightSidebarHeader.js";
+import { default as vo } from "./components/scrollbar/Scrollbar.js";
+import { default as Bo } from "./components/password-input/PasswordInput.js";
+import { default as ho } from "./components/search-input/SearchInput.js";
+import { default as bo } from "./components/search-tip-banner/SearchTipBanner.js";
+import { default as Oo, ShortcutTagGroup as _o } from "./components/shortcut-tag/ShortcutTag.js";
+import { default as No } from "./components/section-notice/SectionNotice.js";
+import { default as Ro } from "./components/select/Select.js";
+import { default as yo } from "./components/spinner/Spinner.js";
+import { default as Fo } from "./components/status-badge/StatusBadge.js";
+import { default as ko } from "./components/switch/Switch.js";
+import { default as Zo } from "./components/tabs/Tabs.js";
+import { default as Lo } from "./components/team-avatar/TeamAvatar.js";
+import { default as Ko } from "./components/text-area/TextArea.js";
+import { default as zo } from "./components/text-input/TextInput.js";
+import { default as Wo } from "./components/thread-footer/ThreadFooter.js";
+import { default as Yo } from "./components/thread-list-item/ThreadListItem.js";
+import { default as er } from "./components/toast/Toast.js";
+import { default as rr } from "./components/tooltip/Tooltip.js";
+import { default as ar } from "./components/tour-point/TourPoint.js";
+import { default as sr } from "./components/unread-badge/UnreadBadge.js";
+import { default as lr } from "./components/user-avatar/UserAvatar.js";
+import { default as pr } from "./components/user-avatar-group/UserAvatarGroup.js";
+import { useControllable as xr } from "./hooks/use-controllable.js";
+import { useExitAnimation as ir } from "./hooks/use-exit-animation.js";
+import { useOutsideClose as Sr } from "./hooks/use-outside-close.js";
+import { POPOVER_TRANSITION_MS as cr, usePopoverTransition as Ir } from "./hooks/use-popover-transition.js";
+import { toKebab as vr } from "./utils/string.js";
 export {
   l as AdminConsoleFooter,
   a as AdminConsoleHeader,
@@ -98,8 +99,8 @@ export {
   _ as Chip,
   N as ChipGroup,
   R as Combobox,
-  D as DateRangePicker,
-  U as Divider,
+  y as DateRangePicker,
+  F as Divider,
   k as Dropdown,
   L as EMOJI_BUTTON_EMOJI_SIZES,
   Z as Emoji,
@@ -123,61 +124,62 @@ export {
   be as MessageActions,
   Oe as MessageHeader,
   He as MessageSeparator,
-  Fe as Modal,
-  je as ModalFooter,
-  Je as ModalHeader,
-  Ve as MoreUnreadsBanner,
-  qe as NewMessageBanner,
-  Sr as POPOVER_TRANSITION_MS,
-  Qe as PaginationDots,
-  vo as PasswordInput,
-  Xe as PermalinkPreview,
-  $e as PinnedSavedIndicators,
-  oo as PopoverMenu,
-  ro as PopoverMenuDivider,
-  to as PopoverMenuGroup,
-  ao as PopoverMenuGroupTitle,
-  fo as PopoverMenuScroll,
-  so as PopoverMenuTitle,
-  uo as PopoverNotice,
-  mo as ProfilePopover,
-  no as ProgressBar,
-  Po as Radio,
+  De as Modal,
+  Je as ModalFooter,
+  Ve as ModalHeader,
+  Ue as ModalOverlay,
+  qe as MoreUnreadsBanner,
+  Qe as NewMessageBanner,
+  cr as POPOVER_TRANSITION_MS,
+  Xe as PaginationDots,
+  Bo as PasswordInput,
+  $e as PermalinkPreview,
+  oo as PinnedSavedIndicators,
+  to as PopoverMenu,
+  ao as PopoverMenuDivider,
+  fo as PopoverMenuGroup,
+  so as PopoverMenuGroupTitle,
+  lo as PopoverMenuScroll,
+  uo as PopoverMenuTitle,
+  mo as PopoverNotice,
+  no as ProfilePopover,
+  Po as ProgressBar,
+  Mo as Radio,
   we as ReactionButton,
   Ge as ReactionsRow,
-  Mo as RightSidebarHeader,
+  Io as RightSidebarHeader,
   de as SVG_SIZE_MAP,
-  Io as Scrollbar,
-  Bo as SearchInput,
-  ho as SearchTipBanner,
-  _o as SectionNotice,
-  No as Select,
-  bo as ShortcutTag,
-  Eo as ShortcutTagGroup,
-  Ro as Spinner,
-  Do as StatusBadge,
-  Uo as Switch,
-  ko as Tabs,
+  vo as Scrollbar,
+  ho as SearchInput,
+  bo as SearchTipBanner,
+  No as SectionNotice,
+  Ro as Select,
+  Oo as ShortcutTag,
+  _o as ShortcutTagGroup,
+  yo as Spinner,
+  Fo as StatusBadge,
+  ko as Switch,
+  Zo as Tabs,
   Me as Tag,
-  Zo as TeamAvatar,
-  Lo as TextArea,
-  Ko as TextInput,
-  zo as ThreadFooter,
-  Wo as ThreadListItem,
+  Lo as TeamAvatar,
+  Ko as TextArea,
+  zo as TextInput,
+  Wo as ThreadFooter,
+  Yo as ThreadListItem,
   r as TileButton,
-  Yo as Toast,
-  er as Tooltip,
-  rr as TourPoint,
-  ar as UnreadBadge,
-  sr as UserAvatar,
-  lr as UserAvatarGroup,
+  er as Toast,
+  rr as Tooltip,
+  ar as TourPoint,
+  sr as UnreadBadge,
+  lr as UserAvatar,
+  pr as UserAvatarGroup,
   c as btnStyles,
-  ye as modalOverlayStyles,
-  Ir as toKebab,
-  pr as useControllable,
-  xr as useExitAnimation,
+  je as modalOverlayStyles,
+  vr as toKebab,
+  xr as useControllable,
+  ir as useExitAnimation,
   le as useIconSlotContext,
-  ir as useOutsideClose,
-  Mr as usePopoverTransition
+  Sr as useOutsideClose,
+  Ir as usePopoverTransition
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/utils/scrollLock.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=Symbol.for("@mattermost/compass-ui/scroll-lock/v1");function a(o){const e=globalThis;let t=e[s];t||(t=new WeakMap,e[s]=t);let n=t.get(o);return n||(n={count:0,savedOverflow:"",savedPaddingRight:""},t.set(o,n)),n}function r(o){var n;const e=o.documentElement.clientWidth,t=((n=o.defaultView)==null?void 0:n.innerWidth)??0;return e>0&&t>e?t-e:0}function u(o=typeof document>"u"?void 0:document){var i;if(!o)return()=>{};const{body:e}=o,t=a(o);if(t.count===0){const l=r(o);if(t.savedOverflow=e.style.overflow,t.savedPaddingRight=e.style.paddingRight,l>0){const d=parseFloat(((i=o.defaultView)==null?void 0:i.getComputedStyle(e).paddingRight)??"")||0;e.style.paddingRight=`${d+l}px`}e.style.overflow="hidden"}t.count+=1;let n=!1;return()=>{n||(n=!0,t.count-=1,t.count===0&&(e.style.overflow=t.savedOverflow,e.style.paddingRight=t.savedPaddingRight))}}exports.lockBodyScroll=u;
+//# sourceMappingURL=scrollLock.cjs.map

package/dist/utils/scrollLock.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollLock.cjs","sources":["../../src/utils/scrollLock.ts"],"sourcesContent":["interface ScrollLockState {\n  count: number;\n  savedOverflow: string;\n  savedPaddingRight: string;\n}\n\n// Shared on globalThis so every bundled compass-ui copy on the page counts the same locks.\nconst STATE_KEY = Symbol.for('@mattermost/compass-ui/scroll-lock/v1');\n\n// Keyed per document so a popout window or iframe locks and restores independently.\nfunction getState(doc: Document): ScrollLockState {\n  const host = globalThis as unknown as Record<\n    symbol,\n    WeakMap<Document, ScrollLockState> | undefined\n  >;\n  let states = host[STATE_KEY];\n  if (!states) {\n    states = new WeakMap();\n    host[STATE_KEY] = states;\n  }\n  let state = states.get(doc);\n  if (!state) {\n    state = { count: 0, savedOverflow: '', savedPaddingRight: '' };\n    states.set(doc, state);\n  }\n  return state;\n}\n\nfunction scrollbarWidth(doc: Document): number {\n  const viewport = doc.documentElement.clientWidth;\n  const outer = doc.defaultView?.innerWidth ?? 0;\n  // clientWidth is 0 in non-layout environments (jsdom); don't treat that as a scrollbar.\n  return viewport > 0 && outer > viewport ? outer - viewport : 0;\n}\n\n/**\n * Locks scroll on `doc.body` (default: the global `document`). Ref-counted so\n * stacked locks restore the original `overflow` only once the last one is\n * released. Pads the body by the scrollbar width so the page doesn't shift\n * sideways when the scrollbar disappears. Returns the release function; calling\n * it more than once is a no-op.\n */\nexport function lockBodyScroll(\n  doc: Document | undefined = typeof document === 'undefined'\n    ? undefined\n    : document,\n): () => void {\n  if (!doc) return () => {};\n\n  const { body } = doc;\n  const state = getState(doc);\n  if (state.count === 0) {\n    const gap = scrollbarWidth(doc);\n    state.savedOverflow = body.style.overflow;\n    state.savedPaddingRight = body.style.paddingRight;\n    if (gap > 0) {\n      const base =\n        parseFloat(\n          doc.defaultView?.getComputedStyle(body).paddingRight ?? '',\n        ) || 0;\n      body.style.paddingRight = `${base + gap}px`;\n    }\n    body.style.overflow = 'hidden';\n  }\n  state.count += 1;\n\n  let released = false;\n  return () => {\n    if (released) return;\n    released = true;\n    state.count -= 1;\n    if (state.count === 0) {\n      body.style.overflow = state.savedOverflow;\n      body.style.paddingRight = state.savedPaddingRight;\n    }\n  };\n}\n"],"names":["STATE_KEY","getState","doc","host","states","state","scrollbarWidth","viewport","outer","_a","lockBodyScroll","body","gap","base","released"],"mappings":"gFAOA,MAAMA,EAAY,OAAO,IAAI,uCAAuC,EAGpE,SAASC,EAASC,EAAgC,CAChD,MAAMC,EAAO,WAIb,IAAIC,EAASD,EAAKH,CAAS,EACtBI,IACHA,MAAa,QACbD,EAAKH,CAAS,EAAII,GAEpB,IAAIC,EAAQD,EAAO,IAAIF,CAAG,EAC1B,OAAKG,IACHA,EAAQ,CAAE,MAAO,EAAG,cAAe,GAAI,kBAAmB,EAAA,EAC1DD,EAAO,IAAIF,EAAKG,CAAK,GAEhBA,CACT,CAEA,SAASC,EAAeJ,EAAuB,OAC7C,MAAMK,EAAWL,EAAI,gBAAgB,YAC/BM,IAAQC,EAAAP,EAAI,cAAJ,YAAAO,EAAiB,aAAc,EAE7C,OAAOF,EAAW,GAAKC,EAAQD,EAAWC,EAAQD,EAAW,CAC/D,CASO,SAASG,EACdR,EAA4B,OAAO,SAAa,IAC5C,OACA,SACQ,OACZ,GAAI,CAACA,EAAK,MAAO,IAAM,CAAC,EAExB,KAAM,CAAE,KAAAS,GAAST,EACXG,EAAQJ,EAASC,CAAG,EAC1B,GAAIG,EAAM,QAAU,EAAG,CACrB,MAAMO,EAAMN,EAAeJ,CAAG,EAG9B,GAFAG,EAAM,cAAgBM,EAAK,MAAM,SACjCN,EAAM,kBAAoBM,EAAK,MAAM,aACjCC,EAAM,EAAG,CACX,MAAMC,EACJ,aACEJ,EAAAP,EAAI,cAAJ,YAAAO,EAAiB,iBAAiBE,GAAM,eAAgB,EAAA,GACrD,EACPA,EAAK,MAAM,aAAe,GAAGE,EAAOD,CAAG,IACzC,CACAD,EAAK,MAAM,SAAW,QACxB,CACAN,EAAM,OAAS,EAEf,IAAIS,EAAW,GACf,MAAO,IAAM,CACPA,IACJA,EAAW,GACXT,EAAM,OAAS,EACXA,EAAM,QAAU,IAClBM,EAAK,MAAM,SAAWN,EAAM,cAC5BM,EAAK,MAAM,aAAeN,EAAM,mBAEpC,CACF"}

package/dist/utils/scrollLock.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Locks scroll on `doc.body` (default: the global `document`). Ref-counted so
+ * stacked locks restore the original `overflow` only once the last one is
+ * released. Pads the body by the scrollbar width so the page doesn't shift
+ * sideways when the scrollbar disappears. Returns the release function; calling
+ * it more than once is a no-op.
+ */
+export declare function lockBodyScroll(doc?: Document | undefined): () => void;
+//# sourceMappingURL=scrollLock.d.ts.map

package/dist/utils/scrollLock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollLock.d.ts","sourceRoot":"","sources":["../../src/utils/scrollLock.ts"],"names":[],"mappings":"AAmCA;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,GAAG,GAAE,QAAQ,GAAG,SAEJ,GACX,MAAM,IAAI,CA8BZ"}

package/dist/utils/scrollLock.js

@@ -0,0 +1,38 @@
+const l = Symbol.for("@mattermost/compass-ui/scroll-lock/v1");
+function d(n) {
+  const e = globalThis;
+  let t = e[l];
+  t || (t = /* @__PURE__ */ new WeakMap(), e[l] = t);
+  let o = t.get(n);
+  return o || (o = { count: 0, savedOverflow: "", savedPaddingRight: "" }, t.set(n, o)), o;
+}
+function r(n) {
+  var o;
+  const e = n.documentElement.clientWidth, t = ((o = n.defaultView) == null ? void 0 : o.innerWidth) ?? 0;
+  return e > 0 && t > e ? t - e : 0;
+}
+function u(n = typeof document > "u" ? void 0 : document) {
+  var i;
+  if (!n) return () => {
+  };
+  const { body: e } = n, t = d(n);
+  if (t.count === 0) {
+    const s = r(n);
+    if (t.savedOverflow = e.style.overflow, t.savedPaddingRight = e.style.paddingRight, s > 0) {
+      const a = parseFloat(
+        ((i = n.defaultView) == null ? void 0 : i.getComputedStyle(e).paddingRight) ?? ""
+      ) || 0;
+      e.style.paddingRight = `${a + s}px`;
+    }
+    e.style.overflow = "hidden";
+  }
+  t.count += 1;
+  let o = !1;
+  return () => {
+    o || (o = !0, t.count -= 1, t.count === 0 && (e.style.overflow = t.savedOverflow, e.style.paddingRight = t.savedPaddingRight));
+  };
+}
+export {
+  u as lockBodyScroll
+};
+//# sourceMappingURL=scrollLock.js.map

package/dist/utils/scrollLock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollLock.js","sources":["../../src/utils/scrollLock.ts"],"sourcesContent":["interface ScrollLockState {\n  count: number;\n  savedOverflow: string;\n  savedPaddingRight: string;\n}\n\n// Shared on globalThis so every bundled compass-ui copy on the page counts the same locks.\nconst STATE_KEY = Symbol.for('@mattermost/compass-ui/scroll-lock/v1');\n\n// Keyed per document so a popout window or iframe locks and restores independently.\nfunction getState(doc: Document): ScrollLockState {\n  const host = globalThis as unknown as Record<\n    symbol,\n    WeakMap<Document, ScrollLockState> | undefined\n  >;\n  let states = host[STATE_KEY];\n  if (!states) {\n    states = new WeakMap();\n    host[STATE_KEY] = states;\n  }\n  let state = states.get(doc);\n  if (!state) {\n    state = { count: 0, savedOverflow: '', savedPaddingRight: '' };\n    states.set(doc, state);\n  }\n  return state;\n}\n\nfunction scrollbarWidth(doc: Document): number {\n  const viewport = doc.documentElement.clientWidth;\n  const outer = doc.defaultView?.innerWidth ?? 0;\n  // clientWidth is 0 in non-layout environments (jsdom); don't treat that as a scrollbar.\n  return viewport > 0 && outer > viewport ? outer - viewport : 0;\n}\n\n/**\n * Locks scroll on `doc.body` (default: the global `document`). Ref-counted so\n * stacked locks restore the original `overflow` only once the last one is\n * released. Pads the body by the scrollbar width so the page doesn't shift\n * sideways when the scrollbar disappears. Returns the release function; calling\n * it more than once is a no-op.\n */\nexport function lockBodyScroll(\n  doc: Document | undefined = typeof document === 'undefined'\n    ? undefined\n    : document,\n): () => void {\n  if (!doc) return () => {};\n\n  const { body } = doc;\n  const state = getState(doc);\n  if (state.count === 0) {\n    const gap = scrollbarWidth(doc);\n    state.savedOverflow = body.style.overflow;\n    state.savedPaddingRight = body.style.paddingRight;\n    if (gap > 0) {\n      const base =\n        parseFloat(\n          doc.defaultView?.getComputedStyle(body).paddingRight ?? '',\n        ) || 0;\n      body.style.paddingRight = `${base + gap}px`;\n    }\n    body.style.overflow = 'hidden';\n  }\n  state.count += 1;\n\n  let released = false;\n  return () => {\n    if (released) return;\n    released = true;\n    state.count -= 1;\n    if (state.count === 0) {\n      body.style.overflow = state.savedOverflow;\n      body.style.paddingRight = state.savedPaddingRight;\n    }\n  };\n}\n"],"names":["STATE_KEY","getState","doc","host","states","state","scrollbarWidth","_a","viewport","outer","lockBodyScroll","body","gap","base","released"],"mappings":"AAOA,MAAMA,IAAY,OAAO,IAAI,uCAAuC;AAGpE,SAASC,EAASC,GAAgC;AAChD,QAAMC,IAAO;AAIb,MAAIC,IAASD,EAAKH,CAAS;AAC3B,EAAKI,MACHA,wBAAa,QAAA,GACbD,EAAKH,CAAS,IAAII;AAEpB,MAAIC,IAAQD,EAAO,IAAIF,CAAG;AAC1B,SAAKG,MACHA,IAAQ,EAAE,OAAO,GAAG,eAAe,IAAI,mBAAmB,GAAA,GAC1DD,EAAO,IAAIF,GAAKG,CAAK,IAEhBA;AACT;AAEA,SAASC,EAAeJ,GAAuB;AArB/C,MAAAK;AAsBE,QAAMC,IAAWN,EAAI,gBAAgB,aAC/BO,MAAQF,IAAAL,EAAI,gBAAJ,gBAAAK,EAAiB,eAAc;AAE7C,SAAOC,IAAW,KAAKC,IAAQD,IAAWC,IAAQD,IAAW;AAC/D;AASO,SAASE,EACdR,IAA4B,OAAO,WAAa,MAC5C,SACA,UACQ;AAvCd,MAAAK;AAwCE,MAAI,CAACL,EAAK,QAAO,MAAM;AAAA,EAAC;AAExB,QAAM,EAAE,MAAAS,MAAST,GACXG,IAAQJ,EAASC,CAAG;AAC1B,MAAIG,EAAM,UAAU,GAAG;AACrB,UAAMO,IAAMN,EAAeJ,CAAG;AAG9B,QAFAG,EAAM,gBAAgBM,EAAK,MAAM,UACjCN,EAAM,oBAAoBM,EAAK,MAAM,cACjCC,IAAM,GAAG;AACX,YAAMC,IACJ;AAAA,UACEN,IAAAL,EAAI,gBAAJ,gBAAAK,EAAiB,iBAAiBI,GAAM,iBAAgB;AAAA,MAAA,KACrD;AACP,MAAAA,EAAK,MAAM,eAAe,GAAGE,IAAOD,CAAG;AAAA,IACzC;AACA,IAAAD,EAAK,MAAM,WAAW;AAAA,EACxB;AACA,EAAAN,EAAM,SAAS;AAEf,MAAIS,IAAW;AACf,SAAO,MAAM;AACX,IAAIA,MACJA,IAAW,IACXT,EAAM,SAAS,GACXA,EAAM,UAAU,MAClBM,EAAK,MAAM,WAAWN,EAAM,eAC5BM,EAAK,MAAM,eAAeN,EAAM;AAAA,EAEpC;AACF;"}

package/dist/utils/useOnExited.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react");function n(e,u,c=!0){const s=r.useRef(e),t=r.useRef(u);r.useEffect(()=>{t.current=u}),r.useEffect(()=>{var f;s.current&&!e&&c&&((f=t.current)==null||f.call(t)),s.current=e},[e,c])}exports.useOnExited=n;
+//# sourceMappingURL=useOnExited.cjs.map

package/dist/utils/useOnExited.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnExited.cjs","sources":["../../src/utils/useOnExited.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\n/**\n * Calls `onExited` once `mounted` flips from true to false. Not called if the\n * component unmounts during the exit. Pass `enabled={false}` to skip it (e.g. a\n * mount-controlled `Modal`). Internal: `hooks/` is a public subpath export.\n */\nexport function useOnExited(\n  mounted: boolean,\n  onExited: (() => void) | undefined,\n  enabled = true,\n) {\n  const wasMounted = useRef(mounted);\n  const onExitedRef = useRef(onExited);\n  // Declared before the exit effect so it commits the latest callback first.\n  useEffect(() => {\n    onExitedRef.current = onExited;\n  });\n\n  useEffect(() => {\n    if (wasMounted.current && !mounted && enabled) onExitedRef.current?.();\n    wasMounted.current = mounted;\n  }, [mounted, enabled]);\n}\n"],"names":["useOnExited","mounted","onExited","enabled","wasMounted","useRef","onExitedRef","useEffect"],"mappings":"yGAOO,SAASA,EACdC,EACAC,EACAC,EAAU,GACV,CACA,MAAMC,EAAaC,EAAAA,OAAOJ,CAAO,EAC3BK,EAAcD,EAAAA,OAAOH,CAAQ,EAEnCK,EAAAA,UAAU,IAAM,CACdD,EAAY,QAAUJ,CACxB,CAAC,EAEDK,EAAAA,UAAU,IAAM,OACVH,EAAW,SAAW,CAACH,GAAWE,SAAqB,2BAC3DC,EAAW,QAAUH,CACvB,EAAG,CAACA,EAASE,CAAO,CAAC,CACvB"}

package/dist/utils/useOnExited.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Calls `onExited` once `mounted` flips from true to false. Not called if the
+ * component unmounts during the exit. Pass `enabled={false}` to skip it (e.g. a
+ * mount-controlled `Modal`). Internal: `hooks/` is a public subpath export.
+ */
+export declare function useOnExited(mounted: boolean, onExited: (() => void) | undefined, enabled?: boolean): void;
+//# sourceMappingURL=useOnExited.d.ts.map

package/dist/utils/useOnExited.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnExited.d.ts","sourceRoot":"","sources":["../../src/utils/useOnExited.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,wBAAgB,WAAW,CACzB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,EAClC,OAAO,UAAO,QAaf"}

package/dist/utils/useOnExited.js

@@ -0,0 +1,14 @@
+import { useRef as f, useEffect as n } from "react";
+function o(r, t, u = !0) {
+  const s = f(r), c = f(t);
+  n(() => {
+    c.current = t;
+  }), n(() => {
+    var e;
+    s.current && !r && u && ((e = c.current) == null || e.call(c)), s.current = r;
+  }, [r, u]);
+}
+export {
+  o as useOnExited
+};
+//# sourceMappingURL=useOnExited.js.map

package/dist/utils/useOnExited.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnExited.js","sources":["../../src/utils/useOnExited.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\n/**\n * Calls `onExited` once `mounted` flips from true to false. Not called if the\n * component unmounts during the exit. Pass `enabled={false}` to skip it (e.g. a\n * mount-controlled `Modal`). Internal: `hooks/` is a public subpath export.\n */\nexport function useOnExited(\n  mounted: boolean,\n  onExited: (() => void) | undefined,\n  enabled = true,\n) {\n  const wasMounted = useRef(mounted);\n  const onExitedRef = useRef(onExited);\n  // Declared before the exit effect so it commits the latest callback first.\n  useEffect(() => {\n    onExitedRef.current = onExited;\n  });\n\n  useEffect(() => {\n    if (wasMounted.current && !mounted && enabled) onExitedRef.current?.();\n    wasMounted.current = mounted;\n  }, [mounted, enabled]);\n}\n"],"names":["useOnExited","mounted","onExited","enabled","wasMounted","useRef","onExitedRef","useEffect"],"mappings":";AAOO,SAASA,EACdC,GACAC,GACAC,IAAU,IACV;AACA,QAAMC,IAAaC,EAAOJ,CAAO,GAC3BK,IAAcD,EAAOH,CAAQ;AAEnC,EAAAK,EAAU,MAAM;AACd,IAAAD,EAAY,UAAUJ;AAAA,EACxB,CAAC,GAEDK,EAAU,MAAM;;AACd,IAAIH,EAAW,WAAW,CAACH,KAAWE,aAAqB,gCAC3DC,EAAW,UAAUH;AAAA,EACvB,GAAG,CAACA,GAASE,CAAO,CAAC;AACvB;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mattermost/compass-ui",
-  "version": "0.1.0-alpha.21",
+  "version": "0.1.0-alpha.22",
   "description": "Compass design system UI components for Mattermost products",
   "repository": {
     "type": "git",
@@ -76,6 +76,7 @@
     "@storybook/react": "^8.6.14",
     "@storybook/react-vite": "^8.6.14",
     "@storybook/test": "^8.6.14",
+    "@testing-library/user-event": "^14.5.2",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.3.4",