@bothub-chat/ui 2.48.1-fix-message-79720dcc-0313-4bb2-ac15-912e6fc16d36 → 2.48.1-fix-refactor-2b2ac2ff-898d-489a-83f0-2a58a894046a

package/dist/components/select-field/styled.js

@@ -1,19 +1,19 @@
-import{jsx as e}from"react/jsx-runtime";import{styled as t,css as i}from"styled-components";import{Typography as o}from"../typography/index.js";import{ArrowDownIcon as l}from"../../icons/arrow-down/index.js";import{Skeleton as s}from"../skeleton/index.js";import{Chip as a}from"../chip/index.js";import{LoaderCircularGradientIcon as r}from"../../icons/loader-circular-gradient/index.js";import{SearchCircleIcon as n}from"../../icons/search-circle/index.js";import{Button as d}from"../button/index.js";import{CloseIcon as c}from"../../icons/close/index.js";const p=t.div.withConfig({displayName:"styled__SelectFieldStyled",componentId:"sc-ostlwx-0"})(["display:flex;flex-direction:column;align-items:flex-start;width:100%;box-sizing:border-box;position:relative;"," "," ",""],(({$fullWidth:e})=>!e&&i`
+import{jsx as e}from"react/jsx-runtime";import{styled as t,css as i}from"styled-components";import{Typography as o}from"../typography/index.js";import{ArrowDownIcon as l}from"../../icons/arrow-down/index.js";import{Skeleton as s}from"../skeleton/index.js";import{Chip as a}from"../chip/index.js";import{LoaderCircularGradientIcon as r}from"../../icons/loader-circular-gradient/index.js";import{SearchCircleIcon as n}from"../../icons/search-circle/index.js";import{Button as d}from"../button/index.js";import{CloseIcon as c}from"../../icons/close/index.js";const p=t.div.withConfig({displayName:"styled__SelectFieldStyled",componentId:"sc-ostlwx-0"})(["display:flex;flex-direction:column;align-items:flex-start;width:100%;box-sizing:border-box;position:relative;"," "," ",""],({$fullWidth:e})=>!e&&i`
       max-width: 259px;
-    `),(({$disabled:e})=>e&&i`
+    `,({$disabled:e})=>e&&i`
       cursor: not-allowed;
-    `),(({$disabled:e})=>!e&&i`
+    `,({$disabled:e})=>!e&&i`
       cursor: default;
-    `)),m=t(o).attrs({variant:"input-sm"}).withConfig({displayName:"styled__SelectFieldLabel",componentId:"sc-ostlwx-1"})(["display:flex;align-items:center;gap:8px;margin-bottom:8px;cursor:inherit;width:100%;"]),w=t.div.withConfig({displayName:"styled__SelectFieldInput",componentId:"sc-ostlwx-2"})(["display:flex;align-items:center;width:100%;justify-content:space-between;gap:12px;user-select:none;border:1px solid ",";border-radius:10px;"," box-sizing:border-box;background:",";backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);cursor:",";"," ",""],(({theme:e,$disabled:t,$error:i,$open:o,$skeleton:l})=>t||l?e.colors.grayScale.gray5:i?e.colors.critic:o?e.colors.accent.primary:e.colors.grayScale.gray2),(({$multiple:e})=>e?i`
+    `),m=t(o).attrs({variant:"input-sm"}).withConfig({displayName:"styled__SelectFieldLabel",componentId:"sc-ostlwx-1"})(["display:flex;align-items:center;gap:8px;margin-bottom:8px;cursor:inherit;width:100%;"]),w=t.div.withConfig({displayName:"styled__SelectFieldInput",componentId:"sc-ostlwx-2"})(["display:flex;align-items:center;width:100%;justify-content:space-between;gap:12px;user-select:none;border:1px solid ",";border-radius:10px;"," box-sizing:border-box;background:",";backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);cursor:",";"," ",""],({theme:e,$disabled:t,$error:i,$open:o,$skeleton:l})=>t||l?e.colors.grayScale.gray5:i?e.colors.critic:o?e.colors.accent.primary:e.colors.grayScale.gray2,({$multiple:e})=>e?i`
         padding: 10px;
         padding-right: 16px;
       `:i`
       padding: 14px 16px;
-    `),(({theme:e,$disabled:t,$skeleton:i,$blur:o})=>t||i?e.colors.grayScale.gray3:o?"light"===e.mode?"rgba(255, 255, 255, 0.65)":"rgba(18, 24, 37, 0.75)":"light"===e.mode?e.default.colors.base.white:e.colors.grayScale.gray4),(({$disabled:e,$skeleton:t,$loading:i})=>t||i?"progress":e?"not-allowed":"pointer"),(({theme:e,$error:t,$disabled:o,$skeleton:l})=>!t&&!o&&!l&&i`
+    `,({theme:e,$disabled:t,$skeleton:i,$blur:o})=>t||i?e.colors.grayScale.gray3:o?"light"===e.mode?"rgba(255, 255, 255, 0.65)":"rgba(18, 24, 37, 0.75)":"light"===e.mode?e.default.colors.base.white:e.colors.grayScale.gray4,({$disabled:e,$skeleton:t,$loading:i})=>t||i?"progress":e?"not-allowed":"pointer",({theme:e,$error:t,$disabled:o,$skeleton:l})=>!t&&!o&&!l&&i`
       &:hover {
         border-color: ${e.colors.accent.primary};
       }
-    `),(({$disabled:e,$open:t})=>e?i`
+    `,({$disabled:e,$open:t})=>e?i`
         ${b} {
           visibility: hidden;
         }
@@ -26,6 +26,6 @@ import{jsx as e}from"react/jsx-runtime";import{styled as t,css as i}from"styled-
           visibility: visible;
         }
       }
-    `)),h=t.div.withConfig({displayName:"styled__SelectFieldInputSide",componentId:"sc-ostlwx-3"})(["display:flex;align-items:center;gap:10px;"]),x=t(h).withConfig({displayName:"styled__SelectFieldInputLeftSide",componentId:"sc-ostlwx-4"})(["width:100%;min-width:0;"]),y=t(n).attrs({size:16}).withConfig({displayName:"styled__SelectFieldSearchIcon",componentId:"sc-ostlwx-5"})(["path{fill:",";}"],(({theme:e,$focus:t})=>t?e.colors.base.white:e.colors.grayScale.gray1)),g=t.input.withConfig({displayName:"styled__SelectFieldInputNative",componentId:"sc-ostlwx-6"})(["display:inline-flex;width:100%;background:none;border:none;outline:none;color:",";font-size:14px;font-weight:400;line-height:18px;padding:0px;&::placeholder{color:",";}&:focus::placeholder{color:",";}&:-webkit-autofill,&:-webkit-autofill:hover,&:-webkit-autofill:active{-webkit-background-clip:text;-webkit-text-fill-color:",";box-shadow:0 0 0 100px "," inset !important;}&:-webkit-autofill:focus{-webkit-background-clip:text;-webkit-text-fill-color:",";box-shadow:0 0 0 100px "," inset !important;}&::-webkit-search-decoration,&::-webkit-search-cancel-button,&::-webkit-search-results-button,&::-webkit-search-results-decoration{-webkit-appearance:none;}&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}",""],(({theme:e})=>e.colors.base.white),(({theme:e})=>e.colors.grayScale.gray1),(({theme:e})=>"light"===e.mode?e.colors.grayScale.gray1:e.colors.grayScale.gray6),(({theme:e})=>e.colors.base.white),(({theme:e})=>e.colors.grayScale.gray4),(({theme:e})=>e.colors.base.white),(({theme:e})=>e.colors.grayScale.gray4),(({disabled:e})=>e&&i`
+    `),h=t.div.withConfig({displayName:"styled__SelectFieldInputSide",componentId:"sc-ostlwx-3"})(["display:flex;align-items:center;gap:10px;"]),x=t(h).withConfig({displayName:"styled__SelectFieldInputLeftSide",componentId:"sc-ostlwx-4"})(["width:100%;min-width:0;"]),y=t(n).attrs({size:16}).withConfig({displayName:"styled__SelectFieldSearchIcon",componentId:"sc-ostlwx-5"})(["path{fill:",";}"],({theme:e,$focus:t})=>t?e.colors.base.white:e.colors.grayScale.gray1),g=t.input.withConfig({displayName:"styled__SelectFieldInputNative",componentId:"sc-ostlwx-6"})(["display:inline-flex;width:100%;background:none;border:none;outline:none;color:",";font-size:14px;font-weight:400;line-height:18px;padding:0px;&::placeholder{color:",";}&:focus::placeholder{color:",";}&:-webkit-autofill,&:-webkit-autofill:hover,&:-webkit-autofill:active{-webkit-background-clip:text;-webkit-text-fill-color:",";box-shadow:0 0 0 100px "," inset !important;}&:-webkit-autofill:focus{-webkit-background-clip:text;-webkit-text-fill-color:",";box-shadow:0 0 0 100px "," inset !important;}&::-webkit-search-decoration,&::-webkit-search-cancel-button,&::-webkit-search-results-button,&::-webkit-search-results-decoration{-webkit-appearance:none;}&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}",""],({theme:e})=>e.colors.base.white,({theme:e})=>e.colors.grayScale.gray1,({theme:e})=>"light"===e.mode?e.colors.grayScale.gray1:e.colors.grayScale.gray6,({theme:e})=>e.colors.base.white,({theme:e})=>e.colors.grayScale.gray4,({theme:e})=>e.colors.base.white,({theme:e})=>e.colors.grayScale.gray4,({disabled:e})=>e&&i`
       cursor: not-allowed;
-    `)),b=t(d).attrs({variant:"text",iconSize:12,children:e(c,{})}).withConfig({displayName:"styled__SelectFieldClearButton",componentId:"sc-ostlwx-7"})([""]),f=t.span.withConfig({displayName:"styled__SelectFieldValue",componentId:"sc-ostlwx-8"})(["display:inline-flex;align-items:center;gap:10px;width:100%;"]),u=t(o).attrs({variant:"input-sm"}).withConfig({displayName:"styled__SelectFieldValueText",componentId:"sc-ostlwx-9"})(["white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;"]),_=t.span.withConfig({displayName:"styled__SelectFieldValueColor",componentId:"sc-ostlwx-10"})(["display:inline-flex;width:18px;height:18px;flex-shrink:0;background:",";border-radius:4px;"],(({$color:e})=>e)),S=t(o).attrs({variant:"input-sm"}).withConfig({displayName:"styled__SelectFieldColorValueText",componentId:"sc-ostlwx-11"})(["color:",";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;"],(({theme:e})=>e.colors.base.white)),k=t.div.withConfig({displayName:"styled__SelectFieldValues",componentId:"sc-ostlwx-12"})(["display:flex;width:100%;"]),$=t.div.withConfig({displayName:"styled__SelectFieldValueList",componentId:"sc-ostlwx-13"})(["display:flex;gap:8px;flex-wrap:wrap;width:100%;"]),v=t(a).withConfig({displayName:"styled__SelectFieldValueListItem",componentId:"sc-ostlwx-14"})([""]),I=t(o).attrs({variant:"input-sm"}).withConfig({displayName:"styled__SelectFieldPlaceholder",componentId:"sc-ostlwx-15"})(["color:",";"],(({$open:e,theme:t})=>e?t.colors.grayScale.gray6:t.colors.grayScale.gray1)),C=t(r).withConfig({displayName:"styled__SelectFieldLoader",componentId:"sc-ostlwx-16"})([""]),N=t(l).attrs({size:16}).withConfig({displayName:"styled__SelectFieldArrow",componentId:"sc-ostlwx-17"})(["transition:transform 0.2s ease-in-out;"]),F=t(o).attrs({variant:"input-sm"}).withConfig({displayName:"styled__SelectFieldErrorText",componentId:"sc-ostlwx-18"})(["display:inline-flex;margin-top:8px;color:",";"],(({theme:e})=>e.colors.critic)),j=t(s).withConfig({displayName:"styled__SelectFieldSkeleton",componentId:"sc-ostlwx-19"})(["width:100%;height:18px;"]);export{N as SelectFieldArrow,b as SelectFieldClearButton,S as SelectFieldColorValueText,F as SelectFieldErrorText,w as SelectFieldInput,x as SelectFieldInputLeftSide,g as SelectFieldInputNative,h as SelectFieldInputSide,m as SelectFieldLabel,C as SelectFieldLoader,I as SelectFieldPlaceholder,y as SelectFieldSearchIcon,j as SelectFieldSkeleton,p as SelectFieldStyled,f as SelectFieldValue,_ as SelectFieldValueColor,$ as SelectFieldValueList,v as SelectFieldValueListItem,u as SelectFieldValueText,k as SelectFieldValues};
+    `),b=t(d).attrs({variant:"text",iconSize:12,children:e(c,{})}).withConfig({displayName:"styled__SelectFieldClearButton",componentId:"sc-ostlwx-7"})([""]),f=t.span.withConfig({displayName:"styled__SelectFieldValue",componentId:"sc-ostlwx-8"})(["display:inline-flex;align-items:center;gap:10px;width:100%;"]),u=t(o).attrs({variant:"input-sm"}).withConfig({displayName:"styled__SelectFieldValueText",componentId:"sc-ostlwx-9"})(["white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;"]),_=t.span.withConfig({displayName:"styled__SelectFieldValueColor",componentId:"sc-ostlwx-10"})(["display:inline-flex;width:18px;height:18px;flex-shrink:0;background:",";border-radius:4px;"],({$color:e})=>e),S=t(o).attrs({variant:"input-sm"}).withConfig({displayName:"styled__SelectFieldColorValueText",componentId:"sc-ostlwx-11"})(["color:",";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;"],({theme:e})=>e.colors.base.white),k=t.div.withConfig({displayName:"styled__SelectFieldValues",componentId:"sc-ostlwx-12"})(["display:flex;width:100%;"]),$=t.div.withConfig({displayName:"styled__SelectFieldValueList",componentId:"sc-ostlwx-13"})(["display:flex;gap:8px;flex-wrap:wrap;width:100%;"]),v=t(a).withConfig({displayName:"styled__SelectFieldValueListItem",componentId:"sc-ostlwx-14"})([""]),I=t(o).attrs({variant:"input-sm"}).withConfig({displayName:"styled__SelectFieldPlaceholder",componentId:"sc-ostlwx-15"})(["color:",";"],({$open:e,theme:t})=>e?t.colors.grayScale.gray6:t.colors.grayScale.gray1),C=t(r).withConfig({displayName:"styled__SelectFieldLoader",componentId:"sc-ostlwx-16"})([""]),N=t(l).attrs({size:16}).withConfig({displayName:"styled__SelectFieldArrow",componentId:"sc-ostlwx-17"})(["transition:transform 0.2s ease-in-out;transform:rotateZ(","deg);"],({$isOpen:e})=>e?180:0),F=t(o).attrs({variant:"input-sm"}).withConfig({displayName:"styled__SelectFieldErrorText",componentId:"sc-ostlwx-18"})(["display:inline-flex;margin-top:8px;color:",";"],({theme:e})=>e.colors.critic),j=t(s).withConfig({displayName:"styled__SelectFieldSkeleton",componentId:"sc-ostlwx-19"})(["width:100%;height:18px;"]);export{N as SelectFieldArrow,b as SelectFieldClearButton,S as SelectFieldColorValueText,F as SelectFieldErrorText,w as SelectFieldInput,x as SelectFieldInputLeftSide,g as SelectFieldInputNative,h as SelectFieldInputSide,m as SelectFieldLabel,C as SelectFieldLoader,I as SelectFieldPlaceholder,y as SelectFieldSearchIcon,j as SelectFieldSkeleton,p as SelectFieldStyled,f as SelectFieldValue,_ as SelectFieldValueColor,$ as SelectFieldValueList,v as SelectFieldValueListItem,u as SelectFieldValueText,k as SelectFieldValues};

package/dist/components/select-field/useSelectField.d.ts

@@ -26,10 +26,10 @@ export declare const useSelectField: <TriggerType extends HTMLElement = HTMLDivE
     y: number;
     width: number;
     isOpen: boolean;
-    triggerRef: import("react").RefObject<TriggerType>;
-    selectModalRef: import("react").RefObject<HTMLDivElement>;
+    triggerRef: import("react").RefObject<TriggerType | null>;
+    selectModalRef: import("react").RefObject<HTMLDivElement | null>;
     placement: "top-left" | "top-right" | "bottom-left" | "bottom-center";
-    isKeyboardOpen: import("react").MutableRefObject<boolean>;
+    isKeyboardOpen: import("react").RefObject<boolean>;
     value: ValueType;
     disabled: boolean;
     multiple: boolean;

package/dist/components/select-field/useSelectField.js

@@ -1 +1 @@
-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};
+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};