@bothub-chat/ui/dist/components/select-field/useSelectField.js

Bothub UI Components

import{useState as e,useCallback as t,useRef as n,useEffect as o}from"react";import"unified";import"remark-parse";import"remark-gfm";import"mdast-util-to-markdown";import"../../utils/colors/calculateGrayScale.js";import"../../utils/colors/calculateAccentColors.js";import{findNearestScrollableParent as r}from"../../utils/findNearestScrollableParent.js";const l=({value:l,multiple:i=!1,disabled:s=!1,placement:c="bottom-left",contentHeight:a,onClose:u,onSelectClick:d,onChange:m,onValueChange:w})=>{const[p,g]=e(!1),[f,v]=e(0),[h,b]=e(0),[y,E]=e(0),[L,C]=e(a),[k,A]=e(c),H=t((e=>{if(i&&Array.isArray(e)){const t=w,n=e;null==m||m(e),null==t||t(n.map((e=>"string"==typeof e?e:"string"==typeof e.value?e.value:"")).filter((e=>!!e)))}if(!i&&!Array.isArray(e)){null==m||m(e);const t=w;e?"string"==typeof e?null==t||t(e):"string"==typeof e.value&&(null==t||t(e.value)):null==t||t(null)}}),[i,m,w]);let[R,z]=e(i?[]:null);void 0!==l&&([R,z]=[l,H]);const X=n(!1),Y=n(null),j=n(null);o((()=>{const e=()=>{const e=Y.current;if(!e||!L||!a)return;let t=a;const{top:n,bottom:o}=e.getBoundingClientRect();t=k.includes("top")?n-20:window.innerHeight-o-20,"string"!=typeof a&&C(t<a?t:a)};return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)}),[Y.current,L,k,a,p]);const B=t((()=>{g(!1),null==u||u()}),[]);o((()=>{if(!p||!Y.current)return;const e=r(Y.current);return e?(e.addEventListener("scroll",B),()=>e.removeEventListener("scroll",B)):void 0}),[p]),o((()=>{if(!p)return;const e=e=>{if(!X.current||"orientationchange"===e.type){if("mousedown"===e.type){const t=Y.current,n=j.current;if(null===t||null===n)return;if(t.contains(e.target)||n.contains(e.target))return}B()}};return document.addEventListener("mousedown",e),document.addEventListener("scroll",e),window.addEventListener("resize",e),window.addEventListener("orientationchange",e),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("scroll",e),window.removeEventListener("resize",e),window.removeEventListener("orientationchange",e)}}),[p]);const S=t(((e,t)=>{null==d||d();const n=Y.current,o=j.current;if(!n||!o||s)return;e&&t.stopPropagation();const r=window.innerHeight||document.documentElement.clientHeight,{width:l,height:i,top:a,bottom:u,left:m,right:w}=n.getBoundingClientRect(),{width:f}=o.getBoundingClientRect();let h=k;h=a-186<0?"bottom-left"===h?"bottom-left":"bottom-center":u+186>r?"top-right"===c?"top-right":"top-left":c;let y=0,L=0;switch(h){case"bottom-left":y=m+window.scrollX,L=a+window.scrollY+i;break;case"bottom-center":y=Math.floor((m+w)/2+window.scrollX-f/2),L=a+window.scrollY+i;break;case"top-left":y=m+window.scrollX,L=a+window.scrollY;break;case"top-right":y=m+window.scrollX+l,L=a+window.scrollY}v(y),b(L),E(l),A(h),g(!!e||!p)}),[s,p,k,c,d]);return{x:f,y:h,width:y,isOpen:p,triggerRef:Y,selectModalRef:j,placement:k,isKeyboardOpen:X,value:R,disabled:s,multiple:i,contentHeight:L,handleInputClick:S,handleClose:B,setValue:e=>{z===H?z(e):(z(e),H(e))}}};export{l as useSelectField};