@sap-ux/ui-components 2.1.12 → 2.1.14
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.
- package/dist/components/UIToolbar/UIToolbar.scss +2 -2
- package/package.json +2 -2
- package/storybook/{278.2c1341d0.iframe.bundle.js → 278.15cca4c4.iframe.bundle.js} +1 -1
- package/storybook/300.d2cd1218.iframe.bundle.js +7 -0
- package/storybook/{303.27ab8dbf.iframe.bundle.js → 303.99f69b0a.iframe.bundle.js} +27 -27
- package/storybook/{866.9a678573.iframe.bundle.js → 847.c596d8f5.iframe.bundle.js} +2 -2
- package/storybook/{UITooltip-story.8a47915d.iframe.bundle.js → UITooltip-story.1b5925c0.iframe.bundle.js} +1 -1
- package/storybook/iframe.html +2 -2
- package/storybook/{main.f1843cbf.iframe.bundle.js → main.817cdb36.iframe.bundle.js} +1 -1
- package/storybook/project.json +1 -1
- package/storybook/{runtime~main.89387f54.iframe.bundle.js → runtime~main.cc402522.iframe.bundle.js} +1 -1
- package/storybook/401.ca3cbdba.iframe.bundle.js +0 -7
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
&__content {
|
|
13
|
-
border-bottom: 1px solid var(--vscode-contrastBorder, var(--vscode-
|
|
13
|
+
border-bottom: 1px solid var(--vscode-contrastBorder, var(--vscode-widget-border));
|
|
14
14
|
background-color: var(--vscode-editor-background);
|
|
15
15
|
display: flex;
|
|
16
16
|
flex-wrap: wrap;
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
display: inline-block;
|
|
22
22
|
height: 20px;
|
|
23
23
|
margin: 3px 10px 3px;
|
|
24
|
-
border-right: 1px solid var(--vscode-contrastBorder, var(--vscode-
|
|
24
|
+
border-right: 1px solid var(--vscode-contrastBorder, var(--vscode-widget-border));
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
&__column {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sap-ux/ui-components",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.14",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"description": "SAP UI Components Library",
|
|
6
6
|
"repository": {
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"react-select": "5.10.2",
|
|
25
25
|
"react-virtualized": "9.22.6",
|
|
26
26
|
"sanitize-html": "2.17.3",
|
|
27
|
-
"uuid": "11.1.
|
|
27
|
+
"uuid": "11.1.1"
|
|
28
28
|
},
|
|
29
29
|
"peerDependencies": {
|
|
30
30
|
"react": ">=16.14.0",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(()=>{var A=Object.defineProperty,j=Object.defineProperties;var K=Object.getOwnPropertyDescriptors;var U=Object.getOwnPropertySymbols;var W=Object.prototype.hasOwnProperty,B=Object.prototype.propertyIsEnumerable;var x=(a,_,o)=>_ in a?A(a,_,{enumerable:!0,configurable:!0,writable:!0,value:o}):a[_]=o,M=(a,_)=>{for(var o in _||(_={}))W.call(_,o)&&x(a,o,_[o]);if(U)for(var o of U(_))B.call(_,o)&&x(a,o,_[o]);return a},T=(a,_)=>j(a,K(_));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[278],{"../../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_/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[11].use[1]!../../node_modules/.pnpm/sass-loader@16.0.7_sass-embedded@1.97.3_sass@1.98.0_webpack@5.105.0_@swc+core@1.15.18_@_31ae7bffeec4c4c96330dc3ad7603369/node_modules/sass-loader/dist/cjs.js!./src/components/UITreeDropdown/UITreeDropdown.scss"(a,_,o){var D=o("../../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_/node_modules/css-loader/dist/runtime/noSourceMaps.js"),r=o("../../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_/node_modules/css-loader/dist/runtime/api.js"),c=r(D);c.push([a.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}',""]),a.exports=c},"./src/components/UITreeDropdown/UITreeDropdown.scss"(a,_,o){"use strict";o.r(_),o.d(_,{default:()=>e});var D=o("../../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_/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),r=o.n(D),c=o("../../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_/node_modules/style-loader/dist/runtime/styleDomAPI.js"),u=o.n(c),d=o("../../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_/node_modules/style-loader/dist/runtime/insertBySelector.js"),p=o.n(d),f=o("../../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_/node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"),S=o.n(f),R=o("../../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_/node_modules/style-loader/dist/runtime/insertStyleElement.js"),I=o.n(R),g=o("../../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_/node_modules/style-loader/dist/runtime/styleTagTransform.js"),y=o.n(g),C=o("../../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_/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[11].use[1]!../../node_modules/.pnpm/sass-loader@16.0.7_sass-embedded@1.97.3_sass@1.98.0_webpack@5.105.0_@swc+core@1.15.18_@_31ae7bffeec4c4c96330dc3ad7603369/node_modules/sass-loader/dist/cjs.js!./src/components/UITreeDropdown/UITreeDropdown.scss"),h=o.n(C),w={};for(const s in C)s!=="default"&&(w[s]=()=>C[s]);o.d(_,w);var m={};m.styleTagTransform=y(),m.setAttributes=S(),m.insert=p().bind(null,"head"),m.domAPI=u(),m.insertStyleElement=I();var b=r()(h(),m);const e=h()&&h().locals?h().locals:void 0},"./src/components/UITreeDropdown/UITreeDropdown.tsx"(a,_,o){"use strict";var D=this&&this.__importDefault||function(h){return h&&h.__esModule?h:{default:h}};Object.defineProperty(_,"__esModule",{value:!0}),_.UITreeDropdown=_.EdgePosition=_.UIDirectionalHint=void 0;const r=D(o("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),c=o("../../node_modules/.pnpm/uuid@11.1.0/node_modules/uuid/dist/cjs-browser/index.js"),u=o("../../node_modules/.pnpm/@fluentui+react@8.125.5_@types+react-dom@16.9.25_@types+react@16.14.69__@types+react@16_64874192b7cfaa3fe7ac389bc8c185b1/node_modules/@fluentui/react/lib-commonjs/index.js");Object.defineProperty(_,"UIDirectionalHint",{enumerable:!0,get:function(){return u.DirectionalHint}});const d=o("./src/components/UIInput/index.tsx"),p=o("./src/components/UIContextualMenu/index.tsx"),f=o("./src/components/UIButton/UIIconButton.tsx"),S=o("./src/components/Icons.tsx"),R=o("./src/helper/ValidationMessage/index.tsx");o("./src/components/UITreeDropdown/UITreeDropdown.scss");const I={callout:"ui-tree-callout",scrollArea:"ms-ContextualMenu-container",splitButton:"ms-ContextualMenu-splitMenu"};var g;(function(h){h.First="First",h.Last="Last"})(g||(_.EdgePosition=g={}));const y={ArrowUp:"ArrowUp",ArrowDown:"ArrowDown",Enter:"Enter",Escape:"Escape"};class C extends r.default.Component{constructor(w){var m,b;super(w),this.UITreeDropdownRef=r.default.createRef(),this.UITreeDropdownFocusZoneRef=r.default.createRef(),this.inputRef=r.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 s=this.mapValuesToContextMenu(e);this.setState({originalItems:s,items:s})}},this.buildSubItems=e=>{var s;return(s=e.children)!=null&&s.length&&(e.children=e.children.map(t=>{const n=new RegExp(e.value,"ig"),i=t.value.search(n)===-1?`${e.value}${this.state.valueSeparator}${t.value}`:t.value;return T(M({},t),{split:!1,value:i})})),e},this.mapValuesToContextMenu=(e,s=0)=>e.map(t=>{var n;if((n=t.children)!=null&&n.length){t.split=!0;const i=this.getRefId(t.value,s);this.submenuRefs[i]||(this.submenuRefs[i]=r.default.createRef()),t.subMenuProps={componentRef:this.submenuRefs[i],items:this.mapValuesToContextMenu(t.children,s+1),focusZoneProps:{handleTabKey:u.FocusZoneTabbableElements.none,onFocus:()=>{var O,E,v,P;const l=(O=this.defaultSubmenuFocus)==null?void 0:O.parent;(l==null?void 0:l.item.value)===t.value&&l.level===s&&this.focusItemWithValue(this.state.value,(P=(v=(E=this.defaultSubmenuFocus)==null?void 0:E.parent)==null?void 0:v.item.subMenuProps)==null?void 0:P.items)}}}}return T(M({},t),{key:t.value,text:t.label,className:"ui-tree-dropdown-list-item",onClick:()=>this.handleSelection(t.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,s)=>{var t;this.UITreeDropdownFocusZoneRef&&(s===y.Enter?this.focusItemWithValue(this.state.value,this.state.items):(t=this.UITreeDropdownFocusZoneRef.current)==null||t.focus(!0),e.preventDefault())},this.handleRenderContent=(e,s)=>(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),s?s.renderItemName(e):null),this.handleRenderMenuList=(e,s)=>{let t=[];return e!=null&&e.items&&(t=e.items.map(n=>{var i;return n.className=n.value===this.props.value?"is-selected":"",n.text=this.highlightQuery(n.label,this.state.query),this.applySubmenuPosition(n),(i=n.subMenuProps)==null||i.items.map(l=>(l.className=l.value===this.props.value?"is-selected":"",l)),M({},n)})),s?s(T(M({},e),{items:t})):null},this.toggleMenu=(e,s)=>{if(this.props.readOnly)return;this.setState({isHidden:e});const t=s==null?void 0:s.key;s&&setTimeout(()=>{s.persist(),this.focusDropdown(s,t)},0)},this.highlightQuery=(e,s)=>r.default.createElement(p.UIHighlightMenuOption,{text:e,query:s}),this.filterElement=(e,s)=>{var n;const t=new RegExp(e,"ig");return(n=s==null?void 0:s.children)!=null&&n.length?s.children.filter(i=>this.filterElement(e,i)).length>0:s!=null&&s.value?s.value.search(t)!==-1:!1},this.handleOnChangeValue=e=>{const s=e.target;this.hasSelected=!1,this.setState(t=>({value:s.value,items:t.originalItems.filter(n=>this.filterElement(s.value,n)),query:s.value,valueChanged:!0})),this.state.isMenuOpen||this.toggleMenu(!1)},this.handleDismiss=e=>{e&&"key"in e&&e.key===y.Escape?this.resetValue():this.hasSelected||this.props.onParameterValueChange(""),this.setState(s=>({items:s.originalItems,query:""})),this.toggleMenu(!0),this.originalValue=void 0},this.applySubmenuPosition=e=>{var s;(s=e.subMenuProps)!=null&&s.items&&(e.subMenuProps.calloutProps||(e.subMenuProps.calloutProps={}),e.subMenuProps.calloutProps.styles={root:{marginLeft:this.submenuOffset}})},this.getCalloutDomRef=(e=!1)=>{const s=`${I.callout}${this.state.uiidInput}`,t=document.querySelector(`.${s}`);return e&&t?t.nextSibling:t},this.calculateSubmenuOffset=()=>{const e=this.getCalloutDomRef();if(e){const s=e.querySelector(`.${I.scrollArea}`);this.submenuOffset=0,s&&s.scrollHeight>s.clientHeight&&(this.submenuOffset=s.offsetWidth-s.clientWidth)}},this.onFocusElementChanged=e=>{const s=e.getElementsByClassName("ts-Menu-option");document.getElementsByClassName("ms-Fabric--isFocusVisible").length>0&&s.length>0&&this.setState({value:e.value?e.value:s[0].innerText,valueChanged:!0})},this.onWindowKeyDown=e=>{var t;this.lastKeyDown=e.key;const s=document.activeElement;if([y.ArrowDown,y.ArrowUp].includes(e.key)&&s){const n=this.getEdgePosition(s),i=n.includes(g.First)&&e.key===y.ArrowUp,l=n.includes(g.Last)&&e.key===y.ArrowDown;(i||l)&&(i&&s.closest(`.${I.callout}${this.state.uiidInput}`)&&((t=this.inputRef.current)==null||t.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 s=e.closest("ul"),t=e.closest("li"),n=[];return s&&t&&(s.children[0]===t&&n.push(g.First),s.children[s.children.length-1]===t&&n.push(g.Last)),n},this.findItemByValue=(e,s=[],t,n=0)=>{var l,O;let i;for(let E=0;E<s.length;E++){const v=s[E],P={item:v,index:E,parent:t,level:n};if(v.value===e?i=P:(O=(l=v.subMenuProps)==null?void 0:l.items)!=null&&O.length&&(i=this.findItemByValue(e,v.subMenuProps.items,P,n+1)),i)break}return i},this.getItemTarget=(e,s)=>{let t;const n=e.querySelector(".ms-ContextualMenu-list");return n!=null&&n.childNodes[s.index]&&(t=n.childNodes[s.index].firstChild),t},this.focusItemWithValue=(e,s=[])=>{const t=this.findItemByValue(e,s),n=this.getCalloutDomRef(!!this.defaultSubmenuFocus);if(this.defaultSubmenuFocus=void 0,t&&n){let i;if(t.parent){const l=this.getItemTarget(n,t.parent);l&&(this.defaultSubmenuFocus=t,l.dispatchEvent(new KeyboardEvent("keydown",{keyCode:39,which:39,bubbles:!0})))}else i=this.getItemTarget(n,t);if(i)i.focus();else{const l=n.querySelector(`.${I.scrollArea}`);l==null||l.focus()}}},this.getRefId=(e,s)=>`${e}__${s}`,this.state={query:"",value:(m=this.props.value)!=null?m:"",isHidden:!0,originalItems:[],items:[],valueSeparator:(b=this.props.valueSeparator)!=null?b:".",uiidInput:(0,c.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 w=`ui-treeDropdown-wrapper ui-treeDropdown-wrapper-menu${this.state.isMenuOpen?"-open":"-close"} ui-treeDropdown-wrapper-${this.state.uiidInput}`;return this.state.isDisabled&&(w+=" disabled"),this.props.readOnly&&(w+=" readonly"),w}render(){const w=(0,R.getMessageInfo)(this.props);let m=!0;return this.props.useTargetWidth&&(m=!1),r.default.createElement("div",{className:`ui-treeDropdown ui-treeDropDown-${this.state.uiidInput} ${this.props.label?"ui-treeDropdown-with-label":""}`},this.props.label&&r.default.createElement("label",{className:`${this.props.required?"required":""} ${this.state.isDisabled?"disabled":""}`},this.props.label),r.default.createElement("div",{className:this.getClassNames()},r.default.createElement(d.UITextInput,T(M({},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:w.message})),r.default.createElement(f.UIIconButton,{tabIndex:-1,allowDisabledFocus:!0,className:"ui-treeDropdown-caret",iconProps:{iconName:S.UiIcons.ArrowDown},onClick:()=>{var b;this.state.isHidden&&((b=this.inputRef.current)==null||b.focus()),this.toggleMenu(!this.state.isHidden)}})),!this.state.isHidden&&r.default.createElement(p.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:m,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}))}}_.UITreeDropdown=C},"./src/components/UITreeDropdown/index.tsx"(a,_,o){"use strict";var D=this&&this.__createBinding||(Object.create?(function(c,u,d,p){p===void 0&&(p=d);var f=Object.getOwnPropertyDescriptor(u,d);(!f||("get"in f?!u.__esModule:f.writable||f.configurable))&&(f={enumerable:!0,get:function(){return u[d]}}),Object.defineProperty(c,p,f)}):(function(c,u,d,p){p===void 0&&(p=d),c[p]=u[d]})),r=this&&this.__exportStar||function(c,u){for(var d in c)d!=="default"&&!Object.prototype.hasOwnProperty.call(u,d)&&D(u,c,d)};Object.defineProperty(_,"__esModule",{value:!0}),r(o("./src/components/UITreeDropdown/UITreeDropdown.tsx"),_)}}]);})();
|
|
1
|
+
(()=>{var A=Object.defineProperty,j=Object.defineProperties;var K=Object.getOwnPropertyDescriptors;var U=Object.getOwnPropertySymbols;var W=Object.prototype.hasOwnProperty,B=Object.prototype.propertyIsEnumerable;var x=(a,_,o)=>_ in a?A(a,_,{enumerable:!0,configurable:!0,writable:!0,value:o}):a[_]=o,M=(a,_)=>{for(var o in _||(_={}))W.call(_,o)&&x(a,o,_[o]);if(U)for(var o of U(_))B.call(_,o)&&x(a,o,_[o]);return a},T=(a,_)=>j(a,K(_));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[278],{"../../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_/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[11].use[1]!../../node_modules/.pnpm/sass-loader@16.0.7_sass-embedded@1.97.3_sass@1.98.0_webpack@5.105.0_@swc+core@1.15.18_@_31ae7bffeec4c4c96330dc3ad7603369/node_modules/sass-loader/dist/cjs.js!./src/components/UITreeDropdown/UITreeDropdown.scss"(a,_,o){var D=o("../../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_/node_modules/css-loader/dist/runtime/noSourceMaps.js"),r=o("../../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_/node_modules/css-loader/dist/runtime/api.js"),c=r(D);c.push([a.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}',""]),a.exports=c},"./src/components/UITreeDropdown/UITreeDropdown.scss"(a,_,o){"use strict";o.r(_),o.d(_,{default:()=>e});var D=o("../../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_/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),r=o.n(D),c=o("../../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_/node_modules/style-loader/dist/runtime/styleDomAPI.js"),u=o.n(c),d=o("../../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_/node_modules/style-loader/dist/runtime/insertBySelector.js"),p=o.n(d),f=o("../../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_/node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"),S=o.n(f),R=o("../../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_/node_modules/style-loader/dist/runtime/insertStyleElement.js"),I=o.n(R),g=o("../../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_/node_modules/style-loader/dist/runtime/styleTagTransform.js"),y=o.n(g),C=o("../../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_/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[11].use[1]!../../node_modules/.pnpm/sass-loader@16.0.7_sass-embedded@1.97.3_sass@1.98.0_webpack@5.105.0_@swc+core@1.15.18_@_31ae7bffeec4c4c96330dc3ad7603369/node_modules/sass-loader/dist/cjs.js!./src/components/UITreeDropdown/UITreeDropdown.scss"),h=o.n(C),w={};for(const s in C)s!=="default"&&(w[s]=()=>C[s]);o.d(_,w);var m={};m.styleTagTransform=y(),m.setAttributes=S(),m.insert=p().bind(null,"head"),m.domAPI=u(),m.insertStyleElement=I();var b=r()(h(),m);const e=h()&&h().locals?h().locals:void 0},"./src/components/UITreeDropdown/UITreeDropdown.tsx"(a,_,o){"use strict";var D=this&&this.__importDefault||function(h){return h&&h.__esModule?h:{default:h}};Object.defineProperty(_,"__esModule",{value:!0}),_.UITreeDropdown=_.EdgePosition=_.UIDirectionalHint=void 0;const r=D(o("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),c=o("../../node_modules/.pnpm/uuid@11.1.1/node_modules/uuid/dist/cjs-browser/index.js"),u=o("../../node_modules/.pnpm/@fluentui+react@8.125.5_@types+react-dom@16.9.25_@types+react@16.14.69__@types+react@16_64874192b7cfaa3fe7ac389bc8c185b1/node_modules/@fluentui/react/lib-commonjs/index.js");Object.defineProperty(_,"UIDirectionalHint",{enumerable:!0,get:function(){return u.DirectionalHint}});const d=o("./src/components/UIInput/index.tsx"),p=o("./src/components/UIContextualMenu/index.tsx"),f=o("./src/components/UIButton/UIIconButton.tsx"),S=o("./src/components/Icons.tsx"),R=o("./src/helper/ValidationMessage/index.tsx");o("./src/components/UITreeDropdown/UITreeDropdown.scss");const I={callout:"ui-tree-callout",scrollArea:"ms-ContextualMenu-container",splitButton:"ms-ContextualMenu-splitMenu"};var g;(function(h){h.First="First",h.Last="Last"})(g||(_.EdgePosition=g={}));const y={ArrowUp:"ArrowUp",ArrowDown:"ArrowDown",Enter:"Enter",Escape:"Escape"};class C extends r.default.Component{constructor(w){var m,b;super(w),this.UITreeDropdownRef=r.default.createRef(),this.UITreeDropdownFocusZoneRef=r.default.createRef(),this.inputRef=r.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 s=this.mapValuesToContextMenu(e);this.setState({originalItems:s,items:s})}},this.buildSubItems=e=>{var s;return(s=e.children)!=null&&s.length&&(e.children=e.children.map(t=>{const n=new RegExp(e.value,"ig"),i=t.value.search(n)===-1?`${e.value}${this.state.valueSeparator}${t.value}`:t.value;return T(M({},t),{split:!1,value:i})})),e},this.mapValuesToContextMenu=(e,s=0)=>e.map(t=>{var n;if((n=t.children)!=null&&n.length){t.split=!0;const i=this.getRefId(t.value,s);this.submenuRefs[i]||(this.submenuRefs[i]=r.default.createRef()),t.subMenuProps={componentRef:this.submenuRefs[i],items:this.mapValuesToContextMenu(t.children,s+1),focusZoneProps:{handleTabKey:u.FocusZoneTabbableElements.none,onFocus:()=>{var O,E,v,P;const l=(O=this.defaultSubmenuFocus)==null?void 0:O.parent;(l==null?void 0:l.item.value)===t.value&&l.level===s&&this.focusItemWithValue(this.state.value,(P=(v=(E=this.defaultSubmenuFocus)==null?void 0:E.parent)==null?void 0:v.item.subMenuProps)==null?void 0:P.items)}}}}return T(M({},t),{key:t.value,text:t.label,className:"ui-tree-dropdown-list-item",onClick:()=>this.handleSelection(t.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,s)=>{var t;this.UITreeDropdownFocusZoneRef&&(s===y.Enter?this.focusItemWithValue(this.state.value,this.state.items):(t=this.UITreeDropdownFocusZoneRef.current)==null||t.focus(!0),e.preventDefault())},this.handleRenderContent=(e,s)=>(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),s?s.renderItemName(e):null),this.handleRenderMenuList=(e,s)=>{let t=[];return e!=null&&e.items&&(t=e.items.map(n=>{var i;return n.className=n.value===this.props.value?"is-selected":"",n.text=this.highlightQuery(n.label,this.state.query),this.applySubmenuPosition(n),(i=n.subMenuProps)==null||i.items.map(l=>(l.className=l.value===this.props.value?"is-selected":"",l)),M({},n)})),s?s(T(M({},e),{items:t})):null},this.toggleMenu=(e,s)=>{if(this.props.readOnly)return;this.setState({isHidden:e});const t=s==null?void 0:s.key;s&&setTimeout(()=>{s.persist(),this.focusDropdown(s,t)},0)},this.highlightQuery=(e,s)=>r.default.createElement(p.UIHighlightMenuOption,{text:e,query:s}),this.filterElement=(e,s)=>{var n;const t=new RegExp(e,"ig");return(n=s==null?void 0:s.children)!=null&&n.length?s.children.filter(i=>this.filterElement(e,i)).length>0:s!=null&&s.value?s.value.search(t)!==-1:!1},this.handleOnChangeValue=e=>{const s=e.target;this.hasSelected=!1,this.setState(t=>({value:s.value,items:t.originalItems.filter(n=>this.filterElement(s.value,n)),query:s.value,valueChanged:!0})),this.state.isMenuOpen||this.toggleMenu(!1)},this.handleDismiss=e=>{e&&"key"in e&&e.key===y.Escape?this.resetValue():this.hasSelected||this.props.onParameterValueChange(""),this.setState(s=>({items:s.originalItems,query:""})),this.toggleMenu(!0),this.originalValue=void 0},this.applySubmenuPosition=e=>{var s;(s=e.subMenuProps)!=null&&s.items&&(e.subMenuProps.calloutProps||(e.subMenuProps.calloutProps={}),e.subMenuProps.calloutProps.styles={root:{marginLeft:this.submenuOffset}})},this.getCalloutDomRef=(e=!1)=>{const s=`${I.callout}${this.state.uiidInput}`,t=document.querySelector(`.${s}`);return e&&t?t.nextSibling:t},this.calculateSubmenuOffset=()=>{const e=this.getCalloutDomRef();if(e){const s=e.querySelector(`.${I.scrollArea}`);this.submenuOffset=0,s&&s.scrollHeight>s.clientHeight&&(this.submenuOffset=s.offsetWidth-s.clientWidth)}},this.onFocusElementChanged=e=>{const s=e.getElementsByClassName("ts-Menu-option");document.getElementsByClassName("ms-Fabric--isFocusVisible").length>0&&s.length>0&&this.setState({value:e.value?e.value:s[0].innerText,valueChanged:!0})},this.onWindowKeyDown=e=>{var t;this.lastKeyDown=e.key;const s=document.activeElement;if([y.ArrowDown,y.ArrowUp].includes(e.key)&&s){const n=this.getEdgePosition(s),i=n.includes(g.First)&&e.key===y.ArrowUp,l=n.includes(g.Last)&&e.key===y.ArrowDown;(i||l)&&(i&&s.closest(`.${I.callout}${this.state.uiidInput}`)&&((t=this.inputRef.current)==null||t.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 s=e.closest("ul"),t=e.closest("li"),n=[];return s&&t&&(s.children[0]===t&&n.push(g.First),s.children[s.children.length-1]===t&&n.push(g.Last)),n},this.findItemByValue=(e,s=[],t,n=0)=>{var l,O;let i;for(let E=0;E<s.length;E++){const v=s[E],P={item:v,index:E,parent:t,level:n};if(v.value===e?i=P:(O=(l=v.subMenuProps)==null?void 0:l.items)!=null&&O.length&&(i=this.findItemByValue(e,v.subMenuProps.items,P,n+1)),i)break}return i},this.getItemTarget=(e,s)=>{let t;const n=e.querySelector(".ms-ContextualMenu-list");return n!=null&&n.childNodes[s.index]&&(t=n.childNodes[s.index].firstChild),t},this.focusItemWithValue=(e,s=[])=>{const t=this.findItemByValue(e,s),n=this.getCalloutDomRef(!!this.defaultSubmenuFocus);if(this.defaultSubmenuFocus=void 0,t&&n){let i;if(t.parent){const l=this.getItemTarget(n,t.parent);l&&(this.defaultSubmenuFocus=t,l.dispatchEvent(new KeyboardEvent("keydown",{keyCode:39,which:39,bubbles:!0})))}else i=this.getItemTarget(n,t);if(i)i.focus();else{const l=n.querySelector(`.${I.scrollArea}`);l==null||l.focus()}}},this.getRefId=(e,s)=>`${e}__${s}`,this.state={query:"",value:(m=this.props.value)!=null?m:"",isHidden:!0,originalItems:[],items:[],valueSeparator:(b=this.props.valueSeparator)!=null?b:".",uiidInput:(0,c.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 w=`ui-treeDropdown-wrapper ui-treeDropdown-wrapper-menu${this.state.isMenuOpen?"-open":"-close"} ui-treeDropdown-wrapper-${this.state.uiidInput}`;return this.state.isDisabled&&(w+=" disabled"),this.props.readOnly&&(w+=" readonly"),w}render(){const w=(0,R.getMessageInfo)(this.props);let m=!0;return this.props.useTargetWidth&&(m=!1),r.default.createElement("div",{className:`ui-treeDropdown ui-treeDropDown-${this.state.uiidInput} ${this.props.label?"ui-treeDropdown-with-label":""}`},this.props.label&&r.default.createElement("label",{className:`${this.props.required?"required":""} ${this.state.isDisabled?"disabled":""}`},this.props.label),r.default.createElement("div",{className:this.getClassNames()},r.default.createElement(d.UITextInput,T(M({},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:w.message})),r.default.createElement(f.UIIconButton,{tabIndex:-1,allowDisabledFocus:!0,className:"ui-treeDropdown-caret",iconProps:{iconName:S.UiIcons.ArrowDown},onClick:()=>{var b;this.state.isHidden&&((b=this.inputRef.current)==null||b.focus()),this.toggleMenu(!this.state.isHidden)}})),!this.state.isHidden&&r.default.createElement(p.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:m,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}))}}_.UITreeDropdown=C},"./src/components/UITreeDropdown/index.tsx"(a,_,o){"use strict";var D=this&&this.__createBinding||(Object.create?(function(c,u,d,p){p===void 0&&(p=d);var f=Object.getOwnPropertyDescriptor(u,d);(!f||("get"in f?!u.__esModule:f.writable||f.configurable))&&(f={enumerable:!0,get:function(){return u[d]}}),Object.defineProperty(c,p,f)}):(function(c,u,d,p){p===void 0&&(p=d),c[p]=u[d]})),r=this&&this.__exportStar||function(c,u){for(var d in c)d!=="default"&&!Object.prototype.hasOwnProperty.call(u,d)&&D(u,c,d)};Object.defineProperty(_,"__esModule",{value:!0}),r(o("./src/components/UITreeDropdown/UITreeDropdown.tsx"),_)}}]);})();
|