@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.
- package/dist/mocked_classnames/src/components/Dropdown/Dropdown.js +1 -1
- package/dist/mocked_classnames/src/components/Dropdown/Dropdown.js.map +1 -1
- package/dist/mocked_classnames/src/components/Dropdown/Dropdown.styles.js +1 -1
- package/dist/mocked_classnames/src/components/Dropdown/Dropdown.styles.js.map +1 -1
- package/dist/mocked_classnames/src/components/EditableTypography/EditableTypography.js +1 -1
- package/dist/mocked_classnames/src/components/EditableTypography/EditableTypography.js.map +1 -1
- package/dist/mocked_classnames/src/components/Modal/Modal/Modal.js +1 -1
- package/dist/mocked_classnames/src/components/Modal/Modal/Modal.js.map +1 -1
- package/dist/src/components/Dropdown/Dropdown.js +1 -1
- package/dist/src/components/Dropdown/Dropdown.js.map +1 -1
- package/dist/src/components/Dropdown/Dropdown.styles.js +1 -1
- package/dist/src/components/Dropdown/Dropdown.styles.js.map +1 -1
- package/dist/src/components/EditableTypography/EditableTypography.js +1 -1
- package/dist/src/components/EditableTypography/EditableTypography.js.map +1 -1
- package/dist/src/components/Modal/Modal/Modal.js +1 -1
- package/dist/src/components/Modal/Modal/Modal.js.map +1 -1
- package/package.json +3 -3
|
@@ -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:!_
|
|
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":"++CAwCA,IA2beA,EAAAA,EArbXC,GACF,SAAAC,EAyEEC,GACE,IAxEAC,EAASF,EAATE,UACAC,EAAsBH,EAAtBG,uBACAC,EAA2BJ,EAA3BI,4BACAC,EAA4BL,EAA5BK,6BAA4BC,EAAAN,EAC5BO,YAAAA,OAAc,IAAHD,EAAG,GAAEA,EAAAE,EAAAR,EAChBS,SAAAA,OAAW,IAAHD,GAAQA,EAAAE,EAAAV,EAChBW,SAAAA,OAAW,IAAHD,GAAQA,EAAAE,EAAAZ,EAChBa,WAAAA,OAAaC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAf,EACjBgB,YAAAA,OAAcF,IAAHC,EAAGD,EAAIC,EAAAE,EAAAjB,EAClBkB,QAAAA,OAAUJ,IAAHG,EAAGH,EAAIG,EAAAE,EAAAnB,EACdoB,OAAAA,QAASN,IAAHK,EAAGL,EAAIK,EAAAE,GAAArB,EACbsB,SAAAA,QAAWR,IAAHO,GAAGP,EAAIO,GAAAE,GAAAvB,EACfwB,qBAAAA,QAAuBV,IAAHS,GAAGT,EAAIS,GAAAE,GAAAzB,EAC3B0B,SAAUC,QAAiBb,IAAHW,GAAGX,EAAIW,GAAAG,GAAA5B,EAC/B6B,WAAAA,QAAa,IAAHD,IAAOA,GAAAE,GAAA9B,EACjB+B,kBAAAA,QAAoB,IAAHD,IAAQA,GAAAE,GAAAhC,EACzBiC,QAAAA,QAAU,IAAHD,GAAG,GAAEA,GACZE,GAAYlC,EAAZkC,aACOC,GAAWnC,EAAlBoC,MACAC,GAAgBrC,EAAhBqC,iBACAC,GAAetC,EAAfsC,gBACAC,GAAevC,EAAfuC,gBAAeC,GAAAxC,EACfyC,UAAAA,QAAY,IAAHD,IAAOA,GAChBE,GAAc1C,EAAd0C,eACAC,GAAc3C,EAAd2C,eACAC,GAAa5C,EAAb4C,cACAC,GAAa7C,EAAb6C,cACAC,GAAY9C,EAAZ8C,aAAYC,GAAA/C,EACZgD,cAAAA,QAAgB,IAAHD,GAAG,SAAQA,GACxBE,GAAGjD,EAAHiD,IAAGC,GAAAlD,EACHmD,KAAAA,QAAO,IAAHD,GAAG,SAAQA,GACfE,GAAYpD,EAAZoD,aACAC,GAAYrD,EAAZqD,aACAC,GAActD,EAAdsD,eACAC,GAAavD,EAAbuD,cACAC,GAAgBxD,EAAhBwD,iBAAgBC,GAAAzD,EAChB0D,YAAAA,QAAcC,IAAHF,GAAGE,EAAmBF,GACjCG,GAAa5D,EAAb4D,cACAC,GAAU7D,EAAV6D,WAAUC,GAAA9D,EACV+D,SAAAA,QAAW,IAAHD,GAAG,IAAGA,GAAAE,GAAAhE,EACdiE,GAAAA,QAAKC,IAAHF,GAAGE,EAAWF,GAAAG,GAAAnE,EAChBoE,OAAAA,QAASC,IAAHF,GAAGE,EAAgBF,GAAAG,GAAAtE,EACzBuE,cAAAA,QAAgBC,IAAHF,GAAGE,EAAwBF,GAAAG,GAAAzE,EACxC0E,eAAAA,QAAiBC,IAAHF,GAAGE,EAAyBF,GAAAG,GAAA5E,EAC1C6E,UAAAA,QAAY,IAAHD,IAAQA,GAAAE,GAAA9E,EACjB+E,MAAAA,QAAQ,IAAHD,IAAQA,GAAAE,GAAAhF,EACbiF,UAAAA,QAAY,IAAHD,IAAQA,GACDE,GAAoBlF,EAApCmF,eACAC,GAAcpF,EAAdoF,eACAC,GAAOrF,EAAPqF,QAAOC,GAAAtF,EACPuF,cAAAA,QAAgBzE,IAAHwE,GAAGxE,EAAIwE,GAAAE,GAAAxF,EACpByF,kBAAAA,QAAiB,IAAAD,IAAIT,GAAKS,GAAAE,GAAA1F,EAC1B2F,kBAAmBC,QAA0B,IAAHF,IAAQA,GAAAG,GAAA7F,EAClD8F,4BAAAA,QAA8B,IAAHD,IAAQA,GACnCE,GAAgB/F,EAAhB+F,iBAAgBC,GAAAhG,EAChBiG,wBAAAA,QAA0B,IAAHD,IAAQA,GAAAE,GAAAlG,EAC/BmG,qCAAAA,QAAuC,IAAHD,IAAQA,GAAAE,GAAApG,EAC5CqG,eAAAA,QAAiB,IAAHD,GAAG,GAAEA,GAAAE,GAAAtG,EACnBuG,UAAAA,QAAYzF,IAAHwF,GAAGxF,EAAIwF,GAAAE,GAAAxG,EAChByG,UAAAA,QAAY,IAAHD,IAAQA,GACjBE,GAAc1G,EAAd0G,eACAC,GAAS3G,EAAT2G,UAASC,GAAA5G,EACT6G,gBAAAA,QAAkB,IAAHD,IAAOA,GACtBE,GAAuB9G,EAAvB8G,wBACAC,GAAY/G,EAAZ+G,aAAYC,GAAAhH,EACZiH,aAAAA,QAAe,IAAHD,GAAG,WAAUA,GACVE,GAAUlH,EAAzB,eAAamH,GAAAnH,EACboH,iBAAAA,QAAmB,IAAHD,IAAQA,GACxBE,GAAUrH,EAAVqH,WACAC,GAAiBtH,EAAjBsH,kBAIIC,GAAaC,IACbC,GACJjE,IAAqBsD,IAA2BY,SAASC,cAAcb,IACnEc,GAAuBC,GAAQ,WACnC,OAAI3F,GACK4F,MAAMC,QAAQ7F,IAChBA,GAAkC8F,KAAI,SAAAC,GAAE,OAAIC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAMF,GAAI,CAAAG,aAAa,sCAC9DlG,IAA+B,CAAEkG,aAAa,IAGnDlG,EACT,GAAG,CAACA,KAEJmG,EAAWC,UAAUC,iBAAmB,WACtC,OAAO,MAIT,IAAAC,GAAgDC,EAAS,MAAKC,GAAAC,EAAAH,GAAA,GAAvDI,GAAgBF,GAAA,GAAEG,GAAmBH,GAAA,GAC5CI,GAAU,WACR,GAAIC,IAAY,CACd,IAAIC,GAAqB,EACzB,IACEA,EAAwC,mBAAZC,SAA4C,oBAAXC,MAC9D,CAAC,MAAOC,GACPH,GAAqB,CACtB,CAED,GAAIA,EAAoB,CAEtB,IAAME,EAASD,QAAQ,yBACvBJ,IAAoB,WAAA,OAAMK,EAAON,mBAClC,MAECQ,OAAO,yBAAyBC,MAAK,SAAAH,GACnCL,IAAoB,WAAA,OAAMK,EAAON,mBACnC,GAEH,CACF,GAAE,IAEH,IAAAU,GAAgCb,EAASb,IAAwB,IAAG2B,GAAAZ,EAAAW,GAAA,GAA7DE,GAAQD,GAAA,GAAEE,GAAWF,GAAA,GAC5BG,GAA8CjB,EAAS,IAAGkB,GAAAhB,EAAAe,GAAA,GAAnDE,GAAeD,GAAA,GAAEE,GAAkBF,GAAA,GACpCG,GAAsBnH,IAAkBD,GACxCqH,GAAqBlH,IAAiBD,GACtCoH,KAAiB7H,GACjB8H,GAAkB9H,SAAAA,GAAeqH,GACjCU,GAAqBrC,GAAQ,WACjC,OAAIC,MAAMC,QAAQkC,IACTA,GAAgBE,QAAO,SAACC,EAAKC,GAAM,OAAKnC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAMiC,GAAKE,EAACD,CAAAA,EAAAA,EAAOjI,MAAQiI,GAAS,GAAE,CAAE,GAElF,EACT,GAAG,CAACJ,KAEEM,GAAoB1C,GAAQ,WAChC,OACElB,IAAS,GAAA6D,OACN7J,EAAW,YAAc,GAAE,KAAA6J,OAAInE,GAAcmE,KAAAA,OAC9C1C,MAAMC,QAAQkC,IAAgB,aAAAO,OAAgBP,GAAgBjC,KAAI,SAAAyC,GAAC,OAAIA,EAAEC,KAAK,IAAEC,KAAK,OAAU,SAGpG,GAAE,CAAChE,GAAWhG,EAAUsJ,GAAiB5D,KACpCjE,GAAQ2C,GAAQkF,GAAkB9H,GAElCyI,GAAe/C,GAAQ,WAE3B,IAAMgD,EAAaC,EAAmB,CACpC3H,KAAAA,GACAF,IAAAA,GACAgD,wBAAAA,GACAsB,WAAAA,GACApB,qCAAAA,GACAiB,iBAAAA,KAMI2D,EAAerH,GAAYmH,GAG3BG,EAAoB9C,OAAO+C,QAAQF,GAAcZ,QAAO,SAACe,EAAWC,GAA6B,IAAAC,EAAAzC,EAAAwC,EAAA,GAA1BE,EAAWD,EAAA,GAAEE,EAAQF,EAAA,GAChG,OACKlD,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAA+C,GACHZ,EAACe,CAAAA,EAAAA,GAAc,SAACE,EAA2BC,GACzC,IAAMC,EAAaZ,EAAWQ,GACxBK,EAAWD,EAAaA,EAAWF,EAAeC,GAASD,EAEjE,OAAOD,EAASI,EAAUF,EAC3B,IAEJ,GAAE,CAAgB,GAEnB,GAAIzG,GAAO,CACLE,IACF0G,EAA2BC,SAAQ,SAACC,GAClC,IAAMC,EAAWd,EAAaa,GAC9Bb,EAAaa,GAAa,SAACH,EAAsBF,GAAoB,sCAChEM,EAASJ,EAAUF,KACtBO,OAAQ,SAEZ,IAGF,IAAMC,EAAyBhB,EAAaiB,eAC5CjB,EAAaiB,eAAiB,SAACP,EAAsBF,GAAoB,OAAKtD,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACzE6D,EAAuBN,EAAUF,KACpCU,YAAa,IAEhB,CAED,OAAOlB,CACT,GAAG,CAAC7H,GAAMF,GAAKgD,GAAyBE,GAAsCzC,GAAaqB,GAAOE,KAE5FkH,GAAOC,GACX,SAACC,GAAsB,OACrBC,EAAAC,cAACC,EACKtE,OAAAC,OAAA,CAAA,EAAAkE,GACJpI,GAAIG,GACJuC,UAAWpC,GACXkI,SAAU3J,GACVzC,6BAA8BA,EAC9BiB,SAAUA,KACV,GAEJ,CAACjB,EAA8ByC,GAAcsB,GAAQG,GAAejD,KAGhEoL,GAAoBN,GACxB,SAACC,GAAkE,OACjEC,EAACC,cAAAI,mBAA+BN,EAAK,CAAElJ,KAAMA,KAAQ,GAEvD,CAACA,KAGGyJ,GAASR,GACb,SAACC,GAAwB,OACvBC,gBAACO,EAAe3E,OAAAC,OAAA,CACd0B,mBAAoBA,IAChBwC,EACJ,CAAAI,SAAU3C,GACV3J,uBAAwBA,IAE3B,GACD,CAAC2J,GAAqB3J,EAAwB0J,KAG1CiD,GAAQV,GACZ,SAACC,GACC,IAAAU,EAAwCV,EAAMW,YAAtCpD,EAAemD,EAAfnD,gBAAiB/F,EAAUkJ,EAAVlJ,WAEzB,OACEyI,EAACC,cAAAU,EAAWH,uBACNT,EAAK,CAAA,wBAHgBzC,GAAmB/F,EAAa+F,EAAkB,GAK3EsD,KAAK,WACU,iBAACvM,GAAYkD,EAAU,aAC1Ba,GACG,gBAAAN,KAGrB,GACA,CAACA,GAAQzD,IAGLwM,GAAcf,GAClB,SAACC,GAA6B,OAC5BC,gBAACc,EAAoBlF,OAAAC,OAAA,CAAA,EACfkE,EACJ,CAAA1L,SAAUA,EACV8L,SAAU1C,GACVsD,eAAgBpD,GAAgB,GAChC7J,4BAA6BA,IAEhC,GACD,CAAC2J,GAAoBpJ,EAAUsJ,GAAiB7J,IAG5CkN,GAAiBlB,GACrB,SAACC,GAAkE,OACjEC,EAACC,cAAAgB,mBAA4BlB,EAAK,CAAElJ,KAAMA,KAAQ,GAEpD,CAACA,KAGGgC,GAAiB0C,GAAQ,WAC7B,OAAO,SAAU2F,EAAqBrE,GAChCjE,IACFA,GAAqBgF,GAAmBsD,IAE1C,IAAMC,EAAqB3F,MAAMC,QAAQkC,IACrCA,GAAgByD,QAAO,SAAArD,GAAM,OAAIA,EAAOjI,QAAUoL,CAAW,IAC7DvD,GAEAtI,IACFA,GAAe8L,EAAoBtE,GAErCM,GAAYgE,GAEf,GAAE,CAAC9L,GAAgBuD,GAAsB+E,GAAiBC,KAErDyD,GAAc9F,GAClB,WAAA,MAAO,CACLoC,gBAAAA,GACA2D,iBAAkBzI,GAClB0I,YAAa5I,GACbgB,wBAAAA,GACAE,qCAAAA,GACAoB,WAAAA,GACAlB,eAAAA,GACAS,wBAAAA,GACA3D,KAAAA,GACD,GACD,CACE8G,GACA9E,GACAF,GACAgB,GACAE,GACAE,GACAS,GACA3D,KAmCA2K,GAAuC1K,GAAe2K,EAAcC,EAGxEF,GAAoBA,GAAkBG,SAAWH,GAEjD,IAAMI,oBACA9K,mBACF+K,YAAa/K,GACbC,aAAAA,IACIC,IAAkB,CAAEA,eAAAA,MAItB8K,GAASlG,OAAAC,OAAAD,OAAAC,OAAA,CAAA,GACR/E,IAAgB,CAAEnB,QAAAA,KACnB8C,IAAS,CACXsJ,SAAS,IAIP1I,GAAoByG,GACxB,SAACkC,SACOC,EAAkBD,EAAME,OAC9B,QAAoC,UAAhCD,aAAe,EAAfA,EAAiBE,qBAAe,IAAAC,OAAA,EAAAA,EAAAC,UAAUC,SAASC,EAAWC,wBAG3DlJ,IAA2BK,IAA2BE,GAC9D,GACD,CAACF,GAAyBE,GAAsCP,KAGlE,OACE0G,gBAACwB,GAAiB5F,OAAAC,OAAA,CAChBjI,UAAW6O,EAAGC,EAAOC,SAAU/O,GAC/B8M,YAAaW,GACbV,WAAU/E,OAAAC,OAAAD,OAAAC,OAAA,CACRuE,kBAAAA,GACAP,KAAAA,GACAmB,eAAAA,GACAR,MAAAA,GACAF,OAAAA,GACAsC,QAAAA,EACA/B,YAAAA,IACIpI,IAAS,CACXoK,WAAYrO,EACZsO,eAAgBC,IAEd9L,IAAiBqF,IAAoB,CAAE0G,SAAU1G,KAGvDjD,kBAAmBA,GACnBxC,KAAMA,GACNd,iBAAkBA,GAClB9B,YAAaA,EACbgP,WAAY9O,EACZ+O,aAAc7O,GAAY8B,GAC1BgN,cAAe9O,GAAYkB,GAC3BlB,SAAUA,EAAQ,gBACHA,EACH,aAAA4J,kBACElE,GAAc,gBACd,UACdnE,aAAcA,GACdE,MAAOA,GACPvB,WAAYA,EACZG,YAAaA,EACbE,QAASA,EACTE,OAAQA,GACRI,qBAAsBA,GACtBO,kBAAmBA,GACnBL,SAtGa,SAAC2I,EAA2CqF,GAK3D,OAJI/N,IACFA,GAAe0I,EAAQqF,GAGjBA,EAAKC,QACX,IAAK,gBACH,IAAMtC,EAAiBtI,GAAQ2K,EAAKrF,OAASA,EAEzCjF,IACFA,GAAeiI,GAGZrD,IACHP,GAAW,GAAAe,OAAAoF,EAAK3F,IAAe,CAAEoD,KAEnC,MAGF,IAAK,QACChI,IACFA,KAGG2E,IAC8BP,GAA7B3D,GAAyC8B,GAC5B,MA6ErBrB,UAAWA,GACXhB,cAAeA,GACfjD,gBAAiBA,GACjBC,gBAAiBA,GACjBqH,gBAAiBA,GACjBiG,MAAO5M,GACP+L,OAAQpE,GACRkF,MAAOC,EACPnM,cAAeA,GACfJ,iBAAkBiE,GAClBzE,cAAeA,GACfiE,aAAcA,GACdpD,YAAalD,GAAYkD,GACzBE,SAAUA,GACVE,GAAIA,GAAE,cACOiD,IAAc8I,EAAUC,EAAuBC,SAAUjM,IACtEY,UAAWA,GACXY,kBAAmBA,GACnBxF,IAAKA,EACL6F,4BAA6BA,GAC7BC,iBAAkBA,GAClBU,UAAWA,GACXC,eAAgBA,GAChBG,gBAAiBA,GACjBE,aAAcA,GACdM,WAAYA,GACZC,kBAAmBA,IACf4G,GACAE,IAGV,IAGuC,CACvC+B,MAAOC,EACPC,WAAYC,EACZC,eAAgBC,EAChBC,cAAeC,EACfC,aAAcA"}
|
|
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"}},
|
|
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"],
|
|
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,
|
|
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 <
|
|
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":"8qCA0BA,IAAMA,EAAsBC,EAAUC,SAAWD,EAE3CE,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,cAAAjE,GAAmBsF,aAAW,GAC7BtB,EAACC,cAAAsB,GAAaC,cAAY,GACxBxB,EAAAC,cAACQ,EAAOC,KACNC,SAAUnB,GACVqB,QAAQ,OACRC,QAAQ,QACRC,KAAK,OACLU,OAAQzE,EACRV,IAAKA,EACLmB,UAAWiE,EACTP,EAAOQ,MACPC,EAAST,EAAQU,EAAU,QAAUnF,IAAMoF,EAAA,CAAA,EACxCX,EAAOY,mBAAqBpF,GAC/Bc,GAEFlB,GAAIA,EAAE,cACOmB,GAAcsD,EAAUC,EAAuBe,WAAYzF,GACxE0F,KAAK,2CAEY9D,EAAO,mBACNI,GAClBhB,MAAOsC,IAENvC,EACD0C,EAAAC,cAACiC,EAAe,CACdC,aAAcxF,EACdyF,MAAOxF,EACPC,qBAAsBA,EACtBE,QAASA,QAMnBY,KAOd"}
|
|
@@ -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:!_
|
|
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"}},
|
|
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":"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,IAkBMuD,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,KArRkB,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,CAwOK+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,SAzQWC,EAyQMF,EAxQdlF,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,MAoP9B6D,YA9OA,SAACvD,EAAQwD,GAAA,IAAInE,EAAUmE,EAAVnE,WAAU,OAAAc,EAAAA,EAAAA,KAClBH,GACAjB,KAAS,GAAA,CACZH,MAAoBC,EAAbQ,EAAuB,sBAAmC,wBACjEoE,WAAY5E,EAAU,yBA2OxB6B,oBAAqBA,EAAoByC,GACzCtC,kBAAmBA,EAAkBsC,GACrC1B,eAAgBA,EAAe0B,GAC/BO,YA7KA,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,UA2JZyF,MA3IkB,SAAAhE,GAAQ,OAAAG,EAAAA,EAAAA,EAAAA,EAAA,CAAA,EACvBH,GACAjB,KACAJ,KAAU,CAAA,EAAA,CACbsC,QAAS,OACTC,WAAY,SACZ+C,WAAY,UAsIZtC,eAAgBA,EAAewB,GAC/Be,MA9GQC,EA8GGhB,EA7GRiB,EAAUD,EAAVC,WAAYC,EAAuBF,EAAvBE,wBAAyBC,EAAoCH,EAApCG,qCACxC,SAAAtE,GAAY,IAAAuE,EACJC,EAASrE,EAAAA,EAAAA,EAAA,GACVH,GACAjB,KAAS,GAAA,CACZH,MAAOC,EAAU,sBACjBC,gBAAiBD,EAAU,2BAC3ByB,UAAS9B,GAAAA,OAAKK,EAAU,8CAA+C,6BAAsBL,OAAKK,EAChG,uBAIJ,IAAKwF,IAA4BC,EAAsC,OAAOE,EAC9E,IAAMC,EAAqBL,iBAAUG,EAAVH,EAAYM,eAAO,IAAAH,OAAA,EAAnBA,EAAqBI,wBAEhD,IAAKF,EAAoB,OAAOD,EAShC,GAAIH,EACF,OAAAlE,EAAAA,EAAA,CAAA,EAAYqE,GAAS,CAAA,EAAA,CAAEI,IAAKH,EAAmBI,OAAQnG,MAAO+F,EAAmB/F,QAC5E,GAAI4F,EAAsC,CAAA,IAAAQ,EACzCC,MAAUvG,OAA+C,QAA/CsG,EAAOE,EAAoBZ,eAAAA,EAAYM,gBAAhCI,IAAwCA,OAAxCA,EAAAA,EAA0CG,UAAa,MAC9E,OAAA9E,EAAAA,EAAA,CAAA,EACKqE,GAAS,CAAA,EAAA,CACZI,IAAK,OACLM,UAAS1G,KAAAA,OAAOuG,GAChBrG,MAAO+F,EAAmB/F,OAE9B,CACA,OAAO8F,IA2ETvC,OAAQA,IACRkD,mBApE+B,WAAA,MAAO,CACtClE,QAAS,SAoETmE,OAjESC,EAiEIlC,EAhEVmC,EAAgBD,EAAhBC,iBACH,WAAA,OAAAnF,EAAA,CACEoF,cAAe,EACfC,UAAW,OACPF,GAAoB,CACtB,oBAAqB,CACnBG,SAAU,WACVF,cAAe,MACf,UAAW,CACTG,QAAS,KACTD,SAAU,WACVZ,OAAQ,IACRc,KAAM,uBACNjH,MAAO,0CACPH,OAAQ,MACRO,gBAAiB,mCAkDzB8G,aA5CyB,WAAA,MAAO,CAChC5G,SAAU,OACVE,WAAY,OACZ+B,QAAS,OACTC,WAAY,SACZuB,WAAY5D,EAAU,kBACtBD,MAAOC,EAAU,2BA3BjB,IADSwG,EACNC,EAjDKnB,EACLC,EAAYC,EAAyBC,EApK7BjB,EACRpF,CAqRH"}
|
|
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"],
|
|
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,
|
|
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 <
|
|
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
|
|
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": "
|
|
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": "
|
|
271
|
+
"gitHead": "08ddae3d38695361fdb77fd6ecefc529eaaae771"
|
|
272
272
|
}
|