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

React components for building web UI in Azure DevOps

import{__assign,__extends}from"tslib";import"../../CommonImports";import"../../Core/core.css";import*as React from"react";import{FocusGroupContext}from"../../FocusGroup";import{FocusZoneContext}from"../../FocusZone";import{MouseWithin}from"../../MouseWithin";import{css,getSafeId,KeyCode,setFocusVisible}from"../../Util";import{getTabIndex}from"../../Utilities/Focus";var Expandable=function(e){function n(){var n=null!==e&&e.apply(this,arguments)||this;return n.state={expanded:!1},n.collapse=function(){n.state.expanded&&(n.setState({expanded:!1}),n.props.onCollapse)&&n.props.onCollapse()},n.expand=function(){n.state.expanded||(n.setState({expanded:!n.state.expanded}),n.props.onExpand&&n.props.onExpand())},n.onClick=function(e){n.props.disabled?e.preventDefault():e.defaultPrevented||n.state.expanded||n.ignoreClick||(n.expand(),e.preventDefault())},n.onKeyDown=function(e){e.defaultPrevented||e.ctrlKey||!n.state.expanded&&n.isExpandKey(e)&&(n.ignoreClick=!1,n.expand(),e.preventDefault())},n.onMouseDown=function(){n.ignoreClick=n.state.expanded},n}return __extends(n,e),n.prototype.render=function(){var e=this.state.expanded,n=this.props.children;return React.createElement(React.Fragment,null,n({expanded:e,onClick:this.onClick,onKeyDown:this.onKeyDown,onMouseDown:this.onMouseDown}),e&&this.props.renderCallout&&this.props.renderCallout())},n.prototype.isExpandKey=function(e){return Array.isArray(this.props.expandKey)&&-1!==this.props.expandKey.indexOf(e.which)||e.which===this.props.expandKey},n.defaultProps={expandKey:KeyCode.downArrow},n}(React.Component),expandableContainerId=1,ExpandableContainer=function(e){function n(){var n=null!==e&&e.apply(this,arguments)||this;return n.element=React.createRef(),n.expandedOnHover=!1,n.expandable=React.createRef(),n.expandableId="expandableContainer-"+expandableContainerId++,n.collapse=function(){n.expandable.current&&n.expandable.current.collapse()},n.expand=function(){n.expandable.current&&n.expandable.current.expand()},n.onFocus=function(e){!n.props.id||n.element.current&&n.element.current!==e.target||n.context.onFocus(n.props.id)},n.onMouseEnter=function(){n.props.expandOnHover&&(n.expandedOnHover=!0,setFocusVisible(!1),n.expand())},n.onMouseLeave=function(){n.expandedOnHover&&n.collapse()},n.renderCallout=function(){return n.props.renderCallout(n.expandable.current,n.expandableId,n.element.current)},n}return __extends(n,e),n.prototype.render=function(){var t=this;return React.createElement(FocusZoneContext.Consumer,null,function(o){return React.createElement(MouseWithin,{enterDelay:t.props.expandDelay,leaveDelay:t.props.collapseDelay,onMouseEnter:t.onMouseEnter,onMouseLeave:t.onMouseLeave,updateStateOnMouseChange:!1},function(n){return React.createElement(Expandable,__assign({},t.props,{renderCallout:void 0,ref:t.expandable}),function(e){return React.createElement("div",{"aria-controls":e.expanded?getSafeId(t.props.expandableId):void 0,"aria-expanded":e.expanded,"aria-haspopup":!0,"aria-label":t.props.ariaLabel,className:css(t.props.className,"bolt-expandable-container flex-row flex-center",e.expanded&&"expanded"),"data-focuszone":t.props.disabled||t.props.excludeFocusZone?void 0:o.focuszoneId,id:getSafeId(t.props.id),onClick:e.onClick,onFocus:t.onFocus,onKeyDown:e.onKeyDown,onMouseDown:e.onMouseDown,onMouseEnter:n.onMouseEnter,onMouseLeave:n.onMouseLeave,role:t.props.role||"button",tabIndex:getTabIndex(t.props,t.context),ref:t.element},t.props.children,e.expanded&&t.renderCallout())})})})},n.contextType=FocusGroupContext,n.defaultProps={collapseDelay:250,expandDelay:250,expandKey:[KeyCode.downArrow,KeyCode.enter]},n}(React.Component);export{Expandable,ExpandableContainer};