npm - @mattermost/compass-ui - Versions diffs - 0.1.0-alpha.27 → 0.1.0-alpha.28 - Mend

@mattermost/compass-ui 0.1.0-alpha.27 → 0.1.0-alpha.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (360) hide show

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

	@@ -1 +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 Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport MenuItem from '@/components/menu-item/MenuItem';\nimport type {\n MenuItemOwnedProps,\n MenuItemPassthroughProps,\n} from '@/components/menu-item/MenuItem';\nimport PopoverMenu, {\n PopoverMenuDivider,\n PopoverMenuScroll,\n} from '@/components/popover-menu/PopoverMenu';\nimport { useAnchoredPopupPortal } from '@/hooks/use-anchored-popup-portal';\nimport { useOutsideClose } from '@/hooks/use-outside-close';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport { mergeMenuItemProps } from '@/utils/menuItemProps';\nimport { toKebab } from '@/utils/string';\nimport styles from './Select.module.scss';\n\nexport type SelectSize = 'small' \| 'medium' \| 'large';\n\n// Select rows use `onPointerUp`, so `onClick` is left for callers.\ntype SelectMenuItemProps = MenuItemPassthroughProps<\n Exclude<MenuItemOwnedProps, 'onClick'>\n>;\n\nexport type SelectOption = {\n value: string;\n /** Kept as `string` like `ComboboxOption.label` (which drives filtering), so option lists can be shared. /\n label: string;\n disabled?: boolean;\n leadingVisual?: ReactNode;\n /* Accepts translated nodes. /\n secondaryLabel?: ReactNode;\n /* When true, renders a menu divider after this option. /\n dividerAfter?: boolean;\n /\n Extra `MenuItem` props for this row (e.g. `secondaryLabelPosition`, `tag`,\n * `trailingVisual`, `className`). Overrides the `menuItemProps` set on the\n * Select; the props Select owns (ARIA, selection, handlers) can't be set.\n /\n menuItemProps?: SelectMenuItemProps;\n};\n\nexport interface SelectProps {\n options: SelectOption[];\n /\n `MenuItem` props applied to every option row, e.g.\n * `menuItemProps={{ secondaryLabelPosition: 'inline' }}`. A row's own\n * `menuItemProps` wins.\n /\n menuItemProps?: SelectMenuItemProps;\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 /* Leading icon — pass `<Icon glyph={<SomeIcon />} />`; Select provides the correct size via context. /\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 /\n Accessible name for the options list when `label` isn't a string and no\n * `aria-label` is set. Default: \"Options\".\n /\n listboxLabel?: 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 menuItemProps,\n listboxId,\n selected,\n active,\n onSelect,\n onHover,\n dividerAfter = false,\n}: {\n option: SelectOption;\n menuItemProps?: SelectMenuItemProps;\n listboxId: string;\n selected: boolean;\n active: boolean;\n onSelect: (option: SelectOption) => void;\n onHover: () => void;\n dividerAfter?: boolean;\n}) {\n return (\n <>\n <li className={styles.select__option} role=\"presentation\">\n <MenuItem\n {...mergeMenuItemProps(menuItemProps, option.menuItemProps)}\n id={`${listboxId}-option-${option.value}`}\n role=\"option\"\n label={option.label}\n secondaryLabel={option.secondaryLabel}\n leadingElement={option.leadingVisual != null}\n leadingVisual={option.leadingVisual}\n trailingElement={selected}\n active={active}\n disabled={option.disabled}\n aria-selected={selected}\n onMouseDown={(ev) => ev.preventDefault()}\n onMouseEnter={onHover}\n onPointerUp={() => {\n if (!option.disabled) onSelect(option);\n }}\n />\n </li>\n {dividerAfter ? (\n <li role=\"presentation\">\n <PopoverMenuDivider aria-hidden=\"true\" />\n </li>\n ) : null}\n </>\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 menuItemProps,\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 listboxLabel = 'Options',\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 // Hover moves the highlight without scrolling; only keyboard changes scroll the row into view.\n const activatedByPointer = useRef(false);\n const hoverRow = useCallback(\n (index: number) => {\n if (index === activeIndex) return;\n activatedByPointer.current = true;\n setActiveIndex(index);\n },\n [activeIndex],\n );\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 activatedByPointer.current = false;\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 if (activatedByPointer.current) {\n activatedByPointer.current = false;\n return;\n }\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 = 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 <IconSlotContext.Provider value={{ size: '16' }}>\n {leadingIcon}\n </IconSlotContext.Provider>\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'\n ? label\n : (ariaLabel ?? listboxLabel)\n }\n >\n {listOptions.map((option, index) => (\n <SelectOptionRow\n key={option.value}\n option={option}\n menuItemProps={menuItemProps}\n listboxId={listboxId}\n selected={option.value === value}\n active={index === activeIndex}\n onSelect={selectOption}\n onHover={() => hoverRow(index)}\n dividerAfter={option.dividerAfter}\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","menuItemProps","listboxId","selected","active","onSelect","onHover","dividerAfter","jsxs","Fragment","jsx","styles","MenuItem","mergeMenuItemProps","ev","PopoverMenuDivider","Select","forwardRef","options","valueProp","defaultValue","onChange","placeholder","label","leadingIcon","size","invalid","disabled","idProp","name","className","ariaLabel","listboxLabel","portalContainer","zIndex","ref","generatedId","useId","id","rootRef","useRef","anchorRef","buttonRef","setButtonRef","useCallback","node","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","isOpen","setIsOpen","isFocused","setIsFocused","activeIndex","setActiveIndex","activatedByPointer","hoverRow","index","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","currentPos","i","nextPos","el","handleKeyDown","idx","labelFloated","displayLabel","showPlaceholderStyle","activeOption","activeDescendant","sizeClass","toKebab","rootClass","controlClass","IconSlotContext","Icon","ChevronDownIcon","PopoverMenu","PopoverMenuScroll"],"mappings":"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"}
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 Icon from '@/components/icon/Icon';\nimport { IconSlotContext } from '@/components/icon/Icon';\nimport {\n hasFieldMessage,\n isFieldInvalid,\n mergeFieldDescribedBy,\n} from '@/components/field/fieldDescribedBy';\nimport FieldMessage from '@/components/field-message/FieldMessage';\nimport type { FieldMessageTone } from '@/components/field-message/FieldMessage';\nimport MenuItem from '@/components/menu-item/MenuItem';\nimport type {\n MenuItemOwnedProps,\n MenuItemPassthroughProps,\n} from '@/components/menu-item/MenuItem';\nimport PopoverMenu, {\n PopoverMenuDivider,\n PopoverMenuScroll,\n} from '@/components/popover-menu/PopoverMenu';\nimport { useAnchoredPopupPortal } from '@/hooks/use-anchored-popup-portal';\nimport { useOutsideClose } from '@/hooks/use-outside-close';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport { mergeMenuItemProps } from '@/utils/menuItemProps';\nimport { toKebab } from '@/utils/string';\nimport styles from './Select.module.scss';\n\nexport type SelectSize = 'small' \| 'medium' \| 'large';\n\n// Select rows use `onPointerUp`, so `onClick` is left for callers.\ntype SelectMenuItemProps = MenuItemPassthroughProps<\n Exclude<MenuItemOwnedProps, 'onClick'>\n>;\n\nexport type SelectOption = {\n value: string;\n /** Kept as `string` like `ComboboxOption.label` (which drives filtering), so option lists can be shared. /\n label: string;\n disabled?: boolean;\n leadingVisual?: ReactNode;\n /* Accepts translated nodes. /\n secondaryLabel?: ReactNode;\n /* When true, renders a menu divider after this option. /\n dividerAfter?: boolean;\n /\n Extra `MenuItem` props for this row (e.g. `secondaryLabelPosition`, `tag`,\n * `trailingVisual`, `className`). Overrides the `menuItemProps` set on the\n * Select; the props Select owns (ARIA, selection, handlers) can't be set.\n /\n menuItemProps?: SelectMenuItemProps;\n};\n\nexport interface SelectProps {\n options: SelectOption[];\n /\n `MenuItem` props applied to every option row, e.g.\n * `menuItemProps={{ secondaryLabelPosition: 'inline' }}`. A row's own\n * `menuItemProps` wins.\n /\n menuItemProps?: SelectMenuItemProps;\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 /* Leading icon — pass `<Icon glyph={<SomeIcon />} />`; Select provides the correct size via context. /\n leadingIcon?: ReactNode;\n size?: SelectSize;\n /* When true, shows invalid/error styling. /\n invalid?: boolean;\n /\n Field message under the field. Accepts translated nodes (e.g. `<FormattedMessage/>`).\n * Defaults to error tone (invalid chrome) when set without `messageTone`. It is linked to\n * the trigger with `aria-describedby`.\n /\n message?: ReactNode;\n /* Visual tone for `message`. Default: `error` when `message` is set. /\n messageTone?: FieldMessageTone;\n /* Marks the field required for assistive tech (`aria-required=\"true\"`). /\n required?: boolean;\n disabled?: boolean;\n id?: string;\n name?: string;\n className?: string;\n 'aria-label'?: string;\n /* Extra description ids for the trigger; the field message id is appended. /\n 'aria-describedby'?: string;\n /\n Accessible name for the options list when `label` isn't a string and no\n * `aria-label` is set. Default: \"Options\".\n /\n listboxLabel?: 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 menuItemProps,\n listboxId,\n selected,\n active,\n onSelect,\n onHover,\n dividerAfter = false,\n}: {\n option: SelectOption;\n menuItemProps?: SelectMenuItemProps;\n listboxId: string;\n selected: boolean;\n active: boolean;\n onSelect: (option: SelectOption) => void;\n onHover: () => void;\n dividerAfter?: boolean;\n}) {\n return (\n <>\n <li className={styles.select__option} role=\"presentation\">\n <MenuItem\n {...mergeMenuItemProps(menuItemProps, option.menuItemProps)}\n id={`${listboxId}-option-${option.value}`}\n role=\"option\"\n label={option.label}\n secondaryLabel={option.secondaryLabel}\n leadingElement={option.leadingVisual != null}\n leadingVisual={option.leadingVisual}\n trailingElement={selected}\n active={active}\n disabled={option.disabled}\n aria-selected={selected}\n onMouseDown={(ev) => ev.preventDefault()}\n onMouseEnter={onHover}\n onPointerUp={() => {\n if (!option.disabled) onSelect(option);\n }}\n />\n </li>\n {dividerAfter ? (\n <li role=\"presentation\">\n <PopoverMenuDivider aria-hidden=\"true\" />\n </li>\n ) : null}\n </>\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 menuItemProps,\n value: valueProp,\n defaultValue = '',\n onChange,\n placeholder,\n label,\n leadingIcon,\n size = 'medium',\n invalid = false,\n message,\n messageTone,\n required = false,\n disabled = false,\n id: idProp,\n name,\n className = '',\n 'aria-label': ariaLabel,\n 'aria-describedby': describedBy,\n listboxLabel = 'Options',\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 // Hover moves the highlight without scrolling; only keyboard changes scroll the row into view.\n const activatedByPointer = useRef(false);\n const hoverRow = useCallback(\n (index: number) => {\n if (index === activeIndex) return;\n activatedByPointer.current = true;\n setActiveIndex(index);\n },\n [activeIndex],\n );\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 activatedByPointer.current = false;\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 if (activatedByPointer.current) {\n activatedByPointer.current = false;\n return;\n }\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 = activeIndex >= 0 ? listOptions[activeIndex] : undefined;\n const activeDescendant =\n isOpen && activeOption != null\n ? `${listboxId}-option-${activeOption.value}`\n : undefined;\n\n const showInvalid = isFieldInvalid(invalid, message, messageTone);\n const showMessage = hasFieldMessage(message);\n const messageId = showMessage ? `${id}-message` : undefined;\n\n const sizeClass = styles[`select--size-${toKebab(size)}`];\n const rootClass = [\n styles.select,\n sizeClass,\n showInvalid ? 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={showInvalid ? true : undefined}\n aria-required={required ? true : undefined}\n aria-describedby={mergeFieldDescribedBy(\n describedBy,\n messageId,\n undefined,\n )}\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 <IconSlotContext.Provider value={{ size: '16' }}>\n {leadingIcon}\n </IconSlotContext.Provider>\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 {showMessage && (\n <FieldMessage\n id={messageId}\n className={styles['select__message']}\n message={message}\n tone={messageTone ?? 'error'}\n />\n )}\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'\n ? label\n : (ariaLabel ?? listboxLabel)\n }\n >\n {listOptions.map((option, index) => (\n <SelectOptionRow\n key={option.value}\n option={option}\n menuItemProps={menuItemProps}\n listboxId={listboxId}\n selected={option.value === value}\n active={index === activeIndex}\n onSelect={selectOption}\n onHover={() => hoverRow(index)}\n dividerAfter={option.dividerAfter}\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","menuItemProps","listboxId","selected","active","onSelect","onHover","dividerAfter","jsxs","Fragment","jsx","styles","MenuItem","mergeMenuItemProps","ev","PopoverMenuDivider","Select","forwardRef","options","valueProp","defaultValue","onChange","placeholder","label","leadingIcon","size","invalid","message","messageTone","required","disabled","idProp","name","className","ariaLabel","describedBy","listboxLabel","portalContainer","zIndex","ref","generatedId","useId","id","rootRef","useRef","anchorRef","buttonRef","setButtonRef","useCallback","node","isControlled","uncontrolledValue","setUncontrolledValue","useState","value","isOpen","setIsOpen","isFocused","setIsFocused","activeIndex","setActiveIndex","activatedByPointer","hoverRow","index","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","showInvalid","isFieldInvalid","showMessage","hasFieldMessage","messageId","sizeClass","toKebab","rootClass","controlClass","mergeFieldDescribedBy","IconSlotContext","Icon","ChevronDownIcon","FieldMessage","PopoverMenu","PopoverMenuScroll"],"mappings":"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"}

package/dist/components/select/Select.css CHANGED Viewed

	@@ -1 +1 @@
1	- .~~_select_1udb3_2~~{position:relative;display:flex;flex-direction:column;width:100%}.~~_select__wrapper_1udb3_8~~{position:relative;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);cursor:pointer}.~~_select_1udb3_2~~:not(._select--~~disabled_1udb3_16~~):hover:not(:focus-within) .~~_select__wrapper_1udb3_8~~{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}.~~_select_1udb3_2~~:focus-within .~~_select__wrapper_1udb3_8~~{box-shadow:inset 0 0 0 1px var(--focus-ring-color),0 0 0 1px var(--focus-ring-color)}._select--~~disabled_1udb3_16~~ .~~_select__wrapper_1udb3_8~~{opacity:.56;cursor:not-allowed}.~~_select__label_1udb3_26~~{position:absolute;left:var(--spacing-xs);top:50%;z-index:1;padding:0 var(--spacing-xxxs);transform:translateY(-50%);margin:0;font-family:var(--font-family-body);font-size:var(--font-size-75);line-height:var(--line-height-75);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),top var(--duration-quick) var(--ease-transition),left var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._select--label-~~floated_1udb3_47~~ .~~_select__label_1udb3_26~~{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:~~14px~~}.~~_select_1udb3_2~~:focus-within .~~_select__label_1udb3_26~~{color:var(--button-bg)}.~~_select__control_1udb3_56~~{display:flex;align-items:center;width:100%;margin:0;border:0;background:transparent;font-family:var(--font-family-body);font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);color:var(--center-channel-color);text-align:left;cursor:pointer;gap:var(--spacing-xs)}.~~_select__control_1udb3_56~~:focus{outline:none}.~~_select__control_1udb3_56~~:focus-visible{outline:none}.~~_select__control_1udb3_56~~:disabled{cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.64)}._select__control--~~placeholder_1udb3_82~~ .~~_select__value_1udb3_82~~{color:rgba(var(--center-channel-color-rgb),.64)}.~~_select__value_1udb3_82~~{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._select__leading-~~icon_1udb3_92~~{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._select__trailing-~~icon_1udb3_99~~{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64);margin-right:var(--spacing-xxxs);transition:transform var(--duration-quick) var(--ease-transition)}._select--~~open_1udb3_108~~ ._select__trailing-~~icon_1udb3_99~~{transform:rotate(180deg)}.~~_select__popup_1udb3_111~~{opacity:0;transform:scale(.9);transform-origin:top center;transition:opacity var(--duration-quick) var(--ease-exit),transform var(--duration-quick) var(--ease-exit);pointer-events:none}._select__popup--~~above_1udb3_118~~{transform-origin:bottom center}._select__popup--~~visible_1udb3_121~~{opacity:1;transform:scale(1);pointer-events:auto;transition:opacity var(--duration-quick) var(--ease-entrance),transform var(--duration-quick) var(--ease-entrance)}.~~_select__popup_1udb3_111~~ .~~_select__menu_1udb3_127~~{width:100%;min-width:100%;max-width:none}.~~_select__list_1udb3_132~~{margin:0;padding:0;list-style:none}.~~_select__option_1udb3_137~~{display:block;width:100%;list-style:none}.~~_select__option_1udb3_137~~[aria-disabled=true]{cursor:not-allowed}._select__option-content--~~disabled_1udb3_145~~{opacity:.4}._select--size-~~small_1udb3_148~~ .~~_select__wrapper_1udb3_8~~{min-height:32px}._select--size-~~small_1udb3_148~~ .~~_select__control_1udb3_56~~{padding:var(--spacing-xs) var(--spacing-m);gap:var(--spacing-xs);font-size:var(--font-size-75);line-height:var(--line-height-75)}._select--size-~~small_1udb3_148~~ ._select__trailing-~~icon_1udb3_99~~ svg{width:var(--icon-size-12);height:var(--icon-size-12)}._select--size-~~small_1udb3_148~~._select--label-~~floated_1udb3_47~~ .~~_select__label_1udb3_26~~{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:~~14px~~}._select--size-~~medium_1udb3_167~~ .~~_select__wrapper_1udb3_8~~{min-height:40px}._select--size-~~medium_1udb3_167~~ .~~_select__control_1udb3_56~~{padding:var(--spacing-s) var(--spacing-l);gap:var(--spacing-s);font-size:var(--font-size-100);line-height:var(--line-height-100)}._select--size-~~medium_1udb3_167~~ .~~_select__label_1udb3_26~~{font-size:var(--font-size-100);left:var(--spacing-m)}._select--size-~~medium_1udb3_167~~ ._select__trailing-~~icon_1udb3_99~~ svg{width:var(--icon-size-16);height:var(--icon-size-16)}._select--size-~~medium_1udb3_167~~._select--label-~~floated_1udb3_47~~ .~~_select__label_1udb3_26~~{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:~~14px~~}._select--size-~~large_1udb3_190~~ .~~_select__wrapper_1udb3_8~~{min-height:48px}._select--size-~~large_1udb3_190~~ .~~_select__control_1udb3_56~~{padding:var(--spacing-m) var(--spacing-l);gap:var(--spacing-s);font-size:var(--font-size-200);line-height:var(--line-height-200)}._select--size-~~large_1udb3_190~~ .~~_select__label_1udb3_26~~{font-size:var(--font-size-200);line-height:var(--line-height-200);left:var(--spacing-m)}._select--size-~~large_1udb3_190~~ ._select__trailing-~~icon_1udb3_99~~ svg{width:var(--icon-size-16);height:var(--icon-size-16)}._select--size-~~large_1udb3_190~~._select--label-~~floated_1udb3_47~~ .~~_select__label_1udb3_26~~{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:~~14px~~}.~~_select_1udb3_2~~:has(.~~_select__label_1udb3_26~~):not(._select--label-~~floated_1udb3_47~~) .~~_select__value_1udb3_82~~{color:transparent}._select--~~invalid_1udb3_217~~ .~~_select__wrapper_1udb3_8~~{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._select--~~invalid_1udb3_217~~:focus-within .~~_select__wrapper_1udb3_8~~{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger)),0 0 0 1px var(--error-text, var(--color-danger))}._select--~~invalid_1udb3_217~~ .~~_select__label_1udb3_26~~{color:var(--error-text, var(--color-danger))}._select--~~invalid_1udb3_217~~:focus-within .~~_select__label_1udb3_26~~{color:var(--error-text, var(--color-danger))}._select--has-leading-~~icon_1udb3_229~~ .~~_select__label_1udb3_26~~{left:calc(var(--spacing-m) + var(--icon-size-16) + var(--spacing-xs) - var(--spacing-xxxs))}._select--has-leading-~~icon_1udb3_229~~._select--label-~~floated_1udb3_47~~ .~~_select__label_1udb3_26~~{left:var(--spacing-xs)}._select--has-leading-~~icon_1udb3_229~~._select--size-~~medium_1udb3_167~~ .~~_select__label_1udb3_26~~,._select--has-leading-~~icon_1udb3_229~~._select--size-~~large_1udb3_190~~ .~~_select__label_1udb3_26~~{left:calc(var(--spacing-m) + var(--icon-size-16) + var(--spacing-s))}._select--has-leading-~~icon_1udb3_229~~._select--size-~~medium_1udb3_167~~._select--label-~~floated_1udb3_47~~ .~~_select__label_1udb3_26~~,._select--has-leading-~~icon_1udb3_229~~._select--size-~~large_1udb3_190~~._select--label-~~floated_1udb3_47~~ .~~_select__label_1udb3_26~~{left:var(--spacing-m)}
1	+ ._select_ew42w_13{position:relative;display:flex;flex-direction:column;width:100%}._select__wrapper_ew42w_19{position:relative;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);cursor:pointer}._select_ew42w_13:not(._select--disabled_ew42w_27):hover:not(:focus-within) ._select__wrapper_ew42w_19{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.24)}._select_ew42w_13:focus-within ._select__wrapper_ew42w_19{box-shadow:inset 0 0 0 1px var(--focus-ring-color),0 0 0 1px var(--focus-ring-color)}._select--disabled_ew42w_27 ._select__wrapper_ew42w_19{opacity:.56;cursor:not-allowed}._select__label_ew42w_37{position:absolute;left:var(--spacing-xs);top:50%;z-index:1;padding:0 var(--spacing-xxxs);transform:translateY(-50%);margin:0;font-family:var(--font-family-body);font-size:var(--font-size-75);line-height:var(--line-height-75);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),top var(--duration-quick) var(--ease-transition),left var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition)}._select--label-floated_ew42w_58 ._select__label_ew42w_37{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:1.4}._select_ew42w_13:focus-within ._select__label_ew42w_37{color:var(--button-bg)}._select__message_ew42w_67{margin-top:var(--spacing-xs)}._select__control_ew42w_70{display:flex;align-items:center;width:100%;margin:0;border:0;background:transparent;font-family:var(--font-family-body);font-size:var(--font-size-75);line-height:var(--line-height-75);font-weight:var(--font-weight-regular);color:var(--center-channel-color);text-align:left;cursor:pointer;gap:var(--spacing-xs)}._select__control_ew42w_70:focus{outline:none}._select__control_ew42w_70:focus-visible{outline:none}._select__control_ew42w_70:disabled{cursor:not-allowed;color:rgba(var(--center-channel-color-rgb),.64)}._select__control--placeholder_ew42w_96 ._select__value_ew42w_96{color:rgba(var(--center-channel-color-rgb),.64)}._select__value_ew42w_96{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._select__leading-icon_ew42w_106{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._select__trailing-icon_ew42w_113{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64);margin-right:var(--spacing-xxxs);transition:transform var(--duration-quick) var(--ease-transition)}._select--open_ew42w_122 ._select__trailing-icon_ew42w_113{transform:rotate(180deg)}._select__popup_ew42w_125{opacity:0;transform:scale(.9);transform-origin:top center;transition:opacity var(--duration-quick) var(--ease-exit),transform var(--duration-quick) var(--ease-exit);pointer-events:none}._select__popup--above_ew42w_132{transform-origin:bottom center}._select__popup--visible_ew42w_135{opacity:1;transform:scale(1);pointer-events:auto;transition:opacity var(--duration-quick) var(--ease-entrance),transform var(--duration-quick) var(--ease-entrance)}._select__popup_ew42w_125 ._select__menu_ew42w_141{width:100%;min-width:100%;max-width:none}._select__list_ew42w_146{margin:0;padding:0;list-style:none}._select__option_ew42w_151{display:block;width:100%;list-style:none}._select__option_ew42w_151[aria-disabled=true]{cursor:not-allowed}._select__option-content--disabled_ew42w_159{opacity:.4}._select--size-small_ew42w_162 ._select__wrapper_ew42w_19{min-height:32px}._select--size-small_ew42w_162 ._select__control_ew42w_70{min-height:32px;padding:var(--spacing-xs) var(--spacing-m);gap:var(--spacing-xs);font-size:var(--font-size-75);line-height:var(--line-height-75)}._select--size-small_ew42w_162 ._select__trailing-icon_ew42w_113 svg{width:var(--icon-size-12);height:var(--icon-size-12)}._select--size-small_ew42w_162._select--label-floated_ew42w_58 ._select__label_ew42w_37{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:1.4}._select--size-medium_ew42w_182 ._select__wrapper_ew42w_19{min-height:40px}._select--size-medium_ew42w_182 ._select__control_ew42w_70{min-height:40px;padding:var(--spacing-s) var(--spacing-l);gap:var(--spacing-s);font-size:var(--font-size-100);line-height:var(--line-height-100)}._select--size-medium_ew42w_182 ._select__label_ew42w_37{font-size:var(--font-size-100);left:var(--spacing-m);line-height:var(--line-height-100)}._select--size-medium_ew42w_182 ._select__trailing-icon_ew42w_113 svg{width:var(--icon-size-16);height:var(--icon-size-16)}._select--size-medium_ew42w_182._select--label-floated_ew42w_58 ._select__label_ew42w_37{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:1.4}._select--size-large_ew42w_207 ._select__wrapper_ew42w_19{min-height:48px}._select--size-large_ew42w_207 ._select__control_ew42w_70{min-height:48px;padding:var(--spacing-m) var(--spacing-l);gap:var(--spacing-s);font-size:var(--font-size-200);line-height:var(--line-height-200)}._select--size-large_ew42w_207 ._select__label_ew42w_37{font-size:var(--font-size-200);line-height:var(--line-height-200);left:var(--spacing-m)}._select--size-large_ew42w_207 ._select__trailing-icon_ew42w_113 svg{width:var(--icon-size-16);height:var(--icon-size-16)}._select--size-large_ew42w_207._select--label-floated_ew42w_58 ._select__label_ew42w_37{top:0;transform:translateY(-50%);font-size:var(--font-size-25);line-height:1.4}._select_ew42w_13:has(._select__label_ew42w_37):not(._select--label-floated_ew42w_58) ._select__value_ew42w_96{color:transparent}._select--invalid_ew42w_235 ._select__wrapper_ew42w_19{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._select--invalid_ew42w_235:focus-within ._select__wrapper_ew42w_19{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger)),0 0 0 1px var(--error-text, var(--color-danger))}._select--invalid_ew42w_235 ._select__label_ew42w_37{color:var(--error-text, var(--color-danger))}._select--invalid_ew42w_235:focus-within ._select__label_ew42w_37{color:var(--error-text, var(--color-danger))}._select--has-leading-icon_ew42w_247 ._select__label_ew42w_37{left:calc(var(--spacing-m) + var(--icon-size-16) + var(--spacing-xs) - var(--spacing-xxxs))}._select--has-leading-icon_ew42w_247._select--label-floated_ew42w_58 ._select__label_ew42w_37{left:var(--spacing-xs)}._select--has-leading-icon_ew42w_247._select--size-medium_ew42w_182 ._select__label_ew42w_37,._select--has-leading-icon_ew42w_247._select--size-large_ew42w_207 ._select__label_ew42w_37{left:calc(var(--spacing-m) + var(--icon-size-16) + var(--spacing-s))}._select--has-leading-icon_ew42w_247._select--size-medium_ew42w_182._select--label-floated_ew42w_58 ._select__label_ew42w_37,._select--has-leading-icon_ew42w_247._select--size-large_ew42w_207._select--label-floated_ew42w_58 ._select__label_ew42w_37{left:var(--spacing-m)}

package/dist/components/select/Select.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { FieldMessageTone } from '../field-message/FieldMessage';
 import { MenuItemOwnedProps, MenuItemPassthroughProps } from '../menu-item/MenuItem';
 export type SelectSize = 'small' | 'medium' | 'large';
 type SelectMenuItemProps = MenuItemPassthroughProps<Exclude<MenuItemOwnedProps, 'onClick'>>;
@@ -36,12 +37,25 @@ export interface SelectProps {
     /** Leading icon — pass `<Icon glyph={<SomeIcon />} />`; Select provides the correct size via context. */
     leadingIcon?: ReactNode;
     size?: SelectSize;
+    /** When true, shows invalid/error styling. */
     invalid?: boolean;
+    /**
+     * Field message under the field. Accepts translated nodes (e.g. `<FormattedMessage/>`).
+     * Defaults to error tone (invalid chrome) when set without `messageTone`. It is linked to
+     * the trigger with `aria-describedby`.
+     */
+    message?: ReactNode;
+    /** Visual tone for `message`. Default: `error` when `message` is set. */
+    messageTone?: FieldMessageTone;
+    /** Marks the field required for assistive tech (`aria-required="true"`). */
+    required?: boolean;
     disabled?: boolean;
     id?: string;
     name?: string;
     className?: string;
     'aria-label'?: string;
+    /** Extra description ids for the trigger; the field message id is appended. */
+    'aria-describedby'?: string;
     /**
      * Accessible name for the options list when `label` isn't a string and no
      * `aria-label` is set. Default: "Options".

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

	@@ -1 +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;~~AActD~~,OAAO,KAAK,EACV,kBAAkB,EAClB,wBAAwB,EACzB,MAAM,gCAAgC,CAAC;AAYxC,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAGtD,KAAK,mBAAmB,GAAG,wBAAwB,CACjD,OAAO,CAAC,kBAAkB,EAAE,SAAS,CAAC,CACvC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,4GAA4G;IAC5G,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,gCAAgC;IAChC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,aAAa,CAAC,EAAE,mBAAmB,CAAC;CACrC,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB;;;;OAIG;IACH,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC,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,yGAAyG;IACzG,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;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mEAAmE;IACnE,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACrC,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAsDD;;;GAGG;AACH,QAAA,MAAM,MAAM,~~2GAmVV~~,CAAC;AAEH,eAAe,MAAM,CAAC"}
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;AAmBtD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAE/E,OAAO,KAAK,EACV,kBAAkB,EAClB,wBAAwB,EACzB,MAAM,gCAAgC,CAAC;AAYxC,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAGtD,KAAK,mBAAmB,GAAG,wBAAwB,CACjD,OAAO,CAAC,kBAAkB,EAAE,SAAS,CAAC,CACvC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,4GAA4G;IAC5G,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,gCAAgC;IAChC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,aAAa,CAAC,EAAE,mBAAmB,CAAC;CACrC,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB;;;;OAIG;IACH,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC,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,yGAAyG;IACzG,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,yEAAyE;IACzE,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,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,+EAA+E;IAC/E,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mEAAmE;IACnE,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACrC,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAsDD;;;GAGG;AACH,QAAA,MAAM,MAAM,2GA0WV,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/dist/components/select/Select.js CHANGED Viewed

@@ -1,261 +1,282 @@
-import { jsxs as k, jsx as o, Fragment as we } from "react/jsx-runtime";
-import { forwardRef as De, useId as ke, useRef as w, useCallback as p, useState as D, useMemo as J, useEffect as Q } from "react";
-import __Ne from "@mattermost/compass-icons/components/chevron-down.js";const Ne=__Ne&&__Ne.default?__Ne.default:__Ne;
-import Ee, { IconSlotContext as Me } from "../icon/Icon.js";
-import Re from "../menu-item/MenuItem.js";
-import Se, { PopoverMenuScroll as Ve, PopoverMenuDivider as Ae } from "../popover-menu/PopoverMenu.js";
-import { useAnchoredPopupPortal as Oe } from "../../hooks/use-anchored-popup-portal.js";
-import { useOutsideClose as $e } from "../../hooks/use-outside-close.js";
-import { usePopoverTransition as Be } from "../../hooks/use-popover-transition.js";
-import { mergeMenuItemProps as He } from "../../utils/menuItemProps.js";
-import { toKebab as Fe } from "../../utils/string.js";
+import { jsxs as k, jsx as o, Fragment as Re } from "react/jsx-runtime";
+import { forwardRef as Se, useId as Ve, useRef as D, useCallback as p, useState as M, useMemo as Z, useEffect as ee } from "react";
+import __$e from "@mattermost/compass-icons/components/chevron-down.js";const $e=__$e&&__$e.default?__$e.default:__$e;
+import Ae, { IconSlotContext as Be } from "../icon/Icon.js";
+import { mergeFieldDescribedBy as Oe, hasFieldMessage as He, isFieldInvalid as je } from "../field/fieldDescribedBy.js";
+import Ce from "../field-message/FieldMessage.js";
+import ze from "../menu-item/MenuItem.js";
+import Ue, { PopoverMenuScroll as Ke, PopoverMenuDivider as Le } from "../popover-menu/PopoverMenu.js";
+import { useAnchoredPopupPortal as Te } from "../../hooks/use-anchored-popup-portal.js";
+import { useOutsideClose as qe } from "../../hooks/use-outside-close.js";
+import { usePopoverTransition as Ge } from "../../hooks/use-popover-transition.js";
+import { mergeMenuItemProps as Xe } from "../../utils/menuItemProps.js";
+import { toKebab as Je } from "../../utils/string.js";
 import l from "./Select.module.scss.js";
-const W = 280;
-function je({
-  option: i,
+const te = 280;
+function Qe({
+  option: a,
   menuItemProps: m,
   listboxId: N,
   selected: g,
   active: E,
   onSelect: v,
-  onHover: M,
+  onHover: F,
   dividerAfter: u = !1
 }) {
-  return /* @__PURE__ */ k(we, { children: [
+  return /* @__PURE__ */ k(Re, { children: [
     /* @__PURE__ */ o("li", { className: l.select__option, role: "presentation", children: /* @__PURE__ */ o(
-      Re,
+      ze,
       {
-        ...He(m, i.menuItemProps),
-        id: `${N}-option-${i.value}`,
+        ...Xe(m, a.menuItemProps),
+        id: `${N}-option-${a.value}`,
         role: "option",
-        label: i.label,
-        secondaryLabel: i.secondaryLabel,
-        leadingElement: i.leadingVisual != null,
-        leadingVisual: i.leadingVisual,
+        label: a.label,
+        secondaryLabel: a.secondaryLabel,
+        leadingElement: a.leadingVisual != null,
+        leadingVisual: a.leadingVisual,
         trailingElement: g,
         active: E,
-        disabled: i.disabled,
+        disabled: a.disabled,
         "aria-selected": g,
         onMouseDown: (I) => I.preventDefault(),
-        onMouseEnter: M,
+        onMouseEnter: F,
         onPointerUp: () => {
-          i.disabled || v(i);
+          a.disabled || v(a);
         }
       }
     ) }),
-    u ? /* @__PURE__ */ o("li", { role: "presentation", children: /* @__PURE__ */ o(Ae, { "aria-hidden": "true" }) }) : null
+    u ? /* @__PURE__ */ o("li", { role: "presentation", children: /* @__PURE__ */ o(Le, { "aria-hidden": "true" }) }) : null
   ] });
 }
-const Ye = De(function({
+const dt = Se(function({
   options: m,
   menuItemProps: N,
   value: g,
   defaultValue: E = "",
   onChange: v,
-  placeholder: M,
+  placeholder: F,
   label: u,
   leadingIcon: I,
-  size: Y = "medium",
-  invalid: A = !1,
+  size: le = "medium",
+  invalid: se = !1,
+  message: R,
+  messageTone: $,
+  required: ne = !1,
   disabled: b = !1,
-  id: Z,
-  name: O,
-  className: ee = "",
-  "aria-label": $,
-  listboxLabel: te = "Options",
-  portalContainer: le = null,
-  zIndex: ne
-}, x) {
-  const se = ke(), R = Z ?? se, h = `${R}-listbox`, B = w(null), H = w(null), F = w(null), re = p(
+  id: re,
+  name: A,
+  className: oe = "",
+  "aria-label": B,
+  "aria-describedby": ie,
+  listboxLabel: ae = "Options",
+  portalContainer: ce = null,
+  zIndex: ue
+}, y) {
+  const de = Ve(), x = re ?? de, h = `${x}-listbox`, O = D(null), H = D(null), j = D(null), fe = p(
     (e) => {
-      F.current = e, typeof x == "function" ? x(e) : x && (x.current = e);
+      j.current = e, typeof y == "function" ? y(e) : y && (y.current = e);
     },
-    [x]
-  ), S = g !== void 0, [oe, ae] = D(E), d = S ? g : oe, [s, j] = D(!1), [ie, C] = D(!1), [a, f] = D(-1), y = w(!1), ce = p(
+    [y]
+  ), S = g !== void 0, [pe, me] = M(E), d = S ? g : pe, [n, C] = M(!1), [ve, z] = M(!1), [i, f] = M(-1), P = D(!1), be = p(
     (e) => {
-      e !== a && (y.current = !0, f(e));
+      e !== i && (P.current = !0, f(e));
     },
-    [a]
-  ), V = J(
+    [i]
+  ), V = Z(
     () => m.find((e) => e.value === d),
     [m, d]
-  ), r = J(
+  ), r = Z(
     () => m.filter((e) => e.value !== ""),
     [m]
-  ), z = d !== "", { mounted: U, visible: ue } = Be(s), {
-    placement: de,
-    maxHeight: fe,
-    style: pe,
-    portalRef: K,
-    renderPortal: me
-  } = Oe(H, U, {
-    preferredHeight: W,
-    maxHeightCap: W,
-    portalContainer: le,
-    zIndex: ne
+  ), U = d !== "", { mounted: K, visible: he } = Ge(n), {
+    placement: _e,
+    maxHeight: ge,
+    style: Ie,
+    portalRef: L,
+    renderPortal: ye
+  } = Te(H, K, {
+    preferredHeight: te,
+    maxHeightCap: te,
+    portalContainer: ce,
+    zIndex: ue
   }), _ = p(() => {
-    j(!1), f(-1);
-  }, []), P = p(() => {
-    b || j(!0);
+    C(!1), f(-1);
+  }, []), w = p(() => {
+    b || C(!0);
   }, [b]);
-  $e(B, s, _, K), Q(() => {
-    s && f((e) => {
+  qe(O, n, _, L), ee(() => {
+    n && f((e) => {
       if (r.length === 0) return -1;
       if (e >= 0 && e < r.length) return e;
       const t = r.findIndex((c) => c.value === d);
       if (t >= 0) return t;
-      const n = r.findIndex((c) => !c.disabled);
-      return n >= 0 ? n : 0;
+      const s = r.findIndex((c) => !c.disabled);
+      return s >= 0 ? s : 0;
     });
-  }, [s, r, d]);
+  }, [n, r, d]);
   const T = p(
     (e) => {
-      S || ae(e), v == null || v(e);
+      S || me(e), v == null || v(e);
     },
     [S, v]
-  ), L = p(
+  ), q = p(
     (e) => {
       var t;
-      e.disabled || (T(e.value), _(), (t = F.current) == null || t.focus());
+      e.disabled || (T(e.value), _(), (t = j.current) == null || t.focus());
     },
     [T, _]
   ), G = p(
     (e) => {
-      y.current = !1;
-      const t = r.map((n, c) => ({ o: n, i: c })).filter(({ o: n }) => !n.disabled);
+      P.current = !1;
+      const t = r.map((s, c) => ({ o: s, i: c })).filter(({ o: s }) => !s.disabled);
       if (t.length === 0) {
         f(-1);
         return;
       }
-      f((n) => {
-        const c = t.findIndex(({ i: Pe }) => Pe === n), ye = c < 0 ? e > 0 ? 0 : t.length - 1 : (c + e + t.length) % t.length;
-        return t[ye].i;
+      f((s) => {
+        const c = t.findIndex(({ i: Fe }) => Fe === s), Ee = c < 0 ? e > 0 ? 0 : t.length - 1 : (c + e + t.length) % t.length;
+        return t[Ee].i;
       });
     },
     [r]
   );
-  Q(() => {
-    var n;
-    if (!s || a < 0) return;
-    if (y.current) {
-      y.current = !1;
+  ee(() => {
+    var s;
+    if (!n || i < 0) return;
+    if (P.current) {
+      P.current = !1;
       return;
     }
-    const e = r[a];
+    const e = r[i];
     if (!e) return;
     const t = document.getElementById(`${h}-option-${e.value}`);
-    (n = t == null ? void 0 : t.scrollIntoView) == null || n.call(t, { block: "nearest" });
-  }, [s, a, r, h]);
-  const ve = (e) => {
+    (s = t == null ? void 0 : t.scrollIntoView) == null || s.call(t, { block: "nearest" });
+  }, [n, i, r, h]);
+  const xe = (e) => {
     var t;
     if (!b)
       switch (e.key) {
         case "ArrowDown":
-          e.preventDefault(), s ? G(1) : P();
+          e.preventDefault(), n ? G(1) : w();
           break;
         case "ArrowUp":
-          e.preventDefault(), s ? G(-1) : P();
+          e.preventDefault(), n ? G(-1) : w();
           break;
         case "Home":
-          if (s && r.length > 0) {
+          if (n && r.length > 0) {
             e.preventDefault();
-            const n = r.findIndex((c) => !c.disabled);
-            f(n >= 0 ? n : 0);
+            const s = r.findIndex((c) => !c.disabled);
+            f(s >= 0 ? s : 0);
           }
           break;
         case "End":
-          if (s && r.length > 0) {
+          if (n && r.length > 0) {
             e.preventDefault();
-            for (let n = r.length - 1; n >= 0; n--)
-              if (!((t = r[n]) != null && t.disabled)) {
-                f(n);
+            for (let s = r.length - 1; s >= 0; s--)
+              if (!((t = r[s]) != null && t.disabled)) {
+                f(s);
                 break;
               }
           }
           break;
         case "Enter":
         case " ":
-          e.preventDefault(), s && a >= 0 && r[a] ? L(r[a]) : s || P();
+          e.preventDefault(), n && i >= 0 && r[i] ? q(r[i]) : n || w();
           break;
         case "Escape":
-          s && (e.preventDefault(), _());
+          n && (e.preventDefault(), _());
           break;
         case "Tab":
           _();
           break;
       }
-  }, be = ie || s || z, X = (V == null ? void 0 : V.label) ?? M ?? "", he = !z && X !== "", q = a >= 0 ? r[a] : void 0, _e = s && q != null ? `${h}-option-${q.value}` : void 0, ge = l[`select--size-${Fe(Y)}`], Ie = [
+  }, Pe = ve || n || U, X = (V == null ? void 0 : V.label) ?? F ?? "", we = !U && X !== "", J = i >= 0 ? r[i] : void 0, De = n && J != null ? `${h}-option-${J.value}` : void 0, Q = je(se, R, $), W = He(R), Y = W ? `${x}-message` : void 0, Me = l[`select--size-${Je(le)}`], ke = [
     l.select,
-    ge,
-    A ? l["select--invalid"] : "",
-    u != null && be ? l["select--label-floated"] : "",
+    Me,
+    Q ? l["select--invalid"] : "",
+    u != null && Pe ? l["select--label-floated"] : "",
     I != null ? l["select--has-leading-icon"] : "",
-    s ? l["select--open"] : "",
+    n ? l["select--open"] : "",
     b ? l["select--disabled"] : "",
-    ee
-  ].filter(Boolean).join(" "), xe = [
+    oe
+  ].filter(Boolean).join(" "), Ne = [
     l.select__control,
-    he ? l["select__control--placeholder"] : ""
+    we ? l["select__control--placeholder"] : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ k("div", { className: Ie, ref: B, children: [
+  return /* @__PURE__ */ k("div", { className: ke, ref: O, children: [
     /* @__PURE__ */ k("div", { className: l.select__wrapper, ref: H, children: [
-      u != null && /* @__PURE__ */ o("label", { className: l.select__label, htmlFor: R, children: u }),
+      u != null && /* @__PURE__ */ o("label", { className: l.select__label, htmlFor: x, children: u }),
       /* @__PURE__ */ k(
         "button",
         {
-          ref: re,
-          id: R,
+          ref: fe,
+          id: x,
           type: "button",
           role: "combobox",
-          className: xe,
+          className: Ne,
           disabled: b,
           "aria-haspopup": "listbox",
-          "aria-expanded": s,
+          "aria-expanded": n,
           "aria-controls": h,
-          "aria-activedescendant": _e,
-          "aria-invalid": A ? !0 : void 0,
-          "aria-label": $,
-          onClick: () => s ? _() : P(),
-          onFocus: () => C(!0),
-          onBlur: () => C(!1),
-          onKeyDown: ve,
+          "aria-activedescendant": De,
+          "aria-invalid": Q ? !0 : void 0,
+          "aria-required": ne ? !0 : void 0,
+          "aria-describedby": Oe(
+            ie,
+            Y,
+            void 0
+          ),
+          "aria-label": B,
+          onClick: () => n ? _() : w(),
+          onFocus: () => z(!0),
+          onBlur: () => z(!1),
+          onKeyDown: xe,
           children: [
-            I != null && /* @__PURE__ */ o("span", { className: l["select__leading-icon"], "aria-hidden": !0, children: /* @__PURE__ */ o(Me.Provider, { value: { size: "16" }, children: I }) }),
+            I != null && /* @__PURE__ */ o("span", { className: l["select__leading-icon"], "aria-hidden": !0, children: /* @__PURE__ */ o(Be.Provider, { value: { size: "16" }, children: I }) }),
             /* @__PURE__ */ o("span", { className: l.select__value, children: X }),
-            /* @__PURE__ */ o("span", { className: l["select__trailing-icon"], "aria-hidden": !0, children: /* @__PURE__ */ o(Ee, { size: "12", glyph: /* @__PURE__ */ o(Ne, {}) }) })
+            /* @__PURE__ */ o("span", { className: l["select__trailing-icon"], "aria-hidden": !0, children: /* @__PURE__ */ o(Ae, { size: "12", glyph: /* @__PURE__ */ o($e, {}) }) })
           ]
         }
       )
     ] }),
-    O != null && !b && /* @__PURE__ */ o("input", { type: "hidden", name: O, value: d }),
-    U && me(
+    W && /* @__PURE__ */ o(
+      Ce,
+      {
+        id: Y,
+        className: l.select__message,
+        message: R,
+        tone: $ ?? "error"
+      }
+    ),
+    A != null && !b && /* @__PURE__ */ o("input", { type: "hidden", name: A, value: d }),
+    K && ye(
       /* @__PURE__ */ o(
         "div",
         {
-          ref: K,
+          ref: L,
           className: [
             l.select__popup,
-            de === "above" ? l["select__popup--above"] : "",
-            ue ? l["select__popup--visible"] : ""
+            _e === "above" ? l["select__popup--above"] : "",
+            he ? l["select__popup--visible"] : ""
           ].filter(Boolean).join(" "),
-          style: pe,
-          children: /* @__PURE__ */ o(Se, { className: l.select__menu, children: /* @__PURE__ */ o(Ve, { maxHeight: fe, children: /* @__PURE__ */ o(
+          style: Ie,
+          children: /* @__PURE__ */ o(Ue, { className: l.select__menu, children: /* @__PURE__ */ o(Ke, { maxHeight: ge, children: /* @__PURE__ */ o(
             "ul",
             {
               id: h,
               className: l.select__list,
               role: "listbox",
-              "aria-label": typeof u == "string" ? u : $ ?? te,
+              "aria-label": typeof u == "string" ? u : B ?? ae,
               children: r.map((e, t) => /* @__PURE__ */ o(
-                je,
+                Qe,
                 {
                   option: e,
                   menuItemProps: N,
                   listboxId: h,
                   selected: e.value === d,
-                  active: t === a,
-                  onSelect: L,
-                  onHover: () => ce(t),
+                  active: t === i,
+                  onSelect: q,
+                  onHover: () => be(t),
                   dividerAfter: e.dividerAfter
                 },
                 e.value
@@ -268,6 +289,6 @@ const Ye = De(function({
   ] });
 });
 export {
-  Ye as default
+  dt as default
 };
 //# sourceMappingURL=Select.js.map