@mattermost/compass-ui 0.1.0-alpha.24 → 0.1.0-alpha.26

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.js","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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"}
+{"version":3,"file":"PasswordInput.js","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  /**\n   * Whether to render the show/hide toggle. Default: `true`. Set `false` for\n   * secrets that should stay masked with no reveal affordance (for example\n   * System Console API keys). The input stays `type=\"password\"`, and\n   * `revealed`, `defaultRevealed`, `onRevealedChange`, `revealButtonProps`,\n   * `showPasswordLabel` and `hidePasswordLabel` are ignored.\n   */\n  revealable?: boolean;\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 passwords.\n * They look like a text input with a built-in show/hide toggle so the affordance is obvious\n * before the user reads a single word.\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      revealable = true,\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 = revealable && 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            {revealable && (\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            )}\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","revealable","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/right-sidebar-header/RightSidebarHeader.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__z=require("@mattermost/compass-icons/components/arrow-back-ios.js"),z=__z?.default??__z,__C=require("@mattermost/compass-icons/components/arrow-collapse.js"),C=__C?.default??__C,__k=require("@mattermost/compass-icons/components/arrow-expand.js"),k=__k?.default??__k,__v=require("@mattermost/compass-icons/components/close.js"),v=__v?.default??__v,__w=require("@mattermost/compass-icons/components/dock-window.js"),w=__w?.default??__w,s=require("../icon/Icon.cjs"),r=require("../icon-button/IconButton.cjs"),I=require("../tag/Tag.cjs"),a=require("./RightSidebarHeader.module.scss.cjs");function B({title:j,secondaryTitle:i,tag:l,tagType:x="info",leadingIcon:d,onBack:t,backLabel:_="Back",onExpand:n,expanded:c=!1,expandLabel:b="Expand",collapseLabel:g="Collapse",onPopout:o,popoutLabel:m="Open in new window",onClose:u,closeLabel:p="Close",actionLabel:h,onActionClick:N,actionActive:f=!1,className:q=""}){const y=[a.default["right-sidebar-header"],q].filter(Boolean).join(" ");return e.jsxs("div",{className:y,children:[e.jsxs("div",{className:a.default["right-sidebar-header__left"],children:[e.jsxs("div",{className:a.default["right-sidebar-header__primary"],children:[t&&e.jsx(r.default,{className:a.default["right-sidebar-header__back"],size:"small","aria-label":_,onClick:t,icon:e.jsx(s.default,{size:"16",glyph:e.jsx(z,{})})}),d&&e.jsx("span",{className:a.default["right-sidebar-header__leading-icon"],children:d}),e.jsx("span",{className:a.default["right-sidebar-header__title"],children:j}),l&&e.jsx("span",{className:a.default["right-sidebar-header__tag"],children:e.jsx(I.default,{label:l,type:x,size:"x-small",casing:"all-caps"})})]}),i&&e.jsx("div",{className:a.default["right-sidebar-header__secondary"],children:e.jsx("span",{className:a.default["right-sidebar-header__secondary-text"],children:i})})]}),e.jsxs("div",{className:a.default["right-sidebar-header__actions"],children:[h&&e.jsx("button",{type:"button",className:[a.default["right-sidebar-header__action"],f?a.default["right-sidebar-header__action--active"]:""].filter(Boolean).join(" "),onClick:N,"aria-pressed":f?!0:void 0,children:h}),n&&e.jsx(r.default,{size:"small","aria-label":c?g:b,onClick:n,icon:e.jsx(s.default,{size:"16",glyph:c?e.jsx(C,{}):e.jsx(k,{})})}),o&&e.jsx(r.default,{size:"small","aria-label":m,onClick:o,icon:e.jsx(s.default,{size:"16",glyph:e.jsx(w,{})})}),u&&e.jsx(r.default,{size:"small","aria-label":p,onClick:u,icon:e.jsx(s.default,{size:"16",glyph:e.jsx(v,{})})})]})]})}exports.default=B;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__S=require("@mattermost/compass-icons/components/arrow-collapse.js"),S=__S?.default??__S,__A=require("@mattermost/compass-icons/components/arrow-expand.js"),A=__A?.default??__A,__H=require("@mattermost/compass-icons/components/arrow-left.js"),H=__H?.default??__H,__M=require("@mattermost/compass-icons/components/close.js"),M=__M?.default??__M,__O=require("@mattermost/compass-icons/components/dock-window.js"),O=__O?.default??__O,i=require("../icon/Icon.cjs"),l=require("../icon-button/IconButton.cjs"),D=require("../tag/Tag.cjs"),E=require("../../utils/props.cjs"),a=require("./RightSidebarHeader.module.scss.cjs");function W({title:m,secondaryTitle:r,onSecondaryTitleClick:d,secondaryTitleButtonProps:s,tag:c,tagType:o="info",leadingIcon:h,onBack:t,backLabel:N="Back",onExpand:u,expanded:n=!1,expandLabel:q="Expand",collapseLabel:C="Collapse",onPopout:f,popoutLabel:z="Open in new window",onClose:j,closeLabel:k="Close",actionLabel:x,onActionClick:v,actionActive:_=!1,actions:w,className:I="",...p}){const R=[a.default["right-sidebar-header"],I].filter(Boolean).join(" ");return e.jsxs("div",{...p,className:R,children:[e.jsxs("div",{className:a.default["right-sidebar-header__left"],children:[e.jsxs("div",{className:a.default["right-sidebar-header__primary"],children:[t&&e.jsx(l.default,{className:a.default["right-sidebar-header__back"],size:"small","aria-label":N,onClick:t,icon:e.jsx(i.default,{size:"16",glyph:e.jsx(H,{})})}),h&&e.jsx("span",{className:a.default["right-sidebar-header__leading-icon"],children:h}),e.jsx("span",{className:a.default["right-sidebar-header__title"],children:m}),c&&e.jsx("span",{className:a.default["right-sidebar-header__tag"],children:e.jsx(D.default,{label:c,type:o,size:"x-small",casing:"all-caps"})})]}),r&&e.jsx("div",{className:a.default["right-sidebar-header__secondary"],children:d?e.jsx("button",{type:"button",...s,className:E.mergeClassNames(a.default["right-sidebar-header__secondary-text"],a.default["right-sidebar-header__secondary-button"],s==null?void 0:s.className),onClick:b=>{var g;d(b),(g=s==null?void 0:s.onClick)==null||g.call(s,b)},children:r}):e.jsx("span",{className:a.default["right-sidebar-header__secondary-text"],children:r})})]}),e.jsxs("div",{className:a.default["right-sidebar-header__actions"],children:[x&&e.jsx("button",{type:"button",className:[a.default["right-sidebar-header__action"],_?a.default["right-sidebar-header__action--active"]:""].filter(Boolean).join(" "),onClick:v,"aria-pressed":_?!0:void 0,children:x}),w,u&&e.jsx(l.default,{size:"small","aria-label":n?C:q,onClick:u,icon:e.jsx(i.default,{size:"16",glyph:n?e.jsx(S,{}):e.jsx(A,{})})}),f&&e.jsx(l.default,{size:"small","aria-label":z,onClick:f,icon:e.jsx(i.default,{size:"16",glyph:e.jsx(O,{})})}),j&&e.jsx(l.default,{size:"small","aria-label":k,onClick:j,icon:e.jsx(i.default,{size:"16",glyph:e.jsx(M,{})})})]})]})}exports.default=W;
 //# sourceMappingURL=RightSidebarHeader.cjs.map

package/dist/components/right-sidebar-header/RightSidebarHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RightSidebarHeader.cjs","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport ArrowBackIosIcon from '@mattermost/compass-icons/components/arrow-back-ios';\nimport ArrowCollapseIcon from '@mattermost/compass-icons/components/arrow-collapse';\nimport ArrowExpandIcon from '@mattermost/compass-icons/components/arrow-expand';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport DockWindowIcon from '@mattermost/compass-icons/components/dock-window';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport type { TagType } from '@/components/tag/Tag';\nimport styles from './RightSidebarHeader.module.scss';\n\nexport interface RightSidebarHeaderProps {\n  /** Primary title text. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Secondary title shown to the right of a vertical divider (e.g. parent channel name). */\n  secondaryTitle?: ReactNode;\n  /** Optional tag rendered next to the title (e.g. \"BETA\"). */\n  tag?: ReactNode;\n  /** Tag visual style. Default: Info. */\n  tagType?: TagType;\n  /** Optional leading element shown before the title — typically a `UserAvatar` or an icon. When passing an icon, use `<Icon glyph={<SomeIcon />} size=\"20\" />` to align with the title text. */\n  leadingIcon?: ReactNode;\n  /** When set, shows a back button and calls this on click. */\n  onBack?: () => void;\n  /** Accessible name for the back button. Default: \"Back\". */\n  backLabel?: string;\n  /** When set, shows an expand/collapse button and calls this on click. */\n  onExpand?: () => void;\n  /** When true, the expand button shows the collapse icon. Requires `onExpand`. */\n  expanded?: boolean;\n  /** Accessible name for the expand button while collapsed. Default: \"Expand\". */\n  expandLabel?: string;\n  /** Accessible name for the expand button while expanded. Default: \"Collapse\". */\n  collapseLabel?: string;\n  /** When set, shows a pop out button (open in a new window) between expand and close, and calls this on click. */\n  onPopout?: () => void;\n  /** Accessible name for the pop out button. Default: \"Open in new window\". */\n  popoutLabel?: string;\n  /** When set, shows a close button and calls this on click. */\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Optional inline action label (e.g. \"Follow\"). Accepts translated nodes. */\n  actionLabel?: ReactNode;\n  /** Click handler for the action label. */\n  onActionClick?: () => void;\n  /** When true, the action button shows in its active state. */\n  actionActive?: boolean;\n  className?: string;\n}\n\nexport default function RightSidebarHeader({\n  title,\n  secondaryTitle,\n  tag,\n  tagType = 'info',\n  leadingIcon,\n  onBack,\n  backLabel = 'Back',\n  onExpand,\n  expanded = false,\n  expandLabel = 'Expand',\n  collapseLabel = 'Collapse',\n  onPopout,\n  popoutLabel = 'Open in new window',\n  onClose,\n  closeLabel = 'Close',\n  actionLabel,\n  onActionClick,\n  actionActive = false,\n  className = '',\n}: RightSidebarHeaderProps) {\n  const rootClass = [styles['right-sidebar-header'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['right-sidebar-header__left']}>\n        <div className={styles['right-sidebar-header__primary']}>\n          {onBack && (\n            <IconButton\n              className={styles['right-sidebar-header__back']}\n              size=\"small\"\n              aria-label={backLabel}\n              onClick={onBack}\n              icon={<Icon size=\"16\" glyph={<ArrowBackIosIcon />} />}\n            />\n          )}\n          {leadingIcon && (\n            <span className={styles['right-sidebar-header__leading-icon']}>\n              {leadingIcon}\n            </span>\n          )}\n          <span className={styles['right-sidebar-header__title']}>{title}</span>\n          {tag && (\n            <span className={styles['right-sidebar-header__tag']}>\n              <Tag\n                label={tag}\n                type={tagType}\n                size=\"x-small\"\n                casing=\"all-caps\"\n              />\n            </span>\n          )}\n        </div>\n        {secondaryTitle && (\n          <div className={styles['right-sidebar-header__secondary']}>\n            <span className={styles['right-sidebar-header__secondary-text']}>\n              {secondaryTitle}\n            </span>\n          </div>\n        )}\n      </div>\n\n      <div className={styles['right-sidebar-header__actions']}>\n        {actionLabel && (\n          <button\n            type=\"button\"\n            className={[\n              styles['right-sidebar-header__action'],\n              actionActive\n                ? styles['right-sidebar-header__action--active']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onActionClick}\n            aria-pressed={actionActive ? true : undefined}\n          >\n            {actionLabel}\n          </button>\n        )}\n        {onExpand && (\n          <IconButton\n            size=\"small\"\n            aria-label={expanded ? collapseLabel : expandLabel}\n            onClick={onExpand}\n            icon={\n              <Icon\n                size=\"16\"\n                glyph={expanded ? <ArrowCollapseIcon /> : <ArrowExpandIcon />}\n              />\n            }\n          />\n        )}\n        {onPopout && (\n          <IconButton\n            size=\"small\"\n            aria-label={popoutLabel}\n            onClick={onPopout}\n            icon={<Icon size=\"16\" glyph={<DockWindowIcon />} />}\n          />\n        )}\n        {onClose && (\n          <IconButton\n            size=\"small\"\n            aria-label={closeLabel}\n            onClick={onClose}\n            icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["RightSidebarHeader","title","secondaryTitle","tag","tagType","leadingIcon","onBack","backLabel","onExpand","expanded","expandLabel","collapseLabel","onPopout","popoutLabel","onClose","closeLabel","actionLabel","onActionClick","actionActive","className","rootClass","styles","jsxs","jsx","IconButton","Icon","ArrowBackIosIcon","Tag","ArrowCollapseIcon","ArrowExpandIcon","DockWindowIcon","CloseIcon"],"mappings":"8lBAoDA,SAAwBA,EAAmB,CACzC,MAAAC,EACA,eAAAC,EACA,IAAAC,EACA,QAAAC,EAAU,OACV,YAAAC,EACA,OAAAC,EACA,UAAAC,EAAY,OACZ,SAAAC,EACA,SAAAC,EAAW,GACX,YAAAC,EAAc,SACd,cAAAC,EAAgB,WAChB,SAAAC,EACA,YAAAC,EAAc,qBACd,QAAAC,EACA,WAAAC,EAAa,QACb,YAAAC,EACA,cAAAC,EACA,aAAAC,EAAe,GACf,UAAAC,EAAY,EACd,EAA4B,CAC1B,MAAMC,EAAY,CAACC,UAAO,sBAAsB,EAAGF,CAAS,EACzD,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEG,EAAAA,KAAC,MAAA,CAAI,UAAWF,EACd,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,4BAA4B,EACjD,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,+BAA+B,EACnD,SAAA,CAAAf,GACCiB,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAWH,EAAAA,QAAO,4BAA4B,EAC9C,KAAK,QACL,aAAYd,EACZ,QAASD,EACT,WAAOmB,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACG,IAAiB,CAAA,CAAI,CAAA,CAAA,EAGtDrB,GACCkB,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,oCAAoC,EACzD,SAAAhB,EACH,QAED,OAAA,CAAK,UAAWgB,EAAAA,QAAO,6BAA6B,EAAI,SAAApB,EAAM,EAC9DE,GACCoB,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,2BAA2B,EACjD,SAAAE,EAAAA,IAACI,EAAAA,QAAA,CACC,MAAOxB,EACP,KAAMC,EACN,KAAK,UACL,OAAO,UAAA,CAAA,CACT,CACF,CAAA,EAEJ,EACCF,GACCqB,EAAAA,IAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,iCAAiC,EACtD,SAAAE,EAAAA,IAAC,OAAA,CAAK,UAAWF,EAAAA,QAAO,sCAAsC,EAC3D,WACH,CAAA,CACF,CAAA,EAEJ,EAEAC,EAAAA,KAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,+BAA+B,EACnD,SAAA,CAAAL,GACCO,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAW,CACTF,EAAAA,QAAO,8BAA8B,EACrCH,EACIG,EAAAA,QAAO,sCAAsC,EAC7C,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAASJ,EACT,eAAcC,EAAe,GAAO,OAEnC,SAAAF,CAAA,CAAA,EAGJR,GACCe,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAYf,EAAWE,EAAgBD,EACvC,QAASF,EACT,KACEe,EAAAA,IAACE,EAAAA,QAAA,CACC,KAAK,KACL,MAAOhB,EAAWc,MAACK,EAAA,CAAA,CAAkB,QAAMC,EAAA,CAAA,CAAgB,CAAA,CAAA,CAC7D,CAAA,EAILjB,GACCW,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAYX,EACZ,QAASD,EACT,WAAOa,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACO,IAAe,CAAA,CAAI,CAAA,CAAA,EAGpDhB,GACCS,EAAAA,IAACC,EAAAA,QAAA,CACC,KAAK,QACL,aAAYT,EACZ,QAASD,EACT,WAAOW,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACQ,IAAU,CAAA,CAAI,CAAA,CAAA,CAC9C,CAAA,CAEJ,CAAA,EACF,CAEJ"}
+{"version":3,"file":"RightSidebarHeader.cjs","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"sourcesContent":["import type { HTMLAttributes, MouseEvent, ReactNode } from 'react';\nimport ArrowCollapseIcon from '@mattermost/compass-icons/components/arrow-collapse';\nimport ArrowExpandIcon from '@mattermost/compass-icons/components/arrow-expand';\nimport ArrowLeftIcon from '@mattermost/compass-icons/components/arrow-left';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport DockWindowIcon from '@mattermost/compass-icons/components/dock-window';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport type { TagType } from '@/components/tag/Tag';\nimport { mergeClassNames } from '@/utils/props';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport styles from './RightSidebarHeader.module.scss';\n\nexport interface RightSidebarHeaderProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'title' | 'children' | 'dangerouslySetInnerHTML'\n> {\n  /** Primary title text. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Secondary title shown to the right of a vertical divider (e.g. parent channel name). */\n  secondaryTitle?: ReactNode;\n  /** When set, the secondary title renders as a button (e.g. to open the parent channel) and calls this on click with the event. It looks the same at rest and shows a dim background on hover. */\n  onSecondaryTitleClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /** Extra attributes for the secondary title button (e.g. `aria-label`, `data-testid`). Only used with `onSecondaryTitleClick`; its `onClick` also runs, after that handler. */\n  secondaryTitleButtonProps?: BuiltInButtonProps;\n  /** Optional tag rendered next to the title (e.g. \"BETA\"). */\n  tag?: ReactNode;\n  /** Tag visual style. Default: Info. */\n  tagType?: TagType;\n  /** Optional leading element shown before the title — typically a `UserAvatar` or an icon. When passing an icon, use `<Icon glyph={<SomeIcon />} size=\"20\" />` to align with the title text. */\n  leadingIcon?: ReactNode;\n  /** When set, shows a back button and calls this on click. */\n  onBack?: () => void;\n  /** Accessible name for the back button. Default: \"Back\". */\n  backLabel?: string;\n  /** When set, shows an expand/collapse button and calls this on click. */\n  onExpand?: () => void;\n  /** When true, the expand button shows the collapse icon. Requires `onExpand`. */\n  expanded?: boolean;\n  /** Accessible name for the expand button while collapsed. Default: \"Expand\". */\n  expandLabel?: string;\n  /** Accessible name for the expand button while expanded. Default: \"Collapse\". */\n  collapseLabel?: string;\n  /** When set, shows a pop out button (open in a new window) between expand and close, and calls this on click. */\n  onPopout?: () => void;\n  /** Accessible name for the pop out button. Default: \"Open in new window\". */\n  popoutLabel?: string;\n  /** When set, shows a close button and calls this on click. */\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Optional inline action label (e.g. \"Follow\"). Accepts translated nodes. */\n  actionLabel?: ReactNode;\n  /** Click handler for the action label. */\n  onActionClick?: () => void;\n  /** When true, the action button shows in its active state. */\n  actionActive?: boolean;\n  /** Optional custom actions (e.g. a Filters `Button` + popover) rendered in the actions region after `actionLabel` and before the expand / pop out / close buttons. */\n  actions?: ReactNode;\n  className?: string;\n}\n\nexport default function RightSidebarHeader({\n  title,\n  secondaryTitle,\n  onSecondaryTitleClick,\n  secondaryTitleButtonProps,\n  tag,\n  tagType = 'info',\n  leadingIcon,\n  onBack,\n  backLabel = 'Back',\n  onExpand,\n  expanded = false,\n  expandLabel = 'Expand',\n  collapseLabel = 'Collapse',\n  onPopout,\n  popoutLabel = 'Open in new window',\n  onClose,\n  closeLabel = 'Close',\n  actionLabel,\n  onActionClick,\n  actionActive = false,\n  actions,\n  className = '',\n  ...rest\n}: RightSidebarHeaderProps) {\n  const rootClass = [styles['right-sidebar-header'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div {...rest} className={rootClass}>\n      <div className={styles['right-sidebar-header__left']}>\n        <div className={styles['right-sidebar-header__primary']}>\n          {onBack && (\n            <IconButton\n              className={styles['right-sidebar-header__back']}\n              size=\"small\"\n              aria-label={backLabel}\n              onClick={onBack}\n              icon={<Icon size=\"16\" glyph={<ArrowLeftIcon />} />}\n            />\n          )}\n          {leadingIcon && (\n            <span className={styles['right-sidebar-header__leading-icon']}>\n              {leadingIcon}\n            </span>\n          )}\n          <span className={styles['right-sidebar-header__title']}>{title}</span>\n          {tag && (\n            <span className={styles['right-sidebar-header__tag']}>\n              <Tag\n                label={tag}\n                type={tagType}\n                size=\"x-small\"\n                casing=\"all-caps\"\n              />\n            </span>\n          )}\n        </div>\n        {secondaryTitle && (\n          <div className={styles['right-sidebar-header__secondary']}>\n            {onSecondaryTitleClick ? (\n              <button\n                type=\"button\"\n                {...secondaryTitleButtonProps}\n                className={mergeClassNames(\n                  styles['right-sidebar-header__secondary-text'],\n                  styles['right-sidebar-header__secondary-button'],\n                  secondaryTitleButtonProps?.className,\n                )}\n                onClick={(event) => {\n                  onSecondaryTitleClick(event);\n                  secondaryTitleButtonProps?.onClick?.(event);\n                }}\n              >\n                {secondaryTitle}\n              </button>\n            ) : (\n              <span className={styles['right-sidebar-header__secondary-text']}>\n                {secondaryTitle}\n              </span>\n            )}\n          </div>\n        )}\n      </div>\n\n      <div className={styles['right-sidebar-header__actions']}>\n        {actionLabel && (\n          <button\n            type=\"button\"\n            className={[\n              styles['right-sidebar-header__action'],\n              actionActive\n                ? styles['right-sidebar-header__action--active']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onActionClick}\n            aria-pressed={actionActive ? true : undefined}\n          >\n            {actionLabel}\n          </button>\n        )}\n        {actions}\n        {onExpand && (\n          <IconButton\n            size=\"small\"\n            aria-label={expanded ? collapseLabel : expandLabel}\n            onClick={onExpand}\n            icon={\n              <Icon\n                size=\"16\"\n                glyph={expanded ? <ArrowCollapseIcon /> : <ArrowExpandIcon />}\n              />\n            }\n          />\n        )}\n        {onPopout && (\n          <IconButton\n            size=\"small\"\n            aria-label={popoutLabel}\n            onClick={onPopout}\n            icon={<Icon size=\"16\" glyph={<DockWindowIcon />} />}\n          />\n        )}\n        {onClose && (\n          <IconButton\n            size=\"small\"\n            aria-label={closeLabel}\n            onClick={onClose}\n            icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["RightSidebarHeader","title","secondaryTitle","onSecondaryTitleClick","secondaryTitleButtonProps","tag","tagType","leadingIcon","onBack","backLabel","onExpand","expanded","expandLabel","collapseLabel","onPopout","popoutLabel","onClose","closeLabel","actionLabel","onActionClick","actionActive","actions","className","rest","rootClass","styles","jsxs","jsx","IconButton","Icon","ArrowLeftIcon","Tag","mergeClassNames","event","_a","ArrowCollapseIcon","ArrowExpandIcon","DockWindowIcon","CloseIcon"],"mappings":"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"}

package/dist/components/right-sidebar-header/RightSidebarHeader.css

@@ -1 +1 @@
-._right-sidebar-header_11chd_2{display:flex;align-items:center;gap:var(--spacing-l);height:56px;padding:var(--spacing-m);background-color:var(--center-channel-bg);border-bottom:1px solid rgba(var(--center-channel-color-rgb),.12);box-sizing:border-box}._right-sidebar-header__left_11chd_12{display:flex;flex:1 1 0;min-width:0;align-items:center}._right-sidebar-header__primary_11chd_18{display:flex;align-items:center;gap:var(--spacing-xxs);padding:0 var(--spacing-xs);min-width:0}._right-sidebar-header__back_11chd_25{margin-left:-12px}._right-sidebar-header__leading-icon_11chd_28{display:inline-flex;align-items:center;flex-shrink:0}._right-sidebar-header__tag_11chd_33{display:inline-flex;align-items:center}._right-sidebar-header__title_11chd_37{font-family:var(--font-family-heading);font-size:var(--font-size-200);font-weight:var(--font-weight-semibold);line-height:var(--line-height-200);color:var(--center-channel-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._right-sidebar-header__secondary_11chd_47{display:flex;flex:1 1 0;min-width:0;align-items:center;padding:0 var(--spacing-xs);border-left:1px solid rgba(var(--center-channel-color-rgb),.16)}._right-sidebar-header__secondary-text_11chd_55{font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:var(--line-height-200);color:rgba(var(--center-channel-color-rgb),.56);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._right-sidebar-header__actions_11chd_65{display:flex;align-items:center;gap:var(--spacing-xxxs);flex-shrink:0}._right-sidebar-header__action_11chd_65{display:inline-flex;align-items:center;justify-content:center;height:24px;padding:var(--spacing-xxxxs) var(--spacing-s);border:none;border-radius:var(--radius-s);background-color:transparent;font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.64);cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._right-sidebar-header__action_11chd_65:hover{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.75)}._right-sidebar-header__action_11chd_65:active{background-color:rgba(var(--center-channel-color-rgb),.12)}._right-sidebar-header__action_11chd_65:focus-visible{outline:none;box-shadow:0 0 0 2px var(--button-bg)}._right-sidebar-header__action--active_11chd_99{background-color:rgba(var(--center-channel-color-rgb),.08);color:var(--center-channel-color)}
+._right-sidebar-header_1jogp_2{display:flex;align-items:center;gap:var(--spacing-l);height:56px;padding:var(--spacing-m);background-color:var(--center-channel-bg);border-bottom:1px solid rgba(var(--center-channel-color-rgb),.12);box-sizing:border-box}._right-sidebar-header__left_1jogp_12{display:flex;flex:1 1 0;min-width:0;align-items:center}._right-sidebar-header__primary_1jogp_18{display:flex;align-items:center;gap:var(--spacing-xxs);padding:0 var(--spacing-xs);min-width:0}._right-sidebar-header__back_1jogp_25{margin-left:-12px}._right-sidebar-header__leading-icon_1jogp_28{display:inline-flex;align-items:center;flex-shrink:0}._right-sidebar-header__tag_1jogp_33{display:inline-flex;align-items:center}._right-sidebar-header__title_1jogp_37{font-family:var(--font-family-heading);font-size:var(--font-size-200);font-weight:var(--font-weight-semibold);line-height:var(--line-height-200);color:var(--center-channel-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._right-sidebar-header__secondary_1jogp_47{display:flex;flex:1 1 0;min-width:0;align-items:center;padding:0 var(--spacing-xs);border-left:1px solid rgba(var(--center-channel-color-rgb),.16);transition:border-color var(--duration-quick) var(--ease-transition)}._right-sidebar-header__secondary_1jogp_47:has(._right-sidebar-header__secondary-button_1jogp_56:hover){border-left-color:transparent}._right-sidebar-header__secondary-text_1jogp_59{font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:var(--line-height-200);color:rgba(var(--center-channel-color-rgb),.72);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._right-sidebar-header__secondary-button_1jogp_56{min-width:0;max-width:calc(100% + var(--spacing-xxs) * 2);margin:0 calc(var(--spacing-xxs) * -1);padding:var(--spacing-xxxxs) var(--spacing-xxs);border:none;border-radius:var(--radius-s);background-color:transparent;cursor:pointer;outline:2px solid color-mix(in srgb,var(--focus-ring-color, var(--button-bg)) 0%,transparent);outline-offset:0;transition:background-color var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition)}._right-sidebar-header__secondary-button_1jogp_56:hover:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.08)}._right-sidebar-header__secondary-button_1jogp_56:active:not(:disabled){background-color:rgba(var(--center-channel-color-rgb),.12)}._right-sidebar-header__secondary-button_1jogp_56:focus-visible{outline-color:var(--focus-ring-color, var(--button-bg));outline-offset:3px}._right-sidebar-header__secondary-button_1jogp_56:disabled{cursor:default}._right-sidebar-header__actions_1jogp_95{display:flex;align-items:center;gap:var(--spacing-xxxs);flex-shrink:0}._right-sidebar-header__action_1jogp_95{display:inline-flex;align-items:center;justify-content:center;height:24px;padding:var(--spacing-xxxxs) var(--spacing-s);border:none;border-radius:var(--radius-s);background-color:transparent;font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.64);cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._right-sidebar-header__action_1jogp_95:hover{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.75)}._right-sidebar-header__action_1jogp_95:active{background-color:rgba(var(--center-channel-color-rgb),.12)}._right-sidebar-header__action_1jogp_95:focus-visible{outline:none;box-shadow:0 0 0 2px var(--button-bg)}._right-sidebar-header__action--active_1jogp_129{background-color:rgba(var(--center-channel-color-rgb),.08);color:var(--center-channel-color)}

package/dist/components/right-sidebar-header/RightSidebarHeader.d.ts

@@ -1,10 +1,15 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, MouseEvent, ReactNode } from 'react';
 import { TagType } from '../tag/Tag';
-export interface RightSidebarHeaderProps {
+import { BuiltInButtonProps } from '../../utils/props';
+export interface RightSidebarHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children' | 'dangerouslySetInnerHTML'> {
     /** Primary title text. Accepts translated nodes (e.g. `<FormattedMessage/>`). */
     title: ReactNode;
     /** Secondary title shown to the right of a vertical divider (e.g. parent channel name). */
     secondaryTitle?: ReactNode;
+    /** When set, the secondary title renders as a button (e.g. to open the parent channel) and calls this on click with the event. It looks the same at rest and shows a dim background on hover. */
+    onSecondaryTitleClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /** Extra attributes for the secondary title button (e.g. `aria-label`, `data-testid`). Only used with `onSecondaryTitleClick`; its `onClick` also runs, after that handler. */
+    secondaryTitleButtonProps?: BuiltInButtonProps;
     /** Optional tag rendered next to the title (e.g. "BETA"). */
     tag?: ReactNode;
     /** Tag visual style. Default: Info. */
@@ -37,7 +42,9 @@ export interface RightSidebarHeaderProps {
     onActionClick?: () => void;
     /** When true, the action button shows in its active state. */
     actionActive?: boolean;
+    /** Optional custom actions (e.g. a Filters `Button` + popover) rendered in the actions region after `actionLabel` and before the expand / pop out / close buttons. */
+    actions?: ReactNode;
     className?: string;
 }
-export default function RightSidebarHeader({ title, secondaryTitle, tag, tagType, leadingIcon, onBack, backLabel, onExpand, expanded, expandLabel, collapseLabel, onPopout, popoutLabel, onClose, closeLabel, actionLabel, onActionClick, actionActive, className, }: RightSidebarHeaderProps): import("react/jsx-runtime").JSX.Element;
+export default function RightSidebarHeader({ title, secondaryTitle, onSecondaryTitleClick, secondaryTitleButtonProps, tag, tagType, leadingIcon, onBack, backLabel, onExpand, expanded, expandLabel, collapseLabel, onPopout, popoutLabel, onClose, closeLabel, actionLabel, onActionClick, actionActive, actions, className, ...rest }: RightSidebarHeaderProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=RightSidebarHeader.d.ts.map

package/dist/components/right-sidebar-header/RightSidebarHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RightSidebarHeader.d.ts","sourceRoot":"","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAGpD,MAAM,WAAW,uBAAuB;IACtC,iFAAiF;IACjF,KAAK,EAAE,SAAS,CAAC;IACjB,2FAA2F;IAC3F,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,6DAA6D;IAC7D,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+LAA+L;IAC/L,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gFAAgF;IAChF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iFAAiF;IACjF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iHAAiH;IACjH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,6EAA6E;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,8DAA8D;IAC9D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,KAAK,EACL,cAAc,EACd,GAAG,EACH,OAAgB,EAChB,WAAW,EACX,MAAM,EACN,SAAkB,EAClB,QAAQ,EACR,QAAgB,EAChB,WAAsB,EACtB,aAA0B,EAC1B,QAAQ,EACR,WAAkC,EAClC,OAAO,EACP,UAAoB,EACpB,WAAW,EACX,aAAa,EACb,YAAoB,EACpB,SAAc,GACf,EAAE,uBAAuB,2CA8FzB"}
+{"version":3,"file":"RightSidebarHeader.d.ts","sourceRoot":"","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASnE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAEpD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGxD,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CACnD,cAAc,CAAC,cAAc,CAAC,EAC9B,OAAO,GAAG,UAAU,GAAG,yBAAyB,CACjD;IACC,iFAAiF;IACjF,KAAK,EAAE,SAAS,CAAC;IACjB,2FAA2F;IAC3F,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,iMAAiM;IACjM,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACvE,+KAA+K;IAC/K,yBAAyB,CAAC,EAAE,kBAAkB,CAAC;IAC/C,6DAA6D;IAC7D,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+LAA+L;IAC/L,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gFAAgF;IAChF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iFAAiF;IACjF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iHAAiH;IACjH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,6EAA6E;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,8DAA8D;IAC9D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sKAAsK;IACtK,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,KAAK,EACL,cAAc,EACd,qBAAqB,EACrB,yBAAyB,EACzB,GAAG,EACH,OAAgB,EAChB,WAAW,EACX,MAAM,EACN,SAAkB,EAClB,QAAQ,EACR,QAAgB,EAChB,WAAsB,EACtB,aAA0B,EAC1B,QAAQ,EACR,WAAkC,EAClC,OAAO,EACP,UAAoB,EACpB,WAAW,EACX,aAAa,EACb,YAAoB,EACpB,OAAO,EACP,SAAc,EACd,GAAG,IAAI,EACR,EAAE,uBAAuB,2CAiHzB"}