@vibe/core 3.12.1-alpha-757d9.0 → 3.12.1

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.
@@ -1,2 +1,2 @@
1
- import{slicedToArray as e,defineProperty as n,toConsumableArray as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{getTestId as t,ComponentDefaultTestId as r}from"../../tests/testIds.js";import i from"classnames";import{BaseSizes as a}from"../../constants/sizes.js";import s,{forwardRef as l,useRef as u,useMemo as c,useState as d,useEffect as p,useCallback as m}from"react";import f,{createFilter as v,components as O}from"react-select";import b from"react-select/async";import g from"react-select/base";import{noop as j}from"lodash-es";import C from"./components/menu/menu.js";import M from"./components/DropdownIndicator/DropdownIndicator.js";import y from"./components/option/option.js";import h from"./components/singleValue/singleValue.js";import w from"./components/ClearIndicator/ClearIndicator.js";import S from"./components/MultiValueContainer/MultiValueContainer.js";import{isClient as I}from"../../utils/ssr-utils.js";import{DROPDOWN_CHIP_COLORS as V,DROPDOWN_MENU_PLACEMENT as D,DROPDOWN_MENU_POSITION as R,ADD_AUTO_HEIGHT_COMPONENTS as P,defaultCustomStyles as W,DROPDOWN_ID as A,DROPDOWN_MENU_ID as L,DROPDOWN_MENU_ARIA_LABEL as x,DROPDOWN_INPUT_ARIA_LABEL as z}from"./DropdownConstants.js";import E,{customTheme as N}from"./Dropdown.styles.js";import F from"./components/Control/Control.js";import T from"./components/menu/menu.module.scss.js";import B from"./Dropdown.module.scss.js";import{withStaticProps as k}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";var q=k(l((function(a,l){var v=a.className,V=a.optionWrapperClassName,D=a.singleValueWrapperClassName,R=a.dropdownMenuWrapperClassName,k=a.placeholder,q=void 0===k?"":k,H=a.disabled,G=void 0!==H&&H,K=a.readOnly,_=void 0!==K&&K,J=a.onMenuOpen,Q=void 0===J?j:J,U=a.onMenuClose,X=void 0===U?j:U,Y=a.onFocus,Z=void 0===Y?j:Y,$=a.onBlur,ee=void 0===$?j:$,ne=a.onScroll,oe=void 0===ne?j:ne,te=a.onMenuScrollToBottom,re=void 0===te?j:te,ie=a.onChange,ae=void 0===ie?j:ie,se=a.searchable,le=void 0===se||se,ue=a.captureMenuScroll,ce=void 0!==ue&&ue,de=a.options,pe=void 0===de?[]:de,me=a.defaultValue,fe=a.value,ve=a.noOptionsMessage,Oe=a.openMenuOnFocus,be=a.openMenuOnClick,ge=a.clearable,je=void 0===ge||ge,Ce=a.OptionRenderer,Me=a.optionRenderer,ye=a.ValueRenderer,he=a.valueRenderer,we=a.menuRenderer,Se=a.menuPlacement,Ie=void 0===Se?"bottom":Se,Ve=a.rtl,De=a.size,Re=void 0===De?"medium":De,Pe=a.asyncOptions,We=a.cacheOptions,Ae=a.defaultOptions,Le=a.isVirtualized,xe=a.menuPortalTarget,ze=a.extraStyles,Ee=void 0===ze?W:ze,Ne=a.maxMenuHeight,Fe=a.menuIsOpen,Te=a.tabIndex,Be=void 0===Te?"0":Te,ke=a.id,qe=void 0===ke?A:ke,He=a.menuId,Ge=void 0===He?L:He,Ke=a.menuAriaLabel,_e=void 0===Ke?x:Ke,Je=a.inputAriaLabel,Qe=void 0===Je?z:Je,Ue=a.autoFocus,Xe=void 0!==Ue&&Ue,Ye=a.multi,Ze=void 0!==Ye&&Ye,$e=a.multiline,en=void 0!==$e&&$e,nn=a.onOptionRemove,on=a.onOptionSelect,tn=a.onClear,rn=a.onInputChange,an=void 0===rn?j:rn,sn=a.closeMenuOnSelect,ln=void 0===sn?!Ze:sn,un=a.closeMenuOnScroll,cn=void 0!==un&&un,dn=a.withMandatoryDefaultOptions,pn=void 0!==dn&&dn,mn=a.isOptionSelected,fn=a.insideOverflowContainer,vn=void 0!==fn&&fn,On=a.insideOverflowWithTransformContainer,bn=void 0!==On&&On,gn=a.tooltipContent,jn=void 0===gn?"":gn,Cn=a.onKeyDown,Mn=void 0===Cn?j:Cn,yn=a.isLoading,hn=void 0!==yn&&yn,wn=a.loadingMessage,Sn=a.ariaLabel,In=a.tabSelectsValue,Vn=void 0===In||In,Dn=a.popupsContainerSelector,Rn=a.filterOption,Pn=a.menuPosition,Wn=void 0===Pn?"absolute":Pn,An=a["data-testid"],Ln=a.withGroupDivider,xn=void 0!==Ln&&Ln,zn=a.inputValue,En=a.blurInputOnSelect,Nn=u(),Fn=xe||Dn&&document.querySelector(Dn),Tn=c((function(){return me?Array.isArray(me)?me.map((function(e){return Object.assign(Object.assign({},e),{isMandatory:!0})})):Object.assign(Object.assign({},me),{isMandatory:!0}):me}),[me]);g.prototype.renderLiveRegion=function(){return null};var Bn=d(null),kn=e(Bn,2),qn=kn[0],Hn=kn[1];p((function(){if(I()){var e=!1;try{e="function"==typeof require&&"undefined"!=typeof module}catch(n){e=!1}if(e){var n=require("react-windowed-select");Hn((function(){return n.WindowedMenuList}))}else import("react-windowed-select").then((function(e){Hn((function(){return e.WindowedMenuList}))}))}}),[]);var Gn=d(Tn||[]),Kn=e(Gn,2),_n=Kn[0],Jn=Kn[1],Qn=d(""),Un=e(Qn,2),Xn=Un[0],Yn=Un[1],Zn=Me||Ce,$n=he||ye,eo=!!fe,no=null!=fe?fe:_n,oo=c((function(){return Array.isArray(no)?no.reduce((function(e,o){return Object.assign(Object.assign({},e),n({},o.value,o))}),{}):{}}),[no]),to=c((function(){return Sn||"".concat(_?"Readonly ":""," ").concat(jn," ").concat(Array.isArray(no)?"Selected: ".concat(no.map((function(e){return e.label})).join(", ")):"Select")}),[Sn,_,no,jn]),ro=Ze?no:fe,io=c((function(){var o=E({size:Re,rtl:Ve,insideOverflowContainer:vn,controlRef:Nn,insideOverflowWithTransformContainer:bn,withGroupDivider:xn}),t=Ee(o),r=Object.entries(t).reduce((function(t,r){var i=e(r,2),a=i[0],s=i[1];return Object.assign(Object.assign({},t),n({},a,(function(e,n){var t=o[a],r=t?t(e,n):e;return s(r,n)})))}),{});if(Ze){en&&P.forEach((function(e){var n=r[e];r[e]=function(e,o){return Object.assign(Object.assign({},n(e,o)),{height:"auto"})}}));var i=r.valueContainer;r.valueContainer=function(e,n){return Object.assign(Object.assign({},i(e,n)),{paddingLeft:6})}}return r}),[Re,Ve,vn,bn,Ee,Ze,en]),ao=m((function(e){return s.createElement(C,Object.assign({},e,{id:Ge,ariaLabel:_e,Renderer:we,dropdownMenuWrapperClassName:R,onScroll:oe}))}),[R,we,Ge,_e,oe]),so=m((function(e){return s.createElement(M,Object.assign({},e,{size:Re}))}),[Re]),lo=m((function(e){return s.createElement(y,Object.assign({setFocusedOptionId:Yn},e,{Renderer:Zn,optionWrapperClassName:V}))}),[Zn,V,Yn]),uo=m((function(e){var n=e.selectProps,o=n.focusedOptionId,t=n.menuIsOpen;return s.createElement(O.Input,Object.assign({},e,{"aria-activedescendant":o&&t?o:"",role:"combobox","aria-expanded":!_&&t,"aria-label":Qe,"aria-controls":Ge}))}),[Ge,_]),co=m((function(e){return s.createElement(h,Object.assign({},e,{readOnly:_,Renderer:$n,selectedOption:no[0],singleValueWrapperClassName:D}))}),[$n,_,no,D]),po=m((function(e){return s.createElement(w,Object.assign({},e,{size:Re}))}),[Re]),mo=c((function(){return function(e,n){nn&&nn(oo[e]);var o=Array.isArray(no)?no.filter((function(n){return n.value!==e})):no;ae&&ae(o,n),Jn(o)}}),[ae,nn,no,oo]),fo=c((function(){return{selectedOptions:no,onSelectedDelete:mo,isMultiline:en,insideOverflowContainer:vn,insideOverflowWithTransformContainer:bn,controlRef:Nn,tooltipContent:jn,popupsContainerSelector:Dn,size:Re}}),[no,mo,en,vn,bn,jn,Dn,Re]),vo=Pe?b:f;vo=vo.default||vo;var Oo=Object.assign({},Pe&&Object.assign({loadOptions:Pe,cacheOptions:We},Ae&&{defaultOptions:Ae})),bo=Object.assign(Object.assign({},!Pe&&{options:pe}),Ze&&{isMulti:!0}),go=m((function(e){var n,o=e.target;return!(null===(n=null==o?void 0:o.parentElement)||void 0===n?void 0:n.classList.contains(T.dropdownMenuWrapper))&&(cn||vn||bn)}),[vn,bn,cn]);return s.createElement(vo,Object.assign({className:i(B.dropdown,v),selectProps:fo,components:Object.assign(Object.assign({DropdownIndicator:so,Menu:ao,ClearIndicator:po,Input:uo,Option:lo,Control:F,SingleValue:co},Ze&&{MultiValue:j,ValueContainer:S}),Le&&qn&&{MenuList:qn}),closeMenuOnScroll:go,size:Re,noOptionsMessage:ve,placeholder:q,isDisabled:G,isClearable:!_&&je,isSearchable:!_&&le,readOnly:_,"aria-readonly":_,"aria-label":to,"aria-details":jn,"aria-haspopup":"listbox",defaultValue:me,value:ro,onMenuOpen:Q,onMenuClose:X,onFocus:Z,onBlur:ee,onMenuScrollToBottom:re,captureMenuScroll:ce,onChange:function(e,n){switch(ae&&ae(e,n),n.action){case"select-option":var t=Ze?n.option:e;on&&on(t),eo||Jn([].concat(o(no),[t]));break;case"clear":tn&&tn(),eo||Jn(pn?Tn:[])}},onKeyDown:Mn,onInputChange:an,openMenuOnFocus:Oe,openMenuOnClick:be,focusedOptionId:Xn,isRtl:Ve,styles:io,theme:N,maxMenuHeight:Ne,menuPortalTarget:Fn,menuPlacement:Ie,menuPosition:Wn,menuIsOpen:!_&&Fe,tabIndex:Be,id:qe,"data-testid":An||t(r.DROPDOWN,qe),autoFocus:Xe,closeMenuOnSelect:ln,ref:l,withMandatoryDefaultOptions:pn,isOptionSelected:mn,isLoading:hn,loadingMessage:wn,tabSelectsValue:Vn,filterOption:Rn,inputValue:zn,blurInputOnSelect:En},Oo,bo))})),{sizes:a,chipColors:V,menuPlacements:D,menuPositions:R,createFilter:v});export{q as default};
1
+ import{slicedToArray as e,defineProperty as n,toConsumableArray as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{getTestId as t,ComponentDefaultTestId as r}from"../../tests/testIds.js";import i from"classnames";import{BaseSizes as a}from"../../constants/sizes.js";import s,{forwardRef as l,useRef as u,useMemo as c,useState as d,useEffect as p,useCallback as m}from"react";import f,{createFilter as v,components as O}from"react-select";import b from"react-select/async";import g from"react-select/base";import{noop as j}from"lodash-es";import C from"./components/menu/menu.js";import M from"./components/DropdownIndicator/DropdownIndicator.js";import y from"./components/option/option.js";import h from"./components/singleValue/singleValue.js";import w from"./components/ClearIndicator/ClearIndicator.js";import S from"./components/MultiValueContainer/MultiValueContainer.js";import{isClient as I}from"../../utils/ssr-utils.js";import{DROPDOWN_CHIP_COLORS as V,DROPDOWN_MENU_PLACEMENT as D,DROPDOWN_MENU_POSITION as R,ADD_AUTO_HEIGHT_COMPONENTS as P,defaultCustomStyles as W,DROPDOWN_ID as A,DROPDOWN_MENU_ID as L,DROPDOWN_MENU_ARIA_LABEL as x,DROPDOWN_INPUT_ARIA_LABEL as z}from"./DropdownConstants.js";import E,{customTheme as N}from"./Dropdown.styles.js";import F from"./components/Control/Control.js";import T from"./components/menu/menu.module.scss.js";import B from"./Dropdown.module.scss.js";import{withStaticProps as k}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";var q=k(l((function(a,l){var v=a.className,V=a.optionWrapperClassName,D=a.singleValueWrapperClassName,R=a.dropdownMenuWrapperClassName,k=a.placeholder,q=void 0===k?"":k,H=a.disabled,G=void 0!==H&&H,K=a.readOnly,_=void 0!==K&&K,J=a.onMenuOpen,Q=void 0===J?j:J,U=a.onMenuClose,X=void 0===U?j:U,Y=a.onFocus,Z=void 0===Y?j:Y,$=a.onBlur,ee=void 0===$?j:$,ne=a.onScroll,oe=void 0===ne?j:ne,te=a.onMenuScrollToBottom,re=void 0===te?j:te,ie=a.onChange,ae=void 0===ie?j:ie,se=a.searchable,le=void 0===se||se,ue=a.captureMenuScroll,ce=void 0!==ue&&ue,de=a.options,pe=void 0===de?[]:de,me=a.defaultValue,fe=a.value,ve=a.noOptionsMessage,Oe=a.openMenuOnFocus,be=a.openMenuOnClick,ge=a.clearable,je=void 0===ge||ge,Ce=a.OptionRenderer,Me=a.optionRenderer,ye=a.ValueRenderer,he=a.valueRenderer,we=a.menuRenderer,Se=a.menuPlacement,Ie=void 0===Se?"bottom":Se,Ve=a.rtl,De=a.size,Re=void 0===De?"medium":De,Pe=a.asyncOptions,We=a.cacheOptions,Ae=a.defaultOptions,Le=a.isVirtualized,xe=a.menuPortalTarget,ze=a.extraStyles,Ee=void 0===ze?W:ze,Ne=a.maxMenuHeight,Fe=a.menuIsOpen,Te=a.tabIndex,Be=void 0===Te?"0":Te,ke=a.id,qe=void 0===ke?A:ke,He=a.menuId,Ge=void 0===He?L:He,Ke=a.menuAriaLabel,_e=void 0===Ke?x:Ke,Je=a.inputAriaLabel,Qe=void 0===Je?z:Je,Ue=a.autoFocus,Xe=void 0!==Ue&&Ue,Ye=a.multi,Ze=void 0!==Ye&&Ye,$e=a.multiline,en=void 0!==$e&&$e,nn=a.onOptionRemove,on=a.onOptionSelect,tn=a.onClear,rn=a.onInputChange,an=void 0===rn?j:rn,sn=a.closeMenuOnSelect,ln=void 0===sn?!Ze:sn,un=a.closeMenuOnScroll,cn=void 0!==un&&un,dn=a.withMandatoryDefaultOptions,pn=void 0!==dn&&dn,mn=a.isOptionSelected,fn=a.insideOverflowContainer,vn=void 0!==fn&&fn,On=a.insideOverflowWithTransformContainer,bn=void 0!==On&&On,gn=a.tooltipContent,jn=void 0===gn?"":gn,Cn=a.onKeyDown,Mn=void 0===Cn?j:Cn,yn=a.isLoading,hn=void 0!==yn&&yn,wn=a.loadingMessage,Sn=a.ariaLabel,In=a.tabSelectsValue,Vn=void 0===In||In,Dn=a.popupsContainerSelector,Rn=a.filterOption,Pn=a.menuPosition,Wn=void 0===Pn?"absolute":Pn,An=a["data-testid"],Ln=a.withGroupDivider,xn=void 0!==Ln&&Ln,zn=a.inputValue,En=a.blurInputOnSelect,Nn=u(),Fn=xe||Dn&&document.querySelector(Dn),Tn=c((function(){return me?Array.isArray(me)?me.map((function(e){return Object.assign(Object.assign({},e),{isMandatory:!0})})):Object.assign(Object.assign({},me),{isMandatory:!0}):me}),[me]);g.prototype.renderLiveRegion=function(){return null};var Bn=d(null),kn=e(Bn,2),qn=kn[0],Hn=kn[1];p((function(){if(I()){var e=!1;try{e="function"==typeof require&&"undefined"!=typeof module}catch(n){e=!1}if(e){var n=require("react-windowed-select");Hn((function(){return n.WindowedMenuList}))}else import("react-windowed-select").then((function(e){Hn((function(){return e.WindowedMenuList}))}))}}),[]);var Gn=d(Tn||[]),Kn=e(Gn,2),_n=Kn[0],Jn=Kn[1],Qn=d(""),Un=e(Qn,2),Xn=Un[0],Yn=Un[1],Zn=Me||Ce,$n=he||ye,eo=!!fe,no=null!=fe?fe:_n,oo=c((function(){return Array.isArray(no)?no.reduce((function(e,o){return Object.assign(Object.assign({},e),n({},o.value,o))}),{}):{}}),[no]),to=c((function(){return Sn||"".concat(_?"Readonly ":""," ").concat(jn," ").concat(Array.isArray(no)?"Selected: ".concat(no.map((function(e){return e.label})).join(", ")):"Select")}),[Sn,_,no,jn]),ro=Ze?no:fe,io=c((function(){var o=E({size:Re,rtl:Ve,insideOverflowContainer:vn,controlRef:Nn,insideOverflowWithTransformContainer:bn,withGroupDivider:xn,searchable:le}),t=Ee(o),r=Object.entries(t).reduce((function(t,r){var i=e(r,2),a=i[0],s=i[1];return Object.assign(Object.assign({},t),n({},a,(function(e,n){var t=o[a],r=t?t(e,n):e;return s(r,n)})))}),{});if(Ze){en&&P.forEach((function(e){var n=r[e];r[e]=function(e,o){return Object.assign(Object.assign({},n(e,o)),{height:"auto"})}}));var i=r.valueContainer;r.valueContainer=function(e,n){return Object.assign(Object.assign({},i(e,n)),{paddingLeft:6})}}return r}),[Re,Ve,vn,bn,Ee,Ze,en]),ao=m((function(e){return s.createElement(C,Object.assign({},e,{id:Ge,ariaLabel:_e,Renderer:we,dropdownMenuWrapperClassName:R,onScroll:oe}))}),[R,we,Ge,_e,oe]),so=m((function(e){return s.createElement(M,Object.assign({},e,{size:Re}))}),[Re]),lo=m((function(e){return s.createElement(y,Object.assign({setFocusedOptionId:Yn},e,{Renderer:Zn,optionWrapperClassName:V}))}),[Zn,V,Yn]),uo=m((function(e){var n=e.selectProps,o=n.focusedOptionId,t=n.menuIsOpen;return s.createElement(O.Input,Object.assign({},e,{"aria-activedescendant":o&&t?o:"",role:"combobox","aria-expanded":!_&&t,"aria-label":Qe,"aria-controls":Ge,readOnly:!le||void 0}))}),[Ge,_]),co=m((function(e){return s.createElement(h,Object.assign({},e,{readOnly:_,Renderer:$n,selectedOption:no[0],singleValueWrapperClassName:D}))}),[$n,_,no,D]),po=m((function(e){return s.createElement(w,Object.assign({},e,{size:Re}))}),[Re]),mo=c((function(){return function(e,n){nn&&nn(oo[e]);var o=Array.isArray(no)?no.filter((function(n){return n.value!==e})):no;ae&&ae(o,n),Jn(o)}}),[ae,nn,no,oo]),fo=c((function(){return{selectedOptions:no,onSelectedDelete:mo,isMultiline:en,insideOverflowContainer:vn,insideOverflowWithTransformContainer:bn,controlRef:Nn,tooltipContent:jn,popupsContainerSelector:Dn,size:Re}}),[no,mo,en,vn,bn,jn,Dn,Re]),vo=Pe?b:f;vo=vo.default||vo;var Oo=Object.assign({},Pe&&Object.assign({loadOptions:Pe,cacheOptions:We},Ae&&{defaultOptions:Ae})),bo=Object.assign(Object.assign({},!Pe&&{options:pe}),Ze&&{isMulti:!0}),go=m((function(e){var n,o=e.target;return!(null===(n=null==o?void 0:o.parentElement)||void 0===n?void 0:n.classList.contains(T.dropdownMenuWrapper))&&(cn||vn||bn)}),[vn,bn,cn]);return s.createElement(vo,Object.assign({className:i(B.dropdown,v),selectProps:fo,components:Object.assign(Object.assign({DropdownIndicator:so,Menu:ao,ClearIndicator:po,Input:uo,Option:lo,Control:F,SingleValue:co},Ze&&{MultiValue:j,ValueContainer:S}),Le&&qn&&{MenuList:qn}),closeMenuOnScroll:go,size:Re,noOptionsMessage:ve,placeholder:q,isDisabled:G,isClearable:!_&&je,isSearchable:!_,readOnly:_,"aria-readonly":_,"aria-label":to,"aria-details":jn,"aria-haspopup":"listbox",defaultValue:me,value:ro,onMenuOpen:Q,onMenuClose:X,onFocus:Z,onBlur:ee,onMenuScrollToBottom:re,captureMenuScroll:ce,onChange:function(e,n){switch(ae&&ae(e,n),n.action){case"select-option":var t=Ze?n.option:e;on&&on(t),eo||Jn([].concat(o(no),[t]));break;case"clear":tn&&tn(),eo||Jn(pn?Tn:[])}},onKeyDown:Mn,onInputChange:an,openMenuOnFocus:Oe,openMenuOnClick:be,focusedOptionId:Xn,isRtl:Ve,styles:io,theme:N,maxMenuHeight:Ne,menuPortalTarget:Fn,menuPlacement:Ie,menuPosition:Wn,menuIsOpen:!_&&Fe,tabIndex:Be,id:qe,"data-testid":An||t(r.DROPDOWN,qe),autoFocus:Xe,closeMenuOnSelect:ln,ref:l,withMandatoryDefaultOptions:pn,isOptionSelected:mn,isLoading:hn,loadingMessage:wn,tabSelectsValue:Vn,filterOption:Rn,inputValue:zn,blurInputOnSelect:En},Oo,bo))})),{sizes:a,chipColors:V,menuPlacements:D,menuPositions:R,createFilter:v});export{q as default};
2
2
  //# sourceMappingURL=Dropdown.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Dropdown.js","sources":["../../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport { BaseSizes, SIZES_VALUES } from \"../../constants\";\nimport React, { forwardRef, useCallback, useMemo, useRef, useState, useEffect } from \"react\";\nimport Select, { InputProps, components, createFilter, ActionMeta } from \"react-select\";\nimport AsyncSelect from \"react-select/async\";\nimport BaseSelect from \"react-select/base\";\nimport { noop as NOOP } from \"lodash-es\";\nimport MenuComponent from \"./components/menu/menu\";\nimport DropdownIndicatorComponent from \"./components/DropdownIndicator/DropdownIndicator\";\nimport OptionComponent from \"./components/option/option\";\nimport SingleValueComponent from \"./components/singleValue/singleValue\";\nimport ClearIndicatorComponent from \"./components/ClearIndicator/ClearIndicator\";\nimport MultiValueContainer from \"./components/MultiValueContainer/MultiValueContainer\";\nimport { isClient } from \"../../utils/ssr-utils\";\nimport {\n ADD_AUTO_HEIGHT_COMPONENTS,\n defaultCustomStyles,\n DROPDOWN_CHIP_COLORS,\n DROPDOWN_ID,\n DROPDOWN_INPUT_ARIA_LABEL,\n DROPDOWN_MENU_ARIA_LABEL,\n DROPDOWN_MENU_ID,\n DROPDOWN_MENU_PLACEMENT,\n DROPDOWN_MENU_POSITION\n} from \"./DropdownConstants\";\nimport generateBaseStyles, { customTheme } from \"./Dropdown.styles\";\nimport Control from \"./components/Control/Control\";\nimport menuStyles from \"./components/menu/menu.module.scss\";\nimport styles from \"./Dropdown.module.scss\";\nimport {\n DropdownOption,\n DropdownState,\n CustomMenuProps,\n CustomOptionProps,\n CustomSingleValueProps,\n DropdownComponentProps\n} from \"./Dropdown.types\";\nimport { VibeComponent, withStaticProps } from \"../../types\";\n\nconst Dropdown: VibeComponent<DropdownComponentProps, HTMLElement> & {\n sizes?: typeof BaseSizes;\n chipColors?: typeof DROPDOWN_CHIP_COLORS;\n menuPlacements?: typeof DROPDOWN_MENU_PLACEMENT;\n menuPositions?: typeof DROPDOWN_MENU_POSITION;\n createFilter?: typeof createFilter;\n} = forwardRef(\n (\n {\n className,\n optionWrapperClassName,\n singleValueWrapperClassName,\n dropdownMenuWrapperClassName,\n placeholder = \"\",\n disabled = false,\n readOnly = false,\n onMenuOpen = NOOP,\n onMenuClose = NOOP,\n onFocus = NOOP,\n onBlur = NOOP,\n onScroll = NOOP,\n onMenuScrollToBottom = NOOP,\n onChange: customOnChange = NOOP,\n searchable = true,\n captureMenuScroll = false,\n options = [],\n defaultValue,\n value: customValue,\n noOptionsMessage,\n openMenuOnFocus,\n openMenuOnClick,\n clearable = true,\n OptionRenderer,\n optionRenderer,\n ValueRenderer,\n valueRenderer,\n menuRenderer,\n menuPlacement = \"bottom\",\n rtl,\n size = \"medium\",\n asyncOptions,\n cacheOptions,\n defaultOptions,\n isVirtualized,\n menuPortalTarget,\n extraStyles = defaultCustomStyles,\n maxMenuHeight,\n menuIsOpen,\n tabIndex = \"0\",\n id = DROPDOWN_ID,\n menuId = DROPDOWN_MENU_ID,\n menuAriaLabel = DROPDOWN_MENU_ARIA_LABEL,\n inputAriaLabel = DROPDOWN_INPUT_ARIA_LABEL,\n autoFocus = false,\n multi = false,\n multiline = false,\n onOptionRemove: customOnOptionRemove,\n onOptionSelect,\n onClear,\n onInputChange = NOOP,\n closeMenuOnSelect = !multi,\n closeMenuOnScroll: customCloseMenuOnScroll = false,\n withMandatoryDefaultOptions = false,\n isOptionSelected,\n insideOverflowContainer = false,\n insideOverflowWithTransformContainer = false,\n tooltipContent = \"\",\n onKeyDown = NOOP,\n isLoading = false,\n loadingMessage,\n ariaLabel,\n tabSelectsValue = true,\n popupsContainerSelector,\n filterOption,\n menuPosition = \"absolute\",\n \"data-testid\": dataTestId,\n withGroupDivider = false,\n inputValue,\n blurInputOnSelect\n }: DropdownComponentProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n const controlRef = useRef();\n const overrideMenuPortalTarget =\n menuPortalTarget || (popupsContainerSelector && document.querySelector(popupsContainerSelector));\n const overrideDefaultValue = useMemo(() => {\n if (defaultValue) {\n return Array.isArray(defaultValue)\n ? (defaultValue as DropdownOption[]).map(df => ({ ...df, isMandatory: true }))\n : { ...(defaultValue as DropdownOption), isMandatory: true };\n }\n\n return defaultValue;\n }, [defaultValue]);\n\n BaseSelect.prototype.renderLiveRegion = (): null => {\n return null;\n };\n\n // SSR support\n const [WindowedMenuList, setWindowedMenuList] = useState(null);\n useEffect(() => {\n if (isClient()) {\n let isRequireAvailable = false;\n try {\n isRequireAvailable = typeof require === \"function\" && typeof module !== \"undefined\";\n } catch (e) {\n isRequireAvailable = false;\n }\n\n if (isRequireAvailable) {\n // eslint-disable-next-line @typescript-eslint/no-var-requires\n const module = require(\"react-windowed-select\");\n setWindowedMenuList(() => module.WindowedMenuList);\n } else {\n // Dynamically import the specific named export from react-windowed-select for SSR support\n import(\"react-windowed-select\").then(module => {\n setWindowedMenuList(() => module.WindowedMenuList);\n });\n }\n }\n }, []);\n\n const [selected, setSelected] = useState(overrideDefaultValue || []);\n const [focusedOptionId, setFocusedOptionId] = useState(\"\");\n const finalOptionRenderer = optionRenderer || OptionRenderer;\n const finalValueRenderer = valueRenderer || ValueRenderer;\n const isControlled = !!customValue;\n const selectedOptions = customValue ?? selected;\n const selectedOptionsMap = useMemo(() => {\n if (Array.isArray(selectedOptions)) {\n return selectedOptions.reduce((acc, option) => ({ ...acc, [option.value]: option }), {});\n }\n return {};\n }, [selectedOptions]);\n\n const overrideAriaLabel = useMemo(() => {\n return (\n ariaLabel ||\n `${readOnly ? \"Readonly \" : \"\"} ${tooltipContent} ${\n Array.isArray(selectedOptions) ? `Selected: ${selectedOptions.map(o => o.label).join(\", \")}` : \"Select\"\n }`\n );\n }, [ariaLabel, readOnly, selectedOptions, tooltipContent]);\n const value = multi ? selectedOptions : customValue;\n\n const inlineStyles = useMemo(() => {\n // We first want to get the default stylized groups (e.g. \"container\", \"menu\").\n const baseStyles = generateBaseStyles({\n size,\n rtl,\n insideOverflowContainer,\n controlRef,\n insideOverflowWithTransformContainer,\n withGroupDivider\n });\n\n type BaseStyles = typeof baseStyles;\n\n // Then we want to run the consumer's root-level custom styles with our \"base\" override groups.\n const customStyles = extraStyles(baseStyles);\n\n // Lastly, we create a style groups object that makes sure we run each custom group with our basic overrides.\n const mergedStyles: any = Object.entries(customStyles).reduce((accumulator, [stylesGroup, stylesFn]) => {\n return {\n ...accumulator,\n [stylesGroup]: (defaultStyles: BaseStyles, state: DropdownState) => {\n const providedFn = baseStyles[stylesGroup as keyof BaseStyles];\n const provided = providedFn ? providedFn(defaultStyles, state) : defaultStyles;\n\n return stylesFn(provided, state);\n }\n };\n }, {} as BaseStyles);\n\n if (multi) {\n if (multiline) {\n ADD_AUTO_HEIGHT_COMPONENTS.forEach((component: string) => {\n const original = mergedStyles[component];\n mergedStyles[component] = (provided: BaseStyles, state: DropdownState) => ({\n ...original(provided, state),\n height: \"auto\"\n });\n });\n }\n\n const originalValueContainer = mergedStyles.valueContainer;\n mergedStyles.valueContainer = (provided: BaseStyles, state: DropdownState) => ({\n ...originalValueContainer(provided, state),\n paddingLeft: 6\n });\n }\n\n return mergedStyles;\n }, [size, rtl, insideOverflowContainer, insideOverflowWithTransformContainer, extraStyles, multi, multiline]);\n\n const Menu = useCallback(\n (props: CustomMenuProps) => (\n <MenuComponent\n {...props}\n id={menuId}\n ariaLabel={menuAriaLabel}\n Renderer={menuRenderer}\n dropdownMenuWrapperClassName={dropdownMenuWrapperClassName}\n onScroll={onScroll}\n />\n ),\n [dropdownMenuWrapperClassName, menuRenderer, menuId, menuAriaLabel, onScroll]\n );\n\n const DropdownIndicator = useCallback(\n (props: React.HTMLAttributes<HTMLElement> & { size?: SIZES_VALUES }) => (\n <DropdownIndicatorComponent {...props} size={size} />\n ),\n [size]\n );\n\n const Option = useCallback(\n (props: CustomOptionProps) => (\n <OptionComponent\n setFocusedOptionId={setFocusedOptionId}\n {...props}\n Renderer={finalOptionRenderer}\n optionWrapperClassName={optionWrapperClassName}\n />\n ),\n [finalOptionRenderer, optionWrapperClassName, setFocusedOptionId]\n );\n\n const Input = useCallback(\n (props: InputProps | any) => {\n const { focusedOptionId, menuIsOpen } = props.selectProps;\n const ariaActiveDescendant = focusedOptionId && menuIsOpen ? focusedOptionId : \"\";\n return (\n <components.Input\n {...props}\n aria-activedescendant={ariaActiveDescendant}\n role=\"combobox\"\n aria-expanded={!readOnly && menuIsOpen}\n aria-label={inputAriaLabel}\n aria-controls={menuId}\n />\n );\n },\n [menuId, readOnly]\n );\n\n const SingleValue = useCallback(\n (props: CustomSingleValueProps) => (\n <SingleValueComponent\n {...props}\n readOnly={readOnly}\n Renderer={finalValueRenderer}\n selectedOption={selectedOptions[0]}\n singleValueWrapperClassName={singleValueWrapperClassName}\n />\n ),\n [finalValueRenderer, readOnly, selectedOptions, singleValueWrapperClassName]\n );\n\n const ClearIndicator = useCallback(\n (props: React.HTMLAttributes<HTMLElement> & { size?: SIZES_VALUES }) => (\n <ClearIndicatorComponent {...props} size={size} />\n ),\n [size]\n );\n\n const onOptionRemove = useMemo(() => {\n return function (optionValue: number, e: React.MouseEvent | React.KeyboardEvent) {\n if (customOnOptionRemove) {\n customOnOptionRemove(selectedOptionsMap[optionValue]);\n }\n const newSelectedOptions = Array.isArray(selectedOptions)\n ? selectedOptions.filter(option => option.value !== optionValue)\n : selectedOptions;\n\n if (customOnChange) {\n customOnChange(newSelectedOptions, e);\n }\n setSelected(newSelectedOptions);\n };\n }, [customOnChange, customOnOptionRemove, selectedOptions, selectedOptionsMap]);\n\n const customProps = useMemo(\n () => ({\n selectedOptions,\n onSelectedDelete: onOptionRemove,\n isMultiline: multiline,\n insideOverflowContainer,\n insideOverflowWithTransformContainer,\n controlRef,\n tooltipContent,\n popupsContainerSelector,\n size\n }),\n [\n selectedOptions,\n onOptionRemove,\n multiline,\n insideOverflowContainer,\n insideOverflowWithTransformContainer,\n tooltipContent,\n popupsContainerSelector,\n size\n ]\n );\n const onChange = (option: DropdownOption | DropdownOption[], meta: ActionMeta<DropdownOption>) => {\n if (customOnChange) {\n customOnChange(option, meta);\n }\n\n switch (meta.action) {\n case \"select-option\": {\n const selectedOption = multi ? meta.option : option;\n\n if (onOptionSelect) {\n onOptionSelect(selectedOption);\n }\n\n if (!isControlled) {\n setSelected([...selectedOptions, selectedOption]);\n }\n break;\n }\n\n case \"clear\":\n if (onClear) {\n onClear();\n }\n\n if (!isControlled) {\n if (withMandatoryDefaultOptions) setSelected(overrideDefaultValue);\n else setSelected([]);\n }\n break;\n }\n };\n\n let DropDownComponent: React.ElementType = asyncOptions ? AsyncSelect : Select;\n\n // @ts-expect-error - We need to check if the default export is available\n DropDownComponent = DropDownComponent.default || DropDownComponent;\n\n const asyncAdditions = {\n ...(asyncOptions && {\n loadOptions: asyncOptions,\n cacheOptions,\n ...(defaultOptions && { defaultOptions })\n })\n };\n\n const additions = {\n ...(!asyncOptions && { options }),\n ...(multi && {\n isMulti: true\n })\n };\n\n const closeMenuOnScroll = useCallback(\n (event: React.FocusEvent) => {\n const scrolledElement = event.target;\n if (scrolledElement?.parentElement?.classList.contains(menuStyles.dropdownMenuWrapper)) {\n return false;\n }\n return customCloseMenuOnScroll || insideOverflowContainer || insideOverflowWithTransformContainer;\n },\n [insideOverflowContainer, insideOverflowWithTransformContainer, customCloseMenuOnScroll]\n );\n\n return (\n <DropDownComponent\n className={cx(styles.dropdown, className)}\n selectProps={customProps}\n components={{\n DropdownIndicator,\n Menu,\n ClearIndicator,\n Input,\n Option,\n Control,\n SingleValue,\n ...(multi && {\n MultiValue: NOOP, // We need it for react-select to behave nice with \"multi\"\n ValueContainer: MultiValueContainer\n }),\n ...(isVirtualized && WindowedMenuList && { MenuList: WindowedMenuList })\n }}\n // When inside scroll we set the menu position by js and we can't follow the drop down location while use scrolling\n closeMenuOnScroll={closeMenuOnScroll}\n size={size}\n noOptionsMessage={noOptionsMessage}\n placeholder={placeholder}\n isDisabled={disabled}\n isClearable={!readOnly && clearable}\n isSearchable={!readOnly && searchable}\n readOnly={readOnly}\n aria-readonly={readOnly}\n aria-label={overrideAriaLabel}\n aria-details={tooltipContent}\n aria-haspopup=\"listbox\"\n defaultValue={defaultValue}\n value={value}\n onMenuOpen={onMenuOpen}\n onMenuClose={onMenuClose}\n onFocus={onFocus}\n onBlur={onBlur}\n onMenuScrollToBottom={onMenuScrollToBottom}\n captureMenuScroll={captureMenuScroll}\n onChange={onChange}\n onKeyDown={onKeyDown}\n onInputChange={onInputChange}\n openMenuOnFocus={openMenuOnFocus}\n openMenuOnClick={openMenuOnClick}\n focusedOptionId={focusedOptionId}\n isRtl={rtl}\n styles={inlineStyles}\n theme={customTheme}\n maxMenuHeight={maxMenuHeight}\n menuPortalTarget={overrideMenuPortalTarget}\n menuPlacement={menuPlacement}\n menuPosition={menuPosition}\n menuIsOpen={!readOnly && menuIsOpen}\n tabIndex={tabIndex}\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.DROPDOWN, id)}\n autoFocus={autoFocus}\n closeMenuOnSelect={closeMenuOnSelect}\n ref={ref as React.Ref<any>}\n withMandatoryDefaultOptions={withMandatoryDefaultOptions}\n isOptionSelected={isOptionSelected}\n isLoading={isLoading}\n loadingMessage={loadingMessage}\n tabSelectsValue={tabSelectsValue}\n filterOption={filterOption}\n inputValue={inputValue}\n blurInputOnSelect={blurInputOnSelect}\n {...asyncAdditions}\n {...additions}\n />\n );\n }\n);\n\nexport default withStaticProps(Dropdown, {\n sizes: BaseSizes,\n chipColors: DROPDOWN_CHIP_COLORS,\n menuPlacements: DROPDOWN_MENU_PLACEMENT,\n menuPositions: DROPDOWN_MENU_POSITION,\n createFilter: createFilter\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","optionWrapperClassName","singleValueWrapperClassName","dropdownMenuWrapperClassName","_ref$placeholder","placeholder","_ref$disabled","disabled","_ref$readOnly","readOnly","_ref$onMenuOpen","onMenuOpen","NOOP","_ref$onMenuClose","onMenuClose","_ref$onFocus","onFocus","_ref$onBlur","onBlur","_ref$onScroll","onScroll","_ref$onMenuScrollToBo","onMenuScrollToBottom","_ref$onChange","onChange","customOnChange","_ref$searchable","searchable","_ref$captureMenuScrol","captureMenuScroll","_ref$options","options","defaultValue","customValue","value","noOptionsMessage","openMenuOnFocus","openMenuOnClick","_ref$clearable","clearable","OptionRenderer","optionRenderer","ValueRenderer","valueRenderer","menuRenderer","_ref$menuPlacement","menuPlacement","rtl","_ref$size","size","asyncOptions","cacheOptions","defaultOptions","isVirtualized","menuPortalTarget","_ref$extraStyles","extraStyles","defaultCustomStyles","maxMenuHeight","menuIsOpen","_ref$tabIndex","tabIndex","_ref$id","id","DROPDOWN_ID","_ref$menuId","menuId","DROPDOWN_MENU_ID","_ref$menuAriaLabel","menuAriaLabel","DROPDOWN_MENU_ARIA_LABEL","_ref$inputAriaLabel","inputAriaLabel","DROPDOWN_INPUT_ARIA_LABEL","_ref$autoFocus","autoFocus","_ref$multi","multi","_ref$multiline","multiline","customOnOptionRemove","onOptionRemove","onOptionSelect","onClear","_ref$onInputChange","onInputChange","_ref$closeMenuOnSelec","closeMenuOnSelect","_ref$closeMenuOnScrol","closeMenuOnScroll","customCloseMenuOnScroll","_ref$withMandatoryDef","withMandatoryDefaultOptions","isOptionSelected","_ref$insideOverflowCo","insideOverflowContainer","_ref$insideOverflowWi","insideOverflowWithTransformContainer","_ref$tooltipContent","tooltipContent","_ref$onKeyDown","onKeyDown","_ref$isLoading","isLoading","loadingMessage","ariaLabel","_ref$tabSelectsValue","tabSelectsValue","popupsContainerSelector","filterOption","_ref$menuPosition","menuPosition","dataTestId","_ref$withGroupDivider","withGroupDivider","inputValue","blurInputOnSelect","controlRef","useRef","overrideMenuPortalTarget","document","querySelector","overrideDefaultValue","useMemo","Array","isArray","map","df","Object","assign","isMandatory","BaseSelect","prototype","renderLiveRegion","_useState","useState","_useState2","_slicedToArray","WindowedMenuList","setWindowedMenuList","useEffect","isClient","isRequireAvailable","require","module","e","import","then","_useState3","_useState4","selected","setSelected","_useState5","_useState6","focusedOptionId","setFocusedOptionId","finalOptionRenderer","finalValueRenderer","isControlled","selectedOptions","selectedOptionsMap","reduce","acc","option","_defineProperty","overrideAriaLabel","concat","o","label","join","inlineStyles","baseStyles","generateBaseStyles","customStyles","mergedStyles","entries","accumulator","_ref2","_ref3","stylesGroup","stylesFn","defaultStyles","state","providedFn","provided","ADD_AUTO_HEIGHT_COMPONENTS","forEach","component","original","height","originalValueContainer","valueContainer","paddingLeft","Menu","useCallback","props","React","createElement","MenuComponent","Renderer","DropdownIndicator","DropdownIndicatorComponent","Option","OptionComponent","Input","_props$selectProps","selectProps","components","role","SingleValue","SingleValueComponent","selectedOption","ClearIndicator","ClearIndicatorComponent","optionValue","newSelectedOptions","filter","customProps","onSelectedDelete","isMultiline","DropDownComponent","AsyncSelect","Select","default","asyncAdditions","loadOptions","additions","isMulti","event","scrolledElement","target","parentElement","_a","classList","contains","menuStyles","dropdownMenuWrapper","cx","styles","dropdown","Control","MultiValue","ValueContainer","MultiValueContainer","MenuList","isDisabled","isClearable","isSearchable","meta","action","_toConsumableArray","isRtl","theme","customTheme","getTestId","ComponentDefaultTestId","DROPDOWN","sizes","BaseSizes","chipColors","DROPDOWN_CHIP_COLORS","menuPlacements","DROPDOWN_MENU_PLACEMENT","menuPositions","DROPDOWN_MENU_POSITION","createFilter"],"mappings":"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"}
1
+ {"version":3,"file":"Dropdown.js","sources":["../../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport { BaseSizes, SIZES_VALUES } from \"../../constants\";\nimport React, { forwardRef, useCallback, useMemo, useRef, useState, useEffect } from \"react\";\nimport Select, { InputProps, components, createFilter, ActionMeta } from \"react-select\";\nimport AsyncSelect from \"react-select/async\";\nimport BaseSelect from \"react-select/base\";\nimport { noop as NOOP } from \"lodash-es\";\nimport MenuComponent from \"./components/menu/menu\";\nimport DropdownIndicatorComponent from \"./components/DropdownIndicator/DropdownIndicator\";\nimport OptionComponent from \"./components/option/option\";\nimport SingleValueComponent from \"./components/singleValue/singleValue\";\nimport ClearIndicatorComponent from \"./components/ClearIndicator/ClearIndicator\";\nimport MultiValueContainer from \"./components/MultiValueContainer/MultiValueContainer\";\nimport { isClient } from \"../../utils/ssr-utils\";\nimport {\n ADD_AUTO_HEIGHT_COMPONENTS,\n defaultCustomStyles,\n DROPDOWN_CHIP_COLORS,\n DROPDOWN_ID,\n DROPDOWN_INPUT_ARIA_LABEL,\n DROPDOWN_MENU_ARIA_LABEL,\n DROPDOWN_MENU_ID,\n DROPDOWN_MENU_PLACEMENT,\n DROPDOWN_MENU_POSITION\n} from \"./DropdownConstants\";\nimport generateBaseStyles, { customTheme } from \"./Dropdown.styles\";\nimport Control from \"./components/Control/Control\";\nimport menuStyles from \"./components/menu/menu.module.scss\";\nimport styles from \"./Dropdown.module.scss\";\nimport {\n DropdownOption,\n DropdownState,\n CustomMenuProps,\n CustomOptionProps,\n CustomSingleValueProps,\n DropdownComponentProps\n} from \"./Dropdown.types\";\nimport { VibeComponent, withStaticProps } from \"../../types\";\n\nconst Dropdown: VibeComponent<DropdownComponentProps, HTMLElement> & {\n sizes?: typeof BaseSizes;\n chipColors?: typeof DROPDOWN_CHIP_COLORS;\n menuPlacements?: typeof DROPDOWN_MENU_PLACEMENT;\n menuPositions?: typeof DROPDOWN_MENU_POSITION;\n createFilter?: typeof createFilter;\n} = forwardRef(\n (\n {\n className,\n optionWrapperClassName,\n singleValueWrapperClassName,\n dropdownMenuWrapperClassName,\n placeholder = \"\",\n disabled = false,\n readOnly = false,\n onMenuOpen = NOOP,\n onMenuClose = NOOP,\n onFocus = NOOP,\n onBlur = NOOP,\n onScroll = NOOP,\n onMenuScrollToBottom = NOOP,\n onChange: customOnChange = NOOP,\n searchable = true,\n captureMenuScroll = false,\n options = [],\n defaultValue,\n value: customValue,\n noOptionsMessage,\n openMenuOnFocus,\n openMenuOnClick,\n clearable = true,\n OptionRenderer,\n optionRenderer,\n ValueRenderer,\n valueRenderer,\n menuRenderer,\n menuPlacement = \"bottom\",\n rtl,\n size = \"medium\",\n asyncOptions,\n cacheOptions,\n defaultOptions,\n isVirtualized,\n menuPortalTarget,\n extraStyles = defaultCustomStyles,\n maxMenuHeight,\n menuIsOpen,\n tabIndex = \"0\",\n id = DROPDOWN_ID,\n menuId = DROPDOWN_MENU_ID,\n menuAriaLabel = DROPDOWN_MENU_ARIA_LABEL,\n inputAriaLabel = DROPDOWN_INPUT_ARIA_LABEL,\n autoFocus = false,\n multi = false,\n multiline = false,\n onOptionRemove: customOnOptionRemove,\n onOptionSelect,\n onClear,\n onInputChange = NOOP,\n closeMenuOnSelect = !multi,\n closeMenuOnScroll: customCloseMenuOnScroll = false,\n withMandatoryDefaultOptions = false,\n isOptionSelected,\n insideOverflowContainer = false,\n insideOverflowWithTransformContainer = false,\n tooltipContent = \"\",\n onKeyDown = NOOP,\n isLoading = false,\n loadingMessage,\n ariaLabel,\n tabSelectsValue = true,\n popupsContainerSelector,\n filterOption,\n menuPosition = \"absolute\",\n \"data-testid\": dataTestId,\n withGroupDivider = false,\n inputValue,\n blurInputOnSelect\n }: DropdownComponentProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n const controlRef = useRef();\n const overrideMenuPortalTarget =\n menuPortalTarget || (popupsContainerSelector && document.querySelector(popupsContainerSelector));\n const overrideDefaultValue = useMemo(() => {\n if (defaultValue) {\n return Array.isArray(defaultValue)\n ? (defaultValue as DropdownOption[]).map(df => ({ ...df, isMandatory: true }))\n : { ...(defaultValue as DropdownOption), isMandatory: true };\n }\n\n return defaultValue;\n }, [defaultValue]);\n\n BaseSelect.prototype.renderLiveRegion = (): null => {\n return null;\n };\n\n // SSR support\n const [WindowedMenuList, setWindowedMenuList] = useState(null);\n useEffect(() => {\n if (isClient()) {\n let isRequireAvailable = false;\n try {\n isRequireAvailable = typeof require === \"function\" && typeof module !== \"undefined\";\n } catch (e) {\n isRequireAvailable = false;\n }\n\n if (isRequireAvailable) {\n // eslint-disable-next-line @typescript-eslint/no-var-requires\n const module = require(\"react-windowed-select\");\n setWindowedMenuList(() => module.WindowedMenuList);\n } else {\n // Dynamically import the specific named export from react-windowed-select for SSR support\n import(\"react-windowed-select\").then(module => {\n setWindowedMenuList(() => module.WindowedMenuList);\n });\n }\n }\n }, []);\n\n const [selected, setSelected] = useState(overrideDefaultValue || []);\n const [focusedOptionId, setFocusedOptionId] = useState(\"\");\n const finalOptionRenderer = optionRenderer || OptionRenderer;\n const finalValueRenderer = valueRenderer || ValueRenderer;\n const isControlled = !!customValue;\n const selectedOptions = customValue ?? selected;\n const selectedOptionsMap = useMemo(() => {\n if (Array.isArray(selectedOptions)) {\n return selectedOptions.reduce((acc, option) => ({ ...acc, [option.value]: option }), {});\n }\n return {};\n }, [selectedOptions]);\n\n const overrideAriaLabel = useMemo(() => {\n return (\n ariaLabel ||\n `${readOnly ? \"Readonly \" : \"\"} ${tooltipContent} ${\n Array.isArray(selectedOptions) ? `Selected: ${selectedOptions.map(o => o.label).join(\", \")}` : \"Select\"\n }`\n );\n }, [ariaLabel, readOnly, selectedOptions, tooltipContent]);\n const value = multi ? selectedOptions : customValue;\n\n const inlineStyles = useMemo(() => {\n // We first want to get the default stylized groups (e.g. \"container\", \"menu\").\n const baseStyles = generateBaseStyles({\n size,\n rtl,\n insideOverflowContainer,\n controlRef,\n insideOverflowWithTransformContainer,\n withGroupDivider,\n searchable\n });\n\n type BaseStyles = typeof baseStyles;\n\n // Then we want to run the consumer's root-level custom styles with our \"base\" override groups.\n const customStyles = extraStyles(baseStyles);\n\n // Lastly, we create a style groups object that makes sure we run each custom group with our basic overrides.\n const mergedStyles: any = Object.entries(customStyles).reduce((accumulator, [stylesGroup, stylesFn]) => {\n return {\n ...accumulator,\n [stylesGroup]: (defaultStyles: BaseStyles, state: DropdownState) => {\n const providedFn = baseStyles[stylesGroup as keyof BaseStyles];\n const provided = providedFn ? providedFn(defaultStyles, state) : defaultStyles;\n\n return stylesFn(provided, state);\n }\n };\n }, {} as BaseStyles);\n\n if (multi) {\n if (multiline) {\n ADD_AUTO_HEIGHT_COMPONENTS.forEach((component: string) => {\n const original = mergedStyles[component];\n mergedStyles[component] = (provided: BaseStyles, state: DropdownState) => ({\n ...original(provided, state),\n height: \"auto\"\n });\n });\n }\n\n const originalValueContainer = mergedStyles.valueContainer;\n mergedStyles.valueContainer = (provided: BaseStyles, state: DropdownState) => ({\n ...originalValueContainer(provided, state),\n paddingLeft: 6\n });\n }\n\n return mergedStyles;\n }, [size, rtl, insideOverflowContainer, insideOverflowWithTransformContainer, extraStyles, multi, multiline]);\n\n const Menu = useCallback(\n (props: CustomMenuProps) => (\n <MenuComponent\n {...props}\n id={menuId}\n ariaLabel={menuAriaLabel}\n Renderer={menuRenderer}\n dropdownMenuWrapperClassName={dropdownMenuWrapperClassName}\n onScroll={onScroll}\n />\n ),\n [dropdownMenuWrapperClassName, menuRenderer, menuId, menuAriaLabel, onScroll]\n );\n\n const DropdownIndicator = useCallback(\n (props: React.HTMLAttributes<HTMLElement> & { size?: SIZES_VALUES }) => (\n <DropdownIndicatorComponent {...props} size={size} />\n ),\n [size]\n );\n\n const Option = useCallback(\n (props: CustomOptionProps) => (\n <OptionComponent\n setFocusedOptionId={setFocusedOptionId}\n {...props}\n Renderer={finalOptionRenderer}\n optionWrapperClassName={optionWrapperClassName}\n />\n ),\n [finalOptionRenderer, optionWrapperClassName, setFocusedOptionId]\n );\n\n const Input = useCallback(\n (props: InputProps | any) => {\n const { focusedOptionId, menuIsOpen } = props.selectProps;\n const ariaActiveDescendant = focusedOptionId && menuIsOpen ? focusedOptionId : \"\";\n return (\n <components.Input\n {...props}\n aria-activedescendant={ariaActiveDescendant}\n role=\"combobox\"\n aria-expanded={!readOnly && menuIsOpen}\n aria-label={inputAriaLabel}\n aria-controls={menuId}\n readOnly={!searchable ? true : undefined}\n />\n );\n },\n [menuId, readOnly]\n );\n\n const SingleValue = useCallback(\n (props: CustomSingleValueProps) => (\n <SingleValueComponent\n {...props}\n readOnly={readOnly}\n Renderer={finalValueRenderer}\n selectedOption={selectedOptions[0]}\n singleValueWrapperClassName={singleValueWrapperClassName}\n />\n ),\n [finalValueRenderer, readOnly, selectedOptions, singleValueWrapperClassName]\n );\n\n const ClearIndicator = useCallback(\n (props: React.HTMLAttributes<HTMLElement> & { size?: SIZES_VALUES }) => (\n <ClearIndicatorComponent {...props} size={size} />\n ),\n [size]\n );\n\n const onOptionRemove = useMemo(() => {\n return function (optionValue: number, e: React.MouseEvent | React.KeyboardEvent) {\n if (customOnOptionRemove) {\n customOnOptionRemove(selectedOptionsMap[optionValue]);\n }\n const newSelectedOptions = Array.isArray(selectedOptions)\n ? selectedOptions.filter(option => option.value !== optionValue)\n : selectedOptions;\n\n if (customOnChange) {\n customOnChange(newSelectedOptions, e);\n }\n setSelected(newSelectedOptions);\n };\n }, [customOnChange, customOnOptionRemove, selectedOptions, selectedOptionsMap]);\n\n const customProps = useMemo(\n () => ({\n selectedOptions,\n onSelectedDelete: onOptionRemove,\n isMultiline: multiline,\n insideOverflowContainer,\n insideOverflowWithTransformContainer,\n controlRef,\n tooltipContent,\n popupsContainerSelector,\n size\n }),\n [\n selectedOptions,\n onOptionRemove,\n multiline,\n insideOverflowContainer,\n insideOverflowWithTransformContainer,\n tooltipContent,\n popupsContainerSelector,\n size\n ]\n );\n const onChange = (option: DropdownOption | DropdownOption[], meta: ActionMeta<DropdownOption>) => {\n if (customOnChange) {\n customOnChange(option, meta);\n }\n\n switch (meta.action) {\n case \"select-option\": {\n const selectedOption = multi ? meta.option : option;\n\n if (onOptionSelect) {\n onOptionSelect(selectedOption);\n }\n\n if (!isControlled) {\n setSelected([...selectedOptions, selectedOption]);\n }\n break;\n }\n\n case \"clear\":\n if (onClear) {\n onClear();\n }\n\n if (!isControlled) {\n if (withMandatoryDefaultOptions) setSelected(overrideDefaultValue);\n else setSelected([]);\n }\n break;\n }\n };\n\n let DropDownComponent: React.ElementType = asyncOptions ? AsyncSelect : Select;\n\n // @ts-expect-error - We need to check if the default export is available\n DropDownComponent = DropDownComponent.default || DropDownComponent;\n\n const asyncAdditions = {\n ...(asyncOptions && {\n loadOptions: asyncOptions,\n cacheOptions,\n ...(defaultOptions && { defaultOptions })\n })\n };\n\n const additions = {\n ...(!asyncOptions && { options }),\n ...(multi && {\n isMulti: true\n })\n };\n\n const closeMenuOnScroll = useCallback(\n (event: React.FocusEvent) => {\n const scrolledElement = event.target;\n if (scrolledElement?.parentElement?.classList.contains(menuStyles.dropdownMenuWrapper)) {\n return false;\n }\n return customCloseMenuOnScroll || insideOverflowContainer || insideOverflowWithTransformContainer;\n },\n [insideOverflowContainer, insideOverflowWithTransformContainer, customCloseMenuOnScroll]\n );\n\n return (\n <DropDownComponent\n className={cx(styles.dropdown, className)}\n selectProps={customProps}\n components={{\n DropdownIndicator,\n Menu,\n ClearIndicator,\n Input,\n Option,\n Control,\n SingleValue,\n ...(multi && {\n MultiValue: NOOP, // We need it for react-select to behave nice with \"multi\"\n ValueContainer: MultiValueContainer\n }),\n ...(isVirtualized && WindowedMenuList && { MenuList: WindowedMenuList })\n }}\n // When inside scroll we set the menu position by js and we can't follow the drop down location while use scrolling\n closeMenuOnScroll={closeMenuOnScroll}\n size={size}\n noOptionsMessage={noOptionsMessage}\n placeholder={placeholder}\n isDisabled={disabled}\n isClearable={!readOnly && clearable}\n isSearchable={!readOnly}\n readOnly={readOnly}\n aria-readonly={readOnly}\n aria-label={overrideAriaLabel}\n aria-details={tooltipContent}\n aria-haspopup=\"listbox\"\n defaultValue={defaultValue}\n value={value}\n onMenuOpen={onMenuOpen}\n onMenuClose={onMenuClose}\n onFocus={onFocus}\n onBlur={onBlur}\n onMenuScrollToBottom={onMenuScrollToBottom}\n captureMenuScroll={captureMenuScroll}\n onChange={onChange}\n onKeyDown={onKeyDown}\n onInputChange={onInputChange}\n openMenuOnFocus={openMenuOnFocus}\n openMenuOnClick={openMenuOnClick}\n focusedOptionId={focusedOptionId}\n isRtl={rtl}\n styles={inlineStyles}\n theme={customTheme}\n maxMenuHeight={maxMenuHeight}\n menuPortalTarget={overrideMenuPortalTarget}\n menuPlacement={menuPlacement}\n menuPosition={menuPosition}\n menuIsOpen={!readOnly && menuIsOpen}\n tabIndex={tabIndex}\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.DROPDOWN, id)}\n autoFocus={autoFocus}\n closeMenuOnSelect={closeMenuOnSelect}\n ref={ref as React.Ref<any>}\n withMandatoryDefaultOptions={withMandatoryDefaultOptions}\n isOptionSelected={isOptionSelected}\n isLoading={isLoading}\n loadingMessage={loadingMessage}\n tabSelectsValue={tabSelectsValue}\n filterOption={filterOption}\n inputValue={inputValue}\n blurInputOnSelect={blurInputOnSelect}\n {...asyncAdditions}\n {...additions}\n />\n );\n }\n);\n\nexport default withStaticProps(Dropdown, {\n sizes: BaseSizes,\n chipColors: DROPDOWN_CHIP_COLORS,\n menuPlacements: DROPDOWN_MENU_PLACEMENT,\n menuPositions: DROPDOWN_MENU_POSITION,\n createFilter: createFilter\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","optionWrapperClassName","singleValueWrapperClassName","dropdownMenuWrapperClassName","_ref$placeholder","placeholder","_ref$disabled","disabled","_ref$readOnly","readOnly","_ref$onMenuOpen","onMenuOpen","NOOP","_ref$onMenuClose","onMenuClose","_ref$onFocus","onFocus","_ref$onBlur","onBlur","_ref$onScroll","onScroll","_ref$onMenuScrollToBo","onMenuScrollToBottom","_ref$onChange","onChange","customOnChange","_ref$searchable","searchable","_ref$captureMenuScrol","captureMenuScroll","_ref$options","options","defaultValue","customValue","value","noOptionsMessage","openMenuOnFocus","openMenuOnClick","_ref$clearable","clearable","OptionRenderer","optionRenderer","ValueRenderer","valueRenderer","menuRenderer","_ref$menuPlacement","menuPlacement","rtl","_ref$size","size","asyncOptions","cacheOptions","defaultOptions","isVirtualized","menuPortalTarget","_ref$extraStyles","extraStyles","defaultCustomStyles","maxMenuHeight","menuIsOpen","_ref$tabIndex","tabIndex","_ref$id","id","DROPDOWN_ID","_ref$menuId","menuId","DROPDOWN_MENU_ID","_ref$menuAriaLabel","menuAriaLabel","DROPDOWN_MENU_ARIA_LABEL","_ref$inputAriaLabel","inputAriaLabel","DROPDOWN_INPUT_ARIA_LABEL","_ref$autoFocus","autoFocus","_ref$multi","multi","_ref$multiline","multiline","customOnOptionRemove","onOptionRemove","onOptionSelect","onClear","_ref$onInputChange","onInputChange","_ref$closeMenuOnSelec","closeMenuOnSelect","_ref$closeMenuOnScrol","closeMenuOnScroll","customCloseMenuOnScroll","_ref$withMandatoryDef","withMandatoryDefaultOptions","isOptionSelected","_ref$insideOverflowCo","insideOverflowContainer","_ref$insideOverflowWi","insideOverflowWithTransformContainer","_ref$tooltipContent","tooltipContent","_ref$onKeyDown","onKeyDown","_ref$isLoading","isLoading","loadingMessage","ariaLabel","_ref$tabSelectsValue","tabSelectsValue","popupsContainerSelector","filterOption","_ref$menuPosition","menuPosition","dataTestId","_ref$withGroupDivider","withGroupDivider","inputValue","blurInputOnSelect","controlRef","useRef","overrideMenuPortalTarget","document","querySelector","overrideDefaultValue","useMemo","Array","isArray","map","df","Object","assign","isMandatory","BaseSelect","prototype","renderLiveRegion","_useState","useState","_useState2","_slicedToArray","WindowedMenuList","setWindowedMenuList","useEffect","isClient","isRequireAvailable","require","module","e","import","then","_useState3","_useState4","selected","setSelected","_useState5","_useState6","focusedOptionId","setFocusedOptionId","finalOptionRenderer","finalValueRenderer","isControlled","selectedOptions","selectedOptionsMap","reduce","acc","option","_defineProperty","overrideAriaLabel","concat","o","label","join","inlineStyles","baseStyles","generateBaseStyles","customStyles","mergedStyles","entries","accumulator","_ref2","_ref3","stylesGroup","stylesFn","defaultStyles","state","providedFn","provided","ADD_AUTO_HEIGHT_COMPONENTS","forEach","component","original","height","originalValueContainer","valueContainer","paddingLeft","Menu","useCallback","props","React","createElement","MenuComponent","Renderer","DropdownIndicator","DropdownIndicatorComponent","Option","OptionComponent","Input","_props$selectProps","selectProps","components","role","undefined","SingleValue","SingleValueComponent","selectedOption","ClearIndicator","ClearIndicatorComponent","optionValue","newSelectedOptions","filter","customProps","onSelectedDelete","isMultiline","DropDownComponent","AsyncSelect","Select","default","asyncAdditions","loadOptions","additions","isMulti","event","scrolledElement","target","parentElement","_a","classList","contains","menuStyles","dropdownMenuWrapper","cx","styles","dropdown","Control","MultiValue","ValueContainer","MultiValueContainer","MenuList","isDisabled","isClearable","isSearchable","meta","action","_toConsumableArray","isRtl","theme","customTheme","getTestId","ComponentDefaultTestId","DROPDOWN","sizes","BaseSizes","chipColors","DROPDOWN_CHIP_COLORS","menuPlacements","DROPDOWN_MENU_PLACEMENT","menuPositions","DROPDOWN_MENU_POSITION","createFilter"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{objectSpread2 as r,defineProperty as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{SIZES as n}from"../../constants/sizes.js";import{getCSSVar as e}from"../../services/themes.js";import{getScrollableParent as t}from"../../utils/dom-utils.js";var i=function(r){switch(r){case n.LARGE:return 48;case n.MEDIUM:return 40;default:return 32}},a=function(r){var o=i(r)-2;return{height:"".concat(o,"px")}},l=function(r){var o=i(r)-8;return{height:"".concat(o,"px"),width:"".concat(o,"px")}},c=function(){return{color:e("primary-text-color"),backgroundColor:e("secondary-background-color")}},d=function(r){return{fontSize:v(r),lineHeight:v(r),fontFamily:e("font-family")}},s=function(r){return r?{backgroundColor:e("disabled-background-color"),color:e("disabled-text-color"),borderColor:"transparent",cursor:"not-allowed",":active, :focus, :hover":{borderColor:"transparent",cursor:"not-allowed"},":active, :focus":{pointerEvents:"none"}}:{}},u=function(r){return r?{border:"hidden"}:{}},p=function(r){return r?{backgroundColor:e("allgrey-background-color")}:{}},f=function(o){var n=o.size;return function(o,t){var a=t.isDisabled,l=t.selectProps.readOnly;return delete o.pointerEvents,r(r(r(r({},o),function(r){var o=i(r);return{height:"".concat(o,"px")}}(n)),{},{minHeight:"30px",border:"1px solid ".concat(e("ui-border-color")),boxShadow:"none",borderRadius:e("border-radius-small"),boxSizing:"border-box",transition:"border 0.1s ".concat(e("expand-animation-timing")),":hover":{borderColor:e("primary-text-color"),borderRadius:e("border-radius-small")},":active, :focus-within":{borderColor:e("primary-color")}},s(a)),u(l))}},b=function(o){var n=o.size;return function(o,t){var i=t.isDisabled;return r(r(r(r(r({},o),d()),c()),{},{borderRadius:e("border-radius-small")},s(i)),a(n))}},m=function(o){var n=o.size;return function(o,t){var i=t.selectProps,a=t.isDisabled,c=i.menuIsOpen,d=i.readOnly;return r(r(r({},o),{},{display:d?"none":"flex",alignItems:"center",justifyContent:"center",padding:"0px"},l(n)),{},{margin:"4px 3px 4px 0px",backgroundColor:"transparent",borderRadius:e("border-radius-small"),svg:{transition:"transform 0.1s ".concat(e("expand-animation-timing")),transform:c?"rotate(180deg)":"rotate(0deg)"},color:e(a?"disabled-text-color":"icon-color"),":hover, :active":{backgroundColor:a?void 0:e("primary-background-hover-color"),color:a?void 0:e("icon-color")}})}},g=function(o){var n=o.size;return function(){return r(r({display:"flex",alignItems:"center",justifyContent:"center",color:e("icon-color"),backgroundColor:"transparent",borderRadius:e("border-radius-small")},l(n)),{},{":hover":{backgroundColor:e("primary-background-hover-color")}})}};function v(r){switch(r){case n.LARGE:case n.MEDIUM:return"16px";default:return"14px"}}var x=function(n){var t=n.size,i=n.rtl;return function(n,l){var u=l.isDisabled,f=l.selectProps.readOnly;return r(r(r(r(r(r(r(r({},n),function(r){return o({display:"flex",alignItems:"center"},"padding".concat(r?"Right":"Left"),"12px")}(i)),d()),c()),a(t)),s(u)),p(f)),{},{borderRadius:e("border-radius-small")})}},h=function(){return function(o,n){return r(r({},d()),function(o,n){var t=n.isDisabled,i=n.isSelected,a=n.isFocused;delete o[":active"],delete o.width;var l={display:"flex",alignContent:"center",borderRadius:e("border-radius-small"),marginRight:e("spacing-small"),marginLeft:e("spacing-small"),paddingLeft:e("spacing-small"),paddingRight:e("spacing-small"),transition:"all 0.1s ".concat(e("expand-animation-timing"))};return t?r(r(r({},o),l),{},{backgroundColor:"transparent",color:e("disabled-text-color"),cursor:"not-allowed"},a&&{backgroundColor:e("primary-background-hover-color")}):i?r(r(r({},o),l),{},{color:e("primary-text-color"),backgroundColor:e("primary-selected-color"),cursor:"pointer"}):r(r(r({},o),l),{},{color:e("primary-text-color"),cursor:"pointer"},a&&{":hover":{color:e("primary-text-color"),backgroundColor:e("primary-background-hover-color")}})}(o,n))}},y=function(r){switch(r){case n.LARGE:case n.MEDIUM:return"20px";default:return"16px"}},C=function(o){return r(r({},o),{},{borderRadius:e("border-radius-small"),colors:r(r({},o.colors),{},{primary25:e("primary-background-hover-color")})})},w=function(o){return{container:f(o),control:(w=o,k=w.size,function(o,n){var t=n.isDisabled,i=n.selectProps.readOnly;return r(r(r(r(r(r({},o),a(k)),c()),{},{minHeight:"30px",border:"0 solid transparent",borderRadius:e("border-radius-small"),":focus-within":{boxShadow:"0 0 0 1px ".concat(e("primary-color"))}},!t&&{":hover":{borderColor:"transparent",borderRadius:e("border-radius-small")}}),{},{cursor:i?"default":"pointer"},s(t)),u(i))}),placeholder:function(o,n){var t=n.isDisabled;return r(r(r({},o),d()),{},{color:e(t?"disabled-text-color":"secondary-text-color"),fontWeight:e("font-weight-normal")})},indicatorsContainer:b(o),dropdownIndicator:m(o),clearIndicator:g(o),singleValue:function(o,n){var e=n.isDisabled,t=n.selectProps,i=t.readOnly,a=i?r(r(r({},u(i)),p(i)),{},{cursor:"text"}):{};return r(r(r(r(r(r(r({},o),d()),c()),s(e)),function(r){if(r.menuIsOpen)return{opacity:.6}}(t)),a),{},{display:"flex",alignItems:"center",height:"100%"})},input:function(o){return r(r(r(r({},o),d()),c()),{},{display:"flex",alignItems:"center",textIndent:"-2px"})},valueContainer:x(o),menu:(l=o,v=l.controlRef,y=l.insideOverflowContainer,C=l.insideOverflowWithTransformContainer,function(o){var n,i=r(r(r({},o),d()),{},{color:e("primary-text-color"),backgroundColor:e("dialog-background-color"),boxShadow:"".concat(e("experimental-dropdown-border-in-dark-themes","0 0 0 0 transparent"),", ").concat(e("box-shadow-small"))});if(!y&&!C)return i;var a=null==v||null===(n=v.current)||void 0===n?void 0:n.getBoundingClientRect();if(!a)return i;if(y)return r(r({},i),{},{top:a.bottom,width:a.width});if(C){var l,c="-".concat(null===(l=t(null==v?void 0:v.current))||void 0===l?void 0:l.scrollTop,"px");return r(r({},i),{},{top:"auto",translate:"0 ".concat(c),width:a.width})}return i}),option:h(),indicatorSeparator:function(){return{display:"none"}},group:(n=o,i=n.withGroupDivider,function(){return r({paddingBottom:0,marginTop:"4px"},i&&{":not(:last-child)":{position:"relative",paddingBottom:"8px","::after":{content:'""',position:"absolute",bottom:"0",left:"var(--spacing-small)",width:"calc(100% - (var(--spacing-small) * 2))",height:"1px",backgroundColor:"var(--layout-border-color)"}}})}),groupHeading:function(){return{fontSize:"14px",lineHeight:"32px",display:"flex",alignItems:"center",marginLeft:e("spacing-medium"),color:e("secondary-text-color")}}};var n,i,l,v,y,C,w,k};export{C as customTheme,w as default,y as getIndicatorSize};
1
+ import{objectSpread2 as r,defineProperty as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{SIZES as n}from"../../constants/sizes.js";import{getCSSVar as e}from"../../services/themes.js";import{getScrollableParent as t}from"../../utils/dom-utils.js";var i=function(r){switch(r){case n.LARGE:return 48;case n.MEDIUM:return 40;default:return 32}},a=function(r){var o=i(r)-2;return{height:"".concat(o,"px")}},l=function(r){var o=i(r)-8;return{height:"".concat(o,"px"),width:"".concat(o,"px")}},c=function(){return{color:e("primary-text-color"),backgroundColor:e("secondary-background-color")}},d=function(r){return{fontSize:v(r),lineHeight:v(r),fontFamily:e("font-family")}},s=function(r){return r?{backgroundColor:e("disabled-background-color"),color:e("disabled-text-color"),borderColor:"transparent",cursor:"not-allowed",":active, :focus, :hover":{borderColor:"transparent",cursor:"not-allowed"},":active, :focus":{pointerEvents:"none"}}:{}},u=function(r){return r?{border:"hidden"}:{}},p=function(r){return r?{backgroundColor:e("allgrey-background-color")}:{}},f=function(o){var n=o.size;return function(o,t){var a=t.isDisabled,l=t.selectProps.readOnly;return delete o.pointerEvents,r(r(r(r({},o),function(r){var o=i(r);return{height:"".concat(o,"px")}}(n)),{},{minHeight:"30px",border:"1px solid ".concat(e("ui-border-color")),boxShadow:"none",borderRadius:e("border-radius-small"),boxSizing:"border-box",transition:"border 0.1s ".concat(e("expand-animation-timing")),":hover":{borderColor:e("primary-text-color"),borderRadius:e("border-radius-small")},":active, :focus-within":{borderColor:e("primary-color")}},s(a)),u(l))}},b=function(o){var n=o.size;return function(o,t){var i=t.isDisabled;return r(r(r(r(r({},o),d()),c()),{},{borderRadius:e("border-radius-small")},s(i)),a(n))}},m=function(o){var n=o.size;return function(o,t){var i=t.selectProps,a=t.isDisabled,c=i.menuIsOpen,d=i.readOnly;return r(r(r({},o),{},{display:d?"none":"flex",alignItems:"center",justifyContent:"center",padding:"0px"},l(n)),{},{margin:"4px 3px 4px 0px",backgroundColor:"transparent",borderRadius:e("border-radius-small"),svg:{transition:"transform 0.1s ".concat(e("expand-animation-timing")),transform:c?"rotate(180deg)":"rotate(0deg)"},color:e(a?"disabled-text-color":"icon-color"),":hover, :active":{backgroundColor:a?void 0:e("primary-background-hover-color"),color:a?void 0:e("icon-color")}})}},g=function(o){var n=o.size;return function(){return r(r({display:"flex",alignItems:"center",justifyContent:"center",color:e("icon-color"),backgroundColor:"transparent",borderRadius:e("border-radius-small")},l(n)),{},{":hover":{backgroundColor:e("primary-background-hover-color")}})}};function v(r){switch(r){case n.LARGE:case n.MEDIUM:return"16px";default:return"14px"}}var x=function(n){var t=n.size,i=n.rtl;return function(n,l){var u=l.isDisabled,f=l.selectProps.readOnly;return r(r(r(r(r(r(r(r({},n),function(r){return o({display:"flex",alignItems:"center"},"padding".concat(r?"Right":"Left"),"12px")}(i)),d()),c()),a(t)),s(u)),p(f)),{},{borderRadius:e("border-radius-small")})}},h=function(){return function(o,n){return r(r({},d()),function(o,n){var t=n.isDisabled,i=n.isSelected,a=n.isFocused;delete o[":active"],delete o.width;var l={display:"flex",alignContent:"center",borderRadius:e("border-radius-small"),marginRight:e("spacing-small"),marginLeft:e("spacing-small"),paddingLeft:e("spacing-small"),paddingRight:e("spacing-small"),transition:"all 0.1s ".concat(e("expand-animation-timing"))};return t?r(r(r({},o),l),{},{backgroundColor:"transparent",color:e("disabled-text-color"),cursor:"not-allowed"},a&&{backgroundColor:e("primary-background-hover-color")}):i?r(r(r({},o),l),{},{color:e("primary-text-color"),backgroundColor:e("primary-selected-color"),cursor:"pointer"}):r(r(r({},o),l),{},{color:e("primary-text-color"),cursor:"pointer"},a&&{":hover":{color:e("primary-text-color"),backgroundColor:e("primary-background-hover-color")}})}(o,n))}},y=function(r){switch(r){case n.LARGE:case n.MEDIUM:return"20px";default:return"16px"}},w=function(o){return r(r({},o),{},{borderRadius:e("border-radius-small"),colors:r(r({},o.colors),{},{primary25:e("primary-background-hover-color")})})},C=function(o){return{container:f(o),control:(R=o,I=R.size,function(o,n){var t=n.isDisabled,i=n.selectProps.readOnly;return r(r(r(r(r(r({},o),a(I)),c()),{},{minHeight:"30px",border:"0 solid transparent",borderRadius:e("border-radius-small"),":focus-within":{boxShadow:"0 0 0 1px ".concat(e("primary-color"))}},!t&&{":hover":{borderColor:"transparent",borderRadius:e("border-radius-small")}}),{},{cursor:i?"default":"pointer"},s(t)),u(i))}),placeholder:function(o,n){var t=n.isDisabled;return r(r(r({},o),d()),{},{color:e(t?"disabled-text-color":"secondary-text-color"),fontWeight:e("font-weight-normal")})},indicatorsContainer:b(o),dropdownIndicator:m(o),clearIndicator:g(o),singleValue:function(o,n){var e=n.isDisabled,t=n.selectProps,i=t.readOnly,a=i?r(r(r({},u(i)),p(i)),{},{cursor:"text"}):{};return r(r(r(r(r(r(r({},o),d()),c()),s(e)),function(r){if(r.menuIsOpen)return{opacity:.6}}(t)),a),{},{display:"flex",alignItems:"center",height:"100%"})},input:(C=o,k=C.searchable,function(o){return r(r(r(r({},o),d()),c()),{},{display:"flex",alignItems:"center",textIndent:"-2px"},!k&&{width:"0px"})}),valueContainer:x(o),menu:(l=o,v=l.controlRef,y=l.insideOverflowContainer,w=l.insideOverflowWithTransformContainer,function(o){var n,i=r(r(r({},o),d()),{},{color:e("primary-text-color"),backgroundColor:e("dialog-background-color"),boxShadow:"".concat(e("experimental-dropdown-border-in-dark-themes","0 0 0 0 transparent"),", ").concat(e("box-shadow-small"))});if(!y&&!w)return i;var a=null==v||null===(n=v.current)||void 0===n?void 0:n.getBoundingClientRect();if(!a)return i;if(y)return r(r({},i),{},{top:a.bottom,width:a.width});if(w){var l,c="-".concat(null===(l=t(null==v?void 0:v.current))||void 0===l?void 0:l.scrollTop,"px");return r(r({},i),{},{top:"auto",translate:"0 ".concat(c),width:a.width})}return i}),option:h(),indicatorSeparator:function(){return{display:"none"}},group:(n=o,i=n.withGroupDivider,function(){return r({paddingBottom:0,marginTop:"4px"},i&&{":not(:last-child)":{position:"relative",paddingBottom:"8px","::after":{content:'""',position:"absolute",bottom:"0",left:"var(--spacing-small)",width:"calc(100% - (var(--spacing-small) * 2))",height:"1px",backgroundColor:"var(--layout-border-color)"}}})}),groupHeading:function(){return{fontSize:"14px",lineHeight:"32px",display:"flex",alignItems:"center",marginLeft:e("spacing-medium"),color:e("secondary-text-color")}}};var n,i,l,v,y,w,C,k,R,I};export{w as customTheme,C as default,y as getIndicatorSize};
2
2
  //# sourceMappingURL=Dropdown.styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Dropdown.styles.js","sources":["../../../../../src/components/Dropdown/Dropdown.styles.js"],"sourcesContent":["import { SIZES } from \"../../constants/sizes\";\nimport { getCSSVar } from \"../../services/themes\";\nimport { getScrollableParent } from \"../../utils/dom-utils\";\n\nconst getSizeInPx = size => {\n switch (size) {\n case SIZES.LARGE:\n return 48;\n case SIZES.MEDIUM:\n return 40;\n case SIZES.SMALL:\n default:\n return 32;\n }\n};\n\nconst getSize = size => {\n const selectedSize = getSizeInPx(size);\n return { height: `${selectedSize}px` };\n};\n\nconst getInnerSize = size => {\n const selectedSize = getSizeInPx(size) - 2;\n return { height: `${selectedSize}px` };\n};\n\nconst getIndicatorBoxSize = size => {\n const selectedSize = getSizeInPx(size) - 8;\n return {\n height: `${selectedSize}px`,\n width: `${selectedSize}px`\n };\n};\n\nconst getColor = () => {\n const color = getCSSVar(\"primary-text-color\");\n const backgroundColor = getCSSVar(\"secondary-background-color\");\n return { color, backgroundColor };\n};\n\nconst getFont = size => ({\n fontSize: getSingleValueTextSize(size),\n lineHeight: getSingleValueTextSize(size),\n fontFamily: getCSSVar(\"font-family\")\n});\n\nconst disabledContainerStyle = isDisabled => {\n if (!isDisabled) return {};\n return {\n backgroundColor: getCSSVar(\"disabled-background-color\"),\n color: getCSSVar(\"disabled-text-color\"),\n borderColor: \"transparent\",\n cursor: \"not-allowed\",\n \":active, :focus, :hover\": {\n borderColor: \"transparent\",\n cursor: \"not-allowed\"\n },\n \":active, :focus\": {\n pointerEvents: \"none\"\n }\n };\n};\n\nconst readOnlyContainerStyle = readOnly => {\n if (!readOnly) return {};\n return {\n border: \"hidden\"\n };\n};\n\nconst readOnlyStyle = isReadOnly => {\n if (!isReadOnly) {\n return {};\n }\n return {\n backgroundColor: getCSSVar(\"allgrey-background-color\")\n };\n};\n\nconst getOptionStyle = (provided, { isDisabled, isSelected, isFocused }) => {\n delete provided[\":active\"];\n delete provided.width;\n const general = {\n display: \"flex\",\n alignContent: \"center\",\n borderRadius: getCSSVar(\"border-radius-small\"),\n marginRight: getCSSVar(\"spacing-small\"),\n marginLeft: getCSSVar(\"spacing-small\"),\n paddingLeft: getCSSVar(\"spacing-small\"),\n paddingRight: getCSSVar(\"spacing-small\"),\n transition: `all 0.1s ${getCSSVar(\"expand-animation-timing\")}`\n };\n if (isDisabled) {\n return {\n ...provided,\n ...general,\n backgroundColor: \"transparent\",\n color: getCSSVar(\"disabled-text-color\"),\n cursor: \"not-allowed\",\n ...(isFocused && {\n backgroundColor: getCSSVar(\"primary-background-hover-color\")\n })\n };\n }\n if (isSelected) {\n return {\n ...provided,\n ...general,\n color: getCSSVar(\"primary-text-color\"),\n backgroundColor: getCSSVar(\"primary-selected-color\"),\n cursor: \"pointer\"\n };\n }\n return {\n ...provided,\n ...general,\n color: getCSSVar(\"primary-text-color\"),\n cursor: \"pointer\",\n ...(isFocused && {\n \":hover\": {\n color: getCSSVar(\"primary-text-color\"),\n backgroundColor: getCSSVar(\"primary-background-hover-color\")\n }\n })\n };\n};\n\nconst container =\n ({ size }) =>\n (provided, { isDisabled, selectProps }) => {\n const { readOnly } = selectProps;\n delete provided.pointerEvents;\n return {\n ...provided,\n ...getSize(size),\n minHeight: \"30px\",\n border: `1px solid ${getCSSVar(\"ui-border-color\")}`,\n boxShadow: \"none\",\n borderRadius: getCSSVar(\"border-radius-small\"),\n boxSizing: \"border-box\",\n transition: `border 0.1s ${getCSSVar(\"expand-animation-timing\")}`,\n \":hover\": {\n borderColor: getCSSVar(\"primary-text-color\"),\n borderRadius: getCSSVar(\"border-radius-small\")\n },\n \":active, :focus-within\": {\n borderColor: getCSSVar(\"primary-color\")\n },\n ...disabledContainerStyle(isDisabled),\n ...readOnlyContainerStyle(readOnly)\n };\n };\n\nconst control =\n ({ size }) =>\n (provided, { isDisabled, selectProps }) => {\n const { readOnly } = selectProps;\n return {\n ...provided,\n ...getInnerSize(size),\n ...getColor(),\n minHeight: \"30px\",\n border: \"0 solid transparent\",\n borderRadius: getCSSVar(\"border-radius-small\"),\n \":focus-within\": {\n boxShadow: `0 0 0 1px ${getCSSVar(\"primary-color\")}`\n },\n ...(!isDisabled && {\n \":hover\": {\n borderColor: \"transparent\",\n borderRadius: getCSSVar(\"border-radius-small\")\n }\n }),\n cursor: readOnly ? \"default\" : \"pointer\",\n ...disabledContainerStyle(isDisabled),\n ...readOnlyContainerStyle(readOnly)\n };\n };\n\nconst placeholder =\n () =>\n (provided, { isDisabled }) => ({\n ...provided,\n ...getFont(),\n color: isDisabled ? getCSSVar(\"disabled-text-color\") : getCSSVar(\"secondary-text-color\"),\n fontWeight: getCSSVar(\"font-weight-normal\")\n });\n\nconst indicatorsContainer =\n ({ size }) =>\n (provided, { isDisabled }) => ({\n ...provided,\n ...getFont(),\n ...getColor(),\n borderRadius: getCSSVar(\"border-radius-small\"),\n ...disabledContainerStyle(isDisabled),\n ...getInnerSize(size)\n });\n\nconst dropdownIndicator =\n ({ size }) =>\n (provided, { selectProps, isDisabled }) => {\n const { menuIsOpen, readOnly } = selectProps;\n return {\n ...provided,\n display: readOnly ? \"none\" : \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n padding: \"0px\",\n ...getIndicatorBoxSize(size),\n margin: \"4px 3px 4px 0px\",\n backgroundColor: \"transparent\",\n borderRadius: getCSSVar(\"border-radius-small\"),\n svg: {\n transition: `transform 0.1s ${getCSSVar(\"expand-animation-timing\")}`,\n transform: menuIsOpen ? \"rotate(180deg)\" : \"rotate(0deg)\"\n },\n color: isDisabled ? getCSSVar(\"disabled-text-color\") : getCSSVar(\"icon-color\"),\n \":hover, :active\": {\n backgroundColor: isDisabled ? undefined : getCSSVar(\"primary-background-hover-color\"),\n color: isDisabled ? undefined : getCSSVar(\"icon-color\")\n }\n };\n };\n\nconst clearIndicator =\n ({ size }) =>\n () => ({\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n color: getCSSVar(\"icon-color\"),\n backgroundColor: \"transparent\",\n borderRadius: getCSSVar(\"border-radius-small\"),\n ...getIndicatorBoxSize(size),\n \":hover\": {\n backgroundColor: getCSSVar(\"primary-background-hover-color\")\n }\n });\n\nconst menuOpenOpacity = ({ menuIsOpen }) => {\n if (menuIsOpen) {\n return {\n opacity: 0.6\n };\n }\n};\n\nconst singleValue =\n () =>\n (provided, { isDisabled, selectProps }) => {\n const { readOnly } = selectProps;\n const readOnlyProps = readOnly\n ? {\n ...readOnlyContainerStyle(readOnly),\n ...readOnlyStyle(readOnly),\n cursor: \"text\"\n }\n : {};\n\n return {\n ...provided,\n ...getFont(),\n ...getColor(),\n ...disabledContainerStyle(isDisabled),\n ...menuOpenOpacity(selectProps),\n ...readOnlyProps,\n display: \"flex\",\n alignItems: \"center\",\n height: \"100%\"\n };\n };\n\nfunction getSingleValueTextSize(size) {\n switch (size) {\n case SIZES.LARGE:\n return \"16px\";\n case SIZES.MEDIUM:\n return \"16px\";\n case SIZES.SMALL:\n default:\n return \"14px\";\n }\n}\n\nconst input = () => provided => ({\n ...provided,\n ...getFont(),\n ...getColor(),\n display: \"flex\",\n alignItems: \"center\",\n textIndent: \"-2px\"\n});\n\n// 12px - because we have inner 4px\nconst getCenterContentStyle = rtl => {\n return {\n display: \"flex\",\n alignItems: \"center\",\n [`padding${rtl ? \"Right\" : \"Left\"}`]: \"12px\"\n };\n};\n\nconst valueContainer =\n ({ size, rtl }) =>\n (provided, { isDisabled, selectProps: { readOnly } }) => ({\n ...provided,\n ...getCenterContentStyle(rtl),\n ...getFont(),\n ...getColor(),\n ...getInnerSize(size),\n ...disabledContainerStyle(isDisabled),\n ...readOnlyStyle(readOnly),\n borderRadius: getCSSVar(\"border-radius-small\")\n });\n\nconst menu =\n ({ controlRef, insideOverflowContainer, insideOverflowWithTransformContainer }) =>\n provided => {\n const baseStyle = {\n ...provided,\n ...getFont(),\n color: getCSSVar(\"primary-text-color\"),\n backgroundColor: getCSSVar(\"dialog-background-color\"),\n boxShadow: `${getCSSVar(\"experimental-dropdown-border-in-dark-themes\", \"0 0 0 0 transparent\")}, ${getCSSVar(\n \"box-shadow-small\"\n )}`\n };\n\n if (!insideOverflowContainer && !insideOverflowWithTransformContainer) return baseStyle;\n const parentPositionData = controlRef?.current?.getBoundingClientRect();\n // If no location found do not add anything to hard coded style\n if (!parentPositionData) return baseStyle;\n\n /** If the dropdown is inside a scroll in a regular container,position: fixed content (like our dropdown menu) will be attached to the start of the viewport.\n * For this case we will override the top menu position value to be the according the the drop down location for correct dispaly.\n * When the dropdown container (with overflow:hidden or overflow:scroll) using transform CSS function, we can use a relative positioned inner container, which our menu will be attach to it's\n * start when the menu position is fixed, and this is why in this case we define top:auto.\n * we also need in this case to translate the menu y position to fit inside a scrollable parent.\n */\n\n if (insideOverflowContainer) {\n return { ...baseStyle, top: parentPositionData.bottom, width: parentPositionData.width };\n } else if (insideOverflowWithTransformContainer) {\n const translateY = `-${getScrollableParent(controlRef?.current)?.scrollTop}px`;\n return {\n ...baseStyle,\n top: \"auto\",\n translate: `0 ${translateY}`,\n width: parentPositionData.width\n };\n }\n return baseStyle;\n };\n\nconst option = () => (provided, state) => ({\n ...getFont(),\n ...getOptionStyle(provided, state)\n});\n\nconst indicatorSeparator = () => () => ({\n display: \"none\"\n});\n\nconst group =\n ({ withGroupDivider }) =>\n () => ({\n paddingBottom: 0,\n marginTop: \"4px\",\n ...(withGroupDivider && {\n \":not(:last-child)\": {\n position: \"relative\",\n paddingBottom: \"8px\",\n \"::after\": {\n content: '\"\"',\n position: \"absolute\",\n bottom: \"0\",\n left: \"var(--spacing-small)\",\n width: \"calc(100% - (var(--spacing-small) * 2))\",\n height: \"1px\",\n backgroundColor: \"var(--layout-border-color)\"\n }\n }\n })\n });\n\nconst groupHeading = () => () => ({\n fontSize: \"14px\",\n lineHeight: \"32px\",\n display: \"flex\",\n alignItems: \"center\",\n marginLeft: getCSSVar(\"spacing-medium\"),\n color: getCSSVar(\"secondary-text-color\")\n});\n\nexport const getIndicatorSize = size => {\n switch (size) {\n case SIZES.LARGE:\n return \"20px\";\n case SIZES.MEDIUM:\n return \"20px\";\n case SIZES.SMALL:\n default:\n return \"16px\";\n }\n};\n\nexport const customTheme = theme => ({\n ...theme,\n borderRadius: getCSSVar(\"border-radius-small\"),\n colors: {\n ...theme.colors,\n primary25: getCSSVar(\"primary-background-hover-color\")\n }\n});\n\nexport default data => ({\n container: container(data),\n control: control(data),\n placeholder: placeholder(data),\n indicatorsContainer: indicatorsContainer(data),\n dropdownIndicator: dropdownIndicator(data),\n clearIndicator: clearIndicator(data),\n singleValue: singleValue(data),\n input: input(data),\n valueContainer: valueContainer(data),\n menu: menu(data),\n option: option(data),\n indicatorSeparator: indicatorSeparator(data),\n group: group(data),\n groupHeading: groupHeading(data)\n});\n"],"names":["getSizeInPx","size","SIZES","LARGE","MEDIUM","getInnerSize","selectedSize","height","concat","getIndicatorBoxSize","width","getColor","color","getCSSVar","backgroundColor","getFont","fontSize","getSingleValueTextSize","lineHeight","fontFamily","disabledContainerStyle","isDisabled","borderColor","cursor","pointerEvents","readOnlyContainerStyle","readOnly","border","readOnlyStyle","isReadOnly","container","_ref2","provided","_ref3","selectProps","_objectSpread","getSize","minHeight","boxShadow","borderRadius","boxSizing","transition","indicatorsContainer","_ref7","_ref8","dropdownIndicator","_ref9","_ref10","menuIsOpen","display","alignItems","justifyContent","padding","margin","svg","transform","undefined","clearIndicator","_ref11","valueContainer","_ref15","rtl","_ref16","_defineProperty","getCenterContentStyle","option","state","_ref","isSelected","isFocused","general","alignContent","marginRight","marginLeft","paddingLeft","paddingRight","getOptionStyle","getIndicatorSize","customTheme","theme","colors","primary25","generateBaseStyles","data","control","_ref4","_ref5","placeholder","_ref6","fontWeight","singleValue","_ref13","readOnlyProps","_ref12","opacity","menuOpenOpacity","input","textIndent","menu","_ref17","controlRef","insideOverflowContainer","insideOverflowWithTransformContainer","_controlRef$current","baseStyle","parentPositionData","current","getBoundingClientRect","top","bottom","_getScrollableParent","translateY","getScrollableParent","scrollTop","translate","indicatorSeparator","group","_ref18","withGroupDivider","paddingBottom","marginTop","position","content","left","groupHeading"],"mappings":"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"}
1
+ {"version":3,"file":"Dropdown.styles.js","sources":["../../../../../src/components/Dropdown/Dropdown.styles.js"],"sourcesContent":["import { SIZES } from \"../../constants/sizes\";\nimport { getCSSVar } from \"../../services/themes\";\nimport { getScrollableParent } from \"../../utils/dom-utils\";\n\nconst getSizeInPx = size => {\n switch (size) {\n case SIZES.LARGE:\n return 48;\n case SIZES.MEDIUM:\n return 40;\n case SIZES.SMALL:\n default:\n return 32;\n }\n};\n\nconst getSize = size => {\n const selectedSize = getSizeInPx(size);\n return { height: `${selectedSize}px` };\n};\n\nconst getInnerSize = size => {\n const selectedSize = getSizeInPx(size) - 2;\n return { height: `${selectedSize}px` };\n};\n\nconst getIndicatorBoxSize = size => {\n const selectedSize = getSizeInPx(size) - 8;\n return {\n height: `${selectedSize}px`,\n width: `${selectedSize}px`\n };\n};\n\nconst getColor = () => {\n const color = getCSSVar(\"primary-text-color\");\n const backgroundColor = getCSSVar(\"secondary-background-color\");\n return { color, backgroundColor };\n};\n\nconst getFont = size => ({\n fontSize: getSingleValueTextSize(size),\n lineHeight: getSingleValueTextSize(size),\n fontFamily: getCSSVar(\"font-family\")\n});\n\nconst disabledContainerStyle = isDisabled => {\n if (!isDisabled) return {};\n return {\n backgroundColor: getCSSVar(\"disabled-background-color\"),\n color: getCSSVar(\"disabled-text-color\"),\n borderColor: \"transparent\",\n cursor: \"not-allowed\",\n \":active, :focus, :hover\": {\n borderColor: \"transparent\",\n cursor: \"not-allowed\"\n },\n \":active, :focus\": {\n pointerEvents: \"none\"\n }\n };\n};\n\nconst readOnlyContainerStyle = readOnly => {\n if (!readOnly) return {};\n return {\n border: \"hidden\"\n };\n};\n\nconst readOnlyStyle = isReadOnly => {\n if (!isReadOnly) {\n return {};\n }\n return {\n backgroundColor: getCSSVar(\"allgrey-background-color\")\n };\n};\n\nconst getOptionStyle = (provided, { isDisabled, isSelected, isFocused }) => {\n delete provided[\":active\"];\n delete provided.width;\n const general = {\n display: \"flex\",\n alignContent: \"center\",\n borderRadius: getCSSVar(\"border-radius-small\"),\n marginRight: getCSSVar(\"spacing-small\"),\n marginLeft: getCSSVar(\"spacing-small\"),\n paddingLeft: getCSSVar(\"spacing-small\"),\n paddingRight: getCSSVar(\"spacing-small\"),\n transition: `all 0.1s ${getCSSVar(\"expand-animation-timing\")}`\n };\n if (isDisabled) {\n return {\n ...provided,\n ...general,\n backgroundColor: \"transparent\",\n color: getCSSVar(\"disabled-text-color\"),\n cursor: \"not-allowed\",\n ...(isFocused && {\n backgroundColor: getCSSVar(\"primary-background-hover-color\")\n })\n };\n }\n if (isSelected) {\n return {\n ...provided,\n ...general,\n color: getCSSVar(\"primary-text-color\"),\n backgroundColor: getCSSVar(\"primary-selected-color\"),\n cursor: \"pointer\"\n };\n }\n return {\n ...provided,\n ...general,\n color: getCSSVar(\"primary-text-color\"),\n cursor: \"pointer\",\n ...(isFocused && {\n \":hover\": {\n color: getCSSVar(\"primary-text-color\"),\n backgroundColor: getCSSVar(\"primary-background-hover-color\")\n }\n })\n };\n};\n\nconst container =\n ({ size }) =>\n (provided, { isDisabled, selectProps }) => {\n const { readOnly } = selectProps;\n delete provided.pointerEvents;\n return {\n ...provided,\n ...getSize(size),\n minHeight: \"30px\",\n border: `1px solid ${getCSSVar(\"ui-border-color\")}`,\n boxShadow: \"none\",\n borderRadius: getCSSVar(\"border-radius-small\"),\n boxSizing: \"border-box\",\n transition: `border 0.1s ${getCSSVar(\"expand-animation-timing\")}`,\n \":hover\": {\n borderColor: getCSSVar(\"primary-text-color\"),\n borderRadius: getCSSVar(\"border-radius-small\")\n },\n \":active, :focus-within\": {\n borderColor: getCSSVar(\"primary-color\")\n },\n ...disabledContainerStyle(isDisabled),\n ...readOnlyContainerStyle(readOnly)\n };\n };\n\nconst control =\n ({ size }) =>\n (provided, { isDisabled, selectProps }) => {\n const { readOnly } = selectProps;\n return {\n ...provided,\n ...getInnerSize(size),\n ...getColor(),\n minHeight: \"30px\",\n border: \"0 solid transparent\",\n borderRadius: getCSSVar(\"border-radius-small\"),\n \":focus-within\": {\n boxShadow: `0 0 0 1px ${getCSSVar(\"primary-color\")}`\n },\n ...(!isDisabled && {\n \":hover\": {\n borderColor: \"transparent\",\n borderRadius: getCSSVar(\"border-radius-small\")\n }\n }),\n cursor: readOnly ? \"default\" : \"pointer\",\n ...disabledContainerStyle(isDisabled),\n ...readOnlyContainerStyle(readOnly)\n };\n };\n\nconst placeholder =\n () =>\n (provided, { isDisabled }) => ({\n ...provided,\n ...getFont(),\n color: isDisabled ? getCSSVar(\"disabled-text-color\") : getCSSVar(\"secondary-text-color\"),\n fontWeight: getCSSVar(\"font-weight-normal\")\n });\n\nconst indicatorsContainer =\n ({ size }) =>\n (provided, { isDisabled }) => ({\n ...provided,\n ...getFont(),\n ...getColor(),\n borderRadius: getCSSVar(\"border-radius-small\"),\n ...disabledContainerStyle(isDisabled),\n ...getInnerSize(size)\n });\n\nconst dropdownIndicator =\n ({ size }) =>\n (provided, { selectProps, isDisabled }) => {\n const { menuIsOpen, readOnly } = selectProps;\n return {\n ...provided,\n display: readOnly ? \"none\" : \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n padding: \"0px\",\n ...getIndicatorBoxSize(size),\n margin: \"4px 3px 4px 0px\",\n backgroundColor: \"transparent\",\n borderRadius: getCSSVar(\"border-radius-small\"),\n svg: {\n transition: `transform 0.1s ${getCSSVar(\"expand-animation-timing\")}`,\n transform: menuIsOpen ? \"rotate(180deg)\" : \"rotate(0deg)\"\n },\n color: isDisabled ? getCSSVar(\"disabled-text-color\") : getCSSVar(\"icon-color\"),\n \":hover, :active\": {\n backgroundColor: isDisabled ? undefined : getCSSVar(\"primary-background-hover-color\"),\n color: isDisabled ? undefined : getCSSVar(\"icon-color\")\n }\n };\n };\n\nconst clearIndicator =\n ({ size }) =>\n () => ({\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n color: getCSSVar(\"icon-color\"),\n backgroundColor: \"transparent\",\n borderRadius: getCSSVar(\"border-radius-small\"),\n ...getIndicatorBoxSize(size),\n \":hover\": {\n backgroundColor: getCSSVar(\"primary-background-hover-color\")\n }\n });\n\nconst menuOpenOpacity = ({ menuIsOpen }) => {\n if (menuIsOpen) {\n return {\n opacity: 0.6\n };\n }\n};\n\nconst singleValue =\n () =>\n (provided, { isDisabled, selectProps }) => {\n const { readOnly } = selectProps;\n const readOnlyProps = readOnly\n ? {\n ...readOnlyContainerStyle(readOnly),\n ...readOnlyStyle(readOnly),\n cursor: \"text\"\n }\n : {};\n\n return {\n ...provided,\n ...getFont(),\n ...getColor(),\n ...disabledContainerStyle(isDisabled),\n ...menuOpenOpacity(selectProps),\n ...readOnlyProps,\n display: \"flex\",\n alignItems: \"center\",\n height: \"100%\"\n };\n };\n\nfunction getSingleValueTextSize(size) {\n switch (size) {\n case SIZES.LARGE:\n return \"16px\";\n case SIZES.MEDIUM:\n return \"16px\";\n case SIZES.SMALL:\n default:\n return \"14px\";\n }\n}\n\nconst input =\n ({ searchable }) =>\n provided => ({\n ...provided,\n ...getFont(),\n ...getColor(),\n display: \"flex\",\n alignItems: \"center\",\n textIndent: \"-2px\",\n ...(!searchable && {\n width: \"0px\"\n })\n });\n\n// 12px - because we have inner 4px\nconst getCenterContentStyle = rtl => {\n return {\n display: \"flex\",\n alignItems: \"center\",\n [`padding${rtl ? \"Right\" : \"Left\"}`]: \"12px\"\n };\n};\n\nconst valueContainer =\n ({ size, rtl }) =>\n (provided, { isDisabled, selectProps: { readOnly } }) => ({\n ...provided,\n ...getCenterContentStyle(rtl),\n ...getFont(),\n ...getColor(),\n ...getInnerSize(size),\n ...disabledContainerStyle(isDisabled),\n ...readOnlyStyle(readOnly),\n borderRadius: getCSSVar(\"border-radius-small\")\n });\n\nconst menu =\n ({ controlRef, insideOverflowContainer, insideOverflowWithTransformContainer }) =>\n provided => {\n const baseStyle = {\n ...provided,\n ...getFont(),\n color: getCSSVar(\"primary-text-color\"),\n backgroundColor: getCSSVar(\"dialog-background-color\"),\n boxShadow: `${getCSSVar(\"experimental-dropdown-border-in-dark-themes\", \"0 0 0 0 transparent\")}, ${getCSSVar(\n \"box-shadow-small\"\n )}`\n };\n\n if (!insideOverflowContainer && !insideOverflowWithTransformContainer) return baseStyle;\n const parentPositionData = controlRef?.current?.getBoundingClientRect();\n // If no location found do not add anything to hard coded style\n if (!parentPositionData) return baseStyle;\n\n /** If the dropdown is inside a scroll in a regular container,position: fixed content (like our dropdown menu) will be attached to the start of the viewport.\n * For this case we will override the top menu position value to be the according the the drop down location for correct dispaly.\n * When the dropdown container (with overflow:hidden or overflow:scroll) using transform CSS function, we can use a relative positioned inner container, which our menu will be attach to it's\n * start when the menu position is fixed, and this is why in this case we define top:auto.\n * we also need in this case to translate the menu y position to fit inside a scrollable parent.\n */\n\n if (insideOverflowContainer) {\n return { ...baseStyle, top: parentPositionData.bottom, width: parentPositionData.width };\n } else if (insideOverflowWithTransformContainer) {\n const translateY = `-${getScrollableParent(controlRef?.current)?.scrollTop}px`;\n return {\n ...baseStyle,\n top: \"auto\",\n translate: `0 ${translateY}`,\n width: parentPositionData.width\n };\n }\n return baseStyle;\n };\n\nconst option = () => (provided, state) => ({\n ...getFont(),\n ...getOptionStyle(provided, state)\n});\n\nconst indicatorSeparator = () => () => ({\n display: \"none\"\n});\n\nconst group =\n ({ withGroupDivider }) =>\n () => ({\n paddingBottom: 0,\n marginTop: \"4px\",\n ...(withGroupDivider && {\n \":not(:last-child)\": {\n position: \"relative\",\n paddingBottom: \"8px\",\n \"::after\": {\n content: '\"\"',\n position: \"absolute\",\n bottom: \"0\",\n left: \"var(--spacing-small)\",\n width: \"calc(100% - (var(--spacing-small) * 2))\",\n height: \"1px\",\n backgroundColor: \"var(--layout-border-color)\"\n }\n }\n })\n });\n\nconst groupHeading = () => () => ({\n fontSize: \"14px\",\n lineHeight: \"32px\",\n display: \"flex\",\n alignItems: \"center\",\n marginLeft: getCSSVar(\"spacing-medium\"),\n color: getCSSVar(\"secondary-text-color\")\n});\n\nexport const getIndicatorSize = size => {\n switch (size) {\n case SIZES.LARGE:\n return \"20px\";\n case SIZES.MEDIUM:\n return \"20px\";\n case SIZES.SMALL:\n default:\n return \"16px\";\n }\n};\n\nexport const customTheme = theme => ({\n ...theme,\n borderRadius: getCSSVar(\"border-radius-small\"),\n colors: {\n ...theme.colors,\n primary25: getCSSVar(\"primary-background-hover-color\")\n }\n});\n\nexport default data => ({\n container: container(data),\n control: control(data),\n placeholder: placeholder(data),\n indicatorsContainer: indicatorsContainer(data),\n dropdownIndicator: dropdownIndicator(data),\n clearIndicator: clearIndicator(data),\n singleValue: singleValue(data),\n input: input(data),\n valueContainer: valueContainer(data),\n menu: menu(data),\n option: option(data),\n indicatorSeparator: indicatorSeparator(data),\n group: group(data),\n groupHeading: groupHeading(data)\n});\n"],"names":["getSizeInPx","size","SIZES","LARGE","MEDIUM","getInnerSize","selectedSize","height","concat","getIndicatorBoxSize","width","getColor","color","getCSSVar","backgroundColor","getFont","fontSize","getSingleValueTextSize","lineHeight","fontFamily","disabledContainerStyle","isDisabled","borderColor","cursor","pointerEvents","readOnlyContainerStyle","readOnly","border","readOnlyStyle","isReadOnly","container","_ref2","provided","_ref3","selectProps","_objectSpread","getSize","minHeight","boxShadow","borderRadius","boxSizing","transition","indicatorsContainer","_ref7","_ref8","dropdownIndicator","_ref9","_ref10","menuIsOpen","display","alignItems","justifyContent","padding","margin","svg","transform","undefined","clearIndicator","_ref11","valueContainer","_ref16","rtl","_ref17","_defineProperty","getCenterContentStyle","option","state","_ref","isSelected","isFocused","general","alignContent","marginRight","marginLeft","paddingLeft","paddingRight","getOptionStyle","getIndicatorSize","customTheme","theme","colors","primary25","generateBaseStyles","data","control","_ref4","_ref5","placeholder","_ref6","fontWeight","singleValue","_ref13","readOnlyProps","_ref12","opacity","menuOpenOpacity","input","_ref14","searchable","textIndent","menu","_ref18","controlRef","insideOverflowContainer","insideOverflowWithTransformContainer","_controlRef$current","baseStyle","parentPositionData","current","getBoundingClientRect","top","bottom","_getScrollableParent","translateY","getScrollableParent","scrollTop","translate","indicatorSeparator","group","_ref19","withGroupDivider","paddingBottom","marginTop","position","content","left","groupHeading"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import r,{forwardRef as o,useRef as n,useState as a,useEffect as l}from"react";import i from"classnames";import u from"../../hooks/useMergeRef.js";import s from"./EditableTypography.module.scss.js";import{keyCodes as c}from"../../constants/keyCodes.js";import"../../constants/sizes.js";import{useKeyboardButtonPressedFunc as d}from"../../hooks/useKeyboardButtonPressedFunc.js";import p from"../../hooks/usePrevious/index.js";var f=o((function(o,f){var m=o.id,h=o.className,v=o["data-testid"],y=o.value,g=o.onChange,b=o.onClick,E=o.readOnly,w=void 0!==E&&E,C=o.ariaLabel,x=void 0===C?"":C,k=o.placeholder,j=o.clearable,B=o.typographyClassName,F=o.component,N=o.isEditMode,P=o.autoSelectTextOnEditMode,T=o.onEditModeChange,K=o.tooltipProps,M=o.type,D=o.weight,R=o.multiline,S=void 0!==R&&R,A=n(null),H=u(f,A),O=a(N||!1),W=e(O,2),_=W[0],q=W[1],z=a(y),I=e(z,2),L=I[0],G=I[1],J=a(0),Q=e(J,2),U=Q[0],V=Q[1],X=a(0),Y=e(X,2),Z=Y[0],$=Y[1],ee=n(0),te=n(0),re=p(y),oe=n(null),ne=n(null);function ae(e){w||_||(e.preventDefault(),le(!0))}function le(e){null==T||T(e),q(e)}function ie(){(le(!1),y!==L)&&(L||j&&k?(G(L),null==g||g(L)):G(y))}function ue(){ie()}function se(e){if(e.key===c.ENTER){if(S&&e.shiftKey)return;ie()}e.key===c.ESCAPE&&(le(!1),G(y))}function ce(e){G(e.target.value),S&&fe()}l((function(){_||y===re||y===L||G(y)}),[re,_,y,L]),l((function(){q(N)}),[N]);var de=d(ae);function pe(){var e,t;if(null===(t=null===(e=oe.current)||void 0===e?void 0:e.focus)||void 0===t||t.call(e),oe.current){var r=oe.current,o=r.value.length;r.setSelectionRange(o,o)}S&&function(){if(S&&oe.current){var e=oe.current;if(!e)return;var t=window.getComputedStyle(e),r=parseFloat(t.lineHeight)||16,o=parseFloat(t.paddingTop)||0,n=parseFloat(t.paddingBottom)||0,a=parseFloat(t.borderTopWidth)||0,l=parseFloat(t.borderBottomWidth)||0;te.current=r,ee.current=o+n+a+l,fe()}}()}function fe(){oe.current&&($("auto"),requestAnimationFrame((function(){var e=oe.current;e&&$(Math.max(e.scrollHeight+ee.current,te.current+ee.current))})))}return l((function(){var e,t;_&&(pe(),P&&(null===(t=null===(e=oe.current)||void 0===e?void 0:e.select)||void 0===t||t.call(e)))}),[P,_]),l((function(){if(ne.current){var e=ne.current.getBoundingClientRect();V(e.width)}}),[L,_]),r.createElement("div",{ref:H,id:m,"aria-label":x,"data-testid":v,className:i(s.editableTypography,h),role:_?null:"button",onClick:function(e){null==b||b(e),ae(e)},onKeyDown:de},_&&(S?r.createElement("textarea",{ref:oe,className:i(s.textarea,B),value:L,onChange:ce,onKeyDown:se,onBlur:ue,"aria-label":x,placeholder:k,style:{width:U,height:Z},role:"textbox",rows:1}):r.createElement("input",{ref:oe,className:i(s.input,B),value:L,onChange:ce,onKeyDown:se,onBlur:ue,"aria-label":x,placeholder:k,style:{width:U},role:"input"})),r.createElement(F,{ref:ne,"aria-hidden":_,className:i(s.typography,B,t(t(t(t({},s.hidden,_),s.disabled,w),s.placeholder,!L&&k),s.multiline,!_&&S)),tabIndex:0,tooltipProps:K,weight:D,type:M,ellipsis:!S},L||k))}));export{f as default};
1
+ import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import r,{forwardRef as o,useRef as n,useState as a,useEffect as l}from"react";import i from"classnames";import u from"../../hooks/useMergeRef.js";import s from"./EditableTypography.module.scss.js";import{keyCodes as c}from"../../constants/keyCodes.js";import"../../constants/sizes.js";import{useKeyboardButtonPressedFunc as d}from"../../hooks/useKeyboardButtonPressedFunc.js";import p from"../../hooks/usePrevious/index.js";var f=o((function(o,f){var m=o.id,h=o.className,v=o["data-testid"],g=o.value,y=o.onChange,b=o.onClick,E=o.readOnly,w=void 0!==E&&E,C=o.ariaLabel,x=void 0===C?"":C,P=o.placeholder,k=o.clearable,j=o.typographyClassName,B=o.component,F=o.isEditMode,N=o.autoSelectTextOnEditMode,T=o.onEditModeChange,D=o.tooltipProps,K=o.type,M=o.weight,R=o.multiline,S=void 0!==R&&R,A=n(null),H=u(f,A),O=a(F||!1),W=e(O,2),_=W[0],q=W[1],z=a(g),I=e(z,2),L=I[0],G=I[1],J=a(0),Q=e(J,2),U=Q[0],V=Q[1],X=a(0),Y=e(X,2),Z=Y[0],$=Y[1],ee=n(0),te=n(0),re=p(g),oe=n(null),ne=n(null);function ae(e){w||_||(e.preventDefault(),le(!0))}function le(e){null==T||T(e),q(e)}function ie(){(le(!1),g!==L)&&(L||k&&P?(G(L),null==y||y(L)):G(g))}function ue(){ie()}function se(e){if(e.key===c.ENTER){if(S&&e.shiftKey)return;e.preventDefault(),e.stopPropagation(),ie()}e.key===c.ESCAPE&&(e.preventDefault(),e.stopPropagation(),le(!1),G(g))}function ce(e){G(e.target.value),S&&fe()}l((function(){_||g===re||g===L||G(g)}),[re,_,g,L]),l((function(){q(F)}),[F]);var de=d(ae);function pe(){var e,t;if(null===(t=null===(e=oe.current)||void 0===e?void 0:e.focus)||void 0===t||t.call(e),oe.current){var r=oe.current,o=r.value.length;r.setSelectionRange(o,o)}S&&function(){if(S&&oe.current){var e=oe.current;if(!e)return;var t=window.getComputedStyle(e),r=parseFloat(t.lineHeight)||16,o=parseFloat(t.paddingTop)||0,n=parseFloat(t.paddingBottom)||0,a=parseFloat(t.borderTopWidth)||0,l=parseFloat(t.borderBottomWidth)||0;te.current=r,ee.current=o+n+a+l,fe()}}()}function fe(){oe.current&&($("auto"),requestAnimationFrame((function(){var e=oe.current;e&&$(Math.max(e.scrollHeight+ee.current,te.current+ee.current))})))}return l((function(){var e,t;_&&(pe(),N&&(null===(t=null===(e=oe.current)||void 0===e?void 0:e.select)||void 0===t||t.call(e)))}),[N,_]),l((function(){if(ne.current){var e=ne.current.getBoundingClientRect();V(e.width)}}),[L,_]),r.createElement("div",{ref:H,id:m,"aria-label":x,"data-testid":v,className:i(s.editableTypography,h),role:_?null:"button",onClick:function(e){null==b||b(e),ae(e)},onKeyDown:de},_&&(S?r.createElement("textarea",{ref:oe,className:i(s.textarea,j),value:L,onChange:ce,onKeyDown:se,onBlur:ue,"aria-label":x,placeholder:P,style:{width:U,height:Z},role:"textbox",rows:1}):r.createElement("input",{ref:oe,className:i(s.input,j),value:L,onChange:ce,onKeyDown:se,onBlur:ue,"aria-label":x,placeholder:P,style:{width:U},role:"input"})),r.createElement(B,{ref:ne,"aria-hidden":_,className:i(s.typography,j,t(t(t(t({},s.hidden,_),s.disabled,w),s.placeholder,!L&&P),s.multiline,!_&&S)),tabIndex:0,tooltipProps:D,weight:M,type:K,ellipsis:!S},L||P))}));export{f as default};
2
2
  //# sourceMappingURL=EditableTypography.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"EditableTypography.js","sources":["../../../../../src/components/EditableTypography/EditableTypography.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, useEffect, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport VibeComponentProps from \"../../types/VibeComponentProps\";\nimport VibeComponent from \"../../types/VibeComponent\";\nimport styles from \"./EditableTypography.module.scss\";\nimport { keyCodes } from \"../../constants\";\nimport { useKeyboardButtonPressedFunc } from \"../../hooks/useKeyboardButtonPressedFunc\";\nimport { TooltipProps } from \"../Tooltip/Tooltip\";\nimport usePrevious from \"../../hooks/usePrevious\";\nimport { TextType, TextWeight } from \"../Text/Text.types\";\nimport { HeadingType, HeadingWeight } from \"../Heading/Heading.types\";\n\nexport interface EditableTypographyImplementationProps {\n /** Value of the text */\n value: string;\n /** Will be called whenever the current value changes to a non-empty value */\n onChange?: (value: string) => void;\n /** Will be called whenever the component gets clicked */\n onClick?: (event: React.KeyboardEvent | React.MouseEvent) => void;\n /** Disables editing mode - component will be just a typography element */\n readOnly?: boolean;\n /** Shown in edit mode when the text value is empty */\n placeholder?: string;\n /** ARIA Label */\n ariaLabel?: string;\n /** Controls the mode of the component (i.e. view/edit mode) */\n isEditMode?: boolean;\n /** If true, automatically select all text when entering edit mode */\n autoSelectTextOnEditMode?: boolean;\n /** Will be called when the mode of the component changes */\n onEditModeChange?: (isEditMode: boolean) => void;\n /** Override Tooltip props when needed */\n tooltipProps?: Partial<TooltipProps>;\n}\n\nexport interface EditableTypographyProps extends VibeComponentProps, EditableTypographyImplementationProps {\n /** A typography component that is being rendered in view mode */\n component: ElementType;\n /** Controls the style of the typography component in view mode */\n typographyClassName: string;\n /** Shows placeholder when empty, if provided */\n clearable?: boolean;\n /** Sets the Text/Heading type */\n type?: TextType | HeadingType;\n /** Sets the Text/Heading weight */\n weight?: TextWeight | HeadingWeight;\n /** Controls whether a textarea or a simple input would be rendered, allowing multi-lines */\n multiline?: boolean;\n}\n\nconst EditableTypography: VibeComponent<EditableTypographyProps, HTMLElement> = forwardRef(\n (\n {\n id,\n className,\n \"data-testid\": dataTestId,\n value,\n onChange,\n onClick,\n readOnly = false,\n ariaLabel = \"\",\n placeholder,\n clearable,\n typographyClassName,\n component: TypographyComponent,\n isEditMode,\n autoSelectTextOnEditMode,\n onEditModeChange,\n tooltipProps,\n type,\n weight,\n multiline = false\n }: EditableTypographyProps,\n ref\n ) => {\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n\n const [isEditing, setIsEditing] = useState(isEditMode || false);\n const [inputValue, setInputValue] = useState(value);\n const [inputWidth, setInputWidth] = useState(0);\n const [inputHeight, setInputHeight] = useState<number | string>(0);\n const textareaBorderBoxSizing = useRef(0);\n const textareaLineHeight = useRef(0);\n\n const prevValue = usePrevious(value);\n\n const inputRef = useRef(null);\n const typographyRef = useRef(null);\n\n useEffect(() => {\n if (!isEditing && value !== prevValue && value !== inputValue) {\n setInputValue(value);\n }\n }, [prevValue, isEditing, value, inputValue]);\n\n useEffect(() => {\n setIsEditing(isEditMode);\n }, [isEditMode]);\n\n function onTypographyClick(event: React.KeyboardEvent | React.MouseEvent) {\n onClick?.(event);\n toggleEditMode(event);\n }\n\n function toggleEditMode(event: React.KeyboardEvent | React.MouseEvent) {\n if (readOnly || isEditing) {\n return;\n }\n event.preventDefault();\n handleEditModeChange(true);\n }\n\n function handleEditModeChange(value: boolean) {\n onEditModeChange?.(value);\n setIsEditing(value);\n }\n\n function handleInputValueChange() {\n handleEditModeChange(false);\n\n if (value === inputValue) {\n return;\n }\n\n const shouldShowPlaceholderWhenEmpty = clearable && placeholder;\n if (!inputValue && !shouldShowPlaceholderWhenEmpty) {\n setInputValue(value);\n return;\n }\n setInputValue(inputValue);\n onChange?.(inputValue);\n }\n\n function handleBlur() {\n handleInputValueChange();\n }\n\n function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) {\n if (event.key === keyCodes.ENTER) {\n if (multiline && event.shiftKey) {\n return;\n }\n\n handleInputValueChange();\n }\n if (event.key === keyCodes.ESCAPE) {\n handleEditModeChange(false);\n setInputValue(value);\n }\n }\n\n function handleChange(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {\n setInputValue(event.target.value);\n\n if (multiline) {\n resizeTextarea();\n }\n }\n\n const toggleKeyboardEditMode = useKeyboardButtonPressedFunc(toggleEditMode);\n\n function focus() {\n inputRef.current?.focus?.();\n\n if (inputRef.current) {\n const inputElement = inputRef.current as HTMLInputElement | HTMLTextAreaElement;\n const textLength = inputElement.value.length;\n inputElement.setSelectionRange(textLength, textLength);\n }\n\n if (multiline) {\n calculateTextareaHeightAttrs();\n }\n }\n\n /* Dynamically resizes the textarea to fit its content */\n function resizeTextarea() {\n if (inputRef.current) {\n // Temporarily set the height to \"auto\" to accurately measure the scroll height of the content inside the textarea.\n setInputHeight(\"auto\");\n\n requestAnimationFrame(() => {\n const textarea = inputRef.current as HTMLTextAreaElement;\n\n if (!textarea) {\n return;\n }\n\n // Ensure we at least have 1 line\n setInputHeight(\n Math.max(\n textarea.scrollHeight + textareaBorderBoxSizing.current,\n textareaLineHeight.current + textareaBorderBoxSizing.current\n )\n );\n });\n }\n }\n\n function selectAllInputText() {\n inputRef.current?.select?.();\n }\n\n useEffect(() => {\n if (!isEditing) return;\n focus();\n if (autoSelectTextOnEditMode) {\n selectAllInputText();\n }\n }, [autoSelectTextOnEditMode, isEditing]);\n\n useEffect(() => {\n if (!typographyRef.current) {\n return;\n }\n\n const { width } = typographyRef.current.getBoundingClientRect();\n setInputWidth(width);\n }, [inputValue, isEditing]);\n\n /* Calculate the minimual textarea height, taking its applied styles (padding, border width) into consideration \n This is done only on focus, so that we don't need to get the computed style every time.\n */\n function calculateTextareaHeightAttrs() {\n if (multiline && inputRef.current) {\n const textarea = inputRef.current as HTMLTextAreaElement;\n\n if (!textarea) {\n return;\n }\n\n const computedStyle = window.getComputedStyle(textarea);\n\n // Calculate the appropriate height by taking into account the scrollable content inside the textarea,\n // as well as the styles applied to it, such as padding and border widths.\n const lineHeight = parseFloat(computedStyle.lineHeight) || 16;\n const paddingTop = parseFloat(computedStyle.paddingTop) || 0;\n const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;\n const borderTopWidth = parseFloat(computedStyle.borderTopWidth) || 0;\n const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth) || 0;\n\n textareaLineHeight.current = lineHeight;\n textareaBorderBoxSizing.current = paddingTop + paddingBottom + borderTopWidth + borderBottomWidth;\n resizeTextarea();\n }\n }\n\n return (\n <div\n ref={mergedRef}\n id={id}\n aria-label={ariaLabel}\n data-testid={dataTestId}\n className={cx(styles.editableTypography, className)}\n role={isEditing ? null : \"button\"}\n onClick={onTypographyClick}\n onKeyDown={toggleKeyboardEditMode}\n >\n {isEditing &&\n (multiline ? (\n <textarea\n ref={inputRef}\n className={cx(styles.textarea, typographyClassName)}\n value={inputValue}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n aria-label={ariaLabel}\n placeholder={placeholder}\n style={{ width: inputWidth, height: inputHeight }}\n role=\"textbox\"\n rows={1}\n />\n ) : (\n <input\n ref={inputRef}\n className={cx(styles.input, typographyClassName)}\n value={inputValue}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n aria-label={ariaLabel}\n placeholder={placeholder}\n style={{ width: inputWidth }}\n role=\"input\"\n />\n ))}\n <TypographyComponent\n ref={typographyRef}\n aria-hidden={isEditing}\n className={cx(styles.typography, typographyClassName, {\n [styles.hidden]: isEditing,\n [styles.disabled]: readOnly,\n [styles.placeholder]: !inputValue && placeholder,\n [styles.multiline]: !isEditing && multiline\n })}\n tabIndex={0}\n tooltipProps={tooltipProps}\n weight={weight}\n type={type}\n ellipsis={!multiline}\n >\n {inputValue || placeholder}\n </TypographyComponent>\n </div>\n );\n }\n);\n\nexport default EditableTypography;\n"],"names":["EditableTypography","forwardRef","_ref","ref","id","className","dataTestId","value","onChange","onClick","_ref$readOnly","readOnly","_ref$ariaLabel","ariaLabel","placeholder","clearable","typographyClassName","TypographyComponent","component","isEditMode","autoSelectTextOnEditMode","onEditModeChange","tooltipProps","type","weight","_ref$multiline","multiline","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","isEditing","setIsEditing","_useState3","_useState4","inputValue","setInputValue","_useState5","_useState6","inputWidth","setInputWidth","_useState7","_useState8","inputHeight","setInputHeight","textareaBorderBoxSizing","textareaLineHeight","prevValue","usePrevious","inputRef","typographyRef","toggleEditMode","event","preventDefault","handleEditModeChange","handleInputValueChange","handleBlur","handleKeyDown","key","keyCodes","ENTER","shiftKey","ESCAPE","handleChange","target","resizeTextarea","useEffect","toggleKeyboardEditMode","useKeyboardButtonPressedFunc","focus","_b","current","_a","inputElement","textLength","length","setSelectionRange","textarea","computedStyle","window","getComputedStyle","lineHeight","parseFloat","paddingTop","paddingBottom","borderTopWidth","borderBottomWidth","calculateTextareaHeightAttrs","requestAnimationFrame","Math","max","scrollHeight","select","_typographyRef$curren","getBoundingClientRect","width","React","createElement","cx","styles","editableTypography","role","onKeyDown","onBlur","style","height","rows","input","typography","_defineProperty","hidden","disabled","tabIndex","ellipsis"],"mappings":"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"}
1
+ {"version":3,"file":"EditableTypography.js","sources":["../../../../../src/components/EditableTypography/EditableTypography.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, useEffect, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport VibeComponentProps from \"../../types/VibeComponentProps\";\nimport VibeComponent from \"../../types/VibeComponent\";\nimport styles from \"./EditableTypography.module.scss\";\nimport { keyCodes } from \"../../constants\";\nimport { useKeyboardButtonPressedFunc } from \"../../hooks/useKeyboardButtonPressedFunc\";\nimport { TooltipProps } from \"../Tooltip/Tooltip\";\nimport usePrevious from \"../../hooks/usePrevious\";\nimport { TextType, TextWeight } from \"../Text/Text.types\";\nimport { HeadingType, HeadingWeight } from \"../Heading/Heading.types\";\n\nexport interface EditableTypographyImplementationProps {\n /** Value of the text */\n value: string;\n /** Will be called whenever the current value changes to a non-empty value */\n onChange?: (value: string) => void;\n /** Will be called whenever the component gets clicked */\n onClick?: (event: React.KeyboardEvent | React.MouseEvent) => void;\n /** Disables editing mode - component will be just a typography element */\n readOnly?: boolean;\n /** Shown in edit mode when the text value is empty */\n placeholder?: string;\n /** ARIA Label */\n ariaLabel?: string;\n /** Controls the mode of the component (i.e. view/edit mode) */\n isEditMode?: boolean;\n /** If true, automatically select all text when entering edit mode */\n autoSelectTextOnEditMode?: boolean;\n /** Will be called when the mode of the component changes */\n onEditModeChange?: (isEditMode: boolean) => void;\n /** Override Tooltip props when needed */\n tooltipProps?: Partial<TooltipProps>;\n}\n\nexport interface EditableTypographyProps extends VibeComponentProps, EditableTypographyImplementationProps {\n /** A typography component that is being rendered in view mode */\n component: ElementType;\n /** Controls the style of the typography component in view mode */\n typographyClassName: string;\n /** Shows placeholder when empty, if provided */\n clearable?: boolean;\n /** Sets the Text/Heading type */\n type?: TextType | HeadingType;\n /** Sets the Text/Heading weight */\n weight?: TextWeight | HeadingWeight;\n /** Controls whether a textarea or a simple input would be rendered, allowing multi-lines */\n multiline?: boolean;\n}\n\nconst EditableTypography: VibeComponent<EditableTypographyProps, HTMLElement> = forwardRef(\n (\n {\n id,\n className,\n \"data-testid\": dataTestId,\n value,\n onChange,\n onClick,\n readOnly = false,\n ariaLabel = \"\",\n placeholder,\n clearable,\n typographyClassName,\n component: TypographyComponent,\n isEditMode,\n autoSelectTextOnEditMode,\n onEditModeChange,\n tooltipProps,\n type,\n weight,\n multiline = false\n }: EditableTypographyProps,\n ref\n ) => {\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n\n const [isEditing, setIsEditing] = useState(isEditMode || false);\n const [inputValue, setInputValue] = useState(value);\n const [inputWidth, setInputWidth] = useState(0);\n const [inputHeight, setInputHeight] = useState<number | string>(0);\n const textareaBorderBoxSizing = useRef(0);\n const textareaLineHeight = useRef(0);\n\n const prevValue = usePrevious(value);\n\n const inputRef = useRef(null);\n const typographyRef = useRef(null);\n\n useEffect(() => {\n if (!isEditing && value !== prevValue && value !== inputValue) {\n setInputValue(value);\n }\n }, [prevValue, isEditing, value, inputValue]);\n\n useEffect(() => {\n setIsEditing(isEditMode);\n }, [isEditMode]);\n\n function onTypographyClick(event: React.KeyboardEvent | React.MouseEvent) {\n onClick?.(event);\n toggleEditMode(event);\n }\n\n function toggleEditMode(event: React.KeyboardEvent | React.MouseEvent) {\n if (readOnly || isEditing) {\n return;\n }\n event.preventDefault();\n handleEditModeChange(true);\n }\n\n function handleEditModeChange(value: boolean) {\n onEditModeChange?.(value);\n setIsEditing(value);\n }\n\n function handleInputValueChange() {\n handleEditModeChange(false);\n\n if (value === inputValue) {\n return;\n }\n\n const shouldShowPlaceholderWhenEmpty = clearable && placeholder;\n if (!inputValue && !shouldShowPlaceholderWhenEmpty) {\n setInputValue(value);\n return;\n }\n setInputValue(inputValue);\n onChange?.(inputValue);\n }\n\n function handleBlur() {\n handleInputValueChange();\n }\n\n function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) {\n if (event.key === keyCodes.ENTER) {\n if (multiline && event.shiftKey) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n handleInputValueChange();\n }\n if (event.key === keyCodes.ESCAPE) {\n event.preventDefault();\n event.stopPropagation();\n handleEditModeChange(false);\n setInputValue(value);\n }\n }\n\n function handleChange(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {\n setInputValue(event.target.value);\n\n if (multiline) {\n resizeTextarea();\n }\n }\n\n const toggleKeyboardEditMode = useKeyboardButtonPressedFunc(toggleEditMode);\n\n function focus() {\n inputRef.current?.focus?.();\n\n if (inputRef.current) {\n const inputElement = inputRef.current as HTMLInputElement | HTMLTextAreaElement;\n const textLength = inputElement.value.length;\n inputElement.setSelectionRange(textLength, textLength);\n }\n\n if (multiline) {\n calculateTextareaHeightAttrs();\n }\n }\n\n /* Dynamically resizes the textarea to fit its content */\n function resizeTextarea() {\n if (inputRef.current) {\n // Temporarily set the height to \"auto\" to accurately measure the scroll height of the content inside the textarea.\n setInputHeight(\"auto\");\n\n requestAnimationFrame(() => {\n const textarea = inputRef.current as HTMLTextAreaElement;\n\n if (!textarea) {\n return;\n }\n\n // Ensure we at least have 1 line\n setInputHeight(\n Math.max(\n textarea.scrollHeight + textareaBorderBoxSizing.current,\n textareaLineHeight.current + textareaBorderBoxSizing.current\n )\n );\n });\n }\n }\n\n function selectAllInputText() {\n inputRef.current?.select?.();\n }\n\n useEffect(() => {\n if (!isEditing) return;\n focus();\n if (autoSelectTextOnEditMode) {\n selectAllInputText();\n }\n }, [autoSelectTextOnEditMode, isEditing]);\n\n useEffect(() => {\n if (!typographyRef.current) {\n return;\n }\n\n const { width } = typographyRef.current.getBoundingClientRect();\n setInputWidth(width);\n }, [inputValue, isEditing]);\n\n /* Calculate the minimual textarea height, taking its applied styles (padding, border width) into consideration \n This is done only on focus, so that we don't need to get the computed style every time.\n */\n function calculateTextareaHeightAttrs() {\n if (multiline && inputRef.current) {\n const textarea = inputRef.current as HTMLTextAreaElement;\n\n if (!textarea) {\n return;\n }\n\n const computedStyle = window.getComputedStyle(textarea);\n\n // Calculate the appropriate height by taking into account the scrollable content inside the textarea,\n // as well as the styles applied to it, such as padding and border widths.\n const lineHeight = parseFloat(computedStyle.lineHeight) || 16;\n const paddingTop = parseFloat(computedStyle.paddingTop) || 0;\n const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;\n const borderTopWidth = parseFloat(computedStyle.borderTopWidth) || 0;\n const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth) || 0;\n\n textareaLineHeight.current = lineHeight;\n textareaBorderBoxSizing.current = paddingTop + paddingBottom + borderTopWidth + borderBottomWidth;\n resizeTextarea();\n }\n }\n\n return (\n <div\n ref={mergedRef}\n id={id}\n aria-label={ariaLabel}\n data-testid={dataTestId}\n className={cx(styles.editableTypography, className)}\n role={isEditing ? null : \"button\"}\n onClick={onTypographyClick}\n onKeyDown={toggleKeyboardEditMode}\n >\n {isEditing &&\n (multiline ? (\n <textarea\n ref={inputRef}\n className={cx(styles.textarea, typographyClassName)}\n value={inputValue}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n aria-label={ariaLabel}\n placeholder={placeholder}\n style={{ width: inputWidth, height: inputHeight }}\n role=\"textbox\"\n rows={1}\n />\n ) : (\n <input\n ref={inputRef}\n className={cx(styles.input, typographyClassName)}\n value={inputValue}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n aria-label={ariaLabel}\n placeholder={placeholder}\n style={{ width: inputWidth }}\n role=\"input\"\n />\n ))}\n <TypographyComponent\n ref={typographyRef}\n aria-hidden={isEditing}\n className={cx(styles.typography, typographyClassName, {\n [styles.hidden]: isEditing,\n [styles.disabled]: readOnly,\n [styles.placeholder]: !inputValue && placeholder,\n [styles.multiline]: !isEditing && multiline\n })}\n tabIndex={0}\n tooltipProps={tooltipProps}\n weight={weight}\n type={type}\n ellipsis={!multiline}\n >\n {inputValue || placeholder}\n </TypographyComponent>\n </div>\n );\n }\n);\n\nexport default EditableTypography;\n"],"names":["EditableTypography","forwardRef","_ref","ref","id","className","dataTestId","value","onChange","onClick","_ref$readOnly","readOnly","_ref$ariaLabel","ariaLabel","placeholder","clearable","typographyClassName","TypographyComponent","component","isEditMode","autoSelectTextOnEditMode","onEditModeChange","tooltipProps","type","weight","_ref$multiline","multiline","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","isEditing","setIsEditing","_useState3","_useState4","inputValue","setInputValue","_useState5","_useState6","inputWidth","setInputWidth","_useState7","_useState8","inputHeight","setInputHeight","textareaBorderBoxSizing","textareaLineHeight","prevValue","usePrevious","inputRef","typographyRef","toggleEditMode","event","preventDefault","handleEditModeChange","handleInputValueChange","handleBlur","handleKeyDown","key","keyCodes","ENTER","shiftKey","stopPropagation","ESCAPE","handleChange","target","resizeTextarea","useEffect","toggleKeyboardEditMode","useKeyboardButtonPressedFunc","focus","_b","current","_a","inputElement","textLength","length","setSelectionRange","textarea","computedStyle","window","getComputedStyle","lineHeight","parseFloat","paddingTop","paddingBottom","borderTopWidth","borderBottomWidth","calculateTextareaHeightAttrs","requestAnimationFrame","Math","max","scrollHeight","select","_typographyRef$curren","getBoundingClientRect","width","React","createElement","cx","styles","editableTypography","role","onKeyDown","onBlur","style","height","rows","input","typography","_defineProperty","hidden","disabled","tabIndex","ellipsis"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{slicedToArray as e,defineProperty as t}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import r,{forwardRef as o,useRef as a,useState as i,useCallback as s,useMemo as n}from"react";import l from"classnames";import{RemoveScroll as m}from"react-remove-scroll";import c from"react-focus-lock";import{AnimatePresence as d,motion as u}from"framer-motion";import{getTestId as f}from"../../../tests/testIds.js";import{ComponentDefaultTestId as p}from"../../../tests/constants.js";import v from"./Modal.module.scss.js";import y from"../ModalTopActions/ModalTopActions.js";import{getStyle as E}from"../../../helpers/typesciptCssModulesHelper.js";import{camelCase as j}from"lodash-es";import{ModalProvider as A}from"../context/ModalContext.js";import b from"../../../hooks/useKeyEvent/index.js";import{keyCodes as h}from"../../../constants/keyCodes.js";import"../../../constants/sizes.js";import{modalAnimationAnchorPopVariants as x,modalAnimationCenterPopVariants as T,modalAnimationOverlayVariants as M}from"../utils/animationVariants.js";import{createPortal as P}from"react-dom";import g from"../hooks/usePortalTarget/usePortalTarget.js";import k from"../../LayerProvider/LayerProvider.js";var C=o((function(o,C){var L=o.id,z=o.show,I=o.size,N=void 0===I?"medium":I,O=o.renderHeaderAction,_=o.closeButtonTheme,B=o.closeButtonAriaLabel,H=o.onClose,w=void 0===H?function(){}:H,D=o.anchorElementRef,R=o.alertModal,F=o.container,V=void 0===F?document.body:F,X=o.children,K=o.style,S=o.zIndex,Y=o.className,q=o["data-testid"],G=g(V),J=a(null),Q=i(),U=e(Q,2),W=U[0],Z=U[1],$=i(),ee=e($,2),te=ee[0],re=ee[1],oe=s((function(e){return Z(e)}),[]),ae=s((function(e){return re(e)}),[]),ie=n((function(){return{modalId:L,setTitleId:oe,setDescriptionId:ae}}),[L,oe,ae]),se=s((function(e){z&&!R&&w(e)}),[z,R,w]),ne=s((function(e){z&&!R&&w(e)}),[R,z,w]);b({callback:ne,capture:!0,keys:[h.ESCAPE]});var le=(null==D?void 0:D.current)?x:T,me=S?{"--monday-modal-z-index":S}:{},ce=Object.assign(Object.assign({},me),K);return r.createElement(d,null,z&&r.createElement(k,{layerRef:J},r.createElement(A,{value:ie},P(r.createElement(r.Fragment,null,r.createElement(u.div,{ref:J,variants:M,initial:"initial",animate:"enter",exit:"exit","data-testid":f(p.MODAL_NEXT_OVERLAY,L),className:v.overlay,onClick:se,"aria-hidden":!0,style:me}),r.createElement(c,{returnFocus:!0},r.createElement(m,{forwardProps:!0},r.createElement(u.div,{variants:le,initial:"exit",animate:"enter",exit:"exit",custom:D,ref:C,className:l(v.modal,E(v,j("size-"+N)),t({},v.withHeaderAction,!!O),Y),id:L,"data-testid":q||f(p.MODAL_NEXT,L),role:"dialog","aria-modal":!0,"aria-labelledby":W,"aria-describedby":te,style:ce},X,r.createElement(y,{renderAction:O,theme:_,closeButtonAriaLabel:B,onClose:w}))))),G))))}));export{C as default};
1
+ import{slicedToArray as e,defineProperty as t}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import r,{forwardRef as o,useRef as a,useState as i,useCallback as s,useMemo as n}from"react";import l from"classnames";import{RemoveScroll as m}from"react-remove-scroll";import c from"react-focus-lock";import{AnimatePresence as d,motion as u}from"framer-motion";import{getTestId as f}from"../../../tests/testIds.js";import{ComponentDefaultTestId as p}from"../../../tests/constants.js";import v from"./Modal.module.scss.js";import y from"../ModalTopActions/ModalTopActions.js";import{getStyle as E}from"../../../helpers/typesciptCssModulesHelper.js";import{camelCase as j}from"lodash-es";import{ModalProvider as A}from"../context/ModalContext.js";import b from"../../../hooks/useKeyEvent/index.js";import{keyCodes as h}from"../../../constants/keyCodes.js";import"../../../constants/sizes.js";import{modalAnimationAnchorPopVariants as x,modalAnimationCenterPopVariants as T,modalAnimationOverlayVariants as M}from"../utils/animationVariants.js";import{createPortal as P}from"react-dom";import g from"../hooks/usePortalTarget/usePortalTarget.js";import k from"../../LayerProvider/LayerProvider.js";var C=c.default||c,L=o((function(o,c){var L=o.id,z=o.show,I=o.size,N=void 0===I?"medium":I,O=o.renderHeaderAction,_=o.closeButtonTheme,B=o.closeButtonAriaLabel,H=o.onClose,w=void 0===H?function(){}:H,D=o.anchorElementRef,R=o.alertModal,F=o.container,V=void 0===F?document.body:F,X=o.children,K=o.style,S=o.zIndex,Y=o.className,q=o["data-testid"],G=g(V),J=a(null),Q=i(),U=e(Q,2),W=U[0],Z=U[1],$=i(),ee=e($,2),te=ee[0],re=ee[1],oe=s((function(e){return Z(e)}),[]),ae=s((function(e){return re(e)}),[]),ie=n((function(){return{modalId:L,setTitleId:oe,setDescriptionId:ae}}),[L,oe,ae]),se=s((function(e){z&&!R&&w(e)}),[z,R,w]),ne=s((function(e){z&&!R&&w(e)}),[R,z,w]);b({callback:ne,capture:!0,keys:[h.ESCAPE]});var le=(null==D?void 0:D.current)?x:T,me=S?{"--monday-modal-z-index":S}:{},ce=Object.assign(Object.assign({},me),K);return r.createElement(d,null,z&&r.createElement(k,{layerRef:J},r.createElement(A,{value:ie},P(r.createElement(r.Fragment,null,r.createElement(u.div,{ref:J,variants:M,initial:"initial",animate:"enter",exit:"exit","data-testid":f(p.MODAL_NEXT_OVERLAY,L),className:v.overlay,onClick:se,"aria-hidden":!0,style:me}),r.createElement(C,{returnFocus:!0},r.createElement(m,{forwardProps:!0},r.createElement(u.div,{variants:le,initial:"exit",animate:"enter",exit:"exit",custom:D,ref:c,className:l(v.modal,E(v,j("size-"+N)),t({},v.withHeaderAction,!!O),Y),id:L,"data-testid":q||f(p.MODAL_NEXT,L),role:"dialog","aria-modal":!0,"aria-labelledby":W,"aria-describedby":te,style:ce},X,r.createElement(y,{renderAction:O,theme:_,closeButtonAriaLabel:B,onClose:w}))))),G))))}));export{L as default};
2
2
  //# sourceMappingURL=Modal.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.js","sources":["../../../../../../src/components/Modal/Modal/Modal.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport FocusLock from \"react-focus-lock\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport styles from \"./Modal.module.scss\";\nimport { ModalProps } from \"./Modal.types\";\nimport ModalTopActions from \"../ModalTopActions/ModalTopActions\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport { camelCase } from \"lodash-es\";\nimport { ModalProvider } from \"../context/ModalContext\";\nimport { ModalProviderValue } from \"../context/ModalContext.types\";\nimport useKeyEvent from \"../../../hooks/useKeyEvent\";\nimport { keyCodes } from \"../../../constants\";\nimport {\n modalAnimationAnchorPopVariants,\n modalAnimationCenterPopVariants,\n modalAnimationOverlayVariants\n} from \"../utils/animationVariants\";\nimport { createPortal } from \"react-dom\";\nimport usePortalTarget from \"../hooks/usePortalTarget/usePortalTarget\";\nimport { LayerProvider } from \"../../LayerProvider\";\n\nconst Modal = forwardRef(\n (\n {\n id,\n show,\n size = \"medium\",\n renderHeaderAction,\n closeButtonTheme,\n closeButtonAriaLabel,\n onClose = () => {},\n anchorElementRef,\n alertModal,\n container = document.body,\n children,\n style,\n zIndex,\n className,\n \"data-testid\": dataTestId\n }: ModalProps,\n ref: React.ForwardedRef<HTMLDivElement>\n ) => {\n const portalTargetElement = usePortalTarget(container);\n\n const overlayRef = useRef<HTMLDivElement>(null);\n\n const [titleId, setTitleId] = useState<string>();\n const [descriptionId, setDescriptionId] = useState<string>();\n\n const setTitleIdCallback = useCallback((id: string) => setTitleId(id), []);\n const setDescriptionIdCallback = useCallback((id: string) => setDescriptionId(id), []);\n\n const contextValue = useMemo<ModalProviderValue>(\n () => ({\n modalId: id,\n setTitleId: setTitleIdCallback,\n setDescriptionId: setDescriptionIdCallback\n }),\n [id, setTitleIdCallback, setDescriptionIdCallback]\n );\n\n const onBackdropClick = useCallback<React.MouseEventHandler<HTMLDivElement>>(\n e => {\n if (!show || alertModal) return;\n onClose(e);\n },\n [show, alertModal, onClose]\n );\n\n const onEscClick = useCallback<React.KeyboardEventHandler<HTMLBodyElement>>(\n e => {\n if (!show || alertModal) return;\n onClose(e);\n },\n [alertModal, show, onClose]\n );\n\n useKeyEvent({\n callback: onEscClick,\n capture: true,\n keys: [keyCodes.ESCAPE]\n });\n\n const modalAnimationVariants = anchorElementRef?.current\n ? modalAnimationAnchorPopVariants\n : modalAnimationCenterPopVariants;\n\n const zIndexStyle = zIndex ? ({ \"--monday-modal-z-index\": zIndex } as React.CSSProperties) : {};\n const modalStyle = { ...zIndexStyle, ...style };\n\n return (\n <AnimatePresence>\n {show && (\n <LayerProvider layerRef={overlayRef}>\n <ModalProvider value={contextValue}>\n {createPortal(\n <>\n <motion.div\n ref={overlayRef}\n variants={modalAnimationOverlayVariants}\n initial=\"initial\"\n animate=\"enter\"\n exit=\"exit\"\n data-testid={getTestId(ComponentDefaultTestId.MODAL_NEXT_OVERLAY, id)}\n className={styles.overlay}\n onClick={onBackdropClick}\n aria-hidden\n style={zIndexStyle}\n />\n <FocusLock returnFocus>\n <RemoveScroll forwardProps>\n <motion.div\n variants={modalAnimationVariants}\n initial=\"exit\"\n animate=\"enter\"\n exit=\"exit\"\n custom={anchorElementRef}\n ref={ref}\n className={cx(\n styles.modal,\n getStyle(styles, camelCase(\"size-\" + size)),\n { [styles.withHeaderAction]: !!renderHeaderAction },\n className\n )}\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT, id)}\n role=\"dialog\"\n aria-modal\n aria-labelledby={titleId}\n aria-describedby={descriptionId}\n style={modalStyle}\n >\n {children}\n <ModalTopActions\n renderAction={renderHeaderAction}\n theme={closeButtonTheme}\n closeButtonAriaLabel={closeButtonAriaLabel}\n onClose={onClose}\n />\n </motion.div>\n </RemoveScroll>\n </FocusLock>\n </>,\n portalTargetElement\n )}\n </ModalProvider>\n </LayerProvider>\n )}\n </AnimatePresence>\n );\n }\n);\n\nexport default Modal;\n"],"names":["Modal","forwardRef","_ref","ref","id","show","_ref$size","size","renderHeaderAction","closeButtonTheme","closeButtonAriaLabel","_ref$onClose","onClose","anchorElementRef","alertModal","_ref$container","container","document","body","children","style","zIndex","className","dataTestId","portalTargetElement","usePortalTarget","overlayRef","useRef","_useState","useState","_useState2","_slicedToArray","titleId","setTitleId","_useState3","_useState4","descriptionId","setDescriptionId","setTitleIdCallback","useCallback","setDescriptionIdCallback","contextValue","useMemo","modalId","onBackdropClick","e","onEscClick","useKeyEvent","callback","capture","keys","keyCodes","ESCAPE","modalAnimationVariants","current","modalAnimationAnchorPopVariants","modalAnimationCenterPopVariants","zIndexStyle","modalStyle","Object","assign","React","createElement","AnimatePresence","LayerProvider","layerRef","ModalProvider","value","createPortal","Fragment","motion","div","variants","modalAnimationOverlayVariants","initial","animate","exit","getTestId","ComponentDefaultTestId","MODAL_NEXT_OVERLAY","styles","overlay","onClick","FocusLock","returnFocus","RemoveScroll","forwardProps","custom","cx","modal","getStyle","camelCase","_defineProperty","withHeaderAction","MODAL_NEXT","role","ModalTopActions","renderAction","theme"],"mappings":"8qCAyBMA,IAAAA,EAAQC,GACZ,SAAAC,EAkBEC,GACE,IAjBAC,EAAEF,EAAFE,GACAC,EAAIH,EAAJG,KAAIC,EAAAJ,EACJK,KAAAA,OAAO,IAAHD,EAAG,SAAQA,EACfE,EAAkBN,EAAlBM,mBACAC,EAAgBP,EAAhBO,iBACAC,EAAoBR,EAApBQ,qBAAoBC,EAAAT,EACpBU,QAAAA,OAAO,IAAAD,EAAG,WAAQ,EAAAA,EAClBE,EAAgBX,EAAhBW,iBACAC,EAAUZ,EAAVY,WAAUC,EAAAb,EACVc,UAAAA,OAAS,IAAAD,EAAGE,SAASC,KAAIH,EACzBI,EAAQjB,EAARiB,SACAC,EAAKlB,EAALkB,MACAC,EAAMnB,EAANmB,OACAC,EAASpB,EAAToB,UACeC,EAAUrB,EAAzB,eAIIsB,EAAsBC,EAAgBT,GAEtCU,EAAaC,EAAuB,MAE1CC,EAA8BC,IAAkBC,EAAAC,EAAAH,EAAA,GAAzCI,EAAOF,EAAA,GAAEG,EAAUH,EAAA,GAC1BI,EAA0CL,IAAkBM,GAAAJ,EAAAG,EAAA,GAArDE,GAAaD,GAAA,GAAEE,GAAgBF,GAAA,GAEhCG,GAAqBC,GAAY,SAACnC,GAAU,OAAK6B,EAAW7B,EAAG,GAAE,IACjEoC,GAA2BD,GAAY,SAACnC,GAAU,OAAKiC,GAAiBjC,EAAG,GAAE,IAE7EqC,GAAeC,GACnB,WAAA,MAAO,CACLC,QAASvC,EACT6B,WAAYK,GACZD,iBAAkBG,GAClB,GACF,CAACpC,EAAIkC,GAAoBE,KAGrBI,GAAkBL,GACtB,SAAAM,GACOxC,IAAQS,GACbF,EAAQiC,EACT,GACD,CAACxC,EAAMS,EAAYF,IAGfkC,GAAaP,GACjB,SAAAM,GACOxC,IAAQS,GACbF,EAAQiC,EACT,GACD,CAAC/B,EAAYT,EAAMO,IAGrBmC,EAAY,CACVC,SAAUF,GACVG,SAAS,EACTC,KAAM,CAACC,EAASC,UAGlB,IAAMC,IAAyBxC,aAAgB,EAAhBA,EAAkByC,SAC7CC,EACAC,EAEEC,GAAcpC,EAAU,CAAE,yBAA0BA,GAAmC,GACvFqC,GAAkBC,OAAAC,OAAAD,OAAAC,OAAA,GAAAH,IAAgBrC,GAExC,OACEyC,EAAAC,cAACC,EAAe,KACb1D,GACCwD,EAAAC,cAACE,EAAa,CAACC,SAAUvC,GACvBmC,EAAAC,cAACI,EAAc,CAAAC,MAAO1B,IACnB2B,EACCP,EAAAC,cAAAD,EAAAQ,SAAA,KACER,EAACC,cAAAQ,EAAOC,IAAG,CACTpE,IAAKuB,EACL8C,SAAUC,EACVC,QAAQ,UACRC,QAAQ,QACRC,KAAK,qBACQC,EAAUC,EAAuBC,mBAAoB3E,GAClEkB,UAAW0D,EAAOC,QAClBC,QAAStC,GAET,eAAA,EAAAxB,MAAOqC,KAETI,EAACC,cAAAqB,GAAUC,aAAW,GACpBvB,EAACC,cAAAuB,GAAaC,cAAY,GACxBzB,EAAAC,cAACQ,EAAOC,KACNC,SAAUnB,GACVqB,QAAQ,OACRC,QAAQ,QACRC,KAAK,OACLW,OAAQ1E,EACRV,IAAKA,EACLmB,UAAWkE,EACTR,EAAOS,MACPC,EAASV,EAAQW,EAAU,QAAUpF,IAAMqF,EAAA,CAAA,EACxCZ,EAAOa,mBAAqBrF,GAC/Bc,GAEFlB,GAAIA,EAAE,cACOmB,GAAcsD,EAAUC,EAAuBgB,WAAY1F,GACxE2F,KAAK,2CAEY/D,EAAO,mBACNI,GAClBhB,MAAOsC,IAENvC,EACD0C,EAAAC,cAACkC,EAAe,CACdC,aAAczF,EACd0F,MAAOzF,EACPC,qBAAsBA,EACtBE,QAASA,QAMnBY,KAOd"}
1
+ {"version":3,"file":"Modal.js","sources":["../../../../../../src/components/Modal/Modal/Modal.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport FocusLock from \"react-focus-lock\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport styles from \"./Modal.module.scss\";\nimport { ModalProps } from \"./Modal.types\";\nimport ModalTopActions from \"../ModalTopActions/ModalTopActions\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport { camelCase } from \"lodash-es\";\nimport { ModalProvider } from \"../context/ModalContext\";\nimport { ModalProviderValue } from \"../context/ModalContext.types\";\nimport useKeyEvent from \"../../../hooks/useKeyEvent\";\nimport { keyCodes } from \"../../../constants\";\nimport {\n modalAnimationAnchorPopVariants,\n modalAnimationCenterPopVariants,\n modalAnimationOverlayVariants\n} from \"../utils/animationVariants\";\nimport { createPortal } from \"react-dom\";\nimport usePortalTarget from \"../hooks/usePortalTarget/usePortalTarget\";\nimport { LayerProvider } from \"../../LayerProvider\";\n\n// @ts-expect-error This is a precaution to support all possible module systems (ESM/CJS)\nconst FocusLockComponent = (FocusLock.default || FocusLock) as typeof FocusLock;\n\nconst Modal = forwardRef(\n (\n {\n id,\n show,\n size = \"medium\",\n renderHeaderAction,\n closeButtonTheme,\n closeButtonAriaLabel,\n onClose = () => {},\n anchorElementRef,\n alertModal,\n container = document.body,\n children,\n style,\n zIndex,\n className,\n \"data-testid\": dataTestId\n }: ModalProps,\n ref: React.ForwardedRef<HTMLDivElement>\n ) => {\n const portalTargetElement = usePortalTarget(container);\n\n const overlayRef = useRef<HTMLDivElement>(null);\n\n const [titleId, setTitleId] = useState<string>();\n const [descriptionId, setDescriptionId] = useState<string>();\n\n const setTitleIdCallback = useCallback((id: string) => setTitleId(id), []);\n const setDescriptionIdCallback = useCallback((id: string) => setDescriptionId(id), []);\n\n const contextValue = useMemo<ModalProviderValue>(\n () => ({\n modalId: id,\n setTitleId: setTitleIdCallback,\n setDescriptionId: setDescriptionIdCallback\n }),\n [id, setTitleIdCallback, setDescriptionIdCallback]\n );\n\n const onBackdropClick = useCallback<React.MouseEventHandler<HTMLDivElement>>(\n e => {\n if (!show || alertModal) return;\n onClose(e);\n },\n [show, alertModal, onClose]\n );\n\n const onEscClick = useCallback<React.KeyboardEventHandler<HTMLBodyElement>>(\n e => {\n if (!show || alertModal) return;\n onClose(e);\n },\n [alertModal, show, onClose]\n );\n\n useKeyEvent({\n callback: onEscClick,\n capture: true,\n keys: [keyCodes.ESCAPE]\n });\n\n const modalAnimationVariants = anchorElementRef?.current\n ? modalAnimationAnchorPopVariants\n : modalAnimationCenterPopVariants;\n\n const zIndexStyle = zIndex ? ({ \"--monday-modal-z-index\": zIndex } as React.CSSProperties) : {};\n const modalStyle = { ...zIndexStyle, ...style };\n\n return (\n <AnimatePresence>\n {show && (\n <LayerProvider layerRef={overlayRef}>\n <ModalProvider value={contextValue}>\n {createPortal(\n <>\n <motion.div\n ref={overlayRef}\n variants={modalAnimationOverlayVariants}\n initial=\"initial\"\n animate=\"enter\"\n exit=\"exit\"\n data-testid={getTestId(ComponentDefaultTestId.MODAL_NEXT_OVERLAY, id)}\n className={styles.overlay}\n onClick={onBackdropClick}\n aria-hidden\n style={zIndexStyle}\n />\n <FocusLockComponent returnFocus>\n <RemoveScroll forwardProps>\n <motion.div\n variants={modalAnimationVariants}\n initial=\"exit\"\n animate=\"enter\"\n exit=\"exit\"\n custom={anchorElementRef}\n ref={ref}\n className={cx(\n styles.modal,\n getStyle(styles, camelCase(\"size-\" + size)),\n { [styles.withHeaderAction]: !!renderHeaderAction },\n className\n )}\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT, id)}\n role=\"dialog\"\n aria-modal\n aria-labelledby={titleId}\n aria-describedby={descriptionId}\n style={modalStyle}\n >\n {children}\n <ModalTopActions\n renderAction={renderHeaderAction}\n theme={closeButtonTheme}\n closeButtonAriaLabel={closeButtonAriaLabel}\n onClose={onClose}\n />\n </motion.div>\n </RemoveScroll>\n </FocusLockComponent>\n </>,\n portalTargetElement\n )}\n </ModalProvider>\n </LayerProvider>\n )}\n </AnimatePresence>\n );\n }\n);\n\nexport default Modal;\n"],"names":["FocusLockComponent","FocusLock","default","Modal","forwardRef","_ref","ref","id","show","_ref$size","size","renderHeaderAction","closeButtonTheme","closeButtonAriaLabel","_ref$onClose","onClose","anchorElementRef","alertModal","_ref$container","container","document","body","children","style","zIndex","className","dataTestId","portalTargetElement","usePortalTarget","overlayRef","useRef","_useState","useState","_useState2","_slicedToArray","titleId","setTitleId","_useState3","_useState4","descriptionId","setDescriptionId","setTitleIdCallback","useCallback","setDescriptionIdCallback","contextValue","useMemo","modalId","onBackdropClick","e","onEscClick","useKeyEvent","callback","capture","keys","keyCodes","ESCAPE","modalAnimationVariants","current","modalAnimationAnchorPopVariants","modalAnimationCenterPopVariants","zIndexStyle","modalStyle","Object","assign","React","createElement","AnimatePresence","LayerProvider","layerRef","ModalProvider","value","createPortal","Fragment","motion","div","variants","modalAnimationOverlayVariants","initial","animate","exit","getTestId","ComponentDefaultTestId","MODAL_NEXT_OVERLAY","styles","overlay","onClick","returnFocus","RemoveScroll","forwardProps","custom","cx","modal","getStyle","camelCase","_defineProperty","withHeaderAction","MODAL_NEXT","role","ModalTopActions","renderAction","theme"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{slicedToArray as e,defineProperty as n,toConsumableArray as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{getTestId as t,ComponentDefaultTestId as r}from"../../tests/testIds.js";import i from"classnames";import{BaseSizes as a}from"../../constants/sizes.js";import s,{forwardRef as l,useRef as u,useMemo as c,useState as d,useEffect as p,useCallback as m}from"react";import f,{createFilter as v,components as O}from"react-select";import b from"react-select/async";import g from"react-select/base";import{noop as j}from"lodash-es";import C from"./components/menu/menu.js";import M from"./components/DropdownIndicator/DropdownIndicator.js";import y from"./components/option/option.js";import h from"./components/singleValue/singleValue.js";import w from"./components/ClearIndicator/ClearIndicator.js";import S from"./components/MultiValueContainer/MultiValueContainer.js";import{isClient as I}from"../../utils/ssr-utils.js";import{DROPDOWN_CHIP_COLORS as V,DROPDOWN_MENU_PLACEMENT as D,DROPDOWN_MENU_POSITION as R,ADD_AUTO_HEIGHT_COMPONENTS as P,defaultCustomStyles as W,DROPDOWN_ID as A,DROPDOWN_MENU_ID as L,DROPDOWN_MENU_ARIA_LABEL as x,DROPDOWN_INPUT_ARIA_LABEL as z}from"./DropdownConstants.js";import E,{customTheme as N}from"./Dropdown.styles.js";import F from"./components/Control/Control.js";import T from"./components/menu/menu.module.scss.js";import B from"./Dropdown.module.scss.js";import{withStaticProps as k}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";var q=k(l((function(a,l){var v=a.className,V=a.optionWrapperClassName,D=a.singleValueWrapperClassName,R=a.dropdownMenuWrapperClassName,k=a.placeholder,q=void 0===k?"":k,H=a.disabled,G=void 0!==H&&H,K=a.readOnly,_=void 0!==K&&K,J=a.onMenuOpen,Q=void 0===J?j:J,U=a.onMenuClose,X=void 0===U?j:U,Y=a.onFocus,Z=void 0===Y?j:Y,$=a.onBlur,ee=void 0===$?j:$,ne=a.onScroll,oe=void 0===ne?j:ne,te=a.onMenuScrollToBottom,re=void 0===te?j:te,ie=a.onChange,ae=void 0===ie?j:ie,se=a.searchable,le=void 0===se||se,ue=a.captureMenuScroll,ce=void 0!==ue&&ue,de=a.options,pe=void 0===de?[]:de,me=a.defaultValue,fe=a.value,ve=a.noOptionsMessage,Oe=a.openMenuOnFocus,be=a.openMenuOnClick,ge=a.clearable,je=void 0===ge||ge,Ce=a.OptionRenderer,Me=a.optionRenderer,ye=a.ValueRenderer,he=a.valueRenderer,we=a.menuRenderer,Se=a.menuPlacement,Ie=void 0===Se?"bottom":Se,Ve=a.rtl,De=a.size,Re=void 0===De?"medium":De,Pe=a.asyncOptions,We=a.cacheOptions,Ae=a.defaultOptions,Le=a.isVirtualized,xe=a.menuPortalTarget,ze=a.extraStyles,Ee=void 0===ze?W:ze,Ne=a.maxMenuHeight,Fe=a.menuIsOpen,Te=a.tabIndex,Be=void 0===Te?"0":Te,ke=a.id,qe=void 0===ke?A:ke,He=a.menuId,Ge=void 0===He?L:He,Ke=a.menuAriaLabel,_e=void 0===Ke?x:Ke,Je=a.inputAriaLabel,Qe=void 0===Je?z:Je,Ue=a.autoFocus,Xe=void 0!==Ue&&Ue,Ye=a.multi,Ze=void 0!==Ye&&Ye,$e=a.multiline,en=void 0!==$e&&$e,nn=a.onOptionRemove,on=a.onOptionSelect,tn=a.onClear,rn=a.onInputChange,an=void 0===rn?j:rn,sn=a.closeMenuOnSelect,ln=void 0===sn?!Ze:sn,un=a.closeMenuOnScroll,cn=void 0!==un&&un,dn=a.withMandatoryDefaultOptions,pn=void 0!==dn&&dn,mn=a.isOptionSelected,fn=a.insideOverflowContainer,vn=void 0!==fn&&fn,On=a.insideOverflowWithTransformContainer,bn=void 0!==On&&On,gn=a.tooltipContent,jn=void 0===gn?"":gn,Cn=a.onKeyDown,Mn=void 0===Cn?j:Cn,yn=a.isLoading,hn=void 0!==yn&&yn,wn=a.loadingMessage,Sn=a.ariaLabel,In=a.tabSelectsValue,Vn=void 0===In||In,Dn=a.popupsContainerSelector,Rn=a.filterOption,Pn=a.menuPosition,Wn=void 0===Pn?"absolute":Pn,An=a["data-testid"],Ln=a.withGroupDivider,xn=void 0!==Ln&&Ln,zn=a.inputValue,En=a.blurInputOnSelect,Nn=u(),Fn=xe||Dn&&document.querySelector(Dn),Tn=c((function(){return me?Array.isArray(me)?me.map((function(e){return Object.assign(Object.assign({},e),{isMandatory:!0})})):Object.assign(Object.assign({},me),{isMandatory:!0}):me}),[me]);g.prototype.renderLiveRegion=function(){return null};var Bn=d(null),kn=e(Bn,2),qn=kn[0],Hn=kn[1];p((function(){if(I()){var e=!1;try{e="function"==typeof require&&"undefined"!=typeof module}catch(n){e=!1}if(e){var n=require("react-windowed-select");Hn((function(){return n.WindowedMenuList}))}else import("react-windowed-select").then((function(e){Hn((function(){return e.WindowedMenuList}))}))}}),[]);var Gn=d(Tn||[]),Kn=e(Gn,2),_n=Kn[0],Jn=Kn[1],Qn=d(""),Un=e(Qn,2),Xn=Un[0],Yn=Un[1],Zn=Me||Ce,$n=he||ye,eo=!!fe,no=null!=fe?fe:_n,oo=c((function(){return Array.isArray(no)?no.reduce((function(e,o){return Object.assign(Object.assign({},e),n({},o.value,o))}),{}):{}}),[no]),to=c((function(){return Sn||"".concat(_?"Readonly ":""," ").concat(jn," ").concat(Array.isArray(no)?"Selected: ".concat(no.map((function(e){return e.label})).join(", ")):"Select")}),[Sn,_,no,jn]),ro=Ze?no:fe,io=c((function(){var o=E({size:Re,rtl:Ve,insideOverflowContainer:vn,controlRef:Nn,insideOverflowWithTransformContainer:bn,withGroupDivider:xn}),t=Ee(o),r=Object.entries(t).reduce((function(t,r){var i=e(r,2),a=i[0],s=i[1];return Object.assign(Object.assign({},t),n({},a,(function(e,n){var t=o[a],r=t?t(e,n):e;return s(r,n)})))}),{});if(Ze){en&&P.forEach((function(e){var n=r[e];r[e]=function(e,o){return Object.assign(Object.assign({},n(e,o)),{height:"auto"})}}));var i=r.valueContainer;r.valueContainer=function(e,n){return Object.assign(Object.assign({},i(e,n)),{paddingLeft:6})}}return r}),[Re,Ve,vn,bn,Ee,Ze,en]),ao=m((function(e){return s.createElement(C,Object.assign({},e,{id:Ge,ariaLabel:_e,Renderer:we,dropdownMenuWrapperClassName:R,onScroll:oe}))}),[R,we,Ge,_e,oe]),so=m((function(e){return s.createElement(M,Object.assign({},e,{size:Re}))}),[Re]),lo=m((function(e){return s.createElement(y,Object.assign({setFocusedOptionId:Yn},e,{Renderer:Zn,optionWrapperClassName:V}))}),[Zn,V,Yn]),uo=m((function(e){var n=e.selectProps,o=n.focusedOptionId,t=n.menuIsOpen;return s.createElement(O.Input,Object.assign({},e,{"aria-activedescendant":o&&t?o:"",role:"combobox","aria-expanded":!_&&t,"aria-label":Qe,"aria-controls":Ge}))}),[Ge,_]),co=m((function(e){return s.createElement(h,Object.assign({},e,{readOnly:_,Renderer:$n,selectedOption:no[0],singleValueWrapperClassName:D}))}),[$n,_,no,D]),po=m((function(e){return s.createElement(w,Object.assign({},e,{size:Re}))}),[Re]),mo=c((function(){return function(e,n){nn&&nn(oo[e]);var o=Array.isArray(no)?no.filter((function(n){return n.value!==e})):no;ae&&ae(o,n),Jn(o)}}),[ae,nn,no,oo]),fo=c((function(){return{selectedOptions:no,onSelectedDelete:mo,isMultiline:en,insideOverflowContainer:vn,insideOverflowWithTransformContainer:bn,controlRef:Nn,tooltipContent:jn,popupsContainerSelector:Dn,size:Re}}),[no,mo,en,vn,bn,jn,Dn,Re]),vo=Pe?b:f;vo=vo.default||vo;var Oo=Object.assign({},Pe&&Object.assign({loadOptions:Pe,cacheOptions:We},Ae&&{defaultOptions:Ae})),bo=Object.assign(Object.assign({},!Pe&&{options:pe}),Ze&&{isMulti:!0}),go=m((function(e){var n,o=e.target;return!(null===(n=null==o?void 0:o.parentElement)||void 0===n?void 0:n.classList.contains(T.dropdownMenuWrapper))&&(cn||vn||bn)}),[vn,bn,cn]);return s.createElement(vo,Object.assign({className:i(B.dropdown,v),selectProps:fo,components:Object.assign(Object.assign({DropdownIndicator:so,Menu:ao,ClearIndicator:po,Input:uo,Option:lo,Control:F,SingleValue:co},Ze&&{MultiValue:j,ValueContainer:S}),Le&&qn&&{MenuList:qn}),closeMenuOnScroll:go,size:Re,noOptionsMessage:ve,placeholder:q,isDisabled:G,isClearable:!_&&je,isSearchable:!_&&le,readOnly:_,"aria-readonly":_,"aria-label":to,"aria-details":jn,"aria-haspopup":"listbox",defaultValue:me,value:ro,onMenuOpen:Q,onMenuClose:X,onFocus:Z,onBlur:ee,onMenuScrollToBottom:re,captureMenuScroll:ce,onChange:function(e,n){switch(ae&&ae(e,n),n.action){case"select-option":var t=Ze?n.option:e;on&&on(t),eo||Jn([].concat(o(no),[t]));break;case"clear":tn&&tn(),eo||Jn(pn?Tn:[])}},onKeyDown:Mn,onInputChange:an,openMenuOnFocus:Oe,openMenuOnClick:be,focusedOptionId:Xn,isRtl:Ve,styles:io,theme:N,maxMenuHeight:Ne,menuPortalTarget:Fn,menuPlacement:Ie,menuPosition:Wn,menuIsOpen:!_&&Fe,tabIndex:Be,id:qe,"data-testid":An||t(r.DROPDOWN,qe),autoFocus:Xe,closeMenuOnSelect:ln,ref:l,withMandatoryDefaultOptions:pn,isOptionSelected:mn,isLoading:hn,loadingMessage:wn,tabSelectsValue:Vn,filterOption:Rn,inputValue:zn,blurInputOnSelect:En},Oo,bo))})),{sizes:a,chipColors:V,menuPlacements:D,menuPositions:R,createFilter:v});export{q as default};
1
+ import{slicedToArray as e,defineProperty as n,toConsumableArray as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{getTestId as t,ComponentDefaultTestId as r}from"../../tests/testIds.js";import i from"classnames";import{BaseSizes as a}from"../../constants/sizes.js";import s,{forwardRef as l,useRef as u,useMemo as c,useState as d,useEffect as p,useCallback as m}from"react";import f,{createFilter as v,components as O}from"react-select";import b from"react-select/async";import g from"react-select/base";import{noop as j}from"lodash-es";import C from"./components/menu/menu.js";import M from"./components/DropdownIndicator/DropdownIndicator.js";import y from"./components/option/option.js";import h from"./components/singleValue/singleValue.js";import w from"./components/ClearIndicator/ClearIndicator.js";import S from"./components/MultiValueContainer/MultiValueContainer.js";import{isClient as I}from"../../utils/ssr-utils.js";import{DROPDOWN_CHIP_COLORS as V,DROPDOWN_MENU_PLACEMENT as D,DROPDOWN_MENU_POSITION as R,ADD_AUTO_HEIGHT_COMPONENTS as P,defaultCustomStyles as W,DROPDOWN_ID as A,DROPDOWN_MENU_ID as L,DROPDOWN_MENU_ARIA_LABEL as x,DROPDOWN_INPUT_ARIA_LABEL as z}from"./DropdownConstants.js";import E,{customTheme as N}from"./Dropdown.styles.js";import F from"./components/Control/Control.js";import T from"./components/menu/menu.module.scss.js";import B from"./Dropdown.module.scss.js";import{withStaticProps as k}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";var q=k(l((function(a,l){var v=a.className,V=a.optionWrapperClassName,D=a.singleValueWrapperClassName,R=a.dropdownMenuWrapperClassName,k=a.placeholder,q=void 0===k?"":k,H=a.disabled,G=void 0!==H&&H,K=a.readOnly,_=void 0!==K&&K,J=a.onMenuOpen,Q=void 0===J?j:J,U=a.onMenuClose,X=void 0===U?j:U,Y=a.onFocus,Z=void 0===Y?j:Y,$=a.onBlur,ee=void 0===$?j:$,ne=a.onScroll,oe=void 0===ne?j:ne,te=a.onMenuScrollToBottom,re=void 0===te?j:te,ie=a.onChange,ae=void 0===ie?j:ie,se=a.searchable,le=void 0===se||se,ue=a.captureMenuScroll,ce=void 0!==ue&&ue,de=a.options,pe=void 0===de?[]:de,me=a.defaultValue,fe=a.value,ve=a.noOptionsMessage,Oe=a.openMenuOnFocus,be=a.openMenuOnClick,ge=a.clearable,je=void 0===ge||ge,Ce=a.OptionRenderer,Me=a.optionRenderer,ye=a.ValueRenderer,he=a.valueRenderer,we=a.menuRenderer,Se=a.menuPlacement,Ie=void 0===Se?"bottom":Se,Ve=a.rtl,De=a.size,Re=void 0===De?"medium":De,Pe=a.asyncOptions,We=a.cacheOptions,Ae=a.defaultOptions,Le=a.isVirtualized,xe=a.menuPortalTarget,ze=a.extraStyles,Ee=void 0===ze?W:ze,Ne=a.maxMenuHeight,Fe=a.menuIsOpen,Te=a.tabIndex,Be=void 0===Te?"0":Te,ke=a.id,qe=void 0===ke?A:ke,He=a.menuId,Ge=void 0===He?L:He,Ke=a.menuAriaLabel,_e=void 0===Ke?x:Ke,Je=a.inputAriaLabel,Qe=void 0===Je?z:Je,Ue=a.autoFocus,Xe=void 0!==Ue&&Ue,Ye=a.multi,Ze=void 0!==Ye&&Ye,$e=a.multiline,en=void 0!==$e&&$e,nn=a.onOptionRemove,on=a.onOptionSelect,tn=a.onClear,rn=a.onInputChange,an=void 0===rn?j:rn,sn=a.closeMenuOnSelect,ln=void 0===sn?!Ze:sn,un=a.closeMenuOnScroll,cn=void 0!==un&&un,dn=a.withMandatoryDefaultOptions,pn=void 0!==dn&&dn,mn=a.isOptionSelected,fn=a.insideOverflowContainer,vn=void 0!==fn&&fn,On=a.insideOverflowWithTransformContainer,bn=void 0!==On&&On,gn=a.tooltipContent,jn=void 0===gn?"":gn,Cn=a.onKeyDown,Mn=void 0===Cn?j:Cn,yn=a.isLoading,hn=void 0!==yn&&yn,wn=a.loadingMessage,Sn=a.ariaLabel,In=a.tabSelectsValue,Vn=void 0===In||In,Dn=a.popupsContainerSelector,Rn=a.filterOption,Pn=a.menuPosition,Wn=void 0===Pn?"absolute":Pn,An=a["data-testid"],Ln=a.withGroupDivider,xn=void 0!==Ln&&Ln,zn=a.inputValue,En=a.blurInputOnSelect,Nn=u(),Fn=xe||Dn&&document.querySelector(Dn),Tn=c((function(){return me?Array.isArray(me)?me.map((function(e){return Object.assign(Object.assign({},e),{isMandatory:!0})})):Object.assign(Object.assign({},me),{isMandatory:!0}):me}),[me]);g.prototype.renderLiveRegion=function(){return null};var Bn=d(null),kn=e(Bn,2),qn=kn[0],Hn=kn[1];p((function(){if(I()){var e=!1;try{e="function"==typeof require&&"undefined"!=typeof module}catch(n){e=!1}if(e){var n=require("react-windowed-select");Hn((function(){return n.WindowedMenuList}))}else import("react-windowed-select").then((function(e){Hn((function(){return e.WindowedMenuList}))}))}}),[]);var Gn=d(Tn||[]),Kn=e(Gn,2),_n=Kn[0],Jn=Kn[1],Qn=d(""),Un=e(Qn,2),Xn=Un[0],Yn=Un[1],Zn=Me||Ce,$n=he||ye,eo=!!fe,no=null!=fe?fe:_n,oo=c((function(){return Array.isArray(no)?no.reduce((function(e,o){return Object.assign(Object.assign({},e),n({},o.value,o))}),{}):{}}),[no]),to=c((function(){return Sn||"".concat(_?"Readonly ":""," ").concat(jn," ").concat(Array.isArray(no)?"Selected: ".concat(no.map((function(e){return e.label})).join(", ")):"Select")}),[Sn,_,no,jn]),ro=Ze?no:fe,io=c((function(){var o=E({size:Re,rtl:Ve,insideOverflowContainer:vn,controlRef:Nn,insideOverflowWithTransformContainer:bn,withGroupDivider:xn,searchable:le}),t=Ee(o),r=Object.entries(t).reduce((function(t,r){var i=e(r,2),a=i[0],s=i[1];return Object.assign(Object.assign({},t),n({},a,(function(e,n){var t=o[a],r=t?t(e,n):e;return s(r,n)})))}),{});if(Ze){en&&P.forEach((function(e){var n=r[e];r[e]=function(e,o){return Object.assign(Object.assign({},n(e,o)),{height:"auto"})}}));var i=r.valueContainer;r.valueContainer=function(e,n){return Object.assign(Object.assign({},i(e,n)),{paddingLeft:6})}}return r}),[Re,Ve,vn,bn,Ee,Ze,en]),ao=m((function(e){return s.createElement(C,Object.assign({},e,{id:Ge,ariaLabel:_e,Renderer:we,dropdownMenuWrapperClassName:R,onScroll:oe}))}),[R,we,Ge,_e,oe]),so=m((function(e){return s.createElement(M,Object.assign({},e,{size:Re}))}),[Re]),lo=m((function(e){return s.createElement(y,Object.assign({setFocusedOptionId:Yn},e,{Renderer:Zn,optionWrapperClassName:V}))}),[Zn,V,Yn]),uo=m((function(e){var n=e.selectProps,o=n.focusedOptionId,t=n.menuIsOpen;return s.createElement(O.Input,Object.assign({},e,{"aria-activedescendant":o&&t?o:"",role:"combobox","aria-expanded":!_&&t,"aria-label":Qe,"aria-controls":Ge,readOnly:!le||void 0}))}),[Ge,_]),co=m((function(e){return s.createElement(h,Object.assign({},e,{readOnly:_,Renderer:$n,selectedOption:no[0],singleValueWrapperClassName:D}))}),[$n,_,no,D]),po=m((function(e){return s.createElement(w,Object.assign({},e,{size:Re}))}),[Re]),mo=c((function(){return function(e,n){nn&&nn(oo[e]);var o=Array.isArray(no)?no.filter((function(n){return n.value!==e})):no;ae&&ae(o,n),Jn(o)}}),[ae,nn,no,oo]),fo=c((function(){return{selectedOptions:no,onSelectedDelete:mo,isMultiline:en,insideOverflowContainer:vn,insideOverflowWithTransformContainer:bn,controlRef:Nn,tooltipContent:jn,popupsContainerSelector:Dn,size:Re}}),[no,mo,en,vn,bn,jn,Dn,Re]),vo=Pe?b:f;vo=vo.default||vo;var Oo=Object.assign({},Pe&&Object.assign({loadOptions:Pe,cacheOptions:We},Ae&&{defaultOptions:Ae})),bo=Object.assign(Object.assign({},!Pe&&{options:pe}),Ze&&{isMulti:!0}),go=m((function(e){var n,o=e.target;return!(null===(n=null==o?void 0:o.parentElement)||void 0===n?void 0:n.classList.contains(T.dropdownMenuWrapper))&&(cn||vn||bn)}),[vn,bn,cn]);return s.createElement(vo,Object.assign({className:i(B.dropdown,v),selectProps:fo,components:Object.assign(Object.assign({DropdownIndicator:so,Menu:ao,ClearIndicator:po,Input:uo,Option:lo,Control:F,SingleValue:co},Ze&&{MultiValue:j,ValueContainer:S}),Le&&qn&&{MenuList:qn}),closeMenuOnScroll:go,size:Re,noOptionsMessage:ve,placeholder:q,isDisabled:G,isClearable:!_&&je,isSearchable:!_,readOnly:_,"aria-readonly":_,"aria-label":to,"aria-details":jn,"aria-haspopup":"listbox",defaultValue:me,value:ro,onMenuOpen:Q,onMenuClose:X,onFocus:Z,onBlur:ee,onMenuScrollToBottom:re,captureMenuScroll:ce,onChange:function(e,n){switch(ae&&ae(e,n),n.action){case"select-option":var t=Ze?n.option:e;on&&on(t),eo||Jn([].concat(o(no),[t]));break;case"clear":tn&&tn(),eo||Jn(pn?Tn:[])}},onKeyDown:Mn,onInputChange:an,openMenuOnFocus:Oe,openMenuOnClick:be,focusedOptionId:Xn,isRtl:Ve,styles:io,theme:N,maxMenuHeight:Ne,menuPortalTarget:Fn,menuPlacement:Ie,menuPosition:Wn,menuIsOpen:!_&&Fe,tabIndex:Be,id:qe,"data-testid":An||t(r.DROPDOWN,qe),autoFocus:Xe,closeMenuOnSelect:ln,ref:l,withMandatoryDefaultOptions:pn,isOptionSelected:mn,isLoading:hn,loadingMessage:wn,tabSelectsValue:Vn,filterOption:Rn,inputValue:zn,blurInputOnSelect:En},Oo,bo))})),{sizes:a,chipColors:V,menuPlacements:D,menuPositions:R,createFilter:v});export{q as default};
2
2
  //# sourceMappingURL=Dropdown.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Dropdown.js","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport { BaseSizes, SIZES_VALUES } from \"../../constants\";\nimport React, { forwardRef, useCallback, useMemo, useRef, useState, useEffect } from \"react\";\nimport Select, { InputProps, components, createFilter, ActionMeta } from \"react-select\";\nimport AsyncSelect from \"react-select/async\";\nimport BaseSelect from \"react-select/base\";\nimport { noop as NOOP } from \"lodash-es\";\nimport MenuComponent from \"./components/menu/menu\";\nimport DropdownIndicatorComponent from \"./components/DropdownIndicator/DropdownIndicator\";\nimport OptionComponent from \"./components/option/option\";\nimport SingleValueComponent from \"./components/singleValue/singleValue\";\nimport ClearIndicatorComponent from \"./components/ClearIndicator/ClearIndicator\";\nimport MultiValueContainer from \"./components/MultiValueContainer/MultiValueContainer\";\nimport { isClient } from \"../../utils/ssr-utils\";\nimport {\n ADD_AUTO_HEIGHT_COMPONENTS,\n defaultCustomStyles,\n DROPDOWN_CHIP_COLORS,\n DROPDOWN_ID,\n DROPDOWN_INPUT_ARIA_LABEL,\n DROPDOWN_MENU_ARIA_LABEL,\n DROPDOWN_MENU_ID,\n DROPDOWN_MENU_PLACEMENT,\n DROPDOWN_MENU_POSITION\n} from \"./DropdownConstants\";\nimport generateBaseStyles, { customTheme } from \"./Dropdown.styles\";\nimport Control from \"./components/Control/Control\";\nimport menuStyles from \"./components/menu/menu.module.scss\";\nimport styles from \"./Dropdown.module.scss\";\nimport {\n DropdownOption,\n DropdownState,\n CustomMenuProps,\n CustomOptionProps,\n CustomSingleValueProps,\n DropdownComponentProps\n} from \"./Dropdown.types\";\nimport { VibeComponent, withStaticProps } from \"../../types\";\n\nconst Dropdown: VibeComponent<DropdownComponentProps, HTMLElement> & {\n sizes?: typeof BaseSizes;\n chipColors?: typeof DROPDOWN_CHIP_COLORS;\n menuPlacements?: typeof DROPDOWN_MENU_PLACEMENT;\n menuPositions?: typeof DROPDOWN_MENU_POSITION;\n createFilter?: typeof createFilter;\n} = forwardRef(\n (\n {\n className,\n optionWrapperClassName,\n singleValueWrapperClassName,\n dropdownMenuWrapperClassName,\n placeholder = \"\",\n disabled = false,\n readOnly = false,\n onMenuOpen = NOOP,\n onMenuClose = NOOP,\n onFocus = NOOP,\n onBlur = NOOP,\n onScroll = NOOP,\n onMenuScrollToBottom = NOOP,\n onChange: customOnChange = NOOP,\n searchable = true,\n captureMenuScroll = false,\n options = [],\n defaultValue,\n value: customValue,\n noOptionsMessage,\n openMenuOnFocus,\n openMenuOnClick,\n clearable = true,\n OptionRenderer,\n optionRenderer,\n ValueRenderer,\n valueRenderer,\n menuRenderer,\n menuPlacement = \"bottom\",\n rtl,\n size = \"medium\",\n asyncOptions,\n cacheOptions,\n defaultOptions,\n isVirtualized,\n menuPortalTarget,\n extraStyles = defaultCustomStyles,\n maxMenuHeight,\n menuIsOpen,\n tabIndex = \"0\",\n id = DROPDOWN_ID,\n menuId = DROPDOWN_MENU_ID,\n menuAriaLabel = DROPDOWN_MENU_ARIA_LABEL,\n inputAriaLabel = DROPDOWN_INPUT_ARIA_LABEL,\n autoFocus = false,\n multi = false,\n multiline = false,\n onOptionRemove: customOnOptionRemove,\n onOptionSelect,\n onClear,\n onInputChange = NOOP,\n closeMenuOnSelect = !multi,\n closeMenuOnScroll: customCloseMenuOnScroll = false,\n withMandatoryDefaultOptions = false,\n isOptionSelected,\n insideOverflowContainer = false,\n insideOverflowWithTransformContainer = false,\n tooltipContent = \"\",\n onKeyDown = NOOP,\n isLoading = false,\n loadingMessage,\n ariaLabel,\n tabSelectsValue = true,\n popupsContainerSelector,\n filterOption,\n menuPosition = \"absolute\",\n \"data-testid\": dataTestId,\n withGroupDivider = false,\n inputValue,\n blurInputOnSelect\n }: DropdownComponentProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n const controlRef = useRef();\n const overrideMenuPortalTarget =\n menuPortalTarget || (popupsContainerSelector && document.querySelector(popupsContainerSelector));\n const overrideDefaultValue = useMemo(() => {\n if (defaultValue) {\n return Array.isArray(defaultValue)\n ? (defaultValue as DropdownOption[]).map(df => ({ ...df, isMandatory: true }))\n : { ...(defaultValue as DropdownOption), isMandatory: true };\n }\n\n return defaultValue;\n }, [defaultValue]);\n\n BaseSelect.prototype.renderLiveRegion = (): null => {\n return null;\n };\n\n // SSR support\n const [WindowedMenuList, setWindowedMenuList] = useState(null);\n useEffect(() => {\n if (isClient()) {\n let isRequireAvailable = false;\n try {\n isRequireAvailable = typeof require === \"function\" && typeof module !== \"undefined\";\n } catch (e) {\n isRequireAvailable = false;\n }\n\n if (isRequireAvailable) {\n // eslint-disable-next-line @typescript-eslint/no-var-requires\n const module = require(\"react-windowed-select\");\n setWindowedMenuList(() => module.WindowedMenuList);\n } else {\n // Dynamically import the specific named export from react-windowed-select for SSR support\n import(\"react-windowed-select\").then(module => {\n setWindowedMenuList(() => module.WindowedMenuList);\n });\n }\n }\n }, []);\n\n const [selected, setSelected] = useState(overrideDefaultValue || []);\n const [focusedOptionId, setFocusedOptionId] = useState(\"\");\n const finalOptionRenderer = optionRenderer || OptionRenderer;\n const finalValueRenderer = valueRenderer || ValueRenderer;\n const isControlled = !!customValue;\n const selectedOptions = customValue ?? selected;\n const selectedOptionsMap = useMemo(() => {\n if (Array.isArray(selectedOptions)) {\n return selectedOptions.reduce((acc, option) => ({ ...acc, [option.value]: option }), {});\n }\n return {};\n }, [selectedOptions]);\n\n const overrideAriaLabel = useMemo(() => {\n return (\n ariaLabel ||\n `${readOnly ? \"Readonly \" : \"\"} ${tooltipContent} ${\n Array.isArray(selectedOptions) ? `Selected: ${selectedOptions.map(o => o.label).join(\", \")}` : \"Select\"\n }`\n );\n }, [ariaLabel, readOnly, selectedOptions, tooltipContent]);\n const value = multi ? selectedOptions : customValue;\n\n const inlineStyles = useMemo(() => {\n // We first want to get the default stylized groups (e.g. \"container\", \"menu\").\n const baseStyles = generateBaseStyles({\n size,\n rtl,\n insideOverflowContainer,\n controlRef,\n insideOverflowWithTransformContainer,\n withGroupDivider\n });\n\n type BaseStyles = typeof baseStyles;\n\n // Then we want to run the consumer's root-level custom styles with our \"base\" override groups.\n const customStyles = extraStyles(baseStyles);\n\n // Lastly, we create a style groups object that makes sure we run each custom group with our basic overrides.\n const mergedStyles: any = Object.entries(customStyles).reduce((accumulator, [stylesGroup, stylesFn]) => {\n return {\n ...accumulator,\n [stylesGroup]: (defaultStyles: BaseStyles, state: DropdownState) => {\n const providedFn = baseStyles[stylesGroup as keyof BaseStyles];\n const provided = providedFn ? providedFn(defaultStyles, state) : defaultStyles;\n\n return stylesFn(provided, state);\n }\n };\n }, {} as BaseStyles);\n\n if (multi) {\n if (multiline) {\n ADD_AUTO_HEIGHT_COMPONENTS.forEach((component: string) => {\n const original = mergedStyles[component];\n mergedStyles[component] = (provided: BaseStyles, state: DropdownState) => ({\n ...original(provided, state),\n height: \"auto\"\n });\n });\n }\n\n const originalValueContainer = mergedStyles.valueContainer;\n mergedStyles.valueContainer = (provided: BaseStyles, state: DropdownState) => ({\n ...originalValueContainer(provided, state),\n paddingLeft: 6\n });\n }\n\n return mergedStyles;\n }, [size, rtl, insideOverflowContainer, insideOverflowWithTransformContainer, extraStyles, multi, multiline]);\n\n const Menu = useCallback(\n (props: CustomMenuProps) => (\n <MenuComponent\n {...props}\n id={menuId}\n ariaLabel={menuAriaLabel}\n Renderer={menuRenderer}\n dropdownMenuWrapperClassName={dropdownMenuWrapperClassName}\n onScroll={onScroll}\n />\n ),\n [dropdownMenuWrapperClassName, menuRenderer, menuId, menuAriaLabel, onScroll]\n );\n\n const DropdownIndicator = useCallback(\n (props: React.HTMLAttributes<HTMLElement> & { size?: SIZES_VALUES }) => (\n <DropdownIndicatorComponent {...props} size={size} />\n ),\n [size]\n );\n\n const Option = useCallback(\n (props: CustomOptionProps) => (\n <OptionComponent\n setFocusedOptionId={setFocusedOptionId}\n {...props}\n Renderer={finalOptionRenderer}\n optionWrapperClassName={optionWrapperClassName}\n />\n ),\n [finalOptionRenderer, optionWrapperClassName, setFocusedOptionId]\n );\n\n const Input = useCallback(\n (props: InputProps | any) => {\n const { focusedOptionId, menuIsOpen } = props.selectProps;\n const ariaActiveDescendant = focusedOptionId && menuIsOpen ? focusedOptionId : \"\";\n return (\n <components.Input\n {...props}\n aria-activedescendant={ariaActiveDescendant}\n role=\"combobox\"\n aria-expanded={!readOnly && menuIsOpen}\n aria-label={inputAriaLabel}\n aria-controls={menuId}\n />\n );\n },\n [menuId, readOnly]\n );\n\n const SingleValue = useCallback(\n (props: CustomSingleValueProps) => (\n <SingleValueComponent\n {...props}\n readOnly={readOnly}\n Renderer={finalValueRenderer}\n selectedOption={selectedOptions[0]}\n singleValueWrapperClassName={singleValueWrapperClassName}\n />\n ),\n [finalValueRenderer, readOnly, selectedOptions, singleValueWrapperClassName]\n );\n\n const ClearIndicator = useCallback(\n (props: React.HTMLAttributes<HTMLElement> & { size?: SIZES_VALUES }) => (\n <ClearIndicatorComponent {...props} size={size} />\n ),\n [size]\n );\n\n const onOptionRemove = useMemo(() => {\n return function (optionValue: number, e: React.MouseEvent | React.KeyboardEvent) {\n if (customOnOptionRemove) {\n customOnOptionRemove(selectedOptionsMap[optionValue]);\n }\n const newSelectedOptions = Array.isArray(selectedOptions)\n ? selectedOptions.filter(option => option.value !== optionValue)\n : selectedOptions;\n\n if (customOnChange) {\n customOnChange(newSelectedOptions, e);\n }\n setSelected(newSelectedOptions);\n };\n }, [customOnChange, customOnOptionRemove, selectedOptions, selectedOptionsMap]);\n\n const customProps = useMemo(\n () => ({\n selectedOptions,\n onSelectedDelete: onOptionRemove,\n isMultiline: multiline,\n insideOverflowContainer,\n insideOverflowWithTransformContainer,\n controlRef,\n tooltipContent,\n popupsContainerSelector,\n size\n }),\n [\n selectedOptions,\n onOptionRemove,\n multiline,\n insideOverflowContainer,\n insideOverflowWithTransformContainer,\n tooltipContent,\n popupsContainerSelector,\n size\n ]\n );\n const onChange = (option: DropdownOption | DropdownOption[], meta: ActionMeta<DropdownOption>) => {\n if (customOnChange) {\n customOnChange(option, meta);\n }\n\n switch (meta.action) {\n case \"select-option\": {\n const selectedOption = multi ? meta.option : option;\n\n if (onOptionSelect) {\n onOptionSelect(selectedOption);\n }\n\n if (!isControlled) {\n setSelected([...selectedOptions, selectedOption]);\n }\n break;\n }\n\n case \"clear\":\n if (onClear) {\n onClear();\n }\n\n if (!isControlled) {\n if (withMandatoryDefaultOptions) setSelected(overrideDefaultValue);\n else setSelected([]);\n }\n break;\n }\n };\n\n let DropDownComponent: React.ElementType = asyncOptions ? AsyncSelect : Select;\n\n // @ts-expect-error - We need to check if the default export is available\n DropDownComponent = DropDownComponent.default || DropDownComponent;\n\n const asyncAdditions = {\n ...(asyncOptions && {\n loadOptions: asyncOptions,\n cacheOptions,\n ...(defaultOptions && { defaultOptions })\n })\n };\n\n const additions = {\n ...(!asyncOptions && { options }),\n ...(multi && {\n isMulti: true\n })\n };\n\n const closeMenuOnScroll = useCallback(\n (event: React.FocusEvent) => {\n const scrolledElement = event.target;\n if (scrolledElement?.parentElement?.classList.contains(menuStyles.dropdownMenuWrapper)) {\n return false;\n }\n return customCloseMenuOnScroll || insideOverflowContainer || insideOverflowWithTransformContainer;\n },\n [insideOverflowContainer, insideOverflowWithTransformContainer, customCloseMenuOnScroll]\n );\n\n return (\n <DropDownComponent\n className={cx(styles.dropdown, className)}\n selectProps={customProps}\n components={{\n DropdownIndicator,\n Menu,\n ClearIndicator,\n Input,\n Option,\n Control,\n SingleValue,\n ...(multi && {\n MultiValue: NOOP, // We need it for react-select to behave nice with \"multi\"\n ValueContainer: MultiValueContainer\n }),\n ...(isVirtualized && WindowedMenuList && { MenuList: WindowedMenuList })\n }}\n // When inside scroll we set the menu position by js and we can't follow the drop down location while use scrolling\n closeMenuOnScroll={closeMenuOnScroll}\n size={size}\n noOptionsMessage={noOptionsMessage}\n placeholder={placeholder}\n isDisabled={disabled}\n isClearable={!readOnly && clearable}\n isSearchable={!readOnly && searchable}\n readOnly={readOnly}\n aria-readonly={readOnly}\n aria-label={overrideAriaLabel}\n aria-details={tooltipContent}\n aria-haspopup=\"listbox\"\n defaultValue={defaultValue}\n value={value}\n onMenuOpen={onMenuOpen}\n onMenuClose={onMenuClose}\n onFocus={onFocus}\n onBlur={onBlur}\n onMenuScrollToBottom={onMenuScrollToBottom}\n captureMenuScroll={captureMenuScroll}\n onChange={onChange}\n onKeyDown={onKeyDown}\n onInputChange={onInputChange}\n openMenuOnFocus={openMenuOnFocus}\n openMenuOnClick={openMenuOnClick}\n focusedOptionId={focusedOptionId}\n isRtl={rtl}\n styles={inlineStyles}\n theme={customTheme}\n maxMenuHeight={maxMenuHeight}\n menuPortalTarget={overrideMenuPortalTarget}\n menuPlacement={menuPlacement}\n menuPosition={menuPosition}\n menuIsOpen={!readOnly && menuIsOpen}\n tabIndex={tabIndex}\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.DROPDOWN, id)}\n autoFocus={autoFocus}\n closeMenuOnSelect={closeMenuOnSelect}\n ref={ref as React.Ref<any>}\n withMandatoryDefaultOptions={withMandatoryDefaultOptions}\n isOptionSelected={isOptionSelected}\n isLoading={isLoading}\n loadingMessage={loadingMessage}\n tabSelectsValue={tabSelectsValue}\n filterOption={filterOption}\n inputValue={inputValue}\n blurInputOnSelect={blurInputOnSelect}\n {...asyncAdditions}\n {...additions}\n />\n );\n }\n);\n\nexport default withStaticProps(Dropdown, {\n sizes: BaseSizes,\n chipColors: DROPDOWN_CHIP_COLORS,\n menuPlacements: DROPDOWN_MENU_PLACEMENT,\n menuPositions: DROPDOWN_MENU_POSITION,\n createFilter: createFilter\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","optionWrapperClassName","singleValueWrapperClassName","dropdownMenuWrapperClassName","_ref$placeholder","placeholder","_ref$disabled","disabled","_ref$readOnly","readOnly","_ref$onMenuOpen","onMenuOpen","NOOP","_ref$onMenuClose","onMenuClose","_ref$onFocus","onFocus","_ref$onBlur","onBlur","_ref$onScroll","onScroll","_ref$onMenuScrollToBo","onMenuScrollToBottom","_ref$onChange","onChange","customOnChange","_ref$searchable","searchable","_ref$captureMenuScrol","captureMenuScroll","_ref$options","options","defaultValue","customValue","value","noOptionsMessage","openMenuOnFocus","openMenuOnClick","_ref$clearable","clearable","OptionRenderer","optionRenderer","ValueRenderer","valueRenderer","menuRenderer","_ref$menuPlacement","menuPlacement","rtl","_ref$size","size","asyncOptions","cacheOptions","defaultOptions","isVirtualized","menuPortalTarget","_ref$extraStyles","extraStyles","defaultCustomStyles","maxMenuHeight","menuIsOpen","_ref$tabIndex","tabIndex","_ref$id","id","DROPDOWN_ID","_ref$menuId","menuId","DROPDOWN_MENU_ID","_ref$menuAriaLabel","menuAriaLabel","DROPDOWN_MENU_ARIA_LABEL","_ref$inputAriaLabel","inputAriaLabel","DROPDOWN_INPUT_ARIA_LABEL","_ref$autoFocus","autoFocus","_ref$multi","multi","_ref$multiline","multiline","customOnOptionRemove","onOptionRemove","onOptionSelect","onClear","_ref$onInputChange","onInputChange","_ref$closeMenuOnSelec","closeMenuOnSelect","_ref$closeMenuOnScrol","closeMenuOnScroll","customCloseMenuOnScroll","_ref$withMandatoryDef","withMandatoryDefaultOptions","isOptionSelected","_ref$insideOverflowCo","insideOverflowContainer","_ref$insideOverflowWi","insideOverflowWithTransformContainer","_ref$tooltipContent","tooltipContent","_ref$onKeyDown","onKeyDown","_ref$isLoading","isLoading","loadingMessage","ariaLabel","_ref$tabSelectsValue","tabSelectsValue","popupsContainerSelector","filterOption","_ref$menuPosition","menuPosition","dataTestId","_ref$withGroupDivider","withGroupDivider","inputValue","blurInputOnSelect","controlRef","useRef","overrideMenuPortalTarget","document","querySelector","overrideDefaultValue","useMemo","Array","isArray","map","df","Object","assign","isMandatory","BaseSelect","prototype","renderLiveRegion","_useState","useState","_useState2","_slicedToArray","WindowedMenuList","setWindowedMenuList","useEffect","isClient","isRequireAvailable","require","module","e","import","then","_useState3","_useState4","selected","setSelected","_useState5","_useState6","focusedOptionId","setFocusedOptionId","finalOptionRenderer","finalValueRenderer","isControlled","selectedOptions","selectedOptionsMap","reduce","acc","option","_defineProperty","overrideAriaLabel","concat","o","label","join","inlineStyles","baseStyles","generateBaseStyles","customStyles","mergedStyles","entries","accumulator","_ref2","_ref3","stylesGroup","stylesFn","defaultStyles","state","providedFn","provided","ADD_AUTO_HEIGHT_COMPONENTS","forEach","component","original","height","originalValueContainer","valueContainer","paddingLeft","Menu","useCallback","props","React","createElement","MenuComponent","Renderer","DropdownIndicator","DropdownIndicatorComponent","Option","OptionComponent","Input","_props$selectProps","selectProps","components","role","SingleValue","SingleValueComponent","selectedOption","ClearIndicator","ClearIndicatorComponent","optionValue","newSelectedOptions","filter","customProps","onSelectedDelete","isMultiline","DropDownComponent","AsyncSelect","Select","default","asyncAdditions","loadOptions","additions","isMulti","event","scrolledElement","target","parentElement","_a","classList","contains","menuStyles","dropdownMenuWrapper","cx","styles","dropdown","Control","MultiValue","ValueContainer","MultiValueContainer","MenuList","isDisabled","isClearable","isSearchable","meta","action","_toConsumableArray","isRtl","theme","customTheme","getTestId","ComponentDefaultTestId","DROPDOWN","sizes","BaseSizes","chipColors","DROPDOWN_CHIP_COLORS","menuPlacements","DROPDOWN_MENU_PLACEMENT","menuPositions","DROPDOWN_MENU_POSITION","createFilter"],"mappings":"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"}
1
+ {"version":3,"file":"Dropdown.js","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport { BaseSizes, SIZES_VALUES } from \"../../constants\";\nimport React, { forwardRef, useCallback, useMemo, useRef, useState, useEffect } from \"react\";\nimport Select, { InputProps, components, createFilter, ActionMeta } from \"react-select\";\nimport AsyncSelect from \"react-select/async\";\nimport BaseSelect from \"react-select/base\";\nimport { noop as NOOP } from \"lodash-es\";\nimport MenuComponent from \"./components/menu/menu\";\nimport DropdownIndicatorComponent from \"./components/DropdownIndicator/DropdownIndicator\";\nimport OptionComponent from \"./components/option/option\";\nimport SingleValueComponent from \"./components/singleValue/singleValue\";\nimport ClearIndicatorComponent from \"./components/ClearIndicator/ClearIndicator\";\nimport MultiValueContainer from \"./components/MultiValueContainer/MultiValueContainer\";\nimport { isClient } from \"../../utils/ssr-utils\";\nimport {\n ADD_AUTO_HEIGHT_COMPONENTS,\n defaultCustomStyles,\n DROPDOWN_CHIP_COLORS,\n DROPDOWN_ID,\n DROPDOWN_INPUT_ARIA_LABEL,\n DROPDOWN_MENU_ARIA_LABEL,\n DROPDOWN_MENU_ID,\n DROPDOWN_MENU_PLACEMENT,\n DROPDOWN_MENU_POSITION\n} from \"./DropdownConstants\";\nimport generateBaseStyles, { customTheme } from \"./Dropdown.styles\";\nimport Control from \"./components/Control/Control\";\nimport menuStyles from \"./components/menu/menu.module.scss\";\nimport styles from \"./Dropdown.module.scss\";\nimport {\n DropdownOption,\n DropdownState,\n CustomMenuProps,\n CustomOptionProps,\n CustomSingleValueProps,\n DropdownComponentProps\n} from \"./Dropdown.types\";\nimport { VibeComponent, withStaticProps } from \"../../types\";\n\nconst Dropdown: VibeComponent<DropdownComponentProps, HTMLElement> & {\n sizes?: typeof BaseSizes;\n chipColors?: typeof DROPDOWN_CHIP_COLORS;\n menuPlacements?: typeof DROPDOWN_MENU_PLACEMENT;\n menuPositions?: typeof DROPDOWN_MENU_POSITION;\n createFilter?: typeof createFilter;\n} = forwardRef(\n (\n {\n className,\n optionWrapperClassName,\n singleValueWrapperClassName,\n dropdownMenuWrapperClassName,\n placeholder = \"\",\n disabled = false,\n readOnly = false,\n onMenuOpen = NOOP,\n onMenuClose = NOOP,\n onFocus = NOOP,\n onBlur = NOOP,\n onScroll = NOOP,\n onMenuScrollToBottom = NOOP,\n onChange: customOnChange = NOOP,\n searchable = true,\n captureMenuScroll = false,\n options = [],\n defaultValue,\n value: customValue,\n noOptionsMessage,\n openMenuOnFocus,\n openMenuOnClick,\n clearable = true,\n OptionRenderer,\n optionRenderer,\n ValueRenderer,\n valueRenderer,\n menuRenderer,\n menuPlacement = \"bottom\",\n rtl,\n size = \"medium\",\n asyncOptions,\n cacheOptions,\n defaultOptions,\n isVirtualized,\n menuPortalTarget,\n extraStyles = defaultCustomStyles,\n maxMenuHeight,\n menuIsOpen,\n tabIndex = \"0\",\n id = DROPDOWN_ID,\n menuId = DROPDOWN_MENU_ID,\n menuAriaLabel = DROPDOWN_MENU_ARIA_LABEL,\n inputAriaLabel = DROPDOWN_INPUT_ARIA_LABEL,\n autoFocus = false,\n multi = false,\n multiline = false,\n onOptionRemove: customOnOptionRemove,\n onOptionSelect,\n onClear,\n onInputChange = NOOP,\n closeMenuOnSelect = !multi,\n closeMenuOnScroll: customCloseMenuOnScroll = false,\n withMandatoryDefaultOptions = false,\n isOptionSelected,\n insideOverflowContainer = false,\n insideOverflowWithTransformContainer = false,\n tooltipContent = \"\",\n onKeyDown = NOOP,\n isLoading = false,\n loadingMessage,\n ariaLabel,\n tabSelectsValue = true,\n popupsContainerSelector,\n filterOption,\n menuPosition = \"absolute\",\n \"data-testid\": dataTestId,\n withGroupDivider = false,\n inputValue,\n blurInputOnSelect\n }: DropdownComponentProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n const controlRef = useRef();\n const overrideMenuPortalTarget =\n menuPortalTarget || (popupsContainerSelector && document.querySelector(popupsContainerSelector));\n const overrideDefaultValue = useMemo(() => {\n if (defaultValue) {\n return Array.isArray(defaultValue)\n ? (defaultValue as DropdownOption[]).map(df => ({ ...df, isMandatory: true }))\n : { ...(defaultValue as DropdownOption), isMandatory: true };\n }\n\n return defaultValue;\n }, [defaultValue]);\n\n BaseSelect.prototype.renderLiveRegion = (): null => {\n return null;\n };\n\n // SSR support\n const [WindowedMenuList, setWindowedMenuList] = useState(null);\n useEffect(() => {\n if (isClient()) {\n let isRequireAvailable = false;\n try {\n isRequireAvailable = typeof require === \"function\" && typeof module !== \"undefined\";\n } catch (e) {\n isRequireAvailable = false;\n }\n\n if (isRequireAvailable) {\n // eslint-disable-next-line @typescript-eslint/no-var-requires\n const module = require(\"react-windowed-select\");\n setWindowedMenuList(() => module.WindowedMenuList);\n } else {\n // Dynamically import the specific named export from react-windowed-select for SSR support\n import(\"react-windowed-select\").then(module => {\n setWindowedMenuList(() => module.WindowedMenuList);\n });\n }\n }\n }, []);\n\n const [selected, setSelected] = useState(overrideDefaultValue || []);\n const [focusedOptionId, setFocusedOptionId] = useState(\"\");\n const finalOptionRenderer = optionRenderer || OptionRenderer;\n const finalValueRenderer = valueRenderer || ValueRenderer;\n const isControlled = !!customValue;\n const selectedOptions = customValue ?? selected;\n const selectedOptionsMap = useMemo(() => {\n if (Array.isArray(selectedOptions)) {\n return selectedOptions.reduce((acc, option) => ({ ...acc, [option.value]: option }), {});\n }\n return {};\n }, [selectedOptions]);\n\n const overrideAriaLabel = useMemo(() => {\n return (\n ariaLabel ||\n `${readOnly ? \"Readonly \" : \"\"} ${tooltipContent} ${\n Array.isArray(selectedOptions) ? `Selected: ${selectedOptions.map(o => o.label).join(\", \")}` : \"Select\"\n }`\n );\n }, [ariaLabel, readOnly, selectedOptions, tooltipContent]);\n const value = multi ? selectedOptions : customValue;\n\n const inlineStyles = useMemo(() => {\n // We first want to get the default stylized groups (e.g. \"container\", \"menu\").\n const baseStyles = generateBaseStyles({\n size,\n rtl,\n insideOverflowContainer,\n controlRef,\n insideOverflowWithTransformContainer,\n withGroupDivider,\n searchable\n });\n\n type BaseStyles = typeof baseStyles;\n\n // Then we want to run the consumer's root-level custom styles with our \"base\" override groups.\n const customStyles = extraStyles(baseStyles);\n\n // Lastly, we create a style groups object that makes sure we run each custom group with our basic overrides.\n const mergedStyles: any = Object.entries(customStyles).reduce((accumulator, [stylesGroup, stylesFn]) => {\n return {\n ...accumulator,\n [stylesGroup]: (defaultStyles: BaseStyles, state: DropdownState) => {\n const providedFn = baseStyles[stylesGroup as keyof BaseStyles];\n const provided = providedFn ? providedFn(defaultStyles, state) : defaultStyles;\n\n return stylesFn(provided, state);\n }\n };\n }, {} as BaseStyles);\n\n if (multi) {\n if (multiline) {\n ADD_AUTO_HEIGHT_COMPONENTS.forEach((component: string) => {\n const original = mergedStyles[component];\n mergedStyles[component] = (provided: BaseStyles, state: DropdownState) => ({\n ...original(provided, state),\n height: \"auto\"\n });\n });\n }\n\n const originalValueContainer = mergedStyles.valueContainer;\n mergedStyles.valueContainer = (provided: BaseStyles, state: DropdownState) => ({\n ...originalValueContainer(provided, state),\n paddingLeft: 6\n });\n }\n\n return mergedStyles;\n }, [size, rtl, insideOverflowContainer, insideOverflowWithTransformContainer, extraStyles, multi, multiline]);\n\n const Menu = useCallback(\n (props: CustomMenuProps) => (\n <MenuComponent\n {...props}\n id={menuId}\n ariaLabel={menuAriaLabel}\n Renderer={menuRenderer}\n dropdownMenuWrapperClassName={dropdownMenuWrapperClassName}\n onScroll={onScroll}\n />\n ),\n [dropdownMenuWrapperClassName, menuRenderer, menuId, menuAriaLabel, onScroll]\n );\n\n const DropdownIndicator = useCallback(\n (props: React.HTMLAttributes<HTMLElement> & { size?: SIZES_VALUES }) => (\n <DropdownIndicatorComponent {...props} size={size} />\n ),\n [size]\n );\n\n const Option = useCallback(\n (props: CustomOptionProps) => (\n <OptionComponent\n setFocusedOptionId={setFocusedOptionId}\n {...props}\n Renderer={finalOptionRenderer}\n optionWrapperClassName={optionWrapperClassName}\n />\n ),\n [finalOptionRenderer, optionWrapperClassName, setFocusedOptionId]\n );\n\n const Input = useCallback(\n (props: InputProps | any) => {\n const { focusedOptionId, menuIsOpen } = props.selectProps;\n const ariaActiveDescendant = focusedOptionId && menuIsOpen ? focusedOptionId : \"\";\n return (\n <components.Input\n {...props}\n aria-activedescendant={ariaActiveDescendant}\n role=\"combobox\"\n aria-expanded={!readOnly && menuIsOpen}\n aria-label={inputAriaLabel}\n aria-controls={menuId}\n readOnly={!searchable ? true : undefined}\n />\n );\n },\n [menuId, readOnly]\n );\n\n const SingleValue = useCallback(\n (props: CustomSingleValueProps) => (\n <SingleValueComponent\n {...props}\n readOnly={readOnly}\n Renderer={finalValueRenderer}\n selectedOption={selectedOptions[0]}\n singleValueWrapperClassName={singleValueWrapperClassName}\n />\n ),\n [finalValueRenderer, readOnly, selectedOptions, singleValueWrapperClassName]\n );\n\n const ClearIndicator = useCallback(\n (props: React.HTMLAttributes<HTMLElement> & { size?: SIZES_VALUES }) => (\n <ClearIndicatorComponent {...props} size={size} />\n ),\n [size]\n );\n\n const onOptionRemove = useMemo(() => {\n return function (optionValue: number, e: React.MouseEvent | React.KeyboardEvent) {\n if (customOnOptionRemove) {\n customOnOptionRemove(selectedOptionsMap[optionValue]);\n }\n const newSelectedOptions = Array.isArray(selectedOptions)\n ? selectedOptions.filter(option => option.value !== optionValue)\n : selectedOptions;\n\n if (customOnChange) {\n customOnChange(newSelectedOptions, e);\n }\n setSelected(newSelectedOptions);\n };\n }, [customOnChange, customOnOptionRemove, selectedOptions, selectedOptionsMap]);\n\n const customProps = useMemo(\n () => ({\n selectedOptions,\n onSelectedDelete: onOptionRemove,\n isMultiline: multiline,\n insideOverflowContainer,\n insideOverflowWithTransformContainer,\n controlRef,\n tooltipContent,\n popupsContainerSelector,\n size\n }),\n [\n selectedOptions,\n onOptionRemove,\n multiline,\n insideOverflowContainer,\n insideOverflowWithTransformContainer,\n tooltipContent,\n popupsContainerSelector,\n size\n ]\n );\n const onChange = (option: DropdownOption | DropdownOption[], meta: ActionMeta<DropdownOption>) => {\n if (customOnChange) {\n customOnChange(option, meta);\n }\n\n switch (meta.action) {\n case \"select-option\": {\n const selectedOption = multi ? meta.option : option;\n\n if (onOptionSelect) {\n onOptionSelect(selectedOption);\n }\n\n if (!isControlled) {\n setSelected([...selectedOptions, selectedOption]);\n }\n break;\n }\n\n case \"clear\":\n if (onClear) {\n onClear();\n }\n\n if (!isControlled) {\n if (withMandatoryDefaultOptions) setSelected(overrideDefaultValue);\n else setSelected([]);\n }\n break;\n }\n };\n\n let DropDownComponent: React.ElementType = asyncOptions ? AsyncSelect : Select;\n\n // @ts-expect-error - We need to check if the default export is available\n DropDownComponent = DropDownComponent.default || DropDownComponent;\n\n const asyncAdditions = {\n ...(asyncOptions && {\n loadOptions: asyncOptions,\n cacheOptions,\n ...(defaultOptions && { defaultOptions })\n })\n };\n\n const additions = {\n ...(!asyncOptions && { options }),\n ...(multi && {\n isMulti: true\n })\n };\n\n const closeMenuOnScroll = useCallback(\n (event: React.FocusEvent) => {\n const scrolledElement = event.target;\n if (scrolledElement?.parentElement?.classList.contains(menuStyles.dropdownMenuWrapper)) {\n return false;\n }\n return customCloseMenuOnScroll || insideOverflowContainer || insideOverflowWithTransformContainer;\n },\n [insideOverflowContainer, insideOverflowWithTransformContainer, customCloseMenuOnScroll]\n );\n\n return (\n <DropDownComponent\n className={cx(styles.dropdown, className)}\n selectProps={customProps}\n components={{\n DropdownIndicator,\n Menu,\n ClearIndicator,\n Input,\n Option,\n Control,\n SingleValue,\n ...(multi && {\n MultiValue: NOOP, // We need it for react-select to behave nice with \"multi\"\n ValueContainer: MultiValueContainer\n }),\n ...(isVirtualized && WindowedMenuList && { MenuList: WindowedMenuList })\n }}\n // When inside scroll we set the menu position by js and we can't follow the drop down location while use scrolling\n closeMenuOnScroll={closeMenuOnScroll}\n size={size}\n noOptionsMessage={noOptionsMessage}\n placeholder={placeholder}\n isDisabled={disabled}\n isClearable={!readOnly && clearable}\n isSearchable={!readOnly}\n readOnly={readOnly}\n aria-readonly={readOnly}\n aria-label={overrideAriaLabel}\n aria-details={tooltipContent}\n aria-haspopup=\"listbox\"\n defaultValue={defaultValue}\n value={value}\n onMenuOpen={onMenuOpen}\n onMenuClose={onMenuClose}\n onFocus={onFocus}\n onBlur={onBlur}\n onMenuScrollToBottom={onMenuScrollToBottom}\n captureMenuScroll={captureMenuScroll}\n onChange={onChange}\n onKeyDown={onKeyDown}\n onInputChange={onInputChange}\n openMenuOnFocus={openMenuOnFocus}\n openMenuOnClick={openMenuOnClick}\n focusedOptionId={focusedOptionId}\n isRtl={rtl}\n styles={inlineStyles}\n theme={customTheme}\n maxMenuHeight={maxMenuHeight}\n menuPortalTarget={overrideMenuPortalTarget}\n menuPlacement={menuPlacement}\n menuPosition={menuPosition}\n menuIsOpen={!readOnly && menuIsOpen}\n tabIndex={tabIndex}\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.DROPDOWN, id)}\n autoFocus={autoFocus}\n closeMenuOnSelect={closeMenuOnSelect}\n ref={ref as React.Ref<any>}\n withMandatoryDefaultOptions={withMandatoryDefaultOptions}\n isOptionSelected={isOptionSelected}\n isLoading={isLoading}\n loadingMessage={loadingMessage}\n tabSelectsValue={tabSelectsValue}\n filterOption={filterOption}\n inputValue={inputValue}\n blurInputOnSelect={blurInputOnSelect}\n {...asyncAdditions}\n {...additions}\n />\n );\n }\n);\n\nexport default withStaticProps(Dropdown, {\n sizes: BaseSizes,\n chipColors: DROPDOWN_CHIP_COLORS,\n menuPlacements: DROPDOWN_MENU_PLACEMENT,\n menuPositions: DROPDOWN_MENU_POSITION,\n createFilter: createFilter\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","optionWrapperClassName","singleValueWrapperClassName","dropdownMenuWrapperClassName","_ref$placeholder","placeholder","_ref$disabled","disabled","_ref$readOnly","readOnly","_ref$onMenuOpen","onMenuOpen","NOOP","_ref$onMenuClose","onMenuClose","_ref$onFocus","onFocus","_ref$onBlur","onBlur","_ref$onScroll","onScroll","_ref$onMenuScrollToBo","onMenuScrollToBottom","_ref$onChange","onChange","customOnChange","_ref$searchable","searchable","_ref$captureMenuScrol","captureMenuScroll","_ref$options","options","defaultValue","customValue","value","noOptionsMessage","openMenuOnFocus","openMenuOnClick","_ref$clearable","clearable","OptionRenderer","optionRenderer","ValueRenderer","valueRenderer","menuRenderer","_ref$menuPlacement","menuPlacement","rtl","_ref$size","size","asyncOptions","cacheOptions","defaultOptions","isVirtualized","menuPortalTarget","_ref$extraStyles","extraStyles","defaultCustomStyles","maxMenuHeight","menuIsOpen","_ref$tabIndex","tabIndex","_ref$id","id","DROPDOWN_ID","_ref$menuId","menuId","DROPDOWN_MENU_ID","_ref$menuAriaLabel","menuAriaLabel","DROPDOWN_MENU_ARIA_LABEL","_ref$inputAriaLabel","inputAriaLabel","DROPDOWN_INPUT_ARIA_LABEL","_ref$autoFocus","autoFocus","_ref$multi","multi","_ref$multiline","multiline","customOnOptionRemove","onOptionRemove","onOptionSelect","onClear","_ref$onInputChange","onInputChange","_ref$closeMenuOnSelec","closeMenuOnSelect","_ref$closeMenuOnScrol","closeMenuOnScroll","customCloseMenuOnScroll","_ref$withMandatoryDef","withMandatoryDefaultOptions","isOptionSelected","_ref$insideOverflowCo","insideOverflowContainer","_ref$insideOverflowWi","insideOverflowWithTransformContainer","_ref$tooltipContent","tooltipContent","_ref$onKeyDown","onKeyDown","_ref$isLoading","isLoading","loadingMessage","ariaLabel","_ref$tabSelectsValue","tabSelectsValue","popupsContainerSelector","filterOption","_ref$menuPosition","menuPosition","dataTestId","_ref$withGroupDivider","withGroupDivider","inputValue","blurInputOnSelect","controlRef","useRef","overrideMenuPortalTarget","document","querySelector","overrideDefaultValue","useMemo","Array","isArray","map","df","Object","assign","isMandatory","BaseSelect","prototype","renderLiveRegion","_useState","useState","_useState2","_slicedToArray","WindowedMenuList","setWindowedMenuList","useEffect","isClient","isRequireAvailable","require","module","e","import","then","_useState3","_useState4","selected","setSelected","_useState5","_useState6","focusedOptionId","setFocusedOptionId","finalOptionRenderer","finalValueRenderer","isControlled","selectedOptions","selectedOptionsMap","reduce","acc","option","_defineProperty","overrideAriaLabel","concat","o","label","join","inlineStyles","baseStyles","generateBaseStyles","customStyles","mergedStyles","entries","accumulator","_ref2","_ref3","stylesGroup","stylesFn","defaultStyles","state","providedFn","provided","ADD_AUTO_HEIGHT_COMPONENTS","forEach","component","original","height","originalValueContainer","valueContainer","paddingLeft","Menu","useCallback","props","React","createElement","MenuComponent","Renderer","DropdownIndicator","DropdownIndicatorComponent","Option","OptionComponent","Input","_props$selectProps","selectProps","components","role","undefined","SingleValue","SingleValueComponent","selectedOption","ClearIndicator","ClearIndicatorComponent","optionValue","newSelectedOptions","filter","customProps","onSelectedDelete","isMultiline","DropDownComponent","AsyncSelect","Select","default","asyncAdditions","loadOptions","additions","isMulti","event","scrolledElement","target","parentElement","_a","classList","contains","menuStyles","dropdownMenuWrapper","cx","styles","dropdown","Control","MultiValue","ValueContainer","MultiValueContainer","MenuList","isDisabled","isClearable","isSearchable","meta","action","_toConsumableArray","isRtl","theme","customTheme","getTestId","ComponentDefaultTestId","DROPDOWN","sizes","BaseSizes","chipColors","DROPDOWN_CHIP_COLORS","menuPlacements","DROPDOWN_MENU_PLACEMENT","menuPositions","DROPDOWN_MENU_POSITION","createFilter"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{objectSpread2 as r,defineProperty as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{SIZES as n}from"../../constants/sizes.js";import{getCSSVar as e}from"../../services/themes.js";import{getScrollableParent as t}from"../../utils/dom-utils.js";var i=function(r){switch(r){case n.LARGE:return 48;case n.MEDIUM:return 40;default:return 32}},a=function(r){var o=i(r)-2;return{height:"".concat(o,"px")}},l=function(r){var o=i(r)-8;return{height:"".concat(o,"px"),width:"".concat(o,"px")}},c=function(){return{color:e("primary-text-color"),backgroundColor:e("secondary-background-color")}},d=function(r){return{fontSize:v(r),lineHeight:v(r),fontFamily:e("font-family")}},s=function(r){return r?{backgroundColor:e("disabled-background-color"),color:e("disabled-text-color"),borderColor:"transparent",cursor:"not-allowed",":active, :focus, :hover":{borderColor:"transparent",cursor:"not-allowed"},":active, :focus":{pointerEvents:"none"}}:{}},u=function(r){return r?{border:"hidden"}:{}},p=function(r){return r?{backgroundColor:e("allgrey-background-color")}:{}},f=function(o){var n=o.size;return function(o,t){var a=t.isDisabled,l=t.selectProps.readOnly;return delete o.pointerEvents,r(r(r(r({},o),function(r){var o=i(r);return{height:"".concat(o,"px")}}(n)),{},{minHeight:"30px",border:"1px solid ".concat(e("ui-border-color")),boxShadow:"none",borderRadius:e("border-radius-small"),boxSizing:"border-box",transition:"border 0.1s ".concat(e("expand-animation-timing")),":hover":{borderColor:e("primary-text-color"),borderRadius:e("border-radius-small")},":active, :focus-within":{borderColor:e("primary-color")}},s(a)),u(l))}},b=function(o){var n=o.size;return function(o,t){var i=t.isDisabled;return r(r(r(r(r({},o),d()),c()),{},{borderRadius:e("border-radius-small")},s(i)),a(n))}},m=function(o){var n=o.size;return function(o,t){var i=t.selectProps,a=t.isDisabled,c=i.menuIsOpen,d=i.readOnly;return r(r(r({},o),{},{display:d?"none":"flex",alignItems:"center",justifyContent:"center",padding:"0px"},l(n)),{},{margin:"4px 3px 4px 0px",backgroundColor:"transparent",borderRadius:e("border-radius-small"),svg:{transition:"transform 0.1s ".concat(e("expand-animation-timing")),transform:c?"rotate(180deg)":"rotate(0deg)"},color:e(a?"disabled-text-color":"icon-color"),":hover, :active":{backgroundColor:a?void 0:e("primary-background-hover-color"),color:a?void 0:e("icon-color")}})}},g=function(o){var n=o.size;return function(){return r(r({display:"flex",alignItems:"center",justifyContent:"center",color:e("icon-color"),backgroundColor:"transparent",borderRadius:e("border-radius-small")},l(n)),{},{":hover":{backgroundColor:e("primary-background-hover-color")}})}};function v(r){switch(r){case n.LARGE:case n.MEDIUM:return"16px";default:return"14px"}}var x=function(n){var t=n.size,i=n.rtl;return function(n,l){var u=l.isDisabled,f=l.selectProps.readOnly;return r(r(r(r(r(r(r(r({},n),function(r){return o({display:"flex",alignItems:"center"},"padding".concat(r?"Right":"Left"),"12px")}(i)),d()),c()),a(t)),s(u)),p(f)),{},{borderRadius:e("border-radius-small")})}},h=function(){return function(o,n){return r(r({},d()),function(o,n){var t=n.isDisabled,i=n.isSelected,a=n.isFocused;delete o[":active"],delete o.width;var l={display:"flex",alignContent:"center",borderRadius:e("border-radius-small"),marginRight:e("spacing-small"),marginLeft:e("spacing-small"),paddingLeft:e("spacing-small"),paddingRight:e("spacing-small"),transition:"all 0.1s ".concat(e("expand-animation-timing"))};return t?r(r(r({},o),l),{},{backgroundColor:"transparent",color:e("disabled-text-color"),cursor:"not-allowed"},a&&{backgroundColor:e("primary-background-hover-color")}):i?r(r(r({},o),l),{},{color:e("primary-text-color"),backgroundColor:e("primary-selected-color"),cursor:"pointer"}):r(r(r({},o),l),{},{color:e("primary-text-color"),cursor:"pointer"},a&&{":hover":{color:e("primary-text-color"),backgroundColor:e("primary-background-hover-color")}})}(o,n))}},y=function(r){switch(r){case n.LARGE:case n.MEDIUM:return"20px";default:return"16px"}},C=function(o){return r(r({},o),{},{borderRadius:e("border-radius-small"),colors:r(r({},o.colors),{},{primary25:e("primary-background-hover-color")})})},w=function(o){return{container:f(o),control:(w=o,k=w.size,function(o,n){var t=n.isDisabled,i=n.selectProps.readOnly;return r(r(r(r(r(r({},o),a(k)),c()),{},{minHeight:"30px",border:"0 solid transparent",borderRadius:e("border-radius-small"),":focus-within":{boxShadow:"0 0 0 1px ".concat(e("primary-color"))}},!t&&{":hover":{borderColor:"transparent",borderRadius:e("border-radius-small")}}),{},{cursor:i?"default":"pointer"},s(t)),u(i))}),placeholder:function(o,n){var t=n.isDisabled;return r(r(r({},o),d()),{},{color:e(t?"disabled-text-color":"secondary-text-color"),fontWeight:e("font-weight-normal")})},indicatorsContainer:b(o),dropdownIndicator:m(o),clearIndicator:g(o),singleValue:function(o,n){var e=n.isDisabled,t=n.selectProps,i=t.readOnly,a=i?r(r(r({},u(i)),p(i)),{},{cursor:"text"}):{};return r(r(r(r(r(r(r({},o),d()),c()),s(e)),function(r){if(r.menuIsOpen)return{opacity:.6}}(t)),a),{},{display:"flex",alignItems:"center",height:"100%"})},input:function(o){return r(r(r(r({},o),d()),c()),{},{display:"flex",alignItems:"center",textIndent:"-2px"})},valueContainer:x(o),menu:(l=o,v=l.controlRef,y=l.insideOverflowContainer,C=l.insideOverflowWithTransformContainer,function(o){var n,i=r(r(r({},o),d()),{},{color:e("primary-text-color"),backgroundColor:e("dialog-background-color"),boxShadow:"".concat(e("experimental-dropdown-border-in-dark-themes","0 0 0 0 transparent"),", ").concat(e("box-shadow-small"))});if(!y&&!C)return i;var a=null==v||null===(n=v.current)||void 0===n?void 0:n.getBoundingClientRect();if(!a)return i;if(y)return r(r({},i),{},{top:a.bottom,width:a.width});if(C){var l,c="-".concat(null===(l=t(null==v?void 0:v.current))||void 0===l?void 0:l.scrollTop,"px");return r(r({},i),{},{top:"auto",translate:"0 ".concat(c),width:a.width})}return i}),option:h(),indicatorSeparator:function(){return{display:"none"}},group:(n=o,i=n.withGroupDivider,function(){return r({paddingBottom:0,marginTop:"4px"},i&&{":not(:last-child)":{position:"relative",paddingBottom:"8px","::after":{content:'""',position:"absolute",bottom:"0",left:"var(--spacing-small)",width:"calc(100% - (var(--spacing-small) * 2))",height:"1px",backgroundColor:"var(--layout-border-color)"}}})}),groupHeading:function(){return{fontSize:"14px",lineHeight:"32px",display:"flex",alignItems:"center",marginLeft:e("spacing-medium"),color:e("secondary-text-color")}}};var n,i,l,v,y,C,w,k};export{C as customTheme,w as default,y as getIndicatorSize};
1
+ import{objectSpread2 as r,defineProperty as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{SIZES as n}from"../../constants/sizes.js";import{getCSSVar as e}from"../../services/themes.js";import{getScrollableParent as t}from"../../utils/dom-utils.js";var i=function(r){switch(r){case n.LARGE:return 48;case n.MEDIUM:return 40;default:return 32}},a=function(r){var o=i(r)-2;return{height:"".concat(o,"px")}},l=function(r){var o=i(r)-8;return{height:"".concat(o,"px"),width:"".concat(o,"px")}},c=function(){return{color:e("primary-text-color"),backgroundColor:e("secondary-background-color")}},d=function(r){return{fontSize:v(r),lineHeight:v(r),fontFamily:e("font-family")}},s=function(r){return r?{backgroundColor:e("disabled-background-color"),color:e("disabled-text-color"),borderColor:"transparent",cursor:"not-allowed",":active, :focus, :hover":{borderColor:"transparent",cursor:"not-allowed"},":active, :focus":{pointerEvents:"none"}}:{}},u=function(r){return r?{border:"hidden"}:{}},p=function(r){return r?{backgroundColor:e("allgrey-background-color")}:{}},f=function(o){var n=o.size;return function(o,t){var a=t.isDisabled,l=t.selectProps.readOnly;return delete o.pointerEvents,r(r(r(r({},o),function(r){var o=i(r);return{height:"".concat(o,"px")}}(n)),{},{minHeight:"30px",border:"1px solid ".concat(e("ui-border-color")),boxShadow:"none",borderRadius:e("border-radius-small"),boxSizing:"border-box",transition:"border 0.1s ".concat(e("expand-animation-timing")),":hover":{borderColor:e("primary-text-color"),borderRadius:e("border-radius-small")},":active, :focus-within":{borderColor:e("primary-color")}},s(a)),u(l))}},b=function(o){var n=o.size;return function(o,t){var i=t.isDisabled;return r(r(r(r(r({},o),d()),c()),{},{borderRadius:e("border-radius-small")},s(i)),a(n))}},m=function(o){var n=o.size;return function(o,t){var i=t.selectProps,a=t.isDisabled,c=i.menuIsOpen,d=i.readOnly;return r(r(r({},o),{},{display:d?"none":"flex",alignItems:"center",justifyContent:"center",padding:"0px"},l(n)),{},{margin:"4px 3px 4px 0px",backgroundColor:"transparent",borderRadius:e("border-radius-small"),svg:{transition:"transform 0.1s ".concat(e("expand-animation-timing")),transform:c?"rotate(180deg)":"rotate(0deg)"},color:e(a?"disabled-text-color":"icon-color"),":hover, :active":{backgroundColor:a?void 0:e("primary-background-hover-color"),color:a?void 0:e("icon-color")}})}},g=function(o){var n=o.size;return function(){return r(r({display:"flex",alignItems:"center",justifyContent:"center",color:e("icon-color"),backgroundColor:"transparent",borderRadius:e("border-radius-small")},l(n)),{},{":hover":{backgroundColor:e("primary-background-hover-color")}})}};function v(r){switch(r){case n.LARGE:case n.MEDIUM:return"16px";default:return"14px"}}var x=function(n){var t=n.size,i=n.rtl;return function(n,l){var u=l.isDisabled,f=l.selectProps.readOnly;return r(r(r(r(r(r(r(r({},n),function(r){return o({display:"flex",alignItems:"center"},"padding".concat(r?"Right":"Left"),"12px")}(i)),d()),c()),a(t)),s(u)),p(f)),{},{borderRadius:e("border-radius-small")})}},h=function(){return function(o,n){return r(r({},d()),function(o,n){var t=n.isDisabled,i=n.isSelected,a=n.isFocused;delete o[":active"],delete o.width;var l={display:"flex",alignContent:"center",borderRadius:e("border-radius-small"),marginRight:e("spacing-small"),marginLeft:e("spacing-small"),paddingLeft:e("spacing-small"),paddingRight:e("spacing-small"),transition:"all 0.1s ".concat(e("expand-animation-timing"))};return t?r(r(r({},o),l),{},{backgroundColor:"transparent",color:e("disabled-text-color"),cursor:"not-allowed"},a&&{backgroundColor:e("primary-background-hover-color")}):i?r(r(r({},o),l),{},{color:e("primary-text-color"),backgroundColor:e("primary-selected-color"),cursor:"pointer"}):r(r(r({},o),l),{},{color:e("primary-text-color"),cursor:"pointer"},a&&{":hover":{color:e("primary-text-color"),backgroundColor:e("primary-background-hover-color")}})}(o,n))}},y=function(r){switch(r){case n.LARGE:case n.MEDIUM:return"20px";default:return"16px"}},w=function(o){return r(r({},o),{},{borderRadius:e("border-radius-small"),colors:r(r({},o.colors),{},{primary25:e("primary-background-hover-color")})})},C=function(o){return{container:f(o),control:(R=o,I=R.size,function(o,n){var t=n.isDisabled,i=n.selectProps.readOnly;return r(r(r(r(r(r({},o),a(I)),c()),{},{minHeight:"30px",border:"0 solid transparent",borderRadius:e("border-radius-small"),":focus-within":{boxShadow:"0 0 0 1px ".concat(e("primary-color"))}},!t&&{":hover":{borderColor:"transparent",borderRadius:e("border-radius-small")}}),{},{cursor:i?"default":"pointer"},s(t)),u(i))}),placeholder:function(o,n){var t=n.isDisabled;return r(r(r({},o),d()),{},{color:e(t?"disabled-text-color":"secondary-text-color"),fontWeight:e("font-weight-normal")})},indicatorsContainer:b(o),dropdownIndicator:m(o),clearIndicator:g(o),singleValue:function(o,n){var e=n.isDisabled,t=n.selectProps,i=t.readOnly,a=i?r(r(r({},u(i)),p(i)),{},{cursor:"text"}):{};return r(r(r(r(r(r(r({},o),d()),c()),s(e)),function(r){if(r.menuIsOpen)return{opacity:.6}}(t)),a),{},{display:"flex",alignItems:"center",height:"100%"})},input:(C=o,k=C.searchable,function(o){return r(r(r(r({},o),d()),c()),{},{display:"flex",alignItems:"center",textIndent:"-2px"},!k&&{width:"0px"})}),valueContainer:x(o),menu:(l=o,v=l.controlRef,y=l.insideOverflowContainer,w=l.insideOverflowWithTransformContainer,function(o){var n,i=r(r(r({},o),d()),{},{color:e("primary-text-color"),backgroundColor:e("dialog-background-color"),boxShadow:"".concat(e("experimental-dropdown-border-in-dark-themes","0 0 0 0 transparent"),", ").concat(e("box-shadow-small"))});if(!y&&!w)return i;var a=null==v||null===(n=v.current)||void 0===n?void 0:n.getBoundingClientRect();if(!a)return i;if(y)return r(r({},i),{},{top:a.bottom,width:a.width});if(w){var l,c="-".concat(null===(l=t(null==v?void 0:v.current))||void 0===l?void 0:l.scrollTop,"px");return r(r({},i),{},{top:"auto",translate:"0 ".concat(c),width:a.width})}return i}),option:h(),indicatorSeparator:function(){return{display:"none"}},group:(n=o,i=n.withGroupDivider,function(){return r({paddingBottom:0,marginTop:"4px"},i&&{":not(:last-child)":{position:"relative",paddingBottom:"8px","::after":{content:'""',position:"absolute",bottom:"0",left:"var(--spacing-small)",width:"calc(100% - (var(--spacing-small) * 2))",height:"1px",backgroundColor:"var(--layout-border-color)"}}})}),groupHeading:function(){return{fontSize:"14px",lineHeight:"32px",display:"flex",alignItems:"center",marginLeft:e("spacing-medium"),color:e("secondary-text-color")}}};var n,i,l,v,y,w,C,k,R,I};export{w as customTheme,C as default,y as getIndicatorSize};
2
2
  //# sourceMappingURL=Dropdown.styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Dropdown.styles.js","sources":["../../../../src/components/Dropdown/Dropdown.styles.js"],"sourcesContent":["import { SIZES } from \"../../constants/sizes\";\nimport { getCSSVar } from \"../../services/themes\";\nimport { getScrollableParent } from \"../../utils/dom-utils\";\n\nconst getSizeInPx = size => {\n switch (size) {\n case SIZES.LARGE:\n return 48;\n case SIZES.MEDIUM:\n return 40;\n case SIZES.SMALL:\n default:\n return 32;\n }\n};\n\nconst getSize = size => {\n const selectedSize = getSizeInPx(size);\n return { height: `${selectedSize}px` };\n};\n\nconst getInnerSize = size => {\n const selectedSize = getSizeInPx(size) - 2;\n return { height: `${selectedSize}px` };\n};\n\nconst getIndicatorBoxSize = size => {\n const selectedSize = getSizeInPx(size) - 8;\n return {\n height: `${selectedSize}px`,\n width: `${selectedSize}px`\n };\n};\n\nconst getColor = () => {\n const color = getCSSVar(\"primary-text-color\");\n const backgroundColor = getCSSVar(\"secondary-background-color\");\n return { color, backgroundColor };\n};\n\nconst getFont = size => ({\n fontSize: getSingleValueTextSize(size),\n lineHeight: getSingleValueTextSize(size),\n fontFamily: getCSSVar(\"font-family\")\n});\n\nconst disabledContainerStyle = isDisabled => {\n if (!isDisabled) return {};\n return {\n backgroundColor: getCSSVar(\"disabled-background-color\"),\n color: getCSSVar(\"disabled-text-color\"),\n borderColor: \"transparent\",\n cursor: \"not-allowed\",\n \":active, :focus, :hover\": {\n borderColor: \"transparent\",\n cursor: \"not-allowed\"\n },\n \":active, :focus\": {\n pointerEvents: \"none\"\n }\n };\n};\n\nconst readOnlyContainerStyle = readOnly => {\n if (!readOnly) return {};\n return {\n border: \"hidden\"\n };\n};\n\nconst readOnlyStyle = isReadOnly => {\n if (!isReadOnly) {\n return {};\n }\n return {\n backgroundColor: getCSSVar(\"allgrey-background-color\")\n };\n};\n\nconst getOptionStyle = (provided, { isDisabled, isSelected, isFocused }) => {\n delete provided[\":active\"];\n delete provided.width;\n const general = {\n display: \"flex\",\n alignContent: \"center\",\n borderRadius: getCSSVar(\"border-radius-small\"),\n marginRight: getCSSVar(\"spacing-small\"),\n marginLeft: getCSSVar(\"spacing-small\"),\n paddingLeft: getCSSVar(\"spacing-small\"),\n paddingRight: getCSSVar(\"spacing-small\"),\n transition: `all 0.1s ${getCSSVar(\"expand-animation-timing\")}`\n };\n if (isDisabled) {\n return {\n ...provided,\n ...general,\n backgroundColor: \"transparent\",\n color: getCSSVar(\"disabled-text-color\"),\n cursor: \"not-allowed\",\n ...(isFocused && {\n backgroundColor: getCSSVar(\"primary-background-hover-color\")\n })\n };\n }\n if (isSelected) {\n return {\n ...provided,\n ...general,\n color: getCSSVar(\"primary-text-color\"),\n backgroundColor: getCSSVar(\"primary-selected-color\"),\n cursor: \"pointer\"\n };\n }\n return {\n ...provided,\n ...general,\n color: getCSSVar(\"primary-text-color\"),\n cursor: \"pointer\",\n ...(isFocused && {\n \":hover\": {\n color: getCSSVar(\"primary-text-color\"),\n backgroundColor: getCSSVar(\"primary-background-hover-color\")\n }\n })\n };\n};\n\nconst container =\n ({ size }) =>\n (provided, { isDisabled, selectProps }) => {\n const { readOnly } = selectProps;\n delete provided.pointerEvents;\n return {\n ...provided,\n ...getSize(size),\n minHeight: \"30px\",\n border: `1px solid ${getCSSVar(\"ui-border-color\")}`,\n boxShadow: \"none\",\n borderRadius: getCSSVar(\"border-radius-small\"),\n boxSizing: \"border-box\",\n transition: `border 0.1s ${getCSSVar(\"expand-animation-timing\")}`,\n \":hover\": {\n borderColor: getCSSVar(\"primary-text-color\"),\n borderRadius: getCSSVar(\"border-radius-small\")\n },\n \":active, :focus-within\": {\n borderColor: getCSSVar(\"primary-color\")\n },\n ...disabledContainerStyle(isDisabled),\n ...readOnlyContainerStyle(readOnly)\n };\n };\n\nconst control =\n ({ size }) =>\n (provided, { isDisabled, selectProps }) => {\n const { readOnly } = selectProps;\n return {\n ...provided,\n ...getInnerSize(size),\n ...getColor(),\n minHeight: \"30px\",\n border: \"0 solid transparent\",\n borderRadius: getCSSVar(\"border-radius-small\"),\n \":focus-within\": {\n boxShadow: `0 0 0 1px ${getCSSVar(\"primary-color\")}`\n },\n ...(!isDisabled && {\n \":hover\": {\n borderColor: \"transparent\",\n borderRadius: getCSSVar(\"border-radius-small\")\n }\n }),\n cursor: readOnly ? \"default\" : \"pointer\",\n ...disabledContainerStyle(isDisabled),\n ...readOnlyContainerStyle(readOnly)\n };\n };\n\nconst placeholder =\n () =>\n (provided, { isDisabled }) => ({\n ...provided,\n ...getFont(),\n color: isDisabled ? getCSSVar(\"disabled-text-color\") : getCSSVar(\"secondary-text-color\"),\n fontWeight: getCSSVar(\"font-weight-normal\")\n });\n\nconst indicatorsContainer =\n ({ size }) =>\n (provided, { isDisabled }) => ({\n ...provided,\n ...getFont(),\n ...getColor(),\n borderRadius: getCSSVar(\"border-radius-small\"),\n ...disabledContainerStyle(isDisabled),\n ...getInnerSize(size)\n });\n\nconst dropdownIndicator =\n ({ size }) =>\n (provided, { selectProps, isDisabled }) => {\n const { menuIsOpen, readOnly } = selectProps;\n return {\n ...provided,\n display: readOnly ? \"none\" : \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n padding: \"0px\",\n ...getIndicatorBoxSize(size),\n margin: \"4px 3px 4px 0px\",\n backgroundColor: \"transparent\",\n borderRadius: getCSSVar(\"border-radius-small\"),\n svg: {\n transition: `transform 0.1s ${getCSSVar(\"expand-animation-timing\")}`,\n transform: menuIsOpen ? \"rotate(180deg)\" : \"rotate(0deg)\"\n },\n color: isDisabled ? getCSSVar(\"disabled-text-color\") : getCSSVar(\"icon-color\"),\n \":hover, :active\": {\n backgroundColor: isDisabled ? undefined : getCSSVar(\"primary-background-hover-color\"),\n color: isDisabled ? undefined : getCSSVar(\"icon-color\")\n }\n };\n };\n\nconst clearIndicator =\n ({ size }) =>\n () => ({\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n color: getCSSVar(\"icon-color\"),\n backgroundColor: \"transparent\",\n borderRadius: getCSSVar(\"border-radius-small\"),\n ...getIndicatorBoxSize(size),\n \":hover\": {\n backgroundColor: getCSSVar(\"primary-background-hover-color\")\n }\n });\n\nconst menuOpenOpacity = ({ menuIsOpen }) => {\n if (menuIsOpen) {\n return {\n opacity: 0.6\n };\n }\n};\n\nconst singleValue =\n () =>\n (provided, { isDisabled, selectProps }) => {\n const { readOnly } = selectProps;\n const readOnlyProps = readOnly\n ? {\n ...readOnlyContainerStyle(readOnly),\n ...readOnlyStyle(readOnly),\n cursor: \"text\"\n }\n : {};\n\n return {\n ...provided,\n ...getFont(),\n ...getColor(),\n ...disabledContainerStyle(isDisabled),\n ...menuOpenOpacity(selectProps),\n ...readOnlyProps,\n display: \"flex\",\n alignItems: \"center\",\n height: \"100%\"\n };\n };\n\nfunction getSingleValueTextSize(size) {\n switch (size) {\n case SIZES.LARGE:\n return \"16px\";\n case SIZES.MEDIUM:\n return \"16px\";\n case SIZES.SMALL:\n default:\n return \"14px\";\n }\n}\n\nconst input = () => provided => ({\n ...provided,\n ...getFont(),\n ...getColor(),\n display: \"flex\",\n alignItems: \"center\",\n textIndent: \"-2px\"\n});\n\n// 12px - because we have inner 4px\nconst getCenterContentStyle = rtl => {\n return {\n display: \"flex\",\n alignItems: \"center\",\n [`padding${rtl ? \"Right\" : \"Left\"}`]: \"12px\"\n };\n};\n\nconst valueContainer =\n ({ size, rtl }) =>\n (provided, { isDisabled, selectProps: { readOnly } }) => ({\n ...provided,\n ...getCenterContentStyle(rtl),\n ...getFont(),\n ...getColor(),\n ...getInnerSize(size),\n ...disabledContainerStyle(isDisabled),\n ...readOnlyStyle(readOnly),\n borderRadius: getCSSVar(\"border-radius-small\")\n });\n\nconst menu =\n ({ controlRef, insideOverflowContainer, insideOverflowWithTransformContainer }) =>\n provided => {\n const baseStyle = {\n ...provided,\n ...getFont(),\n color: getCSSVar(\"primary-text-color\"),\n backgroundColor: getCSSVar(\"dialog-background-color\"),\n boxShadow: `${getCSSVar(\"experimental-dropdown-border-in-dark-themes\", \"0 0 0 0 transparent\")}, ${getCSSVar(\n \"box-shadow-small\"\n )}`\n };\n\n if (!insideOverflowContainer && !insideOverflowWithTransformContainer) return baseStyle;\n const parentPositionData = controlRef?.current?.getBoundingClientRect();\n // If no location found do not add anything to hard coded style\n if (!parentPositionData) return baseStyle;\n\n /** If the dropdown is inside a scroll in a regular container,position: fixed content (like our dropdown menu) will be attached to the start of the viewport.\n * For this case we will override the top menu position value to be the according the the drop down location for correct dispaly.\n * When the dropdown container (with overflow:hidden or overflow:scroll) using transform CSS function, we can use a relative positioned inner container, which our menu will be attach to it's\n * start when the menu position is fixed, and this is why in this case we define top:auto.\n * we also need in this case to translate the menu y position to fit inside a scrollable parent.\n */\n\n if (insideOverflowContainer) {\n return { ...baseStyle, top: parentPositionData.bottom, width: parentPositionData.width };\n } else if (insideOverflowWithTransformContainer) {\n const translateY = `-${getScrollableParent(controlRef?.current)?.scrollTop}px`;\n return {\n ...baseStyle,\n top: \"auto\",\n translate: `0 ${translateY}`,\n width: parentPositionData.width\n };\n }\n return baseStyle;\n };\n\nconst option = () => (provided, state) => ({\n ...getFont(),\n ...getOptionStyle(provided, state)\n});\n\nconst indicatorSeparator = () => () => ({\n display: \"none\"\n});\n\nconst group =\n ({ withGroupDivider }) =>\n () => ({\n paddingBottom: 0,\n marginTop: \"4px\",\n ...(withGroupDivider && {\n \":not(:last-child)\": {\n position: \"relative\",\n paddingBottom: \"8px\",\n \"::after\": {\n content: '\"\"',\n position: \"absolute\",\n bottom: \"0\",\n left: \"var(--spacing-small)\",\n width: \"calc(100% - (var(--spacing-small) * 2))\",\n height: \"1px\",\n backgroundColor: \"var(--layout-border-color)\"\n }\n }\n })\n });\n\nconst groupHeading = () => () => ({\n fontSize: \"14px\",\n lineHeight: \"32px\",\n display: \"flex\",\n alignItems: \"center\",\n marginLeft: getCSSVar(\"spacing-medium\"),\n color: getCSSVar(\"secondary-text-color\")\n});\n\nexport const getIndicatorSize = size => {\n switch (size) {\n case SIZES.LARGE:\n return \"20px\";\n case SIZES.MEDIUM:\n return \"20px\";\n case SIZES.SMALL:\n default:\n return \"16px\";\n }\n};\n\nexport const customTheme = theme => ({\n ...theme,\n borderRadius: getCSSVar(\"border-radius-small\"),\n colors: {\n ...theme.colors,\n primary25: getCSSVar(\"primary-background-hover-color\")\n }\n});\n\nexport default data => ({\n container: container(data),\n control: control(data),\n placeholder: placeholder(data),\n indicatorsContainer: indicatorsContainer(data),\n dropdownIndicator: dropdownIndicator(data),\n clearIndicator: clearIndicator(data),\n singleValue: singleValue(data),\n input: input(data),\n valueContainer: valueContainer(data),\n menu: menu(data),\n option: option(data),\n indicatorSeparator: indicatorSeparator(data),\n group: group(data),\n groupHeading: groupHeading(data)\n});\n"],"names":["getSizeInPx","size","SIZES","LARGE","MEDIUM","getInnerSize","selectedSize","height","concat","getIndicatorBoxSize","width","getColor","color","getCSSVar","backgroundColor","getFont","fontSize","getSingleValueTextSize","lineHeight","fontFamily","disabledContainerStyle","isDisabled","borderColor","cursor","pointerEvents","readOnlyContainerStyle","readOnly","border","readOnlyStyle","isReadOnly","container","_ref2","provided","_ref3","selectProps","_objectSpread","getSize","minHeight","boxShadow","borderRadius","boxSizing","transition","indicatorsContainer","_ref7","_ref8","dropdownIndicator","_ref9","_ref10","menuIsOpen","display","alignItems","justifyContent","padding","margin","svg","transform","undefined","clearIndicator","_ref11","valueContainer","_ref15","rtl","_ref16","_defineProperty","getCenterContentStyle","option","state","_ref","isSelected","isFocused","general","alignContent","marginRight","marginLeft","paddingLeft","paddingRight","getOptionStyle","getIndicatorSize","customTheme","theme","colors","primary25","generateBaseStyles","data","control","_ref4","_ref5","placeholder","_ref6","fontWeight","singleValue","_ref13","readOnlyProps","_ref12","opacity","menuOpenOpacity","input","textIndent","menu","_ref17","controlRef","insideOverflowContainer","insideOverflowWithTransformContainer","_controlRef$current","baseStyle","parentPositionData","current","getBoundingClientRect","top","bottom","_getScrollableParent","translateY","getScrollableParent","scrollTop","translate","indicatorSeparator","group","_ref18","withGroupDivider","paddingBottom","marginTop","position","content","left","groupHeading"],"mappings":"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"}
1
+ {"version":3,"file":"Dropdown.styles.js","sources":["../../../../src/components/Dropdown/Dropdown.styles.js"],"sourcesContent":["import { SIZES } from \"../../constants/sizes\";\nimport { getCSSVar } from \"../../services/themes\";\nimport { getScrollableParent } from \"../../utils/dom-utils\";\n\nconst getSizeInPx = size => {\n switch (size) {\n case SIZES.LARGE:\n return 48;\n case SIZES.MEDIUM:\n return 40;\n case SIZES.SMALL:\n default:\n return 32;\n }\n};\n\nconst getSize = size => {\n const selectedSize = getSizeInPx(size);\n return { height: `${selectedSize}px` };\n};\n\nconst getInnerSize = size => {\n const selectedSize = getSizeInPx(size) - 2;\n return { height: `${selectedSize}px` };\n};\n\nconst getIndicatorBoxSize = size => {\n const selectedSize = getSizeInPx(size) - 8;\n return {\n height: `${selectedSize}px`,\n width: `${selectedSize}px`\n };\n};\n\nconst getColor = () => {\n const color = getCSSVar(\"primary-text-color\");\n const backgroundColor = getCSSVar(\"secondary-background-color\");\n return { color, backgroundColor };\n};\n\nconst getFont = size => ({\n fontSize: getSingleValueTextSize(size),\n lineHeight: getSingleValueTextSize(size),\n fontFamily: getCSSVar(\"font-family\")\n});\n\nconst disabledContainerStyle = isDisabled => {\n if (!isDisabled) return {};\n return {\n backgroundColor: getCSSVar(\"disabled-background-color\"),\n color: getCSSVar(\"disabled-text-color\"),\n borderColor: \"transparent\",\n cursor: \"not-allowed\",\n \":active, :focus, :hover\": {\n borderColor: \"transparent\",\n cursor: \"not-allowed\"\n },\n \":active, :focus\": {\n pointerEvents: \"none\"\n }\n };\n};\n\nconst readOnlyContainerStyle = readOnly => {\n if (!readOnly) return {};\n return {\n border: \"hidden\"\n };\n};\n\nconst readOnlyStyle = isReadOnly => {\n if (!isReadOnly) {\n return {};\n }\n return {\n backgroundColor: getCSSVar(\"allgrey-background-color\")\n };\n};\n\nconst getOptionStyle = (provided, { isDisabled, isSelected, isFocused }) => {\n delete provided[\":active\"];\n delete provided.width;\n const general = {\n display: \"flex\",\n alignContent: \"center\",\n borderRadius: getCSSVar(\"border-radius-small\"),\n marginRight: getCSSVar(\"spacing-small\"),\n marginLeft: getCSSVar(\"spacing-small\"),\n paddingLeft: getCSSVar(\"spacing-small\"),\n paddingRight: getCSSVar(\"spacing-small\"),\n transition: `all 0.1s ${getCSSVar(\"expand-animation-timing\")}`\n };\n if (isDisabled) {\n return {\n ...provided,\n ...general,\n backgroundColor: \"transparent\",\n color: getCSSVar(\"disabled-text-color\"),\n cursor: \"not-allowed\",\n ...(isFocused && {\n backgroundColor: getCSSVar(\"primary-background-hover-color\")\n })\n };\n }\n if (isSelected) {\n return {\n ...provided,\n ...general,\n color: getCSSVar(\"primary-text-color\"),\n backgroundColor: getCSSVar(\"primary-selected-color\"),\n cursor: \"pointer\"\n };\n }\n return {\n ...provided,\n ...general,\n color: getCSSVar(\"primary-text-color\"),\n cursor: \"pointer\",\n ...(isFocused && {\n \":hover\": {\n color: getCSSVar(\"primary-text-color\"),\n backgroundColor: getCSSVar(\"primary-background-hover-color\")\n }\n })\n };\n};\n\nconst container =\n ({ size }) =>\n (provided, { isDisabled, selectProps }) => {\n const { readOnly } = selectProps;\n delete provided.pointerEvents;\n return {\n ...provided,\n ...getSize(size),\n minHeight: \"30px\",\n border: `1px solid ${getCSSVar(\"ui-border-color\")}`,\n boxShadow: \"none\",\n borderRadius: getCSSVar(\"border-radius-small\"),\n boxSizing: \"border-box\",\n transition: `border 0.1s ${getCSSVar(\"expand-animation-timing\")}`,\n \":hover\": {\n borderColor: getCSSVar(\"primary-text-color\"),\n borderRadius: getCSSVar(\"border-radius-small\")\n },\n \":active, :focus-within\": {\n borderColor: getCSSVar(\"primary-color\")\n },\n ...disabledContainerStyle(isDisabled),\n ...readOnlyContainerStyle(readOnly)\n };\n };\n\nconst control =\n ({ size }) =>\n (provided, { isDisabled, selectProps }) => {\n const { readOnly } = selectProps;\n return {\n ...provided,\n ...getInnerSize(size),\n ...getColor(),\n minHeight: \"30px\",\n border: \"0 solid transparent\",\n borderRadius: getCSSVar(\"border-radius-small\"),\n \":focus-within\": {\n boxShadow: `0 0 0 1px ${getCSSVar(\"primary-color\")}`\n },\n ...(!isDisabled && {\n \":hover\": {\n borderColor: \"transparent\",\n borderRadius: getCSSVar(\"border-radius-small\")\n }\n }),\n cursor: readOnly ? \"default\" : \"pointer\",\n ...disabledContainerStyle(isDisabled),\n ...readOnlyContainerStyle(readOnly)\n };\n };\n\nconst placeholder =\n () =>\n (provided, { isDisabled }) => ({\n ...provided,\n ...getFont(),\n color: isDisabled ? getCSSVar(\"disabled-text-color\") : getCSSVar(\"secondary-text-color\"),\n fontWeight: getCSSVar(\"font-weight-normal\")\n });\n\nconst indicatorsContainer =\n ({ size }) =>\n (provided, { isDisabled }) => ({\n ...provided,\n ...getFont(),\n ...getColor(),\n borderRadius: getCSSVar(\"border-radius-small\"),\n ...disabledContainerStyle(isDisabled),\n ...getInnerSize(size)\n });\n\nconst dropdownIndicator =\n ({ size }) =>\n (provided, { selectProps, isDisabled }) => {\n const { menuIsOpen, readOnly } = selectProps;\n return {\n ...provided,\n display: readOnly ? \"none\" : \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n padding: \"0px\",\n ...getIndicatorBoxSize(size),\n margin: \"4px 3px 4px 0px\",\n backgroundColor: \"transparent\",\n borderRadius: getCSSVar(\"border-radius-small\"),\n svg: {\n transition: `transform 0.1s ${getCSSVar(\"expand-animation-timing\")}`,\n transform: menuIsOpen ? \"rotate(180deg)\" : \"rotate(0deg)\"\n },\n color: isDisabled ? getCSSVar(\"disabled-text-color\") : getCSSVar(\"icon-color\"),\n \":hover, :active\": {\n backgroundColor: isDisabled ? undefined : getCSSVar(\"primary-background-hover-color\"),\n color: isDisabled ? undefined : getCSSVar(\"icon-color\")\n }\n };\n };\n\nconst clearIndicator =\n ({ size }) =>\n () => ({\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n color: getCSSVar(\"icon-color\"),\n backgroundColor: \"transparent\",\n borderRadius: getCSSVar(\"border-radius-small\"),\n ...getIndicatorBoxSize(size),\n \":hover\": {\n backgroundColor: getCSSVar(\"primary-background-hover-color\")\n }\n });\n\nconst menuOpenOpacity = ({ menuIsOpen }) => {\n if (menuIsOpen) {\n return {\n opacity: 0.6\n };\n }\n};\n\nconst singleValue =\n () =>\n (provided, { isDisabled, selectProps }) => {\n const { readOnly } = selectProps;\n const readOnlyProps = readOnly\n ? {\n ...readOnlyContainerStyle(readOnly),\n ...readOnlyStyle(readOnly),\n cursor: \"text\"\n }\n : {};\n\n return {\n ...provided,\n ...getFont(),\n ...getColor(),\n ...disabledContainerStyle(isDisabled),\n ...menuOpenOpacity(selectProps),\n ...readOnlyProps,\n display: \"flex\",\n alignItems: \"center\",\n height: \"100%\"\n };\n };\n\nfunction getSingleValueTextSize(size) {\n switch (size) {\n case SIZES.LARGE:\n return \"16px\";\n case SIZES.MEDIUM:\n return \"16px\";\n case SIZES.SMALL:\n default:\n return \"14px\";\n }\n}\n\nconst input =\n ({ searchable }) =>\n provided => ({\n ...provided,\n ...getFont(),\n ...getColor(),\n display: \"flex\",\n alignItems: \"center\",\n textIndent: \"-2px\",\n ...(!searchable && {\n width: \"0px\"\n })\n });\n\n// 12px - because we have inner 4px\nconst getCenterContentStyle = rtl => {\n return {\n display: \"flex\",\n alignItems: \"center\",\n [`padding${rtl ? \"Right\" : \"Left\"}`]: \"12px\"\n };\n};\n\nconst valueContainer =\n ({ size, rtl }) =>\n (provided, { isDisabled, selectProps: { readOnly } }) => ({\n ...provided,\n ...getCenterContentStyle(rtl),\n ...getFont(),\n ...getColor(),\n ...getInnerSize(size),\n ...disabledContainerStyle(isDisabled),\n ...readOnlyStyle(readOnly),\n borderRadius: getCSSVar(\"border-radius-small\")\n });\n\nconst menu =\n ({ controlRef, insideOverflowContainer, insideOverflowWithTransformContainer }) =>\n provided => {\n const baseStyle = {\n ...provided,\n ...getFont(),\n color: getCSSVar(\"primary-text-color\"),\n backgroundColor: getCSSVar(\"dialog-background-color\"),\n boxShadow: `${getCSSVar(\"experimental-dropdown-border-in-dark-themes\", \"0 0 0 0 transparent\")}, ${getCSSVar(\n \"box-shadow-small\"\n )}`\n };\n\n if (!insideOverflowContainer && !insideOverflowWithTransformContainer) return baseStyle;\n const parentPositionData = controlRef?.current?.getBoundingClientRect();\n // If no location found do not add anything to hard coded style\n if (!parentPositionData) return baseStyle;\n\n /** If the dropdown is inside a scroll in a regular container,position: fixed content (like our dropdown menu) will be attached to the start of the viewport.\n * For this case we will override the top menu position value to be the according the the drop down location for correct dispaly.\n * When the dropdown container (with overflow:hidden or overflow:scroll) using transform CSS function, we can use a relative positioned inner container, which our menu will be attach to it's\n * start when the menu position is fixed, and this is why in this case we define top:auto.\n * we also need in this case to translate the menu y position to fit inside a scrollable parent.\n */\n\n if (insideOverflowContainer) {\n return { ...baseStyle, top: parentPositionData.bottom, width: parentPositionData.width };\n } else if (insideOverflowWithTransformContainer) {\n const translateY = `-${getScrollableParent(controlRef?.current)?.scrollTop}px`;\n return {\n ...baseStyle,\n top: \"auto\",\n translate: `0 ${translateY}`,\n width: parentPositionData.width\n };\n }\n return baseStyle;\n };\n\nconst option = () => (provided, state) => ({\n ...getFont(),\n ...getOptionStyle(provided, state)\n});\n\nconst indicatorSeparator = () => () => ({\n display: \"none\"\n});\n\nconst group =\n ({ withGroupDivider }) =>\n () => ({\n paddingBottom: 0,\n marginTop: \"4px\",\n ...(withGroupDivider && {\n \":not(:last-child)\": {\n position: \"relative\",\n paddingBottom: \"8px\",\n \"::after\": {\n content: '\"\"',\n position: \"absolute\",\n bottom: \"0\",\n left: \"var(--spacing-small)\",\n width: \"calc(100% - (var(--spacing-small) * 2))\",\n height: \"1px\",\n backgroundColor: \"var(--layout-border-color)\"\n }\n }\n })\n });\n\nconst groupHeading = () => () => ({\n fontSize: \"14px\",\n lineHeight: \"32px\",\n display: \"flex\",\n alignItems: \"center\",\n marginLeft: getCSSVar(\"spacing-medium\"),\n color: getCSSVar(\"secondary-text-color\")\n});\n\nexport const getIndicatorSize = size => {\n switch (size) {\n case SIZES.LARGE:\n return \"20px\";\n case SIZES.MEDIUM:\n return \"20px\";\n case SIZES.SMALL:\n default:\n return \"16px\";\n }\n};\n\nexport const customTheme = theme => ({\n ...theme,\n borderRadius: getCSSVar(\"border-radius-small\"),\n colors: {\n ...theme.colors,\n primary25: getCSSVar(\"primary-background-hover-color\")\n }\n});\n\nexport default data => ({\n container: container(data),\n control: control(data),\n placeholder: placeholder(data),\n indicatorsContainer: indicatorsContainer(data),\n dropdownIndicator: dropdownIndicator(data),\n clearIndicator: clearIndicator(data),\n singleValue: singleValue(data),\n input: input(data),\n valueContainer: valueContainer(data),\n menu: menu(data),\n option: option(data),\n indicatorSeparator: indicatorSeparator(data),\n group: group(data),\n groupHeading: groupHeading(data)\n});\n"],"names":["getSizeInPx","size","SIZES","LARGE","MEDIUM","getInnerSize","selectedSize","height","concat","getIndicatorBoxSize","width","getColor","color","getCSSVar","backgroundColor","getFont","fontSize","getSingleValueTextSize","lineHeight","fontFamily","disabledContainerStyle","isDisabled","borderColor","cursor","pointerEvents","readOnlyContainerStyle","readOnly","border","readOnlyStyle","isReadOnly","container","_ref2","provided","_ref3","selectProps","_objectSpread","getSize","minHeight","boxShadow","borderRadius","boxSizing","transition","indicatorsContainer","_ref7","_ref8","dropdownIndicator","_ref9","_ref10","menuIsOpen","display","alignItems","justifyContent","padding","margin","svg","transform","undefined","clearIndicator","_ref11","valueContainer","_ref16","rtl","_ref17","_defineProperty","getCenterContentStyle","option","state","_ref","isSelected","isFocused","general","alignContent","marginRight","marginLeft","paddingLeft","paddingRight","getOptionStyle","getIndicatorSize","customTheme","theme","colors","primary25","generateBaseStyles","data","control","_ref4","_ref5","placeholder","_ref6","fontWeight","singleValue","_ref13","readOnlyProps","_ref12","opacity","menuOpenOpacity","input","_ref14","searchable","textIndent","menu","_ref18","controlRef","insideOverflowContainer","insideOverflowWithTransformContainer","_controlRef$current","baseStyle","parentPositionData","current","getBoundingClientRect","top","bottom","_getScrollableParent","translateY","getScrollableParent","scrollTop","translate","indicatorSeparator","group","_ref19","withGroupDivider","paddingBottom","marginTop","position","content","left","groupHeading"],"mappings":"wQAIA,IAAMA,EAAc,SAAAC,GAClB,OAAQA,GACN,KAAKC,EAAMC,MACT,OAAO,GACT,KAAKD,EAAME,OACT,OAAO,GAET,QACE,OAAO,GAEb,EAOMC,EAAe,SAAAJ,GACnB,IAAMK,EAAeN,EAAYC,GAAQ,EACzC,MAAO,CAAEM,OAAM,GAAAC,OAAKF,EAAY,MAClC,EAEMG,EAAsB,SAAAR,GAC1B,IAAMK,EAAeN,EAAYC,GAAQ,EACzC,MAAO,CACLM,OAAMC,GAAAA,OAAKF,EAAgB,MAC3BI,MAAK,GAAAF,OAAKF,EAAY,MAE1B,EAEMK,EAAW,WAGf,MAAO,CAAEC,MAFKC,EAAU,sBAERC,gBADQD,EAAU,8BAEpC,EAEME,EAAU,SAAAd,GAAI,MAAK,CACvBe,SAAUC,EAAuBhB,GACjCiB,WAAYD,EAAuBhB,GACnCkB,WAAYN,EAAU,eACvB,EAEKO,EAAyB,SAAAC,GAC7B,OAAKA,EACE,CACLP,gBAAiBD,EAAU,6BAC3BD,MAAOC,EAAU,uBACjBS,YAAa,cACbC,OAAQ,cACR,0BAA2B,CACzBD,YAAa,cACbC,OAAQ,eAEV,kBAAmB,CACjBC,cAAe,SAXK,EAc1B,EAEMC,EAAyB,SAAAC,GAC7B,OAAKA,EACE,CACLC,OAAQ,UAFY,EAIxB,EAEMC,EAAgB,SAAAC,GACpB,OAAKA,EAGE,CACLf,gBAAiBD,EAAU,6BAHpB,EAKX,EAkDMiB,EACJ,SADaC,GAAA,IACV9B,EAAI8B,EAAJ9B,KAAI,OACP,SAAC+B,EAAQC,GAAkC,IAA9BZ,EAAUY,EAAVZ,WACHK,EAD0BO,EAAXC,YACfR,SAER,cADOM,EAASR,cAChBW,EAAAA,EAAAA,EAAAA,EAAA,CAAA,EACKH,GArHO,SAAA/B,GACd,IAAMK,EAAeN,EAAYC,GACjC,MAAO,CAAEM,OAAM,GAAAC,OAAKF,EAAY,MAClC,CAmHS8B,CAAQnC,IAAK,CAAA,EAAA,CAChBoC,UAAW,OACXV,oBAAMnB,OAAeK,EAAU,oBAC/ByB,UAAW,OACXC,aAAc1B,EAAU,uBACxB2B,UAAW,aACXC,0BAAUjC,OAAiBK,EAAU,4BACrC,SAAU,CACRS,YAAaT,EAAU,sBACvB0B,aAAc1B,EAAU,wBAE1B,yBAA0B,CACxBS,YAAaT,EAAU,mBAEtBO,EAAuBC,IACvBI,EAAuBC,IAE7B,EAqCGgB,EACJ,SADuBC,GAAA,IACpB1C,EAAI0C,EAAJ1C,KAAI,OACP,SAAC+B,EAAQY,GAAA,IAAIvB,EAAUuB,EAAVvB,WAAU,OAAAc,EAAAA,EAAAA,EAAAA,EAAAA,EAClBH,CAAAA,EAAAA,GACAjB,KACAJ,KAAU,CAAA,EAAA,CACb4B,aAAc1B,EAAU,wBACrBO,EAAuBC,IACvBhB,EAAaJ,IAChB,EAEE4C,EACJ,SADqBC,GAAA,IAClB7C,EAAI6C,EAAJ7C,KAAI,OACP,SAAC+B,EAAQe,GAAkC,IAA9Bb,EAAWa,EAAXb,YAAab,EAAU0B,EAAV1B,WAChB2B,EAAyBd,EAAzBc,WAAYtB,EAAaQ,EAAbR,SACpB,OAAAS,EAAAA,EAAAA,KACKH,GAAQ,GAAA,CACXiB,QAASvB,EAAW,OAAS,OAC7BwB,WAAY,SACZC,eAAgB,SAChBC,QAAS,OACN3C,EAAoBR,IAAK,GAAA,CAC5BoD,OAAQ,kBACRvC,gBAAiB,cACjByB,aAAc1B,EAAU,uBACxByC,IAAK,CACHb,6BAAUjC,OAAoBK,EAAU,4BACxC0C,UAAWP,EAAa,iBAAmB,gBAE7CpC,MAAoBC,EAAbQ,EAAuB,sBAAmC,cACjE,kBAAmB,CACjBP,gBAAiBO,OAAamC,EAAY3C,EAAU,kCACpDD,MAAOS,OAAamC,EAAY3C,EAAU,iBAG/C,EAEG4C,EACJ,SADkBC,GAAA,IACfzD,EAAIyD,EAAJzD,KAAI,OACP,WAAA,OAAAkC,EAAAA,EAAA,CACEc,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBvC,MAAOC,EAAU,cACjBC,gBAAiB,cACjByB,aAAc1B,EAAU,wBACrBJ,EAAoBR,IAAK,GAAA,CAC5B,SAAU,CACRa,gBAAiBD,EAAU,qCAE7B,EAmCJ,SAASI,EAAuBhB,GAC9B,OAAQA,GACN,KAAKC,EAAMC,MAEX,KAAKD,EAAME,OACT,MAAO,OAET,QACE,MAAO,OAEb,CAEA,IAuBMuD,EACJ,SADkBC,GAAA,IACf3D,EAAI2D,EAAJ3D,KAAM4D,EAAGD,EAAHC,IAAG,OACZ,SAAC7B,EAAQ8B,GAAA,IAAIzC,EAAUyC,EAAVzC,WAA2BK,EAAQoC,EAAvB5B,YAAeR,SAAQ,OAAAS,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAA,CAAA,EAC3CH,GAXuB,SAAA6B,GAC5B,OAAAE,EAAA,CACEd,QAAS,OACTC,WAAY,UAAQ1C,UAAAA,OACTqD,EAAM,QAAU,QAAW,OAE1C,CAMOG,CAAsBH,IACtB9C,KACAJ,KACAN,EAAaJ,IACbmB,EAAuBC,IACvBO,EAAcF,IAAS,CAAA,EAAA,CAC1Ba,aAAc1B,EAAU,yBACxB,EAyCEoD,EAAS,WAAH,OAAS,SAACjC,EAAUkC,GAAK,OAAA/B,EAAAA,EAAA,CAAA,EAChCpB,KA1RkB,SAACiB,EAAQmC,GAA4C,IAAxC9C,EAAU8C,EAAV9C,WAAY+C,EAAUD,EAAVC,WAAYC,EAASF,EAATE,iBACnDrC,EAAS,kBACTA,EAAStB,MAChB,IAAM4D,EAAU,CACdrB,QAAS,OACTsB,aAAc,SACdhC,aAAc1B,EAAU,uBACxB2D,YAAa3D,EAAU,iBACvB4D,WAAY5D,EAAU,iBACtB6D,YAAa7D,EAAU,iBACvB8D,aAAc9D,EAAU,iBACxB4B,uBAAUjC,OAAcK,EAAU,6BAEpC,OAAIQ,EACFc,EAAAA,EAAAA,EACKH,CAAAA,EAAAA,GACAsC,GAAO,GAAA,CACVxD,gBAAiB,cACjBF,MAAOC,EAAU,uBACjBU,OAAQ,eACJ8C,GAAa,CACfvD,gBAAiBD,EAAU,oCAI7BuD,EACFjC,EAAAA,EAAAA,EACKH,CAAAA,EAAAA,GACAsC,GAAO,GAAA,CACV1D,MAAOC,EAAU,sBACjBC,gBAAiBD,EAAU,0BAC3BU,OAAQ,YAGZY,EAAAA,EAAAA,EACKH,CAAAA,EAAAA,GACAsC,GAAO,GAAA,CACV1D,MAAOC,EAAU,sBACjBU,OAAQ,WACJ8C,GAAa,CACf,SAAU,CACRzD,MAAOC,EAAU,sBACjBC,gBAAiBD,EAAU,oCAInC,CA6OK+D,CAAe5C,EAAUkC,IAC5B,EAqCWW,EAAmB,SAAA5E,GAC9B,OAAQA,GACN,KAAKC,EAAMC,MAEX,KAAKD,EAAME,OACT,MAAO,OAET,QACE,MAAO,OAEb,EAEa0E,EAAc,SAAAC,GAAK,OAAA5C,EAAAA,EAAA,CAAA,EAC3B4C,GAAK,CAAA,EAAA,CACRxC,aAAc1B,EAAU,uBACxBmE,OAAM7C,EAAAA,EACD4C,CAAAA,EAAAA,EAAMC,QAAM,GAAA,CACfC,UAAWpE,EAAU,qCACtB,EAGHqE,EAAA,SAAeC,GAAI,MAAK,CACtBrD,UAAWA,EAAUqD,GACrBC,SA9QWC,EA8QMF,EA7QdlF,EAAIoF,EAAJpF,KACH,SAAC+B,EAAQsD,GAAkC,IAA9BjE,EAAUiE,EAAVjE,WACHK,EAD0B4D,EAAXpD,YACfR,SACR,OAAAS,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EACKH,CAAAA,EAAAA,GACA3B,EAAaJ,IACbU,KAAU,GAAA,CACb0B,UAAW,OACXV,OAAQ,sBACRY,aAAc1B,EAAU,uBACxB,gBAAiB,CACfyB,uBAAS9B,OAAeK,EAAU,qBAE/BQ,GAAc,CACjB,SAAU,CACRC,YAAa,cACbiB,aAAc1B,EAAU,0BAE3B,CAAA,EAAA,CACDU,OAAQG,EAAW,UAAY,WAC5BN,EAAuBC,IACvBI,EAAuBC,MAyP9B6D,YAnPA,SAACvD,EAAQwD,GAAA,IAAInE,EAAUmE,EAAVnE,WAAU,OAAAc,EAAAA,EAAAA,KAClBH,GACAjB,KAAS,GAAA,CACZH,MAAoBC,EAAbQ,EAAuB,sBAAmC,wBACjEoE,WAAY5E,EAAU,yBAgPxB6B,oBAAqBA,EAAoByC,GACzCtC,kBAAmBA,EAAkBsC,GACrC1B,eAAgBA,EAAe0B,GAC/BO,YAlLA,SAAC1D,EAAQ2D,GAAkC,IAA9BtE,EAAUsE,EAAVtE,WAAYa,EAAWyD,EAAXzD,YACfR,EAAaQ,EAAbR,SACFkE,EAAgBlE,EAAQS,EAAAA,EAAAA,EAErBV,CAAAA,EAAAA,EAAuBC,IACvBE,EAAcF,IAAS,CAAA,EAAA,CAC1BH,OAAQ,SAEV,CAAA,EAEJ,OAAAY,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAA,CAAA,EACKH,GACAjB,KACAJ,KACAS,EAAuBC,IAxBR,SAAHwE,GACnB,GADmCA,EAAV7C,WAEvB,MAAO,CACL8C,QAAS,GAGf,CAmBSC,CAAgB7D,IAChB0D,GAAa,GAAA,CAChB3C,QAAS,OACTC,WAAY,SACZ3C,OAAQ,UAgKZyF,OAhJSC,EAgJId,EA/IVe,EAAUD,EAAVC,WACH,SAAAlE,GAAQ,OAAAG,EAAAA,EAAAA,EAAAA,EAAA,CAAA,EACHH,GACAjB,KACAJ,KAAU,CAAA,EAAA,CACbsC,QAAS,OACTC,WAAY,SACZiD,WAAY,SACPD,GAAc,CACjBxF,MAAO,UAuIXiD,eAAgBA,EAAewB,GAC/BiB,MA9GQC,EA8GGlB,EA7GRmB,EAAUD,EAAVC,WAAYC,EAAuBF,EAAvBE,wBAAyBC,EAAoCH,EAApCG,qCACxC,SAAAxE,GAAY,IAAAyE,EACJC,EAASvE,EAAAA,EAAAA,EAAA,GACVH,GACAjB,KAAS,GAAA,CACZH,MAAOC,EAAU,sBACjBC,gBAAiBD,EAAU,2BAC3ByB,UAAS9B,GAAAA,OAAKK,EAAU,8CAA+C,6BAAsBL,OAAKK,EAChG,uBAIJ,IAAK0F,IAA4BC,EAAsC,OAAOE,EAC9E,IAAMC,EAAqBL,iBAAUG,EAAVH,EAAYM,eAAO,IAAAH,OAAA,EAAnBA,EAAqBI,wBAEhD,IAAKF,EAAoB,OAAOD,EAShC,GAAIH,EACF,OAAApE,EAAAA,EAAA,CAAA,EAAYuE,GAAS,CAAA,EAAA,CAAEI,IAAKH,EAAmBI,OAAQrG,MAAOiG,EAAmBjG,QAC5E,GAAI8F,EAAsC,CAAA,IAAAQ,EACzCC,MAAUzG,OAA+C,QAA/CwG,EAAOE,EAAoBZ,eAAAA,EAAYM,gBAAhCI,IAAwCA,OAAxCA,EAAAA,EAA0CG,UAAa,MAC9E,OAAAhF,EAAAA,EAAA,CAAA,EACKuE,GAAS,CAAA,EAAA,CACZI,IAAK,OACLM,UAAS5G,KAAAA,OAAOyG,GAChBvG,MAAOiG,EAAmBjG,OAE9B,CACA,OAAOgG,IA2ETzC,OAAQA,IACRoD,mBApE+B,WAAA,MAAO,CACtCpE,QAAS,SAoETqE,OAjESC,EAiEIpC,EAhEVqC,EAAgBD,EAAhBC,iBACH,WAAA,OAAArF,EAAA,CACEsF,cAAe,EACfC,UAAW,OACPF,GAAoB,CACtB,oBAAqB,CACnBG,SAAU,WACVF,cAAe,MACf,UAAW,CACTG,QAAS,KACTD,SAAU,WACVZ,OAAQ,IACRc,KAAM,uBACNnH,MAAO,0CACPH,OAAQ,MACRO,gBAAiB,mCAkDzBgH,aA5CyB,WAAA,MAAO,CAChC9G,SAAU,OACVE,WAAY,OACZ+B,QAAS,OACTC,WAAY,SACZuB,WAAY5D,EAAU,kBACtBD,MAAOC,EAAU,2BA3BjB,IADS0G,EACNC,EAjDKnB,EACLC,EAAYC,EAAyBC,EArC/BP,EACNC,EArIQb,EACRpF,CA0RH"}
@@ -1,2 +1,2 @@
1
- import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import r,{forwardRef as o,useRef as n,useState as a,useEffect as l}from"react";import i from"classnames";import u from"../../hooks/useMergeRef.js";import s from"./EditableTypography.module.scss.js";import{keyCodes as c}from"../../constants/keyCodes.js";import"../../constants/sizes.js";import{useKeyboardButtonPressedFunc as d}from"../../hooks/useKeyboardButtonPressedFunc.js";import p from"../../hooks/usePrevious/index.js";var f=o((function(o,f){var m=o.id,h=o.className,v=o["data-testid"],y=o.value,g=o.onChange,b=o.onClick,E=o.readOnly,w=void 0!==E&&E,C=o.ariaLabel,x=void 0===C?"":C,k=o.placeholder,j=o.clearable,B=o.typographyClassName,F=o.component,N=o.isEditMode,P=o.autoSelectTextOnEditMode,T=o.onEditModeChange,K=o.tooltipProps,M=o.type,D=o.weight,R=o.multiline,S=void 0!==R&&R,A=n(null),H=u(f,A),O=a(N||!1),W=e(O,2),_=W[0],q=W[1],z=a(y),I=e(z,2),L=I[0],G=I[1],J=a(0),Q=e(J,2),U=Q[0],V=Q[1],X=a(0),Y=e(X,2),Z=Y[0],$=Y[1],ee=n(0),te=n(0),re=p(y),oe=n(null),ne=n(null);function ae(e){w||_||(e.preventDefault(),le(!0))}function le(e){null==T||T(e),q(e)}function ie(){(le(!1),y!==L)&&(L||j&&k?(G(L),null==g||g(L)):G(y))}function ue(){ie()}function se(e){if(e.key===c.ENTER){if(S&&e.shiftKey)return;ie()}e.key===c.ESCAPE&&(le(!1),G(y))}function ce(e){G(e.target.value),S&&fe()}l((function(){_||y===re||y===L||G(y)}),[re,_,y,L]),l((function(){q(N)}),[N]);var de=d(ae);function pe(){var e,t;if(null===(t=null===(e=oe.current)||void 0===e?void 0:e.focus)||void 0===t||t.call(e),oe.current){var r=oe.current,o=r.value.length;r.setSelectionRange(o,o)}S&&function(){if(S&&oe.current){var e=oe.current;if(!e)return;var t=window.getComputedStyle(e),r=parseFloat(t.lineHeight)||16,o=parseFloat(t.paddingTop)||0,n=parseFloat(t.paddingBottom)||0,a=parseFloat(t.borderTopWidth)||0,l=parseFloat(t.borderBottomWidth)||0;te.current=r,ee.current=o+n+a+l,fe()}}()}function fe(){oe.current&&($("auto"),requestAnimationFrame((function(){var e=oe.current;e&&$(Math.max(e.scrollHeight+ee.current,te.current+ee.current))})))}return l((function(){var e,t;_&&(pe(),P&&(null===(t=null===(e=oe.current)||void 0===e?void 0:e.select)||void 0===t||t.call(e)))}),[P,_]),l((function(){if(ne.current){var e=ne.current.getBoundingClientRect();V(e.width)}}),[L,_]),r.createElement("div",{ref:H,id:m,"aria-label":x,"data-testid":v,className:i(s.editableTypography,h),role:_?null:"button",onClick:function(e){null==b||b(e),ae(e)},onKeyDown:de},_&&(S?r.createElement("textarea",{ref:oe,className:i(s.textarea,B),value:L,onChange:ce,onKeyDown:se,onBlur:ue,"aria-label":x,placeholder:k,style:{width:U,height:Z},role:"textbox",rows:1}):r.createElement("input",{ref:oe,className:i(s.input,B),value:L,onChange:ce,onKeyDown:se,onBlur:ue,"aria-label":x,placeholder:k,style:{width:U},role:"input"})),r.createElement(F,{ref:ne,"aria-hidden":_,className:i(s.typography,B,t(t(t(t({},s.hidden,_),s.disabled,w),s.placeholder,!L&&k),s.multiline,!_&&S)),tabIndex:0,tooltipProps:K,weight:D,type:M,ellipsis:!S},L||k))}));export{f as default};
1
+ import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import r,{forwardRef as o,useRef as n,useState as a,useEffect as l}from"react";import i from"classnames";import u from"../../hooks/useMergeRef.js";import s from"./EditableTypography.module.scss.js";import{keyCodes as c}from"../../constants/keyCodes.js";import"../../constants/sizes.js";import{useKeyboardButtonPressedFunc as d}from"../../hooks/useKeyboardButtonPressedFunc.js";import p from"../../hooks/usePrevious/index.js";var f=o((function(o,f){var m=o.id,h=o.className,v=o["data-testid"],g=o.value,y=o.onChange,b=o.onClick,E=o.readOnly,w=void 0!==E&&E,C=o.ariaLabel,x=void 0===C?"":C,P=o.placeholder,k=o.clearable,j=o.typographyClassName,B=o.component,F=o.isEditMode,N=o.autoSelectTextOnEditMode,T=o.onEditModeChange,D=o.tooltipProps,K=o.type,M=o.weight,R=o.multiline,S=void 0!==R&&R,A=n(null),H=u(f,A),O=a(F||!1),W=e(O,2),_=W[0],q=W[1],z=a(g),I=e(z,2),L=I[0],G=I[1],J=a(0),Q=e(J,2),U=Q[0],V=Q[1],X=a(0),Y=e(X,2),Z=Y[0],$=Y[1],ee=n(0),te=n(0),re=p(g),oe=n(null),ne=n(null);function ae(e){w||_||(e.preventDefault(),le(!0))}function le(e){null==T||T(e),q(e)}function ie(){(le(!1),g!==L)&&(L||k&&P?(G(L),null==y||y(L)):G(g))}function ue(){ie()}function se(e){if(e.key===c.ENTER){if(S&&e.shiftKey)return;e.preventDefault(),e.stopPropagation(),ie()}e.key===c.ESCAPE&&(e.preventDefault(),e.stopPropagation(),le(!1),G(g))}function ce(e){G(e.target.value),S&&fe()}l((function(){_||g===re||g===L||G(g)}),[re,_,g,L]),l((function(){q(F)}),[F]);var de=d(ae);function pe(){var e,t;if(null===(t=null===(e=oe.current)||void 0===e?void 0:e.focus)||void 0===t||t.call(e),oe.current){var r=oe.current,o=r.value.length;r.setSelectionRange(o,o)}S&&function(){if(S&&oe.current){var e=oe.current;if(!e)return;var t=window.getComputedStyle(e),r=parseFloat(t.lineHeight)||16,o=parseFloat(t.paddingTop)||0,n=parseFloat(t.paddingBottom)||0,a=parseFloat(t.borderTopWidth)||0,l=parseFloat(t.borderBottomWidth)||0;te.current=r,ee.current=o+n+a+l,fe()}}()}function fe(){oe.current&&($("auto"),requestAnimationFrame((function(){var e=oe.current;e&&$(Math.max(e.scrollHeight+ee.current,te.current+ee.current))})))}return l((function(){var e,t;_&&(pe(),N&&(null===(t=null===(e=oe.current)||void 0===e?void 0:e.select)||void 0===t||t.call(e)))}),[N,_]),l((function(){if(ne.current){var e=ne.current.getBoundingClientRect();V(e.width)}}),[L,_]),r.createElement("div",{ref:H,id:m,"aria-label":x,"data-testid":v,className:i(s.editableTypography,h),role:_?null:"button",onClick:function(e){null==b||b(e),ae(e)},onKeyDown:de},_&&(S?r.createElement("textarea",{ref:oe,className:i(s.textarea,j),value:L,onChange:ce,onKeyDown:se,onBlur:ue,"aria-label":x,placeholder:P,style:{width:U,height:Z},role:"textbox",rows:1}):r.createElement("input",{ref:oe,className:i(s.input,j),value:L,onChange:ce,onKeyDown:se,onBlur:ue,"aria-label":x,placeholder:P,style:{width:U},role:"input"})),r.createElement(B,{ref:ne,"aria-hidden":_,className:i(s.typography,j,t(t(t(t({},s.hidden,_),s.disabled,w),s.placeholder,!L&&P),s.multiline,!_&&S)),tabIndex:0,tooltipProps:D,weight:M,type:K,ellipsis:!S},L||P))}));export{f as default};
2
2
  //# sourceMappingURL=EditableTypography.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"EditableTypography.js","sources":["../../../../src/components/EditableTypography/EditableTypography.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, useEffect, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport VibeComponentProps from \"../../types/VibeComponentProps\";\nimport VibeComponent from \"../../types/VibeComponent\";\nimport styles from \"./EditableTypography.module.scss\";\nimport { keyCodes } from \"../../constants\";\nimport { useKeyboardButtonPressedFunc } from \"../../hooks/useKeyboardButtonPressedFunc\";\nimport { TooltipProps } from \"../Tooltip/Tooltip\";\nimport usePrevious from \"../../hooks/usePrevious\";\nimport { TextType, TextWeight } from \"../Text/Text.types\";\nimport { HeadingType, HeadingWeight } from \"../Heading/Heading.types\";\n\nexport interface EditableTypographyImplementationProps {\n /** Value of the text */\n value: string;\n /** Will be called whenever the current value changes to a non-empty value */\n onChange?: (value: string) => void;\n /** Will be called whenever the component gets clicked */\n onClick?: (event: React.KeyboardEvent | React.MouseEvent) => void;\n /** Disables editing mode - component will be just a typography element */\n readOnly?: boolean;\n /** Shown in edit mode when the text value is empty */\n placeholder?: string;\n /** ARIA Label */\n ariaLabel?: string;\n /** Controls the mode of the component (i.e. view/edit mode) */\n isEditMode?: boolean;\n /** If true, automatically select all text when entering edit mode */\n autoSelectTextOnEditMode?: boolean;\n /** Will be called when the mode of the component changes */\n onEditModeChange?: (isEditMode: boolean) => void;\n /** Override Tooltip props when needed */\n tooltipProps?: Partial<TooltipProps>;\n}\n\nexport interface EditableTypographyProps extends VibeComponentProps, EditableTypographyImplementationProps {\n /** A typography component that is being rendered in view mode */\n component: ElementType;\n /** Controls the style of the typography component in view mode */\n typographyClassName: string;\n /** Shows placeholder when empty, if provided */\n clearable?: boolean;\n /** Sets the Text/Heading type */\n type?: TextType | HeadingType;\n /** Sets the Text/Heading weight */\n weight?: TextWeight | HeadingWeight;\n /** Controls whether a textarea or a simple input would be rendered, allowing multi-lines */\n multiline?: boolean;\n}\n\nconst EditableTypography: VibeComponent<EditableTypographyProps, HTMLElement> = forwardRef(\n (\n {\n id,\n className,\n \"data-testid\": dataTestId,\n value,\n onChange,\n onClick,\n readOnly = false,\n ariaLabel = \"\",\n placeholder,\n clearable,\n typographyClassName,\n component: TypographyComponent,\n isEditMode,\n autoSelectTextOnEditMode,\n onEditModeChange,\n tooltipProps,\n type,\n weight,\n multiline = false\n }: EditableTypographyProps,\n ref\n ) => {\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n\n const [isEditing, setIsEditing] = useState(isEditMode || false);\n const [inputValue, setInputValue] = useState(value);\n const [inputWidth, setInputWidth] = useState(0);\n const [inputHeight, setInputHeight] = useState<number | string>(0);\n const textareaBorderBoxSizing = useRef(0);\n const textareaLineHeight = useRef(0);\n\n const prevValue = usePrevious(value);\n\n const inputRef = useRef(null);\n const typographyRef = useRef(null);\n\n useEffect(() => {\n if (!isEditing && value !== prevValue && value !== inputValue) {\n setInputValue(value);\n }\n }, [prevValue, isEditing, value, inputValue]);\n\n useEffect(() => {\n setIsEditing(isEditMode);\n }, [isEditMode]);\n\n function onTypographyClick(event: React.KeyboardEvent | React.MouseEvent) {\n onClick?.(event);\n toggleEditMode(event);\n }\n\n function toggleEditMode(event: React.KeyboardEvent | React.MouseEvent) {\n if (readOnly || isEditing) {\n return;\n }\n event.preventDefault();\n handleEditModeChange(true);\n }\n\n function handleEditModeChange(value: boolean) {\n onEditModeChange?.(value);\n setIsEditing(value);\n }\n\n function handleInputValueChange() {\n handleEditModeChange(false);\n\n if (value === inputValue) {\n return;\n }\n\n const shouldShowPlaceholderWhenEmpty = clearable && placeholder;\n if (!inputValue && !shouldShowPlaceholderWhenEmpty) {\n setInputValue(value);\n return;\n }\n setInputValue(inputValue);\n onChange?.(inputValue);\n }\n\n function handleBlur() {\n handleInputValueChange();\n }\n\n function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) {\n if (event.key === keyCodes.ENTER) {\n if (multiline && event.shiftKey) {\n return;\n }\n\n handleInputValueChange();\n }\n if (event.key === keyCodes.ESCAPE) {\n handleEditModeChange(false);\n setInputValue(value);\n }\n }\n\n function handleChange(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {\n setInputValue(event.target.value);\n\n if (multiline) {\n resizeTextarea();\n }\n }\n\n const toggleKeyboardEditMode = useKeyboardButtonPressedFunc(toggleEditMode);\n\n function focus() {\n inputRef.current?.focus?.();\n\n if (inputRef.current) {\n const inputElement = inputRef.current as HTMLInputElement | HTMLTextAreaElement;\n const textLength = inputElement.value.length;\n inputElement.setSelectionRange(textLength, textLength);\n }\n\n if (multiline) {\n calculateTextareaHeightAttrs();\n }\n }\n\n /* Dynamically resizes the textarea to fit its content */\n function resizeTextarea() {\n if (inputRef.current) {\n // Temporarily set the height to \"auto\" to accurately measure the scroll height of the content inside the textarea.\n setInputHeight(\"auto\");\n\n requestAnimationFrame(() => {\n const textarea = inputRef.current as HTMLTextAreaElement;\n\n if (!textarea) {\n return;\n }\n\n // Ensure we at least have 1 line\n setInputHeight(\n Math.max(\n textarea.scrollHeight + textareaBorderBoxSizing.current,\n textareaLineHeight.current + textareaBorderBoxSizing.current\n )\n );\n });\n }\n }\n\n function selectAllInputText() {\n inputRef.current?.select?.();\n }\n\n useEffect(() => {\n if (!isEditing) return;\n focus();\n if (autoSelectTextOnEditMode) {\n selectAllInputText();\n }\n }, [autoSelectTextOnEditMode, isEditing]);\n\n useEffect(() => {\n if (!typographyRef.current) {\n return;\n }\n\n const { width } = typographyRef.current.getBoundingClientRect();\n setInputWidth(width);\n }, [inputValue, isEditing]);\n\n /* Calculate the minimual textarea height, taking its applied styles (padding, border width) into consideration \n This is done only on focus, so that we don't need to get the computed style every time.\n */\n function calculateTextareaHeightAttrs() {\n if (multiline && inputRef.current) {\n const textarea = inputRef.current as HTMLTextAreaElement;\n\n if (!textarea) {\n return;\n }\n\n const computedStyle = window.getComputedStyle(textarea);\n\n // Calculate the appropriate height by taking into account the scrollable content inside the textarea,\n // as well as the styles applied to it, such as padding and border widths.\n const lineHeight = parseFloat(computedStyle.lineHeight) || 16;\n const paddingTop = parseFloat(computedStyle.paddingTop) || 0;\n const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;\n const borderTopWidth = parseFloat(computedStyle.borderTopWidth) || 0;\n const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth) || 0;\n\n textareaLineHeight.current = lineHeight;\n textareaBorderBoxSizing.current = paddingTop + paddingBottom + borderTopWidth + borderBottomWidth;\n resizeTextarea();\n }\n }\n\n return (\n <div\n ref={mergedRef}\n id={id}\n aria-label={ariaLabel}\n data-testid={dataTestId}\n className={cx(styles.editableTypography, className)}\n role={isEditing ? null : \"button\"}\n onClick={onTypographyClick}\n onKeyDown={toggleKeyboardEditMode}\n >\n {isEditing &&\n (multiline ? (\n <textarea\n ref={inputRef}\n className={cx(styles.textarea, typographyClassName)}\n value={inputValue}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n aria-label={ariaLabel}\n placeholder={placeholder}\n style={{ width: inputWidth, height: inputHeight }}\n role=\"textbox\"\n rows={1}\n />\n ) : (\n <input\n ref={inputRef}\n className={cx(styles.input, typographyClassName)}\n value={inputValue}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n aria-label={ariaLabel}\n placeholder={placeholder}\n style={{ width: inputWidth }}\n role=\"input\"\n />\n ))}\n <TypographyComponent\n ref={typographyRef}\n aria-hidden={isEditing}\n className={cx(styles.typography, typographyClassName, {\n [styles.hidden]: isEditing,\n [styles.disabled]: readOnly,\n [styles.placeholder]: !inputValue && placeholder,\n [styles.multiline]: !isEditing && multiline\n })}\n tabIndex={0}\n tooltipProps={tooltipProps}\n weight={weight}\n type={type}\n ellipsis={!multiline}\n >\n {inputValue || placeholder}\n </TypographyComponent>\n </div>\n );\n }\n);\n\nexport default EditableTypography;\n"],"names":["EditableTypography","forwardRef","_ref","ref","id","className","dataTestId","value","onChange","onClick","_ref$readOnly","readOnly","_ref$ariaLabel","ariaLabel","placeholder","clearable","typographyClassName","TypographyComponent","component","isEditMode","autoSelectTextOnEditMode","onEditModeChange","tooltipProps","type","weight","_ref$multiline","multiline","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","isEditing","setIsEditing","_useState3","_useState4","inputValue","setInputValue","_useState5","_useState6","inputWidth","setInputWidth","_useState7","_useState8","inputHeight","setInputHeight","textareaBorderBoxSizing","textareaLineHeight","prevValue","usePrevious","inputRef","typographyRef","toggleEditMode","event","preventDefault","handleEditModeChange","handleInputValueChange","handleBlur","handleKeyDown","key","keyCodes","ENTER","shiftKey","ESCAPE","handleChange","target","resizeTextarea","useEffect","toggleKeyboardEditMode","useKeyboardButtonPressedFunc","focus","_b","current","_a","inputElement","textLength","length","setSelectionRange","textarea","computedStyle","window","getComputedStyle","lineHeight","parseFloat","paddingTop","paddingBottom","borderTopWidth","borderBottomWidth","calculateTextareaHeightAttrs","requestAnimationFrame","Math","max","scrollHeight","select","_typographyRef$curren","getBoundingClientRect","width","React","createElement","cx","styles","editableTypography","role","onKeyDown","onBlur","style","height","rows","input","typography","_defineProperty","hidden","disabled","tabIndex","ellipsis"],"mappings":"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"}
1
+ {"version":3,"file":"EditableTypography.js","sources":["../../../../src/components/EditableTypography/EditableTypography.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, useEffect, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport VibeComponentProps from \"../../types/VibeComponentProps\";\nimport VibeComponent from \"../../types/VibeComponent\";\nimport styles from \"./EditableTypography.module.scss\";\nimport { keyCodes } from \"../../constants\";\nimport { useKeyboardButtonPressedFunc } from \"../../hooks/useKeyboardButtonPressedFunc\";\nimport { TooltipProps } from \"../Tooltip/Tooltip\";\nimport usePrevious from \"../../hooks/usePrevious\";\nimport { TextType, TextWeight } from \"../Text/Text.types\";\nimport { HeadingType, HeadingWeight } from \"../Heading/Heading.types\";\n\nexport interface EditableTypographyImplementationProps {\n /** Value of the text */\n value: string;\n /** Will be called whenever the current value changes to a non-empty value */\n onChange?: (value: string) => void;\n /** Will be called whenever the component gets clicked */\n onClick?: (event: React.KeyboardEvent | React.MouseEvent) => void;\n /** Disables editing mode - component will be just a typography element */\n readOnly?: boolean;\n /** Shown in edit mode when the text value is empty */\n placeholder?: string;\n /** ARIA Label */\n ariaLabel?: string;\n /** Controls the mode of the component (i.e. view/edit mode) */\n isEditMode?: boolean;\n /** If true, automatically select all text when entering edit mode */\n autoSelectTextOnEditMode?: boolean;\n /** Will be called when the mode of the component changes */\n onEditModeChange?: (isEditMode: boolean) => void;\n /** Override Tooltip props when needed */\n tooltipProps?: Partial<TooltipProps>;\n}\n\nexport interface EditableTypographyProps extends VibeComponentProps, EditableTypographyImplementationProps {\n /** A typography component that is being rendered in view mode */\n component: ElementType;\n /** Controls the style of the typography component in view mode */\n typographyClassName: string;\n /** Shows placeholder when empty, if provided */\n clearable?: boolean;\n /** Sets the Text/Heading type */\n type?: TextType | HeadingType;\n /** Sets the Text/Heading weight */\n weight?: TextWeight | HeadingWeight;\n /** Controls whether a textarea or a simple input would be rendered, allowing multi-lines */\n multiline?: boolean;\n}\n\nconst EditableTypography: VibeComponent<EditableTypographyProps, HTMLElement> = forwardRef(\n (\n {\n id,\n className,\n \"data-testid\": dataTestId,\n value,\n onChange,\n onClick,\n readOnly = false,\n ariaLabel = \"\",\n placeholder,\n clearable,\n typographyClassName,\n component: TypographyComponent,\n isEditMode,\n autoSelectTextOnEditMode,\n onEditModeChange,\n tooltipProps,\n type,\n weight,\n multiline = false\n }: EditableTypographyProps,\n ref\n ) => {\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n\n const [isEditing, setIsEditing] = useState(isEditMode || false);\n const [inputValue, setInputValue] = useState(value);\n const [inputWidth, setInputWidth] = useState(0);\n const [inputHeight, setInputHeight] = useState<number | string>(0);\n const textareaBorderBoxSizing = useRef(0);\n const textareaLineHeight = useRef(0);\n\n const prevValue = usePrevious(value);\n\n const inputRef = useRef(null);\n const typographyRef = useRef(null);\n\n useEffect(() => {\n if (!isEditing && value !== prevValue && value !== inputValue) {\n setInputValue(value);\n }\n }, [prevValue, isEditing, value, inputValue]);\n\n useEffect(() => {\n setIsEditing(isEditMode);\n }, [isEditMode]);\n\n function onTypographyClick(event: React.KeyboardEvent | React.MouseEvent) {\n onClick?.(event);\n toggleEditMode(event);\n }\n\n function toggleEditMode(event: React.KeyboardEvent | React.MouseEvent) {\n if (readOnly || isEditing) {\n return;\n }\n event.preventDefault();\n handleEditModeChange(true);\n }\n\n function handleEditModeChange(value: boolean) {\n onEditModeChange?.(value);\n setIsEditing(value);\n }\n\n function handleInputValueChange() {\n handleEditModeChange(false);\n\n if (value === inputValue) {\n return;\n }\n\n const shouldShowPlaceholderWhenEmpty = clearable && placeholder;\n if (!inputValue && !shouldShowPlaceholderWhenEmpty) {\n setInputValue(value);\n return;\n }\n setInputValue(inputValue);\n onChange?.(inputValue);\n }\n\n function handleBlur() {\n handleInputValueChange();\n }\n\n function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) {\n if (event.key === keyCodes.ENTER) {\n if (multiline && event.shiftKey) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n handleInputValueChange();\n }\n if (event.key === keyCodes.ESCAPE) {\n event.preventDefault();\n event.stopPropagation();\n handleEditModeChange(false);\n setInputValue(value);\n }\n }\n\n function handleChange(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {\n setInputValue(event.target.value);\n\n if (multiline) {\n resizeTextarea();\n }\n }\n\n const toggleKeyboardEditMode = useKeyboardButtonPressedFunc(toggleEditMode);\n\n function focus() {\n inputRef.current?.focus?.();\n\n if (inputRef.current) {\n const inputElement = inputRef.current as HTMLInputElement | HTMLTextAreaElement;\n const textLength = inputElement.value.length;\n inputElement.setSelectionRange(textLength, textLength);\n }\n\n if (multiline) {\n calculateTextareaHeightAttrs();\n }\n }\n\n /* Dynamically resizes the textarea to fit its content */\n function resizeTextarea() {\n if (inputRef.current) {\n // Temporarily set the height to \"auto\" to accurately measure the scroll height of the content inside the textarea.\n setInputHeight(\"auto\");\n\n requestAnimationFrame(() => {\n const textarea = inputRef.current as HTMLTextAreaElement;\n\n if (!textarea) {\n return;\n }\n\n // Ensure we at least have 1 line\n setInputHeight(\n Math.max(\n textarea.scrollHeight + textareaBorderBoxSizing.current,\n textareaLineHeight.current + textareaBorderBoxSizing.current\n )\n );\n });\n }\n }\n\n function selectAllInputText() {\n inputRef.current?.select?.();\n }\n\n useEffect(() => {\n if (!isEditing) return;\n focus();\n if (autoSelectTextOnEditMode) {\n selectAllInputText();\n }\n }, [autoSelectTextOnEditMode, isEditing]);\n\n useEffect(() => {\n if (!typographyRef.current) {\n return;\n }\n\n const { width } = typographyRef.current.getBoundingClientRect();\n setInputWidth(width);\n }, [inputValue, isEditing]);\n\n /* Calculate the minimual textarea height, taking its applied styles (padding, border width) into consideration \n This is done only on focus, so that we don't need to get the computed style every time.\n */\n function calculateTextareaHeightAttrs() {\n if (multiline && inputRef.current) {\n const textarea = inputRef.current as HTMLTextAreaElement;\n\n if (!textarea) {\n return;\n }\n\n const computedStyle = window.getComputedStyle(textarea);\n\n // Calculate the appropriate height by taking into account the scrollable content inside the textarea,\n // as well as the styles applied to it, such as padding and border widths.\n const lineHeight = parseFloat(computedStyle.lineHeight) || 16;\n const paddingTop = parseFloat(computedStyle.paddingTop) || 0;\n const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;\n const borderTopWidth = parseFloat(computedStyle.borderTopWidth) || 0;\n const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth) || 0;\n\n textareaLineHeight.current = lineHeight;\n textareaBorderBoxSizing.current = paddingTop + paddingBottom + borderTopWidth + borderBottomWidth;\n resizeTextarea();\n }\n }\n\n return (\n <div\n ref={mergedRef}\n id={id}\n aria-label={ariaLabel}\n data-testid={dataTestId}\n className={cx(styles.editableTypography, className)}\n role={isEditing ? null : \"button\"}\n onClick={onTypographyClick}\n onKeyDown={toggleKeyboardEditMode}\n >\n {isEditing &&\n (multiline ? (\n <textarea\n ref={inputRef}\n className={cx(styles.textarea, typographyClassName)}\n value={inputValue}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n aria-label={ariaLabel}\n placeholder={placeholder}\n style={{ width: inputWidth, height: inputHeight }}\n role=\"textbox\"\n rows={1}\n />\n ) : (\n <input\n ref={inputRef}\n className={cx(styles.input, typographyClassName)}\n value={inputValue}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n aria-label={ariaLabel}\n placeholder={placeholder}\n style={{ width: inputWidth }}\n role=\"input\"\n />\n ))}\n <TypographyComponent\n ref={typographyRef}\n aria-hidden={isEditing}\n className={cx(styles.typography, typographyClassName, {\n [styles.hidden]: isEditing,\n [styles.disabled]: readOnly,\n [styles.placeholder]: !inputValue && placeholder,\n [styles.multiline]: !isEditing && multiline\n })}\n tabIndex={0}\n tooltipProps={tooltipProps}\n weight={weight}\n type={type}\n ellipsis={!multiline}\n >\n {inputValue || placeholder}\n </TypographyComponent>\n </div>\n );\n }\n);\n\nexport default EditableTypography;\n"],"names":["EditableTypography","forwardRef","_ref","ref","id","className","dataTestId","value","onChange","onClick","_ref$readOnly","readOnly","_ref$ariaLabel","ariaLabel","placeholder","clearable","typographyClassName","TypographyComponent","component","isEditMode","autoSelectTextOnEditMode","onEditModeChange","tooltipProps","type","weight","_ref$multiline","multiline","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","isEditing","setIsEditing","_useState3","_useState4","inputValue","setInputValue","_useState5","_useState6","inputWidth","setInputWidth","_useState7","_useState8","inputHeight","setInputHeight","textareaBorderBoxSizing","textareaLineHeight","prevValue","usePrevious","inputRef","typographyRef","toggleEditMode","event","preventDefault","handleEditModeChange","handleInputValueChange","handleBlur","handleKeyDown","key","keyCodes","ENTER","shiftKey","stopPropagation","ESCAPE","handleChange","target","resizeTextarea","useEffect","toggleKeyboardEditMode","useKeyboardButtonPressedFunc","focus","_b","current","_a","inputElement","textLength","length","setSelectionRange","textarea","computedStyle","window","getComputedStyle","lineHeight","parseFloat","paddingTop","paddingBottom","borderTopWidth","borderBottomWidth","calculateTextareaHeightAttrs","requestAnimationFrame","Math","max","scrollHeight","select","_typographyRef$curren","getBoundingClientRect","width","React","createElement","cx","styles","editableTypography","role","onKeyDown","onBlur","style","height","rows","input","typography","_defineProperty","hidden","disabled","tabIndex","ellipsis"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{slicedToArray as e,defineProperty as t}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import r,{forwardRef as o,useRef as a,useState as i,useCallback as s,useMemo as n}from"react";import l from"classnames";import{RemoveScroll as m}from"react-remove-scroll";import c from"react-focus-lock";import{AnimatePresence as d,motion as u}from"framer-motion";import{getTestId as f}from"../../../tests/testIds.js";import{ComponentDefaultTestId as p}from"../../../tests/constants.js";import v from"./Modal.module.scss.js";import y from"../ModalTopActions/ModalTopActions.js";import{getStyle as E}from"../../../helpers/typesciptCssModulesHelper.js";import{camelCase as j}from"lodash-es";import{ModalProvider as A}from"../context/ModalContext.js";import b from"../../../hooks/useKeyEvent/index.js";import{keyCodes as h}from"../../../constants/keyCodes.js";import"../../../constants/sizes.js";import{modalAnimationAnchorPopVariants as x,modalAnimationCenterPopVariants as T,modalAnimationOverlayVariants as M}from"../utils/animationVariants.js";import{createPortal as P}from"react-dom";import g from"../hooks/usePortalTarget/usePortalTarget.js";import k from"../../LayerProvider/LayerProvider.js";var C=o((function(o,C){var L=o.id,z=o.show,I=o.size,N=void 0===I?"medium":I,O=o.renderHeaderAction,_=o.closeButtonTheme,B=o.closeButtonAriaLabel,H=o.onClose,w=void 0===H?function(){}:H,D=o.anchorElementRef,R=o.alertModal,F=o.container,V=void 0===F?document.body:F,X=o.children,K=o.style,S=o.zIndex,Y=o.className,q=o["data-testid"],G=g(V),J=a(null),Q=i(),U=e(Q,2),W=U[0],Z=U[1],$=i(),ee=e($,2),te=ee[0],re=ee[1],oe=s((function(e){return Z(e)}),[]),ae=s((function(e){return re(e)}),[]),ie=n((function(){return{modalId:L,setTitleId:oe,setDescriptionId:ae}}),[L,oe,ae]),se=s((function(e){z&&!R&&w(e)}),[z,R,w]),ne=s((function(e){z&&!R&&w(e)}),[R,z,w]);b({callback:ne,capture:!0,keys:[h.ESCAPE]});var le=(null==D?void 0:D.current)?x:T,me=S?{"--monday-modal-z-index":S}:{},ce=Object.assign(Object.assign({},me),K);return r.createElement(d,null,z&&r.createElement(k,{layerRef:J},r.createElement(A,{value:ie},P(r.createElement(r.Fragment,null,r.createElement(u.div,{ref:J,variants:M,initial:"initial",animate:"enter",exit:"exit","data-testid":f(p.MODAL_NEXT_OVERLAY,L),className:v.overlay,onClick:se,"aria-hidden":!0,style:me}),r.createElement(c,{returnFocus:!0},r.createElement(m,{forwardProps:!0},r.createElement(u.div,{variants:le,initial:"exit",animate:"enter",exit:"exit",custom:D,ref:C,className:l(v.modal,E(v,j("size-"+N)),t({},v.withHeaderAction,!!O),Y),id:L,"data-testid":q||f(p.MODAL_NEXT,L),role:"dialog","aria-modal":!0,"aria-labelledby":W,"aria-describedby":te,style:ce},X,r.createElement(y,{renderAction:O,theme:_,closeButtonAriaLabel:B,onClose:w}))))),G))))}));export{C as default};
1
+ import{slicedToArray as e,defineProperty as t}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import r,{forwardRef as o,useRef as a,useState as i,useCallback as s,useMemo as n}from"react";import l from"classnames";import{RemoveScroll as m}from"react-remove-scroll";import c from"react-focus-lock";import{AnimatePresence as d,motion as u}from"framer-motion";import{getTestId as f}from"../../../tests/testIds.js";import{ComponentDefaultTestId as p}from"../../../tests/constants.js";import v from"./Modal.module.scss.js";import y from"../ModalTopActions/ModalTopActions.js";import{getStyle as E}from"../../../helpers/typesciptCssModulesHelper.js";import{camelCase as j}from"lodash-es";import{ModalProvider as A}from"../context/ModalContext.js";import b from"../../../hooks/useKeyEvent/index.js";import{keyCodes as h}from"../../../constants/keyCodes.js";import"../../../constants/sizes.js";import{modalAnimationAnchorPopVariants as x,modalAnimationCenterPopVariants as T,modalAnimationOverlayVariants as M}from"../utils/animationVariants.js";import{createPortal as P}from"react-dom";import g from"../hooks/usePortalTarget/usePortalTarget.js";import k from"../../LayerProvider/LayerProvider.js";var C=c.default||c,L=o((function(o,c){var L=o.id,z=o.show,I=o.size,N=void 0===I?"medium":I,O=o.renderHeaderAction,_=o.closeButtonTheme,B=o.closeButtonAriaLabel,H=o.onClose,w=void 0===H?function(){}:H,D=o.anchorElementRef,R=o.alertModal,F=o.container,V=void 0===F?document.body:F,X=o.children,K=o.style,S=o.zIndex,Y=o.className,q=o["data-testid"],G=g(V),J=a(null),Q=i(),U=e(Q,2),W=U[0],Z=U[1],$=i(),ee=e($,2),te=ee[0],re=ee[1],oe=s((function(e){return Z(e)}),[]),ae=s((function(e){return re(e)}),[]),ie=n((function(){return{modalId:L,setTitleId:oe,setDescriptionId:ae}}),[L,oe,ae]),se=s((function(e){z&&!R&&w(e)}),[z,R,w]),ne=s((function(e){z&&!R&&w(e)}),[R,z,w]);b({callback:ne,capture:!0,keys:[h.ESCAPE]});var le=(null==D?void 0:D.current)?x:T,me=S?{"--monday-modal-z-index":S}:{},ce=Object.assign(Object.assign({},me),K);return r.createElement(d,null,z&&r.createElement(k,{layerRef:J},r.createElement(A,{value:ie},P(r.createElement(r.Fragment,null,r.createElement(u.div,{ref:J,variants:M,initial:"initial",animate:"enter",exit:"exit","data-testid":f(p.MODAL_NEXT_OVERLAY,L),className:v.overlay,onClick:se,"aria-hidden":!0,style:me}),r.createElement(C,{returnFocus:!0},r.createElement(m,{forwardProps:!0},r.createElement(u.div,{variants:le,initial:"exit",animate:"enter",exit:"exit",custom:D,ref:c,className:l(v.modal,E(v,j("size-"+N)),t({},v.withHeaderAction,!!O),Y),id:L,"data-testid":q||f(p.MODAL_NEXT,L),role:"dialog","aria-modal":!0,"aria-labelledby":W,"aria-describedby":te,style:ce},X,r.createElement(y,{renderAction:O,theme:_,closeButtonAriaLabel:B,onClose:w}))))),G))))}));export{L as default};
2
2
  //# sourceMappingURL=Modal.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.js","sources":["../../../../../src/components/Modal/Modal/Modal.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport FocusLock from \"react-focus-lock\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport styles from \"./Modal.module.scss\";\nimport { ModalProps } from \"./Modal.types\";\nimport ModalTopActions from \"../ModalTopActions/ModalTopActions\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport { camelCase } from \"lodash-es\";\nimport { ModalProvider } from \"../context/ModalContext\";\nimport { ModalProviderValue } from \"../context/ModalContext.types\";\nimport useKeyEvent from \"../../../hooks/useKeyEvent\";\nimport { keyCodes } from \"../../../constants\";\nimport {\n modalAnimationAnchorPopVariants,\n modalAnimationCenterPopVariants,\n modalAnimationOverlayVariants\n} from \"../utils/animationVariants\";\nimport { createPortal } from \"react-dom\";\nimport usePortalTarget from \"../hooks/usePortalTarget/usePortalTarget\";\nimport { LayerProvider } from \"../../LayerProvider\";\n\nconst Modal = forwardRef(\n (\n {\n id,\n show,\n size = \"medium\",\n renderHeaderAction,\n closeButtonTheme,\n closeButtonAriaLabel,\n onClose = () => {},\n anchorElementRef,\n alertModal,\n container = document.body,\n children,\n style,\n zIndex,\n className,\n \"data-testid\": dataTestId\n }: ModalProps,\n ref: React.ForwardedRef<HTMLDivElement>\n ) => {\n const portalTargetElement = usePortalTarget(container);\n\n const overlayRef = useRef<HTMLDivElement>(null);\n\n const [titleId, setTitleId] = useState<string>();\n const [descriptionId, setDescriptionId] = useState<string>();\n\n const setTitleIdCallback = useCallback((id: string) => setTitleId(id), []);\n const setDescriptionIdCallback = useCallback((id: string) => setDescriptionId(id), []);\n\n const contextValue = useMemo<ModalProviderValue>(\n () => ({\n modalId: id,\n setTitleId: setTitleIdCallback,\n setDescriptionId: setDescriptionIdCallback\n }),\n [id, setTitleIdCallback, setDescriptionIdCallback]\n );\n\n const onBackdropClick = useCallback<React.MouseEventHandler<HTMLDivElement>>(\n e => {\n if (!show || alertModal) return;\n onClose(e);\n },\n [show, alertModal, onClose]\n );\n\n const onEscClick = useCallback<React.KeyboardEventHandler<HTMLBodyElement>>(\n e => {\n if (!show || alertModal) return;\n onClose(e);\n },\n [alertModal, show, onClose]\n );\n\n useKeyEvent({\n callback: onEscClick,\n capture: true,\n keys: [keyCodes.ESCAPE]\n });\n\n const modalAnimationVariants = anchorElementRef?.current\n ? modalAnimationAnchorPopVariants\n : modalAnimationCenterPopVariants;\n\n const zIndexStyle = zIndex ? ({ \"--monday-modal-z-index\": zIndex } as React.CSSProperties) : {};\n const modalStyle = { ...zIndexStyle, ...style };\n\n return (\n <AnimatePresence>\n {show && (\n <LayerProvider layerRef={overlayRef}>\n <ModalProvider value={contextValue}>\n {createPortal(\n <>\n <motion.div\n ref={overlayRef}\n variants={modalAnimationOverlayVariants}\n initial=\"initial\"\n animate=\"enter\"\n exit=\"exit\"\n data-testid={getTestId(ComponentDefaultTestId.MODAL_NEXT_OVERLAY, id)}\n className={styles.overlay}\n onClick={onBackdropClick}\n aria-hidden\n style={zIndexStyle}\n />\n <FocusLock returnFocus>\n <RemoveScroll forwardProps>\n <motion.div\n variants={modalAnimationVariants}\n initial=\"exit\"\n animate=\"enter\"\n exit=\"exit\"\n custom={anchorElementRef}\n ref={ref}\n className={cx(\n styles.modal,\n getStyle(styles, camelCase(\"size-\" + size)),\n { [styles.withHeaderAction]: !!renderHeaderAction },\n className\n )}\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT, id)}\n role=\"dialog\"\n aria-modal\n aria-labelledby={titleId}\n aria-describedby={descriptionId}\n style={modalStyle}\n >\n {children}\n <ModalTopActions\n renderAction={renderHeaderAction}\n theme={closeButtonTheme}\n closeButtonAriaLabel={closeButtonAriaLabel}\n onClose={onClose}\n />\n </motion.div>\n </RemoveScroll>\n </FocusLock>\n </>,\n portalTargetElement\n )}\n </ModalProvider>\n </LayerProvider>\n )}\n </AnimatePresence>\n );\n }\n);\n\nexport default Modal;\n"],"names":["Modal","forwardRef","_ref","ref","id","show","_ref$size","size","renderHeaderAction","closeButtonTheme","closeButtonAriaLabel","_ref$onClose","onClose","anchorElementRef","alertModal","_ref$container","container","document","body","children","style","zIndex","className","dataTestId","portalTargetElement","usePortalTarget","overlayRef","useRef","_useState","useState","_useState2","_slicedToArray","titleId","setTitleId","_useState3","_useState4","descriptionId","setDescriptionId","setTitleIdCallback","useCallback","setDescriptionIdCallback","contextValue","useMemo","modalId","onBackdropClick","e","onEscClick","useKeyEvent","callback","capture","keys","keyCodes","ESCAPE","modalAnimationVariants","current","modalAnimationAnchorPopVariants","modalAnimationCenterPopVariants","zIndexStyle","modalStyle","Object","assign","React","createElement","AnimatePresence","LayerProvider","layerRef","ModalProvider","value","createPortal","Fragment","motion","div","variants","modalAnimationOverlayVariants","initial","animate","exit","getTestId","ComponentDefaultTestId","MODAL_NEXT_OVERLAY","styles","overlay","onClick","FocusLock","returnFocus","RemoveScroll","forwardProps","custom","cx","modal","getStyle","camelCase","_defineProperty","withHeaderAction","MODAL_NEXT","role","ModalTopActions","renderAction","theme"],"mappings":"8qCAyBMA,IAAAA,EAAQC,GACZ,SAAAC,EAkBEC,GACE,IAjBAC,EAAEF,EAAFE,GACAC,EAAIH,EAAJG,KAAIC,EAAAJ,EACJK,KAAAA,OAAO,IAAHD,EAAG,SAAQA,EACfE,EAAkBN,EAAlBM,mBACAC,EAAgBP,EAAhBO,iBACAC,EAAoBR,EAApBQ,qBAAoBC,EAAAT,EACpBU,QAAAA,OAAO,IAAAD,EAAG,WAAQ,EAAAA,EAClBE,EAAgBX,EAAhBW,iBACAC,EAAUZ,EAAVY,WAAUC,EAAAb,EACVc,UAAAA,OAAS,IAAAD,EAAGE,SAASC,KAAIH,EACzBI,EAAQjB,EAARiB,SACAC,EAAKlB,EAALkB,MACAC,EAAMnB,EAANmB,OACAC,EAASpB,EAAToB,UACeC,EAAUrB,EAAzB,eAIIsB,EAAsBC,EAAgBT,GAEtCU,EAAaC,EAAuB,MAE1CC,EAA8BC,IAAkBC,EAAAC,EAAAH,EAAA,GAAzCI,EAAOF,EAAA,GAAEG,EAAUH,EAAA,GAC1BI,EAA0CL,IAAkBM,GAAAJ,EAAAG,EAAA,GAArDE,GAAaD,GAAA,GAAEE,GAAgBF,GAAA,GAEhCG,GAAqBC,GAAY,SAACnC,GAAU,OAAK6B,EAAW7B,EAAG,GAAE,IACjEoC,GAA2BD,GAAY,SAACnC,GAAU,OAAKiC,GAAiBjC,EAAG,GAAE,IAE7EqC,GAAeC,GACnB,WAAA,MAAO,CACLC,QAASvC,EACT6B,WAAYK,GACZD,iBAAkBG,GAClB,GACF,CAACpC,EAAIkC,GAAoBE,KAGrBI,GAAkBL,GACtB,SAAAM,GACOxC,IAAQS,GACbF,EAAQiC,EACT,GACD,CAACxC,EAAMS,EAAYF,IAGfkC,GAAaP,GACjB,SAAAM,GACOxC,IAAQS,GACbF,EAAQiC,EACT,GACD,CAAC/B,EAAYT,EAAMO,IAGrBmC,EAAY,CACVC,SAAUF,GACVG,SAAS,EACTC,KAAM,CAACC,EAASC,UAGlB,IAAMC,IAAyBxC,aAAgB,EAAhBA,EAAkByC,SAC7CC,EACAC,EAEEC,GAAcpC,EAAU,CAAE,yBAA0BA,GAAmC,GACvFqC,GAAkBC,OAAAC,OAAAD,OAAAC,OAAA,GAAAH,IAAgBrC,GAExC,OACEyC,EAAAC,cAACC,EAAe,KACb1D,GACCwD,EAAAC,cAACE,EAAa,CAACC,SAAUvC,GACvBmC,EAAAC,cAACI,EAAc,CAAAC,MAAO1B,IACnB2B,EACCP,EAAAC,cAAAD,EAAAQ,SAAA,KACER,EAACC,cAAAQ,EAAOC,IAAG,CACTpE,IAAKuB,EACL8C,SAAUC,EACVC,QAAQ,UACRC,QAAQ,QACRC,KAAK,qBACQC,EAAUC,EAAuBC,mBAAoB3E,GAClEkB,UAAW0D,EAAOC,QAClBC,QAAStC,GAET,eAAA,EAAAxB,MAAOqC,KAETI,EAACC,cAAAqB,GAAUC,aAAW,GACpBvB,EAACC,cAAAuB,GAAaC,cAAY,GACxBzB,EAAAC,cAACQ,EAAOC,KACNC,SAAUnB,GACVqB,QAAQ,OACRC,QAAQ,QACRC,KAAK,OACLW,OAAQ1E,EACRV,IAAKA,EACLmB,UAAWkE,EACTR,EAAOS,MACPC,EAASV,EAAQW,EAAU,QAAUpF,IAAMqF,EAAA,CAAA,EACxCZ,EAAOa,mBAAqBrF,GAC/Bc,GAEFlB,GAAIA,EAAE,cACOmB,GAAcsD,EAAUC,EAAuBgB,WAAY1F,GACxE2F,KAAK,2CAEY/D,EAAO,mBACNI,GAClBhB,MAAOsC,IAENvC,EACD0C,EAAAC,cAACkC,EAAe,CACdC,aAAczF,EACd0F,MAAOzF,EACPC,qBAAsBA,EACtBE,QAASA,QAMnBY,KAOd"}
1
+ {"version":3,"file":"Modal.js","sources":["../../../../../src/components/Modal/Modal/Modal.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport FocusLock from \"react-focus-lock\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport styles from \"./Modal.module.scss\";\nimport { ModalProps } from \"./Modal.types\";\nimport ModalTopActions from \"../ModalTopActions/ModalTopActions\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport { camelCase } from \"lodash-es\";\nimport { ModalProvider } from \"../context/ModalContext\";\nimport { ModalProviderValue } from \"../context/ModalContext.types\";\nimport useKeyEvent from \"../../../hooks/useKeyEvent\";\nimport { keyCodes } from \"../../../constants\";\nimport {\n modalAnimationAnchorPopVariants,\n modalAnimationCenterPopVariants,\n modalAnimationOverlayVariants\n} from \"../utils/animationVariants\";\nimport { createPortal } from \"react-dom\";\nimport usePortalTarget from \"../hooks/usePortalTarget/usePortalTarget\";\nimport { LayerProvider } from \"../../LayerProvider\";\n\n// @ts-expect-error This is a precaution to support all possible module systems (ESM/CJS)\nconst FocusLockComponent = (FocusLock.default || FocusLock) as typeof FocusLock;\n\nconst Modal = forwardRef(\n (\n {\n id,\n show,\n size = \"medium\",\n renderHeaderAction,\n closeButtonTheme,\n closeButtonAriaLabel,\n onClose = () => {},\n anchorElementRef,\n alertModal,\n container = document.body,\n children,\n style,\n zIndex,\n className,\n \"data-testid\": dataTestId\n }: ModalProps,\n ref: React.ForwardedRef<HTMLDivElement>\n ) => {\n const portalTargetElement = usePortalTarget(container);\n\n const overlayRef = useRef<HTMLDivElement>(null);\n\n const [titleId, setTitleId] = useState<string>();\n const [descriptionId, setDescriptionId] = useState<string>();\n\n const setTitleIdCallback = useCallback((id: string) => setTitleId(id), []);\n const setDescriptionIdCallback = useCallback((id: string) => setDescriptionId(id), []);\n\n const contextValue = useMemo<ModalProviderValue>(\n () => ({\n modalId: id,\n setTitleId: setTitleIdCallback,\n setDescriptionId: setDescriptionIdCallback\n }),\n [id, setTitleIdCallback, setDescriptionIdCallback]\n );\n\n const onBackdropClick = useCallback<React.MouseEventHandler<HTMLDivElement>>(\n e => {\n if (!show || alertModal) return;\n onClose(e);\n },\n [show, alertModal, onClose]\n );\n\n const onEscClick = useCallback<React.KeyboardEventHandler<HTMLBodyElement>>(\n e => {\n if (!show || alertModal) return;\n onClose(e);\n },\n [alertModal, show, onClose]\n );\n\n useKeyEvent({\n callback: onEscClick,\n capture: true,\n keys: [keyCodes.ESCAPE]\n });\n\n const modalAnimationVariants = anchorElementRef?.current\n ? modalAnimationAnchorPopVariants\n : modalAnimationCenterPopVariants;\n\n const zIndexStyle = zIndex ? ({ \"--monday-modal-z-index\": zIndex } as React.CSSProperties) : {};\n const modalStyle = { ...zIndexStyle, ...style };\n\n return (\n <AnimatePresence>\n {show && (\n <LayerProvider layerRef={overlayRef}>\n <ModalProvider value={contextValue}>\n {createPortal(\n <>\n <motion.div\n ref={overlayRef}\n variants={modalAnimationOverlayVariants}\n initial=\"initial\"\n animate=\"enter\"\n exit=\"exit\"\n data-testid={getTestId(ComponentDefaultTestId.MODAL_NEXT_OVERLAY, id)}\n className={styles.overlay}\n onClick={onBackdropClick}\n aria-hidden\n style={zIndexStyle}\n />\n <FocusLockComponent returnFocus>\n <RemoveScroll forwardProps>\n <motion.div\n variants={modalAnimationVariants}\n initial=\"exit\"\n animate=\"enter\"\n exit=\"exit\"\n custom={anchorElementRef}\n ref={ref}\n className={cx(\n styles.modal,\n getStyle(styles, camelCase(\"size-\" + size)),\n { [styles.withHeaderAction]: !!renderHeaderAction },\n className\n )}\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT, id)}\n role=\"dialog\"\n aria-modal\n aria-labelledby={titleId}\n aria-describedby={descriptionId}\n style={modalStyle}\n >\n {children}\n <ModalTopActions\n renderAction={renderHeaderAction}\n theme={closeButtonTheme}\n closeButtonAriaLabel={closeButtonAriaLabel}\n onClose={onClose}\n />\n </motion.div>\n </RemoveScroll>\n </FocusLockComponent>\n </>,\n portalTargetElement\n )}\n </ModalProvider>\n </LayerProvider>\n )}\n </AnimatePresence>\n );\n }\n);\n\nexport default Modal;\n"],"names":["FocusLockComponent","FocusLock","default","Modal","forwardRef","_ref","ref","id","show","_ref$size","size","renderHeaderAction","closeButtonTheme","closeButtonAriaLabel","_ref$onClose","onClose","anchorElementRef","alertModal","_ref$container","container","document","body","children","style","zIndex","className","dataTestId","portalTargetElement","usePortalTarget","overlayRef","useRef","_useState","useState","_useState2","_slicedToArray","titleId","setTitleId","_useState3","_useState4","descriptionId","setDescriptionId","setTitleIdCallback","useCallback","setDescriptionIdCallback","contextValue","useMemo","modalId","onBackdropClick","e","onEscClick","useKeyEvent","callback","capture","keys","keyCodes","ESCAPE","modalAnimationVariants","current","modalAnimationAnchorPopVariants","modalAnimationCenterPopVariants","zIndexStyle","modalStyle","Object","assign","React","createElement","AnimatePresence","LayerProvider","layerRef","ModalProvider","value","createPortal","Fragment","motion","div","variants","modalAnimationOverlayVariants","initial","animate","exit","getTestId","ComponentDefaultTestId","MODAL_NEXT_OVERLAY","styles","overlay","onClick","returnFocus","RemoveScroll","forwardProps","custom","cx","modal","getStyle","camelCase","_defineProperty","withHeaderAction","MODAL_NEXT","role","ModalTopActions","renderAction","theme"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vibe/core",
3
- "version": "3.12.1-alpha-757d9.0",
3
+ "version": "3.12.1",
4
4
  "description": "Official monday.com UI resources for application development in React.js",
5
5
  "repository": {
6
6
  "type": "git",
@@ -92,7 +92,7 @@
92
92
  "monday-ui-style": "0.21.0",
93
93
  "prop-types": "^15.8.1",
94
94
  "react-dates": "21.8.0",
95
- "react-focus-lock": "npm:react-focus-lock-esm-test@^2.13.5-fork.1",
95
+ "react-focus-lock": "^2.13.2",
96
96
  "react-inlinesvg": "^4.1.3",
97
97
  "react-is": "^16.9.0",
98
98
  "react-popper": "^2.3.0",
@@ -268,5 +268,5 @@
268
268
  "browserslist": [
269
269
  "extends browserslist-config-monday"
270
270
  ],
271
- "gitHead": "0726aaa8bb7bc96d1dec21528b924dfa194cb2b4"
271
+ "gitHead": "08ddae3d38695361fdb77fd6ecefc529eaaae771"
272
272
  }