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

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":"0YAiBMA,EAAmD,CACvD,MAAO,KACP,OAAQ,KACR,MAAO,IACT,EAqBMC,EAAcC,EAAAA,WAClB,SACE,CACE,UAAAC,EAAY,GACZ,KAAAC,EAAO,SACP,MAAAC,EACA,QAAAC,EACA,GAAIC,EACJ,MAAOC,EACP,aAAAC,EACA,YAAAC,EACA,QAAAC,EACA,OAAAC,EACA,SAAAC,EACA,SAAAC,EACA,GAAGC,CAAA,EAELC,EACA,CACA,MAAMC,EAAcC,EAAAA,MAAA,EACdC,EAAKZ,GAAUU,EACfG,EAAWC,EAAAA,OAAyB,IAAI,EAExCC,EAAed,IAAc,OAC7B,CAACe,EAAmBC,CAAoB,EAAIC,EAAAA,SAChDhB,GAAgB,EAAA,EAEZiB,EAAQJ,EAAgBd,EAAuBe,EAC/CI,EAAWD,GAAS,MAAQA,IAAU,GAEtC,CAACE,EAAWC,CAAY,EAAIJ,EAAAA,SAAS,EAAK,EAC1CK,EAAeF,GAAaD,EAE5BI,EAAcC,EAAAA,YACjB,GAA0C,CACzCH,EAAa,EAAI,EACjBlB,GAAA,MAAAA,EAAU,EACZ,EACA,CAACA,CAAO,CAAA,EAEJsB,EAAaD,EAAAA,YAChB,GAA0C,CACzCH,EAAa,EAAK,EAClBjB,GAAA,MAAAA,EAAS,EACX,EACA,CAACA,CAAM,CAAA,EAEHsB,EAAeF,EAAAA,YAClB,GAAqC,CAC/BV,GAAcE,EAAqB,EAAE,OAAO,KAAK,EACtDX,GAAA,MAAAA,EAAW,EACb,EACA,CAACS,EAAcT,CAAQ,CAAA,EAGnBsB,EAAcH,EAAAA,YACjBI,GAAkC,CACjChB,EAAS,QAAUgB,EACf,OAAOpB,GAAQ,WACjBA,EAAIoB,CAAI,EACCpB,IACTA,EAAI,QAAUoB,EAElB,EACA,CAACpB,CAAG,CAAA,EAGAqB,EAAcL,EAAAA,YAAY,IAAM,OACpC,GAAIlB,EAAU,OAEd,GAAIR,EAAS,CACXA,EAAA,GACAgC,EAAAlB,EAAS,UAAT,MAAAkB,EAAkB,QAClB,MACF,CAEA,MAAMC,EAAQnB,EAAS,QACnBmB,GAAS,OAEbA,EAAM,MAAQ,GACTjB,GAAcE,EAAqB,EAAE,EAE1CX,GAAA,MAAAA,EAAW,CACT,OAAQ0B,EACR,cAAeA,CAAA,GAGjBA,EAAM,MAAA,EACR,EAAG,CAACzB,EAAUQ,EAAcT,EAAUP,CAAO,CAAC,EAExCkC,EAAkBb,GAAY,CAACb,EAE/B2B,EAAYC,EAAAA,QAAO,qBAAqBC,EAAAA,QAAQvC,CAAI,CAAC,EAAE,EACvDwC,EACJvC,GAAS,MAAQyB,EAAeY,EAAAA,QAAO,4BAA4B,EAAI,GACnEG,EAAkBH,EAAAA,QAAO,+BAA+B,EACxDI,EAAmBN,EACrBE,UAAO,gCAAgC,EACvC,GACEK,EAAW/C,EAAcI,CAAI,EAE7B4C,EAAY,CAChBN,EAAAA,QAAO,YACPD,EACAG,EACAC,EACAC,EACA3C,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACE8C,EAAAA,IAAC,OAAI,UAAWD,EACd,gBAAC,MAAA,CAAI,UAAWN,UAAO,qBACpB,SAAA,CAAArC,GAAS,YACP,QAAA,CAAM,UAAWqC,UAAO,mBAAoB,QAASvB,EACnD,SAAAd,CAAA,CACH,EAEF6C,EAAAA,KAAC,MAAA,CAAI,UAAWR,EAAAA,QAAO,mBACrB,SAAA,CAAAO,MAAC,OAAA,CAAK,UAAWP,EAAAA,QAAO,yBAA0B,cAAW,GAC3D,SAAAO,EAAAA,IAACE,EAAAA,QAAA,CAAK,KAAMJ,EAAU,MAAOE,EAAAA,IAACG,EAAA,CAAA,CAAY,EAAI,EAChD,EACAH,EAAAA,IAAC,QAAA,CACC,IAAKd,EACL,GAAAhB,EACA,KAAK,SACL,UAAWuB,EAAAA,QAAO,mBAClB,MAAOpB,EAAed,EAAY,OAClC,aAAcc,EAAe,OAAYb,EACzC,YAAAC,EACA,SAAAI,EACA,QAASiB,EACT,OAAQE,EACR,SAAUC,EACT,GAAGnB,CAAA,CAAA,EAELyB,GACCS,EAAAA,IAAC,OAAA,CAAK,UAAWP,UAAO,0BACtB,SAAAO,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAWP,EAAAA,QAAO,yBAClB,QAASL,EACT,aAAW,eACX,SAAU,GAEV,eAACc,EAAAA,QAAA,CAAK,KAAMJ,EAAU,MAAOE,EAAAA,IAACI,IAAgB,CAAA,CAAI,CAAA,CAAA,CACpD,CACF,CAAA,CAAA,CAEJ,CAAA,CAAA,CACF,CAAA,CACF,CAEJ,CACF"}
+{"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 {\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\nconst CLEAR_ICON_SIZE_MAP: Record<SearchInputSize, IconSize> = {\n  small: '12',\n  medium: '16',\n  large: '16',\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  /** 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      invalid = false,\n      onClear,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      disabled,\n      onKeyDown,\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 handleKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLInputElement>) => {\n        onKeyDown?.(e);\n        if (e.defaultPrevented || disabled) return;\n        if (e.key === 'Escape' && hasValue) {\n          e.preventDefault();\n          handleClear();\n        }\n      },\n      [disabled, handleClear, hasValue, onKeyDown],\n    );\n\n    const showClearButton = hasValue && !disabled;\n\n    const sizeClass = styles[`search-input--size-${toKebab(size)}`];\n    const invalidClass = invalid ? styles['search-input--invalid'] : '';\n    const labelFloatedClass =\n      label != null && labelFloated ? styles['search-input--label-floated'] : '';\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    const clearIconSize = CLEAR_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    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              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              aria-invalid={invalid ? true : undefined}\n              {...rest}\n            />\n            {showClearButton && (\n              <span className={styles['search-input__trailing-icon']}>\n                <button\n                  type=\"button\"\n                  className={styles['search-input__clear-button']}\n                  onClick={handleClear}\n                  aria-label=\"Clear search\"\n                  tabIndex={-1}\n                >\n                  <Icon size={clearIconSize} 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","CLEAR_ICON_SIZE_MAP","SearchInput","forwardRef","className","size","label","invalid","onClear","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","onKeyDown","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","handleKeyDown","showClearButton","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","hasLeadingClass","hasTrailingClass","iconSize","clearIconSize","rootClass","jsx","jsxs","Icon","MagnifyIcon","CloseCircleIcon"],"mappings":"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"}

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

@@ -3,6 +3,8 @@ 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. */

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;AAef,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAc3D,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,8EAA8E;IAC9E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;;GAIG;AACH,QAAA,MAAM,WAAW,+GA+KhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -1,102 +1,116 @@
 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 { forwardRef as Y, useId as B, useRef as D, useState as z, useCallback as i } from "react";
+import { toKebab as K } from "../../utils/string.js";
+import E from "../icon/Icon.js";
+import __tt from "@mattermost/compass-icons/components/magnify.js";const tt=__tt&&__tt.default?__tt.default:__tt;
+import __et from "@mattermost/compass-icons/components/close-circle.js";const et=__et&&__et.default?__et.default:__et;
 import e from "./SearchInput.module.scss.js";
-const X = {
+const st = {
   small: "12",
   medium: "16",
   large: "20"
-}, nt = D(
+}, at = {
+  small: "12",
+  medium: "16",
+  large: "16"
+}, dt = Y(
   function({
     className: j = "",
-    size: m = "medium",
-    label: u,
-    onClear: p,
-    id: w,
-    value: d,
-    defaultValue: f,
-    placeholder: C,
-    onFocus: r,
-    onBlur: i,
+    size: d = "medium",
+    label: f,
+    invalid: v = !1,
+    onClear: m,
+    id: k,
+    value: h,
+    defaultValue: N,
+    placeholder: A,
+    onFocus: n,
+    onBlur: u,
     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(
+    disabled: l,
+    onKeyDown: o,
+    ...M
+  }, r) {
+    const V = B(), S = k ?? V, _ = D(null), c = h !== void 0, [F, b] = z(
+      N ?? ""
+    ), g = c ? h : F, p = g != null && g !== "", [L, C] = z(!1), O = L || p, T = i(
       (t) => {
-        b(!0), r == null || r(t);
+        C(!0), n == null || n(t);
       },
-      [r]
-    ), E = n(
+      [n]
+    ), Z = i(
       (t) => {
-        b(!1), i == null || i(t);
+        C(!1), u == null || u(t);
       },
-      [i]
-    ), K = n(
+      [u]
+    ), P = i(
       (t) => {
-        c || _(t.target.value), a == null || a(t);
+        c || b(t.target.value), a == null || a(t);
       },
       [c, a]
-    ), L = n(
+    ), U = i(
       (t) => {
-        h.current = t, typeof l == "function" ? l(t) : l && (l.current = t);
+        _.current = t, typeof r == "function" ? r(t) : r && (r.current = t);
       },
-      [l]
-    ), O = n(() => {
-      var S;
-      if (o) return;
-      if (p) {
-        p(), (S = h.current) == null || S.focus();
+      [r]
+    ), I = i(() => {
+      var R;
+      if (l) return;
+      if (m) {
+        m(), (R = _.current) == null || R.focus();
         return;
       }
-      const t = h.current;
-      t != null && (t.value = "", c || _(""), a == null || a({
+      const t = _.current;
+      t != null && (t.value = "", c || b(""), 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,
-      $,
+    }, [l, c, a, m]), $ = i(
+      (t) => {
+        o == null || o(t), !(t.defaultPrevented || l) && t.key === "Escape" && p && (t.preventDefault(), I());
+      },
+      [l, I, p, o]
+    ), y = p && !l, q = e[`search-input--size-${K(d)}`], w = v ? e["search-input--invalid"] : "", G = f != null && O ? e["search-input--label-floated"] : "", H = e["search-input--has-leading-icon"], J = y ? e["search-input--has-trailing-icon"] : "", Q = st[d], W = at[d], X = [
+      e["search-input"],
       q,
+      w,
+      G,
+      H,
+      J,
       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, {}) }) }),
+    return /* @__PURE__ */ s("div", { className: X, children: /* @__PURE__ */ x("div", { className: e["search-input__wrapper"], children: [
+      f != null && /* @__PURE__ */ s("label", { className: e["search-input__label"], htmlFor: S, children: f }),
+      /* @__PURE__ */ x("div", { className: e["search-input__inner"], children: [
+        /* @__PURE__ */ s("span", { className: e["search-input__leading-icon"], "aria-hidden": !0, children: /* @__PURE__ */ s(E, { size: Q, glyph: /* @__PURE__ */ s(tt, {}) }) }),
         /* @__PURE__ */ s(
           "input",
           {
-            ref: L,
-            id: I,
+            ref: U,
+            id: S,
             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
+            className: e["search-input__input"],
+            value: c ? h : void 0,
+            defaultValue: c ? void 0 : N,
+            placeholder: A,
+            disabled: l,
+            onFocus: T,
+            onBlur: Z,
+            onChange: P,
+            onKeyDown: $,
+            "aria-invalid": v ? !0 : void 0,
+            ...M
           }
         ),
-        y && /* @__PURE__ */ s("span", { className: e.searchInput__trailingIcon, children: /* @__PURE__ */ s(
+        y && /* @__PURE__ */ s("span", { className: e["search-input__trailing-icon"], children: /* @__PURE__ */ s(
           "button",
           {
             type: "button",
-            className: e.searchInput__clearButton,
-            onClick: O,
+            className: e["search-input__clear-button"],
+            onClick: I,
             "aria-label": "Clear search",
             tabIndex: -1,
-            children: /* @__PURE__ */ s(R, { size: g, glyph: /* @__PURE__ */ s(W, {}) })
+            children: /* @__PURE__ */ s(E, { size: W, glyph: /* @__PURE__ */ s(et, {}) })
           }
         ) })
       ] })
@@ -104,6 +118,6 @@ const X = {
   }
 );
 export {
-  nt as default
+  dt 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 {\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\nconst CLEAR_ICON_SIZE_MAP: Record<SearchInputSize, IconSize> = {\n  small: '12',\n  medium: '16',\n  large: '16',\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  /** 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      invalid = false,\n      onClear,\n      id: idProp,\n      value: valueProp,\n      defaultValue,\n      placeholder,\n      onFocus,\n      onBlur,\n      onChange,\n      disabled,\n      onKeyDown,\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 handleKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLInputElement>) => {\n        onKeyDown?.(e);\n        if (e.defaultPrevented || disabled) return;\n        if (e.key === 'Escape' && hasValue) {\n          e.preventDefault();\n          handleClear();\n        }\n      },\n      [disabled, handleClear, hasValue, onKeyDown],\n    );\n\n    const showClearButton = hasValue && !disabled;\n\n    const sizeClass = styles[`search-input--size-${toKebab(size)}`];\n    const invalidClass = invalid ? styles['search-input--invalid'] : '';\n    const labelFloatedClass =\n      label != null && labelFloated ? styles['search-input--label-floated'] : '';\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    const clearIconSize = CLEAR_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    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              onFocus={handleFocus}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              aria-invalid={invalid ? true : undefined}\n              {...rest}\n            />\n            {showClearButton && (\n              <span className={styles['search-input__trailing-icon']}>\n                <button\n                  type=\"button\"\n                  className={styles['search-input__clear-button']}\n                  onClick={handleClear}\n                  aria-label=\"Clear search\"\n                  tabIndex={-1}\n                >\n                  <Icon size={clearIconSize} 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","CLEAR_ICON_SIZE_MAP","SearchInput","forwardRef","className","size","label","invalid","onClear","idProp","valueProp","defaultValue","placeholder","onFocus","onBlur","onChange","disabled","onKeyDown","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","handleKeyDown","showClearButton","sizeClass","styles","toKebab","invalidClass","labelFloatedClass","hasLeadingClass","hasTrailingClass","iconSize","clearIconSize","rootClass","jsx","jsxs","Icon","MagnifyIcon","CloseCircleIcon"],"mappings":"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"}

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

@@ -1 +1 @@
-._searchInput_1wqgu_2{display:flex;flex-direction:column;width:100%}._searchInput__wrapper_1wqgu_7{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)}._searchInput_1wqgu_2:has(._searchInput__input_1wqgu_17:not(:disabled)):hover:not(:focus-within) ._searchInput__wrapper_1wqgu_7{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}._searchInput_1wqgu_2:has(._searchInput__input_1wqgu_17:focus-visible) ._searchInput__wrapper_1wqgu_7{box-shadow:inset 0 0 0 1px var(--button-bg),0 0 0 1px var(--button-bg)}._searchInput_1wqgu_2:has(._searchInput__input_1wqgu_17:disabled) ._searchInput__wrapper_1wqgu_7{background-color:var(--center-channel-bg);opacity:.56}._searchInput__label_1wqgu_27{position:absolute;left:var(--spacing-xs);top:50%;padding:0 var(--spacing-xxxs);transform:translateY(-50%);margin:0;font-family:Open Sans,sans-serif;font-size:var(--font-size-75);line-height:var(--line-height-25);font-weight:var(--font-weight-regular);color:rgba(var(--center-channel-color-rgb),.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)}._searchInput--label-floated_1wqgu_47 ._searchInput__label_1wqgu_27{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px;color:rgba(var(--center-channel-color-rgb),.64)}._searchInput__inner_1wqgu_54{display:flex;align-items:center;flex:1;min-width:0}._searchInput__input_1wqgu_17{flex:1 1 0;min-width:0;margin:0;padding:0;border:0;background:transparent;font-family:Open Sans,sans-serif;font-size:var(--font-size-75);line-height:var(--line-height-25);font-weight:var(--font-weight-regular);color:var(--center-channel-color)}._searchInput__input_1wqgu_17::-webkit-search-decoration,._searchInput__input_1wqgu_17::-webkit-search-cancel-button{-webkit-appearance:none}._searchInput__input_1wqgu_17:focus{outline:none}._searchInput__input_1wqgu_17::placeholder{color:rgba(var(--center-channel-color-rgb),.64)}._searchInput__input_1wqgu_17:disabled{cursor:not-allowed}._searchInput__leadingIcon_1wqgu_85,._searchInput__trailingIcon_1wqgu_85{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._searchInput__leadingIcon_1wqgu_85{margin-right:var(--spacing-xs);pointer-events:none}._searchInput__trailingIcon_1wqgu_85{margin-left:var(--spacing-xs)}._searchInput__clearButton_1wqgu_99{display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;background:transparent;cursor:pointer;color:inherit;transition:color var(--duration-quick) var(--ease-transition)}._searchInput__clearButton_1wqgu_99:hover{color:var(--center-channel-color)}._searchInput--size-small_1wqgu_114 ._searchInput__wrapper_1wqgu_7{min-height:32px}._searchInput--size-small_1wqgu_114 ._searchInput__inner_1wqgu_54{padding:var(--spacing-xs) var(--spacing-m)}._searchInput--size-small_1wqgu_114 ._searchInput__input_1wqgu_17{font-size:var(--font-size-75);line-height:var(--line-height-25)}._searchInput--size-small_1wqgu_114._searchInput--label-floated_1wqgu_47 ._searchInput__label_1wqgu_27{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._searchInput--size-medium_1wqgu_130 ._searchInput__wrapper_1wqgu_7{min-height:40px}._searchInput--size-medium_1wqgu_130 ._searchInput__inner_1wqgu_54{padding:var(--spacing-s) var(--spacing-l)}._searchInput--size-medium_1wqgu_130 ._searchInput__input_1wqgu_17{font-size:var(--font-size-100);line-height:var(--line-height-100)}._searchInput--size-medium_1wqgu_130 ._searchInput__label_1wqgu_27{font-size:var(--font-size-100);left:var(--spacing-m)}._searchInput--size-medium_1wqgu_130._searchInput--label-floated_1wqgu_47 ._searchInput__label_1wqgu_27{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._searchInput--size-large_1wqgu_150 ._searchInput__wrapper_1wqgu_7{min-height:48px}._searchInput--size-large_1wqgu_150 ._searchInput__inner_1wqgu_54{padding:var(--spacing-m) var(--spacing-l)}._searchInput--size-large_1wqgu_150 ._searchInput__input_1wqgu_17{font-size:var(--font-size-200);line-height:var(--line-height-200)}._searchInput--size-large_1wqgu_150 ._searchInput__label_1wqgu_27{font-size:var(--font-size-200);line-height:var(--line-height-200);left:var(--spacing-m)}._searchInput--size-large_1wqgu_150._searchInput--label-floated_1wqgu_47 ._searchInput__label_1wqgu_27{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._searchInput--has-leading-icon_1wqgu_171 ._searchInput__label_1wqgu_27{left:var(--spacing-xxxl)}._searchInput--has-leading-icon_1wqgu_171._searchInput--label-floated_1wqgu_47 ._searchInput__label_1wqgu_27{left:var(--spacing-xs)}._searchInput--has-leading-icon_1wqgu_171._searchInput--size-medium_1wqgu_130 ._searchInput__label_1wqgu_27,._searchInput--has-leading-icon_1wqgu_171._searchInput--size-large_1wqgu_150 ._searchInput__label_1wqgu_27{left:36px}._searchInput--has-leading-icon_1wqgu_171._searchInput--size-medium_1wqgu_130._searchInput--label-floated_1wqgu_47 ._searchInput__label_1wqgu_27,._searchInput--has-leading-icon_1wqgu_171._searchInput--size-large_1wqgu_150._searchInput--label-floated_1wqgu_47 ._searchInput__label_1wqgu_27{left:var(--spacing-m)}._searchInput_1wqgu_2:has(._searchInput__input_1wqgu_17:focus-visible) ._searchInput__label_1wqgu_27{color:var(--button-bg)}._searchInput_1wqgu_2:has(._searchInput__label_1wqgu_27):not(._searchInput--label-floated_1wqgu_47) ._searchInput__input_1wqgu_17::placeholder{color:transparent}
+._search-input_1iq6i_2{display:flex;flex-direction:column;width:100%}._search-input__wrapper_1iq6i_7{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_1iq6i_2:has(._search-input__input_1iq6i_17:not(:disabled)):hover:not(:focus-within) ._search-input__wrapper_1iq6i_7{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}._search-input_1iq6i_2:has(._search-input__input_1iq6i_17:focus-visible) ._search-input__wrapper_1iq6i_7{box-shadow:inset 0 0 0 1px var(--focus-ring-color),0 0 0 1px var(--focus-ring-color)}._search-input_1iq6i_2:has(._search-input__input_1iq6i_17:disabled) ._search-input__wrapper_1iq6i_7{background-color:var(--center-channel-bg);opacity:.56}._search-input__label_1iq6i_27{position:absolute;left:var(--spacing-xs);top:50%;padding:0 var(--spacing-xxxs);transform:translateY(-50%);margin:0;font-family:Open Sans,sans-serif;font-size:var(--font-size-75);line-height:var(--line-height-25);font-weight:var(--font-weight-regular);color:rgba(var(--center-channel-color-rgb),.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_1iq6i_47 ._search-input__label_1iq6i_27{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px;color:rgba(var(--center-channel-color-rgb),.64)}._search-input__inner_1iq6i_54{display:flex;align-items:center;flex:1;min-width:0}._search-input__input_1iq6i_17{flex:1 1 0;min-width:0;margin:0;padding:0;border:0;background:transparent;font-family:Open Sans,sans-serif;font-size:var(--font-size-75);line-height:var(--line-height-25);font-weight:var(--font-weight-regular);color:var(--center-channel-color)}._search-input__input_1iq6i_17::-webkit-search-decoration,._search-input__input_1iq6i_17::-webkit-search-cancel-button{-webkit-appearance:none}._search-input__input_1iq6i_17:focus{outline:none}._search-input__input_1iq6i_17::placeholder{color:rgba(var(--center-channel-color-rgb),.64)}._search-input__input_1iq6i_17:disabled{cursor:not-allowed}._search-input__leading-icon_1iq6i_85,._search-input__trailing-icon_1iq6i_85{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._search-input__leading-icon_1iq6i_85{margin-right:var(--spacing-xs);pointer-events:none}._search-input__trailing-icon_1iq6i_85{margin-left:var(--spacing-xs)}._search-input__clear-button_1iq6i_99{display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;background:transparent;cursor:pointer;color:inherit;transition:color var(--duration-quick) var(--ease-transition)}._search-input__clear-button_1iq6i_99:hover{color:var(--center-channel-color)}._search-input--size-small_1iq6i_114 ._search-input__wrapper_1iq6i_7{min-height:32px}._search-input--size-small_1iq6i_114 ._search-input__inner_1iq6i_54{padding:var(--spacing-xs) var(--spacing-m)}._search-input--size-small_1iq6i_114 ._search-input__input_1iq6i_17{font-size:var(--font-size-75);line-height:var(--line-height-25)}._search-input--size-small_1iq6i_114._search-input--label-floated_1iq6i_47 ._search-input__label_1iq6i_27{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._search-input--size-medium_1iq6i_130 ._search-input__wrapper_1iq6i_7{min-height:40px}._search-input--size-medium_1iq6i_130 ._search-input__inner_1iq6i_54{padding:var(--spacing-s) var(--spacing-l)}._search-input--size-medium_1iq6i_130 ._search-input__input_1iq6i_17{font-size:var(--font-size-100);line-height:var(--line-height-100)}._search-input--size-medium_1iq6i_130 ._search-input__label_1iq6i_27{font-size:var(--font-size-100);left:var(--spacing-m)}._search-input--size-medium_1iq6i_130._search-input--label-floated_1iq6i_47 ._search-input__label_1iq6i_27{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._search-input--size-large_1iq6i_150 ._search-input__wrapper_1iq6i_7{min-height:48px}._search-input--size-large_1iq6i_150 ._search-input__inner_1iq6i_54{padding:var(--spacing-m) var(--spacing-l)}._search-input--size-large_1iq6i_150 ._search-input__input_1iq6i_17{font-size:var(--font-size-200);line-height:var(--line-height-200)}._search-input--size-large_1iq6i_150 ._search-input__label_1iq6i_27{font-size:var(--font-size-200);line-height:var(--line-height-200);left:var(--spacing-m)}._search-input--size-large_1iq6i_150._search-input--label-floated_1iq6i_47 ._search-input__label_1iq6i_27{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:14px}._search-input--has-leading-icon_1iq6i_171 ._search-input__label_1iq6i_27{left:var(--spacing-xxxl)}._search-input--has-leading-icon_1iq6i_171._search-input--label-floated_1iq6i_47 ._search-input__label_1iq6i_27{left:var(--spacing-xs)}._search-input--has-leading-icon_1iq6i_171._search-input--size-medium_1iq6i_130 ._search-input__label_1iq6i_27,._search-input--has-leading-icon_1iq6i_171._search-input--size-large_1iq6i_150 ._search-input__label_1iq6i_27{left:36px}._search-input--has-leading-icon_1iq6i_171._search-input--size-medium_1iq6i_130._search-input--label-floated_1iq6i_47 ._search-input__label_1iq6i_27,._search-input--has-leading-icon_1iq6i_171._search-input--size-large_1iq6i_150._search-input--label-floated_1iq6i_47 ._search-input__label_1iq6i_27{left:var(--spacing-m)}._search-input_1iq6i_2:has(._search-input__input_1iq6i_17:focus-visible) ._search-input__label_1iq6i_27{color:var(--button-bg)}._search-input_1iq6i_2:has(._search-input__label_1iq6i_27):not(._search-input--label-floated_1iq6i_47) ._search-input__input_1iq6i_17::placeholder{color:transparent}._search-input--invalid_1iq6i_189 ._search-input__wrapper_1iq6i_7{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._search-input--invalid_1iq6i_189:has(._search-input__input_1iq6i_17:focus-visible) ._search-input__wrapper_1iq6i_7{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_1iq6i_189 ._search-input__label_1iq6i_27{color:var(--error-text, var(--color-danger))}._search-input--invalid_1iq6i_189:has(._search-input__input_1iq6i_17:focus-visible) ._search-input__label_1iq6i_27{color:var(--error-text, var(--color-danger))}

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.module.css');const i={"search-input":"_search-input_1iq6i_2","search-input__wrapper":"_search-input__wrapper_1iq6i_7","search-input__input":"_search-input__input_1iq6i_17","search-input__label":"_search-input__label_1iq6i_27","search-input--label-floated":"_search-input--label-floated_1iq6i_47","search-input__inner":"_search-input__inner_1iq6i_54","search-input__leading-icon":"_search-input__leading-icon_1iq6i_85","search-input__trailing-icon":"_search-input__trailing-icon_1iq6i_85","search-input__clear-button":"_search-input__clear-button_1iq6i_99","search-input--size-small":"_search-input--size-small_1iq6i_114","search-input--size-medium":"_search-input--size-medium_1iq6i_130","search-input--size-large":"_search-input--size-large_1iq6i_150","search-input--has-leading-icon":"_search-input--has-leading-icon_1iq6i_171","search-input--invalid":"_search-input--invalid_1iq6i_189"};exports.default=i;
 //# sourceMappingURL=SearchInput.module.scss.cjs.map

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

@@ -1,27 +1,20 @@
-import './SearchInput.module.css';const _ = "_searchInput_1wqgu_2", n = "_searchInput__wrapper_1wqgu_7", e = "_searchInput__input_1wqgu_17", a = "_searchInput__label_1wqgu_27", t = "_searchInput__inner_1wqgu_54", s = "_searchInput__leadingIcon_1wqgu_85", u = "_searchInput__trailingIcon_1wqgu_85", c = "_searchInput__clearButton_1wqgu_99", r = {
-  searchInput: _,
-  searchInput__wrapper: n,
-  searchInput__input: e,
-  searchInput__label: a,
-  "searchInput--label-floated": "_searchInput--label-floated_1wqgu_47",
-  searchInput__inner: t,
-  searchInput__leadingIcon: s,
-  searchInput__trailingIcon: u,
-  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"
+import './SearchInput.module.css';const i = {
+  "search-input": "_search-input_1iq6i_2",
+  "search-input__wrapper": "_search-input__wrapper_1iq6i_7",
+  "search-input__input": "_search-input__input_1iq6i_17",
+  "search-input__label": "_search-input__label_1iq6i_27",
+  "search-input--label-floated": "_search-input--label-floated_1iq6i_47",
+  "search-input__inner": "_search-input__inner_1iq6i_54",
+  "search-input__leading-icon": "_search-input__leading-icon_1iq6i_85",
+  "search-input__trailing-icon": "_search-input__trailing-icon_1iq6i_85",
+  "search-input__clear-button": "_search-input__clear-button_1iq6i_99",
+  "search-input--size-small": "_search-input--size-small_1iq6i_114",
+  "search-input--size-medium": "_search-input--size-medium_1iq6i_130",
+  "search-input--size-large": "_search-input--size-large_1iq6i_150",
+  "search-input--has-leading-icon": "_search-input--has-leading-icon_1iq6i_171",
+  "search-input--invalid": "_search-input--invalid_1iq6i_189"
 };
 export {
-  r as default,
-  _ as searchInput,
-  c as searchInput__clearButton,
-  t as searchInput__inner,
-  e as searchInput__input,
-  a as searchInput__label,
-  s as searchInput__leadingIcon,
-  u as searchInput__trailingIcon,
-  n as searchInput__wrapper
+  i as default
 };
 //# sourceMappingURL=SearchInput.module.scss.js.map

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

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

package/dist/components/select/Select.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),n=require("react"),__be=require("@mattermost/compass-icons/components/chevron-down.js"),be=__be?.default??__be,__xe=require("@mattermost/compass-icons/components/check.js"),xe=__xe?.default??__xe,G=require("../icon/Icon.cjs"),K=require("../popover-menu/PopoverMenu.cjs"),c=require("../menu-item/MenuItem.module.scss.cjs"),je=require("../../hooks/use-anchored-popup-portal.cjs"),ge=require("../../hooks/use-outside-close.cjs"),ke=require("../../hooks/use-popover-transition.cjs"),Ne=require("../../utils/string.cjs"),s=require("./Select.module.scss.cjs"),L=280;function ye({option:u,listboxId:_,selected:j,active:y,onSelect:v,onHover:I}){const d=[c.default["menu-item"],y?c.default["menu-item--active"]:""].filter(Boolean).join(" ");return l.jsx("li",{id:`${_}-option-${u.value}`,role:"option",className:[s.default.select__option,d].filter(Boolean).join(" "),"aria-selected":j,"aria-disabled":u.disabled||void 0,onMouseDown:g=>g.preventDefault(),onMouseEnter:I,onPointerUp:()=>{u.disabled||v(u)},children:l.jsxs("div",{className:[c.default["menu-item__content"],u.disabled?s.default["select__option-content--disabled"]:""].filter(Boolean).join(" "),children:[u.leadingVisual!=null&&l.jsx("div",{className:c.default["menu-item__left"],children:l.jsx("span",{className:c.default["menu-item__leading-visual"],children:u.leadingVisual})}),l.jsxs("div",{className:c.default["menu-item__middle"],children:[l.jsx("div",{className:c.default["menu-item__top-row"],children:l.jsx("span",{className:c.default["menu-item__label"],children:u.label})}),u.secondaryLabel!=null&&l.jsx("div",{className:c.default["menu-item__bottom-row"],children:l.jsx("span",{className:c.default["menu-item__secondary-label-below"],children:u.secondaryLabel})})]}),j&&l.jsx("div",{className:c.default["menu-item__right"],children:l.jsx("span",{className:[c.default["menu-item__trailing-visual"],c.default["menu-item__trailing-visual--check"]].join(" "),children:l.jsx(G.default,{glyph:l.jsx(xe,{}),size:"16"})})})]})})}const Ie=n.forwardRef(function({options:_,value:j,defaultValue:y="",onChange:v,placeholder:I,label:d,leadingIcon:g,size:X="medium",invalid:D=!1,disabled:h=!1,id:J,name:q,className:Q="","aria-label":C,portalContainer:W=null,zIndex:Y},k){const Z=n.useId(),w=J??Z,b=`${w}-listbox`,R=n.useRef(null),M=n.useRef(null),O=n.useRef(null),ee=n.useCallback(e=>{O.current=e,typeof k=="function"?k(e):k&&(k.current=e)},[k]),P=j!==void 0,[le,te]=n.useState(y),m=P?j:le,[a,B]=n.useState(!1),[se,E]=n.useState(!1),[f,p]=n.useState(-1),S=n.useMemo(()=>_.find(e=>e.value===m),[_,m]),o=n.useMemo(()=>_.filter(e=>e.value!==""),[_]),V=m!=="",{mounted:$,visible:ne}=ke.usePopoverTransition(a),{placement:ae,maxHeight:oe,style:ie,portalRef:A,renderPortal:ce}=je.useAnchoredPopupPortal(M,$,{preferredHeight:L,maxHeightCap:L,portalContainer:W,zIndex:Y}),x=n.useCallback(()=>{B(!1),p(-1)},[]),N=n.useCallback(()=>{h||B(!0)},[h]);ge.useOutsideClose(R,a,x,A),n.useEffect(()=>{a&&p(e=>{if(o.length===0)return-1;if(e>=0&&e<o.length)return e;const t=o.findIndex(r=>r.value===m);if(t>=0)return t;const i=o.findIndex(r=>!r.disabled);return i>=0?i:0})},[a,o,m]);const H=n.useCallback(e=>{P||te(e),v==null||v(e)},[P,v]),F=n.useCallback(e=>{var t;e.disabled||(H(e.value),x(),(t=O.current)==null||t.focus())},[H,x]),T=n.useCallback(e=>{const t=o.map((i,r)=>({o:i,i:r})).filter(({o:i})=>!i.disabled);if(t.length===0){p(-1);return}p(i=>{const r=t.findIndex(({i:he})=>he===i),ve=r<0?e>0?0:t.length-1:(r+e+t.length)%t.length;return t[ve].i})},[o]);n.useEffect(()=>{if(!a||f<0)return;const e=o[f];if(!e)return;const t=document.getElementById(`${b}-option-${e.value}`);t==null||t.scrollIntoView({block:"nearest"})},[a,f,o,b]);const ue=e=>{var t;if(!h)switch(e.key){case"ArrowDown":e.preventDefault(),a?T(1):N();break;case"ArrowUp":e.preventDefault(),a?T(-1):N();break;case"Home":if(a&&o.length>0){e.preventDefault();const i=o.findIndex(r=>!r.disabled);p(i>=0?i:0)}break;case"End":if(a&&o.length>0){e.preventDefault();for(let i=o.length-1;i>=0;i--)if(!((t=o[i])!=null&&t.disabled)){p(i);break}}break;case"Enter":case" ":e.preventDefault(),a&&f>=0&&o[f]?F(o[f]):a||N();break;case"Escape":a&&(e.preventDefault(),x());break;case"Tab":x();break}},re=se||a||V,z=(S==null?void 0:S.label)??I??"",de=!V&&z!=="",U=f>=0?o[f]:void 0,fe=a&&U!=null?`${b}-option-${U.value}`:void 0,me=s.default[`select--size-${Ne.toKebab(X)}`],pe=[s.default.select,me,D?s.default["select--invalid"]:"",d!=null&&re?s.default["select--label-floated"]:"",g!=null?s.default["select--has-leading-icon"]:"",a?s.default["select--open"]:"",h?s.default["select--disabled"]:"",Q].filter(Boolean).join(" "),_e=[s.default.select__control,de?s.default["select__control--placeholder"]:""].filter(Boolean).join(" ");return l.jsxs("div",{className:pe,ref:R,children:[l.jsxs("div",{className:s.default.select__wrapper,ref:M,children:[d!=null&&l.jsx("label",{className:s.default.select__label,htmlFor:w,children:d}),l.jsxs("button",{ref:ee,id:w,type:"button",role:"combobox",className:_e,disabled:h,"aria-haspopup":"listbox","aria-expanded":a,"aria-controls":b,"aria-activedescendant":fe,"aria-invalid":D?!0:void 0,"aria-label":C??(typeof d=="string"?d:void 0),onClick:()=>a?x():N(),onFocus:()=>E(!0),onBlur:()=>E(!1),onKeyDown:ue,children:[g!=null&&l.jsx("span",{className:s.default.select__leadingIcon,"aria-hidden":!0,children:g}),l.jsx("span",{className:s.default.select__value,children:z}),l.jsx("span",{className:s.default.select__trailingIcon,"aria-hidden":!0,children:l.jsx(G.default,{size:"12",glyph:l.jsx(be,{})})})]})]}),q!=null&&!h&&l.jsx("input",{type:"hidden",name:q,value:m}),$&&ce(l.jsx("div",{ref:A,className:[s.default.select__popup,ae==="above"?s.default["select__popup--above"]:"",ne?s.default["select__popup--visible"]:""].filter(Boolean).join(" "),style:ie,children:l.jsx(K.default,{className:s.default.select__menu,children:l.jsx(K.PopoverMenuScroll,{maxHeight:oe,children:l.jsx("ul",{id:b,className:s.default.select__list,role:"listbox","aria-label":typeof d=="string"?d:C??"Options",children:o.map((e,t)=>l.jsx(ye,{option:e,listboxId:b,selected:e.value===m,active:t===f,onSelect:F,onHover:()=>p(t)},e.value))})})})}))]})});exports.default=Ie;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),a=require("react"),__he=require("@mattermost/compass-icons/components/chevron-down.js"),he=__he?.default??__he,__xe=require("@mattermost/compass-icons/components/check.js"),xe=__xe?.default??__xe,G=require("../icon/Icon.cjs"),K=require("../popover-menu/PopoverMenu.cjs"),c=require("../menu-item/MenuItem.module.scss.cjs"),je=require("../../hooks/use-anchored-popup-portal.cjs"),ge=require("../../hooks/use-outside-close.cjs"),ke=require("../../hooks/use-popover-transition.cjs"),Ne=require("../../utils/string.cjs"),s=require("./Select.module.scss.cjs"),L=280;function ye({option:u,listboxId:_,selected:j,active:y,onSelect:v,onHover:w}){const f=[c.default["menu-item"],y?c.default["menu-item--active"]:""].filter(Boolean).join(" ");return l.jsx("li",{id:`${_}-option-${u.value}`,role:"option",className:[s.default.select__option,f].filter(Boolean).join(" "),"aria-selected":j,"aria-disabled":u.disabled||void 0,onMouseDown:g=>g.preventDefault(),onMouseEnter:w,onPointerUp:()=>{u.disabled||v(u)},children:l.jsxs("div",{className:[c.default["menu-item__content"],u.disabled?s.default["select__option-content--disabled"]:""].filter(Boolean).join(" "),children:[u.leadingVisual!=null&&l.jsx("div",{className:c.default["menu-item__left"],children:l.jsx("span",{className:c.default["menu-item__leading-visual"],children:u.leadingVisual})}),l.jsxs("div",{className:c.default["menu-item__middle"],children:[l.jsx("div",{className:c.default["menu-item__top-row"],children:l.jsx("span",{className:c.default["menu-item__label"],children:u.label})}),u.secondaryLabel!=null&&l.jsx("div",{className:c.default["menu-item__bottom-row"],children:l.jsx("span",{className:c.default["menu-item__secondary-label-below"],children:u.secondaryLabel})})]}),j&&l.jsx("div",{className:c.default["menu-item__right"],children:l.jsx("span",{className:[c.default["menu-item__trailing-visual"],c.default["menu-item__trailing-visual--check"]].join(" "),children:l.jsx(G.default,{glyph:l.jsx(xe,{}),size:"16"})})})]})})}const we=a.forwardRef(function({options:_,value:j,defaultValue:y="",onChange:v,placeholder:w,label:f,leadingIcon:g,size:X="medium",invalid:D=!1,disabled:b=!1,id:J,name:q,className:Q="","aria-label":C,portalContainer:W=null,zIndex:Y},k){const Z=a.useId(),I=J??Z,h=`${I}-listbox`,R=a.useRef(null),M=a.useRef(null),O=a.useRef(null),ee=a.useCallback(e=>{O.current=e,typeof k=="function"?k(e):k&&(k.current=e)},[k]),P=j!==void 0,[le,te]=a.useState(y),m=P?j:le,[n,B]=a.useState(!1),[se,E]=a.useState(!1),[d,p]=a.useState(-1),S=a.useMemo(()=>_.find(e=>e.value===m),[_,m]),o=a.useMemo(()=>_.filter(e=>e.value!==""),[_]),V=m!=="",{mounted:$,visible:ae}=ke.usePopoverTransition(n),{placement:ne,maxHeight:oe,style:ie,portalRef:A,renderPortal:ce}=je.useAnchoredPopupPortal(M,$,{preferredHeight:L,maxHeightCap:L,portalContainer:W,zIndex:Y}),x=a.useCallback(()=>{B(!1),p(-1)},[]),N=a.useCallback(()=>{b||B(!0)},[b]);ge.useOutsideClose(R,n,x,A),a.useEffect(()=>{n&&p(e=>{if(o.length===0)return-1;if(e>=0&&e<o.length)return e;const t=o.findIndex(r=>r.value===m);if(t>=0)return t;const i=o.findIndex(r=>!r.disabled);return i>=0?i:0})},[n,o,m]);const H=a.useCallback(e=>{P||te(e),v==null||v(e)},[P,v]),F=a.useCallback(e=>{var t;e.disabled||(H(e.value),x(),(t=O.current)==null||t.focus())},[H,x]),T=a.useCallback(e=>{const t=o.map((i,r)=>({o:i,i:r})).filter(({o:i})=>!i.disabled);if(t.length===0){p(-1);return}p(i=>{const r=t.findIndex(({i:be})=>be===i),ve=r<0?e>0?0:t.length-1:(r+e+t.length)%t.length;return t[ve].i})},[o]);a.useEffect(()=>{if(!n||d<0)return;const e=o[d];if(!e)return;const t=document.getElementById(`${h}-option-${e.value}`);t==null||t.scrollIntoView({block:"nearest"})},[n,d,o,h]);const ue=e=>{var t;if(!b)switch(e.key){case"ArrowDown":e.preventDefault(),n?T(1):N();break;case"ArrowUp":e.preventDefault(),n?T(-1):N();break;case"Home":if(n&&o.length>0){e.preventDefault();const i=o.findIndex(r=>!r.disabled);p(i>=0?i:0)}break;case"End":if(n&&o.length>0){e.preventDefault();for(let i=o.length-1;i>=0;i--)if(!((t=o[i])!=null&&t.disabled)){p(i);break}}break;case"Enter":case" ":e.preventDefault(),n&&d>=0&&o[d]?F(o[d]):n||N();break;case"Escape":n&&(e.preventDefault(),x());break;case"Tab":x();break}},re=se||n||V,z=(S==null?void 0:S.label)??w??"",de=!V&&z!=="",U=d>=0?o[d]:void 0,fe=n&&U!=null?`${h}-option-${U.value}`:void 0,me=s.default[`select--size-${Ne.toKebab(X)}`],pe=[s.default.select,me,D?s.default["select--invalid"]:"",f!=null&&re?s.default["select--label-floated"]:"",g!=null?s.default["select--has-leading-icon"]:"",n?s.default["select--open"]:"",b?s.default["select--disabled"]:"",Q].filter(Boolean).join(" "),_e=[s.default.select__control,de?s.default["select__control--placeholder"]:""].filter(Boolean).join(" ");return l.jsxs("div",{className:pe,ref:R,children:[l.jsxs("div",{className:s.default.select__wrapper,ref:M,children:[f!=null&&l.jsx("label",{className:s.default.select__label,htmlFor:I,children:f}),l.jsxs("button",{ref:ee,id:I,type:"button",role:"combobox",className:_e,disabled:b,"aria-haspopup":"listbox","aria-expanded":n,"aria-controls":h,"aria-activedescendant":fe,"aria-invalid":D?!0:void 0,"aria-label":C,onClick:()=>n?x():N(),onFocus:()=>E(!0),onBlur:()=>E(!1),onKeyDown:ue,children:[g!=null&&l.jsx("span",{className:s.default["select__leading-icon"],"aria-hidden":!0,children:g}),l.jsx("span",{className:s.default.select__value,children:z}),l.jsx("span",{className:s.default["select__trailing-icon"],"aria-hidden":!0,children:l.jsx(G.default,{size:"12",glyph:l.jsx(he,{})})})]})]}),q!=null&&!b&&l.jsx("input",{type:"hidden",name:q,value:m}),$&&ce(l.jsx("div",{ref:A,className:[s.default.select__popup,ne==="above"?s.default["select__popup--above"]:"",ae?s.default["select__popup--visible"]:""].filter(Boolean).join(" "),style:ie,children:l.jsx(K.default,{className:s.default.select__menu,children:l.jsx(K.PopoverMenuScroll,{maxHeight:oe,children:l.jsx("ul",{id:h,className:s.default.select__list,role:"listbox","aria-label":typeof f=="string"?f:C??"Options",children:o.map((e,t)=>l.jsx(ye,{option:e,listboxId:h,selected:e.value===m,active:t===d,onSelect:F,onHover:()=>p(t)},e.value))})})})}))]})});exports.default=we;
 //# sourceMappingURL=Select.cjs.map

package/dist/components/select/Select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import type { KeyboardEvent, ReactNode } from 'react';\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport Icon from '@/components/icon/Icon';\nimport PopoverMenu, {\n  PopoverMenuScroll,\n} from '@/components/popover-menu/PopoverMenu';\nimport menuItemStyles from '@/components/menu-item/MenuItem.module.scss';\nimport { useAnchoredPopupPortal } from '@/hooks/use-anchored-popup-portal';\nimport { useOutsideClose } from '@/hooks/use-outside-close';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport { toKebab } from '@/utils/string';\nimport styles from './Select.module.scss';\n\nexport type SelectSize = 'small' | 'medium' | 'large';\n\nexport type SelectOption = {\n  value: string;\n  label: string;\n  disabled?: boolean;\n  leadingVisual?: ReactNode;\n  secondaryLabel?: string;\n};\n\nexport interface SelectProps {\n  options: SelectOption[];\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  /** Shown on the trigger when no value is selected. Empty-value options are not listed in the menu. */\n  placeholder?: string;\n  label?: ReactNode;\n  leadingIcon?: ReactNode;\n  size?: SelectSize;\n  invalid?: boolean;\n  disabled?: boolean;\n  id?: string;\n  name?: string;\n  className?: string;\n  'aria-label'?: string;\n  /** Portal mount node for the menu; defaults to `document.body`. */\n  portalContainer?: HTMLElement | null;\n  /** Stacking order for the portaled menu. */\n  zIndex?: number;\n}\n\nconst POPUP_MAX_HEIGHT = 280;\n\nfunction SelectOptionRow({\n  option,\n  listboxId,\n  selected,\n  active,\n  onSelect,\n  onHover,\n}: {\n  option: SelectOption;\n  listboxId: string;\n  selected: boolean;\n  active: boolean;\n  onSelect: (option: SelectOption) => void;\n  onHover: () => void;\n}) {\n  const rowClass = [\n    menuItemStyles['menu-item'],\n    active ? menuItemStyles['menu-item--active'] : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <li\n      id={`${listboxId}-option-${option.value}`}\n      role=\"option\"\n      className={[styles.select__option, rowClass].filter(Boolean).join(' ')}\n      aria-selected={selected}\n      aria-disabled={option.disabled || undefined}\n      onMouseDown={(ev) => ev.preventDefault()}\n      onMouseEnter={onHover}\n      onPointerUp={() => {\n        if (!option.disabled) onSelect(option);\n      }}\n    >\n      <div\n        className={[\n          menuItemStyles['menu-item__content'],\n          option.disabled ? styles['select__option-content--disabled'] : '',\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        {option.leadingVisual != null && (\n          <div className={menuItemStyles['menu-item__left']}>\n            <span className={menuItemStyles['menu-item__leading-visual']}>\n              {option.leadingVisual}\n            </span>\n          </div>\n        )}\n        <div className={menuItemStyles['menu-item__middle']}>\n          <div className={menuItemStyles['menu-item__top-row']}>\n            <span className={menuItemStyles['menu-item__label']}>\n              {option.label}\n            </span>\n          </div>\n          {option.secondaryLabel != null && (\n            <div className={menuItemStyles['menu-item__bottom-row']}>\n              <span className={menuItemStyles['menu-item__secondary-label-below']}>\n                {option.secondaryLabel}\n              </span>\n            </div>\n          )}\n        </div>\n        {selected && (\n          <div className={menuItemStyles['menu-item__right']}>\n            <span\n              className={[\n                menuItemStyles['menu-item__trailing-visual'],\n                menuItemStyles['menu-item__trailing-visual--check'],\n              ].join(' ')}\n            >\n              <Icon glyph={<CheckIcon />} size=\"16\" />\n            </span>\n          </div>\n        )}\n      </div>\n    </li>\n  );\n}\n\n/**\n * { value: 'town-square', label: 'Town Square' }, { value: 'off-topic', label: 'Off-Topic'\n * }, { value: 'design', label: 'Design' }, ];\n */\nconst Select = forwardRef<HTMLButtonElement, SelectProps>(function Select(\n  {\n    options,\n    value: valueProp,\n    defaultValue = '',\n    onChange,\n    placeholder,\n    label,\n    leadingIcon,\n    size = 'medium',\n    invalid = false,\n    disabled = false,\n    id: idProp,\n    name,\n    className = '',\n    'aria-label': ariaLabel,\n    portalContainer = null,\n    zIndex,\n  },\n  ref,\n) {\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n  const listboxId = `${id}-listbox`;\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const anchorRef = useRef<HTMLDivElement>(null);\n  const buttonRef = useRef<HTMLButtonElement | null>(null);\n\n  const setButtonRef = useCallback(\n    (node: HTMLButtonElement | null) => {\n      buttonRef.current = node;\n      if (typeof ref === 'function') ref(node);\n      else if (ref) ref.current = node;\n    },\n    [ref],\n  );\n\n  const isControlled = valueProp !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const value = isControlled ? valueProp! : uncontrolledValue;\n\n  const [isOpen, setIsOpen] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n\n  const selectedOption = useMemo(\n    () => options.find((o) => o.value === value),\n    [options, value],\n  );\n\n  const listOptions = useMemo(\n    () => options.filter((o) => o.value !== ''),\n    [options],\n  );\n\n  const hasValue = value !== '';\n\n  const { mounted: popupMounted, visible: popupVisible } =\n    usePopoverTransition(isOpen);\n\n  const {\n    placement,\n    maxHeight,\n    style: popupStyle,\n    portalRef,\n    renderPortal,\n  } = useAnchoredPopupPortal(anchorRef, popupMounted, {\n    preferredHeight: POPUP_MAX_HEIGHT,\n    maxHeightCap: POPUP_MAX_HEIGHT,\n    portalContainer,\n    zIndex,\n  });\n\n  const close = useCallback(() => {\n    setIsOpen(false);\n    setActiveIndex(-1);\n  }, []);\n\n  const open = useCallback(() => {\n    if (disabled) return;\n    setIsOpen(true);\n  }, [disabled]);\n\n  useOutsideClose(rootRef, isOpen, close, portalRef);\n\n  useEffect(() => {\n    if (!isOpen) return;\n    setActiveIndex((prev) => {\n      if (listOptions.length === 0) return -1;\n      if (prev >= 0 && prev < listOptions.length) return prev;\n      const selectedIdx = listOptions.findIndex((o) => o.value === value);\n      if (selectedIdx >= 0) return selectedIdx;\n      const firstEnabled = listOptions.findIndex((o) => !o.disabled);\n      return firstEnabled >= 0 ? firstEnabled : 0;\n    });\n  }, [isOpen, listOptions, value]);\n\n  const commitValue = useCallback(\n    (next: string) => {\n      if (!isControlled) setUncontrolledValue(next);\n      onChange?.(next);\n    },\n    [isControlled, onChange],\n  );\n\n  const selectOption = useCallback(\n    (option: SelectOption) => {\n      if (option.disabled) return;\n      commitValue(option.value);\n      close();\n      buttonRef.current?.focus();\n    },\n    [commitValue, close],\n  );\n\n  const moveActive = useCallback(\n    (delta: number) => {\n      const enabled = listOptions\n        .map((o, i) => ({ o, i }))\n        .filter(({ o }) => !o.disabled);\n      if (enabled.length === 0) {\n        setActiveIndex(-1);\n        return;\n      }\n      setActiveIndex((prev) => {\n        const currentPos = enabled.findIndex(({ i }) => i === prev);\n        const nextPos =\n          currentPos < 0\n            ? delta > 0\n              ? 0\n              : enabled.length - 1\n            : (currentPos + delta + enabled.length) % enabled.length;\n        return enabled[nextPos].i;\n      });\n    },\n    [listOptions],\n  );\n\n  useEffect(() => {\n    if (!isOpen || activeIndex < 0) return;\n    const option = listOptions[activeIndex];\n    if (!option) return;\n    const el = document.getElementById(`${listboxId}-option-${option.value}`);\n    el?.scrollIntoView({ block: 'nearest' });\n  }, [isOpen, activeIndex, listOptions, listboxId]);\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n    if (disabled) return;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        if (!isOpen) open();\n        else moveActive(1);\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        if (!isOpen) open();\n        else moveActive(-1);\n        break;\n      case 'Home':\n        if (isOpen && listOptions.length > 0) {\n          e.preventDefault();\n          const idx = listOptions.findIndex((o) => !o.disabled);\n          setActiveIndex(idx >= 0 ? idx : 0);\n        }\n        break;\n      case 'End':\n        if (isOpen && listOptions.length > 0) {\n          e.preventDefault();\n          for (let i = listOptions.length - 1; i >= 0; i--) {\n            if (!listOptions[i]?.disabled) {\n              setActiveIndex(i);\n              break;\n            }\n          }\n        }\n        break;\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        if (isOpen && activeIndex >= 0 && listOptions[activeIndex]) {\n          selectOption(listOptions[activeIndex]);\n        } else if (!isOpen) {\n          open();\n        }\n        break;\n      case 'Escape':\n        if (isOpen) {\n          e.preventDefault();\n          close();\n        }\n        break;\n      case 'Tab':\n        close();\n        break;\n      default:\n        break;\n    }\n  };\n\n  const labelFloated = isFocused || isOpen || hasValue;\n  const displayLabel = selectedOption?.label ?? placeholder ?? '';\n  const showPlaceholderStyle = !hasValue && displayLabel !== '';\n\n  const activeOption =\n    activeIndex >= 0 ? listOptions[activeIndex] : undefined;\n  const activeDescendant =\n    isOpen && activeOption != null\n      ? `${listboxId}-option-${activeOption.value}`\n      : undefined;\n\n  const sizeClass = styles[`select--size-${toKebab(size)}`];\n  const rootClass = [\n    styles.select,\n    sizeClass,\n    invalid ? styles['select--invalid'] : '',\n    label != null && labelFloated ? styles['select--label-floated'] : '',\n    leadingIcon != null ? styles['select--has-leading-icon'] : '',\n    isOpen ? styles['select--open'] : '',\n    disabled ? styles['select--disabled'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const controlClass = [\n    styles.select__control,\n    showPlaceholderStyle ? styles['select__control--placeholder'] : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} ref={rootRef}>\n      <div className={styles.select__wrapper} ref={anchorRef}>\n        {label != null && (\n          <label className={styles.select__label} htmlFor={id}>\n            {label}\n          </label>\n        )}\n        <button\n          ref={setButtonRef}\n          id={id}\n          type=\"button\"\n          role=\"combobox\"\n          className={controlClass}\n          disabled={disabled}\n          aria-haspopup=\"listbox\"\n          aria-expanded={isOpen}\n          aria-controls={listboxId}\n          aria-activedescendant={activeDescendant}\n          aria-invalid={invalid ? true : undefined}\n          aria-label={\n            ariaLabel ??\n            (typeof label === 'string' ? label : undefined)\n          }\n          onClick={() => (isOpen ? close() : open())}\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n          onKeyDown={handleKeyDown}\n        >\n          {leadingIcon != null && (\n            <span className={styles.select__leadingIcon} aria-hidden>\n              {leadingIcon}\n            </span>\n          )}\n          <span className={styles.select__value}>{displayLabel}</span>\n          <span className={styles.select__trailingIcon} aria-hidden>\n            <Icon size=\"12\" glyph={<ChevronDownIcon />} />\n          </span>\n        </button>\n      </div>\n\n      {name != null && !disabled && (\n        <input type=\"hidden\" name={name} value={value} />\n      )}\n\n      {popupMounted &&\n        renderPortal(\n          <div\n            ref={portalRef}\n            className={[\n              styles.select__popup,\n              placement === 'above' ? styles['select__popup--above'] : '',\n              popupVisible ? styles['select__popup--visible'] : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            style={popupStyle}\n          >\n            <PopoverMenu className={styles.select__menu}>\n              <PopoverMenuScroll maxHeight={maxHeight}>\n                <ul\n                  id={listboxId}\n                  className={styles.select__list}\n                  role=\"listbox\"\n                  aria-label={\n                    typeof label === 'string' ? label : (ariaLabel ?? 'Options')\n                  }\n                >\n                  {listOptions.map((option, index) => (\n                    <SelectOptionRow\n                      key={option.value}\n                      option={option}\n                      listboxId={listboxId}\n                      selected={option.value === value}\n                      active={index === activeIndex}\n                      onSelect={selectOption}\n                      onHover={() => setActiveIndex(index)}\n                    />\n                  ))}\n                </ul>\n              </PopoverMenuScroll>\n            </PopoverMenu>\n          </div>,\n        )}\n    </div>\n  );\n});\n\nexport default Select;\n"],"names":["POPUP_MAX_HEIGHT","SelectOptionRow","option","listboxId","selected","active","onSelect","onHover","rowClass","menuItemStyles","jsx","styles","ev","jsxs","Icon","CheckIcon","Select","forwardRef","options","valueProp","defaultValue","onChange","placeholder","label","leadingIcon","size","invalid","disabled","idProp","name","className","ariaLabel","portalContainer","zIndex","ref","generatedId","useId","id","rootRef","useRef","anchorRef","buttonRef","setButtonRef","useCallback","node","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","isOpen","setIsOpen","isFocused","setIsFocused","activeIndex","setActiveIndex","selectedOption","useMemo","o","listOptions","hasValue","popupMounted","popupVisible","usePopoverTransition","placement","maxHeight","popupStyle","portalRef","renderPortal","useAnchoredPopupPortal","close","open","useOutsideClose","useEffect","prev","selectedIdx","firstEnabled","commitValue","next","selectOption","_a","moveActive","delta","enabled","i","currentPos","nextPos","el","handleKeyDown","idx","labelFloated","displayLabel","showPlaceholderStyle","activeOption","activeDescendant","sizeClass","toKebab","rootClass","controlClass","ChevronDownIcon","PopoverMenu","PopoverMenuScroll","index"],"mappings":"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"}
+{"version":3,"file":"Select.cjs","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import type { KeyboardEvent, ReactNode } from 'react';\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down';\nimport CheckIcon from '@mattermost/compass-icons/components/check';\nimport Icon from '@/components/icon/Icon';\nimport PopoverMenu, {\n  PopoverMenuScroll,\n} from '@/components/popover-menu/PopoverMenu';\nimport menuItemStyles from '@/components/menu-item/MenuItem.module.scss';\nimport { useAnchoredPopupPortal } from '@/hooks/use-anchored-popup-portal';\nimport { useOutsideClose } from '@/hooks/use-outside-close';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport { toKebab } from '@/utils/string';\nimport styles from './Select.module.scss';\n\nexport type SelectSize = 'small' | 'medium' | 'large';\n\nexport type SelectOption = {\n  value: string;\n  label: string;\n  disabled?: boolean;\n  leadingVisual?: ReactNode;\n  secondaryLabel?: string;\n};\n\nexport interface SelectProps {\n  options: SelectOption[];\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  /** Shown on the trigger when no value is selected. Empty-value options are not listed in the menu. */\n  placeholder?: string;\n  label?: ReactNode;\n  leadingIcon?: ReactNode;\n  size?: SelectSize;\n  invalid?: boolean;\n  disabled?: boolean;\n  id?: string;\n  name?: string;\n  className?: string;\n  'aria-label'?: string;\n  /** Portal mount node for the menu; defaults to `document.body`. */\n  portalContainer?: HTMLElement | null;\n  /** Stacking order for the portaled menu. */\n  zIndex?: number;\n}\n\nconst POPUP_MAX_HEIGHT = 280;\n\nfunction SelectOptionRow({\n  option,\n  listboxId,\n  selected,\n  active,\n  onSelect,\n  onHover,\n}: {\n  option: SelectOption;\n  listboxId: string;\n  selected: boolean;\n  active: boolean;\n  onSelect: (option: SelectOption) => void;\n  onHover: () => void;\n}) {\n  const rowClass = [\n    menuItemStyles['menu-item'],\n    active ? menuItemStyles['menu-item--active'] : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <li\n      id={`${listboxId}-option-${option.value}`}\n      role=\"option\"\n      className={[styles.select__option, rowClass].filter(Boolean).join(' ')}\n      aria-selected={selected}\n      aria-disabled={option.disabled || undefined}\n      onMouseDown={(ev) => ev.preventDefault()}\n      onMouseEnter={onHover}\n      onPointerUp={() => {\n        if (!option.disabled) onSelect(option);\n      }}\n    >\n      <div\n        className={[\n          menuItemStyles['menu-item__content'],\n          option.disabled ? styles['select__option-content--disabled'] : '',\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        {option.leadingVisual != null && (\n          <div className={menuItemStyles['menu-item__left']}>\n            <span className={menuItemStyles['menu-item__leading-visual']}>\n              {option.leadingVisual}\n            </span>\n          </div>\n        )}\n        <div className={menuItemStyles['menu-item__middle']}>\n          <div className={menuItemStyles['menu-item__top-row']}>\n            <span className={menuItemStyles['menu-item__label']}>\n              {option.label}\n            </span>\n          </div>\n          {option.secondaryLabel != null && (\n            <div className={menuItemStyles['menu-item__bottom-row']}>\n              <span className={menuItemStyles['menu-item__secondary-label-below']}>\n                {option.secondaryLabel}\n              </span>\n            </div>\n          )}\n        </div>\n        {selected && (\n          <div className={menuItemStyles['menu-item__right']}>\n            <span\n              className={[\n                menuItemStyles['menu-item__trailing-visual'],\n                menuItemStyles['menu-item__trailing-visual--check'],\n              ].join(' ')}\n            >\n              <Icon glyph={<CheckIcon />} size=\"16\" />\n            </span>\n          </div>\n        )}\n      </div>\n    </li>\n  );\n}\n\n/**\n * { value: 'town-square', label: 'Town Square' }, { value: 'off-topic', label: 'Off-Topic'\n * }, { value: 'design', label: 'Design' }, ];\n */\nconst Select = forwardRef<HTMLButtonElement, SelectProps>(function Select(\n  {\n    options,\n    value: valueProp,\n    defaultValue = '',\n    onChange,\n    placeholder,\n    label,\n    leadingIcon,\n    size = 'medium',\n    invalid = false,\n    disabled = false,\n    id: idProp,\n    name,\n    className = '',\n    'aria-label': ariaLabel,\n    portalContainer = null,\n    zIndex,\n  },\n  ref,\n) {\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n  const listboxId = `${id}-listbox`;\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const anchorRef = useRef<HTMLDivElement>(null);\n  const buttonRef = useRef<HTMLButtonElement | null>(null);\n\n  const setButtonRef = useCallback(\n    (node: HTMLButtonElement | null) => {\n      buttonRef.current = node;\n      if (typeof ref === 'function') ref(node);\n      else if (ref) ref.current = node;\n    },\n    [ref],\n  );\n\n  const isControlled = valueProp !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const value = isControlled ? valueProp! : uncontrolledValue;\n\n  const [isOpen, setIsOpen] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n\n  const selectedOption = useMemo(\n    () => options.find((o) => o.value === value),\n    [options, value],\n  );\n\n  const listOptions = useMemo(\n    () => options.filter((o) => o.value !== ''),\n    [options],\n  );\n\n  const hasValue = value !== '';\n\n  const { mounted: popupMounted, visible: popupVisible } =\n    usePopoverTransition(isOpen);\n\n  const {\n    placement,\n    maxHeight,\n    style: popupStyle,\n    portalRef,\n    renderPortal,\n  } = useAnchoredPopupPortal(anchorRef, popupMounted, {\n    preferredHeight: POPUP_MAX_HEIGHT,\n    maxHeightCap: POPUP_MAX_HEIGHT,\n    portalContainer,\n    zIndex,\n  });\n\n  const close = useCallback(() => {\n    setIsOpen(false);\n    setActiveIndex(-1);\n  }, []);\n\n  const open = useCallback(() => {\n    if (disabled) return;\n    setIsOpen(true);\n  }, [disabled]);\n\n  useOutsideClose(rootRef, isOpen, close, portalRef);\n\n  useEffect(() => {\n    if (!isOpen) return;\n    setActiveIndex((prev) => {\n      if (listOptions.length === 0) return -1;\n      if (prev >= 0 && prev < listOptions.length) return prev;\n      const selectedIdx = listOptions.findIndex((o) => o.value === value);\n      if (selectedIdx >= 0) return selectedIdx;\n      const firstEnabled = listOptions.findIndex((o) => !o.disabled);\n      return firstEnabled >= 0 ? firstEnabled : 0;\n    });\n  }, [isOpen, listOptions, value]);\n\n  const commitValue = useCallback(\n    (next: string) => {\n      if (!isControlled) setUncontrolledValue(next);\n      onChange?.(next);\n    },\n    [isControlled, onChange],\n  );\n\n  const selectOption = useCallback(\n    (option: SelectOption) => {\n      if (option.disabled) return;\n      commitValue(option.value);\n      close();\n      buttonRef.current?.focus();\n    },\n    [commitValue, close],\n  );\n\n  const moveActive = useCallback(\n    (delta: number) => {\n      const enabled = listOptions\n        .map((o, i) => ({ o, i }))\n        .filter(({ o }) => !o.disabled);\n      if (enabled.length === 0) {\n        setActiveIndex(-1);\n        return;\n      }\n      setActiveIndex((prev) => {\n        const currentPos = enabled.findIndex(({ i }) => i === prev);\n        const nextPos =\n          currentPos < 0\n            ? delta > 0\n              ? 0\n              : enabled.length - 1\n            : (currentPos + delta + enabled.length) % enabled.length;\n        return enabled[nextPos].i;\n      });\n    },\n    [listOptions],\n  );\n\n  useEffect(() => {\n    if (!isOpen || activeIndex < 0) return;\n    const option = listOptions[activeIndex];\n    if (!option) return;\n    const el = document.getElementById(`${listboxId}-option-${option.value}`);\n    el?.scrollIntoView({ block: 'nearest' });\n  }, [isOpen, activeIndex, listOptions, listboxId]);\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n    if (disabled) return;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        if (!isOpen) open();\n        else moveActive(1);\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        if (!isOpen) open();\n        else moveActive(-1);\n        break;\n      case 'Home':\n        if (isOpen && listOptions.length > 0) {\n          e.preventDefault();\n          const idx = listOptions.findIndex((o) => !o.disabled);\n          setActiveIndex(idx >= 0 ? idx : 0);\n        }\n        break;\n      case 'End':\n        if (isOpen && listOptions.length > 0) {\n          e.preventDefault();\n          for (let i = listOptions.length - 1; i >= 0; i--) {\n            if (!listOptions[i]?.disabled) {\n              setActiveIndex(i);\n              break;\n            }\n          }\n        }\n        break;\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        if (isOpen && activeIndex >= 0 && listOptions[activeIndex]) {\n          selectOption(listOptions[activeIndex]);\n        } else if (!isOpen) {\n          open();\n        }\n        break;\n      case 'Escape':\n        if (isOpen) {\n          e.preventDefault();\n          close();\n        }\n        break;\n      case 'Tab':\n        close();\n        break;\n      default:\n        break;\n    }\n  };\n\n  const labelFloated = isFocused || isOpen || hasValue;\n  const displayLabel = selectedOption?.label ?? placeholder ?? '';\n  const showPlaceholderStyle = !hasValue && displayLabel !== '';\n\n  const activeOption =\n    activeIndex >= 0 ? listOptions[activeIndex] : undefined;\n  const activeDescendant =\n    isOpen && activeOption != null\n      ? `${listboxId}-option-${activeOption.value}`\n      : undefined;\n\n  const sizeClass = styles[`select--size-${toKebab(size)}`];\n  const rootClass = [\n    styles.select,\n    sizeClass,\n    invalid ? styles['select--invalid'] : '',\n    label != null && labelFloated ? styles['select--label-floated'] : '',\n    leadingIcon != null ? styles['select--has-leading-icon'] : '',\n    isOpen ? styles['select--open'] : '',\n    disabled ? styles['select--disabled'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const controlClass = [\n    styles.select__control,\n    showPlaceholderStyle ? styles['select__control--placeholder'] : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass} ref={rootRef}>\n      <div className={styles.select__wrapper} ref={anchorRef}>\n        {label != null && (\n          <label className={styles.select__label} htmlFor={id}>\n            {label}\n          </label>\n        )}\n        <button\n          ref={setButtonRef}\n          id={id}\n          type=\"button\"\n          role=\"combobox\"\n          className={controlClass}\n          disabled={disabled}\n          aria-haspopup=\"listbox\"\n          aria-expanded={isOpen}\n          aria-controls={listboxId}\n          aria-activedescendant={activeDescendant}\n          aria-invalid={invalid ? true : undefined}\n          aria-label={ariaLabel}\n          onClick={() => (isOpen ? close() : open())}\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n          onKeyDown={handleKeyDown}\n        >\n          {leadingIcon != null && (\n            <span className={styles['select__leading-icon']} aria-hidden>\n              {leadingIcon}\n            </span>\n          )}\n          <span className={styles.select__value}>{displayLabel}</span>\n          <span className={styles['select__trailing-icon']} aria-hidden>\n            <Icon size=\"12\" glyph={<ChevronDownIcon />} />\n          </span>\n        </button>\n      </div>\n\n      {name != null && !disabled && (\n        <input type=\"hidden\" name={name} value={value} />\n      )}\n\n      {popupMounted &&\n        renderPortal(\n          <div\n            ref={portalRef}\n            className={[\n              styles.select__popup,\n              placement === 'above' ? styles['select__popup--above'] : '',\n              popupVisible ? styles['select__popup--visible'] : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            style={popupStyle}\n          >\n            <PopoverMenu className={styles.select__menu}>\n              <PopoverMenuScroll maxHeight={maxHeight}>\n                <ul\n                  id={listboxId}\n                  className={styles.select__list}\n                  role=\"listbox\"\n                  aria-label={\n                    typeof label === 'string' ? label : (ariaLabel ?? 'Options')\n                  }\n                >\n                  {listOptions.map((option, index) => (\n                    <SelectOptionRow\n                      key={option.value}\n                      option={option}\n                      listboxId={listboxId}\n                      selected={option.value === value}\n                      active={index === activeIndex}\n                      onSelect={selectOption}\n                      onHover={() => setActiveIndex(index)}\n                    />\n                  ))}\n                </ul>\n              </PopoverMenuScroll>\n            </PopoverMenu>\n          </div>,\n        )}\n    </div>\n  );\n});\n\nexport default Select;\n"],"names":["POPUP_MAX_HEIGHT","SelectOptionRow","option","listboxId","selected","active","onSelect","onHover","rowClass","menuItemStyles","jsx","styles","ev","jsxs","Icon","CheckIcon","Select","forwardRef","options","valueProp","defaultValue","onChange","placeholder","label","leadingIcon","size","invalid","disabled","idProp","name","className","ariaLabel","portalContainer","zIndex","ref","generatedId","useId","id","rootRef","useRef","anchorRef","buttonRef","setButtonRef","useCallback","node","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","isOpen","setIsOpen","isFocused","setIsFocused","activeIndex","setActiveIndex","selectedOption","useMemo","o","listOptions","hasValue","popupMounted","popupVisible","usePopoverTransition","placement","maxHeight","popupStyle","portalRef","renderPortal","useAnchoredPopupPortal","close","open","useOutsideClose","useEffect","prev","selectedIdx","firstEnabled","commitValue","next","selectOption","_a","moveActive","delta","enabled","i","currentPos","nextPos","el","handleKeyDown","idx","labelFloated","displayLabel","showPlaceholderStyle","activeOption","activeDescendant","sizeClass","toKebab","rootClass","controlClass","ChevronDownIcon","PopoverMenu","PopoverMenuScroll","index"],"mappings":"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"}

package/dist/components/select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAuBtD,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,sGAAsG;IACtG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mEAAmE;IACnE,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACrC,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAqFD;;;GAGG;AACH,QAAA,MAAM,MAAM,2GAgUV,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAuBtD,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,sGAAsG;IACtG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mEAAmE;IACnE,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACrC,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAqFD;;;GAGG;AACH,QAAA,MAAM,MAAM,2GA6TV,CAAC;AAEH,eAAe,MAAM,CAAC"}