@mattermost/compass-ui 0.1.0-alpha.3 → 0.1.0-alpha.31

package/dist/components/scrollbar/Scrollbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Scrollbar.d.ts","sourceRoot":"","sources":["../../../src/components/scrollbar/Scrollbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,wCAAwC,CAAC;AAGhD,MAAM,WAAW,cAAc;IAC7B,0BAA0B;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CAC/B;AAED;;;;;GAKG;AACH,QAAA,MAAM,SAAS,2GA6Cb,CAAC;AAEH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Scrollbar.d.ts","sourceRoot":"","sources":["../../../src/components/scrollbar/Scrollbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,aAAa,EAClB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,yBAAyB,CAAC;AAGjC,2EAA2E;AAC3E,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,MAAM,CAAC;AAE/C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,GAAG,OAAO,GAAG,UAAU,CAClC;IACC,0BAA0B;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CAC/B;AAED;;;;;GAKG;AACH,QAAA,MAAM,SAAS,2GA6Db,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/dist/components/scrollbar/Scrollbar.js

@@ -1,32 +1,47 @@
-import { jsx as u } from "react/jsx-runtime";
-import { forwardRef as p, useRef as b, useCallback as v } from "react";
-import y from "simplebar-react";
-import '../../node_modules/simplebar-react/dist/simplebar.min.css';/* empty css                                                        */
-import x from "./Scrollbar.module.scss.js";
-const R = p(function({ children: a, color: s, alwaysVisible: i = !1, className: n, style: c, onScroll: e }, r) {
-  const o = b(void 0), f = v(
+import { jsx as v } from "react/jsx-runtime";
+import { forwardRef as y, useRef as x, useCallback as N } from "react";
+import j from "simplebar-react";
+import { toKebab as B } from "../../utils/string.js";
+import './simplebar-vendor.css';/* empty css                      */
+import i from "./Scrollbar.module.scss.js";
+const k = y(function({
+  children: c,
+  color: s,
+  alwaysVisible: n = !1,
+  size: l = "default",
+  className: f,
+  style: m,
+  onScroll: e,
+  ...d
+}, r) {
+  const o = x(void 0), u = N(
     (t) => {
-      var l;
-      (l = o.current) == null || l.call(o), o.current = void 0, t && e && (t.addEventListener("scroll", e), o.current = () => t.removeEventListener("scroll", e)), typeof r == "function" ? r(t) : r && (r.current = t);
+      var a;
+      (a = o.current) == null || a.call(o), o.current = void 0, t && e && (t.addEventListener("scroll", e), o.current = () => t.removeEventListener("scroll", e)), typeof r == "function" ? r(t) : r && (r.current = t);
     },
     [e, r]
-  ), m = {
-    ...c,
+  ), b = {
+    ...m,
     ...s ? { "--scrollbar-color": `var(${s})` } : null
-  }, d = [x.scrollbar, n].filter(Boolean).join(" ");
-  return /* @__PURE__ */ u(
-    y,
+  }, p = [
+    i.scrollbar,
+    l !== "default" && i[`scrollbar--size-${B(l)}`],
+    f
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ v(
+    j,
     {
-      autoHide: !i,
-      scrollableNodeProps: { ref: f },
-      className: d,
-      style: m,
+      ...d,
+      autoHide: !n,
+      scrollableNodeProps: { ref: u },
+      className: p,
+      style: b,
       tabIndex: -1,
-      children: a
+      children: c
     }
   );
 });
 export {
-  R as default
+  k as default
 };
 //# sourceMappingURL=Scrollbar.js.map

package/dist/components/scrollbar/Scrollbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Scrollbar.js","sources":["../../../src/components/scrollbar/Scrollbar.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useRef,\n  type CSSProperties,\n  type ReactNode,\n} from 'react';\nimport SimpleBar from 'simplebar-react';\nimport 'simplebar-react/dist/simplebar.min.css';\nimport styles from './Scrollbar.module.scss';\n\nexport interface ScrollbarProps {\n  /** Scrollable content. */\n  children: ReactNode;\n  /**\n   * CSS variable name (including the leading `--`) for the thumb RGB triplet.\n   * Use this to recolor the thumb in dark surfaces (e.g. `--sidebar-text-rgb`).\n   * When omitted, the thumb uses `--center-channel-color-rgb`.\n   */\n  color?: string;\n  /**\n   * Disable auto-hide; the thumb is visible whenever content overflows.\n   * Default: false (auto-hide).\n   */\n  alwaysVisible?: boolean;\n  /** Class applied to the SimpleBar root. */\n  className?: string;\n  /** Inline style applied to the SimpleBar root. */\n  style?: CSSProperties;\n  /** Scroll handler attached to the inner scrollable element. */\n  onScroll?: (e: Event) => void;\n}\n\n/**\n * Scrollbars let people move through content that exceeds the viewport while showing where\n * they are in the larger whole. Compass uses a single, minimal treatment — a transparent\n * track with a thin, translucent thumb — so the scrollbar reads as a position indicator\n * first and a control second.\n */\nconst Scrollbar = forwardRef<HTMLDivElement, ScrollbarProps>(function Scrollbar(\n  { children, color, alwaysVisible = false, className, style, onScroll },\n  ref,\n) {\n  const cleanup = useRef<(() => void) | undefined>(undefined);\n\n  const setScrollNode = useCallback(\n    (el: HTMLDivElement | null) => {\n      cleanup.current?.();\n      cleanup.current = undefined;\n\n      if (el && onScroll) {\n        el.addEventListener('scroll', onScroll);\n        cleanup.current = () => el.removeEventListener('scroll', onScroll);\n      }\n\n      if (typeof ref === 'function') {\n        ref(el);\n      } else if (ref) {\n        (ref as React.MutableRefObject<HTMLDivElement | null>).current = el;\n      }\n    },\n    [onScroll, ref],\n  );\n\n  const mergedStyle: CSSProperties = {\n    ...style,\n    ...(color\n      ? ({ '--scrollbar-color': `var(${color})` } as CSSProperties)\n      : null),\n  };\n\n  const rootClass = [styles.scrollbar, className].filter(Boolean).join(' ');\n\n  return (\n    <SimpleBar\n      autoHide={!alwaysVisible}\n      scrollableNodeProps={{ ref: setScrollNode }}\n      className={rootClass}\n      style={mergedStyle}\n      tabIndex={-1}\n    >\n      {children}\n    </SimpleBar>\n  );\n});\n\nexport default Scrollbar;\n"],"names":["Scrollbar","forwardRef","children","color","alwaysVisible","className","style","onScroll","ref","cleanup","useRef","setScrollNode","useCallback","el","_a","mergedStyle","rootClass","styles","jsx","SimpleBar"],"mappings":";;;;;AAuCA,MAAMA,IAAYC,EAA2C,SAC3D,EAAE,UAAAC,GAAU,OAAAC,GAAO,eAAAC,IAAgB,IAAO,WAAAC,GAAW,OAAAC,GAAO,UAAAC,EAAA,GAC5DC,GACA;AACA,QAAMC,IAAUC,EAAiC,MAAS,GAEpDC,IAAgBC;AAAA,IACpB,CAACC,MAA8B;;AAC7B,OAAAC,IAAAL,EAAQ,YAAR,QAAAK,EAAA,KAAAL,IACAA,EAAQ,UAAU,QAEdI,KAAMN,MACRM,EAAG,iBAAiB,UAAUN,CAAQ,GACtCE,EAAQ,UAAU,MAAMI,EAAG,oBAAoB,UAAUN,CAAQ,IAG/D,OAAOC,KAAQ,aACjBA,EAAIK,CAAE,IACGL,MACRA,EAAsD,UAAUK;AAAA,IAErE;AAAA,IACA,CAACN,GAAUC,CAAG;AAAA,EAAA,GAGVO,IAA6B;AAAA,IACjC,GAAGT;AAAA,IACH,GAAIH,IACC,EAAE,qBAAqB,OAAOA,CAAK,QACpC;AAAA,EAAA,GAGAa,IAAY,CAACC,EAAO,WAAWZ,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAExE,SACE,gBAAAa;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,UAAU,CAACf;AAAA,MACX,qBAAqB,EAAE,KAAKO,EAAA;AAAA,MAC5B,WAAWK;AAAA,MACX,OAAOD;AAAA,MACP,UAAU;AAAA,MAET,UAAAb;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"Scrollbar.js","sources":["../../../src/components/scrollbar/Scrollbar.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport SimpleBar from 'simplebar-react';\nimport { toKebab } from '@/utils/string';\nimport './simplebar-vendor.scss';\nimport styles from './Scrollbar.module.scss';\n\n/** Track width. `default` is 8px; `wide` is 10px (modals, large panes). */\nexport type ScrollbarSize = 'default' | 'wide';\n\nexport interface ScrollbarProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'children' | 'color' | 'onScroll'\n> {\n  /** Scrollable content. */\n  children: ReactNode;\n  /**\n   * CSS variable name (including the leading `--`) for the thumb RGB triplet.\n   * Use this to recolor the thumb in dark surfaces (e.g. `--sidebar-text-rgb`).\n   * When omitted, the thumb uses `--center-channel-color-rgb`.\n   */\n  color?: string;\n  /**\n   * Disable auto-hide; the thumb is visible whenever content overflows.\n   * Default: false (auto-hide).\n   */\n  alwaysVisible?: boolean;\n  /** Track width. Default: `default` (8px). Use `wide` (10px) in modals. */\n  size?: ScrollbarSize;\n  /** Class applied to the SimpleBar root. */\n  className?: string;\n  /** Inline style applied to the SimpleBar root. */\n  style?: CSSProperties;\n  /** Scroll handler attached to the inner scrollable element. */\n  onScroll?: (e: Event) => void;\n}\n\n/**\n * Scrollbars let people move through content that exceeds the viewport while showing where\n * they are in the larger whole. Compass uses a single, minimal treatment — a transparent\n * track with a thin, translucent thumb — so the scrollbar reads as a position indicator\n * first and a control second.\n */\nconst Scrollbar = forwardRef<HTMLDivElement, ScrollbarProps>(function Scrollbar(\n  {\n    children,\n    color,\n    alwaysVisible = false,\n    size = 'default',\n    className,\n    style,\n    onScroll,\n    ...rest\n  },\n  ref,\n) {\n  const cleanup = useRef<(() => void) | undefined>(undefined);\n\n  const setScrollNode = useCallback(\n    (el: HTMLDivElement | null) => {\n      cleanup.current?.();\n      cleanup.current = undefined;\n\n      if (el && onScroll) {\n        el.addEventListener('scroll', onScroll);\n        cleanup.current = () => el.removeEventListener('scroll', onScroll);\n      }\n\n      if (typeof ref === 'function') {\n        ref(el);\n      } else if (ref) {\n        (ref as React.MutableRefObject<HTMLDivElement | null>).current = el;\n      }\n    },\n    [onScroll, ref],\n  );\n\n  const mergedStyle: CSSProperties = {\n    ...style,\n    ...(color\n      ? ({ '--scrollbar-color': `var(${color})` } as CSSProperties)\n      : null),\n  };\n\n  const rootClass = [\n    styles.scrollbar,\n    size !== 'default' && styles[`scrollbar--size-${toKebab(size)}`],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <SimpleBar\n      {...rest}\n      autoHide={!alwaysVisible}\n      scrollableNodeProps={{ ref: setScrollNode }}\n      className={rootClass}\n      style={mergedStyle}\n      tabIndex={-1}\n    >\n      {children}\n    </SimpleBar>\n  );\n});\n\nexport default Scrollbar;\n"],"names":["Scrollbar","forwardRef","children","color","alwaysVisible","size","className","style","onScroll","rest","ref","cleanup","useRef","setScrollNode","useCallback","el","_a","mergedStyle","rootClass","styles","toKebab","jsx","SimpleBar"],"mappings":";;;;;;AAiDA,MAAMA,IAAYC,EAA2C,SAC3D;AAAA,EACE,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,MAAAC,IAAO;AAAA,EACP,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAUC,EAAiC,MAAS,GAEpDC,IAAgBC;AAAA,IACpB,CAACC,MAA8B;;AAC7B,OAAAC,IAAAL,EAAQ,YAAR,QAAAK,EAAA,KAAAL,IACAA,EAAQ,UAAU,QAEdI,KAAMP,MACRO,EAAG,iBAAiB,UAAUP,CAAQ,GACtCG,EAAQ,UAAU,MAAMI,EAAG,oBAAoB,UAAUP,CAAQ,IAG/D,OAAOE,KAAQ,aACjBA,EAAIK,CAAE,IACGL,MACRA,EAAsD,UAAUK;AAAA,IAErE;AAAA,IACA,CAACP,GAAUE,CAAG;AAAA,EAAA,GAGVO,IAA6B;AAAA,IACjC,GAAGV;AAAA,IACH,GAAIJ,IACC,EAAE,qBAAqB,OAAOA,CAAK,QACpC;AAAA,EAAA,GAGAe,IAAY;AAAA,IAChBC,EAAO;AAAA,IACPd,MAAS,aAAac,EAAO,mBAAmBC,EAAQf,CAAI,CAAC,EAAE;AAAA,IAC/DC;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAe;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGb;AAAA,MACJ,UAAU,CAACL;AAAA,MACX,qBAAqB,EAAE,KAAKS,EAAA;AAAA,MAC5B,WAAWK;AAAA,MACX,OAAOD;AAAA,MACP,UAAU;AAAA,MAET,UAAAf;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/components/scrollbar/Scrollbar.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Scrollbar.module.css');const l="_scrollbar_1gcpr_2",e={scrollbar:l};exports.default=e;exports.scrollbar=l;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Scrollbar.css');const l="_scrollbar_c4qaw_13",e={scrollbar:l,"scrollbar--size-wide":"_scrollbar--size-wide_c4qaw_25"};exports.default=e;exports.scrollbar=l;
 //# sourceMappingURL=Scrollbar.module.scss.cjs.map

package/dist/components/scrollbar/Scrollbar.module.scss.js

@@ -1,8 +1,9 @@
-import './Scrollbar.module.css';const l = "_scrollbar_1gcpr_2", r = {
-  scrollbar: l
+import './Scrollbar.css';const l = "_scrollbar_c4qaw_13", s = {
+  scrollbar: l,
+  "scrollbar--size-wide": "_scrollbar--size-wide_c4qaw_25"
 };
 export {
-  r as default,
+  s as default,
   l as scrollbar
 };
 //# sourceMappingURL=Scrollbar.module.scss.js.map

package/dist/components/scrollbar/Scrollbar.module.scss.js.map

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

package/dist/components/scrollbar/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Scrollbar } from './Scrollbar';
-export type { ScrollbarProps } from './Scrollbar';
+export type { ScrollbarProps, ScrollbarSize } from './Scrollbar';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/scrollbar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/scrollbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/scrollbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/scrollbar/simplebar-vendor.css

@@ -0,0 +1 @@
+@layer compass-ui.base,compass-ui.vendor,compass-ui.webapp-compat,compass-ui.tokens,compass-ui.themes;@layer compass-ui.vendor{[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto!important;height:auto!important;z-index:0}.simplebar-offset{direction:inherit!important;box-sizing:inherit!important;resize:none!important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch}.simplebar-content-wrapper{direction:inherit;box-sizing:border-box!important;position:relative;display:block;height:100%;width:auto;max-width:100%;max-height:100%;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.simplebar-content-wrapper::-webkit-scrollbar,.simplebar-hide-scrollbar::-webkit-scrollbar{display:none;width:0;height:0}.simplebar-content:after,.simplebar-content:before{content:" ";display:table}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none}.simplebar-height-auto-observer-wrapper{box-sizing:inherit!important;height:100%;width:100%;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0}.simplebar-height-auto-observer{box-sizing:inherit;display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden}[data-simplebar].simplebar-dragging,[data-simplebar].simplebar-dragging .simplebar-content{pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all}.simplebar-scrollbar{position:absolute;left:0;right:0;min-height:10px}.simplebar-scrollbar:before{position:absolute;content:"";background:#000;border-radius:7px;left:2px;right:2px;opacity:0;transition:opacity .2s .5s linear}.simplebar-scrollbar.simplebar-visible:before{opacity:.5;transition-delay:0s;transition-duration:0s}.simplebar-track.simplebar-vertical{top:0;width:11px}.simplebar-scrollbar:before{top:2px;bottom:2px;left:2px;right:2px}.simplebar-track.simplebar-horizontal{left:0;height:11px}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:0;bottom:0;min-height:0;min-width:10px;width:auto}[data-simplebar-direction=rtl] .simplebar-track.simplebar-vertical{right:auto;left:0}.simplebar-dummy-scrollbar-size{direction:rtl;position:fixed;opacity:0;visibility:hidden;height:500px;width:500px;overflow-y:hidden;overflow-x:scroll;-ms-overflow-style:scrollbar!important}.simplebar-dummy-scrollbar-size>div{width:200%;height:200%;margin:10px 0}.simplebar-hide-scrollbar{position:fixed;left:0;visibility:hidden;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}}

package/dist/components/search-input/SearchInput.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),a=require("react"),$=require("../../utils/string.cjs"),g=require("../icon/Icon.cjs"),__B=require("@mattermost/compass-icons/components/magnify.js"),B=__B?.default??__B,__D=require("@mattermost/compass-icons/components/close-circle.js"),D=__D?.default??__D,s=require("./SearchInput.module.scss.cjs"),G={small:"12",medium:"16",large:"20"},H=a.forwardRef(function({className:q="",size:p="medium",label:o,onClear:d,id:y,value:f,defaultValue:I,placeholder:C,onFocus:n,onBlur:r,onChange:l,disabled:i,...k},u){const R=a.useId(),_=y??R,h=a.useRef(null),c=f!==void 0,[z,m]=a.useState(I??""),j=c?f:z,x=j!=null&&j!=="",[M,b]=a.useState(!1),w=M||x,T=a.useCallback(e=>{b(!0),n==null||n(e)},[n]),V=a.useCallback(e=>{b(!1),r==null||r(e)},[r]),F=a.useCallback(e=>{c||m(e.target.value),l==null||l(e)},[c,l]),O=a.useCallback(e=>{h.current=e,typeof u=="function"?u(e):u&&(u.current=e)},[u]),A=a.useCallback(()=>{var S;if(i)return;if(d){d(),(S=h.current)==null||S.focus();return}const e=h.current;e!=null&&(e.value="",c||m(""),l==null||l({target:e,currentTarget:e}),e.focus())},[i,c,l,d]),v=x&&!i,E=s.default[`searchInput--size-${$.toKebab(p)}`],K=o!=null&&w?s.default["searchInput--label-floated"]:"",L=s.default["searchInput--has-leading-icon"],U=v?s.default["searchInput--has-trailing-icon"]:"",N=G[p],Z=[s.default.searchInput,E,K,L,U,q].filter(Boolean).join(" ");return t.jsx("div",{className:Z,children:t.jsxs("div",{className:s.default.searchInput__wrapper,children:[o!=null&&t.jsx("label",{className:s.default.searchInput__label,htmlFor:_,children:o}),t.jsxs("div",{className:s.default.searchInput__inner,children:[t.jsx("span",{className:s.default.searchInput__leadingIcon,"aria-hidden":!0,children:t.jsx(g.default,{size:N,glyph:t.jsx(B,{})})}),t.jsx("input",{ref:O,id:_,type:"search",className:s.default.searchInput__input,value:c?f:void 0,defaultValue:c?void 0:I,placeholder:C,disabled:i,onFocus:T,onBlur:V,onChange:F,...k}),v&&t.jsx("span",{className:s.default.searchInput__trailingIcon,children:t.jsx("button",{type:"button",className:s.default.searchInput__clearButton,onClick:A,"aria-label":"Clear search",tabIndex:-1,children:t.jsx(g.default,{size:N,glyph:t.jsx(D,{})})})})]})]})})});exports.default=H;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),l=require("react"),ae=require("../../utils/string.cjs"),le=require("../icon/Icon.cjs"),__te=require("@mattermost/compass-icons/components/magnify.js"),te=__te?.default??__te,ie=require("../field/FieldClearButton.cjs"),p=require("../field/fieldDescribedBy.cjs"),ne=require("../field/useFieldClear.cjs"),ce=require("../field-message/FieldMessage.cjs"),e=require("./SearchInput.module.scss.cjs"),de={small:"12",medium:"16",large:"20"},ue=l.forwardRef(function({className:M="",size:r="medium",label:o,invalid:R=!1,message:h,messageTone:v,onClear:k,clearLabel:D="Clear search",clearButtonProps:n,id:K,value:f,defaultValue:_,placeholder:V,onFocus:c,onBlur:d,onChange:u,disabled:C,readOnly:m,onKeyDown:z,"aria-describedby":E,...T},i){const $=l.useId(),b=K??$,I=l.useRef(null),t=f!==void 0,[A,g]=l.useState(_??""),j=t?f:A,x=j!=null&&j!=="",[L,q]=l.useState(!1),O=L||x,U=l.useCallback(a=>{q(!0),c==null||c(a)},[c]),Z=l.useCallback(a=>{q(!1),d==null||d(a)},[d]),y=l.useCallback(a=>{t||g(a.target.value),u==null||u(a)},[t,u]),G=l.useCallback(a=>{I.current=a,typeof i=="function"?i(a):i&&(i.current=a)},[i]),{showClearButton:F,handleClear:H,handleKeyDown:J}=ne.useFieldClear({disabled:!!(C||m),hasValue:x,clearEnabled:!0,isControlled:t,onClear:k,onChange:y,onKeyDown:z,inputRef:I,setUncontrolledValue:g}),S=p.isFieldInvalid(R,h,v),N=p.hasFieldMessage(h),Q=e.default[`search-input--size-${ae.toKebab(r)}`],W=S?e.default["search-input--invalid"]:"",X=o!=null&&O?e.default["search-input--label-floated"]:"",Y=e.default["search-input--has-leading-icon"],B=F?e.default["search-input--has-trailing-icon"]:"",P=de[r],ee=[e.default["search-input"],Q,W,X,Y,B,M].filter(Boolean).join(" "),w=N?`${b}-message`:void 0,se=v??"error";return s.jsxs("div",{className:ee,children:[s.jsxs("div",{className:e.default["search-input__wrapper"],children:[o!=null&&s.jsx("label",{className:e.default["search-input__label"],htmlFor:b,children:o}),s.jsxs("div",{className:e.default["search-input__inner"],children:[s.jsx("span",{className:e.default["search-input__leading-icon"],"aria-hidden":!0,children:s.jsx(le.default,{size:P,glyph:s.jsx(te,{})})}),s.jsx("input",{ref:G,id:b,type:"search",className:e.default["search-input__input"],value:t?f:void 0,defaultValue:t?void 0:_,placeholder:V,disabled:C,readOnly:m,onFocus:U,onBlur:Z,onChange:y,onKeyDown:J,"aria-invalid":S?!0:void 0,"aria-describedby":p.mergeFieldDescribedBy(E,w,void 0),...T}),F&&s.jsx("span",{className:e.default["search-input__trailing-icon"],children:s.jsx(ie.default,{size:r,clearLabel:D,clearButtonProps:n,onClick:H,tabIndex:(n==null?void 0:n.tabIndex)??-1})})]})]}),N&&s.jsx(ce.default,{id:w,message:h,tone:se})]})});exports.default=ue;
 //# sourceMappingURL=SearchInput.cjs.map

package/dist/components/search-input/SearchInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.cjs","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';\nimport {\n  forwardRef,\n  useId,\n  useState,\n  useCallback,\n  useRef,\n} from 'react';\nimport { toKebab } from '@/utils/string';\nimport type { IconSize } from '@/components/icon/Icon';\nimport Icon from '@/components/icon/Icon';\nimport MagnifyIcon from '@mattermost/compass-icons/components/magnify';\nimport CloseCircleIcon from '@mattermost/compass-icons/components/close-circle';\nimport styles from './SearchInput.module.scss';\n\nexport type SearchInputSize = 'small' | 'medium' | 'large';\n\nconst ICON_SIZE_MAP: Record<SearchInputSize, IconSize> = {\n  small: '12',\n  medium: '16',\n  large: '20',\n};\n\nexport interface SearchInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Floating label (placeholder-style). Floats above border when filled. */\n  label?: ReactNode;\n  /** Size variant. Default: Medium. */\n  size?: SearchInputSize;\n  /** Called when the clear button is pressed. Omit to use built-in clearing. */\n  onClear?: () => void;\n}\n\n/**\n * Search Inputs are the entry point to filtering or finding content — global search, channel\n * switcher, member picker, file finder. They look like a text input with a leading magnifier\n * so the affordance is obvious before the user reads a single word.\n */\nconst SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n  function SearchInput(\n    {\n      className = '',\n      size = 'medium',\n      label,\n      onClear,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      disabled,\n      ...rest\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const isControlled = valueProp !== undefined;\n    const [uncontrolledValue, setUncontrolledValue] = useState(\n      defaultValue ?? '',\n    );\n    const value = isControlled ? (valueProp as string) : uncontrolledValue;\n    const hasValue = value != null && value !== '';\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 (!isControlled) setUncontrolledValue(e.target.value);\n        onChange?.(e);\n      },\n      [isControlled, 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 handleClear = useCallback(() => {\n      if (disabled) 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?.({\n        target: input,\n        currentTarget: input,\n      } as ChangeEvent<HTMLInputElement>);\n\n      input.focus();\n    }, [disabled, isControlled, onChange, onClear]);\n\n    const showClearButton = hasValue && !disabled;\n\n    const sizeClass = styles[`searchInput--size-${toKebab(size)}`];\n    const labelFloatedClass =\n      label != null && labelFloated ? styles['searchInput--label-floated'] : '';\n    const hasLeadingClass = styles['searchInput--has-leading-icon'];\n    const hasTrailingClass = showClearButton\n      ? styles['searchInput--has-trailing-icon']\n      : '';\n    const iconSize = ICON_SIZE_MAP[size];\n\n    const rootClass = [\n      styles.searchInput,\n      sizeClass,\n      labelFloatedClass,\n      hasLeadingClass,\n      hasTrailingClass,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <div className={rootClass}>\n        <div className={styles.searchInput__wrapper}>\n          {label != null && (\n            <label className={styles.searchInput__label} htmlFor={id}>\n              {label}\n            </label>\n          )}\n          <div className={styles.searchInput__inner}>\n            <span className={styles.searchInput__leadingIcon} aria-hidden>\n              <Icon size={iconSize} glyph={<MagnifyIcon />} />\n            </span>\n            <input\n              ref={setInputRef}\n              id={id}\n              type=\"search\"\n              className={styles.searchInput__input}\n              value={isControlled ? valueProp : undefined}\n              defaultValue={isControlled ? undefined : defaultValue}\n              placeholder={placeholder}\n              disabled={disabled}\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              {...rest}\n            />\n            {showClearButton && (\n              <span className={styles.searchInput__trailingIcon}>\n                <button\n                  type=\"button\"\n                  className={styles.searchInput__clearButton}\n                  onClick={handleClear}\n                  aria-label=\"Clear search\"\n                  tabIndex={-1}\n                >\n                  <Icon size={iconSize} glyph={<CloseCircleIcon />} />\n                </button>\n              </span>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  },\n);\n\nexport default SearchInput;\n"],"names":["ICON_SIZE_MAP","SearchInput","forwardRef","className","size","label","onClear","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","rest","ref","generatedId","useId","id","inputRef","useRef","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isFocused","setIsFocused","labelFloated","handleFocus","useCallback","handleBlur","handleChange","setInputRef","node","handleClear","_a","input","showClearButton","sizeClass","styles","toKebab","labelFloatedClass","hasLeadingClass","hasTrailingClass","iconSize","rootClass","jsx","jsxs","Icon","MagnifyIcon","CloseCircleIcon"],"mappings":"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"}
+{"version":3,"file":"SearchInput.cjs","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import type {\n  ChangeEvent,\n  InputHTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n} from 'react';\nimport { forwardRef, useId, useState, useCallback, useRef } from 'react';\nimport { toKebab } from '@/utils/string';\nimport type { IconSize } from '@/components/icon/Icon';\nimport Icon from '@/components/icon/Icon';\nimport MagnifyIcon from '@mattermost/compass-icons/components/magnify';\nimport FieldClearButton from '@/components/field/FieldClearButton';\nimport {\n  hasFieldMessage,\n  isFieldInvalid,\n  mergeFieldDescribedBy,\n} from '@/components/field/fieldDescribedBy';\nimport { useFieldClear } from '@/components/field/useFieldClear';\nimport FieldMessage from '@/components/field-message/FieldMessage';\nimport type { FieldMessageTone } from '@/components/field-message/FieldMessage';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport styles from './SearchInput.module.scss';\n\nexport type SearchInputSize = 'small' | 'medium' | 'large';\n\nconst ICON_SIZE_MAP: Record<SearchInputSize, IconSize> = {\n  small: '12',\n  medium: '16',\n  large: '20',\n};\n\nexport interface SearchInputProps 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 (placeholder-style). Floats above border when filled. */\n  label?: ReactNode;\n  /** Size variant. Default: Medium. */\n  size?: SearchInputSize;\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  /** Called when the clear button is pressed. Omit to use built-in clearing. */\n  onClear?: () => void;\n  /** Accessible name for the clear button. Default: \"Clear search\". */\n  clearLabel?: string;\n  /** Extra attributes for the clear button (e.g. `data-testid`). */\n  clearButtonProps?: BuiltInButtonProps;\n}\n\n/**\n * Search Inputs are the entry point to filtering or finding content — global search, channel\n * switcher, member picker, file finder. They look like a text input with a leading magnifier\n * so the affordance is obvious before the user reads a single word.\n */\nconst SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n  function SearchInput(\n    {\n      className = '',\n      size = 'medium',\n      label,\n      invalid = false,\n      message,\n      messageTone,\n      onClear,\n      clearLabel = 'Clear search',\n      clearButtonProps,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      disabled,\n      readOnly,\n      onKeyDown,\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 isControlled = valueProp !== undefined;\n    const [uncontrolledValue, setUncontrolledValue] = useState(\n      defaultValue ?? '',\n    );\n    const value = isControlled ? (valueProp as string) : uncontrolledValue;\n    const hasValue = value != null && value !== '';\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 (!isControlled) setUncontrolledValue(e.target.value);\n        onChange?.(e);\n      },\n      [isControlled, 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 { showClearButton, handleClear, handleKeyDown } = useFieldClear({\n      disabled: Boolean(disabled || readOnly),\n      hasValue,\n      clearEnabled: true,\n      isControlled,\n      onClear,\n      onChange: handleChange,\n      onKeyDown: onKeyDown as\n        | ((e: KeyboardEvent<HTMLInputElement>) => void)\n        | undefined,\n      inputRef,\n      setUncontrolledValue,\n    });\n\n    const showInvalid = isFieldInvalid(invalid, message, messageTone);\n    const showMessage = hasFieldMessage(message);\n    const sizeClass = styles[`search-input--size-${toKebab(size)}`];\n    const invalidClass = showInvalid ? styles['search-input--invalid'] : '';\n    const labelFloatedClass =\n      label != null && labelFloated\n        ? styles['search-input--label-floated']\n        : '';\n    const hasLeadingClass = styles['search-input--has-leading-icon'];\n    const hasTrailingClass = showClearButton\n      ? styles['search-input--has-trailing-icon']\n      : '';\n    const iconSize = ICON_SIZE_MAP[size];\n\n    const rootClass = [\n      styles['search-input'],\n      sizeClass,\n      invalidClass,\n      labelFloatedClass,\n      hasLeadingClass,\n      hasTrailingClass,\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['search-input__wrapper']}>\n          {label != null && (\n            <label className={styles['search-input__label']} htmlFor={id}>\n              {label}\n            </label>\n          )}\n          <div className={styles['search-input__inner']}>\n            <span className={styles['search-input__leading-icon']} aria-hidden>\n              <Icon size={iconSize} glyph={<MagnifyIcon />} />\n            </span>\n            <input\n              ref={setInputRef}\n              id={id}\n              type=\"search\"\n              className={styles['search-input__input']}\n              value={isControlled ? valueProp : undefined}\n              defaultValue={isControlled ? undefined : defaultValue}\n              placeholder={placeholder}\n              disabled={disabled}\n              readOnly={readOnly}\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              aria-invalid={showInvalid ? true : undefined}\n              aria-describedby={mergeFieldDescribedBy(\n                describedBy,\n                messageId,\n                undefined,\n              )}\n              {...rest}\n            />\n            {showClearButton && (\n              <span className={styles['search-input__trailing-icon']}>\n                <FieldClearButton\n                  size={size}\n                  clearLabel={clearLabel}\n                  clearButtonProps={clearButtonProps}\n                  onClick={handleClear}\n                  tabIndex={clearButtonProps?.tabIndex ?? -1}\n                />\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 SearchInput;\n"],"names":["ICON_SIZE_MAP","SearchInput","forwardRef","className","size","label","invalid","message","messageTone","onClear","clearLabel","clearButtonProps","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","readOnly","onKeyDown","describedBy","rest","ref","generatedId","useId","id","inputRef","useRef","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isFocused","setIsFocused","labelFloated","handleFocus","useCallback","e","handleBlur","handleChange","setInputRef","node","showClearButton","handleClear","handleKeyDown","useFieldClear","showInvalid","isFieldInvalid","showMessage","hasFieldMessage","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","hasLeadingClass","hasTrailingClass","iconSize","rootClass","messageId","resolvedTone","jsxs","jsx","Icon","MagnifyIcon","mergeFieldDescribedBy","FieldClearButton","FieldMessage"],"mappings":"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"}

package/dist/components/search-input/SearchInput.css

@@ -0,0 +1 @@
+._search-input_1wqam_13{display:flex;flex-direction:column;gap:var(--spacing-xs);width:100%}._search-input__wrapper_1wqam_19{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)}._search-input_1wqam_13:has(._search-input__input_1wqam_29:not(:disabled)):hover:not(:focus-within) ._search-input__wrapper_1wqam_19{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}._search-input_1wqam_13:has(._search-input__input_1wqam_29:focus-visible) ._search-input__wrapper_1wqam_19{box-shadow:inset 0 0 0 1px var(--focus-ring-color),0 0 0 1px var(--focus-ring-color)}._search-input_1wqam_13:has(._search-input__input_1wqam_29:disabled) ._search-input__wrapper_1wqam_19{background-color:var(--center-channel-bg);opacity:.56}._search-input__label_1wqam_39{position:absolute;left:var(--spacing-xs);top:50%;padding:0 var(--spacing-xxxs);transform:translateY(-50%);margin:0;font-family:var(--font-family-body);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),.64);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)}._search-input--label-floated_1wqam_59 ._search-input__label_1wqam_39{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:1.4;color:rgba(var(--center-channel-color-rgb),.64)}._search-input__inner_1wqam_66{display:flex;align-items:center;flex:1;min-width:0}._search-input__input_1wqam_29{flex:1 1 0;min-width:0;margin:0;padding:0;border:0;background:transparent;font-family:var(--font-family-body);font-size:var(--font-size-75);line-height:var(--line-height-25);font-weight:var(--font-weight-regular);color:var(--center-channel-color)}._search-input__input_1wqam_29::-webkit-search-decoration,._search-input__input_1wqam_29::-webkit-search-cancel-button{-webkit-appearance:none}._search-input__input_1wqam_29:focus{outline:none}._search-input__input_1wqam_29::placeholder{color:rgba(var(--center-channel-color-rgb),.64)}._search-input__input_1wqam_29:disabled{cursor:not-allowed}._search-input__leading-icon_1wqam_97,._search-input__trailing-icon_1wqam_97{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._search-input__leading-icon_1wqam_97{margin-right:var(--spacing-xs);pointer-events:none}._search-input__trailing-icon_1wqam_97{margin-left:var(--spacing-xs)}._search-input--size-small_1wqam_111 ._search-input__wrapper_1wqam_19{min-height:32px}._search-input--size-small_1wqam_111 ._search-input__inner_1wqam_66{padding:var(--spacing-xs) var(--spacing-m)}._search-input--size-small_1wqam_111 ._search-input__input_1wqam_29{font-size:var(--font-size-75);line-height:var(--line-height-25)}._search-input--size-small_1wqam_111._search-input--label-floated_1wqam_59 ._search-input__label_1wqam_39{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:1.4}._search-input--size-medium_1wqam_127 ._search-input__wrapper_1wqam_19{min-height:40px}._search-input--size-medium_1wqam_127 ._search-input__inner_1wqam_66{padding:var(--spacing-s) var(--spacing-l)}._search-input--size-medium_1wqam_127 ._search-input__input_1wqam_29{font-size:var(--font-size-100);line-height:var(--line-height-100)}._search-input--size-medium_1wqam_127 ._search-input__label_1wqam_39{font-size:var(--font-size-100);left:var(--spacing-m)}._search-input--size-medium_1wqam_127._search-input--label-floated_1wqam_59 ._search-input__label_1wqam_39{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:1.4}._search-input--size-large_1wqam_147 ._search-input__wrapper_1wqam_19{min-height:48px}._search-input--size-large_1wqam_147 ._search-input__inner_1wqam_66{padding:var(--spacing-m) var(--spacing-l)}._search-input--size-large_1wqam_147 ._search-input__input_1wqam_29{font-size:var(--font-size-200);line-height:var(--line-height-200)}._search-input--size-large_1wqam_147 ._search-input__label_1wqam_39{font-size:var(--font-size-200);line-height:var(--line-height-200);left:var(--spacing-m)}._search-input--size-large_1wqam_147._search-input--label-floated_1wqam_59 ._search-input__label_1wqam_39{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:1.4}._search-input--has-leading-icon_1wqam_168 ._search-input__label_1wqam_39{left:28px}._search-input--has-leading-icon_1wqam_168._search-input--label-floated_1wqam_59 ._search-input__label_1wqam_39{left:var(--spacing-xs)}._search-input--has-leading-icon_1wqam_168._search-input--size-medium_1wqam_127 ._search-input__label_1wqam_39{left:36px}._search-input--has-leading-icon_1wqam_168._search-input--size-medium_1wqam_127._search-input--label-floated_1wqam_59 ._search-input__label_1wqam_39{left:var(--spacing-m)}._search-input--has-leading-icon_1wqam_168._search-input--size-large_1wqam_147 ._search-input__label_1wqam_39{left:40px}._search-input--has-leading-icon_1wqam_168._search-input--size-large_1wqam_147._search-input--label-floated_1wqam_59 ._search-input__label_1wqam_39{left:var(--spacing-m)}._search-input_1wqam_13:has(._search-input__input_1wqam_29:focus-visible) ._search-input__label_1wqam_39{color:var(--button-bg)}._search-input_1wqam_13:not(._search-input--label-floated_1wqam_59) ._search-input__label_1wqam_39~* ._search-input__input_1wqam_29::placeholder{color:transparent}._search-input--invalid_1wqam_192 ._search-input__wrapper_1wqam_19{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._search-input--invalid_1wqam_192:has(._search-input__input_1wqam_29:focus-visible) ._search-input__wrapper_1wqam_19{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger)),0 0 0 1px var(--error-text, var(--color-danger))}._search-input--invalid_1wqam_192 ._search-input__label_1wqam_39{color:var(--error-text, var(--color-danger))}._search-input--invalid_1wqam_192:has(._search-input__input_1wqam_29:focus-visible) ._search-input__label_1wqam_39{color:var(--error-text, var(--color-danger))}

package/dist/components/search-input/SearchInput.d.ts

@@ -1,14 +1,29 @@
 import { InputHTMLAttributes, ReactNode } from 'react';
+import { FieldMessageTone } from '../field-message/FieldMessage';
+import { BuiltInButtonProps } from '../../utils/props';
 export type SearchInputSize = 'small' | 'medium' | 'large';
 export interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
     /** Optional CSS class name. */
     className?: string;
+    /** When true, shows invalid/error styling. */
+    invalid?: boolean;
     /** Floating label (placeholder-style). Floats above border when filled. */
     label?: ReactNode;
     /** Size variant. Default: Medium. */
     size?: SearchInputSize;
+    /**
+     * Field message under the field. Accepts translated nodes (e.g. `<FormattedMessage/>`).
+     * Defaults to error tone (invalid chrome) when set without `messageTone`.
+     */
+    message?: ReactNode;
+    /** Visual tone for `message`. Default: `error` when `message` is set. */
+    messageTone?: FieldMessageTone;
     /** Called when the clear button is pressed. Omit to use built-in clearing. */
     onClear?: () => void;
+    /** Accessible name for the clear button. Default: "Clear search". */
+    clearLabel?: string;
+    /** Extra attributes for the clear button (e.g. `data-testid`). */
+    clearButtonProps?: BuiltInButtonProps;
 }
 /**
  * Search Inputs are the entry point to filtering or finding content — global search, channel

package/dist/components/search-input/SearchInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/search-input/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAezE,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAQ3D,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,CAChB;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qCAAqC;IACrC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;;GAIG;AACH,QAAA,MAAM,WAAW,+GA4JhB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/search-input/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,mBAAmB,EAEnB,SAAS,EACV,MAAM,OAAO,CAAC;AAcf,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAC/E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGxD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAQ3D,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,CAChB;IACC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qCAAqC;IACrC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,yEAAyE;IACzE,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,8EAA8E;IAC9E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qEAAqE;IACrE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,kBAAkB,CAAC;CACvC;AAED;;;;GAIG;AACH,QAAA,MAAM,WAAW,+GA2KhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/search-input/SearchInput.js

@@ -1,109 +1,129 @@
-import { jsx as s, jsxs as x } from "react/jsx-runtime";
-import { forwardRef as D, useId as G, useRef as H, useState as z, useCallback as n } from "react";
-import { toKebab as J } from "../../utils/string.js";
-import R from "../icon/Icon.js";
-import __Q from "@mattermost/compass-icons/components/magnify.js";const Q=__Q&&__Q.default?__Q.default:__Q;
-import __W from "@mattermost/compass-icons/components/close-circle.js";const W=__W&&__W.default?__W.default:__W;
+import { jsxs as f, jsx as a } from "react/jsx-runtime";
+import { forwardRef as ie, useId as ne, useRef as te, useState as j, useCallback as r } from "react";
+import { toKebab as le } from "../../utils/string.js";
+import ce from "../icon/Icon.js";
+import __oe from "@mattermost/compass-icons/components/magnify.js";const oe=__oe&&__oe.default?__oe.default:__oe;
+import re from "../field/FieldClearButton.js";
+import { mergeFieldDescribedBy as de, hasFieldMessage as ue, isFieldInvalid as he } from "../field/fieldDescribedBy.js";
+import { useFieldClear as me } from "../field/useFieldClear.js";
+import pe from "../field-message/FieldMessage.js";
 import e from "./SearchInput.module.scss.js";
-const X = {
+const fe = {
   small: "12",
   medium: "16",
   large: "20"
-}, nt = D(
+}, Me = ie(
   function({
-    className: j = "",
-    size: m = "medium",
+    className: D = "",
+    size: d = "medium",
     label: u,
-    onClear: p,
-    id: w,
-    value: d,
-    defaultValue: f,
-    placeholder: C,
-    onFocus: r,
-    onBlur: i,
-    onChange: a,
-    disabled: o,
-    ...V
-  }, l) {
-    const k = G(), I = w ?? k, h = H(null), c = d !== void 0, [F, _] = z(
-      f ?? ""
-    ), v = c ? d : F, N = v != null && v !== "", [M, b] = z(!1), T = M || N, A = n(
-      (t) => {
-        b(!0), r == null || r(t);
+    invalid: K = !1,
+    message: h,
+    messageTone: v,
+    onClear: V,
+    clearLabel: k = "Clear search",
+    clearButtonProps: t,
+    id: z,
+    value: m,
+    defaultValue: I,
+    placeholder: E,
+    onFocus: l,
+    onBlur: c,
+    onChange: o,
+    disabled: b,
+    readOnly: _,
+    onKeyDown: $,
+    "aria-describedby": A,
+    ...L
+  }, n) {
+    const T = ne(), p = z ?? T, C = te(null), i = m !== void 0, [U, g] = j(
+      I ?? ""
+    ), y = i ? m : U, F = y != null && y !== "", [Z, N] = j(!1), q = Z || F, G = r(
+      (s) => {
+        N(!0), l == null || l(s);
       },
-      [r]
-    ), E = n(
-      (t) => {
-        b(!1), i == null || i(t);
+      [l]
+    ), H = r(
+      (s) => {
+        N(!1), c == null || c(s);
       },
-      [i]
-    ), K = n(
-      (t) => {
-        c || _(t.target.value), a == null || a(t);
+      [c]
+    ), w = r(
+      (s) => {
+        i || g(s.target.value), o == null || o(s);
       },
-      [c, a]
-    ), L = n(
-      (t) => {
-        h.current = t, typeof l == "function" ? l(t) : l && (l.current = t);
+      [i, o]
+    ), J = r(
+      (s) => {
+        C.current = s, typeof n == "function" ? n(s) : n && (n.current = s);
       },
-      [l]
-    ), O = n(() => {
-      var S;
-      if (o) return;
-      if (p) {
-        p(), (S = h.current) == null || S.focus();
-        return;
-      }
-      const t = h.current;
-      t != null && (t.value = "", c || _(""), a == null || a({
-        target: t,
-        currentTarget: t
-      }), t.focus());
-    }, [o, c, a, p]), y = N && !o, U = e[`searchInput--size-${J(m)}`], Z = u != null && T ? e["searchInput--label-floated"] : "", $ = e["searchInput--has-leading-icon"], q = y ? e["searchInput--has-trailing-icon"] : "", g = X[m], B = [
-      e.searchInput,
-      U,
-      Z,
-      $,
-      q,
-      j
-    ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ s("div", { className: B, children: /* @__PURE__ */ x("div", { className: e.searchInput__wrapper, children: [
-      u != null && /* @__PURE__ */ s("label", { className: e.searchInput__label, htmlFor: I, children: u }),
-      /* @__PURE__ */ x("div", { className: e.searchInput__inner, children: [
-        /* @__PURE__ */ s("span", { className: e.searchInput__leadingIcon, "aria-hidden": !0, children: /* @__PURE__ */ s(R, { size: g, glyph: /* @__PURE__ */ s(Q, {}) }) }),
-        /* @__PURE__ */ s(
-          "input",
-          {
-            ref: L,
-            id: I,
-            type: "search",
-            className: e.searchInput__input,
-            value: c ? d : void 0,
-            defaultValue: c ? void 0 : f,
-            placeholder: C,
-            disabled: o,
-            onFocus: A,
-            onBlur: E,
-            onChange: K,
-            ...V
-          }
-        ),
-        y && /* @__PURE__ */ s("span", { className: e.searchInput__trailingIcon, children: /* @__PURE__ */ s(
-          "button",
-          {
-            type: "button",
-            className: e.searchInput__clearButton,
-            onClick: O,
-            "aria-label": "Clear search",
-            tabIndex: -1,
-            children: /* @__PURE__ */ s(R, { size: g, glyph: /* @__PURE__ */ s(W, {}) })
-          }
-        ) })
-      ] })
-    ] }) });
+      [n]
+    ), { showClearButton: x, handleClear: O, handleKeyDown: Q } = me({
+      disabled: !!(b || _),
+      hasValue: F,
+      clearEnabled: !0,
+      isControlled: i,
+      onClear: V,
+      onChange: w,
+      onKeyDown: $,
+      inputRef: C,
+      setUncontrolledValue: g
+    }), M = he(K, h, v), S = ue(h), W = e[`search-input--size-${le(d)}`], X = M ? e["search-input--invalid"] : "", Y = u != null && q ? e["search-input--label-floated"] : "", B = e["search-input--has-leading-icon"], P = x ? e["search-input--has-trailing-icon"] : "", ee = fe[d], se = [
+      e["search-input"],
+      W,
+      X,
+      Y,
+      B,
+      P,
+      D
+    ].filter(Boolean).join(" "), R = S ? `${p}-message` : void 0, ae = v ?? "error";
+    return /* @__PURE__ */ f("div", { className: se, children: [
+      /* @__PURE__ */ f("div", { className: e["search-input__wrapper"], children: [
+        u != null && /* @__PURE__ */ a("label", { className: e["search-input__label"], htmlFor: p, children: u }),
+        /* @__PURE__ */ f("div", { className: e["search-input__inner"], children: [
+          /* @__PURE__ */ a("span", { className: e["search-input__leading-icon"], "aria-hidden": !0, children: /* @__PURE__ */ a(ce, { size: ee, glyph: /* @__PURE__ */ a(oe, {}) }) }),
+          /* @__PURE__ */ a(
+            "input",
+            {
+              ref: J,
+              id: p,
+              type: "search",
+              className: e["search-input__input"],
+              value: i ? m : void 0,
+              defaultValue: i ? void 0 : I,
+              placeholder: E,
+              disabled: b,
+              readOnly: _,
+              onFocus: G,
+              onBlur: H,
+              onChange: w,
+              onKeyDown: Q,
+              "aria-invalid": M ? !0 : void 0,
+              "aria-describedby": de(
+                A,
+                R,
+                void 0
+              ),
+              ...L
+            }
+          ),
+          x && /* @__PURE__ */ a("span", { className: e["search-input__trailing-icon"], children: /* @__PURE__ */ a(
+            re,
+            {
+              size: d,
+              clearLabel: k,
+              clearButtonProps: t,
+              onClick: O,
+              tabIndex: (t == null ? void 0 : t.tabIndex) ?? -1
+            }
+          ) })
+        ] })
+      ] }),
+      S && /* @__PURE__ */ a(pe, { id: R, message: h, tone: ae })
+    ] });
   }
 );
 export {
-  nt as default
+  Me as default
 };
 //# sourceMappingURL=SearchInput.js.map

package/dist/components/search-input/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';\nimport {\n  forwardRef,\n  useId,\n  useState,\n  useCallback,\n  useRef,\n} from 'react';\nimport { toKebab } from '@/utils/string';\nimport type { IconSize } from '@/components/icon/Icon';\nimport Icon from '@/components/icon/Icon';\nimport MagnifyIcon from '@mattermost/compass-icons/components/magnify';\nimport CloseCircleIcon from '@mattermost/compass-icons/components/close-circle';\nimport styles from './SearchInput.module.scss';\n\nexport type SearchInputSize = 'small' | 'medium' | 'large';\n\nconst ICON_SIZE_MAP: Record<SearchInputSize, IconSize> = {\n  small: '12',\n  medium: '16',\n  large: '20',\n};\n\nexport interface SearchInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'type'\n> {\n  /** Optional CSS class name. */\n  className?: string;\n  /** Floating label (placeholder-style). Floats above border when filled. */\n  label?: ReactNode;\n  /** Size variant. Default: Medium. */\n  size?: SearchInputSize;\n  /** Called when the clear button is pressed. Omit to use built-in clearing. */\n  onClear?: () => void;\n}\n\n/**\n * Search Inputs are the entry point to filtering or finding content — global search, channel\n * switcher, member picker, file finder. They look like a text input with a leading magnifier\n * so the affordance is obvious before the user reads a single word.\n */\nconst SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n  function SearchInput(\n    {\n      className = '',\n      size = 'medium',\n      label,\n      onClear,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      disabled,\n      ...rest\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const isControlled = valueProp !== undefined;\n    const [uncontrolledValue, setUncontrolledValue] = useState(\n      defaultValue ?? '',\n    );\n    const value = isControlled ? (valueProp as string) : uncontrolledValue;\n    const hasValue = value != null && value !== '';\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 (!isControlled) setUncontrolledValue(e.target.value);\n        onChange?.(e);\n      },\n      [isControlled, 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 handleClear = useCallback(() => {\n      if (disabled) 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?.({\n        target: input,\n        currentTarget: input,\n      } as ChangeEvent<HTMLInputElement>);\n\n      input.focus();\n    }, [disabled, isControlled, onChange, onClear]);\n\n    const showClearButton = hasValue && !disabled;\n\n    const sizeClass = styles[`searchInput--size-${toKebab(size)}`];\n    const labelFloatedClass =\n      label != null && labelFloated ? styles['searchInput--label-floated'] : '';\n    const hasLeadingClass = styles['searchInput--has-leading-icon'];\n    const hasTrailingClass = showClearButton\n      ? styles['searchInput--has-trailing-icon']\n      : '';\n    const iconSize = ICON_SIZE_MAP[size];\n\n    const rootClass = [\n      styles.searchInput,\n      sizeClass,\n      labelFloatedClass,\n      hasLeadingClass,\n      hasTrailingClass,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <div className={rootClass}>\n        <div className={styles.searchInput__wrapper}>\n          {label != null && (\n            <label className={styles.searchInput__label} htmlFor={id}>\n              {label}\n            </label>\n          )}\n          <div className={styles.searchInput__inner}>\n            <span className={styles.searchInput__leadingIcon} aria-hidden>\n              <Icon size={iconSize} glyph={<MagnifyIcon />} />\n            </span>\n            <input\n              ref={setInputRef}\n              id={id}\n              type=\"search\"\n              className={styles.searchInput__input}\n              value={isControlled ? valueProp : undefined}\n              defaultValue={isControlled ? undefined : defaultValue}\n              placeholder={placeholder}\n              disabled={disabled}\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              {...rest}\n            />\n            {showClearButton && (\n              <span className={styles.searchInput__trailingIcon}>\n                <button\n                  type=\"button\"\n                  className={styles.searchInput__clearButton}\n                  onClick={handleClear}\n                  aria-label=\"Clear search\"\n                  tabIndex={-1}\n                >\n                  <Icon size={iconSize} glyph={<CloseCircleIcon />} />\n                </button>\n              </span>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  },\n);\n\nexport default SearchInput;\n"],"names":["ICON_SIZE_MAP","SearchInput","forwardRef","className","size","label","onClear","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","rest","ref","generatedId","useId","id","inputRef","useRef","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isFocused","setIsFocused","labelFloated","handleFocus","useCallback","e","handleBlur","handleChange","setInputRef","node","handleClear","_a","input","showClearButton","sizeClass","styles","toKebab","labelFloatedClass","hasLeadingClass","hasTrailingClass","iconSize","rootClass","jsx","jsxs","Icon","MagnifyIcon","CloseCircleIcon"],"mappings":"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"}
+{"version":3,"file":"SearchInput.js","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import type {\n  ChangeEvent,\n  InputHTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n} from 'react';\nimport { forwardRef, useId, useState, useCallback, useRef } from 'react';\nimport { toKebab } from '@/utils/string';\nimport type { IconSize } from '@/components/icon/Icon';\nimport Icon from '@/components/icon/Icon';\nimport MagnifyIcon from '@mattermost/compass-icons/components/magnify';\nimport FieldClearButton from '@/components/field/FieldClearButton';\nimport {\n  hasFieldMessage,\n  isFieldInvalid,\n  mergeFieldDescribedBy,\n} from '@/components/field/fieldDescribedBy';\nimport { useFieldClear } from '@/components/field/useFieldClear';\nimport FieldMessage from '@/components/field-message/FieldMessage';\nimport type { FieldMessageTone } from '@/components/field-message/FieldMessage';\nimport type { BuiltInButtonProps } from '@/utils/props';\nimport styles from './SearchInput.module.scss';\n\nexport type SearchInputSize = 'small' | 'medium' | 'large';\n\nconst ICON_SIZE_MAP: Record<SearchInputSize, IconSize> = {\n  small: '12',\n  medium: '16',\n  large: '20',\n};\n\nexport interface SearchInputProps 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 (placeholder-style). Floats above border when filled. */\n  label?: ReactNode;\n  /** Size variant. Default: Medium. */\n  size?: SearchInputSize;\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  /** Called when the clear button is pressed. Omit to use built-in clearing. */\n  onClear?: () => void;\n  /** Accessible name for the clear button. Default: \"Clear search\". */\n  clearLabel?: string;\n  /** Extra attributes for the clear button (e.g. `data-testid`). */\n  clearButtonProps?: BuiltInButtonProps;\n}\n\n/**\n * Search Inputs are the entry point to filtering or finding content — global search, channel\n * switcher, member picker, file finder. They look like a text input with a leading magnifier\n * so the affordance is obvious before the user reads a single word.\n */\nconst SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n  function SearchInput(\n    {\n      className = '',\n      size = 'medium',\n      label,\n      invalid = false,\n      message,\n      messageTone,\n      onClear,\n      clearLabel = 'Clear search',\n      clearButtonProps,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      disabled,\n      readOnly,\n      onKeyDown,\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 isControlled = valueProp !== undefined;\n    const [uncontrolledValue, setUncontrolledValue] = useState(\n      defaultValue ?? '',\n    );\n    const value = isControlled ? (valueProp as string) : uncontrolledValue;\n    const hasValue = value != null && value !== '';\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 (!isControlled) setUncontrolledValue(e.target.value);\n        onChange?.(e);\n      },\n      [isControlled, 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 { showClearButton, handleClear, handleKeyDown } = useFieldClear({\n      disabled: Boolean(disabled || readOnly),\n      hasValue,\n      clearEnabled: true,\n      isControlled,\n      onClear,\n      onChange: handleChange,\n      onKeyDown: onKeyDown as\n        | ((e: KeyboardEvent<HTMLInputElement>) => void)\n        | undefined,\n      inputRef,\n      setUncontrolledValue,\n    });\n\n    const showInvalid = isFieldInvalid(invalid, message, messageTone);\n    const showMessage = hasFieldMessage(message);\n    const sizeClass = styles[`search-input--size-${toKebab(size)}`];\n    const invalidClass = showInvalid ? styles['search-input--invalid'] : '';\n    const labelFloatedClass =\n      label != null && labelFloated\n        ? styles['search-input--label-floated']\n        : '';\n    const hasLeadingClass = styles['search-input--has-leading-icon'];\n    const hasTrailingClass = showClearButton\n      ? styles['search-input--has-trailing-icon']\n      : '';\n    const iconSize = ICON_SIZE_MAP[size];\n\n    const rootClass = [\n      styles['search-input'],\n      sizeClass,\n      invalidClass,\n      labelFloatedClass,\n      hasLeadingClass,\n      hasTrailingClass,\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['search-input__wrapper']}>\n          {label != null && (\n            <label className={styles['search-input__label']} htmlFor={id}>\n              {label}\n            </label>\n          )}\n          <div className={styles['search-input__inner']}>\n            <span className={styles['search-input__leading-icon']} aria-hidden>\n              <Icon size={iconSize} glyph={<MagnifyIcon />} />\n            </span>\n            <input\n              ref={setInputRef}\n              id={id}\n              type=\"search\"\n              className={styles['search-input__input']}\n              value={isControlled ? valueProp : undefined}\n              defaultValue={isControlled ? undefined : defaultValue}\n              placeholder={placeholder}\n              disabled={disabled}\n              readOnly={readOnly}\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              aria-invalid={showInvalid ? true : undefined}\n              aria-describedby={mergeFieldDescribedBy(\n                describedBy,\n                messageId,\n                undefined,\n              )}\n              {...rest}\n            />\n            {showClearButton && (\n              <span className={styles['search-input__trailing-icon']}>\n                <FieldClearButton\n                  size={size}\n                  clearLabel={clearLabel}\n                  clearButtonProps={clearButtonProps}\n                  onClick={handleClear}\n                  tabIndex={clearButtonProps?.tabIndex ?? -1}\n                />\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 SearchInput;\n"],"names":["ICON_SIZE_MAP","SearchInput","forwardRef","className","size","label","invalid","message","messageTone","onClear","clearLabel","clearButtonProps","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","readOnly","onKeyDown","describedBy","rest","ref","generatedId","useId","id","inputRef","useRef","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","hasValue","isFocused","setIsFocused","labelFloated","handleFocus","useCallback","e","handleBlur","handleChange","setInputRef","node","showClearButton","handleClear","handleKeyDown","useFieldClear","showInvalid","isFieldInvalid","showMessage","hasFieldMessage","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","hasLeadingClass","hasTrailingClass","iconSize","rootClass","messageId","resolvedTone","jsxs","jsx","Icon","MagnifyIcon","mergeFieldDescribedBy","FieldClearButton","FieldMessage"],"mappings":"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"}

package/dist/components/search-input/SearchInput.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./SearchInput.module.css');const _="_searchInput_1wqgu_2",e="_searchInput__wrapper_1wqgu_7",n="_searchInput__input_1wqgu_17",a="_searchInput__label_1wqgu_27",t="_searchInput__inner_1wqgu_54",u="_searchInput__leadingIcon_1wqgu_85",r="_searchInput__trailingIcon_1wqgu_85",c="_searchInput__clearButton_1wqgu_99",s={searchInput:_,searchInput__wrapper:e,searchInput__input:n,searchInput__label:a,"searchInput--label-floated":"_searchInput--label-floated_1wqgu_47",searchInput__inner:t,searchInput__leadingIcon:u,searchInput__trailingIcon:r,searchInput__clearButton:c,"searchInput--size-small":"_searchInput--size-small_1wqgu_114","searchInput--size-medium":"_searchInput--size-medium_1wqgu_130","searchInput--size-large":"_searchInput--size-large_1wqgu_150","searchInput--has-leading-icon":"_searchInput--has-leading-icon_1wqgu_171"};exports.default=s;exports.searchInput=_;exports.searchInput__clearButton=c;exports.searchInput__inner=t;exports.searchInput__input=n;exports.searchInput__label=a;exports.searchInput__leadingIcon=u;exports.searchInput__trailingIcon=r;exports.searchInput__wrapper=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./SearchInput.css');const a={"search-input":"_search-input_1wqam_13","search-input__wrapper":"_search-input__wrapper_1wqam_19","search-input__input":"_search-input__input_1wqam_29","search-input__label":"_search-input__label_1wqam_39","search-input--label-floated":"_search-input--label-floated_1wqam_59","search-input__inner":"_search-input__inner_1wqam_66","search-input__leading-icon":"_search-input__leading-icon_1wqam_97","search-input__trailing-icon":"_search-input__trailing-icon_1wqam_97","search-input--size-small":"_search-input--size-small_1wqam_111","search-input--size-medium":"_search-input--size-medium_1wqam_127","search-input--size-large":"_search-input--size-large_1wqam_147","search-input--has-leading-icon":"_search-input--has-leading-icon_1wqam_168","search-input--invalid":"_search-input--invalid_1wqam_192"};exports.default=a;
 //# sourceMappingURL=SearchInput.module.scss.cjs.map