@oliasoft-open-source/react-ui-library 4.8.2 → 4.9.0-beta-2
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/index.d.ts +7 -2
- package/dist/index.js +44 -29
- package/dist/index.js.map +1 -1
- package/dist/storybook/assets/{Color-KGDBMAHA-CLI1j7TM.js → Color-KGDBMAHA-9iiZ9sw8.js} +1 -1
- package/dist/storybook/assets/{DocsRenderer-PKQXORMH-C-VGLian.js → DocsRenderer-PKQXORMH-ypxq1WaK.js} +1 -1
- package/dist/storybook/assets/{accordion.stories-CjdOndbq.js → accordion.stories-D8Jb5lRq.js} +2 -2
- package/dist/storybook/assets/{afe.stories-D-uQj_IO.js → afe.stories-Dxdcf-Wr.js} +2 -2
- package/dist/storybook/assets/{buttons-and-links-DLCyz4fu.js → buttons-and-links-CtCO9I4x.js} +1 -1
- package/dist/storybook/assets/{casing-loads.stories-Cb2t61c-.js → casing-loads.stories-Bo9VN-h1.js} +2 -2
- package/dist/storybook/assets/{cell.stories-B6XrqnOz.js → cell.stories-BRIh_VqD.js} +2 -2
- package/dist/storybook/assets/{chunk-HLWAVYOI-B-NqvPla.js → chunk-HLWAVYOI-pVr_pd7U.js} +1 -1
- package/dist/storybook/assets/{color-DFh0-vFc.js → color-DRpLnJug.js} +1 -1
- package/dist/storybook/assets/{footer.stories-BxFhNGsz.js → footer.stories-Cghb-yfM.js} +2 -2
- package/dist/storybook/assets/form.stories-Bs1kjjd-.js +49 -0
- package/dist/storybook/assets/{formation.stories-r9JrQX7d.js → formation.stories-DqRntQtC.js} +2 -2
- package/dist/storybook/assets/iframe-Dl9kSAK_.js +2 -0
- package/dist/storybook/assets/{index-BIH3zom3.js → index-B-vN3mVN.js} +1 -1
- package/dist/storybook/assets/{index-MQZw3-wz.js → index-BtLaQIRR.js} +88 -88
- package/dist/storybook/assets/{input-group.stories-dQnx3QX0.js → input-group.stories-CCXx8SUE.js} +3 -3
- package/dist/storybook/assets/{input-validation-BhTmzA8C.js → input-validation-CipliMS4.js} +2 -2
- package/dist/storybook/assets/{inputs-BZwMYCXB.js → inputs-CfCos_Do.js} +1 -1
- package/dist/storybook/assets/layout-forms-BQ06Ufkz.js +16 -0
- package/dist/storybook/assets/{layout-general-hZ1fwnpl.js → layout-general-BSEz3PKo.js} +1 -1
- package/dist/storybook/assets/{modal.stories-B-4WKtnM.js → modal.stories-BZHVz3SN.js} +2 -2
- package/dist/storybook/assets/number-input-CKbeoN5B.js +16 -0
- package/dist/storybook/assets/number-input.stories-XP0NZg9d.js +166 -0
- package/dist/storybook/assets/{padding-and-spacing-DZHdCzCJ.js → padding-and-spacing-BJI9HaUS.js} +1 -1
- package/dist/storybook/assets/{pagination-bLx5-m9c.js → pagination-CUucuCPT.js} +1 -1
- package/dist/storybook/assets/{pagination.stories-BHPRfynZ.js → pagination.stories-CN4-LYyQ.js} +2 -2
- package/dist/storybook/assets/popover.stories-Cxaq0SAc.js +10 -0
- package/dist/storybook/assets/{preview-_veCKVNG.js → preview-1dyDpjfs.js} +2 -2
- package/dist/storybook/assets/{preview-nWTzJqHS.js → preview-I-_KBbaH.js} +1 -1
- package/dist/storybook/assets/{projects.stories-CdvyNFKw.js → projects.stories-B1J-8EYu.js} +2 -2
- package/dist/storybook/assets/{radio-button-C3RuBqEf.js → radio-button-YWkXh8yt.js} +1 -1
- package/dist/storybook/assets/{radio-button.stories-CAHs1mr6.js → radio-button.stories-DB127127.js} +2 -2
- package/dist/storybook/assets/{reservoirs.stories-C98Z9kS0.js → reservoirs.stories-B2mJ74TZ.js} +2 -2
- package/dist/storybook/assets/{rich-text-input.stories-B2p90wTh.js → rich-text-input.stories-B3O7b7-u.js} +3 -3
- package/dist/storybook/assets/{row.stories-BRVnImTl.js → row.stories-D014hMyd.js} +2 -2
- package/dist/storybook/assets/select-BEc_mNg5.js +61 -0
- package/dist/storybook/assets/select.input-D0UkAPd9.js +1 -0
- package/dist/storybook/assets/{select.stories-B0d_sE6g.js → select.stories-DXD4AYSk.js} +2 -2
- package/dist/storybook/assets/{site.stories-lIyAWOdt.js → site.stories-CbJ0phLn.js} +2 -2
- package/dist/storybook/assets/{table-DWBe_npR.js → table-CsEdIPXW.js} +1 -1
- package/dist/storybook/assets/{table.stories-Cb7lE3nF.js → table.stories-B5frb4W9.js} +2 -2
- package/dist/storybook/assets/{tabs-BoToLVEP.js → tabs-C3NG6m9W.js} +1 -1
- package/dist/storybook/assets/tabs.stories-dsXjRHJy.js +30 -0
- package/dist/storybook/assets/{title.stories-TUTSNdwJ.js → title.stories-BisMTHc8.js} +3 -3
- package/dist/storybook/assets/unit-input.stories-DiZlUE9e.js +380 -0
- package/dist/storybook/assets/unit-table.stories-DPghKtFI.js +152 -0
- package/dist/storybook/iframe.html +1 -1
- package/dist/storybook/index.json +1 -1
- package/dist/storybook/project.json +1 -1
- package/package.json +3 -3
- package/dist/404.html +0 -1
- package/dist/storybook/assets/enum-Bnn40S8Q.js +0 -1
- package/dist/storybook/assets/form.stories-C_zflIAj.js +0 -49
- package/dist/storybook/assets/helpers-JJxzGegQ.js +0 -1
- package/dist/storybook/assets/iframe-DOgYbEjR.js +0 -2
- package/dist/storybook/assets/layout-forms-j_hFXArR.js +0 -16
- package/dist/storybook/assets/number-input-C8O0lnql.js +0 -16
- package/dist/storybook/assets/number-input.stories-e-MRb-7_.js +0 -124
- package/dist/storybook/assets/popover.stories-DyTPnA5y.js +0 -10
- package/dist/storybook/assets/select-BpALjE__.js +0 -61
- package/dist/storybook/assets/select.input-CJed_LLR.js +0 -1
- package/dist/storybook/assets/tabs.stories-B52iEaHf.js +0 -30
- package/dist/storybook/assets/unit-input.stories-CRAsgJro.js +0 -316
- package/dist/storybook/assets/unit-table.stories-BdTJv4W-.js +0 -152
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import{j as o}from"./jsx-runtime-eps93zm2.js";import{l as ae}from"./lodash-c4VUpsOs.js";import{r as x}from"./index-DhsZuJvc.js";import{c as G}from"./index-Bk2sglWO.js";import{G as ie,I as Ee}from"./common-types-Sih75Sav.js";import{D as me}from"./disabled-context-rmpd7YJS.js";import{i as ne}from"./types-Dx2TtIG9.js";import{T as pe,u as ze,m as We}from"./tooltip-1V7clEnw.js";import{A as P,E as B,K as Ge}from"./enum-Bnn40S8Q.js";import{_ as $e}from"./extends-CF3RwP-h.js";import{_ as ge}from"./assertThisInitialized-B9jnkVVz.js";import{_ as Ue}from"./inheritsLoose-DR8r8Ogv.js";import{m as le}from"./memoize-one.esm-CcMeOnPo.js";import{M as se}from"./types-BmbYqTX_.js";import{T as ue}from"./text-B3-TSWok.js";import{A as Ve}from"./actions-Tr0wIZve.js";import{I as ce}from"./icon-BP4BO6-k.js";import{s as Ye}from"./select.input-CJed_LLR.js";const Ke="_inputInTable_1nzfr_1",Be="_error_1nzfr_7",Ze="_warning_1nzfr_7",Xe="_inputHover_1nzfr_13",Je="_inputFocus_1nzfr_18",Qe="_inputError_1nzfr_25",en="_inputWarning_1nzfr_26",nn="_inputDisabled_1nzfr_61",tn="_hideScrollbars_1nzfr_67",rn="_select_1nzfr_77",an="_isInTable_1nzfr_121",sn="_unSelected_1nzfr_133",ln="_small_1nzfr_174",on="_right_1nzfr_182",un="_groupOrderFirst_1nzfr_193",cn="_groupOrderMiddle_1nzfr_194",dn="_groupOrderLast_1nzfr_198",z={inputInTable:Ke,error:Be,warning:Ze,inputHover:Xe,inputFocus:Je,inputError:Qe,inputWarning:en,inputDisabled:nn,hideScrollbars:tn,select:rn,isInTable:an,unSelected:sn,small:ln,right:on,groupOrderFirst:un,groupOrderMiddle:cn,groupOrderLast:dn},Oe=({disabled:e=!1,error:n=null,warning:r=null,tooltip:a=null,options:s,onChange:g=ae.noop,onFocus:S=ae.noop,onBlur:u=ae.noop,right:c=!1,small:d=!1,tabIndex:T=0,selectedOption:m,width:_=null,groupOrder:E=null,testId:v,isInTable:t=!1,clearable:i,placeholder:l,hasNonExistentValue:p,maxTooltipWidth:y,borderRadius:I})=>{const f=x.useContext(me),h=m===null||(m==null?void 0:m.value)===null?"unselected":m==null?void 0:m.value,O=h==="unselected",N=(h==="unselected"||i?[o.jsx("option",{value:"unselected",disabled:!i,hidden:!i,children:l||"Select..."},"unselected")]:[]).concat(p?[o.jsx("option",{value:m==null?void 0:m.value,disabled:e||f,children:m==null?void 0:m.label},"selectedNonExistentValue")]:[]).concat(s.map((R,q)=>o.jsx("option",{value:R.value,"data-testid":R.testId,children:R.label},q))),C=(()=>{if(E)switch(E){case ie.FIRST:return z.groupOrderFirst;case ie.LAST:return z.groupOrderLast;default:return z.groupOrderMiddle}return""})();return o.jsx(pe,{error:!!n,warning:!!r,text:a||n||r,enabled:a&&ne(a)||n&&ne(n)||r&&ne(r)||!1,maxWidth:y,placement:"bottom-center",children:o.jsx("select",{className:G(z.select,O?z.unSelected:"",n?z.error:r?z.warning:"",c?z.right:"",d?z.small:"",t?z.isInTable:"",C),style:{width:_||"",borderRadius:I||""},onChange:R=>{const{value:q}=R.target;let M;q==="unselected"?M={value:null}:M=s.find(F=>String(F.value)===String(q))||{value:null},g(R,M)},onFocus:S,onBlur:u,tabIndex:T,value:h,disabled:e||f,"data-testid":v,children:N})})};Oe.__docgenInfo={description:"",methods:[],displayName:"NativeSelect",props:{borderRadius:{required:!1,tsType:{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]},description:""},disabled:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},error:{required:!1,tsType:{name:"union",raw:"TStringOrNumber | React.ReactNode | null",elements:[{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]},{name:"ReactReactNode",raw:"React.ReactNode"},{name:"null"}]},description:"",defaultValue:{value:"null",computed:!1}},warning:{required:!1,tsType:{name:"union",raw:"TStringOrNumber | React.ReactNode | null",elements:[{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]},{name:"ReactReactNode",raw:"React.ReactNode"},{name:"null"}]},description:"",defaultValue:{value:"null",computed:!1}},tooltip:{required:!1,tsType:{name:"union",raw:"TStringOrNumber | React.ReactNode | null",elements:[{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]},{name:"ReactReactNode",raw:"React.ReactNode"},{name:"null"}]},description:"",defaultValue:{value:"null",computed:!1}},options:{required:!0,tsType:{name:"Array",elements:[{name:"ISelectSelectedOption"}],raw:"ISelectSelectedOption[]"},description:""},onChange:{required:!1,tsType:{name:"signature",type:"function",raw:`(
|
|
2
|
-
evt: ChangeEvent<HTMLSelectElement>,
|
|
3
|
-
value: ISelectSelectedOption | { value: null },
|
|
4
|
-
) => void`,signature:{arguments:[{type:{name:"ChangeEvent",elements:[{name:"HTMLSelectElement"}],raw:"ChangeEvent<HTMLSelectElement>"},name:"evt"},{type:{name:"union",raw:"ISelectSelectedOption | { value: null }",elements:[{name:"ISelectSelectedOption"},{name:"signature",type:"object",raw:"{ value: null }",signature:{properties:[{key:"value",value:{name:"null",required:!0}}]}}]},name:"value"}],return:{name:"void"}}},description:"",defaultValue:{value:"noop",computed:!0}},onFocus:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"",defaultValue:{value:"noop",computed:!0}},onBlur:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"",defaultValue:{value:"noop",computed:!0}},right:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},small:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},tabIndex:{required:!1,tsType:{name:"number"},description:"",defaultValue:{value:"0",computed:!1}},selectedOption:{required:!1,tsType:{name:"ISelectSelectedOption"},description:""},width:{required:!1,tsType:{name:"union",raw:"TStringOrNumber | null",elements:[{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]},{name:"null"}]},description:"",defaultValue:{value:"null",computed:!1}},groupOrder:{required:!1,tsType:{name:"union",raw:"string | null",elements:[{name:"string"},{name:"null"}]},description:"",defaultValue:{value:"null",computed:!1}},testId:{required:!1,tsType:{name:"union",raw:"string | undefined",elements:[{name:"string"},{name:"undefined"}]},description:""},isInTable:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},clearable:{required:!1,tsType:{name:"boolean"},description:""},placeholder:{required:!1,tsType:{name:"union",raw:"string | null",elements:[{name:"string"},{name:"null"}]},description:""},hasNonExistentValue:{required:!1,tsType:{name:"boolean"},description:""},maxTooltipWidth:{required:!1,tsType:{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]},description:""}}};const we=()=>{const e=x.useRef(null);return[e,()=>{e.current&&e.current.focus()}]},Le=()=>{const[e,n]=x.useState(!1);return x.useEffect(()=>{(async()=>{document.fonts&&await document.fonts.ready.then(()=>n(!0))})()},[]),e};var mn=typeof performance=="object"&&typeof performance.now=="function",ve=mn?function(){return performance.now()}:function(){return Date.now()};function ye(e){cancelAnimationFrame(e.id)}function pn(e,n){var r=ve();function a(){ve()-r>=n?e.call(null):s.id=requestAnimationFrame(a)}var s={id:requestAnimationFrame(a)};return s}var oe=-1;function he(e){if(e===void 0&&(e=!1),oe===-1||e){var n=document.createElement("div"),r=n.style;r.width="50px",r.height="50px",r.overflow="scroll",document.body.appendChild(n),oe=n.offsetWidth-n.clientWidth,document.body.removeChild(n)}return oe}var ee=null;function Se(e){if(e===void 0&&(e=!1),ee===null||e){var n=document.createElement("div"),r=n.style;r.width="50px",r.height="50px",r.overflow="scroll",r.direction="rtl";var a=document.createElement("div"),s=a.style;return s.width="100px",s.height="100px",n.appendChild(a),document.body.appendChild(n),n.scrollLeft>0?ee="positive-descending":(n.scrollLeft=1,n.scrollLeft===0?ee="negative":ee="positive-ascending"),document.body.removeChild(n),ee}return ee}var fn=150,gn=function(n,r){return n};function vn(e){var n,r=e.getItemOffset,a=e.getEstimatedTotalSize,s=e.getItemSize,g=e.getOffsetForIndexAndAlignment,S=e.getStartIndexForOffset,u=e.getStopIndexForStartIndex,c=e.initInstanceProps,d=e.shouldResetStyleCacheOnItemSizeChange,T=e.validateProps;return n=function(m){Ue(_,m);function _(v){var t;return t=m.call(this,v)||this,t._instanceProps=c(t.props,ge(t)),t._outerRef=void 0,t._resetIsScrollingTimeoutId=null,t.state={instance:ge(t),isScrolling:!1,scrollDirection:"forward",scrollOffset:typeof t.props.initialScrollOffset=="number"?t.props.initialScrollOffset:0,scrollUpdateWasRequested:!1},t._callOnItemsRendered=void 0,t._callOnItemsRendered=le(function(i,l,p,y){return t.props.onItemsRendered({overscanStartIndex:i,overscanStopIndex:l,visibleStartIndex:p,visibleStopIndex:y})}),t._callOnScroll=void 0,t._callOnScroll=le(function(i,l,p){return t.props.onScroll({scrollDirection:i,scrollOffset:l,scrollUpdateWasRequested:p})}),t._getItemStyle=void 0,t._getItemStyle=function(i){var l=t.props,p=l.direction,y=l.itemSize,I=l.layout,f=t._getItemStyleCache(d&&y,d&&I,d&&p),h;if(f.hasOwnProperty(i))h=f[i];else{var O=r(t.props,i,t._instanceProps),N=s(t.props,i,t._instanceProps),C=p==="horizontal"||I==="horizontal",R=p==="rtl",q=C?O:0;f[i]=h={position:"absolute",left:R?void 0:q,right:R?q:void 0,top:C?0:O,height:C?"100%":N,width:C?N:"100%"}}return h},t._getItemStyleCache=void 0,t._getItemStyleCache=le(function(i,l,p){return{}}),t._onScrollHorizontal=function(i){var l=i.currentTarget,p=l.clientWidth,y=l.scrollLeft,I=l.scrollWidth;t.setState(function(f){if(f.scrollOffset===y)return null;var h=t.props.direction,O=y;if(h==="rtl")switch(Se()){case"negative":O=-y;break;case"positive-descending":O=I-p-y;break}return O=Math.max(0,Math.min(O,I-p)),{isScrolling:!0,scrollDirection:f.scrollOffset<O?"forward":"backward",scrollOffset:O,scrollUpdateWasRequested:!1}},t._resetIsScrollingDebounced)},t._onScrollVertical=function(i){var l=i.currentTarget,p=l.clientHeight,y=l.scrollHeight,I=l.scrollTop;t.setState(function(f){if(f.scrollOffset===I)return null;var h=Math.max(0,Math.min(I,y-p));return{isScrolling:!0,scrollDirection:f.scrollOffset<h?"forward":"backward",scrollOffset:h,scrollUpdateWasRequested:!1}},t._resetIsScrollingDebounced)},t._outerRefSetter=function(i){var l=t.props.outerRef;t._outerRef=i,typeof l=="function"?l(i):l!=null&&typeof l=="object"&&l.hasOwnProperty("current")&&(l.current=i)},t._resetIsScrollingDebounced=function(){t._resetIsScrollingTimeoutId!==null&&ye(t._resetIsScrollingTimeoutId),t._resetIsScrollingTimeoutId=pn(t._resetIsScrolling,fn)},t._resetIsScrolling=function(){t._resetIsScrollingTimeoutId=null,t.setState({isScrolling:!1},function(){t._getItemStyleCache(-1,null)})},t}_.getDerivedStateFromProps=function(t,i){return yn(t,i),T(t),null};var E=_.prototype;return E.scrollTo=function(t){t=Math.max(0,t),this.setState(function(i){return i.scrollOffset===t?null:{scrollDirection:i.scrollOffset<t?"forward":"backward",scrollOffset:t,scrollUpdateWasRequested:!0}},this._resetIsScrollingDebounced)},E.scrollToItem=function(t,i){i===void 0&&(i="auto");var l=this.props,p=l.itemCount,y=l.layout,I=this.state.scrollOffset;t=Math.max(0,Math.min(t,p-1));var f=0;if(this._outerRef){var h=this._outerRef;y==="vertical"?f=h.scrollWidth>h.clientWidth?he():0:f=h.scrollHeight>h.clientHeight?he():0}this.scrollTo(g(this.props,t,i,I,this._instanceProps,f))},E.componentDidMount=function(){var t=this.props,i=t.direction,l=t.initialScrollOffset,p=t.layout;if(typeof l=="number"&&this._outerRef!=null){var y=this._outerRef;i==="horizontal"||p==="horizontal"?y.scrollLeft=l:y.scrollTop=l}this._callPropsCallbacks()},E.componentDidUpdate=function(){var t=this.props,i=t.direction,l=t.layout,p=this.state,y=p.scrollOffset,I=p.scrollUpdateWasRequested;if(I&&this._outerRef!=null){var f=this._outerRef;if(i==="horizontal"||l==="horizontal")if(i==="rtl")switch(Se()){case"negative":f.scrollLeft=-y;break;case"positive-ascending":f.scrollLeft=y;break;default:var h=f.clientWidth,O=f.scrollWidth;f.scrollLeft=O-h-y;break}else f.scrollLeft=y;else f.scrollTop=y}this._callPropsCallbacks()},E.componentWillUnmount=function(){this._resetIsScrollingTimeoutId!==null&&ye(this._resetIsScrollingTimeoutId)},E.render=function(){var t=this.props,i=t.children,l=t.className,p=t.direction,y=t.height,I=t.innerRef,f=t.innerElementType,h=t.innerTagName,O=t.itemCount,N=t.itemData,C=t.itemKey,R=C===void 0?gn:C,q=t.layout,M=t.outerElementType,A=t.outerTagName,F=t.style,$=t.useIsScrolling,V=t.width,U=this.state.isScrolling,j=p==="horizontal"||q==="horizontal",D=j?this._onScrollHorizontal:this._onScrollVertical,Z=this._getRangeToRender(),te=Z[0],re=Z[1],X=[];if(O>0)for(var k=te;k<=re;k++)X.push(x.createElement(i,{data:N,key:R(k,N),index:k,isScrolling:$?U:void 0,style:this._getItemStyle(k)}));var J=a(this.props,this._instanceProps);return x.createElement(M||A||"div",{className:l,onScroll:D,ref:this._outerRefSetter,style:$e({position:"relative",height:y,width:V,overflow:"auto",WebkitOverflowScrolling:"touch",willChange:"transform",direction:p},F)},x.createElement(f||h||"div",{children:X,ref:I,style:{height:j?"100%":J,pointerEvents:U?"none":void 0,width:j?J:"100%"}}))},E._callPropsCallbacks=function(){if(typeof this.props.onItemsRendered=="function"){var t=this.props.itemCount;if(t>0){var i=this._getRangeToRender(),l=i[0],p=i[1],y=i[2],I=i[3];this._callOnItemsRendered(l,p,y,I)}}if(typeof this.props.onScroll=="function"){var f=this.state,h=f.scrollDirection,O=f.scrollOffset,N=f.scrollUpdateWasRequested;this._callOnScroll(h,O,N)}},E._getRangeToRender=function(){var t=this.props,i=t.itemCount,l=t.overscanCount,p=this.state,y=p.isScrolling,I=p.scrollDirection,f=p.scrollOffset;if(i===0)return[0,0,0,0];var h=S(this.props,f,this._instanceProps),O=u(this.props,h,f,this._instanceProps),N=!y||I==="backward"?Math.max(1,l):1,C=!y||I==="forward"?Math.max(1,l):1;return[Math.max(0,h-N),Math.max(0,Math.min(i-1,O+C)),h,O]},_}(x.PureComponent),n.defaultProps={direction:"ltr",itemData:void 0,layout:"vertical",overscanCount:2,useIsScrolling:!1},n}var yn=function(n,r){n.children,n.direction,n.height,n.layout,n.innerTagName,n.outerTagName,n.width,r.instance},hn=vn({getItemOffset:function(n,r){var a=n.itemSize;return r*a},getItemSize:function(n,r){var a=n.itemSize;return a},getEstimatedTotalSize:function(n){var r=n.itemCount,a=n.itemSize;return a*r},getOffsetForIndexAndAlignment:function(n,r,a,s,g,S){var u=n.direction,c=n.height,d=n.itemCount,T=n.itemSize,m=n.layout,_=n.width,E=u==="horizontal"||m==="horizontal",v=E?_:c,t=Math.max(0,d*T-v),i=Math.min(t,r*T),l=Math.max(0,r*T-v+T+S);switch(a==="smart"&&(s>=l-v&&s<=i+v?a="auto":a="center"),a){case"start":return i;case"end":return l;case"center":{var p=Math.round(l+(i-l)/2);return p<Math.ceil(v/2)?0:p>t+Math.floor(v/2)?t:p}case"auto":default:return s>=l&&s<=i?s:s<l?l:i}},getStartIndexForOffset:function(n,r){var a=n.itemCount,s=n.itemSize;return Math.max(0,Math.min(a-1,Math.floor(r/s)))},getStopIndexForStartIndex:function(n,r,a){var s=n.direction,g=n.height,S=n.itemCount,u=n.itemSize,c=n.layout,d=n.width,T=s==="horizontal"||c==="horizontal",m=r*u,_=T?d:g,E=Math.ceil((_+a-m)/u);return Math.max(0,Math.min(S-1,r+E-1))},initInstanceProps:function(n){},shouldResetStyleCacheOnItemSizeChange:!0,validateProps:function(n){n.itemSize}});const Sn="_layerContainer_1lbvo_1",Tn="_layer_1lbvo_1",_n="_small_1lbvo_23",bn="_heading_1lbvo_26",In="_option_1lbvo_27",En="_message_1lbvo_28",On="_focused_1lbvo_64",wn="_selected_1lbvo_68",Ln="_disabled_1lbvo_71",Rn="_check_1lbvo_75",qn="_optionContent_1lbvo_92",xn="_label_1lbvo_97",Cn="_icon_1lbvo_104",Mn="_details_1lbvo_109",H={layerContainer:Sn,layer:Tn,small:_n,heading:bn,option:In,message:En,focused:On,selected:wn,disabled:Ln,check:Rn,optionContent:qn,label:xn,icon:Cn,details:Mn},Re=({label:e})=>o.jsx("div",{onClick:n=>n.stopPropagation(),className:H.heading,children:e});Re.__docgenInfo={description:"",methods:[],displayName:"Heading",props:{label:{required:!0,tsType:{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]},description:""}}};const qe=({details:e,label:n,icon:r,disabled:a=!1,selected:s=!1,focused:g=!1,onSelectOption:S,actions:u,closeLayer:c,testId:d})=>o.jsxs("div",{className:G(H.option,a?H.disabled:"",s?H.selected:"",g?H.focused:""),onClick:!a&&S?S:void 0,"data-testid":d,children:[o.jsx("div",{className:H.optionContent,children:o.jsxs("span",{className:H.label,title:n,children:[n,r&&o.jsx("span",{className:H.icon,children:r})]})}),e&&o.jsx("div",{className:G(H.details),children:o.jsx(ue,{faint:!0,children:e})}),!!(u!=null&&u.length)&&o.jsx("div",{className:G(H.actions),children:o.jsx(Ve,{actions:u,closeLayer:c})}),o.jsx("span",{className:H.check,children:s?o.jsx(ce,{icon:Ee.CHECK}):null})]});qe.__docgenInfo={description:"",methods:[],displayName:"Option",props:{details:{required:!1,tsType:{name:"string"},description:""},label:{required:!0,tsType:{name:"string"},description:""},icon:{required:!1,tsType:{name:"ReactNode"},description:""},disabled:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},selected:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},focused:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},onSelectOption:{required:!1,tsType:{name:"signature",type:"function",raw:`(
|
|
5
|
-
event?: React.MouseEvent<HTMLDivElement, MouseEvent>,
|
|
6
|
-
section?: ISelectSectionProps,
|
|
7
|
-
) => void`,signature:{arguments:[{type:{name:"ReactMouseEvent",raw:"React.MouseEvent<HTMLDivElement, MouseEvent>",elements:[{name:"HTMLDivElement"},{name:"MouseEvent"}]},name:"event"},{type:{name:"signature",type:"object",raw:`{
|
|
8
|
-
section: ISelectSection;
|
|
9
|
-
selected?: boolean;
|
|
10
|
-
focused?: boolean;
|
|
11
|
-
onSelectOption?: (
|
|
12
|
-
event?: React.MouseEvent<HTMLDivElement, MouseEvent>,
|
|
13
|
-
section?: ISelectSectionProps,
|
|
14
|
-
) => void;
|
|
15
|
-
closeLayer?: TEmpty;
|
|
16
|
-
}`,signature:{properties:[{key:"section",value:{name:"ISelectSection",required:!0}},{key:"selected",value:{name:"boolean",required:!1}},{key:"focused",value:{name:"boolean",required:!1}},{key:"onSelectOption",value:{name:"signature",type:"function",raw:`(
|
|
17
|
-
event?: React.MouseEvent<HTMLDivElement, MouseEvent>,
|
|
18
|
-
section?: ISelectSectionProps,
|
|
19
|
-
) => void`,signature:{arguments:[{type:{name:"ReactMouseEvent",raw:"React.MouseEvent<HTMLDivElement, MouseEvent>",elements:[{name:"HTMLDivElement"},{name:"MouseEvent"}]},name:"event"},{type:{name:"ISelectSectionProps"},name:"section"}],return:{name:"void"}},required:!1}},{key:"closeLayer",value:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}},required:!1}}]}},name:"section"}],return:{name:"void"}}},description:""},actions:{required:!1,tsType:{name:"Array",elements:[{name:"any"}],raw:"any[]"},description:""},closeLayer:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:""},testId:{required:!1,tsType:{name:"string"},description:""}}};const xe=({section:e,selected:n,focused:r,onSelectOption:a,closeLayer:s})=>{const g=x.useContext(me);switch(e.type){case se.HEADING:return o.jsx(Re,{label:e.label});case se.OPTION:default:return o.jsx(qe,{closeLayer:s,actions:e.actions,label:e.label,details:e.details,icon:e.icon,disabled:e.disabled||g,selected:n,focused:r,onSelectOption:a,testId:e.testId})}};xe.__docgenInfo={description:"",methods:[],displayName:"Section",props:{section:{required:!0,tsType:{name:"ISelectSection"},description:""},selected:{required:!1,tsType:{name:"boolean"},description:""},focused:{required:!1,tsType:{name:"boolean"},description:""},onSelectOption:{required:!1,tsType:{name:"signature",type:"function",raw:`(
|
|
20
|
-
event?: React.MouseEvent<HTMLDivElement, MouseEvent>,
|
|
21
|
-
section?: ISelectSectionProps,
|
|
22
|
-
) => void`,signature:{arguments:[{type:{name:"ReactMouseEvent",raw:"React.MouseEvent<HTMLDivElement, MouseEvent>",elements:[{name:"HTMLDivElement"},{name:"MouseEvent"}]},name:"event"},{type:{name:"signature",type:"object",raw:`{
|
|
23
|
-
section: ISelectSection;
|
|
24
|
-
selected?: boolean;
|
|
25
|
-
focused?: boolean;
|
|
26
|
-
onSelectOption?: (
|
|
27
|
-
event?: React.MouseEvent<HTMLDivElement, MouseEvent>,
|
|
28
|
-
section?: ISelectSectionProps,
|
|
29
|
-
) => void;
|
|
30
|
-
closeLayer?: TEmpty;
|
|
31
|
-
}`,signature:{properties:[{key:"section",value:{name:"ISelectSection",required:!0}},{key:"selected",value:{name:"boolean",required:!1}},{key:"focused",value:{name:"boolean",required:!1}},{key:"onSelectOption",value:{name:"signature",type:"function",raw:`(
|
|
32
|
-
event?: React.MouseEvent<HTMLDivElement, MouseEvent>,
|
|
33
|
-
section?: ISelectSectionProps,
|
|
34
|
-
) => void`,signature:{arguments:[{type:{name:"ReactMouseEvent",raw:"React.MouseEvent<HTMLDivElement, MouseEvent>",elements:[{name:"HTMLDivElement"},{name:"MouseEvent"}]},name:"event"},{type:{name:"ISelectSectionProps"},name:"section"}],return:{name:"void"}},required:!1}},{key:"closeLayer",value:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}},required:!1}}]}},name:"section"}],return:{name:"void"}}},description:""},closeLayer:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:""}}};const de=(e,n)=>{const a=document.createElement("canvas").getContext("2d");return a?(a.font=n,a.measureText(e).width):0},Ce="13px",Me="12px",Nn="Roobert",An="sans-serif",Fn=12,Hn=8,jn=30,Dn=24,kn=5,Pn=3,zn=1,Wn=2,Te=10,Ne=(e=!1,n=!1)=>`${e?Me:Ce} ${n?Nn:An}`,Gn=(e=!1,n=!1)=>(e?Hn:Fn)+(e?Dn:jn)+(n?17:0),_e=(e,n,r,a)=>{const s=Ne(n,r),g=a?de(a,s):0,S=Math.ceil(e.reduce((c,d)=>{var v;const T=(((v=d==null?void 0:d.actions)==null?void 0:v.length)??0)*24,m=d.icon?parseInt(n?Me:Ce)+7:0,_=`${d.label} ${d.details||""}`,E=de(_,s)+T+m;return c=E>c?E:c,c},g)),u=Gn(n,!0);return S+u},$n=(e,n,r)=>{const a=Ne(!0,r),s=de(e.label,a),g=(n?Pn:kn)*2+zn*2+Wn;return Math.ceil(s+g)},Ae=({listRef:e,isMulti:n,sections:r,selectedOptions:a,onSelectOption:s,focusedOptionIndex:g,width:S,small:u,firstSelectedOptionIndex:c,closeLayer:d,testId:T})=>{x.useEffect(()=>{c&&c!==null&&e.current!==null&&e.current.scrollToItem(c,"start")},[c,e]);const m=u?24:30;return o.jsx("div",{"data-testid":T,className:G(H.layer,u&&H.small),children:r.length?o.jsx(hn,{ref:e,height:r.length<Te?m*r.length:m*Te,itemCount:r.length,itemSize:m,width:S,children:({index:_,style:E})=>{var v;return o.jsx("div",{style:E,children:o.jsx(xe,{closeLayer:d,section:r[_],selected:n&&r[_].type!==se.HEADING&&Array.isArray(a)?a.some(t=>{var i;return t&&(t==null?void 0:t.value)===((i=r==null?void 0:r[_])==null?void 0:i.value)}):!Array.isArray(a)&&((v=r==null?void 0:r[_])==null?void 0:v.value)===(a==null?void 0:a.value),focused:g===_,onSelectOption:t=>s(t,r[_])})})}}):o.jsx("ul",{children:o.jsx("li",{children:o.jsx("div",{className:H.message,style:{width:S},children:"No matches"})})})})};Ae.__docgenInfo={description:"",methods:[],displayName:"Layer",props:{listRef:{required:!0,tsType:{name:"RefObject",elements:[{name:"any"}],raw:"RefObject<any>"},description:""},isMulti:{required:!1,tsType:{name:"boolean"},description:""},sections:{required:!0,tsType:{name:"Array",elements:[{name:"ISelectSection"}],raw:"ISelectSection[]"},description:""},selectedOptions:{required:!0,tsType:{name:"union",raw:"ISelectSelectedOption | ISelectSelectedOption[]",elements:[{name:"ISelectSelectedOption"},{name:"Array",elements:[{name:"ISelectSelectedOption"}],raw:"ISelectSelectedOption[]"}]},description:""},onSelectOption:{required:!0,tsType:{name:"signature",type:"function",raw:`(
|
|
35
|
-
event?: React.MouseEvent<HTMLDivElement, MouseEvent>,
|
|
36
|
-
section?: ISelectSection,
|
|
37
|
-
) => void`,signature:{arguments:[{type:{name:"ReactMouseEvent",raw:"React.MouseEvent<HTMLDivElement, MouseEvent>",elements:[{name:"HTMLDivElement"},{name:"MouseEvent"}]},name:"event"},{type:{name:"ISelectSection"},name:"section"}],return:{name:"void"}}},description:""},focusedOptionIndex:{required:!1,tsType:{name:"number"},description:""},width:{required:!0,tsType:{name:"number"},description:""},small:{required:!1,tsType:{name:"boolean"},description:""},firstSelectedOptionIndex:{required:!1,tsType:{name:"number"},description:""},closeLayer:{required:!0,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:""},testId:{required:!1,tsType:{name:"string"},description:""}}};const Un="_inputInTable_nec64_1",Vn="_error_nec64_7",Yn="_warning_nec64_7",Kn="_inputHover_nec64_13",Bn="_inputFocus_nec64_18",Zn="_inputError_nec64_25",Xn="_inputWarning_nec64_26",Jn="_inputDisabled_nec64_61",Qn="_hideScrollbars_nec64_67",et="_trigger_nec64_77",nt="_isInTable_nec64_93",tt="_input_nec64_1",rt="_isOpen_nec64_114",at="_disabled_nec64_156",it="_icons_nec64_162",st="_clearAll_nec64_169",lt="_iconOpen_nec64_170",ot="_small_nec64_181",ut="_triggerInputContainer_nec64_189",ct="_right_nec64_198",dt="_multiOptions_nec64_211",mt="_multiOption_nec64_211",pt="_label_nec64_239",ft="_closeMultiOption_nec64_242",gt="_focus_nec64_253",vt="_selectedSingleValue_nec64_257",yt="_placeHolder_nec64_258",ht="_groupOrderFirst_nec64_297",St="_groupOrderMiddle_nec64_298",Tt="_groupOrderLast_nec64_302",_t="_detailedLabel_nec64_307",L={inputInTable:Un,error:Vn,warning:Yn,inputHover:Kn,inputFocus:Bn,inputError:Zn,inputWarning:Xn,inputDisabled:Jn,hideScrollbars:Qn,trigger:et,isInTable:nt,input:tt,isOpen:rt,disabled:at,icons:it,clearAll:st,iconOpen:lt,small:ot,triggerInputContainer:ut,right:ct,multiOptions:dt,multiOption:mt,label:pt,closeMultiOption:ft,focus:gt,selectedSingleValue:vt,placeHolder:yt,groupOrderFirst:ht,groupOrderMiddle:St,groupOrderLast:Tt,detailedLabel:_t},Fe=({selectedOptions:e,small:n,width:r,testId:a})=>{const s=Le(),[g,S]=x.useState([]),[u,c]=x.useState([]);return x.useEffect(()=>{let d=[],T=[],m=0;e.forEach((_,E)=>{m+=$n(_,n,s),E===e.length-1&&m<r||m<r-24?d.push(_):T.push(_)}),S(d),c(T)},[e,s,r]),o.jsxs("div",{className:L.multiOptions,"data-testid":a&&`${a}-value`,children:[g.filter(d=>d&&d.label).map((d,T)=>o.jsx("span",{className:L.multiOption,onClick:m=>{m.stopPropagation()},children:d.label},T)),u.length>0&&o.jsx(pe,{text:u.map((d,T)=>o.jsx("div",{children:d.label},T)),display:"inline-flex",children:o.jsx("span",{className:L.multiOption,children:g.length?`+${u.length}`:`${u.length} items`})})]})};Fe.__docgenInfo={description:"",methods:[],displayName:"MultiSelectedOptions",props:{selectedOptions:{required:!0,tsType:{name:"Array",elements:[{name:"ISelectSelectedOption"}],raw:"ISelectSelectedOption[]"},description:""},small:{required:!1,tsType:{name:"boolean"},description:""},width:{required:!0,tsType:{name:"number"},description:""},testId:{required:!1,tsType:{name:"string"},description:""}}};const He=({selectedOptions:e,searchable:n=!1,searchValue:r,onChange:a=ae.noop,inputRef:s,error:g,placeholder:S="Select...",small:u,testId:c})=>{const d=x.useRef(null),T=Array.isArray(e),m=T?e.length>0:!!e,_=r?r.length+1:1,E=()=>{var i,l;const v=((i=d.current)==null?void 0:i.offsetWidth)||0,t=((l=s.current)==null?void 0:l.offsetWidth)||0;return v-t};return o.jsxs("div",{className:L.triggerInputContainer,ref:d,children:[m?T?o.jsx(Fe,{selectedOptions:e,small:u,width:E(),testId:c}):o.jsx("span",{className:L.selectedSingleValue,"data-testid":c&&`${c}-value`,children:r!=null&&r.length?"":e==null?void 0:e.label}):o.jsx("span",{className:L.placeHolder,children:r!=null&&r.length?"":S}),n?o.jsx("input",{tabIndex:-1,ref:s,size:_,className:G(L.input,g?L.error:""),value:r,onChange:v=>a(v.target.value),"data-testid":c&&`${c}-input`}):null]})};He.__docgenInfo={description:"",methods:[],displayName:"Input",props:{selectedOptions:{required:!1,tsType:{name:"union",raw:"ISelectSelectedOption | ISelectSelectedOption[]",elements:[{name:"ISelectSelectedOption"},{name:"Array",elements:[{name:"ISelectSelectedOption"}],raw:"ISelectSelectedOption[]"}]},description:""},searchable:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},searchValue:{required:!1,tsType:{name:"string"},description:""},inputRef:{required:!0,tsType:{name:"MutableRefObject",elements:[{name:"union",raw:"HTMLInputElement | null",elements:[{name:"HTMLInputElement"},{name:"null"}]}],raw:"MutableRefObject<HTMLInputElement | null>"},description:""},onChange:{required:!1,tsType:{name:"signature",type:"function",raw:"(value: string) => void",signature:{arguments:[{type:{name:"string"},name:"value"}],return:{name:"void"}}},description:"",defaultValue:{value:"noop",computed:!0}},error:{required:!1,tsType:{name:"union",raw:"string | ReactNode",elements:[{name:"string"},{name:"ReactNode"}]},description:""},placeholder:{required:!1,tsType:{name:"union",raw:"string | null",elements:[{name:"string"},{name:"null"}]},description:"",defaultValue:{value:"'Select...'",computed:!1}},small:{required:!1,tsType:{name:"boolean"},description:""},testId:{required:!1,tsType:{name:"string"},description:""}}};const je=({selectedOptions:e,searchValue:n,searchable:r,clearable:a,onClickTrigger:s,element:g,error:S,warning:u,tooltip:c,small:d,isInTable:T,disabled:m,onChangeSearch:_,onClickDeselect:E,onClickClear:v,tabIndex:t,isOpen:i,triggerRef:l,clearAllIsFocused:p,focusedSelectedOptionIndex:y,onFocus:I,onBlur:f,groupOrder:h,maxTooltipWidth:O,placeholder:N,right:C,testId:R})=>{var j;const[q,M]=we(),A=Array.isArray(e)?e.length>0&&((j=e[0])==null?void 0:j.value):e==null?void 0:e.value,F=a&&A,$=(()=>{if(h)switch(h){case ie.FIRST:return L.groupOrderFirst;case ie.LAST:return L.groupOrderLast;default:return L.groupOrderMiddle}return""})(),V=!Array.isArray(e)&&(e!=null&&e.details)?{...e,label:o.jsxs("div",{className:G(L.detailedLabel),children:[o.jsx(ue,{children:e.label}),o.jsx(ue,{muted:!0,children:e.details})]})}:e,U=o.jsxs(o.Fragment,{children:[g,o.jsxs("div",{ref:l,tabIndex:t,className:G(L.trigger,i?L.isOpen:"",S?L.error:u?L.warning:"",m?L.disabled:"",d?L.small:"",T?L.isInTable:"",C?L.right:"",$),onClick:D=>{D.stopPropagation(),typeof M=="function"&&M(),s(D)},onFocus:I,onBlur:f,"data-testid":R,children:[o.jsx(He,{selectedOptions:V,placeholder:N,searchable:r,searchValue:n,inputRef:q,onChange:_,error:S,small:d,testId:R}),o.jsx("span",{className:L.icons,children:F?o.jsx("span",{className:G(L.clearAll,p?L.focus:""),onClick:D=>{D.stopPropagation(),v&&v(D)},"data-testid":R&&`${R}-clear`,children:o.jsx(ce,{icon:Ee.CLOSE})}):o.jsx("span",{className:G(L.iconOpen),children:o.jsx(ce,{icon:"chevron down"})})})]})]});return o.jsx(o.Fragment,{children:o.jsx(pe,{error:!!S,warning:!!u,text:c||S||u,enabled:c&&ne(c)||S&&ne(S)||u&&ne(u)||!1,maxWidth:O,placement:"bottom-center",children:U})})};je.__docgenInfo={description:"",methods:[],displayName:"Trigger",props:{selectedOptions:{required:!1,tsType:{name:"union",raw:"ISelectSelectedOption | ISelectSelectedOption[]",elements:[{name:"ISelectSelectedOption"},{name:"Array",elements:[{name:"ISelectSelectedOption"}],raw:"ISelectSelectedOption[]"}]},description:""},searchValue:{required:!1,tsType:{name:"string"},description:""},searchable:{required:!1,tsType:{name:"boolean"},description:""},clearable:{required:!1,tsType:{name:"boolean"},description:""},onClickTrigger:{required:!0,tsType:{name:"signature",type:"function",raw:"(evt: React.MouseEvent<HTMLDivElement, MouseEvent>) => void",signature:{arguments:[{type:{name:"ReactMouseEvent",raw:"React.MouseEvent<HTMLDivElement, MouseEvent>",elements:[{name:"HTMLDivElement"},{name:"MouseEvent"}]},name:"evt"}],return:{name:"void"}}},description:""},element:{required:!1,tsType:{name:"ReactNode"},description:""},error:{required:!1,tsType:{name:"union",raw:"string | ReactNode",elements:[{name:"string"},{name:"ReactNode"}]},description:""},warning:{required:!1,tsType:{name:"union",raw:"string | ReactNode",elements:[{name:"string"},{name:"ReactNode"}]},description:""},tooltip:{required:!1,tsType:{name:"union",raw:"string | ReactNode",elements:[{name:"string"},{name:"ReactNode"}]},description:""},small:{required:!1,tsType:{name:"boolean"},description:""},isInTable:{required:!1,tsType:{name:"boolean"},description:""},disabled:{required:!1,tsType:{name:"boolean"},description:""},onChangeSearch:{required:!1,tsType:{name:"signature",type:"function",raw:"(value: string) => void",signature:{arguments:[{type:{name:"string"},name:"value"}],return:{name:"void"}}},description:""},onClickDeselect:{required:!1,tsType:{name:"signature",type:"function",raw:"(evt: React.MouseEvent<HTMLDivElement, MouseEvent>) => void",signature:{arguments:[{type:{name:"ReactMouseEvent",raw:"React.MouseEvent<HTMLDivElement, MouseEvent>",elements:[{name:"HTMLDivElement"},{name:"MouseEvent"}]},name:"evt"}],return:{name:"void"}}},description:""},onClickClear:{required:!1,tsType:{name:"signature",type:"function",raw:"(evt: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void",signature:{arguments:[{type:{name:"ReactMouseEvent",raw:"React.MouseEvent<HTMLSpanElement, MouseEvent>",elements:[{name:"HTMLSpanElement"},{name:"MouseEvent"}]},name:"evt"}],return:{name:"void"}}},description:""},tabIndex:{required:!1,tsType:{name:"number"},description:""},isOpen:{required:!1,tsType:{name:"boolean"},description:""},triggerRef:{required:!1,tsType:{name:"RefObject",elements:[{name:"HTMLDivElement"}],raw:"RefObject<HTMLDivElement>"},description:""},clearAllIsFocused:{required:!1,tsType:{name:"boolean"},description:""},focusedSelectedOptionIndex:{required:!1,tsType:{name:"number"},description:""},onFocus:{required:!1,tsType:{name:"signature",type:"function",raw:"(evt: React.FocusEvent<HTMLDivElement>) => void",signature:{arguments:[{type:{name:"ReactFocusEvent",raw:"React.FocusEvent<HTMLDivElement>",elements:[{name:"HTMLDivElement"}]},name:"evt"}],return:{name:"void"}}},description:""},onBlur:{required:!1,tsType:{name:"signature",type:"function",raw:"(evt: React.FocusEvent<HTMLDivElement>) => void",signature:{arguments:[{type:{name:"ReactFocusEvent",raw:"React.FocusEvent<HTMLDivElement>",elements:[{name:"HTMLDivElement"}]},name:"evt"}],return:{name:"void"}}},description:""},groupOrder:{required:!1,tsType:{name:"union",raw:"TGroupOrder | string",elements:[{name:"union",raw:"'first' | 'middle' | 'last'",elements:[{name:"literal",value:"'first'"},{name:"literal",value:"'middle'"},{name:"literal",value:"'last'"}]},{name:"string"}]},description:""},maxTooltipWidth:{required:!1,tsType:{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]},description:""},placeholder:{required:!1,tsType:{name:"union",raw:"string | null",elements:[{name:"string"},{name:"null"}]},description:""},right:{required:!1,tsType:{name:"boolean"},description:""},testId:{required:!1,tsType:{name:"string"},description:""}}};var W=(e=>(e.SET_VISIBLE_OPTIONS="SET_VISIBLE_OPTIONS",e.RESET_LAYER_FOCUS="RESET_LAYER_FOCUS",e.CLEAR_SEARCH="CLEAR_SEARCH",e.ON_CHANGE_SEARCH="ON_CHANGE_SEARCH",e.FOCUS_TRIGGER_INPUTS="FOCUS_TRIGGER_INPUTS",e.BLUR_TRIGGER_INPUTS="BLUR_TRIGGER_INPUTS",e.FOCUS_LAYER_OPTIONS="FOCUS_LAYER_OPTIONS",e.OPEN_LAYER="OPEN_LAYER",e.CLOSE_LAYER="CLOSE_LAYER",e))(W||{});const De={options:["none","clearAll"],currentIndex:0,currentOption:!1,clearAll:!1},bt=e=>e!==null?e+1:0,ke=(e,n)=>{const r=["none",...e.map((s,g)=>s.type!==se.HEADING?g:null).filter(s=>s!==null)],a=bt(n);return{options:r,currentIndex:a,current:r[a]}},It=(e,n)=>{const r=e==="up"?-1:1,a=n.currentIndex+r,s=(a<0?n.options.length-1:a)%n.options.length,g=n.options[s];return{...n,currentIndex:s,current:g}},Et=(e,n,r)=>{const a=e==="left"?-1:1,s=n&&n.length?["none",...Array.from({length:n.length},(d,T)=>T),"clearAll"]:["none","clearAll"],g=r.currentIndex+a,S=(g<0?s.length-1:g)%s.length,u=s[S];return{options:s,currentIndex:S,currentOption:u,clearAll:u==="clearAll"}},be=()=>De,Ie=e=>({...e,currentIndex:0,current:"none"}),Ot=(e,n)=>{switch(n.type){case W.SET_VISIBLE_OPTIONS:return{...e,visibleOptions:n.options||[]};case W.RESET_LAYER_FOCUS:return{...e,layerFocus:ke(n.options||[],n.firstSelectedOptionIndex||0)};case W.CLEAR_SEARCH:return{...e,visibleOptions:n.options||[],searchValue:""};case W.ON_CHANGE_SEARCH:{let a=[...(n.options||[]).filter(s=>(String(s.label)+(s.details?String(s.details):"")).toLowerCase().includes(String(n.value||"").toLowerCase()))];return n.createAble&&n.value&&n.value!==""&&a.push({label:`Create "${n.value}"`,value:n.value,createAble:!0}),{...e,searchValue:n.value,visibleOptions:a,layerFocus:Ie(e.layerFocus)}}case W.FOCUS_TRIGGER_INPUTS:return{...e,triggerFocus:Et(n.direction||"right",n.selectedOptions||[],e.triggerFocus),layerFocus:Ie(e.layerFocus)};case W.BLUR_TRIGGER_INPUTS:return{...e,triggerFocus:be()};case W.FOCUS_LAYER_OPTIONS:return n.nextLayerFocus?{...e,layerFocus:n.nextLayerFocus,triggerFocus:be()}:e;case W.OPEN_LAYER:return{...e,isLayerOpen:!0};case W.CLOSE_LAYER:return{...e,isLayerOpen:!1};default:return e}},wt={auto:!0,possiblePlacements:["bottom-start","top-start"],placement:"bottom-start",preferX:"right",preferY:"bottom"},Lt=({state:e,dispatch:n,options:r,setTriggerFocus:a,disabled:s,disabledContext:g,onCreate:S,onChange:u,selectedOptions:c,width:d,small:T,isFontLoaded:m,placeholder:_,firstSelectedOptionIndex:E,createAble:v,listRef:t,autoLayerWidth:i})=>{const l=()=>{e.isLayerOpen&&n({type:P.CLOSE_LAYER}),a()},p=()=>n({type:P.OPEN_LAYER}),y=x.useRef(!0);x.useEffect(()=>{y.current?y.current=!1:n({type:P.SET_VISIBLE_OPTIONS,options:r})},[r]);const I=(b,w,Q)=>{if(!(s||g)){if(Q&&Q(),w){if(w.createAble&&S)S(w.value);else if(!w.disabled)if(Array.isArray(c))if(c.some(K=>K.label===w.label)){const K=c.filter(fe=>fe.label!==w.label);u&&u(b,K)}else{const K=[...c,w];u&&u(b,K)}else u&&u(b,w)}n({type:P.CLEAR_SEARCH,options:r}),a()}},f=x.useCallback(()=>d?d!=="auto"?d:_e(r,T,m,_):"100%",[r,m]),h=x.useCallback(b=>i?Math.max(_e(r,T,m,_),b==null?void 0:b.width):b==null?void 0:b.width,[r,m]),{renderLayer:O,layerProps:N,triggerProps:C,triggerBounds:R}=ze({isOpen:(e==null?void 0:e.isLayerOpen)??!1,overflowContainer:!0,...wt,ResizeObserver,onOutsideClick:l,onParentClose:l}),q=()=>{if(!(s||g)){if(e.isLayerOpen){l();return}n({type:P.RESET_LAYER_FOCUS,options:r,firstSelectedOptionIndex:E}),p()}},M=x.useRef(!0);x.useEffect(()=>{M.current?M.current=!1:e.isLayerOpen||n({type:P.CLEAR_SEARCH,options:r})},[e.isLayerOpen]);const A=(b,w)=>{const Q=c instanceof Array?c.filter(Y=>Y.value!==w.value):null;u&&u(b,Q)},F=b=>{const w=c instanceof Array?[]:{value:null};u&&u(b,w)},$=b=>n({type:P.ON_CHANGE_SEARCH,options:r,value:b,createAble:v}),V=()=>{p(),n({type:P.BLUR_TRIGGER_INPUTS})},U=b=>{t.current&&Number.isInteger(b)&&t.current.scrollToItem(b)},j=b=>{const w=It(b,e.layerFocus);n({type:P.FOCUS_LAYER_OPTIONS,nextLayerFocus:w}),U(w.current)},D=b=>{n({type:P.FOCUS_TRIGGER_INPUTS,ICustomSelectDirection:b,selectedOptions:c})},Z=b=>F(b),te=c&&c[e.triggerFocus.currentOption],re=b=>{A(b,c[e.triggerFocus.currentOption])},X=b=>{var w;I(b,(w=e==null?void 0:e.visibleOptions)==null?void 0:w[e.layerFocus.current],l)},k=e.triggerFocus.clearAll;return{getTriggerWidth:f,onKeyEvent:(b,w)=>{switch(b){case B.UP:{j(b);break}case B.DOWN:{e.isLayerOpen?j(b):V();break}case B.LEFT:case B.RIGHT:{D(b);break}case B.ENTER:{k?Z(w):te?re(w):X(w);break}case B.ESC:{l();break}}},clearAllIsFocused:k,triggerProps:C,onClickTrigger:q,onChangeSearch:$,onClickDeselectOption:A,onClickClearAll:F,renderLayer:O,layerProps:N,closeLayer:l,onSelectOption:I,getLayerWidth:h,triggerBounds:R}},Pe=e=>{const{multi:n=!1,disabled:r=!1,error:a=null,warning:s=null,tooltip:g=null,options:S,selectedOptions:u,onCreate:c=null,placeholder:d="",small:T=!1,tabIndex:m=0,onFocus:_=()=>{},onBlur:E=()=>{},searchable:v=!0,clearable:t=!1,maxTooltipWidth:i,closeOnOptionActionClick:l,isInTable:p=!1,groupOrder:y,firstSelectedOptionIndex:I=0,right:f=!1,testId:h=void 0}=e,O=x.useContext(me),N=c!==null,C=x.useRef(null),[R,q]=we(),M=Le(),[A,F]=x.useReducer(Ot,{options:S,firstSelectedOptionIndex:I},({options:Y})=>({searchValue:"",visibleOptions:Y,layerFocus:ke(Y,I??0),triggerFocus:De,isLayerOpen:!1})),{getTriggerWidth:$,onKeyEvent:V,clearAllIsFocused:U,triggerProps:j,onClickTrigger:D,onChangeSearch:Z,onClickDeselectOption:te,onClickClearAll:re,renderLayer:X,layerProps:k,closeLayer:J,onSelectOption:b,getLayerWidth:w,triggerBounds:Q}=Lt({...e,state:A,dispatch:F,setTriggerFocus:q,disabledContext:O,isFontLoaded:M,createAble:N,listRef:C});return o.jsx("div",{style:{width:$()},children:o.jsxs(Ge,{handleKeys:Object.values(B),onKeyEvent:V,children:[o.jsx(je,{selectedOptions:u,searchValue:A.searchValue,isOpen:A.isLayerOpen,focusedSelectedOptionIndex:A.triggerFocus.currentOption,clearAllIsFocused:U,searchable:v,triggerRef:We(R,j.ref),error:a,warning:s,tooltip:g,small:T,isInTable:p,disabled:r||O,clearable:t,tabIndex:m,onClickTrigger:D,onChangeSearch:Z,onClickDeselect:te,onClickClear:re,onFocus:_,onBlur:E,groupOrder:y,maxTooltipWidth:i,placeholder:d,right:f,testId:h}),A.isLayerOpen&&X(o.jsx("div",{...k,className:H.layerContainer,children:o.jsx(Ae,{listRef:C,isMulti:n,sections:A.visibleOptions,selectedOptions:u,onSelectOption:(Y,K)=>{b(Y,K,n?void 0:J)},closeLayer:()=>{l&&J()},width:w(Q),small:T,focusedOptionIndex:A.layerFocus.current,firstSelectedOptionIndex:I??0,testId:h&&`${h}-layer`})}))]})})};Pe.__docgenInfo={description:"",methods:[],displayName:"CustomSelect",props:{multi:{required:!1,tsType:{name:"boolean"},description:""},disabled:{required:!1,tsType:{name:"boolean"},description:""},error:{required:!1,tsType:{name:"union",raw:"TStringOrNumber | ReactNode",elements:[{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]},{name:"ReactNode"}]},description:""},warning:{required:!1,tsType:{name:"union",raw:"TStringOrNumber | ReactNode",elements:[{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]},{name:"ReactNode"}]},description:""},tooltip:{required:!1,tsType:{name:"union",raw:"TStringOrNumber | ReactNode",elements:[{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]},{name:"ReactNode"}]},description:""},options:{required:!0,tsType:{name:"Array",elements:[{name:"union",raw:"ISelectSelectedOption | Heading",elements:[{name:"ISelectSelectedOption"},{name:"Heading"}]}],raw:"TCustomSelectSelectOption[]"},description:""},selectedOptions:{required:!0,tsType:{name:"union",raw:"ISelectSelectedOption | ISelectSelectedOption[]",elements:[{name:"ISelectSelectedOption"},{name:"Array",elements:[{name:"ISelectSelectedOption"}],raw:"ISelectSelectedOption[]"}]},description:""},onChange:{required:!1,tsType:{name:"signature",type:"function",raw:`(
|
|
38
|
-
event: TChangeEvent<T>,
|
|
39
|
-
...additionalProps: { [key: string]: any }[]
|
|
40
|
-
) => void`,signature:{arguments:[{type:{name:"intersection",raw:`ChangeEvent<T> & {
|
|
41
|
-
target:
|
|
42
|
-
| T
|
|
43
|
-
| { name: string; value: any; label?: string; files?: FileList | null };
|
|
44
|
-
}`,elements:[{name:"ChangeEvent",elements:[{name:"T"}],raw:"ChangeEvent<T>"},{name:"signature",type:"object",raw:`{
|
|
45
|
-
target:
|
|
46
|
-
| T
|
|
47
|
-
| { name: string; value: any; label?: string; files?: FileList | null };
|
|
48
|
-
}`,signature:{properties:[{key:"target",value:{name:"union",raw:`| T
|
|
49
|
-
| { name: string; value: any; label?: string; files?: FileList | null }`,elements:[{name:"T"},{name:"signature",type:"object",raw:"{ name: string; value: any; label?: string; files?: FileList | null }",signature:{properties:[{key:"name",value:{name:"string",required:!0}},{key:"value",value:{name:"any",required:!0}},{key:"label",value:{name:"string",required:!1}},{key:"files",value:{name:"union",raw:"FileList | null",elements:[{name:"FileList"},{name:"null"}],required:!1}}]}}],required:!0}}]}}]},name:"event"},{type:{name:"Array",elements:[{name:"signature",type:"object",raw:"{ [key: string]: any }",signature:{properties:[{key:{name:"string"},value:{name:"any",required:!0}}]}}],raw:"{ [key: string]: any }[]"},name:"additionalProps",rest:!0}],return:{name:"void"}}},description:""},onCreate:{required:!1,tsType:{name:"signature",type:"function",raw:"(value: string) => void",signature:{arguments:[{type:{name:"string"},name:"value"}],return:{name:"void"}}},description:""},placeholder:{required:!1,tsType:{name:"union",raw:"string | null",elements:[{name:"string"},{name:"null"}]},description:""},small:{required:!1,tsType:{name:"boolean"},description:""},tabIndex:{required:!1,tsType:{name:"number"},description:""},width:{required:!1,tsType:{name:"union",raw:"TStringOrNumber | null",elements:[{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]},{name:"null"}]},description:""},autoLayerWidth:{required:!1,tsType:{name:"boolean"},description:""},onFocus:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:""},onBlur:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:""},searchable:{required:!1,tsType:{name:"boolean"},description:""},clearable:{required:!1,tsType:{name:"boolean"},description:""},isInTable:{required:!1,tsType:{name:"boolean"},description:""},groupOrder:{required:!1,tsType:{name:"union",raw:"TGroupOrder | string",elements:[{name:"union",raw:"'first' | 'middle' | 'last'",elements:[{name:"literal",value:"'first'"},{name:"literal",value:"'middle'"},{name:"literal",value:"'last'"}]},{name:"string"}]},description:""},firstSelectedOptionIndex:{required:!0,tsType:{name:"union",raw:"number | null",elements:[{name:"number"},{name:"null"}]},description:""},right:{required:!1,tsType:{name:"boolean"},description:""},maxTooltipWidth:{required:!1,tsType:{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]},description:""},closeOnOptionActionClick:{required:!1,tsType:{name:"boolean"},description:""},testId:{required:!1,tsType:{name:"union",raw:"string | undefined",elements:[{name:"string"},{name:"undefined"}]},description:""}}};const Rt=e=>{const{name:n="",options:r=[],value:a,native:s=!1,onChange:g=ae.noop,deprecatedEventHandler:S=!1,autoScroll:u=!0,warning:c,error:d,checkNonExistentValues:T=!0,closeOnOptionActionClick:m=!0,testId:_,disabled:E}=e,v=!s&&u===!0,{multi:t,simpleInputs:i,options:l,selectedOptions:p,firstSelectedOptionIndex:y,hasNonExistentValue:I}=Ye(r,a,v,T),f=!t,h=s&&f;s&&!f&&console.warn("Native select does not support provided props (see stories)");const O="Value no longer available for re-selection",N=I&&!E?c?o.jsxs("div",{children:[o.jsx("div",{children:O}),o.jsx("div",{children:c})]}):O:c,C=I&&d&&!E?o.jsxs("div",{children:[o.jsx("div",{children:O}),o.jsx("div",{children:d})]}):d,R=(q,M)=>{if(S){const A=t?M.map(F=>i?F.value:F):i?M.value:M;A&&g(A)}else{const A=!(q instanceof Event),F=t?M:M.value;if(A)q.target.name=n,q.target.value=F,t||(q.target.label=M.label),g(q);else{const $={...q,target:{...q.target,name:n,value:F,label:t?void 0:M.label}};g($)}}};return h?o.jsx(Oe,{...e,options:l,selectedOption:p,onChange:R,hasNonExistentValue:I,warning:N,error:C,testId:_}):o.jsx(Pe,{...e,options:l,selectedOptions:p,onChange:R,multi:t,firstSelectedOptionIndex:y,warning:N,error:C,testId:_,closeOnOptionActionClick:m})};Rt.__docgenInfo={description:"",methods:[],displayName:"Select",props:{name:{required:!1,tsType:{name:"string"},description:""},multi:{required:!1,tsType:{name:"boolean"},description:""},options:{required:!1,tsType:{name:"Array",elements:[{name:"ISelectSelectedOption"}],raw:"ISelectSelectedOption[]"},description:""},value:{required:!1,tsType:{name:"any"},description:""},native:{required:!1,tsType:{name:"boolean"},description:""},onChange:{required:!1,tsType:{name:"signature",type:"function",raw:`(
|
|
50
|
-
event: TChangeEvent<T>,
|
|
51
|
-
...additionalProps: { [key: string]: any }[]
|
|
52
|
-
) => void`,signature:{arguments:[{type:{name:"intersection",raw:`ChangeEvent<T> & {
|
|
53
|
-
target:
|
|
54
|
-
| T
|
|
55
|
-
| { name: string; value: any; label?: string; files?: FileList | null };
|
|
56
|
-
}`,elements:[{name:"ChangeEvent",elements:[{name:"T"}],raw:"ChangeEvent<T>"},{name:"signature",type:"object",raw:`{
|
|
57
|
-
target:
|
|
58
|
-
| T
|
|
59
|
-
| { name: string; value: any; label?: string; files?: FileList | null };
|
|
60
|
-
}`,signature:{properties:[{key:"target",value:{name:"union",raw:`| T
|
|
61
|
-
| { name: string; value: any; label?: string; files?: FileList | null }`,elements:[{name:"T"},{name:"signature",type:"object",raw:"{ name: string; value: any; label?: string; files?: FileList | null }",signature:{properties:[{key:"name",value:{name:"string",required:!0}},{key:"value",value:{name:"any",required:!0}},{key:"label",value:{name:"string",required:!1}},{key:"files",value:{name:"union",raw:"FileList | null",elements:[{name:"FileList"},{name:"null"}],required:!1}}]}}],required:!0}}]}}]},name:"event"},{type:{name:"Array",elements:[{name:"signature",type:"object",raw:"{ [key: string]: any }",signature:{properties:[{key:{name:"string"},value:{name:"any",required:!0}}]}}],raw:"{ [key: string]: any }[]"},name:"additionalProps",rest:!0}],return:{name:"void"}}},description:""},deprecatedEventHandler:{required:!1,tsType:{name:"boolean"},description:""},autoScroll:{required:!1,tsType:{name:"boolean"},description:""},warning:{required:!1,tsType:{name:"union",raw:"TStringOrNumber | ReactNode",elements:[{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]},{name:"ReactNode"}]},description:""},error:{required:!1,tsType:{name:"union",raw:"TStringOrNumber | ReactNode",elements:[{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]},{name:"ReactNode"}]},description:""},checkNonExistentValues:{required:!1,tsType:{name:"boolean"},description:""},closeOnOptionActionClick:{required:!1,tsType:{name:"boolean"},description:""},small:{required:!1,tsType:{name:"boolean"},description:""},width:{required:!1,tsType:{name:"union",raw:"TStringOrNumber | null",elements:[{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]},{name:"null"}]},description:""},borderRadius:{required:!1,tsType:{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]},description:""},onCreate:{required:!1,tsType:{name:"signature",type:"function",raw:"(evt: any) => any",signature:{arguments:[{type:{name:"any"},name:"evt"}],return:{name:"any"}}},description:""},disabled:{required:!1,tsType:{name:"boolean"},description:""},placeholder:{required:!1,tsType:{name:"union",raw:"string | null",elements:[{name:"string"},{name:"null"}]},description:""},isInTable:{required:!1,tsType:{name:"boolean"},description:""},clearable:{required:!1,tsType:{name:"boolean"},description:""},searchable:{required:!1,tsType:{name:"boolean"},description:""},maxTooltipWidth:{required:!1,tsType:{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]},description:""},autoLayerWidth:{required:!1,tsType:{name:"boolean"},description:""},right:{required:!1,tsType:{name:"boolean"},description:""},tabIndex:{required:!1,tsType:{name:"number"},description:""},testId:{required:!1,tsType:{name:"string"},description:""}}};export{Rt as S};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{i as y}from"./helpers-JJxzGegQ.js";import{M as m}from"./types-BmbYqTX_.js";const o=n=>n instanceof Array,v=(n,r)=>r&&Array.isArray(n)?n.map(t=>typeof t=="string"||typeof t=="number"?{label:t,value:t}:t):n,f=(n,r)=>{if(r!==null&&typeof r=="object"&&r.hasOwnProperty("label")&&r.hasOwnProperty("value"))return r;{const t=r!==null&&typeof r=="object"&&r.hasOwnProperty("value")?r.value:r;return(Array.isArray(n)?n.filter(e=>e.type!==m.HEADING).find(e=>e.value==t):void 0)||(y(t)?void 0:{value:t,label:t})}},p=(n,r)=>o(r)?r.map(u=>f(n,u)).filter(u=>u!==void 0):r===null?void 0:f(n,r),A=n=>Array.isArray(n)&&n.some(r=>typeof r=="string"||typeof r=="number"),b=(n,r)=>{const t=r instanceof Array?r.length?r[0]:null:r,u=t==null?null:typeof t=="string"||typeof t=="number"?t:t.value,e=n.filter(l=>l.type!==m.HEADING).findIndex(l=>typeof l=="string"||typeof l=="number"?l==u:l.value==u);return e===-1?null:e},S=(n,r)=>!(o(r)?r:y(r)?[]:[r]).every(e=>n.find(a=>a.value===e.value)!==void 0),g=(n,r,t,u)=>{const e=Array.isArray(n)?n:[],l=o(r),a=A(e),i=v(e,a),c=t?b(e,r):null,s=p(i,r),d=u&&s!==void 0?S(i,s):!1;return{options:i,selectedOptions:s,multi:l,simpleInputs:a,firstSelectedOptionIndex:c,hasNonExistentValue:d}};export{g as s};
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-eps93zm2.js";import{r as I}from"./index-DhsZuJvc.js";import{T as b}from"./tabs-BoToLVEP.js";import"./index-Bk2sglWO.js";import"./disabled-context-rmpd7YJS.js";import"./lodash-c4VUpsOs.js";import"./badge-CLQ59MDF.js";import"./select.input-CJed_LLR.js";import"./helpers-JJxzGegQ.js";import"./types-BmbYqTX_.js";const U={title:"Navigation/Tabs",component:b,args:{name:"example",options:[{label:"Tab",value:0},{label:"Tab",value:1},{label:"With Badge",value:2,badge:"3"},{label:"Invalid",value:3,invalid:!0},{label:"Disabled",value:4,disabled:!0},{label:"Hidden tab",value:5,hidden:!0}],value:0}},s=i=>e.jsx(b,{...i}),d=s.bind({}),r=s.bind({});r.args={children:[e.jsx("div",{label:"Tab 0",children:e.jsx("h3",{children:"Tab 0 Content"})}),e.jsx("div",{label:"Tab 1",hidden:!0,children:e.jsx("h3",{children:"Tab 1 Content"})}),e.jsx("div",{label:"Tab 2",disabled:!0,children:e.jsx("h3",{children:"Tab 2 Content"})}),e.jsx("div",{label:"Tab 3",children:e.jsx("h3",{children:"Tab 3 Content"})}),e.jsx("div",{label:"Tab 4",children:e.jsx("h3",{children:"Tab 4 Content"})})]};const l=s.bind({});l.args={margin:!1};const a=s.bind({});a.parameters={layout:"fullscreen",docs:{description:{story:"When you want the divider to fill the edges of its container."}}};a.args={padding:!0};const t=s.bind({});t.args={options:[{label:"Tab 0",value:0},{label:"Tab 1",value:1},{label:"Tab 2",value:2},{label:"Tab 3",value:3,right:!0},{label:"Tab 4",value:4,right:!0}]};const o=()=>{const i=[{label:"Strawberries",value:"strawberries"},{label:"Bananas",value:"bananas"},{label:"Apples",value:"apples",disabled:!0},{label:"Pomegranates",value:"pomegranates"}],[p,D]=I.useState(i[0]);return e.jsxs(e.Fragment,{children:[e.jsx(b,{name:"example",value:p,options:i,onChange:c=>{const{value:H,label:z}=(c==null?void 0:c.target)??{};D({value:H,label:z})}}),e.jsxs("span",{children:["Eating ",p.value,"..."]})]})},n=s.bind({});n.args={options:[{label:"Title Case Label",value:0},{label:"Mixed case label",value:1},{label:"lower case label",value:2}]};o.__docgenInfo={description:"",methods:[],displayName:"Managed"};var u,m,g;d.parameters={...d.parameters,docs:{...(u=d.parameters)==null?void 0:u.docs,source:{originalSource:"args => <Tabs {...args} />",...(g=(m=d.parameters)==null?void 0:m.docs)==null?void 0:g.source}}};var T,v,h;r.parameters={...r.parameters,docs:{...(T=r.parameters)==null?void 0:T.docs,source:{originalSource:"args => <Tabs {...args} />",...(h=(v=r.parameters)==null?void 0:v.docs)==null?void 0:h.source}}};var x,j,S;l.parameters={...l.parameters,docs:{...(x=l.parameters)==null?void 0:x.docs,source:{originalSource:"args => <Tabs {...args} />",...(S=(j=l.parameters)==null?void 0:j.docs)==null?void 0:S.source}}};var C,f,w;a.parameters={...a.parameters,docs:{...(C=a.parameters)==null?void 0:C.docs,source:{originalSource:"args => <Tabs {...args} />",...(w=(f=a.parameters)==null?void 0:f.docs)==null?void 0:w.source}}};var M,y,E;t.parameters={...t.parameters,docs:{...(M=t.parameters)==null?void 0:M.docs,source:{originalSource:"args => <Tabs {...args} />",...(E=(y=t.parameters)==null?void 0:y.docs)==null?void 0:E.source}}};var _,A,N;o.parameters={...o.parameters,docs:{...(_=o.parameters)==null?void 0:_.docs,source:{originalSource:`() => {
|
|
2
|
-
const options = [{
|
|
3
|
-
label: 'Strawberries',
|
|
4
|
-
value: 'strawberries'
|
|
5
|
-
}, {
|
|
6
|
-
label: 'Bananas',
|
|
7
|
-
value: 'bananas'
|
|
8
|
-
}, {
|
|
9
|
-
label: 'Apples',
|
|
10
|
-
value: 'apples',
|
|
11
|
-
disabled: true
|
|
12
|
-
}, {
|
|
13
|
-
label: 'Pomegranates',
|
|
14
|
-
value: 'pomegranates'
|
|
15
|
-
}];
|
|
16
|
-
const [selectedTab, setSelectedTab] = useState(options[0]);
|
|
17
|
-
return <>
|
|
18
|
-
<Tabs name="example" value={selectedTab} options={options} onChange={evt => {
|
|
19
|
-
const {
|
|
20
|
-
value,
|
|
21
|
-
label
|
|
22
|
-
} = ((evt?.target ?? {}) as any);
|
|
23
|
-
setSelectedTab({
|
|
24
|
-
value,
|
|
25
|
-
label
|
|
26
|
-
});
|
|
27
|
-
}} />
|
|
28
|
-
<span>Eating {selectedTab.value}...</span>
|
|
29
|
-
</>;
|
|
30
|
-
}`,...(N=(A=o.parameters)==null?void 0:A.docs)==null?void 0:N.source}}};var P,W,B;n.parameters={...n.parameters,docs:{...(P=n.parameters)==null?void 0:P.docs,source:{originalSource:"args => <Tabs {...args} />",...(B=(W=n.parameters)==null?void 0:W.docs)==null?void 0:B.source}}};const V=["Default","WithChildren","NoMargin","HorizontalPadding","Alignment","Managed","TestTitleCase"];export{t as Alignment,d as Default,a as HorizontalPadding,o as Managed,l as NoMargin,n as TestTitleCase,r as WithChildren,V as __namedExportsOrder,U as default};
|
|
@@ -1,316 +0,0 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-eps93zm2.js";import{r as m}from"./index-DhsZuJvc.js";import{d as l}from"./index-C0x1JmaP.js";import{c as Un}from"./index-Bk2sglWO.js";import{u as wn}from"./use-previous-D775JrO6.js";import{M as Ee}from"./actions-Tr0wIZve.js";import{I as xn}from"./input-group-addon-D68iUKV2.js";import{B as g}from"./button-CzvLc2io.js";import{T as In}from"./tooltip-1V7clEnw.js";import{I as Tn}from"./input-group-BaRSJAEN.js";import{S as I}from"./spacer-BWoNR27H.js";import{T as Yt}from"./text-B3-TSWok.js";import{M as Ne}from"./types-BmbYqTX_.js";import{l as V}from"./lodash-c4VUpsOs.js";import{i as Vn}from"./helpers-JJxzGegQ.js";import{N as kn}from"./number-input-C8O0lnql.js";import{D as jn}from"./divider-DY9nJ_7N.js";import{R as Zt,C as ye}from"./row-Bmiy2Lh0.js";import{F as T}from"./field-C5_fLDpy.js";import{M as be}from"./message-DQ3q8XF9.js";import{w as de,u as d,e as w,f as Qt,a as Xt}from"./index-DMAnyMX5.js";import"./index-DRSy5Ssd.js";import"./common-types-Sih75Sav.js";import"./disabled-context-rmpd7YJS.js";import"./icon-BP4BO6-k.js";import"./objectWithoutPropertiesLoose-CAYKN5F1.js";import"./inheritsLoose-DR8r8Ogv.js";import"./index-CEuq6vkz.js";import"./types-Dx2TtIG9.js";import"./badge-CLQ59MDF.js";import"./spinner-AWUe4xwQ.js";import"./index-CUZDtIZe.js";import"./enum-Bnn40S8Q.js";import"./input-DTXbDJaL.js";import"./styled-components.browser.esm-BQ9GQzDc.js";import"./label-hiSz3I8H.js";import"./help-icon-41R-Z9N1.js";import"./index-CF7H4eMJ.js";const Sn=()=>{const t=m.useRef(null);return m.useLayoutEffect(()=>{t.current&&(t.current(),t.current=null)}),n=>{t.current=n}},En=(t,a)=>{const n=a==null?void 0:a[t];return n||(console.log(`Warning: 'unitTemplate' missing for '${t}'. Using initial unit, preferred unit or value unit.`),l.unitFromQuantity(t)??"")};var b=(t=>(t.CUSTOM="custom",t.PREDEFINED="predefined",t))(b||{});const en=t=>t==="undefined"||t===void 0||t===""||t==="null"||t===null||t==="NaN"||isNaN(t),tn=(t="",a,n="",s=!1)=>{if(s)return t;if(a&&!en(t))try{const i=l.isValueWithUnit(t)?t:l.withUnit(t,n),p=l.convertSamePrecision(i,a);return l.getValue(p)}catch{}return t},Nn=t=>t?!!l.getUnit(t):!1,O=(t="",a,n,s)=>{if(s)return t;const i=Nn(t)||l.isValueWithUnit(t),p=l.getValue(t);return en(p)?p:i?tn(p,a,n,s):t},Ae=t=>V.isObject(t)&&!V.isArray(t)&&!V.isFunction(t)?V.get(t,"fieldName",""):typeof t=="string"?t:"",qe=(t="")=>{var a;return(a=l.KNOWN_UNITS)==null?void 0:a.includes(t)},An=(t,a)=>{const n=l.getUnit(t||"");return qe(a)&&qe(n)};let qn=m.createContext(null);const Dn=()=>m.useContext(qn),Fn="_predefinedMenuActive_ye9w9_1",Pn="_inputWrapper_ye9w9_4",De={predefinedMenuActive:Fn,inputWrapper:Pn},c=({name:t,placeholder:a="",disabled:n=!1,disabledUnit:s=!1,error:i=null,left:p=!1,small:o=!1,width:h="100%",value:v,unitkey:ie="",initUnit:nn,noConversion:an=!1,onChange:ce=V.noop,onClick:_n=V.noop,onFocus:rn=V.noop,onSwitchUnit:Ce=V.noop,unitTemplate:Ue,doNotConvertValue:B=!1,testId:E,warning:we=null,predefinedOptions:x,initialPredefinedOption:sn=!1,shouldLinkAutomaticly:xe=!0,selectedPredefinedOptionKey:Ie,validationCallback:ln=()=>({name:"",error:null}),disabledValidation:un=!1,allowEmpty:on=!1,autoValue:k})=>{const N=Dn(),dn=Sn();typeof v=="number"&&(v=`${v}`);const[Te="",_=""]=v!==void 0?l.split(v):[],Ve=k?l.getUnit(k):"",ke=m.useMemo(()=>En(ie,Ue||(N==null?void 0:N.unitTemplate)),[ie,Ue,N==null?void 0:N.unitTemplate]),cn=An(v,ke),C=nn||ke||_,mn=wn(C),je=O(v,C,_,B),Se=O(k,C,Ve,B),pn=je!==""?{value:je,unit:C}:Se!==""?{value:Se,unit:C}:{value:Te,unit:_},[f,me]=m.useState(pn),[j,pe]=m.useState(sn?b.PREDEFINED:b.CUSTOM),ge=Te===""&&k,gn=!!(un||k||a&&Vn(v)),M=x&&x.find(r=>{if(!(r!=null&&r.value))return;if(Ie)return Ie===r.valueKey;const u=l.isValueWithUnit(r.value)?l.getUnit(r.value):"";return l.withUnit(tn(v,u),u)===r.value}),hn=()=>{if(ie)try{const r=ge?k:v??"";let u=l.altUnitsList(r,ie);return l.getValue(r)===""?u.map(U=>["",U[1]]):u}catch{return null}},vn=r=>{const u=Ae(t),U=r.target,{value:S,selectionStart:ue}=U,ve=l.withUnit(S,(f==null?void 0:f.unit)||"");ce({target:{value:ve,name:u}});const[fe,Cn]=l.split(ve);me({value:fe,unit:Cn}),dn(()=>{U.selectionStart=ue,U.selectionEnd=ue})},fn=(r,u)=>{u===f.unit||isNaN(Number(r))||(me({value:r,unit:u}),Ce&&Ce(u))};m.useEffect(()=>{if(C){let r,u="";mn!==C?(r=O(v,C,_,B),u=C):l.withUnit(f.value,f.unit)!==v&&(r=O(v,f.unit,_,B),u=f.unit),r!==void 0&&me({value:r,unit:u}),x&&pe(M&&xe?b.PREDEFINED:b.CUSTOM)}},[C,v,i,xe]);const re=hn(),se=l.label(f.unit)||f.unit||"",yn=an||!re||re&&re.length===1,he=Ae(t);let le;const bn=r=>{const u=r!=null&&r.value?r.value:"",[U="",S=""]=l.isValueWithUnit(u)?l.split(u):[u];return{type:Ne.OPTION,inline:!0,onClick:()=>{l.validateNumber(U).valid&&!n&&(pe(b.PREDEFINED),ce({target:{value:u,name:typeof t=="string"?t:(t==null?void 0:t.fieldName)||"",predefinedSelected:!0,predefinedOption:r}}))},label:e.jsxs(e.Fragment,{children:[e.jsx(Yt,{children:r.label}),e.jsx(I,{width:"20px",height:"0"})]}),description:l.isValueWithUnit(u)?`${U} ${S}`:u,selected:M===r&&j===b.PREDEFINED}};if(le=[{type:Ne.OPTION,inline:!0,onClick:()=>{j!==b.CUSTOM&&!n&&ce({target:{value:l.withUnit(f.value,f.unit),name:typeof t=="string"?t:(t==null?void 0:t.fieldName)||""}})},label:"Custom",selected:j===b.CUSTOM}],x!=null&&x.length){const r=x.map(bn);le=[...le,...r]}return e.jsx("div",{className:j===b.PREDEFINED?Un(De.predefinedMenuActive):"",children:e.jsxs(Tn,{small:o,width:h,children:[x&&e.jsx(In,{text:j===b.PREDEFINED?M==null?void 0:M.label:"",children:e.jsx(Ee,{maxHeight:380,groupOrder:"first",testId:E&&`${E}-predefined-menu`,disabled:n,menu:{colored:!0,trigger:"Component",component:e.jsx(g,{groupOrder:"first",active:j===b.PREDEFINED,icon:j===b.PREDEFINED?"link":"unlink"}),small:o,sections:le}})}),e.jsx("div",{className:De.inputWrapper,children:e.jsx(kn,{name:he,testId:E,disabled:n,placeholder:ge?O(k,f.unit,Ve,B):a,value:f.value,onChange:vn,onFocus:rn,error:i===null?void 0:i,warning:we===null?void 0:we,left:p,allowEmpty:on,validationCallback:(r,u)=>ln(he,u),groupOrder:x?"middle":"first",disableInternalErrorValidationMessages:gn},he)}),se&&(yn||!cn?e.jsx(xn,{groupOrder:"last",children:se}):e.jsx(Ee,{maxHeight:380,groupOrder:"last",disabled:s,testId:E&&`${E}-menu`,menu:{label:se,trigger:"DropDownButton",small:o,sections:re.map(([r,u,U])=>{const S=U||u||"";return{type:"Option",label:isNaN(Number(r))?"":r,inline:!0,onClick:fe=>{fe.stopPropagation(),fn(ge?"":r,u)},description:S,selected:S===se,testId:`${E}-unit-${S}`}})}}))]})})};c.__docgenInfo={description:"",methods:[],displayName:"UnitInput",props:{name:{required:!0,tsType:{name:"union",raw:"string | { fieldName?: string }",elements:[{name:"string"},{name:"signature",type:"object",raw:"{ fieldName?: string }",signature:{properties:[{key:"fieldName",value:{name:"string",required:!1}}]}}]},description:""},placeholder:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:"''",computed:!1}},disabled:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},disabledUnit:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},error:{required:!1,tsType:{name:"union",raw:"string | null | boolean",elements:[{name:"string"},{name:"null"},{name:"boolean"}]},description:"",defaultValue:{value:"null",computed:!1}},left:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},small:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},width:{required:!1,tsType:{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]},description:"",defaultValue:{value:"'100%'",computed:!1}},value:{required:!1,tsType:{name:"string"},description:""},unitkey:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:"''",computed:!1}},initUnit:{required:!1,tsType:{name:"string"},description:""},noConversion:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},doNotConvertValue:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},testId:{required:!1,tsType:{name:"string"},description:""},warning:{required:!1,tsType:{name:"union",raw:"string | boolean | null",elements:[{name:"string"},{name:"boolean"},{name:"null"}]},description:"",defaultValue:{value:"null",computed:!1}},predefinedOptions:{required:!1,tsType:{name:"union",raw:"IPredefinedOption[] | null",elements:[{name:"Array",elements:[{name:"IPredefinedOption"}],raw:"IPredefinedOption[]"},{name:"null"}]},description:""},initialPredefinedOption:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},shouldLinkAutomaticly:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}},selectedPredefinedOptionKey:{required:!1,tsType:{name:"string"},description:""},validationCallback:{required:!1,tsType:{name:"signature",type:"function",raw:"(name: string, error: string | null) => any",signature:{arguments:[{type:{name:"string"},name:"name"},{type:{name:"union",raw:"string | null",elements:[{name:"string"},{name:"null"}]},name:"error"}],return:{name:"any"}}},description:"",defaultValue:{value:"() => ({ name: '', error: null })",computed:!1}},disabledValidation:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},allowEmpty:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},autoValue:{required:!1,tsType:{name:"string"},description:""},onChange:{required:!1,tsType:{name:"signature",type:"function",raw:"(event: TChangeEvent | ICustomChangeEvent) => void",signature:{arguments:[{type:{name:"union",raw:"TChangeEvent | ICustomChangeEvent",elements:[{name:"intersection",raw:`ChangeEvent<T> & {
|
|
2
|
-
target:
|
|
3
|
-
| T
|
|
4
|
-
| { name: string; value: any; label?: string; files?: FileList | null };
|
|
5
|
-
}`,elements:[{name:"ChangeEvent",elements:[{name:"T"}],raw:"ChangeEvent<T>"},{name:"signature",type:"object",raw:`{
|
|
6
|
-
target:
|
|
7
|
-
| T
|
|
8
|
-
| { name: string; value: any; label?: string; files?: FileList | null };
|
|
9
|
-
}`,signature:{properties:[{key:"target",value:{name:"union",raw:`| T
|
|
10
|
-
| { name: string; value: any; label?: string; files?: FileList | null }`,elements:[{name:"T"},{name:"signature",type:"object",raw:"{ name: string; value: any; label?: string; files?: FileList | null }",signature:{properties:[{key:"name",value:{name:"string",required:!0}},{key:"value",value:{name:"any",required:!0}},{key:"label",value:{name:"string",required:!1}},{key:"files",value:{name:"union",raw:"FileList | null",elements:[{name:"FileList"},{name:"null"}],required:!1}}]}}],required:!0}}]}}]},{name:"ICustomChangeEvent"}]},name:"event"}],return:{name:"void"}}},description:"",defaultValue:{value:"noop",computed:!0}},onSwitchUnit:{required:!1,tsType:{name:"signature",type:"function",raw:"(unit: string) => void",signature:{arguments:[{type:{name:"string"},name:"unit"}],return:{name:"void"}}},description:"",defaultValue:{value:"noop",computed:!0}},onClick:{required:!1,tsType:{name:"MouseEventHandler",elements:[{name:"HTMLInputElement"}],raw:"MouseEventHandler<HTMLInputElement>"},description:"",defaultValue:{value:"noop",computed:!0}},onFocus:{required:!1,tsType:{name:"FocusEventHandler",elements:[{name:"HTMLInputElement"}],raw:"FocusEventHandler<HTMLInputElement>"},description:"",defaultValue:{value:"noop",computed:!0}},unitTemplate:{required:!1,tsType:{name:"Record",elements:[{name:"string"},{name:"any"}],raw:"Record<string, any>"},description:""}}};const{useArgs:Bn}=__STORYBOOK_MODULE_PREVIEW_API__,xa={title:"Forms/UnitInput",component:c,args:{name:"example",unitkey:"length",value:"123|m"}},y=t=>{const[a,n]=Bn(),s=i=>{n({value:i.target.value})};return e.jsx(c,{...t,onChange:s})},oe=y.bind({}),W=y.bind({});W.args={initUnit:"ft",unitTemplate:{length:"ft"}};const R=y.bind({});R.args={value:'123|"',unitkey:'"'};const L=y.bind({});L.args={width:"180px"};const H=y.bind({});H.args={noConversion:!0};const K=y.bind({});K.args={small:!0};const A=()=>{const[t,a]=m.useState("123|m");return e.jsx(c,{name:"example",onChange:n=>a(n.target.value),placeholder:"Type a value...",value:t,initUnit:"m",unitkey:"depth",unitTemplate:{depth:"m"},testId:"testId"})};A.play=async({canvasElement:t,step:a})=>{const n=de(t),s=de(t.ownerDocument.body);await a("Shows validation error for non-numeric input",async()=>{const i=n.getByTestId("testId");await d.clear(i),await d.type(i,"123x45s6"),await d.click(t),await w(n.getByDisplayValue("123x45s6")).toBeInTheDocument(),await Qt.mouseOver(i),await Xt(()=>{w(s.getByText("Must be a numerical value")).toBeInTheDocument()})})};const $=y.bind({});$.args={error:"Error message goes here"};const G=y.bind({});G.args={value:"asas123asd|%"};const q=y.bind({});q.args={disabled:!0,disabledUnit:!0};q.parameters={docs:{description:{story:"Each part of UnitInput can be disabled separately. `disabled` disables only the main text input, `disabledUnit` disables only the unit menu. **Needs review (comes from Reservoir input requirements)**"}}};const z=y.bind({});z.args={disabled:!0,disabledUnit:!0,noConversion:!0};const J=y.bind({});J.args={disabledUnit:!0,unitkey:void 0};const Y=y.bind({});Y.args={disabledUnit:!0,unitkey:"length"};const Z=y.bind({});Z.args={disabledUnit:!1,disabled:!0};const D=t=>{const[a,n]=m.useState("123|m"),[s,i]=m.useState("223|m"),[p,o]=m.useState("ft");return e.jsxs(e.Fragment,{children:[e.jsx(g,{label:"Change initUnit",onClick:()=>o(p==="m"?"ft":"m")}),e.jsx(I,{}),e.jsx(g,{label:"Change value",onClick:()=>n(a==="123|m"?"456|m":"123|m")}),e.jsx(I,{}),e.jsx(c,{name:"example",onChange:h=>{n(h.target.value)},unitkey:"length",value:a,initUnit:p,onSwitchUnit:o}),e.jsx(I,{}),e.jsx(c,{name:"example2",onChange:h=>{i(h.target.value)},unitkey:"length",value:s,initUnit:p,onSwitchUnit:o}),e.jsx(jn,{}),e.jsx("h4",{children:"Without initUnit property (taken from the redux store)"}),e.jsx(c,{name:"example",onChange:h=>{n(h.target.value)},unitkey:"length",value:a,onSwitchUnit:o}),e.jsx(c,{name:"example2",onChange:h=>{i(h.target.value)},unitkey:"length",value:s,onSwitchUnit:o})]})};D.parameters={docs:{description:{story:"[OW-4380](https://oliasoft.atlassian.net/browse/OW-4380?atlOrigin=eyJpIjoiMmM1N2RkNWU3Mjk5NDYxY2E0YzhkMzk5ZTVmZTJhMjciLCJwIjoiaiJ9)"}}};const Q=y.bind({});Q.args={predefinedOptions:[{label:"bottom of casing",value:"12|km"},{label:"mud weight at shoe depth",value:"8|mm"}]};const F=()=>{const t="500px",[a,n]=m.useState(void 0);return e.jsxs(e.Fragment,{children:[e.jsx("h4",{children:"Different edge cases such as +/- infinity, undefined, NaN, null:"}),e.jsxs(Zt,{children:[e.jsxs(ye,{width:"25%",children:[e.jsx(g,{label:"Change value infinity",onClick:()=>n(1/0)}),e.jsx("br",{}),e.jsx(g,{label:"Change value -infinity",onClick:()=>n(-1/0)}),e.jsx("br",{}),e.jsx(g,{label:"Change value null",onClick:()=>n(null)}),e.jsx("br",{}),e.jsx(g,{label:"Change value - undefined",onClick:()=>n(void 0)}),e.jsx("br",{}),e.jsx(g,{label:"Change value - NaN",onClick:()=>n(NaN)}),e.jsx("br",{}),e.jsx(g,{label:"Change value - nothing (empty)",onClick:()=>n(void 0)}),e.jsx("br",{}),e.jsx(g,{label:"Change value - empty string",onClick:()=>n("")})]}),e.jsxs(ye,{width:"25%",children:[e.jsx(g,{label:"Change value infinity|m",onClick:()=>n("Infinity|m")}),e.jsx("br",{}),e.jsx(g,{label:"Change value -infinity|m",onClick:()=>n("-Infinity|m")}),e.jsx("br",{}),e.jsx(g,{label:"Change value null|m",onClick:()=>n("null|m")}),e.jsx("br",{}),e.jsx(g,{label:"Change value - undefined|m",onClick:()=>n("undefined|m")}),e.jsx("br",{}),e.jsx(g,{label:"Change value - NaN|m",onClick:()=>n("NaN|m")}),e.jsx("br",{}),e.jsx(g,{label:"Change value - nothing (empty)|m",onClick:()=>n("|m")})]})]}),e.jsx("br",{}),e.jsx(T,{label:"Normal PUI",children:e.jsx(c,{name:"example1",onChange:s=>n(s.target.value),value:a,unitkey:"length",width:t,placeholder:"value|unit"})}),e.jsx(T,{label:"Disabled validation",children:e.jsx(c,{name:"example2",onChange:s=>n(s.target.value),value:a,unitkey:"length",disabledValidation:!0,width:t})}),e.jsx(T,{label:"Disabled validation and manual error",children:e.jsx(c,{name:"example3",onChange:s=>n(s.target.value),value:a,unitkey:"length",error:"test",disabledValidation:!0,width:t})}),e.jsx(be,{message:{heading:"Current value inside PUI: "+a,visible:!0}})]})},X=()=>{const t="500px",[a,n]=m.useState("1|m"),[s,i]=m.useState("|m"),p="123|km";return e.jsxs(e.Fragment,{children:[e.jsx("h4",{children:"Different cases for automatic (placeholder) values:"}),e.jsx(Zt,{children:e.jsxs(ye,{width:"25%",children:[e.jsx(g,{label:"Change value to ''",onClick:()=>n("")}),e.jsx("br",{}),e.jsx(g,{label:"Change value to 1",onClick:()=>n("1")}),e.jsx("br",{}),e.jsx(g,{label:"Change value to 1|m",onClick:()=>n("1|m")}),e.jsx("br",{}),e.jsx(g,{label:"Change value to |m - empty value",onClick:()=>n("|m")})]})}),e.jsx("br",{}),e.jsx(T,{label:"Normal PUI (placeholder + auto)",children:e.jsx(c,{name:"example1",onChange:o=>n(o.target.value),value:a,unitkey:"length",width:t,placeholder:"value|unit",autoValue:p})}),e.jsx(T,{label:"Normal PUI (only auto)",children:e.jsx(c,{name:"example1",onChange:o=>n(o.target.value),value:a,unitkey:"length",width:t,autoValue:p})}),e.jsx(T,{label:"Empty PUI with autoValue",children:e.jsx(c,{name:"example1",onChange:o=>i(o.target.value),value:s,unitkey:"length",width:t,autoValue:p})}),e.jsx(T,{label:"Normal PUI (only placeholder)",children:e.jsx(c,{name:"example1",onChange:o=>n(o.target.value),value:a,unitkey:"length",width:t,placeholder:"Placeholder test"})}),e.jsx(T,{label:"Normal PUI (placeholder + allowEmpty)",children:e.jsx(c,{name:"example1",onChange:o=>n(o.target.value),value:a,unitkey:"length",width:t,placeholder:"Placeholder test",allowEmpty:!0})}),e.jsx(be,{message:{heading:"Current value inside PUI: "+a,visible:!0}})]})};F.parameters={docs:{description:{story:"[OW-8884](https://oliasoft.atlassian.net/browse/OW-8884)"}}};const ee=()=>{const[t,a]=m.useState("123|%"),[n,s]=m.useState(null),i="This should be visible when an error appears",p=(o,h)=>(s(h),{name:o,error:h});return e.jsxs(e.Fragment,{children:[e.jsx("h4",{children:"3rd party validation message when inputting invalid value:"}),e.jsx(c,{name:"example",onChange:o=>a(o.target.value),error:!n||i,validationCallback:p,value:t}),e.jsx("br",{}),e.jsx(I,{}),e.jsx("h4",{children:"Original validation message: "}),e.jsx(be,{message:{heading:n,visible:!0}})]})},te=()=>{const[t,a]=m.useState("123|m"),[n,s]=m.useState(""),[i,p]=m.useState("km"),o=()=>{p("ft"),s("placeholder"),a("|m")};return e.jsxs(e.Fragment,{children:[e.jsx("h4",{children:"Empty value case:"}),e.jsx(c,{name:"example",onChange:h=>a(h.target.value),value:t,allowEmpty:!0,placeholder:n,initUnit:i,unitkey:"length"}),e.jsx("br",{}),e.jsx(I,{}),e.jsx(g,{label:"Change value |m and unit ft",onClick:()=>o()})]})},ne=()=>{const[t,a]=m.useState("123|m"),[n,s]=m.useState("m");return e.jsxs(e.Fragment,{children:[e.jsx(c,{name:"example",onChange:i=>a(i.target.value),value:t,initUnit:n,unitkey:"length",onSwitchUnit:s}),e.jsx(I,{}),e.jsx(c,{name:"example",onChange:i=>a(i.target.value),value:t,initUnit:n,unitkey:"length",onSwitchUnit:s})]})},ae=()=>e.jsxs(e.Fragment,{children:[e.jsx(Yt,{faint:!0,children:"Reproduce OW-10614 rounding noise bug when storing values in a different unit to the display unit"}),e.jsx(I,{}),e.jsx(c,{name:"example",onChange:()=>{},value:l.withUnit(l.convertAndGetValue("9750|psi","bar"),"bar"),initUnit:"psi",unitkey:"pressure",unitTemplate:{pressure:"psi"}}),e.jsx(I,{}),e.jsx(c,{name:"example2",onChange:()=>{},value:l.withUnit(l.convertAndGetValue("8642|lbf","tonneForce"),"tonneForce"),initUnit:"lbf",unitkey:"force",unitTemplate:{force:"tonneForce"}})]}),P=()=>{const[t,a]=m.useState("123|m");return e.jsx(c,{name:"example",onChange:n=>a(n.target.value),value:t,initUnit:"m",unitkey:"depth",unitTemplate:{depth:"m"},testId:"testId"})};P.play=async({canvasElement:t,step:a})=>{const n=de(t),s=de(t.ownerDocument.body);await a("Can enter decimal values",async()=>{const i=n.getByTestId("testId");await d.clear(i),await d.type(i,"123.123456789"),await d.click(t),await w(n.getByDisplayValue("123.123456789")).toBeInTheDocument()}),await a("Can enter scientific notation",async()=>{const i=n.getByTestId("testId");await d.clear(i),await d.type(i,"-1.12e3"),await d.click(t),await w(n.getByDisplayValue("-1.12e3")).toBeInTheDocument()}),await a("Can enter comma decimals (converts to dot)",async()=>{const i=n.getByTestId("testId");await d.clear(i),await d.type(i,"123,456"),await d.click(t),await w(n.getByDisplayValue("123.456")).toBeInTheDocument()}),await a("Can enter small numbers",async()=>{const i=n.getByTestId("testId");await d.clear(i),await d.type(i,"0.0000000023"),await d.click(t),await w(n.getByDisplayValue("0.0000000023")).toBeInTheDocument()}),await a("Can enter large numbers",async()=>{const i=n.getByTestId("testId");await d.clear(i),await d.type(i,"999999999999"),await d.click(t),await w(n.getByDisplayValue("999999999999")).toBeInTheDocument()}),await a("Can convert units",async()=>{const i=n.getByTestId("testId"),p=n.getByTestId("testId-menu");await d.clear(i),await d.type(i,"456.1"),await d.click(t),await d.click(p),await d.click(s.getByTestId("testId-unit-ft")),await w(n.getByDisplayValue("1496")).toBeInTheDocument()}),await a("Shows validation error for non-numeric input",async()=>{const i=n.getByTestId("testId");await d.clear(i),await d.type(i,"123x45s6"),await d.click(t),await w(n.getByDisplayValue("123x45s6")).toBeInTheDocument(),await Qt.mouseOver(i),await Xt(()=>{w(s.getByText("Must be a numerical value")).toBeInTheDocument()})})};A.__docgenInfo={description:"",methods:[{name:"play",docblock:null,modifiers:["static"],params:[{name:"{ canvasElement, step }",optional:!1,type:null}],returns:null}],displayName:"Placeholder"};D.__docgenInfo={description:"",methods:[],displayName:"TestExternalStateChangeWithSynchronizedUnits",props:{name:{required:!0,tsType:{name:"union",raw:"string | { fieldName?: string }",elements:[{name:"string"},{name:"signature",type:"object",raw:"{ fieldName?: string }",signature:{properties:[{key:"fieldName",value:{name:"string",required:!1}}]}}]},description:""},placeholder:{required:!1,tsType:{name:"string"},description:""},disabled:{required:!1,tsType:{name:"boolean"},description:""},disabledUnit:{required:!1,tsType:{name:"boolean"},description:""},error:{required:!1,tsType:{name:"union",raw:"string | null | boolean",elements:[{name:"string"},{name:"null"},{name:"boolean"}]},description:""},left:{required:!1,tsType:{name:"boolean"},description:""},small:{required:!1,tsType:{name:"boolean"},description:""},width:{required:!1,tsType:{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]},description:""},value:{required:!1,tsType:{name:"string"},description:""},unitkey:{required:!1,tsType:{name:"string"},description:""},initUnit:{required:!1,tsType:{name:"string"},description:""},noConversion:{required:!1,tsType:{name:"boolean"},description:""},doNotConvertValue:{required:!1,tsType:{name:"boolean"},description:""},testId:{required:!1,tsType:{name:"string"},description:""},warning:{required:!1,tsType:{name:"union",raw:"string | boolean | null",elements:[{name:"string"},{name:"boolean"},{name:"null"}]},description:""},predefinedOptions:{required:!1,tsType:{name:"union",raw:"IPredefinedOption[] | null",elements:[{name:"Array",elements:[{name:"IPredefinedOption"}],raw:"IPredefinedOption[]"},{name:"null"}]},description:""},initialPredefinedOption:{required:!1,tsType:{name:"boolean"},description:""},shouldLinkAutomaticly:{required:!1,tsType:{name:"boolean"},description:""},selectedPredefinedOptionKey:{required:!1,tsType:{name:"string"},description:""},validationCallback:{required:!1,tsType:{name:"signature",type:"function",raw:"(name: string, error: string | null) => any",signature:{arguments:[{type:{name:"string"},name:"name"},{type:{name:"union",raw:"string | null",elements:[{name:"string"},{name:"null"}]},name:"error"}],return:{name:"any"}}},description:""},disabledValidation:{required:!1,tsType:{name:"boolean"},description:""},allowEmpty:{required:!1,tsType:{name:"boolean"},description:""},autoValue:{required:!1,tsType:{name:"string"},description:""},onChange:{required:!1,tsType:{name:"signature",type:"function",raw:"(event: TChangeEvent | ICustomChangeEvent) => void",signature:{arguments:[{type:{name:"union",raw:"TChangeEvent | ICustomChangeEvent",elements:[{name:"intersection",raw:`ChangeEvent<T> & {
|
|
11
|
-
target:
|
|
12
|
-
| T
|
|
13
|
-
| { name: string; value: any; label?: string; files?: FileList | null };
|
|
14
|
-
}`,elements:[{name:"ChangeEvent",elements:[{name:"T"}],raw:"ChangeEvent<T>"},{name:"signature",type:"object",raw:`{
|
|
15
|
-
target:
|
|
16
|
-
| T
|
|
17
|
-
| { name: string; value: any; label?: string; files?: FileList | null };
|
|
18
|
-
}`,signature:{properties:[{key:"target",value:{name:"union",raw:`| T
|
|
19
|
-
| { name: string; value: any; label?: string; files?: FileList | null }`,elements:[{name:"T"},{name:"signature",type:"object",raw:"{ name: string; value: any; label?: string; files?: FileList | null }",signature:{properties:[{key:"name",value:{name:"string",required:!0}},{key:"value",value:{name:"any",required:!0}},{key:"label",value:{name:"string",required:!1}},{key:"files",value:{name:"union",raw:"FileList | null",elements:[{name:"FileList"},{name:"null"}],required:!1}}]}}],required:!0}}]}}]},{name:"ICustomChangeEvent"}]},name:"event"}],return:{name:"void"}}},description:""},onSwitchUnit:{required:!1,tsType:{name:"signature",type:"function",raw:"(unit: string) => void",signature:{arguments:[{type:{name:"string"},name:"unit"}],return:{name:"void"}}},description:""},onClick:{required:!1,tsType:{name:"MouseEventHandler",elements:[{name:"HTMLInputElement"}],raw:"MouseEventHandler<HTMLInputElement>"},description:""},onFocus:{required:!1,tsType:{name:"FocusEventHandler",elements:[{name:"HTMLInputElement"}],raw:"FocusEventHandler<HTMLInputElement>"},description:""},unitTemplate:{required:!1,tsType:{name:"Record",elements:[{name:"string"},{name:"any"}],raw:"Record<string, any>"},description:""}}};F.__docgenInfo={description:"",methods:[],displayName:"TestEdgeCases"};X.__docgenInfo={description:"",methods:[],displayName:"AutomaticValues"};ee.__docgenInfo={description:"",methods:[],displayName:"ValidationCallback"};te.__docgenInfo={description:"",methods:[],displayName:"AllowEmptyPUI"};ne.__docgenInfo={description:"",methods:[],displayName:"onSwitchUnit"};ae.__docgenInfo={description:"",methods:[],displayName:"OW_10614TestCase"};P.__docgenInfo={description:"",methods:[{name:"play",docblock:null,modifiers:["static"],params:[{name:"{ canvasElement, step }",optional:!1,type:null}],returns:null}],displayName:"TestUserInput"};var Fe,Pe,Be;oe.parameters={...oe.parameters,docs:{...(Fe=oe.parameters)==null?void 0:Fe.docs,source:{originalSource:`args => {
|
|
20
|
-
const [_, updateArgs] = useArgs();
|
|
21
|
-
const handleChange = (evt: any) => {
|
|
22
|
-
updateArgs({
|
|
23
|
-
value: evt.target.value
|
|
24
|
-
});
|
|
25
|
-
};
|
|
26
|
-
return <UnitInput {...args} onChange={handleChange} />;
|
|
27
|
-
}`,...(Be=(Pe=oe.parameters)==null?void 0:Pe.docs)==null?void 0:Be.source}}};var _e,Me,Oe;W.parameters={...W.parameters,docs:{...(_e=W.parameters)==null?void 0:_e.docs,source:{originalSource:`args => {
|
|
28
|
-
const [_, updateArgs] = useArgs();
|
|
29
|
-
const handleChange = (evt: any) => {
|
|
30
|
-
updateArgs({
|
|
31
|
-
value: evt.target.value
|
|
32
|
-
});
|
|
33
|
-
};
|
|
34
|
-
return <UnitInput {...args} onChange={handleChange} />;
|
|
35
|
-
}`,...(Oe=(Me=W.parameters)==null?void 0:Me.docs)==null?void 0:Oe.source}}};var We,Re,Le;R.parameters={...R.parameters,docs:{...(We=R.parameters)==null?void 0:We.docs,source:{originalSource:`args => {
|
|
36
|
-
const [_, updateArgs] = useArgs();
|
|
37
|
-
const handleChange = (evt: any) => {
|
|
38
|
-
updateArgs({
|
|
39
|
-
value: evt.target.value
|
|
40
|
-
});
|
|
41
|
-
};
|
|
42
|
-
return <UnitInput {...args} onChange={handleChange} />;
|
|
43
|
-
}`,...(Le=(Re=R.parameters)==null?void 0:Re.docs)==null?void 0:Le.source}}};var He,Ke,$e;L.parameters={...L.parameters,docs:{...(He=L.parameters)==null?void 0:He.docs,source:{originalSource:`args => {
|
|
44
|
-
const [_, updateArgs] = useArgs();
|
|
45
|
-
const handleChange = (evt: any) => {
|
|
46
|
-
updateArgs({
|
|
47
|
-
value: evt.target.value
|
|
48
|
-
});
|
|
49
|
-
};
|
|
50
|
-
return <UnitInput {...args} onChange={handleChange} />;
|
|
51
|
-
}`,...($e=(Ke=L.parameters)==null?void 0:Ke.docs)==null?void 0:$e.source}}};var Ge,ze,Je;H.parameters={...H.parameters,docs:{...(Ge=H.parameters)==null?void 0:Ge.docs,source:{originalSource:`args => {
|
|
52
|
-
const [_, updateArgs] = useArgs();
|
|
53
|
-
const handleChange = (evt: any) => {
|
|
54
|
-
updateArgs({
|
|
55
|
-
value: evt.target.value
|
|
56
|
-
});
|
|
57
|
-
};
|
|
58
|
-
return <UnitInput {...args} onChange={handleChange} />;
|
|
59
|
-
}`,...(Je=(ze=H.parameters)==null?void 0:ze.docs)==null?void 0:Je.source}}};var Ye,Ze,Qe;K.parameters={...K.parameters,docs:{...(Ye=K.parameters)==null?void 0:Ye.docs,source:{originalSource:`args => {
|
|
60
|
-
const [_, updateArgs] = useArgs();
|
|
61
|
-
const handleChange = (evt: any) => {
|
|
62
|
-
updateArgs({
|
|
63
|
-
value: evt.target.value
|
|
64
|
-
});
|
|
65
|
-
};
|
|
66
|
-
return <UnitInput {...args} onChange={handleChange} />;
|
|
67
|
-
}`,...(Qe=(Ze=K.parameters)==null?void 0:Ze.docs)==null?void 0:Qe.source}}};var Xe,et,tt;A.parameters={...A.parameters,docs:{...(Xe=A.parameters)==null?void 0:Xe.docs,source:{originalSource:`() => {
|
|
68
|
-
const [value, setValue] = useState('123|m');
|
|
69
|
-
return <UnitInput name="example" onChange={evt => setValue(evt.target.value)} placeholder="Type a value..." value={value} initUnit="m" unitkey="depth" unitTemplate={{
|
|
70
|
-
depth: 'm'
|
|
71
|
-
}} testId="testId" />;
|
|
72
|
-
}`,...(tt=(et=A.parameters)==null?void 0:et.docs)==null?void 0:tt.source}}};var nt,at,it;$.parameters={...$.parameters,docs:{...(nt=$.parameters)==null?void 0:nt.docs,source:{originalSource:`args => {
|
|
73
|
-
const [_, updateArgs] = useArgs();
|
|
74
|
-
const handleChange = (evt: any) => {
|
|
75
|
-
updateArgs({
|
|
76
|
-
value: evt.target.value
|
|
77
|
-
});
|
|
78
|
-
};
|
|
79
|
-
return <UnitInput {...args} onChange={handleChange} />;
|
|
80
|
-
}`,...(it=(at=$.parameters)==null?void 0:at.docs)==null?void 0:it.source}}};var rt,st,lt;G.parameters={...G.parameters,docs:{...(rt=G.parameters)==null?void 0:rt.docs,source:{originalSource:`args => {
|
|
81
|
-
const [_, updateArgs] = useArgs();
|
|
82
|
-
const handleChange = (evt: any) => {
|
|
83
|
-
updateArgs({
|
|
84
|
-
value: evt.target.value
|
|
85
|
-
});
|
|
86
|
-
};
|
|
87
|
-
return <UnitInput {...args} onChange={handleChange} />;
|
|
88
|
-
}`,...(lt=(st=G.parameters)==null?void 0:st.docs)==null?void 0:lt.source}}};var ut,ot,dt;q.parameters={...q.parameters,docs:{...(ut=q.parameters)==null?void 0:ut.docs,source:{originalSource:`args => {
|
|
89
|
-
const [_, updateArgs] = useArgs();
|
|
90
|
-
const handleChange = (evt: any) => {
|
|
91
|
-
updateArgs({
|
|
92
|
-
value: evt.target.value
|
|
93
|
-
});
|
|
94
|
-
};
|
|
95
|
-
return <UnitInput {...args} onChange={handleChange} />;
|
|
96
|
-
}`,...(dt=(ot=q.parameters)==null?void 0:ot.docs)==null?void 0:dt.source}}};var ct,mt,pt;z.parameters={...z.parameters,docs:{...(ct=z.parameters)==null?void 0:ct.docs,source:{originalSource:`args => {
|
|
97
|
-
const [_, updateArgs] = useArgs();
|
|
98
|
-
const handleChange = (evt: any) => {
|
|
99
|
-
updateArgs({
|
|
100
|
-
value: evt.target.value
|
|
101
|
-
});
|
|
102
|
-
};
|
|
103
|
-
return <UnitInput {...args} onChange={handleChange} />;
|
|
104
|
-
}`,...(pt=(mt=z.parameters)==null?void 0:mt.docs)==null?void 0:pt.source}}};var gt,ht,vt;J.parameters={...J.parameters,docs:{...(gt=J.parameters)==null?void 0:gt.docs,source:{originalSource:`args => {
|
|
105
|
-
const [_, updateArgs] = useArgs();
|
|
106
|
-
const handleChange = (evt: any) => {
|
|
107
|
-
updateArgs({
|
|
108
|
-
value: evt.target.value
|
|
109
|
-
});
|
|
110
|
-
};
|
|
111
|
-
return <UnitInput {...args} onChange={handleChange} />;
|
|
112
|
-
}`,...(vt=(ht=J.parameters)==null?void 0:ht.docs)==null?void 0:vt.source}}};var ft,yt,bt;Y.parameters={...Y.parameters,docs:{...(ft=Y.parameters)==null?void 0:ft.docs,source:{originalSource:`args => {
|
|
113
|
-
const [_, updateArgs] = useArgs();
|
|
114
|
-
const handleChange = (evt: any) => {
|
|
115
|
-
updateArgs({
|
|
116
|
-
value: evt.target.value
|
|
117
|
-
});
|
|
118
|
-
};
|
|
119
|
-
return <UnitInput {...args} onChange={handleChange} />;
|
|
120
|
-
}`,...(bt=(yt=Y.parameters)==null?void 0:yt.docs)==null?void 0:bt.source}}};var Ct,Ut,wt;Z.parameters={...Z.parameters,docs:{...(Ct=Z.parameters)==null?void 0:Ct.docs,source:{originalSource:`args => {
|
|
121
|
-
const [_, updateArgs] = useArgs();
|
|
122
|
-
const handleChange = (evt: any) => {
|
|
123
|
-
updateArgs({
|
|
124
|
-
value: evt.target.value
|
|
125
|
-
});
|
|
126
|
-
};
|
|
127
|
-
return <UnitInput {...args} onChange={handleChange} />;
|
|
128
|
-
}`,...(wt=(Ut=Z.parameters)==null?void 0:Ut.docs)==null?void 0:wt.source}}};var xt,It,Tt;D.parameters={...D.parameters,docs:{...(xt=D.parameters)==null?void 0:xt.docs,source:{originalSource:`(args: IUnitInputProps) => {
|
|
129
|
-
const [value, setValue] = useState('123|m');
|
|
130
|
-
const [value2, setValue2] = useState('223|m');
|
|
131
|
-
const [initUnit, setInitUnit] = useState('ft');
|
|
132
|
-
return <>
|
|
133
|
-
<Button label="Change initUnit" onClick={() => setInitUnit(initUnit === 'm' ? 'ft' : 'm')} />
|
|
134
|
-
<Spacer />
|
|
135
|
-
<Button label="Change value" onClick={() => setValue(value === '123|m' ? '456|m' : '123|m')} />
|
|
136
|
-
<Spacer />
|
|
137
|
-
<UnitInput name="example" onChange={evt => {
|
|
138
|
-
setValue(evt.target.value);
|
|
139
|
-
}} unitkey="length" value={value} initUnit={initUnit} onSwitchUnit={setInitUnit} />
|
|
140
|
-
<Spacer />
|
|
141
|
-
<UnitInput name="example2" onChange={evt => {
|
|
142
|
-
setValue2(evt.target.value);
|
|
143
|
-
}} unitkey="length" value={value2} initUnit={initUnit} onSwitchUnit={setInitUnit} />
|
|
144
|
-
<Divider />
|
|
145
|
-
<h4>Without initUnit property (taken from the redux store)</h4>
|
|
146
|
-
<UnitInput name="example" onChange={evt => {
|
|
147
|
-
setValue(evt.target.value);
|
|
148
|
-
}} unitkey="length" value={value} onSwitchUnit={setInitUnit} />
|
|
149
|
-
<UnitInput name="example2" onChange={evt => {
|
|
150
|
-
setValue2(evt.target.value);
|
|
151
|
-
}} unitkey="length" value={value2} onSwitchUnit={setInitUnit} />
|
|
152
|
-
</>;
|
|
153
|
-
}`,...(Tt=(It=D.parameters)==null?void 0:It.docs)==null?void 0:Tt.source}}};var Vt,kt,jt;Q.parameters={...Q.parameters,docs:{...(Vt=Q.parameters)==null?void 0:Vt.docs,source:{originalSource:`args => {
|
|
154
|
-
const [_, updateArgs] = useArgs();
|
|
155
|
-
const handleChange = (evt: any) => {
|
|
156
|
-
updateArgs({
|
|
157
|
-
value: evt.target.value
|
|
158
|
-
});
|
|
159
|
-
};
|
|
160
|
-
return <UnitInput {...args} onChange={handleChange} />;
|
|
161
|
-
}`,...(jt=(kt=Q.parameters)==null?void 0:kt.docs)==null?void 0:jt.source}}};var St,Et,Nt;F.parameters={...F.parameters,docs:{...(St=F.parameters)==null?void 0:St.docs,source:{originalSource:`() => {
|
|
162
|
-
const width = '500px';
|
|
163
|
-
const [value, setValue] = useState<any>(undefined);
|
|
164
|
-
return <>
|
|
165
|
-
<h4>Different edge cases such as +/- infinity, undefined, NaN, null:</h4>
|
|
166
|
-
<Row>
|
|
167
|
-
<Column width="25%">
|
|
168
|
-
<Button label="Change value infinity" onClick={() => setValue(Infinity)} />
|
|
169
|
-
<br />
|
|
170
|
-
<Button label="Change value -infinity" onClick={() => setValue(-Infinity)} />
|
|
171
|
-
<br />
|
|
172
|
-
<Button label="Change value null" onClick={() => setValue(null)} />
|
|
173
|
-
<br />
|
|
174
|
-
<Button label="Change value - undefined" onClick={() => setValue(undefined)} />
|
|
175
|
-
<br />
|
|
176
|
-
<Button label="Change value - NaN" onClick={() => setValue(NaN)} />
|
|
177
|
-
<br />
|
|
178
|
-
<Button label="Change value - nothing (empty)" onClick={() => setValue(undefined)} />
|
|
179
|
-
<br />
|
|
180
|
-
<Button label="Change value - empty string" onClick={() => setValue('')} />
|
|
181
|
-
</Column>
|
|
182
|
-
<Column width="25%">
|
|
183
|
-
<Button label="Change value infinity|m" onClick={() => setValue(Infinity + '|m')} />
|
|
184
|
-
<br />
|
|
185
|
-
<Button label="Change value -infinity|m" onClick={() => setValue(-Infinity + '|m')} />
|
|
186
|
-
<br />
|
|
187
|
-
<Button label="Change value null|m" onClick={() => setValue(null + '|m')} />
|
|
188
|
-
<br />
|
|
189
|
-
<Button label="Change value - undefined|m" onClick={() => setValue(undefined + '|m')} />
|
|
190
|
-
<br />
|
|
191
|
-
<Button label="Change value - NaN|m" onClick={() => setValue(NaN + '|m')} />
|
|
192
|
-
<br />
|
|
193
|
-
<Button label="Change value - nothing (empty)|m" onClick={() => setValue('|m')} />
|
|
194
|
-
</Column>
|
|
195
|
-
</Row>
|
|
196
|
-
<br />
|
|
197
|
-
<Field label="Normal PUI">
|
|
198
|
-
<UnitInput name="example1" onChange={evt => setValue(evt.target.value)} value={value} unitkey="length" width={width} placeholder="value|unit" />
|
|
199
|
-
</Field>
|
|
200
|
-
<Field label="Disabled validation">
|
|
201
|
-
<UnitInput name="example2" onChange={evt => setValue(evt.target.value)} value={value} unitkey="length" disabledValidation width={width} />
|
|
202
|
-
</Field>
|
|
203
|
-
<Field label="Disabled validation and manual error">
|
|
204
|
-
<UnitInput name="example3" onChange={evt => setValue(evt.target.value)} value={value} unitkey="length" error="test" disabledValidation width={width} />
|
|
205
|
-
</Field>
|
|
206
|
-
<Message message={{
|
|
207
|
-
heading: 'Current value inside PUI: ' + value,
|
|
208
|
-
visible: true
|
|
209
|
-
}} />
|
|
210
|
-
</>;
|
|
211
|
-
}`,...(Nt=(Et=F.parameters)==null?void 0:Et.docs)==null?void 0:Nt.source}}};var At,qt,Dt;X.parameters={...X.parameters,docs:{...(At=X.parameters)==null?void 0:At.docs,source:{originalSource:`() => {
|
|
212
|
-
const width = '500px';
|
|
213
|
-
const [value, setValue] = useState<string>('1|m');
|
|
214
|
-
const [valueB, setValueB] = useState('|m');
|
|
215
|
-
const automaticValue = '123|km';
|
|
216
|
-
return <>
|
|
217
|
-
<h4>Different cases for automatic (placeholder) values:</h4>
|
|
218
|
-
<Row>
|
|
219
|
-
<Column width="25%">
|
|
220
|
-
<Button label="Change value to ''" onClick={() => setValue('')} />
|
|
221
|
-
<br />
|
|
222
|
-
<Button label="Change value to 1" onClick={() => setValue('1')} />
|
|
223
|
-
<br />
|
|
224
|
-
<Button label="Change value to 1|m" onClick={() => setValue('1|m')} />
|
|
225
|
-
<br />
|
|
226
|
-
<Button label="Change value to |m - empty value" onClick={() => setValue('|m')} />
|
|
227
|
-
</Column>
|
|
228
|
-
</Row>
|
|
229
|
-
<br />
|
|
230
|
-
<Field label="Normal PUI (placeholder + auto)">
|
|
231
|
-
<UnitInput name="example1" onChange={evt => setValue(evt.target.value)} value={value} unitkey="length" width={width} placeholder="value|unit" autoValue={automaticValue} />
|
|
232
|
-
</Field>
|
|
233
|
-
<Field label="Normal PUI (only auto)">
|
|
234
|
-
<UnitInput name="example1" onChange={evt => setValue(evt.target.value)} value={value} unitkey="length" width={width} autoValue={automaticValue} />
|
|
235
|
-
</Field>
|
|
236
|
-
<Field label="Empty PUI with autoValue">
|
|
237
|
-
<UnitInput name="example1" onChange={evt => setValueB(evt.target.value)} value={valueB} unitkey="length" width={width} autoValue={automaticValue} />
|
|
238
|
-
</Field>
|
|
239
|
-
<Field label="Normal PUI (only placeholder)">
|
|
240
|
-
<UnitInput name="example1" onChange={evt => setValue(evt.target.value)} value={value} unitkey="length" width={width} placeholder="Placeholder test" />
|
|
241
|
-
</Field>
|
|
242
|
-
<Field label="Normal PUI (placeholder + allowEmpty)">
|
|
243
|
-
<UnitInput name="example1" onChange={evt => setValue(evt.target.value)} value={value} unitkey="length" width={width} placeholder="Placeholder test" allowEmpty />
|
|
244
|
-
</Field>
|
|
245
|
-
<Message message={{
|
|
246
|
-
heading: 'Current value inside PUI: ' + value,
|
|
247
|
-
visible: true
|
|
248
|
-
}} />
|
|
249
|
-
</>;
|
|
250
|
-
}`,...(Dt=(qt=X.parameters)==null?void 0:qt.docs)==null?void 0:Dt.source}}};var Ft,Pt,Bt;ee.parameters={...ee.parameters,docs:{...(Ft=ee.parameters)==null?void 0:Ft.docs,source:{originalSource:`() => {
|
|
251
|
-
const [value, setValue] = useState('123|%');
|
|
252
|
-
const [validation, setValidation] = useState<string | null>(null);
|
|
253
|
-
const predictedMessage = 'This should be visible when an error appears';
|
|
254
|
-
const handleValidation = (name: string, error: string | null) => {
|
|
255
|
-
setValidation(error);
|
|
256
|
-
return {
|
|
257
|
-
name,
|
|
258
|
-
error
|
|
259
|
-
};
|
|
260
|
-
};
|
|
261
|
-
return <>
|
|
262
|
-
<h4>3rd party validation message when inputting invalid value:</h4>
|
|
263
|
-
<UnitInput name="example" onChange={evt => setValue(evt.target.value)} error={!validation || predictedMessage} validationCallback={handleValidation} value={value} />
|
|
264
|
-
<br />
|
|
265
|
-
<Spacer />
|
|
266
|
-
<h4>Original validation message: </h4>
|
|
267
|
-
<Message message={{
|
|
268
|
-
heading: validation,
|
|
269
|
-
visible: true
|
|
270
|
-
}} />
|
|
271
|
-
</>;
|
|
272
|
-
}`,...(Bt=(Pt=ee.parameters)==null?void 0:Pt.docs)==null?void 0:Bt.source}}};var _t,Mt,Ot;te.parameters={...te.parameters,docs:{...(_t=te.parameters)==null?void 0:_t.docs,source:{originalSource:`() => {
|
|
273
|
-
const [value, setValue] = useState('123|m');
|
|
274
|
-
const [placeholder, setPlaceholder] = useState('');
|
|
275
|
-
const [initUnit, setInitUnit] = useState('km');
|
|
276
|
-
const setPlaceholderValue = () => {
|
|
277
|
-
setInitUnit('ft');
|
|
278
|
-
setPlaceholder('placeholder');
|
|
279
|
-
setValue('|m');
|
|
280
|
-
};
|
|
281
|
-
return <>
|
|
282
|
-
<h4>Empty value case:</h4>
|
|
283
|
-
<UnitInput name="example" onChange={evt => setValue(evt.target.value)} value={value} allowEmpty placeholder={placeholder} initUnit={initUnit} unitkey="length" />
|
|
284
|
-
<br />
|
|
285
|
-
<Spacer />
|
|
286
|
-
<Button label="Change value |m and unit ft" onClick={() => setPlaceholderValue()} />
|
|
287
|
-
</>;
|
|
288
|
-
}`,...(Ot=(Mt=te.parameters)==null?void 0:Mt.docs)==null?void 0:Ot.source}}};var Wt,Rt,Lt;ne.parameters={...ne.parameters,docs:{...(Wt=ne.parameters)==null?void 0:Wt.docs,source:{originalSource:`() => {
|
|
289
|
-
const [value, setValue] = useState('123|m');
|
|
290
|
-
const [unit, setUnit] = useState('m');
|
|
291
|
-
return <>
|
|
292
|
-
<UnitInput name="example" onChange={evt => setValue(evt.target.value)} value={value} initUnit={unit} unitkey="length" onSwitchUnit={setUnit} />
|
|
293
|
-
<Spacer />
|
|
294
|
-
<UnitInput name="example" onChange={evt => setValue(evt.target.value)} value={value} initUnit={unit} unitkey="length" onSwitchUnit={setUnit} />
|
|
295
|
-
</>;
|
|
296
|
-
}`,...(Lt=(Rt=ne.parameters)==null?void 0:Rt.docs)==null?void 0:Lt.source}}};var Ht,Kt,$t;ae.parameters={...ae.parameters,docs:{...(Ht=ae.parameters)==null?void 0:Ht.docs,source:{originalSource:`() => {
|
|
297
|
-
return <>
|
|
298
|
-
<Text faint>
|
|
299
|
-
Reproduce OW-10614 rounding noise bug when storing values in a different
|
|
300
|
-
unit to the display unit
|
|
301
|
-
</Text>
|
|
302
|
-
<Spacer />
|
|
303
|
-
<UnitInput name="example" onChange={() => {}} value={withUnit(convertAndGetValue('9750|psi', 'bar'), 'bar')} initUnit="psi" unitkey="pressure" unitTemplate={{
|
|
304
|
-
pressure: 'psi'
|
|
305
|
-
}} />
|
|
306
|
-
<Spacer />
|
|
307
|
-
<UnitInput name="example2" onChange={() => {}} value={withUnit(convertAndGetValue('8642|lbf', 'tonneForce'), 'tonneForce')} initUnit="lbf" unitkey="force" unitTemplate={{
|
|
308
|
-
force: 'tonneForce'
|
|
309
|
-
}} />
|
|
310
|
-
</>;
|
|
311
|
-
}`,...($t=(Kt=ae.parameters)==null?void 0:Kt.docs)==null?void 0:$t.source}}};var Gt,zt,Jt;P.parameters={...P.parameters,docs:{...(Gt=P.parameters)==null?void 0:Gt.docs,source:{originalSource:`() => {
|
|
312
|
-
const [value, setValue] = useState('123|m');
|
|
313
|
-
return <UnitInput name="example" onChange={evt => setValue(evt.target.value)} value={value} initUnit="m" unitkey="depth" unitTemplate={{
|
|
314
|
-
depth: 'm'
|
|
315
|
-
}} testId="testId" />;
|
|
316
|
-
}`,...(Jt=(zt=P.parameters)==null?void 0:zt.docs)==null?void 0:Jt.source}}};const Ia=["Default","InitUnit","notKnownUnit","Width","NoConversion","Small","Placeholder","Error","InternalValidationError","Disabled","DisabledNoConversion","DisabledUnitWithoutUnitKey","DisabledUnitWithUnitKey","DisabledWithEnabledUnitMenu","TestExternalStateChangeWithSynchronizedUnits","PredefinedOptionsMenu","TestEdgeCases","AutomaticValues","ValidationCallback","AllowEmptyPUI","onSwitchUnit","OW_10614TestCase","TestUserInput"];export{te as AllowEmptyPUI,X as AutomaticValues,oe as Default,q as Disabled,z as DisabledNoConversion,Y as DisabledUnitWithUnitKey,J as DisabledUnitWithoutUnitKey,Z as DisabledWithEnabledUnitMenu,$ as Error,W as InitUnit,G as InternalValidationError,H as NoConversion,ae as OW_10614TestCase,A as Placeholder,Q as PredefinedOptionsMenu,K as Small,F as TestEdgeCases,D as TestExternalStateChangeWithSynchronizedUnits,P as TestUserInput,ee as ValidationCallback,L as Width,Ia as __namedExportsOrder,xa as default,R as notKnownUnit,ne as onSwitchUnit};
|