azure-devops-ui/Components/ExpandableTextField/ExpandableTextField.min.js

React components for building web UI in Azure DevOps

import{__assign,__extends}from"tslib";import"../../CommonImports";import"../../Core/core.css";import"./ExpandableTextField.css";import*as React from"react";import{Expandable}from"../../Expandable";import{FocusWithin}from"../../FocusWithin";import{IconSize}from"../../Icon";import{TextField}from"../../TextField";import{css,KeyCode}from"../../Util";import{Location}from"../../Utilities/Position";var textFieldId=1,ExpandableTextField=function(n){function e(e){var o=n.call(this,e)||this;return o.textFieldElement=React.createRef(),o.expandable=React.createRef(),o.collapse=function(){o.expandable.current&&o.expandable.current.collapse()},o.expand=function(){o.expandable.current&&o.expandable.current.expand()},o.renderCallout=function(){return o.props.renderCallout(o,o.dropdownId,o.props.anchorElement||!o.props.anchorPoint&&o.containerElement.current||void 0,o.props.anchorOffset||{horizontal:0,vertical:0},o.props.anchorOrigin||{horizontal:Location.end,vertical:Location.end},o.props.anchorPoint,o.props.dropdownOrigin||{horizontal:Location.end,vertical:Location.start})},o.dropdownId=e.dropdownId||"dropdown-"+textFieldId++,o.containerElement=e.containerRef||React.createRef(),o}return __extends(e,n),e.prototype.render=function(){var n=this;return React.createElement(Expandable,{disabled:this.props.disabled,expandKey:this.props.expandKey,onCollapse:this.props.onCollapse,onExpand:this.props.onExpand,renderCallout:this.renderCallout,ref:this.expandable},function(e){return React.createElement(FocusWithin,{onFocus:n.props.onFocus,onBlur:n.props.onBlur},function(o){return React.createElement("div",{className:css(n.props.className,"bolt-expandable-textfield"),onBlur:function(){n.props.blurDismiss&&n.collapse(),o.onBlur&&o.onBlur()},onFocus:function(e){o.onFocus&&o.onFocus(e),e.target===n.containerElement.current&&n.focus()},onMouseDown:e.onMouseDown,onKeyDown:e.onKeyDown,ref:n.containerElement,tabIndex:-1,role:n.props.role},React.createElement(TextField,__assign({ariaHasPopup:"dialog"},n.props,{ariaActiveDescendant:e.expanded?n.props.ariaActiveDescendant:void 0,role:n.props.editable?"combobox":void 0,ariaExpanded:e.expanded,ariaControls:e.expanded?n.dropdownId:void 0,className:"",onClick:e.onClick,ref:n.textFieldElement,suffixIconProps:n.props.hideDropdownIcon?void 0:{key:"dropdown-icon",className:css("bolt-expandable-textfield-icon icon-right",n.props.disabled&&"disabled"),iconName:"ChevronDownMed",onClick:e.onClick,size:IconSize.small}})))})})},e.prototype.focus=function(){this.textFieldElement.current&&this.textFieldElement.current.focus()},e.prototype.select=function(){this.textFieldElement.current&&this.textFieldElement.current.select()},e.defaultProps={expandKey:[KeyCode.downArrow,KeyCode.enter]},e}(React.Component);export{ExpandableTextField};