| 136 | }, [isVisible, wasVisible]); |
| 137 | |
| 138 | const renderButton = () => ( |
| 139 | <Button |
| 140 | type="button" |
| 141 | ref={triggerRef} |
| 142 | variant={buttonVariant} |
| 143 | size={buttonSize} |
| 144 | disabled={disabled} |
| 145 | className={classNames( |
| 146 | 'group flex items-center font-normal text-text-secondary typo-body hover:bg-surface-hover hover:text-text-primary', |
| 147 | // `!pl-4 !pr-2.5` overrides the Button's built-in Large padding (px-6) |
| 148 | // so the value lines up with the other fields' 16px text inset and the |
| 149 | // chevron sits tight to the right edge instead of floating 24px in. |
| 150 | // Icon-only triggers have no label/chevron, so this value-field padding |
| 151 | // would only push the icon off-center — skip it and let the consumer |
| 152 | // size the square button. |
| 153 | iconOnly ? 'justify-center' : 'w-full !pl-4 !pr-2.5', |
| 154 | className?.button, |
| 155 | )} |
| 156 | onClick={fullScreen ? handleMenuTrigger : undefined} |
| 157 | onKeyDown={handleKeyboard} |
| 158 | tabIndex={0} |
| 159 | aria-label={buttonAriaLabel} |
| 160 | aria-haspopup="true" |
| 161 | aria-expanded={isVisible} |
| 162 | aria-controls={(() => { |
| 163 | if (!isVisible) { |
| 164 | return undefined; |
| 165 | } |
| 166 | return fullScreen ? id : `${id}-content`; |
| 167 | })()} |
| 168 | icon={ |
| 169 | icon |
| 170 | ? React.cloneElement(icon as ReactElement<IconProps>, { |
| 171 | 'aria-hidden': true, |
| 172 | role: 'presentation', |
| 173 | secondary: |
| 174 | (icon as ReactElement<IconProps>).props.secondary ?? isVisible, |
| 175 | }) |
| 176 | : undefined |
| 177 | } |
| 178 | > |
| 179 | {iconOnly ? null : ( |
| 180 | <> |
| 181 | <span |
| 182 | className={classNames('mr-2 flex flex-1 truncate', className.label)} |
| 183 | > |
| 184 | {selectedIndex >= 0 ? options[selectedIndex] : placeholder} |
| 185 | </span> |
| 186 | <ArrowIcon |
| 187 | size={IconSize.Size16} |
| 188 | className={classNames( |
| 189 | 'ml-auto shrink-0 text-text-quaternary transition-transform group-hover:text-text-primary', |
| 190 | isVisible ? 'rotate-0' : 'rotate-180', |
| 191 | styles.chevron, |
| 192 | className.chevron, |
| 193 | )} |
| 194 | /> |
| 195 | </> |