@mattermost/compass-ui 0.1.0-alpha.15 → 0.1.0-alpha.17

package/dist/components/field/useFieldClear.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFieldClear.cjs","sources":["../../../src/components/field/useFieldClear.ts"],"sourcesContent":["import type {\n  ChangeEvent,\n  KeyboardEvent,\n  RefObject,\n  SyntheticEvent,\n} from 'react';\nimport { useCallback } from 'react';\n\ntype FieldElement = HTMLInputElement | HTMLTextAreaElement;\n\nexport interface UseFieldClearOptions<T extends FieldElement> {\n  disabled?: boolean;\n  hasValue: boolean;\n  /** When false, clear is hidden and Escape does not clear. Default true. */\n  clearEnabled?: boolean;\n  isControlled: boolean;\n  onClear?: () => void;\n  onChange?: (e: ChangeEvent<T>) => void;\n  onKeyDown?: (e: KeyboardEvent<T>) => void;\n  inputRef: RefObject<T | null>;\n  setUncontrolledValue: (value: string) => void;\n}\n\n/** Minimal ChangeEvent so host `preventDefault` / `nativeEvent` access won't throw. */\nfunction createClearChangeEvent<T extends FieldElement>(\n  input: T,\n): ChangeEvent<T> {\n  let defaultPrevented = false;\n  let propagationStopped = false;\n  const nativeEvent = new Event('change', { bubbles: true, cancelable: true });\n\n  const event = {\n    nativeEvent,\n    type: 'change',\n    target: input,\n    currentTarget: input,\n    bubbles: true,\n    cancelable: true,\n    defaultPrevented: false,\n    eventPhase: 0,\n    isTrusted: false,\n    timeStamp: Date.now(),\n    preventDefault() {\n      defaultPrevented = true;\n      this.defaultPrevented = true;\n      nativeEvent.preventDefault?.();\n    },\n    isDefaultPrevented() {\n      return defaultPrevented;\n    },\n    stopPropagation() {\n      propagationStopped = true;\n      nativeEvent.stopPropagation?.();\n    },\n    isPropagationStopped() {\n      return propagationStopped;\n    },\n    persist() {},\n  } as ChangeEvent<T> & SyntheticEvent<T, Event>;\n\n  return event;\n}\n\nexport function useFieldClear<T extends FieldElement>({\n  disabled,\n  hasValue,\n  clearEnabled = true,\n  isControlled,\n  onClear,\n  onChange,\n  onKeyDown,\n  inputRef,\n  setUncontrolledValue,\n}: UseFieldClearOptions<T>) {\n  const showClearButton = Boolean(clearEnabled && hasValue && !disabled);\n\n  const handleClear = useCallback(() => {\n    if (disabled || !clearEnabled) return;\n\n    if (onClear) {\n      onClear();\n      inputRef.current?.focus();\n      return;\n    }\n\n    const input = inputRef.current;\n    if (input == null) return;\n\n    input.value = '';\n    if (!isControlled) setUncontrolledValue('');\n\n    onChange?.(createClearChangeEvent(input));\n    input.focus();\n  }, [\n    clearEnabled,\n    disabled,\n    inputRef,\n    isControlled,\n    onChange,\n    onClear,\n    setUncontrolledValue,\n  ]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<T>) => {\n      onKeyDown?.(e);\n      if (e.defaultPrevented || disabled || !clearEnabled) return;\n      if (e.key === 'Escape' && hasValue) {\n        e.preventDefault();\n        handleClear();\n      }\n    },\n    [clearEnabled, disabled, handleClear, hasValue, onKeyDown],\n  );\n\n  return { showClearButton, handleClear, handleKeyDown };\n}\n"],"names":["createClearChangeEvent","input","defaultPrevented","propagationStopped","nativeEvent","_a","useFieldClear","disabled","hasValue","clearEnabled","isControlled","onClear","onChange","onKeyDown","inputRef","setUncontrolledValue","showClearButton","handleClear","useCallback","handleKeyDown","e"],"mappings":"yGAwBA,SAASA,EACPC,EACgB,CAChB,IAAIC,EAAmB,GACnBC,EAAqB,GACzB,MAAMC,EAAc,IAAI,MAAM,SAAU,CAAE,QAAS,GAAM,WAAY,GAAM,EA+B3E,MA7Bc,CACZ,YAAAA,EACA,KAAM,SACN,OAAQH,EACR,cAAeA,EACf,QAAS,GACT,WAAY,GACZ,iBAAkB,GAClB,WAAY,EACZ,UAAW,GACX,UAAW,KAAK,IAAA,EAChB,gBAAiB,OACfC,EAAmB,GACnB,KAAK,iBAAmB,IACxBG,EAAAD,EAAY,iBAAZ,MAAAC,EAAA,KAAAD,EACF,EACA,oBAAqB,CACnB,OAAOF,CACT,EACA,iBAAkB,OAChBC,EAAqB,IACrBE,EAAAD,EAAY,kBAAZ,MAAAC,EAAA,KAAAD,EACF,EACA,sBAAuB,CACrB,OAAOD,CACT,EACA,SAAU,CAAC,CAAA,CAIf,CAEO,SAASG,EAAsC,CACpD,SAAAC,EACA,SAAAC,EACA,aAAAC,EAAe,GACf,aAAAC,EACA,QAAAC,EACA,SAAAC,EACA,UAAAC,EACA,SAAAC,EACA,qBAAAC,CACF,EAA4B,CAC1B,MAAMC,EAAkB,GAAQP,GAAgBD,GAAY,CAACD,GAEvDU,EAAcC,EAAAA,YAAY,IAAM,OACpC,GAAIX,GAAY,CAACE,EAAc,OAE/B,GAAIE,EAAS,CACXA,EAAA,GACAN,EAAAS,EAAS,UAAT,MAAAT,EAAkB,QAClB,MACF,CAEA,MAAMJ,EAAQa,EAAS,QACnBb,GAAS,OAEbA,EAAM,MAAQ,GACTS,GAAcK,EAAqB,EAAE,EAE1CH,GAAA,MAAAA,EAAWZ,EAAuBC,CAAK,GACvCA,EAAM,MAAA,EACR,EAAG,CACDQ,EACAF,EACAO,EACAJ,EACAE,EACAD,EACAI,CAAA,CACD,EAEKI,EAAgBD,EAAAA,YACnBE,GAAwB,CACvBP,GAAA,MAAAA,EAAYO,GACR,EAAAA,EAAE,kBAAoBb,GAAY,CAACE,IACnCW,EAAE,MAAQ,UAAYZ,IACxBY,EAAE,eAAA,EACFH,EAAA,EAEJ,EACA,CAACR,EAAcF,EAAUU,EAAaT,EAAUK,CAAS,CAAA,EAG3D,MAAO,CAAE,gBAAAG,EAAiB,YAAAC,EAAa,cAAAE,CAAA,CACzC"}

package/dist/components/field/useFieldClear.d.ts

@@ -0,0 +1,21 @@
+import { ChangeEvent, KeyboardEvent, RefObject } from 'react';
+type FieldElement = HTMLInputElement | HTMLTextAreaElement;
+export interface UseFieldClearOptions<T extends FieldElement> {
+    disabled?: boolean;
+    hasValue: boolean;
+    /** When false, clear is hidden and Escape does not clear. Default true. */
+    clearEnabled?: boolean;
+    isControlled: boolean;
+    onClear?: () => void;
+    onChange?: (e: ChangeEvent<T>) => void;
+    onKeyDown?: (e: KeyboardEvent<T>) => void;
+    inputRef: RefObject<T | null>;
+    setUncontrolledValue: (value: string) => void;
+}
+export declare function useFieldClear<T extends FieldElement>({ disabled, hasValue, clearEnabled, isControlled, onClear, onChange, onKeyDown, inputRef, setUncontrolledValue, }: UseFieldClearOptions<T>): {
+    showClearButton: boolean;
+    handleClear: () => void;
+    handleKeyDown: (e: KeyboardEvent<T>) => void;
+};
+export {};
+//# sourceMappingURL=useFieldClear.d.ts.map

package/dist/components/field/useFieldClear.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFieldClear.d.ts","sourceRoot":"","sources":["../../../src/components/field/useFieldClear.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EACX,aAAa,EACb,SAAS,EAEV,MAAM,OAAO,CAAC;AAGf,KAAK,YAAY,GAAG,gBAAgB,GAAG,mBAAmB,CAAC;AAE3D,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,YAAY;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;IAC9B,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AA0CD,wBAAgB,aAAa,CAAC,CAAC,SAAS,YAAY,EAAE,EACpD,QAAQ,EACR,QAAQ,EACR,YAAmB,EACnB,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,oBAAoB,GACrB,EAAE,oBAAoB,CAAC,CAAC,CAAC;;;uBA+BlB,aAAa,CAAC,CAAC,CAAC;EAYvB"}

package/dist/components/field/useFieldClear.js

@@ -0,0 +1,73 @@
+import { useCallback as o } from "react";
+function g(u) {
+  let s = !1, f = !1;
+  const t = new Event("change", { bubbles: !0, cancelable: !0 });
+  return {
+    nativeEvent: t,
+    type: "change",
+    target: u,
+    currentTarget: u,
+    bubbles: !0,
+    cancelable: !0,
+    defaultPrevented: !1,
+    eventPhase: 0,
+    isTrusted: !1,
+    timeStamp: Date.now(),
+    preventDefault() {
+      var e;
+      s = !0, this.defaultPrevented = !0, (e = t.preventDefault) == null || e.call(t);
+    },
+    isDefaultPrevented() {
+      return s;
+    },
+    stopPropagation() {
+      var e;
+      f = !0, (e = t.stopPropagation) == null || e.call(t);
+    },
+    isPropagationStopped() {
+      return f;
+    },
+    persist() {
+    }
+  };
+}
+function S({
+  disabled: u,
+  hasValue: s,
+  clearEnabled: f = !0,
+  isControlled: t,
+  onClear: p,
+  onChange: e,
+  onKeyDown: a,
+  inputRef: c,
+  setUncontrolledValue: l
+}) {
+  const P = !!(f && s && !u), n = o(() => {
+    var i;
+    if (u || !f) return;
+    if (p) {
+      p(), (i = c.current) == null || i.focus();
+      return;
+    }
+    const r = c.current;
+    r != null && (r.value = "", t || l(""), e == null || e(g(r)), r.focus());
+  }, [
+    f,
+    u,
+    c,
+    t,
+    e,
+    p,
+    l
+  ]), v = o(
+    (r) => {
+      a == null || a(r), !(r.defaultPrevented || u || !f) && r.key === "Escape" && s && (r.preventDefault(), n());
+    },
+    [f, u, n, s, a]
+  );
+  return { showClearButton: P, handleClear: n, handleKeyDown: v };
+}
+export {
+  S as useFieldClear
+};
+//# sourceMappingURL=useFieldClear.js.map

package/dist/components/field/useFieldClear.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFieldClear.js","sources":["../../../src/components/field/useFieldClear.ts"],"sourcesContent":["import type {\n  ChangeEvent,\n  KeyboardEvent,\n  RefObject,\n  SyntheticEvent,\n} from 'react';\nimport { useCallback } from 'react';\n\ntype FieldElement = HTMLInputElement | HTMLTextAreaElement;\n\nexport interface UseFieldClearOptions<T extends FieldElement> {\n  disabled?: boolean;\n  hasValue: boolean;\n  /** When false, clear is hidden and Escape does not clear. Default true. */\n  clearEnabled?: boolean;\n  isControlled: boolean;\n  onClear?: () => void;\n  onChange?: (e: ChangeEvent<T>) => void;\n  onKeyDown?: (e: KeyboardEvent<T>) => void;\n  inputRef: RefObject<T | null>;\n  setUncontrolledValue: (value: string) => void;\n}\n\n/** Minimal ChangeEvent so host `preventDefault` / `nativeEvent` access won't throw. */\nfunction createClearChangeEvent<T extends FieldElement>(\n  input: T,\n): ChangeEvent<T> {\n  let defaultPrevented = false;\n  let propagationStopped = false;\n  const nativeEvent = new Event('change', { bubbles: true, cancelable: true });\n\n  const event = {\n    nativeEvent,\n    type: 'change',\n    target: input,\n    currentTarget: input,\n    bubbles: true,\n    cancelable: true,\n    defaultPrevented: false,\n    eventPhase: 0,\n    isTrusted: false,\n    timeStamp: Date.now(),\n    preventDefault() {\n      defaultPrevented = true;\n      this.defaultPrevented = true;\n      nativeEvent.preventDefault?.();\n    },\n    isDefaultPrevented() {\n      return defaultPrevented;\n    },\n    stopPropagation() {\n      propagationStopped = true;\n      nativeEvent.stopPropagation?.();\n    },\n    isPropagationStopped() {\n      return propagationStopped;\n    },\n    persist() {},\n  } as ChangeEvent<T> & SyntheticEvent<T, Event>;\n\n  return event;\n}\n\nexport function useFieldClear<T extends FieldElement>({\n  disabled,\n  hasValue,\n  clearEnabled = true,\n  isControlled,\n  onClear,\n  onChange,\n  onKeyDown,\n  inputRef,\n  setUncontrolledValue,\n}: UseFieldClearOptions<T>) {\n  const showClearButton = Boolean(clearEnabled && hasValue && !disabled);\n\n  const handleClear = useCallback(() => {\n    if (disabled || !clearEnabled) return;\n\n    if (onClear) {\n      onClear();\n      inputRef.current?.focus();\n      return;\n    }\n\n    const input = inputRef.current;\n    if (input == null) return;\n\n    input.value = '';\n    if (!isControlled) setUncontrolledValue('');\n\n    onChange?.(createClearChangeEvent(input));\n    input.focus();\n  }, [\n    clearEnabled,\n    disabled,\n    inputRef,\n    isControlled,\n    onChange,\n    onClear,\n    setUncontrolledValue,\n  ]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<T>) => {\n      onKeyDown?.(e);\n      if (e.defaultPrevented || disabled || !clearEnabled) return;\n      if (e.key === 'Escape' && hasValue) {\n        e.preventDefault();\n        handleClear();\n      }\n    },\n    [clearEnabled, disabled, handleClear, hasValue, onKeyDown],\n  );\n\n  return { showClearButton, handleClear, handleKeyDown };\n}\n"],"names":["createClearChangeEvent","input","defaultPrevented","propagationStopped","nativeEvent","_a","useFieldClear","disabled","hasValue","clearEnabled","isControlled","onClear","onChange","onKeyDown","inputRef","setUncontrolledValue","showClearButton","handleClear","useCallback","handleKeyDown","e"],"mappings":";AAwBA,SAASA,EACPC,GACgB;AAChB,MAAIC,IAAmB,IACnBC,IAAqB;AACzB,QAAMC,IAAc,IAAI,MAAM,UAAU,EAAE,SAAS,IAAM,YAAY,IAAM;AA+B3E,SA7Bc;AAAA,IACZ,aAAAA;AAAA,IACA,MAAM;AAAA,IACN,QAAQH;AAAA,IACR,eAAeA;AAAA,IACf,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,WAAW,KAAK,IAAA;AAAA,IAChB,iBAAiB;;AACf,MAAAC,IAAmB,IACnB,KAAK,mBAAmB,KACxBG,IAAAD,EAAY,mBAAZ,QAAAC,EAAA,KAAAD;AAAA,IACF;AAAA,IACA,qBAAqB;AACnB,aAAOF;AAAA,IACT;AAAA,IACA,kBAAkB;;AAChB,MAAAC,IAAqB,KACrBE,IAAAD,EAAY,oBAAZ,QAAAC,EAAA,KAAAD;AAAA,IACF;AAAA,IACA,uBAAuB;AACrB,aAAOD;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IAAC;AAAA,EAAA;AAIf;AAEO,SAASG,EAAsC;AAAA,EACpD,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,cAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,sBAAAC;AACF,GAA4B;AAC1B,QAAMC,IAAkB,GAAQP,KAAgBD,KAAY,CAACD,IAEvDU,IAAcC,EAAY,MAAM;;AACpC,QAAIX,KAAY,CAACE,EAAc;AAE/B,QAAIE,GAAS;AACX,MAAAA,EAAA,IACAN,IAAAS,EAAS,YAAT,QAAAT,EAAkB;AAClB;AAAA,IACF;AAEA,UAAMJ,IAAQa,EAAS;AACvB,IAAIb,KAAS,SAEbA,EAAM,QAAQ,IACTS,KAAcK,EAAqB,EAAE,GAE1CH,KAAA,QAAAA,EAAWZ,EAAuBC,CAAK,IACvCA,EAAM,MAAA;AAAA,EACR,GAAG;AAAA,IACDQ;AAAA,IACAF;AAAA,IACAO;AAAA,IACAJ;AAAA,IACAE;AAAA,IACAD;AAAA,IACAI;AAAA,EAAA,CACD,GAEKI,IAAgBD;AAAA,IACpB,CAACE,MAAwB;AAEvB,MADAP,KAAA,QAAAA,EAAYO,IACR,EAAAA,EAAE,oBAAoBb,KAAY,CAACE,MACnCW,EAAE,QAAQ,YAAYZ,MACxBY,EAAE,eAAA,GACFH,EAAA;AAAA,IAEJ;AAAA,IACA,CAACR,GAAcF,GAAUU,GAAaT,GAAUK,CAAS;AAAA,EAAA;AAG3D,SAAO,EAAE,iBAAAG,GAAiB,aAAAC,GAAa,eAAAE,EAAA;AACzC;"}

package/dist/components/field-message/FieldMessage.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__u=require("@mattermost/compass-icons/components/alert-circle-outline.js"),u=__u?.default??__u,__d=require("@mattermost/compass-icons/components/alert-outline.js"),d=__d?.default??__d,__f=require("@mattermost/compass-icons/components/check.js"),f=__f?.default??__f,g=require("../icon/Icon.cjs"),j=require("../../utils/string.cjs"),r=require("./FieldMessage.module.scss.cjs"),m={error:e.jsx(u,{}),warning:e.jsx(d,{}),success:e.jsx(f,{})};function x({className:n="",message:i,tone:s="error",...l}){const o=r.default[`field-message--tone-${j.toKebab(s)}`],a=[r.default["field-message"],o,n].filter(Boolean).join(" "),c=s==="error"||s==="warning",t=m[s];return e.jsxs("div",{...l,className:a,role:c?"alert":l.role,children:[t!=null&&e.jsx("span",{className:r.default["field-message__icon"],"aria-hidden":!0,children:e.jsx(g.default,{size:"12",glyph:t})}),e.jsx("span",{className:r.default["field-message__text"],children:i})]})}exports.default=x;
+//# sourceMappingURL=FieldMessage.cjs.map

package/dist/components/field-message/FieldMessage.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldMessage.cjs","sources":["../../../src/components/field-message/FieldMessage.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport AlertCircleOutlineIcon from '@mattermost/compass-icons/components/alert-circle-outline';\nimport AlertOutlineIcon from '@mattermost/compass-icons/components/alert-outline';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport Icon from '@/components/icon/Icon';\nimport { toKebab } from '@/utils/string';\nimport styles from './FieldMessage.module.scss';\n\nexport type FieldMessageTone = 'error' | 'warning' | 'info' | 'success';\n\nexport interface FieldMessageProps extends HTMLAttributes<HTMLDivElement> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** The message. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  message: ReactNode;\n  /** Visual tone. Default: `error`. Info has no icon. */\n  tone?: FieldMessageTone;\n}\n\nconst TONE_ICONS: Partial<Record<FieldMessageTone, ReactNode>> = {\n  error: <AlertCircleOutlineIcon />,\n  warning: <AlertOutlineIcon />,\n  success: <CheckIcon />,\n};\n\n/**\n * Field Message is the inline status line under a form field — validation errors, warnings,\n * hints, or success. Error, warning, and success pair a tone glyph with the copy; info is\n * text-only at muted center-channel color.\n */\nexport default function FieldMessage({\n  className = '',\n  message,\n  tone = 'error',\n  ...rest\n}: FieldMessageProps) {\n  const toneClass = styles[`field-message--tone-${toKebab(tone)}`];\n  const rootClass = [styles['field-message'], toneClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const isAlert = tone === 'error' || tone === 'warning';\n  const glyph = TONE_ICONS[tone];\n\n  return (\n    <div {...rest} className={rootClass} role={isAlert ? 'alert' : rest.role}>\n      {glyph != null && (\n        <span className={styles['field-message__icon']} aria-hidden>\n          <Icon size=\"12\" glyph={glyph} />\n        </span>\n      )}\n      <span className={styles['field-message__text']}>{message}</span>\n    </div>\n  );\n}\n"],"names":["TONE_ICONS","AlertCircleOutlineIcon","AlertOutlineIcon","CheckIcon","FieldMessage","className","message","tone","rest","toneClass","styles","toKebab","rootClass","isAlert","glyph","jsxs","jsx","Icon"],"mappings":"8bAmBMA,EAA2D,CAC/D,YAAQC,EAAA,EAAuB,EAC/B,cAAUC,EAAA,EAAiB,EAC3B,cAAUC,EAAA,CAAA,CAAU,CACtB,EAOA,SAAwBC,EAAa,CACnC,UAAAC,EAAY,GACZ,QAAAC,EACA,KAAAC,EAAO,QACP,GAAGC,CACL,EAAsB,CACpB,MAAMC,EAAYC,EAAAA,QAAO,uBAAuBC,EAAAA,QAAQJ,CAAI,CAAC,EAAE,EACzDK,EAAY,CAACF,UAAO,eAAe,EAAGD,EAAWJ,CAAS,EAC7D,OAAO,OAAO,EACd,KAAK,GAAG,EAELQ,EAAUN,IAAS,SAAWA,IAAS,UACvCO,EAAQd,EAAWO,CAAI,EAE7B,OACEQ,EAAAA,KAAC,MAAA,CAAK,GAAGP,EAAM,UAAWI,EAAW,KAAMC,EAAU,QAAUL,EAAK,KACjE,SAAA,CAAAM,GAAS,MACRE,MAAC,OAAA,CAAK,UAAWN,EAAAA,QAAO,qBAAqB,EAAG,cAAW,GACzD,SAAAM,EAAAA,IAACC,UAAA,CAAK,KAAK,KAAK,MAAAH,EAAc,EAChC,QAED,OAAA,CAAK,UAAWJ,EAAAA,QAAO,qBAAqB,EAAI,SAAAJ,CAAA,CAAQ,CAAA,EAC3D,CAEJ"}

package/dist/components/field-message/FieldMessage.css

@@ -0,0 +1 @@
+._field-message_10eh8_2{display:flex;align-items:flex-start;gap:var(--spacing-xxs)}._field-message__icon_10eh8_7{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding-top:2px}._field-message__text_10eh8_14{font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:var(--line-height-75);flex:1 0 0;min-width:0}._field-message--tone-error_10eh8_21 ._field-message__icon_10eh8_7,._field-message--tone-error_10eh8_21 ._field-message__text_10eh8_14{color:var(--error-text, var(--color-danger))}._field-message--tone-warning_10eh8_25 ._field-message__icon_10eh8_7,._field-message--tone-warning_10eh8_25 ._field-message__text_10eh8_14{color:var(--away-indicator, var(--color-warning))}._field-message--tone-info_10eh8_29 ._field-message__text_10eh8_14{color:rgba(var(--center-channel-color-rgb),.75)}._field-message--tone-success_10eh8_32 ._field-message__icon_10eh8_7,._field-message--tone-success_10eh8_32 ._field-message__text_10eh8_14{color:var(--online-indicator, var(--color-success))}

package/dist/components/field-message/FieldMessage.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type FieldMessageTone = 'error' | 'warning' | 'info' | 'success';
+export interface FieldMessageProps extends HTMLAttributes<HTMLDivElement> {
+    /** Optional CSS class name. */
+    className?: string;
+    /** The message. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
+    message: ReactNode;
+    /** Visual tone. Default: `error`. Info has no icon. */
+    tone?: FieldMessageTone;
+}
+/**
+ * Field Message is the inline status line under a form field — validation errors, warnings,
+ * hints, or success. Error, warning, and success pair a tone glyph with the copy; info is
+ * text-only at muted center-channel color.
+ */
+export default function FieldMessage({ className, message, tone, ...rest }: FieldMessageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FieldMessage.d.ts.map

package/dist/components/field-message/FieldMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldMessage.d.ts","sourceRoot":"","sources":["../../../src/components/field-message/FieldMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvD,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;AAExE,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,OAAO,EAAE,SAAS,CAAC;IACnB,uDAAuD;IACvD,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAQD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,SAAc,EACd,OAAO,EACP,IAAc,EACd,GAAG,IAAI,EACR,EAAE,iBAAiB,2CAmBnB"}

package/dist/components/field-message/FieldMessage.js

@@ -0,0 +1,28 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import __f from "@mattermost/compass-icons/components/alert-circle-outline.js";const f=__f&&__f.default?__f.default:__f;
+import __d from "@mattermost/compass-icons/components/alert-outline.js";const d=__d&&__d.default?__d.default:__d;
+import __p from "@mattermost/compass-icons/components/check.js";const p=__p&&__p.default?__p.default:__p;
+import g from "../icon/Icon.js";
+import { toKebab as u } from "../../utils/string.js";
+import s from "./FieldMessage.module.scss.js";
+const h = {
+  error: /* @__PURE__ */ e(f, {}),
+  warning: /* @__PURE__ */ e(d, {}),
+  success: /* @__PURE__ */ e(p, {})
+};
+function A({
+  className: l = "",
+  message: n,
+  tone: r = "error",
+  ...o
+}) {
+  const t = s[`field-message--tone-${u(r)}`], a = [s["field-message"], t, l].filter(Boolean).join(" "), c = r === "error" || r === "warning", i = h[r];
+  return /* @__PURE__ */ m("div", { ...o, className: a, role: c ? "alert" : o.role, children: [
+    i != null && /* @__PURE__ */ e("span", { className: s["field-message__icon"], "aria-hidden": !0, children: /* @__PURE__ */ e(g, { size: "12", glyph: i }) }),
+    /* @__PURE__ */ e("span", { className: s["field-message__text"], children: n })
+  ] });
+}
+export {
+  A as default
+};
+//# sourceMappingURL=FieldMessage.js.map

package/dist/components/field-message/FieldMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldMessage.js","sources":["../../../src/components/field-message/FieldMessage.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport AlertCircleOutlineIcon from '@mattermost/compass-icons/components/alert-circle-outline';\nimport AlertOutlineIcon from '@mattermost/compass-icons/components/alert-outline';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport Icon from '@/components/icon/Icon';\nimport { toKebab } from '@/utils/string';\nimport styles from './FieldMessage.module.scss';\n\nexport type FieldMessageTone = 'error' | 'warning' | 'info' | 'success';\n\nexport interface FieldMessageProps extends HTMLAttributes<HTMLDivElement> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** The message. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  message: ReactNode;\n  /** Visual tone. Default: `error`. Info has no icon. */\n  tone?: FieldMessageTone;\n}\n\nconst TONE_ICONS: Partial<Record<FieldMessageTone, ReactNode>> = {\n  error: <AlertCircleOutlineIcon />,\n  warning: <AlertOutlineIcon />,\n  success: <CheckIcon />,\n};\n\n/**\n * Field Message is the inline status line under a form field — validation errors, warnings,\n * hints, or success. Error, warning, and success pair a tone glyph with the copy; info is\n * text-only at muted center-channel color.\n */\nexport default function FieldMessage({\n  className = '',\n  message,\n  tone = 'error',\n  ...rest\n}: FieldMessageProps) {\n  const toneClass = styles[`field-message--tone-${toKebab(tone)}`];\n  const rootClass = [styles['field-message'], toneClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const isAlert = tone === 'error' || tone === 'warning';\n  const glyph = TONE_ICONS[tone];\n\n  return (\n    <div {...rest} className={rootClass} role={isAlert ? 'alert' : rest.role}>\n      {glyph != null && (\n        <span className={styles['field-message__icon']} aria-hidden>\n          <Icon size=\"12\" glyph={glyph} />\n        </span>\n      )}\n      <span className={styles['field-message__text']}>{message}</span>\n    </div>\n  );\n}\n"],"names":["TONE_ICONS","AlertCircleOutlineIcon","AlertOutlineIcon","CheckIcon","FieldMessage","className","message","tone","rest","toneClass","styles","toKebab","rootClass","isAlert","glyph","jsxs","jsx","Icon"],"mappings":";;;;;;;AAmBA,MAAMA,IAA2D;AAAA,EAC/D,yBAAQC,GAAA,EAAuB;AAAA,EAC/B,2BAAUC,GAAA,EAAiB;AAAA,EAC3B,2BAAUC,GAAA,CAAA,CAAU;AACtB;AAOA,SAAwBC,EAAa;AAAA,EACnC,WAAAC,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GAAsB;AACpB,QAAMC,IAAYC,EAAO,uBAAuBC,EAAQJ,CAAI,CAAC,EAAE,GACzDK,IAAY,CAACF,EAAO,eAAe,GAAGD,GAAWJ,CAAS,EAC7D,OAAO,OAAO,EACd,KAAK,GAAG,GAELQ,IAAUN,MAAS,WAAWA,MAAS,WACvCO,IAAQd,EAAWO,CAAI;AAE7B,SACE,gBAAAQ,EAAC,OAAA,EAAK,GAAGP,GAAM,WAAWI,GAAW,MAAMC,IAAU,UAAUL,EAAK,MACjE,UAAA;AAAA,IAAAM,KAAS,QACR,gBAAAE,EAAC,QAAA,EAAK,WAAWN,EAAO,qBAAqB,GAAG,eAAW,IACzD,UAAA,gBAAAM,EAACC,GAAA,EAAK,MAAK,MAAK,OAAAH,GAAc,GAChC;AAAA,sBAED,QAAA,EAAK,WAAWJ,EAAO,qBAAqB,GAAI,UAAAJ,EAAA,CAAQ;AAAA,EAAA,GAC3D;AAEJ;"}

package/dist/components/field-message/FieldMessage.module.scss.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./FieldMessage.css');const e={"field-message":"_field-message_10eh8_2","field-message__icon":"_field-message__icon_10eh8_7","field-message__text":"_field-message__text_10eh8_14","field-message--tone-error":"_field-message--tone-error_10eh8_21","field-message--tone-warning":"_field-message--tone-warning_10eh8_25","field-message--tone-info":"_field-message--tone-info_10eh8_29","field-message--tone-success":"_field-message--tone-success_10eh8_32"};exports.default=e;
+//# sourceMappingURL=FieldMessage.module.scss.cjs.map

package/dist/components/field-message/FieldMessage.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldMessage.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/field-message/FieldMessage.module.scss.js

@@ -0,0 +1,13 @@
+import './FieldMessage.css';const e = {
+  "field-message": "_field-message_10eh8_2",
+  "field-message__icon": "_field-message__icon_10eh8_7",
+  "field-message__text": "_field-message__text_10eh8_14",
+  "field-message--tone-error": "_field-message--tone-error_10eh8_21",
+  "field-message--tone-warning": "_field-message--tone-warning_10eh8_25",
+  "field-message--tone-info": "_field-message--tone-info_10eh8_29",
+  "field-message--tone-success": "_field-message--tone-success_10eh8_32"
+};
+export {
+  e as default
+};
+//# sourceMappingURL=FieldMessage.module.scss.js.map

package/dist/components/field-message/FieldMessage.module.scss.js.map

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

package/dist/components/field-message/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./FieldMessage.cjs");exports.FieldMessage=e.default;
+//# sourceMappingURL=index.cjs.map

package/dist/components/field-message/index.cjs.map

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

package/dist/components/field-message/index.d.ts

@@ -0,0 +1,3 @@
+export { default as FieldMessage } from './FieldMessage';
+export type { FieldMessageProps, FieldMessageTone } from './FieldMessage';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/field-message/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/field-message/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/field-message/index.js

@@ -0,0 +1,5 @@
+import { default as s } from "./FieldMessage.js";
+export {
+  s as FieldMessage
+};
+//# sourceMappingURL=index.js.map

package/dist/components/field-message/index.js.map

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

package/dist/components/menu-item/MenuItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.cjs","sources":["../../../src/components/menu-item/MenuItem.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport EmoticonHappyOutlineIcon from '@mattermost/compass-icons/components/emoticon-happy-outline';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Tag from '@/components/tag/Tag';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport styles from './MenuItem.module.scss';\n\nexport interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Primary label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  /** Optional secondary label. */\n  secondaryLabel?: ReactNode;\n  /** Where the secondary label appears. Default: 'below'. */\n  secondaryLabelPosition?: 'inline' | 'below';\n  /** Custom content for the leading slot. When omitted, shows placeholder icon. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\n  leadingVisual?: ReactNode;\n  /** Show the leading visual slot. Default: true. */\n  leadingElement?: boolean;\n  /** Custom content for the trailing slot. When omitted with trailingElement=true, shows check icon. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\n  trailingVisual?: ReactNode;\n  /** Show the trailing visual slot. Default: false. */\n  trailingElement?: boolean;\n  /** Emoji character for custom status, shown inline after the label. */\n  customStatusEmoji?: string;\n  /** Show \"NEW\" label tag. */\n  tag?: boolean;\n  /** Text of the `tag`. Default: \"NEW\". */\n  tagLabel?: ReactNode;\n  /** Inline mention count badge. */\n  mentionCount?: number;\n  /** Destructive (danger) styling. */\n  destructive?: boolean;\n  /** Highlight row (e.g. submenu parent while child menu is open). */\n  active?: boolean;\n}\n\n/**\n * Menu Items are the rows inside a Menu — the smallest selectable unit in any dropdown,\n * kebab, or context menu. One label, optional supporting visuals, and a clear hit target.\n */\nconst MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(function MenuItem(\n  {\n    label,\n    secondaryLabel,\n    secondaryLabelPosition = 'below',\n    leadingVisual,\n    leadingElement = true,\n    trailingVisual,\n    trailingElement = false,\n    customStatusEmoji,\n    tag = false,\n    tagLabel = 'NEW',\n    mentionCount,\n    destructive = false,\n    active = false,\n    className = '',\n    disabled,\n    type = 'button',\n    ...rest\n  },\n  ref,\n) {\n  const rootClass = [\n    styles['menu-item'],\n    destructive ? styles['menu-item--destructive'] : '',\n    active ? styles['menu-item--active'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      ref={ref}\n      className={rootClass}\n      type={type}\n      disabled={disabled}\n      {...rest}\n    >\n      <div className={styles['menu-item__content']}>\n        {leadingElement && (\n          <div className={styles['menu-item__left']}>\n            <span className={styles['menu-item__leading-visual']} aria-hidden>\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {leadingVisual ?? (\n                  <Icon glyph={<EmoticonHappyOutlineIcon />} size=\"16\" />\n                )}\n              </IconSlotContext.Provider>\n            </span>\n          </div>\n        )}\n        <div className={styles['menu-item__middle']}>\n          <div className={styles['menu-item__top-row']}>\n            <span className={styles['menu-item__label']}>{label}</span>\n            {secondaryLabel && secondaryLabelPosition === 'inline' && (\n              <span className={styles['menu-item__secondary-label-inline']}>\n                {secondaryLabel}\n              </span>\n            )}\n            {customStatusEmoji && (\n              <span className={styles['menu-item__custom-status']} aria-hidden>\n                {customStatusEmoji}\n              </span>\n            )}\n            {tag && <Tag label={tagLabel} />}\n            {mentionCount != null && mentionCount > 0 && (\n              <MentionBadge\n                count={mentionCount}\n                location=\"menu-item\"\n                size=\"small\"\n              />\n            )}\n          </div>\n          {secondaryLabel && secondaryLabelPosition === 'below' && (\n            <div className={styles['menu-item__bottom-row']}>\n              <span className={styles['menu-item__secondary-label-below']}>\n                {secondaryLabel}\n              </span>\n            </div>\n          )}\n        </div>\n        {trailingElement && (\n          <div className={styles['menu-item__right']}>\n            <span\n              className={[\n                styles['menu-item__trailing-visual'],\n                !trailingVisual\n                  ? styles['menu-item__trailing-visual--check']\n                  : '',\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {trailingVisual ?? <Icon glyph={<CheckIcon />} size=\"16\" />}\n              </IconSlotContext.Provider>\n            </span>\n          </div>\n        )}\n      </div>\n    </button>\n  );\n});\n\nMenuItem.displayName = 'MenuItem';\n\nexport default MenuItem;\n"],"names":["MenuItem","forwardRef","label","secondaryLabel","secondaryLabelPosition","leadingVisual","leadingElement","trailingVisual","trailingElement","customStatusEmoji","tag","tagLabel","mentionCount","destructive","active","className","disabled","type","rest","ref","rootClass","styles","jsx","jsxs","IconSlotContext","Icon","EmoticonHappyOutlineIcon","Tag","MentionBadge","CheckIcon"],"mappings":"qbA0CMA,EAAWC,EAAAA,WAA6C,SAC5D,CACE,MAAAC,EACA,eAAAC,EACA,uBAAAC,EAAyB,QACzB,cAAAC,EACA,eAAAC,EAAiB,GACjB,eAAAC,EACA,gBAAAC,EAAkB,GAClB,kBAAAC,EACA,IAAAC,EAAM,GACN,SAAAC,EAAW,MACX,aAAAC,EACA,YAAAC,EAAc,GACd,OAAAC,EAAS,GACT,UAAAC,EAAY,GACZ,SAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAY,CAChBC,EAAAA,QAAO,WAAW,EAClBR,EAAcQ,EAAAA,QAAO,wBAAwB,EAAI,GACjDP,EAASO,EAAAA,QAAO,mBAAmB,EAAI,GACvCN,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEO,EAAAA,IAAC,SAAA,CACC,IAAAH,EACA,UAAWC,EACX,KAAAH,EACA,SAAAD,EACC,GAAGE,EAEJ,SAAAK,EAAAA,KAAC,MAAA,CAAI,UAAWF,UAAO,oBAAoB,EACxC,SAAA,CAAAf,GACCgB,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,iBAAiB,EACtC,SAAAC,EAAAA,IAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,2BAA2B,EAAG,cAAW,GAC/D,eAACG,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,YACCF,EAAAA,IAACG,UAAA,CAAK,MAAOH,MAACI,IAAyB,EAAI,KAAK,KAAK,CAAA,CAEzD,EACF,EACF,EAEFH,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,mBAAmB,EACxC,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,oBAAoB,EACzC,SAAA,CAAAC,MAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,kBAAkB,EAAI,SAAAnB,EAAM,EACnDC,GAAkBC,IAA2B,UAC5CkB,EAAAA,IAAC,QAAK,UAAWD,EAAAA,QAAO,mCAAmC,EACxD,SAAAlB,CAAA,CACH,EAEDM,SACE,OAAA,CAAK,UAAWY,EAAAA,QAAO,0BAA0B,EAAG,cAAW,GAC7D,SAAAZ,CAAA,CACH,EAEDC,GAAOY,EAAAA,IAACK,EAAAA,QAAA,CAAI,MAAOhB,CAAA,CAAU,EAC7BC,GAAgB,MAAQA,EAAe,GACtCU,EAAAA,IAACM,EAAAA,QAAA,CACC,MAAOhB,EACP,SAAS,YACT,KAAK,OAAA,CAAA,CACP,EAEJ,EACCT,GAAkBC,IAA2B,SAC5CkB,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,uBAAuB,EAC5C,SAAAC,MAAC,QAAK,UAAWD,EAAAA,QAAO,kCAAkC,EACvD,WACH,CAAA,CACF,CAAA,EAEJ,EACCb,GACCc,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,kBAAkB,EACvC,SAAAC,EAAAA,IAAC,OAAA,CACC,UAAW,CACTD,EAAAA,QAAO,4BAA4B,EAClCd,EAEG,GADAc,UAAO,mCAAmC,CAC1C,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,eAACG,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,SAAAjB,GAAkBe,EAAAA,IAACG,EAAAA,SAAK,MAAOH,MAACO,IAAU,EAAI,KAAK,KAAK,CAAA,CAC3D,CAAA,CAAA,CACF,CACF,CAAA,CAAA,CAEJ,CAAA,CAAA,CAGN,CAAC,EAED7B,EAAS,YAAc"}
+{"version":3,"file":"MenuItem.cjs","sources":["../../../src/components/menu-item/MenuItem.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport EmoticonHappyOutlineIcon from '@mattermost/compass-icons/components/emoticon-happy-outline';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Tag from '@/components/tag/Tag';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport type { DataAttributes } from '@/utils/props';\nimport styles from './MenuItem.module.scss';\n\nexport interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Primary label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  /** Optional secondary label. */\n  secondaryLabel?: ReactNode;\n  /** Where the secondary label appears. Default: 'below'. */\n  secondaryLabelPosition?: 'inline' | 'below';\n  /** Custom content for the leading slot. When omitted, shows placeholder icon. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\n  leadingVisual?: ReactNode;\n  /** Show the leading visual slot. Default: true. */\n  leadingElement?: boolean;\n  /** Custom content for the trailing slot. When omitted with trailingElement=true, shows check icon. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\n  trailingVisual?: ReactNode;\n  /** Show the trailing visual slot. Default: false. */\n  trailingElement?: boolean;\n  /** Emoji character for custom status, shown inline after the label. */\n  customStatusEmoji?: string;\n  /** Show \"NEW\" label tag. */\n  tag?: boolean;\n  /** Text of the `tag`. Default: \"NEW\". */\n  tagLabel?: ReactNode;\n  /** Inline mention count badge. */\n  mentionCount?: number;\n  /** Destructive (danger) styling. */\n  destructive?: boolean;\n  /** Highlight row (e.g. submenu parent while child menu is open). */\n  active?: boolean;\n}\n\n/**\n * Props a host menu (`Combobox`, `Select`) can set itself on a row: ARIA and\n * selection state, keyboard / pointer handling, and the values it reads from the\n * option object (`label`, `secondaryLabel`, `leadingVisual`, `disabled`). They\n * can't be overridden through `menuItemProps`. This is the full set; each host\n * sets only some of the handlers (`Combobox` uses `onClick`, `Select` uses\n * `onPointerUp`) and passes the other one through. `autoFocus` is excluded too:\n * the host keeps focus on its input / trigger, and a row that grabs focus on\n * mount would take it away.\n */\nexport type MenuItemOwnedProps =\n  | 'id'\n  | 'role'\n  | 'aria-selected'\n  | 'autoFocus'\n  | 'label'\n  | 'secondaryLabel'\n  | 'leadingVisual'\n  | 'leadingElement'\n  | 'trailingElement'\n  | 'disabled'\n  | 'active'\n  | 'children'\n  | 'onClick'\n  | 'onMouseDown'\n  | 'onMouseEnter'\n  | 'onPointerUp';\n\n/**\n * Every `MenuItem` prop a host menu doesn't own (`secondaryLabelPosition`,\n * `trailingVisual`, `tag`, `mentionCount`, `destructive`, `className`, …), so\n * props added to `MenuItem` reach `Combobox` / `Select` rows automatically.\n * `Owned` is the set the host sets itself (default: all of `MenuItemOwnedProps`);\n * a host narrows it so the handlers it doesn't supply can still be passed.\n */\nexport type MenuItemPassthroughProps<\n  Owned extends keyof MenuItemProps = MenuItemOwnedProps,\n> = Partial<Omit<MenuItemProps, Owned>> & DataAttributes;\n\n/**\n * Menu Items are the rows inside a Menu — the smallest selectable unit in any dropdown,\n * kebab, or context menu. One label, optional supporting visuals, and a clear hit target.\n */\nconst MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(function MenuItem(\n  {\n    label,\n    secondaryLabel,\n    secondaryLabelPosition = 'below',\n    leadingVisual,\n    leadingElement = true,\n    trailingVisual,\n    trailingElement = false,\n    customStatusEmoji,\n    tag = false,\n    tagLabel = 'NEW',\n    mentionCount,\n    destructive = false,\n    active = false,\n    className = '',\n    disabled,\n    type = 'button',\n    ...rest\n  },\n  ref,\n) {\n  const rootClass = [\n    styles['menu-item'],\n    destructive ? styles['menu-item--destructive'] : '',\n    active ? styles['menu-item--active'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      ref={ref}\n      className={rootClass}\n      type={type}\n      disabled={disabled}\n      {...rest}\n    >\n      <div className={styles['menu-item__content']}>\n        {leadingElement && (\n          <div className={styles['menu-item__left']}>\n            <span className={styles['menu-item__leading-visual']} aria-hidden>\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {leadingVisual ?? (\n                  <Icon glyph={<EmoticonHappyOutlineIcon />} size=\"16\" />\n                )}\n              </IconSlotContext.Provider>\n            </span>\n          </div>\n        )}\n        <div className={styles['menu-item__middle']}>\n          <div className={styles['menu-item__top-row']}>\n            <span className={styles['menu-item__label']}>{label}</span>\n            {secondaryLabel && secondaryLabelPosition === 'inline' && (\n              <span className={styles['menu-item__secondary-label-inline']}>\n                {secondaryLabel}\n              </span>\n            )}\n            {customStatusEmoji && (\n              <span className={styles['menu-item__custom-status']} aria-hidden>\n                {customStatusEmoji}\n              </span>\n            )}\n            {tag && <Tag label={tagLabel} />}\n            {mentionCount != null && mentionCount > 0 && (\n              <MentionBadge\n                count={mentionCount}\n                location=\"menu-item\"\n                size=\"small\"\n              />\n            )}\n          </div>\n          {secondaryLabel && secondaryLabelPosition === 'below' && (\n            <div className={styles['menu-item__bottom-row']}>\n              <span className={styles['menu-item__secondary-label-below']}>\n                {secondaryLabel}\n              </span>\n            </div>\n          )}\n        </div>\n        {trailingElement && (\n          <div className={styles['menu-item__right']}>\n            <span\n              className={[\n                styles['menu-item__trailing-visual'],\n                !trailingVisual\n                  ? styles['menu-item__trailing-visual--check']\n                  : '',\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {trailingVisual ?? <Icon glyph={<CheckIcon />} size=\"16\" />}\n              </IconSlotContext.Provider>\n            </span>\n          </div>\n        )}\n      </div>\n    </button>\n  );\n});\n\nMenuItem.displayName = 'MenuItem';\n\nexport default MenuItem;\n"],"names":["MenuItem","forwardRef","label","secondaryLabel","secondaryLabelPosition","leadingVisual","leadingElement","trailingVisual","trailingElement","customStatusEmoji","tag","tagLabel","mentionCount","destructive","active","className","disabled","type","rest","ref","rootClass","styles","jsx","jsxs","IconSlotContext","Icon","EmoticonHappyOutlineIcon","Tag","MentionBadge","CheckIcon"],"mappings":"qbAkFMA,EAAWC,EAAAA,WAA6C,SAC5D,CACE,MAAAC,EACA,eAAAC,EACA,uBAAAC,EAAyB,QACzB,cAAAC,EACA,eAAAC,EAAiB,GACjB,eAAAC,EACA,gBAAAC,EAAkB,GAClB,kBAAAC,EACA,IAAAC,EAAM,GACN,SAAAC,EAAW,MACX,aAAAC,EACA,YAAAC,EAAc,GACd,OAAAC,EAAS,GACT,UAAAC,EAAY,GACZ,SAAAC,EACA,KAAAC,EAAO,SACP,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAY,CAChBC,EAAAA,QAAO,WAAW,EAClBR,EAAcQ,EAAAA,QAAO,wBAAwB,EAAI,GACjDP,EAASO,EAAAA,QAAO,mBAAmB,EAAI,GACvCN,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEO,EAAAA,IAAC,SAAA,CACC,IAAAH,EACA,UAAWC,EACX,KAAAH,EACA,SAAAD,EACC,GAAGE,EAEJ,SAAAK,EAAAA,KAAC,MAAA,CAAI,UAAWF,UAAO,oBAAoB,EACxC,SAAA,CAAAf,GACCgB,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,iBAAiB,EACtC,SAAAC,EAAAA,IAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,2BAA2B,EAAG,cAAW,GAC/D,eAACG,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,YACCF,EAAAA,IAACG,UAAA,CAAK,MAAOH,MAACI,IAAyB,EAAI,KAAK,KAAK,CAAA,CAEzD,EACF,EACF,EAEFH,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,mBAAmB,EACxC,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,oBAAoB,EACzC,SAAA,CAAAC,MAAC,OAAA,CAAK,UAAWD,EAAAA,QAAO,kBAAkB,EAAI,SAAAnB,EAAM,EACnDC,GAAkBC,IAA2B,UAC5CkB,EAAAA,IAAC,QAAK,UAAWD,EAAAA,QAAO,mCAAmC,EACxD,SAAAlB,CAAA,CACH,EAEDM,SACE,OAAA,CAAK,UAAWY,EAAAA,QAAO,0BAA0B,EAAG,cAAW,GAC7D,SAAAZ,CAAA,CACH,EAEDC,GAAOY,EAAAA,IAACK,EAAAA,QAAA,CAAI,MAAOhB,CAAA,CAAU,EAC7BC,GAAgB,MAAQA,EAAe,GACtCU,EAAAA,IAACM,EAAAA,QAAA,CACC,MAAOhB,EACP,SAAS,YACT,KAAK,OAAA,CAAA,CACP,EAEJ,EACCT,GAAkBC,IAA2B,SAC5CkB,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,uBAAuB,EAC5C,SAAAC,MAAC,QAAK,UAAWD,EAAAA,QAAO,kCAAkC,EACvD,WACH,CAAA,CACF,CAAA,EAEJ,EACCb,GACCc,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,kBAAkB,EACvC,SAAAC,EAAAA,IAAC,OAAA,CACC,UAAW,CACTD,EAAAA,QAAO,4BAA4B,EAClCd,EAEG,GADAc,UAAO,mCAAmC,CAC1C,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,eAACG,EAAAA,gBAAgB,SAAhB,CAAyB,MAAO,CAAE,KAAM,IAAA,EACtC,SAAAjB,GAAkBe,EAAAA,IAACG,EAAAA,SAAK,MAAOH,MAACO,IAAU,EAAI,KAAK,KAAK,CAAA,CAC3D,CAAA,CAAA,CACF,CACF,CAAA,CAAA,CAEJ,CAAA,CAAA,CAGN,CAAC,EAED7B,EAAS,YAAc"}

package/dist/components/menu-item/MenuItem.css

@@ -1 +1 @@
-._menu-item_1nhr4_2{display:flex;flex-direction:column;align-items:flex-start;padding:var(--spacing-xxs) var(--spacing-l);background-color:var(--center-channel-bg);border:none;width:100%;text-align:left;cursor:pointer;font-family:var(--font-family-body);color:var(--center-channel-color);transition:background-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._menu-item_1nhr4_2:focus-visible{outline:none;background-color:var(--center-channel-bg);box-shadow:inset 0 0 0 2px var(--sidebar-text-active-border)}._menu-item_1nhr4_2:hover:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.08)}._menu-item_1nhr4_2:active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08)}._menu-item--active_1nhr4_27:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08)}._menu-item--active_1nhr4_27:not(:disabled) ._menu-item__leading-visual_1nhr4_30,._menu-item--active_1nhr4_27:not(:disabled) ._menu-item__trailing-visual_1nhr4_31{color:rgba(var(--center-channel-color-rgb),.72)}._menu-item--active_1nhr4_27:hover:not(:disabled){background-color:rgba(var(--button-bg-rgb),.12)}._menu-item--active_1nhr4_27:focus-visible:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08);box-shadow:inset 0 0 0 2px var(--sidebar-text-active-border)}._menu-item_1nhr4_2:disabled{cursor:not-allowed}._menu-item_1nhr4_2:disabled ._menu-item__content_1nhr4_44{opacity:.4}._menu-item__content_1nhr4_44{display:flex;gap:var(--spacing-xxs);align-items:flex-start;width:100%}._menu-item__left_1nhr4_53{display:flex;align-items:center;flex-shrink:0}._menu-item__leading-visual_1nhr4_30,._menu-item__trailing-visual_1nhr4_31{display:flex;align-items:center;padding:var(--spacing-xxxs);flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._menu-item__trailing-visual--check_1nhr4_65{color:var(--button-bg)}._menu-item__middle_1nhr4_68{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:var(--spacing-xxxs);align-items:flex-start;justify-content:center;padding-top:var(--spacing-xxxxs);padding-bottom:var(--spacing-xxxxs)}._menu-item__top-row_1nhr4_79{display:flex;gap:var(--spacing-xs);align-items:center;padding-inline:var(--spacing-xxxs);width:100%;flex-shrink:0}._menu-item__label_1nhr4_87{font-size:var(--font-size-100);line-height:var(--line-height-100);font-weight:var(--font-weight-regular);white-space:nowrap;flex-shrink:0}._menu-item__secondary-label-inline_1nhr4_94{font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);opacity:.75;white-space:nowrap;flex-shrink:0}._menu-item__bottom-row_1nhr4_102{display:flex;align-items:center;padding:0 var(--spacing-xxxs) var(--spacing-xxxxs);width:100%;flex-shrink:0}._menu-item__secondary-label-below_1nhr4_109{display:flex;align-items:center;font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);opacity:.75;flex:1 0 0;min-width:0;text-align:left}._menu-item__custom-status_1nhr4_120{display:flex;align-items:center;font-size:var(--font-size-200);line-height:1;flex-shrink:0;opacity:.8;-webkit-user-select:none;user-select:none}._menu-item__right_1nhr4_129{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}._menu-item--destructive_1nhr4_135,._menu-item--destructive_1nhr4_135 ._menu-item__leading-visual_1nhr4_30,._menu-item--destructive_1nhr4_135 ._menu-item__trailing-visual_1nhr4_31{color:var(--error-text, var(--color-danger))}._menu-item--destructive_1nhr4_135:hover:not(:disabled){background-color:var(--error-text, var(--color-danger));color:var(--button-color)}._menu-item--destructive_1nhr4_135:hover:not(:disabled) ._menu-item__leading-visual_1nhr4_30,._menu-item--destructive_1nhr4_135:hover:not(:disabled) ._menu-item__trailing-visual_1nhr4_31{color:inherit}._menu-item--destructive_1nhr4_135:active:not(:disabled){background:linear-gradient(0deg,rgba(var(--button-color-rgb),.1),rgba(var(--button-color-rgb),.1)),var(--error-text, var(--color-danger));color:var(--button-color)}._menu-item--destructive_1nhr4_135:active:not(:disabled) ._menu-item__leading-visual_1nhr4_30,._menu-item--destructive_1nhr4_135:active:not(:disabled) ._menu-item__trailing-visual_1nhr4_31{color:inherit}._menu-item--destructive_1nhr4_135:focus-visible{background-color:var(--error-text, var(--color-danger));box-shadow:inset 0 0 0 2px rgba(var(--button-color-rgb),.6);color:var(--button-color)}._menu-item--destructive_1nhr4_135:focus-visible ._menu-item__leading-visual_1nhr4_30,._menu-item--destructive_1nhr4_135:focus-visible ._menu-item__trailing-visual_1nhr4_31{color:inherit}
+._menu-item_1ilsv_2{display:flex;flex-direction:column;align-items:flex-start;padding:var(--spacing-xxs) var(--spacing-l);background-color:var(--center-channel-bg);border:none;width:100%;text-align:left;cursor:pointer;font-family:var(--font-family-body);color:var(--center-channel-color);transition:background-color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._menu-item_1ilsv_2:focus-visible{outline:none;background-color:var(--center-channel-bg);box-shadow:inset 0 0 0 2px var(--sidebar-text-active-border)}._menu-item_1ilsv_2:hover:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.08)}._menu-item_1ilsv_2:active:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08)}._menu-item--active_1ilsv_27:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08)}._menu-item--active_1ilsv_27:not(:disabled) ._menu-item__leading-visual_1ilsv_30,._menu-item--active_1ilsv_27:not(:disabled) ._menu-item__trailing-visual_1ilsv_31{color:rgba(var(--center-channel-color-rgb),.72)}._menu-item--active_1ilsv_27:hover:not(:disabled){background-color:rgba(var(--button-bg-rgb),.12)}._menu-item--active_1ilsv_27:focus-visible:not(:disabled){background-color:rgba(var(--button-bg-rgb),.08);box-shadow:inset 0 0 0 2px var(--sidebar-text-active-border)}._menu-item_1ilsv_2:disabled{cursor:not-allowed}._menu-item_1ilsv_2:disabled ._menu-item__content_1ilsv_44{opacity:.4}._menu-item__content_1ilsv_44{display:flex;gap:var(--spacing-xxs);align-items:flex-start;width:100%}._menu-item__left_1ilsv_53{display:flex;align-items:center;flex-shrink:0}._menu-item__leading-visual_1ilsv_30,._menu-item__trailing-visual_1ilsv_31{display:flex;align-items:center;padding:var(--spacing-xxxs);flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._menu-item__trailing-visual--check_1ilsv_65{color:var(--button-bg)}._menu-item__middle_1ilsv_68{align-self:stretch;flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:var(--spacing-xxxs);align-items:flex-start;justify-content:center;padding-top:var(--spacing-xxxxs);padding-bottom:var(--spacing-xxxxs)}._menu-item__top-row_1ilsv_80{display:flex;gap:var(--spacing-xs);align-items:center;padding-inline:var(--spacing-xxxs);width:100%;flex-shrink:0}._menu-item__label_1ilsv_88{font-size:var(--font-size-100);line-height:var(--line-height-100);font-weight:var(--font-weight-regular);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}._menu-item__secondary-label-inline_1ilsv_97{font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);opacity:.75;white-space:nowrap;flex-shrink:0}._menu-item__bottom-row_1ilsv_105{display:flex;align-items:center;padding:0 var(--spacing-xxxs) var(--spacing-xxxxs);width:100%;flex-shrink:0}._menu-item__secondary-label-below_1ilsv_112{display:flex;align-items:center;font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);opacity:.75;flex:1 0 0;min-width:0;text-align:left}._menu-item__custom-status_1ilsv_123{display:flex;align-items:center;font-size:var(--font-size-200);line-height:1;flex-shrink:0;opacity:.8;-webkit-user-select:none;user-select:none}._menu-item__right_1ilsv_132{align-self:stretch;display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}._menu-item--destructive_1ilsv_139,._menu-item--destructive_1ilsv_139 ._menu-item__leading-visual_1ilsv_30,._menu-item--destructive_1ilsv_139 ._menu-item__trailing-visual_1ilsv_31{color:var(--error-text, var(--color-danger))}._menu-item--destructive_1ilsv_139:hover:not(:disabled){background-color:var(--error-text, var(--color-danger));color:var(--button-color)}._menu-item--destructive_1ilsv_139:hover:not(:disabled) ._menu-item__leading-visual_1ilsv_30,._menu-item--destructive_1ilsv_139:hover:not(:disabled) ._menu-item__trailing-visual_1ilsv_31{color:inherit}._menu-item--destructive_1ilsv_139:active:not(:disabled){background:linear-gradient(0deg,rgba(var(--button-color-rgb),.1),rgba(var(--button-color-rgb),.1)),var(--error-text, var(--color-danger));color:var(--button-color)}._menu-item--destructive_1ilsv_139:active:not(:disabled) ._menu-item__leading-visual_1ilsv_30,._menu-item--destructive_1ilsv_139:active:not(:disabled) ._menu-item__trailing-visual_1ilsv_31{color:inherit}._menu-item--destructive_1ilsv_139:focus-visible{background-color:var(--error-text, var(--color-danger));box-shadow:inset 0 0 0 2px rgba(var(--button-color-rgb),.6);color:var(--button-color)}._menu-item--destructive_1ilsv_139:focus-visible ._menu-item__leading-visual_1ilsv_30,._menu-item--destructive_1ilsv_139:focus-visible ._menu-item__trailing-visual_1ilsv_31{color:inherit}

package/dist/components/menu-item/MenuItem.d.ts

@@ -1,4 +1,5 @@
 import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { DataAttributes } from '../../utils/props';
 export interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** Primary label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
     label: ReactNode;
@@ -27,6 +28,25 @@ export interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** Highlight row (e.g. submenu parent while child menu is open). */
     active?: boolean;
 }
+/**
+ * Props a host menu (`Combobox`, `Select`) can set itself on a row: ARIA and
+ * selection state, keyboard / pointer handling, and the values it reads from the
+ * option object (`label`, `secondaryLabel`, `leadingVisual`, `disabled`). They
+ * can't be overridden through `menuItemProps`. This is the full set; each host
+ * sets only some of the handlers (`Combobox` uses `onClick`, `Select` uses
+ * `onPointerUp`) and passes the other one through. `autoFocus` is excluded too:
+ * the host keeps focus on its input / trigger, and a row that grabs focus on
+ * mount would take it away.
+ */
+export type MenuItemOwnedProps = 'id' | 'role' | 'aria-selected' | 'autoFocus' | 'label' | 'secondaryLabel' | 'leadingVisual' | 'leadingElement' | 'trailingElement' | 'disabled' | 'active' | 'children' | 'onClick' | 'onMouseDown' | 'onMouseEnter' | 'onPointerUp';
+/**
+ * Every `MenuItem` prop a host menu doesn't own (`secondaryLabelPosition`,
+ * `trailingVisual`, `tag`, `mentionCount`, `destructive`, `className`, …), so
+ * props added to `MenuItem` reach `Combobox` / `Select` rows automatically.
+ * `Owned` is the set the host sets itself (default: all of `MenuItemOwnedProps`);
+ * a host narrows it so the handlers it doesn't supply can still be passed.
+ */
+export type MenuItemPassthroughProps<Owned extends keyof MenuItemProps = MenuItemOwnedProps> = Partial<Omit<MenuItemProps, Owned>> & DataAttributes;
 /**
  * Menu Items are the rows inside a Menu — the smallest selectable unit in any dropdown,
  * kebab, or context menu. One label, optional supporting visuals, and a clear hit target.

package/dist/components/menu-item/MenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/menu-item/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAS9E,MAAM,WAAW,aAAc,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC5E,4EAA4E;IAC5E,KAAK,EAAE,SAAS,CAAC;IACjB,gCAAgC;IAChC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,2DAA2D;IAC3D,sBAAsB,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC5C,6LAA6L;IAC7L,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,mDAAmD;IACnD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kNAAkN;IAClN,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,qDAAqD;IACrD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uEAAuE;IACvE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4BAA4B;IAC5B,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,yCAAyC;IACzC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oCAAoC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;GAGG;AACH,QAAA,MAAM,QAAQ,6GAsGZ,CAAC;AAIH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/menu-item/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAO9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAGpD,MAAM,WAAW,aAAc,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC5E,4EAA4E;IAC5E,KAAK,EAAE,SAAS,CAAC;IACjB,gCAAgC;IAChC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,2DAA2D;IAC3D,sBAAsB,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC5C,6LAA6L;IAC7L,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,mDAAmD;IACnD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kNAAkN;IAClN,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,qDAAqD;IACrD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uEAAuE;IACvE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4BAA4B;IAC5B,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,yCAAyC;IACzC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oCAAoC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;GASG;AACH,MAAM,MAAM,kBAAkB,GAC1B,IAAI,GACJ,MAAM,GACN,eAAe,GACf,WAAW,GACX,OAAO,GACP,gBAAgB,GAChB,eAAe,GACf,gBAAgB,GAChB,iBAAiB,GACjB,UAAU,GACV,QAAQ,GACR,UAAU,GACV,SAAS,GACT,aAAa,GACb,cAAc,GACd,aAAa,CAAC;AAElB;;;;;;GAMG;AACH,MAAM,MAAM,wBAAwB,CAClC,KAAK,SAAS,MAAM,aAAa,GAAG,kBAAkB,IACpD,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC,GAAG,cAAc,CAAC;AAEzD;;;GAGG;AACH,QAAA,MAAM,QAAQ,6GAsGZ,CAAC;AAIH,eAAe,QAAQ,CAAC"}

package/dist/components/menu-item/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","sources":["../../../src/components/menu-item/MenuItem.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport EmoticonHappyOutlineIcon from '@mattermost/compass-icons/components/emoticon-happy-outline';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Tag from '@/components/tag/Tag';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport styles from './MenuItem.module.scss';\n\nexport interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Primary label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  /** Optional secondary label. */\n  secondaryLabel?: ReactNode;\n  /** Where the secondary label appears. Default: 'below'. */\n  secondaryLabelPosition?: 'inline' | 'below';\n  /** Custom content for the leading slot. When omitted, shows placeholder icon. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\n  leadingVisual?: ReactNode;\n  /** Show the leading visual slot. Default: true. */\n  leadingElement?: boolean;\n  /** Custom content for the trailing slot. When omitted with trailingElement=true, shows check icon. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\n  trailingVisual?: ReactNode;\n  /** Show the trailing visual slot. Default: false. */\n  trailingElement?: boolean;\n  /** Emoji character for custom status, shown inline after the label. */\n  customStatusEmoji?: string;\n  /** Show \"NEW\" label tag. */\n  tag?: boolean;\n  /** Text of the `tag`. Default: \"NEW\". */\n  tagLabel?: ReactNode;\n  /** Inline mention count badge. */\n  mentionCount?: number;\n  /** Destructive (danger) styling. */\n  destructive?: boolean;\n  /** Highlight row (e.g. submenu parent while child menu is open). */\n  active?: boolean;\n}\n\n/**\n * Menu Items are the rows inside a Menu — the smallest selectable unit in any dropdown,\n * kebab, or context menu. One label, optional supporting visuals, and a clear hit target.\n */\nconst MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(function MenuItem(\n  {\n    label,\n    secondaryLabel,\n    secondaryLabelPosition = 'below',\n    leadingVisual,\n    leadingElement = true,\n    trailingVisual,\n    trailingElement = false,\n    customStatusEmoji,\n    tag = false,\n    tagLabel = 'NEW',\n    mentionCount,\n    destructive = false,\n    active = false,\n    className = '',\n    disabled,\n    type = 'button',\n    ...rest\n  },\n  ref,\n) {\n  const rootClass = [\n    styles['menu-item'],\n    destructive ? styles['menu-item--destructive'] : '',\n    active ? styles['menu-item--active'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      ref={ref}\n      className={rootClass}\n      type={type}\n      disabled={disabled}\n      {...rest}\n    >\n      <div className={styles['menu-item__content']}>\n        {leadingElement && (\n          <div className={styles['menu-item__left']}>\n            <span className={styles['menu-item__leading-visual']} aria-hidden>\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {leadingVisual ?? (\n                  <Icon glyph={<EmoticonHappyOutlineIcon />} size=\"16\" />\n                )}\n              </IconSlotContext.Provider>\n            </span>\n          </div>\n        )}\n        <div className={styles['menu-item__middle']}>\n          <div className={styles['menu-item__top-row']}>\n            <span className={styles['menu-item__label']}>{label}</span>\n            {secondaryLabel && secondaryLabelPosition === 'inline' && (\n              <span className={styles['menu-item__secondary-label-inline']}>\n                {secondaryLabel}\n              </span>\n            )}\n            {customStatusEmoji && (\n              <span className={styles['menu-item__custom-status']} aria-hidden>\n                {customStatusEmoji}\n              </span>\n            )}\n            {tag && <Tag label={tagLabel} />}\n            {mentionCount != null && mentionCount > 0 && (\n              <MentionBadge\n                count={mentionCount}\n                location=\"menu-item\"\n                size=\"small\"\n              />\n            )}\n          </div>\n          {secondaryLabel && secondaryLabelPosition === 'below' && (\n            <div className={styles['menu-item__bottom-row']}>\n              <span className={styles['menu-item__secondary-label-below']}>\n                {secondaryLabel}\n              </span>\n            </div>\n          )}\n        </div>\n        {trailingElement && (\n          <div className={styles['menu-item__right']}>\n            <span\n              className={[\n                styles['menu-item__trailing-visual'],\n                !trailingVisual\n                  ? styles['menu-item__trailing-visual--check']\n                  : '',\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {trailingVisual ?? <Icon glyph={<CheckIcon />} size=\"16\" />}\n              </IconSlotContext.Provider>\n            </span>\n          </div>\n        )}\n      </div>\n    </button>\n  );\n});\n\nMenuItem.displayName = 'MenuItem';\n\nexport default MenuItem;\n"],"names":["MenuItem","forwardRef","label","secondaryLabel","secondaryLabelPosition","leadingVisual","leadingElement","trailingVisual","trailingElement","customStatusEmoji","tag","tagLabel","mentionCount","destructive","active","className","disabled","type","rest","ref","rootClass","styles","jsx","jsxs","IconSlotContext","Icon","EmoticonHappyOutlineIcon","Tag","MentionBadge","CheckIcon"],"mappings":"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"}
+{"version":3,"file":"MenuItem.js","sources":["../../../src/components/menu-item/MenuItem.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport EmoticonHappyOutlineIcon from '@mattermost/compass-icons/components/emoticon-happy-outline';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport Tag from '@/components/tag/Tag';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport type { DataAttributes } from '@/utils/props';\nimport styles from './MenuItem.module.scss';\n\nexport interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Primary label. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  label: ReactNode;\n  /** Optional secondary label. */\n  secondaryLabel?: ReactNode;\n  /** Where the secondary label appears. Default: 'below'. */\n  secondaryLabelPosition?: 'inline' | 'below';\n  /** Custom content for the leading slot. When omitted, shows placeholder icon. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\n  leadingVisual?: ReactNode;\n  /** Show the leading visual slot. Default: true. */\n  leadingElement?: boolean;\n  /** Custom content for the trailing slot. When omitted with trailingElement=true, shows check icon. When passing an icon, use `<Icon glyph={<SomeIcon />} />` — MenuItem provides the correct size via context. */\n  trailingVisual?: ReactNode;\n  /** Show the trailing visual slot. Default: false. */\n  trailingElement?: boolean;\n  /** Emoji character for custom status, shown inline after the label. */\n  customStatusEmoji?: string;\n  /** Show \"NEW\" label tag. */\n  tag?: boolean;\n  /** Text of the `tag`. Default: \"NEW\". */\n  tagLabel?: ReactNode;\n  /** Inline mention count badge. */\n  mentionCount?: number;\n  /** Destructive (danger) styling. */\n  destructive?: boolean;\n  /** Highlight row (e.g. submenu parent while child menu is open). */\n  active?: boolean;\n}\n\n/**\n * Props a host menu (`Combobox`, `Select`) can set itself on a row: ARIA and\n * selection state, keyboard / pointer handling, and the values it reads from the\n * option object (`label`, `secondaryLabel`, `leadingVisual`, `disabled`). They\n * can't be overridden through `menuItemProps`. This is the full set; each host\n * sets only some of the handlers (`Combobox` uses `onClick`, `Select` uses\n * `onPointerUp`) and passes the other one through. `autoFocus` is excluded too:\n * the host keeps focus on its input / trigger, and a row that grabs focus on\n * mount would take it away.\n */\nexport type MenuItemOwnedProps =\n  | 'id'\n  | 'role'\n  | 'aria-selected'\n  | 'autoFocus'\n  | 'label'\n  | 'secondaryLabel'\n  | 'leadingVisual'\n  | 'leadingElement'\n  | 'trailingElement'\n  | 'disabled'\n  | 'active'\n  | 'children'\n  | 'onClick'\n  | 'onMouseDown'\n  | 'onMouseEnter'\n  | 'onPointerUp';\n\n/**\n * Every `MenuItem` prop a host menu doesn't own (`secondaryLabelPosition`,\n * `trailingVisual`, `tag`, `mentionCount`, `destructive`, `className`, …), so\n * props added to `MenuItem` reach `Combobox` / `Select` rows automatically.\n * `Owned` is the set the host sets itself (default: all of `MenuItemOwnedProps`);\n * a host narrows it so the handlers it doesn't supply can still be passed.\n */\nexport type MenuItemPassthroughProps<\n  Owned extends keyof MenuItemProps = MenuItemOwnedProps,\n> = Partial<Omit<MenuItemProps, Owned>> & DataAttributes;\n\n/**\n * Menu Items are the rows inside a Menu — the smallest selectable unit in any dropdown,\n * kebab, or context menu. One label, optional supporting visuals, and a clear hit target.\n */\nconst MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(function MenuItem(\n  {\n    label,\n    secondaryLabel,\n    secondaryLabelPosition = 'below',\n    leadingVisual,\n    leadingElement = true,\n    trailingVisual,\n    trailingElement = false,\n    customStatusEmoji,\n    tag = false,\n    tagLabel = 'NEW',\n    mentionCount,\n    destructive = false,\n    active = false,\n    className = '',\n    disabled,\n    type = 'button',\n    ...rest\n  },\n  ref,\n) {\n  const rootClass = [\n    styles['menu-item'],\n    destructive ? styles['menu-item--destructive'] : '',\n    active ? styles['menu-item--active'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      ref={ref}\n      className={rootClass}\n      type={type}\n      disabled={disabled}\n      {...rest}\n    >\n      <div className={styles['menu-item__content']}>\n        {leadingElement && (\n          <div className={styles['menu-item__left']}>\n            <span className={styles['menu-item__leading-visual']} aria-hidden>\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {leadingVisual ?? (\n                  <Icon glyph={<EmoticonHappyOutlineIcon />} size=\"16\" />\n                )}\n              </IconSlotContext.Provider>\n            </span>\n          </div>\n        )}\n        <div className={styles['menu-item__middle']}>\n          <div className={styles['menu-item__top-row']}>\n            <span className={styles['menu-item__label']}>{label}</span>\n            {secondaryLabel && secondaryLabelPosition === 'inline' && (\n              <span className={styles['menu-item__secondary-label-inline']}>\n                {secondaryLabel}\n              </span>\n            )}\n            {customStatusEmoji && (\n              <span className={styles['menu-item__custom-status']} aria-hidden>\n                {customStatusEmoji}\n              </span>\n            )}\n            {tag && <Tag label={tagLabel} />}\n            {mentionCount != null && mentionCount > 0 && (\n              <MentionBadge\n                count={mentionCount}\n                location=\"menu-item\"\n                size=\"small\"\n              />\n            )}\n          </div>\n          {secondaryLabel && secondaryLabelPosition === 'below' && (\n            <div className={styles['menu-item__bottom-row']}>\n              <span className={styles['menu-item__secondary-label-below']}>\n                {secondaryLabel}\n              </span>\n            </div>\n          )}\n        </div>\n        {trailingElement && (\n          <div className={styles['menu-item__right']}>\n            <span\n              className={[\n                styles['menu-item__trailing-visual'],\n                !trailingVisual\n                  ? styles['menu-item__trailing-visual--check']\n                  : '',\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              <IconSlotContext.Provider value={{ size: '16' }}>\n                {trailingVisual ?? <Icon glyph={<CheckIcon />} size=\"16\" />}\n              </IconSlotContext.Provider>\n            </span>\n          </div>\n        )}\n      </div>\n    </button>\n  );\n});\n\nMenuItem.displayName = 'MenuItem';\n\nexport default MenuItem;\n"],"names":["MenuItem","forwardRef","label","secondaryLabel","secondaryLabelPosition","leadingVisual","leadingElement","trailingVisual","trailingElement","customStatusEmoji","tag","tagLabel","mentionCount","destructive","active","className","disabled","type","rest","ref","rootClass","styles","jsx","jsxs","IconSlotContext","Icon","EmoticonHappyOutlineIcon","Tag","MentionBadge","CheckIcon"],"mappings":"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"}

package/dist/components/menu-item/MenuItem.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./MenuItem.css');const e={"menu-item":"_menu-item_1nhr4_2","menu-item--active":"_menu-item--active_1nhr4_27","menu-item__leading-visual":"_menu-item__leading-visual_1nhr4_30","menu-item__trailing-visual":"_menu-item__trailing-visual_1nhr4_31","menu-item__content":"_menu-item__content_1nhr4_44","menu-item__left":"_menu-item__left_1nhr4_53","menu-item__trailing-visual--check":"_menu-item__trailing-visual--check_1nhr4_65","menu-item__middle":"_menu-item__middle_1nhr4_68","menu-item__top-row":"_menu-item__top-row_1nhr4_79","menu-item__label":"_menu-item__label_1nhr4_87","menu-item__secondary-label-inline":"_menu-item__secondary-label-inline_1nhr4_94","menu-item__bottom-row":"_menu-item__bottom-row_1nhr4_102","menu-item__secondary-label-below":"_menu-item__secondary-label-below_1nhr4_109","menu-item__custom-status":"_menu-item__custom-status_1nhr4_120","menu-item__right":"_menu-item__right_1nhr4_129","menu-item--destructive":"_menu-item--destructive_1nhr4_135"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./MenuItem.css');const e={"menu-item":"_menu-item_1ilsv_2","menu-item--active":"_menu-item--active_1ilsv_27","menu-item__leading-visual":"_menu-item__leading-visual_1ilsv_30","menu-item__trailing-visual":"_menu-item__trailing-visual_1ilsv_31","menu-item__content":"_menu-item__content_1ilsv_44","menu-item__left":"_menu-item__left_1ilsv_53","menu-item__trailing-visual--check":"_menu-item__trailing-visual--check_1ilsv_65","menu-item__middle":"_menu-item__middle_1ilsv_68","menu-item__top-row":"_menu-item__top-row_1ilsv_80","menu-item__label":"_menu-item__label_1ilsv_88","menu-item__secondary-label-inline":"_menu-item__secondary-label-inline_1ilsv_97","menu-item__bottom-row":"_menu-item__bottom-row_1ilsv_105","menu-item__secondary-label-below":"_menu-item__secondary-label-below_1ilsv_112","menu-item__custom-status":"_menu-item__custom-status_1ilsv_123","menu-item__right":"_menu-item__right_1ilsv_132","menu-item--destructive":"_menu-item--destructive_1ilsv_139"};exports.default=e;
 //# sourceMappingURL=MenuItem.module.scss.cjs.map

package/dist/components/menu-item/MenuItem.module.scss.js

@@ -1,20 +1,20 @@
 import './MenuItem.css';const _ = {
-  "menu-item": "_menu-item_1nhr4_2",
-  "menu-item--active": "_menu-item--active_1nhr4_27",
-  "menu-item__leading-visual": "_menu-item__leading-visual_1nhr4_30",
-  "menu-item__trailing-visual": "_menu-item__trailing-visual_1nhr4_31",
-  "menu-item__content": "_menu-item__content_1nhr4_44",
-  "menu-item__left": "_menu-item__left_1nhr4_53",
-  "menu-item__trailing-visual--check": "_menu-item__trailing-visual--check_1nhr4_65",
-  "menu-item__middle": "_menu-item__middle_1nhr4_68",
-  "menu-item__top-row": "_menu-item__top-row_1nhr4_79",
-  "menu-item__label": "_menu-item__label_1nhr4_87",
-  "menu-item__secondary-label-inline": "_menu-item__secondary-label-inline_1nhr4_94",
-  "menu-item__bottom-row": "_menu-item__bottom-row_1nhr4_102",
-  "menu-item__secondary-label-below": "_menu-item__secondary-label-below_1nhr4_109",
-  "menu-item__custom-status": "_menu-item__custom-status_1nhr4_120",
-  "menu-item__right": "_menu-item__right_1nhr4_129",
-  "menu-item--destructive": "_menu-item--destructive_1nhr4_135"
+  "menu-item": "_menu-item_1ilsv_2",
+  "menu-item--active": "_menu-item--active_1ilsv_27",
+  "menu-item__leading-visual": "_menu-item__leading-visual_1ilsv_30",
+  "menu-item__trailing-visual": "_menu-item__trailing-visual_1ilsv_31",
+  "menu-item__content": "_menu-item__content_1ilsv_44",
+  "menu-item__left": "_menu-item__left_1ilsv_53",
+  "menu-item__trailing-visual--check": "_menu-item__trailing-visual--check_1ilsv_65",
+  "menu-item__middle": "_menu-item__middle_1ilsv_68",
+  "menu-item__top-row": "_menu-item__top-row_1ilsv_80",
+  "menu-item__label": "_menu-item__label_1ilsv_88",
+  "menu-item__secondary-label-inline": "_menu-item__secondary-label-inline_1ilsv_97",
+  "menu-item__bottom-row": "_menu-item__bottom-row_1ilsv_105",
+  "menu-item__secondary-label-below": "_menu-item__secondary-label-below_1ilsv_112",
+  "menu-item__custom-status": "_menu-item__custom-status_1ilsv_123",
+  "menu-item__right": "_menu-item__right_1ilsv_132",
+  "menu-item--destructive": "_menu-item--destructive_1ilsv_139"
 };
 export {
   _ as default

package/dist/components/menu-item/index.d.ts

@@ -1,3 +1,3 @@
 export { default as MenuItem } from './MenuItem';
-export type { MenuItemProps } from './MenuItem';
+export type { MenuItemProps, MenuItemOwnedProps, MenuItemPassthroughProps, } from './MenuItem';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/menu-item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/menu-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/menu-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EACV,aAAa,EACb,kBAAkB,EAClB,wBAAwB,GACzB,MAAM,YAAY,CAAC"}

package/dist/components/password-input/PasswordInput.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("react"),__ds=require("@mattermost/compass-icons/components/eye-off-outline.js"),ds=__ds?.default??__ds,__rs=require("@mattermost/compass-icons/components/eye-outline.js"),rs=__rs?.default??__rs,us=require("../icon/Icon.cjs"),j=require("../field/fieldDescribedBy.cjs"),cs=require("../field-message/FieldMessage.cjs"),ps=require("../../utils/props.cjs"),fs=require("../../utils/string.cjs"),l=require("./PasswordInput.module.scss.cjs"),vs={small:"12",medium:"16",large:"16"},ws=t.forwardRef(function({className:k="",size:x="medium",label:u,invalid:F=!1,message:c,messageTone:y,showPasswordLabel:R="Show password",hidePasswordLabel:D="Hide password",revealButtonProps:V,revealed:N,defaultRevealed:z=!1,onRevealedChange:n,id:E,value:p,defaultValue:q,placeholder:O,onFocus:o,onBlur:d,onChange:r,disabled:f,"aria-describedby":P,...U},a){const $=t.useId(),v=E??$,A=t.useRef(null),i=p!==void 0,[H,K]=t.useState(q??""),h=i?p:H,T=h!=null&&h!=="",w=N!==void 0,[Z,B]=t.useState(z),b=w?N:Z,m=b&&!f,[G,S]=t.useState(!1),J=G||T,L=t.useCallback(s=>{S(!0),o==null||o(s)},[o]),Q=t.useCallback(s=>{S(!1),d==null||d(s)},[d]),W=t.useCallback(s=>{i||K(s.target.value),r==null||r(s)},[i,r]),X=t.useCallback(s=>{A.current=s,typeof a=="function"?a(s):a&&(a.current=s)},[a]),Y=t.useCallback(()=>{const s=!b;w||B(s),n==null||n(s)},[w,n,b]),{className:ss,onClick:_,onMouseDown:I,...es}=V??{},g=j.isFieldInvalid(F,c,y),C=j.hasFieldMessage(c),ts=l.default[`password-input--size-${fs.toKebab(x)}`],ls=g?l.default["password-input--invalid"]:"",as=u!=null&&J?l.default["password-input--label-floated"]:"",is=vs[x],ns=[l.default["password-input"],ts,ls,as,l.default["password-input--has-trailing-icon"],k].filter(Boolean).join(" "),M=C?`${v}-message`:void 0,os=y??"error";return e.jsxs("div",{className:ns,children:[e.jsxs("div",{className:l.default["password-input__wrapper"],children:[u!=null&&e.jsx("label",{className:l.default["password-input__label"],htmlFor:v,children:u}),e.jsxs("div",{className:l.default["password-input__inner"],children:[e.jsx("input",{ref:X,id:v,type:m?"text":"password",className:l.default["password-input__input"],value:i?p:void 0,defaultValue:i?void 0:q,placeholder:O,disabled:f,onFocus:L,onBlur:Q,onChange:W,"aria-invalid":g?!0:void 0,"aria-describedby":j.mergeFieldDescribedBy(P,M,void 0),...U}),e.jsx("span",{className:l.default["password-input__trailing-icon"],children:e.jsx("button",{...es,type:"button",className:ps.mergeClassNames(l.default["password-input__reveal"],ss),"aria-label":m?D:R,disabled:f,onClick:s=>{_==null||_(s),!s.defaultPrevented&&Y()},onMouseDown:s=>{s.preventDefault(),I==null||I(s)},children:e.jsx(us.default,{size:is,glyph:m?e.jsx(ds,{}):e.jsx(rs,{})})})})]})]}),C&&e.jsx(cs.default,{id:M,message:c,tone:os})]})});exports.default=ws;
+//# sourceMappingURL=PasswordInput.cjs.map

package/dist/components/password-input/PasswordInput.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.cjs","sources":["../../../src/components/password-input/PasswordInput.tsx"],"sourcesContent":["import type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';\nimport { forwardRef, useCallback, useId, useRef, useState } from 'react';\nimport EyeOffOutlineIcon from '@mattermost/compass-icons/components/eye-off-outline';\nimport EyeOutlineIcon from '@mattermost/compass-icons/components/eye-outline';\nimport type { IconSize } from '@/components/icon/Icon';\nimport Icon from '@/components/icon/Icon';\nimport {\n  hasFieldMessage,\n  isFieldInvalid,\n  mergeFieldDescribedBy,\n} from '@/components/field/fieldDescribedBy';\nimport FieldMessage from '@/components/field-message/FieldMessage';\nimport type { FieldMessageTone } from '@/components/field-message/FieldMessage';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport { mergeClassNames } from '@/utils/props';\nimport { toKebab } from '@/utils/string';\nimport styles from './PasswordInput.module.scss';\n\nexport type PasswordInputSize = 'small' | 'medium' | 'large';\n\n/** Matches Text Input / FieldClearButton trailing chrome per size. */\nconst ICON_SIZE_MAP: Record<PasswordInputSize, IconSize> = {\n  small: '12',\n  medium: '16',\n  large: '16',\n};\n\nexport interface PasswordInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** When true, shows invalid/error styling. */\n  invalid?: boolean;\n  /** Floating label. Floats above the border when focused or filled. */\n  label?: ReactNode;\n  /** Size variant. Default: Medium. */\n  size?: PasswordInputSize;\n  /**\n   * Field message under the field. Accepts translated nodes (e.g. `<FormattedMessage/>`).\n   * Defaults to error tone (invalid chrome) when set without `messageTone`.\n   */\n  message?: ReactNode;\n  /** Visual tone for `message`. Default: `error` when `message` is set. */\n  messageTone?: FieldMessageTone;\n  /**\n   * Accessible name for the reveal toggle when the password is hidden.\n   * Default: `\"Show password\"`.\n   */\n  showPasswordLabel?: string;\n  /**\n   * Accessible name for the reveal toggle when the password is visible.\n   * Default: `\"Hide password\"`.\n   */\n  hidePasswordLabel?: string;\n  /** Extra attributes for the reveal toggle (e.g. `data-testid`). */\n  revealButtonProps?: BuiltInButtonProps;\n  /**\n   * Controlled reveal state. Omit for uncontrolled (use `defaultRevealed`).\n   */\n  revealed?: boolean;\n  /** Uncontrolled initial reveal state. Default: `false`. */\n  defaultRevealed?: boolean;\n  /** Called when the reveal toggle changes visibility. */\n  onRevealedChange?: (revealed: boolean) => void;\n}\n\n/**\n * Password Inputs are the dedicated field for secrets — login, signup, invite\n * passwords. They look like a text input with a built-in show/hide toggle so the\n * affordance is obvious, the same way Search Input always ships a magnifier.\n */\nconst PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n  function PasswordInput(\n    {\n      className = '',\n      size = 'medium',\n      label,\n      invalid = false,\n      message,\n      messageTone,\n      showPasswordLabel = 'Show password',\n      hidePasswordLabel = 'Hide password',\n      revealButtonProps,\n      revealed: revealedProp,\n      defaultRevealed = false,\n      onRevealedChange,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      disabled,\n      'aria-describedby': describedBy,\n      ...rest\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const isValueControlled = valueProp !== undefined;\n    const [uncontrolledValue, setUncontrolledValue] = useState(\n      defaultValue ?? '',\n    );\n    const value = isValueControlled ? (valueProp as string) : uncontrolledValue;\n    const hasValue = value != null && value !== '';\n\n    const isRevealControlled = revealedProp !== undefined;\n    const [uncontrolledRevealed, setUncontrolledRevealed] =\n      useState(defaultRevealed);\n    const revealed = isRevealControlled ? revealedProp : uncontrolledRevealed;\n    const visible = revealed && !disabled;\n\n    const [isFocused, setIsFocused] = useState(false);\n    const labelFloated = isFocused || hasValue;\n\n    const handleFocus = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(true);\n        onFocus?.(e);\n      },\n      [onFocus],\n    );\n    const handleBlur = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(false);\n        onBlur?.(e);\n      },\n      [onBlur],\n    );\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        if (!isValueControlled) setUncontrolledValue(e.target.value);\n        onChange?.(e);\n      },\n      [isValueControlled, onChange],\n    );\n\n    const setInputRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          ref.current = node;\n        }\n      },\n      [ref],\n    );\n\n    const toggleRevealed = useCallback(() => {\n      const next = !revealed;\n      if (!isRevealControlled) setUncontrolledRevealed(next);\n      onRevealedChange?.(next);\n    }, [isRevealControlled, onRevealedChange, revealed]);\n\n    const {\n      className: revealClassName,\n      onClick: revealOnClick,\n      onMouseDown: revealOnMouseDown,\n      ...revealRest\n    } = revealButtonProps ?? {};\n\n    const showInvalid = isFieldInvalid(invalid, message, messageTone);\n    const showMessage = hasFieldMessage(message);\n    const sizeClass = styles[`password-input--size-${toKebab(size)}`];\n    const invalidClass = showInvalid ? styles['password-input--invalid'] : '';\n    const labelFloatedClass =\n      label != null && labelFloated\n        ? styles['password-input--label-floated']\n        : '';\n    const iconSize = ICON_SIZE_MAP[size];\n\n    const rootClass = [\n      styles['password-input'],\n      sizeClass,\n      invalidClass,\n      labelFloatedClass,\n      styles['password-input--has-trailing-icon'],\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const messageId = showMessage ? `${id}-message` : undefined;\n    const resolvedTone = messageTone ?? 'error';\n\n    return (\n      <div className={rootClass}>\n        <div className={styles['password-input__wrapper']}>\n          {label != null && (\n            <label className={styles['password-input__label']} htmlFor={id}>\n              {label}\n            </label>\n          )}\n          <div className={styles['password-input__inner']}>\n            <input\n              ref={setInputRef}\n              id={id}\n              type={visible ? 'text' : 'password'}\n              className={styles['password-input__input']}\n              value={isValueControlled ? valueProp : undefined}\n              defaultValue={isValueControlled ? undefined : defaultValue}\n              placeholder={placeholder}\n              disabled={disabled}\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              aria-invalid={showInvalid ? true : undefined}\n              aria-describedby={mergeFieldDescribedBy(\n                describedBy,\n                messageId,\n                undefined,\n              )}\n              {...rest}\n            />\n            <span className={styles['password-input__trailing-icon']}>\n              <button\n                {...revealRest}\n                type=\"button\"\n                className={mergeClassNames(\n                  styles['password-input__reveal'],\n                  revealClassName,\n                )}\n                aria-label={visible ? hidePasswordLabel : showPasswordLabel}\n                disabled={disabled}\n                onClick={(e) => {\n                  revealOnClick?.(e);\n                  if (e.defaultPrevented) return;\n                  toggleRevealed();\n                }}\n                onMouseDown={(e) => {\n                  // Keep focus in the field when pressing the toggle.\n                  e.preventDefault();\n                  revealOnMouseDown?.(e);\n                }}\n              >\n                <Icon\n                  size={iconSize}\n                  glyph={visible ? <EyeOffOutlineIcon /> : <EyeOutlineIcon />}\n                />\n              </button>\n            </span>\n          </div>\n        </div>\n        {showMessage && (\n          <FieldMessage id={messageId} message={message} tone={resolvedTone} />\n        )}\n      </div>\n    );\n  },\n);\n\nexport default PasswordInput;\n"],"names":["ICON_SIZE_MAP","PasswordInput","forwardRef","className","size","label","invalid","message","messageTone","showPasswordLabel","hidePasswordLabel","revealButtonProps","revealedProp","defaultRevealed","onRevealedChange","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","describedBy","rest","ref","generatedId","useId","id","inputRef","useRef","isValueControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isRevealControlled","uncontrolledRevealed","setUncontrolledRevealed","revealed","visible","isFocused","setIsFocused","labelFloated","handleFocus","useCallback","e","handleBlur","handleChange","setInputRef","node","toggleRevealed","next","revealClassName","revealOnClick","revealOnMouseDown","revealRest","showInvalid","isFieldInvalid","showMessage","hasFieldMessage","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","iconSize","rootClass","messageId","resolvedTone","jsxs","jsx","mergeFieldDescribedBy","mergeClassNames","Icon","EyeOffOutlineIcon","EyeOutlineIcon","FieldMessage"],"mappings":"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"}

package/dist/components/password-input/PasswordInput.css

@@ -0,0 +1 @@
+._password-input_d44ti_2{display:flex;flex-direction:column;gap:var(--spacing-xs);width:100%}._password-input__wrapper_d44ti_8{position:relative;display:flex;flex-direction:column;min-height:0;background-color:var(--center-channel-bg);border-radius:var(--radius-s);box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.16);transition:box-shadow var(--duration-quick) var(--ease-transition)}._password-input_d44ti_2:has(._password-input__input_d44ti_18:not(:disabled)):hover:not(:focus-within) ._password-input__wrapper_d44ti_8{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}._password-input_d44ti_2:has(._password-input__input_d44ti_18:focus-visible) ._password-input__wrapper_d44ti_8{box-shadow:inset 0 0 0 1px var(--focus-ring-color),0 0 0 1px var(--focus-ring-color)}._password-input_d44ti_2:has(._password-input__input_d44ti_18:disabled) ._password-input__wrapper_d44ti_8{background-color:var(--center-channel-bg);opacity:.56}._password-input__label_d44ti_28{position:absolute;left:var(--spacing-xs);top:50%;padding:0 var(--spacing-xxxs);transform:translateY(-50%);margin:0;font-family:Open Sans,sans-serif;font-size:var(--font-size-75);line-height:var(--line-height-25);font-weight:var(--font-weight-regular);color:rgba(var(--center-channel-color-rgb),.72);background-color:var(--center-channel-bg);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 24px);transition:transform var(--duration-quick) var(--ease-transition),font-size var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),top var(--duration-quick) var(--ease-transition),left var(--duration-quick) var(--ease-transition)}._password-input--label-floated_d44ti_48 ._password-input__label_d44ti_28{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px;color:rgba(var(--center-channel-color-rgb),.72)}._password-input__inner_d44ti_55{display:flex;align-items:center;flex:1;min-width:0}._password-input__input_d44ti_18{flex:1 1 0;min-width:0;margin:0;padding:0;border:0;background:transparent;font-family:Open Sans,sans-serif;font-size:var(--font-size-75);line-height:var(--line-height-25);font-weight:var(--font-weight-regular);color:var(--center-channel-color)}._password-input__input_d44ti_18:focus{outline:none}._password-input__input_d44ti_18::placeholder{color:rgba(var(--center-channel-color-rgb),.64)}._password-input__input_d44ti_18:disabled{cursor:not-allowed}._password-input__trailing-icon_d44ti_83{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--spacing-xs);color:rgba(var(--center-channel-color-rgb),.64)}._password-input__reveal_d44ti_91{display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;border-radius:var(--radius-xs);background:transparent;cursor:pointer;color:inherit;outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0;transition:color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition)}._password-input__reveal_d44ti_91:hover:not(:disabled){color:var(--center-channel-color)}._password-input__reveal_d44ti_91:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._password-input__reveal_d44ti_91:disabled{cursor:not-allowed}._password-input--size-small_d44ti_116 ._password-input__wrapper_d44ti_8{min-height:32px}._password-input--size-small_d44ti_116 ._password-input__inner_d44ti_55{padding:var(--spacing-xs) var(--spacing-m)}._password-input--size-small_d44ti_116 ._password-input__input_d44ti_18{font-size:var(--font-size-75);line-height:var(--line-height-25)}._password-input--size-small_d44ti_116._password-input--label-floated_d44ti_48 ._password-input__label_d44ti_28{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._password-input--size-medium_d44ti_132 ._password-input__wrapper_d44ti_8{min-height:40px}._password-input--size-medium_d44ti_132 ._password-input__inner_d44ti_55{padding:var(--spacing-s) var(--spacing-l)}._password-input--size-medium_d44ti_132 ._password-input__input_d44ti_18{font-size:var(--font-size-100);line-height:var(--line-height-100)}._password-input--size-medium_d44ti_132 ._password-input__label_d44ti_28{font-size:var(--font-size-100);left:var(--spacing-m)}._password-input--size-medium_d44ti_132._password-input--label-floated_d44ti_48 ._password-input__label_d44ti_28{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._password-input--size-large_d44ti_152 ._password-input__wrapper_d44ti_8{min-height:48px}._password-input--size-large_d44ti_152 ._password-input__inner_d44ti_55{padding:var(--spacing-m) var(--spacing-l)}._password-input--size-large_d44ti_152 ._password-input__input_d44ti_18{font-size:var(--font-size-200);line-height:var(--line-height-200)}._password-input--size-large_d44ti_152 ._password-input__label_d44ti_28{font-size:var(--font-size-200);line-height:var(--line-height-200);left:var(--spacing-m)}._password-input--size-large_d44ti_152._password-input--label-floated_d44ti_48 ._password-input__label_d44ti_28{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._password-input_d44ti_2:has(._password-input__input_d44ti_18:focus-visible) ._password-input__label_d44ti_28{color:var(--button-bg)}._password-input_d44ti_2:has(._password-input__label_d44ti_28):not(._password-input--label-floated_d44ti_48) ._password-input__input_d44ti_18::placeholder{color:transparent}._password-input--invalid_d44ti_179 ._password-input__wrapper_d44ti_8{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._password-input--invalid_d44ti_179:has(._password-input__input_d44ti_18:focus-visible) ._password-input__wrapper_d44ti_8{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger)),0 0 0 1px var(--error-text, var(--color-danger))}._password-input--invalid_d44ti_179 ._password-input__label_d44ti_28{color:var(--error-text, var(--color-danger))}._password-input--invalid_d44ti_179:has(._password-input__input_d44ti_18:focus-visible) ._password-input__label_d44ti_28{color:var(--error-text, var(--color-danger))}