@bothub-chat/ui 2.60.0 → 2.61.1-feat-generics-in-select-b6b6cf11-a2ed-403a-b1b1-247607966754

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

@@ -1,27 +1,43 @@
 import { SelectFieldChangeEventHandler, SelectFieldDataItem, SelectFieldMultiChangeEventHandler, SelectFieldMultiValueChangeEventHandler, SelectFieldPlacement, SelectFieldValueChangeEventHandler } from './types';
-import { ValueType } from '.';
-export interface UseSelectFieldDefaultProps {
+export interface UseSelectFieldDefaultProps<DataItem extends SelectFieldDataItem<any>> {
     multiple?: false;
-    value?: SelectFieldDataItem | null;
-    onChange?: SelectFieldChangeEventHandler;
-    onValueChange?: SelectFieldValueChangeEventHandler;
+    value?: DataItem | null;
+    onChange?: SelectFieldChangeEventHandler<DataItem>;
+    onValueChange?: SelectFieldValueChangeEventHandler<DataItem>;
 }
-export interface UseSelectFieldMultiProps {
+export interface UseSelectFieldMultiProps<DataItem extends SelectFieldDataItem<any>> {
     multiple: true;
-    value?: SelectFieldDataItem[];
-    onChange?: SelectFieldMultiChangeEventHandler;
-    onValueChange?: SelectFieldMultiValueChangeEventHandler;
+    value?: DataItem[];
+    onChange?: SelectFieldMultiChangeEventHandler<DataItem>;
+    onValueChange?: SelectFieldMultiValueChangeEventHandler<DataItem>;
 }
-export type UseSelectFieldUnionProps = UseSelectFieldDefaultProps | UseSelectFieldMultiProps;
-export type UseSelectFieldProps = {
+export type UseSelectFieldUnionProps<DataItem extends SelectFieldDataItem<any>> = UseSelectFieldDefaultProps<DataItem> | UseSelectFieldMultiProps<DataItem>;
+export type UseSelectFieldProps<DataItem extends SelectFieldDataItem<any>> = {
     disabled?: boolean;
     placement?: SelectFieldPlacement;
     contentHeight?: number | string;
     onClose?: () => void;
     onSelectClick?: () => void;
-} & UseSelectFieldUnionProps;
-export type UseSelectFieldReturnType = ReturnType<typeof useSelectField>;
-export declare const useSelectField: <TriggerType extends HTMLElement = HTMLDivElement>({ value: initialValue, multiple, disabled, placement: initialPlacement, contentHeight, onClose, onSelectClick, onChange, onValueChange, }: UseSelectFieldProps) => {
+} & UseSelectFieldUnionProps<DataItem>;
+export type UseSelectFieldHook<DataItem extends SelectFieldDataItem<any>, TriggerType extends HTMLElement = HTMLDivElement> = (params: UseSelectFieldProps<DataItem>) => {
+    x: number;
+    y: number;
+    width: number;
+    isOpen: boolean;
+    triggerRef: React.RefObject<TriggerType | null>;
+    selectModalRef: React.RefObject<HTMLDivElement | null>;
+    placement: SelectFieldPlacement;
+    isKeyboardOpen: React.RefObject<boolean>;
+    value: DataItem | DataItem[] | null;
+    disabled: boolean;
+    multiple: boolean;
+    contentHeight?: number | string;
+    handleInputClick: (native: boolean, event: React.MouseEvent<HTMLElement>) => void;
+    handleClose: () => void;
+    setValue: (value: DataItem | DataItem[] | null) => void;
+};
+export type UseSelectFieldReturnType<DataItem extends SelectFieldDataItem<any>, TriggerType extends HTMLElement = HTMLDivElement> = ReturnType<UseSelectFieldHook<DataItem, TriggerType>>;
+export declare const useSelectField: <DataItem extends SelectFieldDataItem<any>, TriggerType extends HTMLElement = HTMLDivElement>({ value: initialValue, multiple, disabled, placement: initialPlacement, contentHeight, onClose, onSelectClick, onChange, onValueChange, }: UseSelectFieldProps<DataItem>) => {
     x: number;
     y: number;
     width: number;
@@ -30,11 +46,11 @@ export declare const useSelectField: <TriggerType extends HTMLElement = HTMLDivE
     selectModalRef: import("react").RefObject<HTMLDivElement | null>;
     placement: "top-left" | "top-right" | "bottom-left" | "bottom-center";
     isKeyboardOpen: import("react").RefObject<boolean>;
-    value: ValueType;
+    value: DataItem | DataItem[] | null;
     disabled: boolean;
     multiple: boolean;
     contentHeight: string | number | undefined;
     handleInputClick: (native: boolean, event: React.MouseEvent<HTMLElement>) => void;
     handleClose: () => void;
-    setValue: (value: ValueType) => void;
+    setValue: (value: DataItem | DataItem[] | null) => void;
 };

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";import"tslib";const i=({value:i,multiple:l=!1,disabled:s=!1,placement:c="bottom-left",contentHeight:u,onClose:a,onSelectClick:d,onChange:m,onValueChange:w})=>{const[p,f]=e(!1),[g,v]=e(0),[h,b]=e(0),[y,E]=e(0),[L,C]=e(u),[k,A]=e(c),H=t(e=>{if(l&&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(!l&&!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)}},[l,m,w]);let[R,z]=e(l?[]:null);void 0!==i&&([R,z]=[i,H]);const X=n(!1),Y=n(null),j=n(null);o(()=>{const e=()=>{const e=Y.current;if(!e||!L||!u)return;let t=u;const{top:n,bottom:o}=e.getBoundingClientRect();t=k.includes("top")?n-20:window.innerHeight-o-20,"string"!=typeof u&&C(t<u?t:u)};return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[Y.current,L,k,u,p]);const B=t(()=>{f(!1),null==a||a()},[]);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:i,height:l,top:a,bottom:m,left:w,right:g}=n.getBoundingClientRect(),{width:h}=o.getBoundingClientRect();let y=k;y=a-186<0||"number"==typeof u&&u>a&&r-m>a?"bottom-center"===y?"bottom-center":"bottom-left":m+186>r||"number"==typeof u&&u>r-m&&r-m<a?"top-right"===c?"top-right":"top-left":c;let L=0,C=0;switch(y){case"bottom-left":L=w+window.scrollX,C=a+window.scrollY+l;break;case"bottom-center":L=Math.floor((w+g)/2+window.scrollX-h/2),C=a+window.scrollY+l;break;case"top-left":L=w+window.scrollX,C=a+window.scrollY;break;case"top-right":L=w+window.scrollX+i,C=a+window.scrollY}v(L),b(C),E(i),A(y),f(!!e||!p)},[s,p,k,c,d]);return{x:g,y:h,width:y,isOpen:p,triggerRef:Y,selectModalRef:j,placement:k,isKeyboardOpen:X,value:R,disabled:s,multiple:l,contentHeight:L,handleInputClick:S,handleClose:B,setValue:e=>{z===H?z(e):(z(e),H(e))}}};export{i 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";import"tslib";const i=({value:i,multiple:l=!1,disabled:s=!1,placement:c="bottom-left",contentHeight:u,onClose:a,onSelectClick:d,onChange:m,onValueChange:w})=>{const[p,f]=e(!1),[g,v]=e(0),[h,b]=e(0),[y,E]=e(0),[L,C]=e(u),[k,A]=e(c),H=t(e=>{if(l&&Array.isArray(e)){const t=m,n=w,o=e;null==t||t(e),null==n||n(o.map(e=>"string"==typeof e?e:"string"==typeof e.value?e.value:"").filter(e=>!!e))}if(!l&&!Array.isArray(e)){const t=m,n=w;null==t||t(e),e?"string"==typeof e?null==n||n(e):"string"==typeof e.value&&(null==n||n(e.value)):null==n||n(null)}},[l,m,w]);let[R,z]=e(l?[]:null);void 0!==i&&([R,z]=[i,H]);const X=n(!1),Y=n(null),j=n(null);o(()=>{const e=()=>{const e=Y.current;if(!e||!L||!u)return;let t=u;const{top:n,bottom:o}=e.getBoundingClientRect();t=k.includes("top")?n-20:window.innerHeight-o-20,"string"!=typeof u&&C(t<u?t:u)};return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[Y.current,L,k,u,p]);const B=t(()=>{f(!1),null==a||a()},[]);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:i,height:l,top:a,bottom:m,left:w,right:g}=n.getBoundingClientRect(),{width:h}=o.getBoundingClientRect();let y=k;y=a-186<0||"number"==typeof u&&u>a&&r-m>a?"bottom-center"===y?"bottom-center":"bottom-left":m+186>r||"number"==typeof u&&u>r-m&&r-m<a?"top-right"===c?"top-right":"top-left":c;let L=0,C=0;switch(y){case"bottom-left":L=w+window.scrollX,C=a+window.scrollY+l;break;case"bottom-center":L=Math.floor((w+g)/2+window.scrollX-h/2),C=a+window.scrollY+l;break;case"top-left":L=w+window.scrollX,C=a+window.scrollY;break;case"top-right":L=w+window.scrollX+i,C=a+window.scrollY}v(L),b(C),E(i),A(y),f(!!e||!p)},[s,p,k,c,d]);return{x:g,y:h,width:y,isOpen:p,triggerRef:Y,selectModalRef:j,placement:k,isKeyboardOpen:X,value:R,disabled:s,multiple:l,contentHeight:L,handleInputClick:S,handleClose:B,setValue:e=>{z===H?z(e):(z(e),H(e))}}};export{i as useSelectField};

package/dist/components/sidebar/menu/item/index.d.ts

@@ -3,6 +3,7 @@ type SidebarMenuItemProps = {
     icon: React.ReactNode;
     active?: boolean;
     to?: string;
+    href?: string;
     as?: React.ElementType;
 } & React.PropsWithChildren & React.HTMLAttributes<HTMLElement>;
 export declare const SidebarMenuItem: React.FC<SidebarMenuItemProps>;

package/dist/components/sidebar/menu/item/index.js

@@ -1 +1 @@
-import{__rest as t}from"tslib";import{jsxs as e,jsx as o}from"react/jsx-runtime";import{useRef as r,useState as i}from"react";import{SidebarMenuListItem as n,SidebarMenuItemIconBox as s,SidebarMenuItemText as c}from"../styled.js";import{useSidebar as m}from"../../context.js";import{useSidebarMenu as a}from"../context.js";import{SidebarMenuItemTooltip as d}from"./tooltip.js";const l=l=>{var{icon:p,children:h,active:f,as:v,to:j}=l,u=t(l,["icon","children","active","as","to"]);const{isOpen:x}=m(),{isShowTooltips:b}=a(),O=r(null),[$,M]=i(!1);return e(n,Object.assign({},u,{as:v,to:j,ref:O,onMouseEnter:()=>{M(!0)},onMouseLeave:()=>{M(!1)},"data-test":"sidebar-menu-item",children:[o(s,{$active:!!f,children:p}),o(c,{$isOpen:x,$active:!!f,children:h}),o(d,{hovered:$,hidden:x||!b,children:h})]}))};export{l as SidebarMenuItem};
+import{__rest as e}from"tslib";import{jsxs as t,jsx as o}from"react/jsx-runtime";import{useRef as r,useState as i}from"react";import{SidebarMenuListItem as n,SidebarMenuItemIconBox as s,SidebarMenuItemText as c}from"../styled.js";import{useSidebar as m}from"../../context.js";import{useSidebarMenu as a}from"../context.js";import{SidebarMenuItemTooltip as d}from"./tooltip.js";const h=h=>{var{icon:l,children:p,active:f,as:v,to:j,href:u}=h,x=e(h,["icon","children","active","as","to","href"]);const{isOpen:b}=m(),{isShowTooltips:O}=a(),$=r(null),[M,g]=i(!1);return t(n,Object.assign({},x,{as:v,to:j,href:u,ref:$,onMouseEnter:()=>{g(!0)},onMouseLeave:()=>{g(!1)},"data-test":"sidebar-menu-item",children:[o(s,{$active:!!f,children:l}),o(c,{$isOpen:b,$active:!!f,children:p}),o(d,{hovered:M,hidden:b||!O,children:p})]}))};export{h as SidebarMenuItem};

package/dist/components/switcher-select/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface SwitcherProps {
+    options: [string, string];
+    defaultOption?: 0 | 1;
+    onChange?: (selectedIndex: 0 | 1) => void;
+    className?: string;
+}
+export declare const SwitcherSelect: React.FC<SwitcherProps>;
+export {};

package/dist/components/switcher-select/index.js

@@ -0,0 +1 @@
+import{jsxs as e,jsx as n}from"react/jsx-runtime";import{useState as t,useRef as r,useEffect as i}from"react";import{SwitcherContainer as o,SwitcherSlider as c,SwitcherOption as l}from"./styled.js";const s=({options:s,defaultOption:u=0,onChange:d,className:f})=>{const[m,a]=t(u),[p,h]=t(0),[w,g]=t(0),C=r(null),v=r(null),j=r(null);i(()=>{k()},[m]),i(()=>{const e=()=>{k()};return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[m]);const k=()=>{const e=[v,j][m];if(e.current&&C.current){const n=C.current.getBoundingClientRect(),t=e.current.getBoundingClientRect(),r=t.left-n.left,{width:i}=t;h(r),g(i)}},x=()=>{a(e=>0===e?1:0),null==d||d(0===m?1:0)};return e(o,{ref:C,className:f,children:[n(c,{position:p,width:w}),n(l,{ref:v,onClick:x,children:s[0]}),n(l,{ref:j,onClick:x,children:s[1]})]})};export{s as SwitcherSelect};