UNPKG

@sap-ux/ui-components

Version:

SAP UI Components Library

SAP/open-ux-tools

87 lines (63 loc) • 30.7 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
(()=>{var L=Object.defineProperty,K=Object.defineProperties;var U=Object.getOwnPropertyDescriptors;var S=Object.getOwnPropertySymbols;var j=Object.prototype.hasOwnProperty,H=Object.prototype.propertyIsEnumerable;var k=(d,a,n)=>a in d?L(d,a,{enumerable:!0,configurable:!0,writable:!0,value:n}):d[a]=n,T=(d,a)=>{for(var n in a||(a={}))j.call(a,n)&&k(d,n,a[n]);if(S)for(var n of S(a))H.call(a,n)&&k(d,n,a[n]);return d},x=(d,a)=>K(d,U(a));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[985],{"../../node_modules/.pnpm/css-loader@7.1.4_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[12].use[1]!../../node_modules/.pnpm/sass-loader@16.0.7_sass-embedded@1.97.3_sass@1.101.0_webpack@5.105.0_@swc+core@1.15.18__732f0ac8c0547d446bff736b53e6fec4/node_modules/sass-loader/dist/cjs.js!./src/components/UITreeDropdown/UITreeDropdown.scss"(d,a,n){var g=n("../../node_modules/.pnpm/css-loader@7.1.4_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/css-loader/dist/runtime/noSourceMaps.js"),l=n("../../node_modules/.pnpm/css-loader@7.1.4_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/css-loader/dist/runtime/api.js"),_=l(g);_.push([d.id,'.ui-treeDropdown{position:relative}.ui-treeDropdown-with-label{margin-top:29px}.ui-treeDropdown-wrapper{position:relative}.ui-treeDropdown-wrapper input{padding:0 26px 0 8px;font-family:var(--vscode-font-family)}.ui-treeDropdown-wrapper.disabled>button{z-index:-1}.ui-treeDropdown-wrapper.readonly>button{pointer-events:none}.ui-treeDropdown-caret{position:absolute;width:24px;height:24px;top:0;right:0;cursor:pointer;box-sizing:border-box}.ui-treeDropdown-caret:hover,.ui-treeDropdown-caret:active,.ui-treeDropdown-caret:focus{background-color:rgba(0,0,0,0)}.ui-treeDropdown label{position:absolute;bottom:26px;margin-top:0 !important;font-family:var(--vscode-font-family);font-size:13px;font-weight:bold;box-sizing:border-box;box-shadow:none;margin-right:0px;margin-bottom:0px;margin-left:0px;display:block;padding:4px 0;overflow-wrap:break-word}.ui-treeDropdown label.required:after{content:" *";color:var(--vscode-inputValidation-errorBorder)}.ui-treeDropdown label.disabled{opacity:.4}',""]),d.exports=_},"./src/components/UITreeDropdown/UITreeDropdown.scss"(d,a,n){"use strict";n.r(a),n.d(a,{default:()=>e});var g=n("../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),l=n.n(g),_=n("../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/styleDomAPI.js"),u=n.n(_),m=n("../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/insertBySelector.js"),c=n.n(m),f=n("../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"),P=n.n(f),O=n("../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/insertStyleElement.js"),I=n.n(O),w=n("../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/styleTagTransform.js"),v=n.n(w),D=n("../../node_modules/.pnpm/css-loader@7.1.4_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[12].use[1]!../../node_modules/.pnpm/sass-loader@16.0.7_sass-embedded@1.97.3_sass@1.101.0_webpack@5.105.0_@swc+core@1.15.18__732f0ac8c0547d446bff736b53e6fec4/node_modules/sass-loader/dist/cjs.js!./src/components/UITreeDropdown/UITreeDropdown.scss"),p=n.n(D),y={};for(const t in D)t!=="default"&&(y[t]=()=>D[t]);n.d(a,y);var h={};h.styleTagTransform=v(),h.setAttributes=P(),h.insert=c().bind(null,"head"),h.domAPI=u(),h.insertStyleElement=I();var b=l()(p(),h);const e=p()&&p().locals?p().locals:void 0},"./src/components/UITreeDropdown/UITreeDropdown.tsx"(d,a,n){"use strict";var g=this&&this.__importDefault||function(p){return p&&p.__esModule?p:{default:p}};Object.defineProperty(a,"__esModule",{value:!0}),a.UITreeDropdown=a.EdgePosition=a.UIDirectionalHint=void 0;const l=g(n("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),_=n("../../node_modules/.pnpm/uuid@11.1.1/node_modules/uuid/dist/cjs-browser/index.js"),u=n("../../node_modules/.pnpm/@fluentui+react@8.125.6_@types+react-dom@16.9.25_@types+react@16.14.69__@types+react@16_03684c25d5c3502754322356d0aa96d9/node_modules/@fluentui/react/lib-commonjs/index.js");Object.defineProperty(a,"UIDirectionalHint",{enumerable:!0,get:function(){return u.DirectionalHint}});const m=n("./src/components/UIInput/index.tsx"),c=n("./src/components/UIContextualMenu/index.tsx"),f=n("./src/components/UIButton/UIIconButton.tsx"),P=n("./src/components/Icons.tsx"),O=n("./src/helper/ValidationMessage/index.tsx");n("./src/components/UITreeDropdown/UITreeDropdown.scss");const I={callout:"ui-tree-callout",scrollArea:"ms-ContextualMenu-container",splitButton:"ms-ContextualMenu-splitMenu"};var w;(function(p){p.First="First",p.Last="Last"})(w||(a.EdgePosition=w={}));const v={ArrowUp:"ArrowUp",ArrowDown:"ArrowDown",Enter:"Enter",Escape:"Escape"};class D extends l.default.Component{constructor(y){var h,b;super(y),this.UITreeDropdownRef=l.default.createRef(),this.UITreeDropdownFocusZoneRef=l.default.createRef(),this.inputRef=l.default.createRef(),this.submenuRefs={},this.submenuOffset=0,this.lastKeyDown="",this.componentDidMount=()=>{this.props.items.length&&(this.buildItems(this.props.items),this.setState({isDisabled:!1}))},this.componentDidUpdate=e=>{this.props.items.length!==e.items.length&&(this.setState({isHidden:!0}),this.setState({isDisabled:!this.props.items.length}),this.buildItems(this.props.items)),this.props.value!==e.value&&this.setState({value:this.props.value}),this.calculateSubmenuOffset()},this.buildItems=e=>{if(this.state.items.length!==e.length){e=e.map(this.buildSubItems);const t=this.mapValuesToContextMenu(e);this.setState({originalItems:t,items:t})}},this.buildSubItems=e=>{var t;return(t=e.children)!=null&&t.length&&(e.children=e.children.map(s=>{const o=new RegExp(e.value,"ig"),i=s.value.search(o)===-1?`${e.value}${this.state.valueSeparator}${s.value}`:s.value;return x(T({},s),{split:!1,value:i})})),e},this.mapValuesToContextMenu=(e,t=0)=>e.map(s=>{var o;if((o=s.children)!=null&&o.length){s.split=!0;const i=this.getRefId(s.value,t);this.submenuRefs[i]||(this.submenuRefs[i]=l.default.createRef()),s.subMenuProps={componentRef:this.submenuRefs[i],items:this.mapValuesToContextMenu(s.children,t+1),focusZoneProps:{handleTabKey:u.FocusZoneTabbableElements.none,onFocus:()=>{var C,M,E,R;const r=(C=this.defaultSubmenuFocus)==null?void 0:C.parent;(r==null?void 0:r.item.value)===s.value&&r.level===t&&this.focusItemWithValue(this.state.value,(R=(E=(M=this.defaultSubmenuFocus)==null?void 0:M.parent)==null?void 0:E.item.subMenuProps)==null?void 0:R.items)}}}}return x(T({},s),{key:s.value,text:s.label,className:"ui-tree-dropdown-list-item",onClick:()=>this.handleSelection(s.value),onRenderContent:this.handleRenderContent})}),this.handleSelection=e=>{this.hasSelected=!0,this.setState({value:e,valueChanged:!1},()=>this.props.onParameterValueChange(e))},this.handleKeyPress=e=>{switch(e.key){case"Enter":this.state.isMenuOpen?(this.setState({valueChanged:!0}),this.handleSelection(this.state.value?this.state.value:"")):this.toggleMenu(!1,e);break;case"ArrowDown":this.state.isMenuOpen?this.focusDropdown(e,e.key):this.toggleMenu(!1,e);break;case"Tab":this.state.isMenuOpen&&this.toggleMenu(!0),this.handleSelection(this.state.value?this.state.value:"");break;default:}this.lastKeyDown=e.key},this.focusDropdown=(e,t)=>{var s;this.UITreeDropdownFocusZoneRef&&(t===v.Enter?this.focusItemWithValue(this.state.value,this.state.items):(s=this.UITreeDropdownFocusZoneRef.current)==null||s.focus(!0),e.preventDefault())},this.handleRenderContent=(e,t)=>(e.item.className=e.item.value===this.props.value?"is-selected":"",e.item.text=this.highlightQuery(e.item.label,this.state.query),this.applySubmenuPosition(e.item),t?t.renderItemName(e):null),this.handleRenderMenuList=(e,t)=>{let s=[];return e!=null&&e.items&&(s=e.items.map(o=>{var i;return o.className=o.value===this.props.value?"is-selected":"",o.text=this.highlightQuery(o.label,this.state.query),this.applySubmenuPosition(o),(i=o.subMenuProps)==null||i.items.map(r=>(r.className=r.value===this.props.value?"is-selected":"",r)),T({},o)})),t?t(x(T({},e),{items:s})):null},this.toggleMenu=(e,t)=>{if(this.props.readOnly)return;this.setState({isHidden:e});const s=t==null?void 0:t.key;t&&setTimeout(()=>{t.persist(),this.focusDropdown(t,s)},0)},this.highlightQuery=(e,t)=>l.default.createElement(c.UIHighlightMenuOption,{text:e,query:t}),this.filterElement=(e,t)=>{var o;const s=new RegExp(e,"ig");return(o=t==null?void 0:t.children)!=null&&o.length?t.children.filter(i=>this.filterElement(e,i)).length>0:t!=null&&t.value?t.value.search(s)!==-1:!1},this.handleOnChangeValue=e=>{const t=e.target;this.hasSelected=!1,this.setState(s=>({value:t.value,items:s.originalItems.filter(o=>this.filterElement(t.value,o)),query:t.value,valueChanged:!0})),this.state.isMenuOpen||this.toggleMenu(!1)},this.handleDismiss=e=>{e&&"key"in e&&e.key===v.Escape?this.resetValue():this.hasSelected||this.props.onParameterValueChange(""),this.setState(t=>({items:t.originalItems,query:""})),this.toggleMenu(!0),this.originalValue=void 0},this.applySubmenuPosition=e=>{var t;(t=e.subMenuProps)!=null&&t.items&&(e.subMenuProps.calloutProps||(e.subMenuProps.calloutProps={}),e.subMenuProps.calloutProps.styles={root:{marginLeft:this.submenuOffset}})},this.getCalloutDomRef=(e=!1)=>{const t=`${I.callout}${this.state.uiidInput}`,s=document.querySelector(`.${t}`);return e&&s?s.nextSibling:s},this.calculateSubmenuOffset=()=>{const e=this.getCalloutDomRef();if(e){const t=e.querySelector(`.${I.scrollArea}`);this.submenuOffset=0,t&&t.scrollHeight>t.clientHeight&&(this.submenuOffset=t.offsetWidth-t.clientWidth)}},this.onFocusElementChanged=e=>{const t=e.getElementsByClassName("ts-Menu-option");document.getElementsByClassName("ms-Fabric--isFocusVisible").length>0&&t.length>0&&this.setState({value:e.value?e.value:t[0].innerText,valueChanged:!0})},this.onWindowKeyDown=e=>{var s;this.lastKeyDown=e.key;const t=document.activeElement;if([v.ArrowDown,v.ArrowUp].includes(e.key)&&t){const o=this.getEdgePosition(t),i=o.includes(w.First)&&e.key===v.ArrowUp,r=o.includes(w.Last)&&e.key===v.ArrowDown;(i||r)&&(i&&t.closest(`.${I.callout}${this.state.uiidInput}`)&&((s=this.inputRef.current)==null||s.focus()),e.stopPropagation(),e.preventDefault())}},this.handleCustomDownKey=e=>{this.lastKeyDown.includes("Arrow")&&(this.lastKeyDown="",this.onFocusElementChanged(e.target))},this.applyCustomKeyDownHandlingEvents=()=>{window.addEventListener("keydown",this.onWindowKeyDown,!0),window.addEventListener("focus",this.handleCustomDownKey,!0)},this.removeCustomKeyDownHandlingEvents=()=>{window.removeEventListener("keydown",this.onWindowKeyDown,!0),window.removeEventListener("focus",this.handleCustomDownKey,!0)},this.getEdgePosition=e=>{const t=e.closest("ul"),s=e.closest("li"),o=[];return t&&s&&(t.children[0]===s&&o.push(w.First),t.children[t.children.length-1]===s&&o.push(w.Last)),o},this.findItemByValue=(e,t=[],s,o=0)=>{var r,C;let i;for(let M=0;M<t.length;M++){const E=t[M],R={item:E,index:M,parent:s,level:o};if(E.value===e?i=R:(C=(r=E.subMenuProps)==null?void 0:r.items)!=null&&C.length&&(i=this.findItemByValue(e,E.subMenuProps.items,R,o+1)),i)break}return i},this.getItemTarget=(e,t)=>{let s;const o=e.querySelector(".ms-ContextualMenu-list");return o!=null&&o.childNodes[t.index]&&(s=o.childNodes[t.index].firstChild),s},this.focusItemWithValue=(e,t=[])=>{const s=this.findItemByValue(e,t),o=this.getCalloutDomRef(!!this.defaultSubmenuFocus);if(this.defaultSubmenuFocus=void 0,s&&o){let i;if(s.parent){const r=this.getItemTarget(o,s.parent);r&&(this.defaultSubmenuFocus=s,r.dispatchEvent(new KeyboardEvent("keydown",{keyCode:39,which:39,bubbles:!0})))}else i=this.getItemTarget(o,s);if(i)i.focus();else{const r=o.querySelector(`.${I.scrollArea}`);r==null||r.focus()}}},this.getRefId=(e,t)=>`${e}__${t}`,this.state={query:"",value:(h=this.props.value)!=null?h:"",isHidden:!0,originalItems:[],items:[],valueSeparator:(b=this.props.valueSeparator)!=null?b:".",uiidInput:(0,_.v4)(),isDisabled:!this.props.items.length,isMenuOpen:!1,valueChanged:!1},this.hasSelected=!!this.props.value,this.toggleMenu=this.toggleMenu.bind(this),this.onWindowKeyDown=this.onWindowKeyDown.bind(this),this.handleCustomDownKey=this.handleCustomDownKey.bind(this),(0,u.setIconOptions)({disableWarnings:!0})}resetValue(){this.setState({value:this.originalValue,valueChanged:!1})}getClassNames(){let y=`ui-treeDropdown-wrapper ui-treeDropdown-wrapper-menu${this.state.isMenuOpen?"-open":"-close"} ui-treeDropdown-wrapper-${this.state.uiidInput}`;return this.state.isDisabled&&(y+=" disabled"),this.props.readOnly&&(y+=" readonly"),y}render(){const y=(0,O.getMessageInfo)(this.props);let h=!0;return this.props.useTargetWidth&&(h=!1),l.default.createElement("div",{className:`ui-treeDropdown ui-treeDropDown-${this.state.uiidInput} ${this.props.label?"ui-treeDropdown-with-label":""}`},this.props.label&&l.default.createElement("label",{className:`${this.props.required?"required":""} ${this.state.isDisabled?"disabled":""}`},this.props.label),l.default.createElement("div",{className:this.getClassNames()},l.default.createElement(m.UITextInput,x(T({},this.props),{componentRef:this.inputRef,disabled:this.state.isDisabled,readOnly:this.props.readOnly,autoComplete:"off",value:this.state.value,placeholder:this.props.placeholderText,onKeyDown:this.handleKeyPress,onChange:this.handleOnChangeValue,onClick:()=>{this.toggleMenu(!1)},onFocus:b=>{b.target.select()},errorMessage:y.message})),l.default.createElement(f.UIIconButton,{tabIndex:-1,allowDisabledFocus:!0,className:"ui-treeDropdown-caret",iconProps:{iconName:P.UiIcons.ArrowDown},onClick:()=>{var b;this.state.isHidden&&((b=this.inputRef.current)==null||b.focus()),this.toggleMenu(!this.state.isHidden)}})),!this.state.isHidden&&l.default.createElement(c.UIContextualMenu,{componentRef:this.UITreeDropdownRef,onRenderMenuList:this.handleRenderMenuList,className:"ui-treeDropDown-context-menu",target:`.ui-treeDropDown-${this.state.uiidInput}`,onMenuOpened:()=>{this.originalValue=this.state.value,this.applyCustomKeyDownHandlingEvents(),this.setState({isMenuOpen:!0})},onMenuDismissed:()=>{this.removeCustomKeyDownHandlingEvents(),this.setState({isMenuOpen:!1}),this.state.valueChanged&&this.handleSelection(this.state.value?this.state.value:"")},useTargetWidth:h,useTargetAsMinWidth:!0,onRestoreFocus:b=>{var e;(e=b.originalElement)==null||e.focus()},shouldUpdateWhenHidden:!0,items:this.state.items,onDismiss:this.handleDismiss,shouldFocusOnContainer:!1,focusZoneProps:{componentRef:this.UITreeDropdownFocusZoneRef,handleTabKey:u.FocusZoneTabbableElements.none,isCircularNavigation:!1},shouldFocusOnMount:!1,directionalHint:this.props.directionalHint,calloutProps:{layerProps:{className:`${I.callout}${this.state.uiidInput}`},onLayerMounted:()=>{this.calculateSubmenuOffset()}},styles:{container:{maxHeight:192,overflowY:"auto"}},maxWidth:this.props.maxWidth}))}}a.UITreeDropdown=D,D.__docgenInfo={description:`UITreeDropdown component. @exports @class UIVerticalDivider @extends {React.Component<UITreeDropdownProps, UITreeDropdownState>}`,methods:[{name:"componentDidMount",docblock:null,modifiers:[],params:[],returns:{type:{name:"void"}}},{name:"componentDidUpdate",docblock:null,modifiers:[],params:[{name:"prevProps",optional:!1,type:{name:"UITreeDropdownProps",alias:"UITreeDropdownProps"}}],returns:{type:{name:"void"}}},{name:"buildItems",docblock:`Map the payload. @param {ItemsProps[]} items`,modifiers:[],params:[{name:"items",type:{name:"Array",elements:[{name:"ItemsProps"}],raw:"ItemsProps[]"},optional:!1}],returns:{type:{name:"void"}},description:"Map the payload."},{name:"buildSubItems",docblock:`Sub items values and style. @param {ItemsProps} item @returns {ItemsProps}`,modifiers:[],params:[{name:"item",type:{name:"ItemsProps",alias:"ItemsProps"},optional:!1}],returns:{type:{name:"ItemsProps"}},description:"Sub items values and style."},{name:"mapValuesToContextMenu",docblock:`Map GD payload to ContextMenu payload. @param {ItemsProps[]} items @param {number} level @returns {IContextualMenuItem[]}`,modifiers:[],params:[{name:"items",type:{name:"Array",elements:[{name:"ItemsProps"}],raw:"ItemsProps[]"},optional:!1},{name:"level",type:{name:"number"},optional:!0}],returns:{type:{name:"Array",elements:[{name:"IContextualMenuItem"}],raw:"IContextualMenuItem[]"}},description:"Map GD payload to ContextMenu payload."},{name:"handleSelection",docblock:`Handle the selected value. @param {string} value`,modifiers:[],params:[{name:"value",type:{name:"string"},optional:!1}],returns:{type:{name:"void"}},description:"Handle the selected value."},{name:"handleKeyPress",docblock:`Handle the keypress value. @param {React.KeyboardEvent<HTMLInputElement>} event`,modifiers:[],params:[{name:"event",type:{name:"ReactKeyboardEvent",raw:"React.KeyboardEvent<HTMLInputElement>",elements:[{name:"HTMLInputElement"}],alias:"React.KeyboardEvent"},optional:!1}],returns:{type:{name:"void"}},description:"Handle the keypress value."},{name:"focusDropdown",docblock:`Handle ContextMenu focus. @param {React.KeyboardEvent<HTMLInputElement>} event @param {string} key`,modifiers:[],params:[{name:"event",type:{name:"ReactKeyboardEvent",raw:"React.KeyboardEvent<HTMLInputElement>",elements:[{name:"HTMLInputElement"}],alias:"React.KeyboardEvent"},optional:!1},{name:"key",type:{name:"string"},optional:!0}],returns:null,description:"Handle ContextMenu focus."},{name:"handleRenderContent",docblock:`Custom handle the render from subMenu to control the highlight and the .is-selected. @param {IContextualMenuListProps} props @param {IContextualMenuItemRenderFunctions} defaultRenders @returns { React.ReactNode | null}`,modifiers:[],params:[{name:"props",type:{name:"IContextualMenuItemProps",alias:"IContextualMenuItemProps"},optional:!1},{name:"defaultRenders",type:{name:"IContextualMenuItemRenderFunctions",alias:"IContextualMenuItemRenderFunctions"},optional:!1}],returns:{type:{name:"union",raw:"React.ReactNode | null",elements:[{name:"ReactReactNode",raw:"React.ReactNode"},{name:"null"}]}},description:"Custom handle the render from subMenu to control the highlight and the .is-selected."},{name:"handleRenderMenuList",docblock:`Custom handle the render to control the highlight and the .is-selected. @param {IContextualMenuListProps} props @param {IRenderFunction<IContextualMenuListProps>} defaultRender @returns {JSX.Element | null}`,modifiers:[],params:[{name:"props",type:{name:"IContextualMenuListProps",alias:"IContextualMenuListProps"},optional:!0},{name:"defaultRender",type:{name:"IRenderFunction",elements:[{name:"IContextualMenuListProps"}],raw:"IRenderFunction<IContextualMenuListProps>",alias:"IRenderFunction"},optional:!0}],returns:{type:{name:"union",raw:"JSX.Element | null",elements:[{name:"JSX.Element"},{name:"null"}]}},description:"Custom handle the render to control the highlight and the .is-selected."},{name:"toggleMenu",docblock:`Handle on/off ContextualMenu. @param {boolean} status @param {React.KeyboardEvent<HTMLInputElement>} event`,modifiers:[],params:[{name:"status",type:{name:"boolean"},optional:!1},{name:"event",type:{name:"ReactKeyboardEvent",raw:"React.KeyboardEvent<HTMLInputElement>",elements:[{name:"HTMLInputElement"}],alias:"React.KeyboardEvent"},optional:!0}],returns:{type:{name:"void"}},description:"Handle on/off ContextualMenu."},{name:"highlightQuery",docblock:`Highlight the search string. @param {string} text @param {string} query @returns {JSX.Element}`,modifiers:[],params:[{name:"text",type:{name:"string"},optional:!1},{name:"query",type:{name:"string"},optional:!1}],returns:{type:{name:"JSX.Element"}},description:"Highlight the search string."},{name:"filterElement",docblock:`Filter all options that match the query string. @param {string} input @param {IContextualMenuItem} item @returns {boolean}`,modifiers:[],params:[{name:"input",type:{name:"string"},optional:!1},{name:"item",type:{name:"IContextualMenuItem",alias:"IContextualMenuItem"},optional:!1}],returns:{type:{name:"boolean"}},description:"Filter all options that match the query string."},{name:"handleOnChangeValue",docblock:`Update the query string and the prop value. @param {React.FormEvent<HTMLInputElement | HTMLTextAreaElement>} event`,modifiers:[],params:[{name:"event",type:{name:"ReactFormEvent",raw:"React.FormEvent<HTMLInputElement | HTMLTextAreaElement>",elements:[{name:"union",raw:"HTMLInputElement | HTMLTextAreaElement",elements:[{name:"HTMLInputElement"},{name:"HTMLTextAreaElement"}]}],alias:"React.FormEvent"},optional:!1}],returns:{type:{name:"void"}},description:"Update the query string and the prop value."},{name:"resetValue",docblock:"Method resets value of dropdown input to original value, which was stored after open.",modifiers:[],params:[],returns:{type:{name:"void"}},description:"Method resets value of dropdown input to original value, which was stored after open."},{name:"handleDismiss",docblock:`Method reset states. @param {Event | React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent} event`,modifiers:[],params:[{name:"event",type:{name:"union",raw:"Event | React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent",elements:[{name:"Event"},{name:"ReactMouseEvent",raw:"React.MouseEvent<Element, MouseEvent>",elements:[{name:"Element"},{name:"MouseEvent"}]},{name:"ReactKeyboardEvent",raw:"React.KeyboardEvent"}]},optional:!0}],returns:{type:{name:"void"}},description:"Method reset states."},{name:"applySubmenuPosition",docblock:`Method applies additional styling for submnu callout. It is used to apply scroll width offset - in result submenu should be displayed on the edge of root menu. @param {IContextualMenuItem} item Context menu item.`,modifiers:[],params:[{name:"item",description:"Context menu item.",type:{name:"IContextualMenuItem",alias:"IContextualMenuItem"},optional:!1}],returns:{type:{name:"void"}},description:`Method applies additional styling for submnu callout. It is used to apply scroll width offset - in result submenu should be displayed on the edge of root menu.`},{name:"getCalloutDomRef",docblock:null,modifiers:[],params:[{name:"submenu",optional:!0,type:null}],returns:{type:{name:"union",raw:"HTMLDivElement | null",elements:[{name:"HTMLDivElement"},{name:"null"}]}}},{name:"calculateSubmenuOffset",docblock:`Method calculates offset size for submenus. Calculated offset should be used to position submenu right to edge of root menu. - Detects if scrollbar exists. - Calculates size of scrollbar and stores it as value for offset.`,modifiers:[],params:[],returns:{type:{name:"void"}},description:`Method calculates offset size for submenus. Calculated offset should be used to position submenu right to edge of root menu. - Detects if scrollbar exists. - Calculates size of scrollbar and stores it as value for offset.`},{name:"onFocusElementChanged",docblock:`Method updates state, if focus visible, using arrow keys. @param {HTMLElement|React.FocusEvent<HTMLElement>} ev`,modifiers:[],params:[{name:"ev",type:{name:"any"},optional:!1}],returns:{type:{name:"void"}},description:"Method updates state, if focus visible, using arrow keys."},{name:"onWindowKeyDown",docblock:`Method handles window keydown event. 1. Stores last keyboard pressed event. 2. Disables CircularNavigation for menus. @param {KeyboardEvent | React.KeyboardEvent<HTMLInputElement>} event`,modifiers:[],params:[{name:"event",type:{name:"union",raw:"KeyboardEvent | React.KeyboardEvent<HTMLInputElement>",elements:[{name:"KeyboardEvent"},{name:"ReactKeyboardEvent",raw:"React.KeyboardEvent<HTMLInputElement>",elements:[{name:"HTMLInputElement"}]}]},optional:!1}],returns:null,description:`Method handles window keydown event. 1. Stores last keyboard pressed event. 2. Disables CircularNavigation for menus.`},{name:"handleCustomDownKey",docblock:`Method handles focus logic if arrow key was pressed. @param {FocusEvent} event`,modifiers:[],params:[{name:"event",type:{name:"FocusEvent",alias:"FocusEvent"},optional:!1}],returns:null,description:"Method handles focus logic if arrow key was pressed."},{name:"applyCustomKeyDownHandlingEvents",docblock:"Method appends custom keydown and focus event listeners when context menu is opened.",modifiers:[],params:[],returns:null,description:"Method appends custom keydown and focus event listeners when context menu is opened."},{name:"removeCustomKeyDownHandlingEvents",docblock:"Method removes custom keydown and focus event listeners when context menu is dismissed.",modifiers:[],params:[],returns:null,description:"Method removes custom keydown and focus event listeners when context menu is dismissed."},{name:"getEdgePosition",docblock:`Method receives any menu child element and returns edge positions if item is first or last in rendered menu. @param {Element} itemElement Item's DOM to check position. @returns {EdgePosition[]} Returns positions if element is first or last in menu - also can be both.`,modifiers:[],params:[{name:"itemElement",description:"Item's DOM to check position.",type:{name:"Element",alias:"Element"},optional:!1}],returns:{description:"Returns positions if element is first or last in menu - also can be both.",type:{name:"Array",elements:[{name:"EdgePosition"}],raw:"EdgePosition[]"}},description:"Method receives any menu child element and returns edge positions if item is first or last in rendered menu."},{name:"findItemByValue",docblock:`Recursive method finds menu item info object in tree menu items by passed value/key of item. @param {string} [value] Value/key of item. @param {IContextualMenuItem[]} [items] Menu items. @param {TreeItemInfo} [parent] Item's parent object. @param {number} [level] Level of item in tree structure. @returns {TreeItemInfo | undefined} Found menu item.`,modifiers:[],params:[{name:"value",optional:!0,type:{name:"string"}},{name:"items",optional:!0},{name:"parent",optional:!0,type:{name:"TreeItemInfo",alias:"TreeItemInfo"}},{name:"level",optional:!0}],returns:{type:{name:"union",raw:"TreeItemInfo | undefined",elements:[{name:"TreeItemInfo"},{name:"undefined"}]}},description:"Recursive method finds menu item info object in tree menu items by passed value/key of item."},{name:"getItemTarget",docblock:`Method finds DOM node of menu item based on received item object and container DOM. @param {HTMLElement} container Menu container DOM. @param {TreeItemInfo} item Menu item info object. @returns {HTMLElement | undefined} Found DOM element of item.`,modifiers:[],params:[{name:"container",description:"Menu container DOM.",type:{name:"HTMLElement",alias:"HTMLElement"},optional:!1},{name:"item",description:"Menu item info object.",type:{name:"TreeItemInfo",alias:"TreeItemInfo"},optional:!1}],returns:{description:"Found DOM element of item.",type:{name:"union",raw:"HTMLElement | undefined",elements:[{name:"HTMLElement"},{name:"undefined"}]}},description:"Method finds DOM node of menu item based on received item object and container DOM."},{name:"focusItemWithValue",docblock:`Method focuses context menu item based on recieved value/key and menude data(items and hoisted object). Method works with any level menu. @param {string} [value] Value/key of item. @param {IContextualMenuItem[]} [items] Target menu items.`,modifiers:[],params:[{name:"value",optional:!0,type:{name:"string"}},{name:"items",optional:!0}],returns:{type:{name:"void"}},description:`Method focuses context menu item based on recieved value/key and menude data(items and hoisted object). Method works with any level menu.`},{name:"getRefId",docblock:`Generate unique id for menu component references. @param {string} value Value of item. @param {number} level Level of item in tree structure. @returns {string} Id containing value andf level in format "\${value}__\${level}".`,modifiers:[],params:[{name:"value",description:"Value of item.",type:{name:"string"},optional:!1},{name:"level",description:"Level of item in tree structure.",type:{name:"number"},optional:!1}],returns:{description:'Id containing value andf level in format "${value}__${level}".',type:{name:"string"}},description:"Generate unique id for menu component references."}],displayName:"UITreeDropdown",props:{warningMessage:{required:!1,tsType:{name:"string"},description:""},infoMessage:{required:!1,tsType:{name:"string"},description:""},label:{required:!1,tsType:{name:"string"},description:""},disabled:{required:!1,tsType:{name:"boolean"},description:""},required:{required:!1,tsType:{name:"boolean"},description:""},value:{required:!1,tsType:{name:"string"},description:""},items:{required:!0,tsType:{name:"Array",elements:[{name:"ItemsProps"}],raw:"ItemsProps[]"},description:""},placeholderText:{required:!0,tsType:{name:"string"},description:""},valueSeparator:{required:!1,tsType:{name:"string"},description:""},directionalHint:{required:!1,tsType:{name:"DirectionalHint"},description:""},maxWidth:{required:!1,tsType:{name:"number"},description:""},useTargetWidth:{required:!1,tsType:{name:"string"},description:""},errorMessage:{required:!1,tsType:{name:"string"},description:""},readOnly:{required:!1,tsType:{name:"boolean"},description:""}}}},"./src/components/UITreeDropdown/index.tsx"(d,a,n){"use strict";var g=this&&this.__createBinding||(Object.create?(function(_,u,m,c){c===void 0&&(c=m);var f=Object.getOwnPropertyDescriptor(u,m);(!f||("get"in f?!u.__esModule:f.writable||f.configurable))&&(f={enumerable:!0,get:function(){return u[m]}}),Object.defineProperty(_,c,f)}):(function(_,u,m,c){c===void 0&&(c=m),_[c]=u[m]})),l=this&&this.__exportStar||function(_,u){for(var m in _)m!=="default"&&!Object.prototype.hasOwnProperty.call(u,m)&&g(u,_,m)};Object.defineProperty(a,"__esModule",{value:!0}),l(n("./src/components/UITreeDropdown/UITreeDropdown.tsx"),a)}}]);})();