@scbt-ecom/ui 0.98.0 → 0.100.0

package/dist/lib/shared/ui/dropdownList/DropdownList.js

@@ -1,2 +1,2 @@
-import{jsx as i}from"react/jsx-runtime";import{useRef as v}from"react";import{useKeyboardNavigation as b}from"./hooks/useKeyboardNavigation.js";import{isOptionActive as l}from"./model/utils.js";import{DropdownItem as _}from"./ui/dropdownItem/DropdownItem.js";import{useClickOutside as g}from"../../hooks/useClickOutside.js";import{cn as y}from"../../utils/cn.js";const j=({options:e,multiple:m,onPick:f,value:p,className:d,displayValue:c,classes:o,...x})=>{const w=v(null),{refs:u,focusedIndex:a,setFocusedIndex:r}=b({options:e,multiple:m,onPick:f});return g(w,()=>r(-1)),i("ul",{...x,ref:u.setRoot(),className:y("customScrollbar-y mt-1 max-h-[264px] w-full overflow-y-auto scroll-smooth rounded-md bg-color-white p-1 shadow-[0_8px_20px_0px_rgba(41,41,41,0.08)]",o==null?void 0:o.root,d),children:e.map((n,t)=>{const h=l(n,p);return i(_,{ref:u.setReference,item:n,active:h,focused:a===t,multiple:m,onPick:f,displayValue:c,onMouseEnter:()=>r(t),onMouseLeave:()=>r(-1),classes:o==null?void 0:o.item},t)})})};export{j as DropdownList};
+import{jsx as i}from"react/jsx-runtime";import{useRef as _}from"react";import{useKeyboardNavigation as a}from"./hooks/useKeyboardNavigation.js";import{isOptionActive as s}from"./model/utils.js";import{DropdownItem as y}from"./ui/dropdownItem/DropdownItem.js";import{useClickOutside as I}from"../../hooks/useClickOutside.js";import{cn as R}from"../../utils/cn.js";const A=({options:u,multiple:n,onPick:r,value:p,className:c,displayValue:x,classes:o,target:t,...w})=>{const h=_(null),{refs:d,focusedIndex:l,setFocusedIndex:m}=a({options:u,multiple:n,onPick:r,value:p}),b=e=>{r==null||r(e),t&&t.current&&t.current.focus()};return I(h,()=>m(-1)),i("ul",{...w,ref:d.setRoot(),className:R("customScrollbar-y mt-1 max-h-[264px] w-full overflow-y-auto scroll-smooth rounded-md bg-color-white p-1 shadow-[0_8px_20px_0px_rgba(41,41,41,0.08)]",o==null?void 0:o.root,c),children:u.map((e,f)=>{const v=s(e,p);return i(y,{ref:d.setReference,item:e,active:v,focused:l===f,multiple:n,onPick:b,displayValue:x,onMouseEnter:()=>m(f),onMouseLeave:()=>m(-1),classes:o==null?void 0:o.item},f)})})};export{A as DropdownList};
 //# sourceMappingURL=DropdownList.js.map

package/dist/lib/shared/ui/dropdownList/DropdownList.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownList.js","sources":["../../../../../lib/shared/ui/dropdownList/DropdownList.tsx"],"sourcesContent":["import { useRef } from 'react'\nimport { useKeyboardNavigation } from './hooks'\nimport { isOptionActive } from './model'\nimport { DropdownItem, type DropdownItemClasses, type DropdownItemOption } from './ui'\nimport { useClickOutside } from '$/shared/hooks'\nimport { cn } from '$/shared/utils'\n\nexport type DropdownListClasses = {\n  root?: string\n  item?: DropdownItemClasses\n}\n\nexport interface DropdownListProps<Multi extends boolean = false> extends React.HTMLAttributes<HTMLUListElement> {\n  options: DropdownItemOption[]\n  /**\n   * Значения выбранные по умолчанию\n   */\n  value?: Multi extends true ? DropdownItemOption[] : DropdownItemOption | null\n  /**\n   * Функция при выборе значения из списка\n   * @param item\n   */\n  onPick?: (item: DropdownItemOption) => void\n  /**\n   * Поддержка множественного выбора\n   */\n  multiple?: Multi\n  /**\n   * Функция для управления отображаемым значением\n   */\n  displayValue?: (option: DropdownItemOption) => string\n  /**\n   * Дополнительные стили\n   */\n  classes?: DropdownListClasses\n}\n\nexport const DropdownList = <Multi extends boolean>({\n  options,\n  multiple,\n  onPick,\n  value,\n  className,\n  displayValue,\n  classes,\n  ...props\n}: DropdownListProps<Multi>) => {\n  const ref = useRef<HTMLUListElement>(null)\n\n  const { refs, focusedIndex, setFocusedIndex } = useKeyboardNavigation<HTMLUListElement, HTMLLIElement>({\n    options,\n    multiple,\n    onPick\n  })\n\n  useClickOutside(ref, () => setFocusedIndex(-1))\n\n  return (\n    <ul\n      {...props}\n      ref={refs.setRoot()}\n      className={cn(\n        'customScrollbar-y mt-1 max-h-[264px] w-full overflow-y-auto scroll-smooth rounded-md bg-color-white p-1 shadow-[0_8px_20px_0px_rgba(41,41,41,0.08)]',\n        classes?.root,\n        className\n      )}\n    >\n      {options.map((option, index) => {\n        const active = isOptionActive(option, value)\n\n        return (\n          <DropdownItem\n            ref={refs.setReference}\n            key={index}\n            item={option}\n            active={active}\n            focused={focusedIndex === index}\n            multiple={multiple}\n            onPick={onPick}\n            displayValue={displayValue}\n            onMouseEnter={() => setFocusedIndex(index)}\n            onMouseLeave={() => setFocusedIndex(-1)}\n            classes={classes?.item}\n          />\n        )\n      })}\n    </ul>\n  )\n}\n"],"names":["DropdownList","options","multiple","onPick","value","className","displayValue","classes","props","ref","useRef","refs","focusedIndex","setFocusedIndex","useKeyboardNavigation","useClickOutside","jsx","cn","option","index","active","isOptionActive","DropdownItem"],"mappings":"2WAqCO,MAAMA,EAAe,CAAwB,CAClD,QAAAC,EACA,SAAAC,EACA,OAAAC,EACA,MAAAC,EACA,UAAAC,EACA,aAAAC,EACA,QAAAC,EACA,GAAGC,CACL,IAAgC,CAC9B,MAAMC,EAAMC,EAAyB,IAAI,EAEnC,CAAE,KAAAC,EAAM,aAAAC,EAAc,gBAAAC,CAAA,EAAoBC,EAAuD,CACrG,QAAAb,EACA,SAAAC,EACA,OAAAC,CAAA,CACD,EAED,OAAAY,EAAgBN,EAAK,IAAMI,EAAgB,EAAE,CAAC,EAG5CG,EAAC,KAAA,CACE,GAAGR,EACJ,IAAKG,EAAK,QAAA,EACV,UAAWM,EACT,sJACAV,GAAA,YAAAA,EAAS,KACTF,CAAA,EAGD,SAAAJ,EAAQ,IAAI,CAACiB,EAAQC,IAAU,CAC9B,MAAMC,EAASC,EAAeH,EAAQd,CAAK,EAE3C,OACEY,EAACM,EAAA,CACC,IAAKX,EAAK,aAEV,KAAMO,EACN,OAAAE,EACA,QAASR,IAAiBO,EAC1B,SAAAjB,EACA,OAAAC,EACA,aAAAG,EACA,aAAc,IAAMO,EAAgBM,CAAK,EACzC,aAAc,IAAMN,EAAgB,EAAE,EACtC,QAASN,GAAA,YAAAA,EAAS,IAAA,EATbY,CAAA,CAYX,CAAC,CAAA,CAAA,CAGP"}
+{"version":3,"file":"DropdownList.js","sources":["../../../../../lib/shared/ui/dropdownList/DropdownList.tsx"],"sourcesContent":["import { useRef } from 'react'\nimport { useKeyboardNavigation } from './hooks'\nimport { isOptionActive } from './model'\nimport { DropdownItem, type DropdownItemClasses, type DropdownItemOption } from './ui'\nimport { useClickOutside } from '$/shared/hooks'\nimport { cn } from '$/shared/utils'\n\nexport type DropdownListClasses = {\n  root?: string\n  item?: DropdownItemClasses\n}\n\nexport interface DropdownListProps<Multi extends boolean = false> extends React.HTMLAttributes<HTMLUListElement> {\n  options: DropdownItemOption[]\n  /**\n   * Значения выбранные по умолчанию\n   */\n  value?: Multi extends true ? DropdownItemOption[] : DropdownItemOption | null\n  /**\n   * Функция при выборе значения из списка\n   * @param item\n   */\n  onPick?: (item: DropdownItemOption) => void\n  /**\n   * Поддержка множественного выбора\n   */\n  multiple?: Multi\n  /**\n   * Функция для управления отображаемым значением\n   */\n  displayValue?: (option: DropdownItemOption) => string\n  /**\n   * Дополнительные стили\n   */\n  classes?: DropdownListClasses\n  target?: React.RefObject<HTMLElement>\n}\n\nexport const DropdownList = <Multi extends boolean>({\n  options,\n  multiple,\n  onPick,\n  value,\n  className,\n  displayValue,\n  classes,\n  target,\n  ...props\n}: DropdownListProps<Multi>) => {\n  const ref = useRef<HTMLUListElement>(null)\n\n  const { refs, focusedIndex, setFocusedIndex } = useKeyboardNavigation<HTMLUListElement, HTMLLIElement, Multi>({\n    options,\n    multiple,\n    onPick,\n    value\n  })\n\n  const elementPickHandler = (item: DropdownItemOption) => {\n    onPick?.(item)\n\n    if (target && target.current) {\n      target.current.focus()\n    }\n  }\n\n  useClickOutside(ref, () => setFocusedIndex(-1))\n\n  return (\n    <ul\n      {...props}\n      ref={refs.setRoot()}\n      className={cn(\n        'customScrollbar-y mt-1 max-h-[264px] w-full overflow-y-auto scroll-smooth rounded-md bg-color-white p-1 shadow-[0_8px_20px_0px_rgba(41,41,41,0.08)]',\n        classes?.root,\n        className\n      )}\n    >\n      {options.map((option, index) => {\n        const active = isOptionActive(option, value)\n\n        return (\n          <DropdownItem\n            ref={refs.setReference}\n            key={index}\n            item={option}\n            active={active}\n            focused={focusedIndex === index}\n            multiple={multiple}\n            onPick={elementPickHandler}\n            displayValue={displayValue}\n            onMouseEnter={() => setFocusedIndex(index)}\n            onMouseLeave={() => setFocusedIndex(-1)}\n            classes={classes?.item}\n          />\n        )\n      })}\n    </ul>\n  )\n}\n"],"names":["DropdownList","options","multiple","onPick","value","className","displayValue","classes","target","props","ref","useRef","refs","focusedIndex","setFocusedIndex","useKeyboardNavigation","elementPickHandler","item","useClickOutside","jsx","cn","option","index","active","isOptionActive","DropdownItem"],"mappings":"2WAsCO,MAAMA,EAAe,CAAwB,CAClD,QAAAC,EACA,SAAAC,EACA,OAAAC,EACA,MAAAC,EACA,UAAAC,EACA,aAAAC,EACA,QAAAC,EACA,OAAAC,EACA,GAAGC,CACL,IAAgC,CAC9B,MAAMC,EAAMC,EAAyB,IAAI,EAEnC,CAAE,KAAAC,EAAM,aAAAC,EAAc,gBAAAC,CAAA,EAAoBC,EAA8D,CAC5G,QAAAd,EACA,SAAAC,EACA,OAAAC,EACA,MAAAC,CAAA,CACD,EAEKY,EAAsBC,GAA6B,CACvDd,GAAA,MAAAA,EAASc,GAELT,GAAUA,EAAO,SACnBA,EAAO,QAAQ,MAAA,CAEnB,EAEA,OAAAU,EAAgBR,EAAK,IAAMI,EAAgB,EAAE,CAAC,EAG5CK,EAAC,KAAA,CACE,GAAGV,EACJ,IAAKG,EAAK,QAAA,EACV,UAAWQ,EACT,sJACAb,GAAA,YAAAA,EAAS,KACTF,CAAA,EAGD,SAAAJ,EAAQ,IAAI,CAACoB,EAAQC,IAAU,CAC9B,MAAMC,EAASC,EAAeH,EAAQjB,CAAK,EAE3C,OACEe,EAACM,EAAA,CACC,IAAKb,EAAK,aAEV,KAAMS,EACN,OAAAE,EACA,QAASV,IAAiBS,EAC1B,SAAApB,EACA,OAAQc,EACR,aAAAV,EACA,aAAc,IAAMQ,EAAgBQ,CAAK,EACzC,aAAc,IAAMR,EAAgB,EAAE,EACtC,QAASP,GAAA,YAAAA,EAAS,IAAA,EATbe,CAAA,CAYX,CAAC,CAAA,CAAA,CAGP"}

package/dist/lib/shared/ui/dropdownList/hooks/model/index.js

@@ -0,0 +1,2 @@
+import{scrollTo as l}from"./scrollTo.js";export{l as scrollTo};
+//# sourceMappingURL=index.js.map

package/dist/lib/shared/ui/dropdownList/hooks/model/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/lib/shared/ui/dropdownList/hooks/model/scrollTo.js

@@ -0,0 +1,2 @@
+import{listNavigate as c}from"../../model/utils.js";const g=4,d=(l,r)=>{const{options:t,elements:i,container:e,focusedIndex:n,behavior:a}=r;let o=c(n,l,t.length);for(;t[o].disabled;)o=c(o,l,t.length);const s=i[o],f=e.scrollTop,p=e.scrollTop+e.clientHeight;if(s.offsetTop<f||s.offsetTop>p){const T=s.offsetTop-e.offsetTop-g,h=n===0&&o===t.length-1||n===t.length-1&&o===0?"instant":"smooth";e.scrollTo({top:T,behavior:a||h})}return o};export{d as scrollTo};
+//# sourceMappingURL=scrollTo.js.map

package/dist/lib/shared/ui/dropdownList/hooks/model/scrollTo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollTo.js","sources":["../../../../../../../lib/shared/ui/dropdownList/hooks/model/scrollTo.ts"],"sourcesContent":["import { listNavigate } from '../../model'\nimport type { DropdownItemOption } from '../../ui/dropdownItem'\n\nconst ELEMENT_OFFSET = 4\n\ntype ScrollToProps = {\n  focusedIndex: number\n  options: DropdownItemOption[]\n  elements: HTMLElement[]\n  container: HTMLElement\n  behavior?: 'smooth' | 'instant'\n}\n\nexport const scrollTo = (direction: 1 | -1, params: ScrollToProps) => {\n  const { options, elements, container, focusedIndex, behavior: defaultBehavior } = params\n\n  let currentIndex = listNavigate(focusedIndex, direction, options.length)\n\n  while (options[currentIndex].disabled) {\n    currentIndex = listNavigate(currentIndex, direction, options.length)\n  }\n\n  const scrollElement = elements[currentIndex]\n\n  const containerTop = container.scrollTop\n  const containerBottom = container.scrollTop + container.clientHeight\n\n  if (scrollElement.offsetTop < containerTop || scrollElement.offsetTop > containerBottom) {\n    const scrollTop = scrollElement.offsetTop - container.offsetTop - ELEMENT_OFFSET\n\n    const behavior =\n      (focusedIndex === 0 && currentIndex === options.length - 1) || (focusedIndex === options.length - 1 && currentIndex === 0)\n        ? 'instant'\n        : 'smooth'\n\n    container.scrollTo({\n      top: scrollTop,\n      behavior: defaultBehavior || behavior\n    })\n  }\n\n  return currentIndex\n}\n"],"names":["ELEMENT_OFFSET","scrollTo","direction","params","options","elements","container","focusedIndex","defaultBehavior","currentIndex","listNavigate","scrollElement","containerTop","containerBottom","scrollTop","behavior"],"mappings":"oDAGA,MAAMA,EAAiB,EAUVC,EAAW,CAACC,EAAmBC,IAA0B,CACpE,KAAM,CAAE,QAAAC,EAAS,SAAAC,EAAU,UAAAC,EAAW,aAAAC,EAAc,SAAUC,GAAoBL,EAElF,IAAIM,EAAeC,EAAaH,EAAcL,EAAWE,EAAQ,MAAM,EAEvE,KAAOA,EAAQK,CAAY,EAAE,UAC3BA,EAAeC,EAAaD,EAAcP,EAAWE,EAAQ,MAAM,EAGrE,MAAMO,EAAgBN,EAASI,CAAY,EAErCG,EAAeN,EAAU,UACzBO,EAAkBP,EAAU,UAAYA,EAAU,aAExD,GAAIK,EAAc,UAAYC,GAAgBD,EAAc,UAAYE,EAAiB,CACvF,MAAMC,EAAYH,EAAc,UAAYL,EAAU,UAAYN,EAE5De,EACHR,IAAiB,GAAKE,IAAiBL,EAAQ,OAAS,GAAOG,IAAiBH,EAAQ,OAAS,GAAKK,IAAiB,EACpH,UACA,SAENH,EAAU,SAAS,CACjB,IAAKQ,EACL,SAAUN,GAAmBO,CAAA,CAC9B,CACH,CAEA,OAAON,CACT"}

package/dist/lib/shared/ui/dropdownList/hooks/useKeyboardNavigation.js

@@ -1,2 +1,2 @@
-import{useState as E,useRef as T,useMemo as R,useEffect as v}from"react";import{listNavigate as h}from"../model/utils.js";const x=4,A=({options:e,multiple:m,onPick:c})=>{const[t,l]=E(-1),a=T(null),i=T([]),g=R(()=>({setReference:o=>{o&&i.current.push(o)},setRoot:()=>a}),[]);return v(()=>{if(!a.current)return;const o=new AbortController,n=a.current;return window.addEventListener("keydown",d=>{let s=-1;switch(d.key){case"ArrowUp":s=-1;break;case"ArrowDown":s=1;break;case" ":case"Enter":if(t<0)return;d.preventDefault();const u=e[t];c==null||c(u),m||l(-1);return;default:return}let r=h(t,s,e.length);for(;e[r].disabled;)r=h(r,s,e.length);const f=i.current[r],p=n.scrollTop,w=n.scrollTop+n.clientHeight;if(f.offsetTop<p||f.offsetTop>w){const u=f.offsetTop-n.offsetTop-x,b=t===0&&r===e.length-1||t===e.length-1&&r===0?"instant":"smooth";n.scrollTo({top:u,behavior:b})}l(r)},{signal:o.signal}),()=>{o.abort()}},[t,e]),{refs:g,focusedIndex:t,setFocusedIndex:l}};export{A as useKeyboardNavigation};
+import{useState as x,useRef as i,useMemo as I,useEffect as d}from"react";import{isOptionActive as v}from"../model/utils.js";import{scrollTo as m}from"./model/scrollTo.js";const h=({options:r,multiple:b,onPick:a,value:p})=>{const[o,s]=x(0),c=i(null),l=i([]),w=I(()=>({setReference:t=>{t&&l.current.push(t)},setRoot:()=>c}),[]);return d(()=>{if(!c.current)return;const t=c.current;let f=-1;for(let e=0;e<r.length;e+=1)if(v(r[e],p)){s(e),f=e;break}const n=l.current[f];if(n){const e=n.offsetTop-t.offsetTop-4;t.scrollTo({top:e,behavior:"instant"})}},[r]),d(()=>{if(!c.current)return;const t=new AbortController,f=c.current;return window.addEventListener("keydown",n=>{switch(n.key){case"ArrowUp":{n.preventDefault();const u=m(-1,{options:r,focusedIndex:o,container:f,elements:l.current});s(u);break}case"ArrowDown":{n.preventDefault();const u=m(1,{options:r,focusedIndex:o,container:f,elements:l.current});s(u);break}case"Enter":if(n.preventDefault(),o<0)return;const e=r[o];a==null||a(e),b||s(0);break}},{signal:t.signal}),()=>{t.abort()}},[o,r]),{refs:w,focusedIndex:o,setFocusedIndex:s}};export{h as useKeyboardNavigation};
 //# sourceMappingURL=useKeyboardNavigation.js.map

package/dist/lib/shared/ui/dropdownList/hooks/useKeyboardNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useKeyboardNavigation.js","sources":["../../../../../../lib/shared/ui/dropdownList/hooks/useKeyboardNavigation.ts"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react'\nimport { listNavigate } from '../model'\nimport { type DropdownItemOption } from '../ui/dropdownItem'\n\nexport type UseKeyboardNavigationProps = {\n  options: DropdownItemOption[]\n  multiple?: boolean\n  onPick?: (option: DropdownItemOption) => void\n}\n\nconst ELEMENT_OFFSET = 4\n\nexport const useKeyboardNavigation = <Container extends HTMLElement, Element extends HTMLElement>({\n  options,\n  multiple,\n  onPick\n}: UseKeyboardNavigationProps) => {\n  const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n\n  const containerRef = useRef<Container>(null)\n  const itemRefs = useRef<Element[]>([])\n\n  const refs = useMemo(\n    () => ({\n      setReference: (node: Element | null) => {\n        if (node) itemRefs.current.push(node)\n      },\n      setRoot: () => containerRef\n    }),\n    []\n  )\n\n  useEffect(() => {\n    if (!containerRef.current) return\n\n    const abortController = new AbortController()\n    const container = containerRef.current\n\n    window.addEventListener(\n      'keydown',\n      (event) => {\n        let direction: 1 | -1 = -1\n\n        switch (event.key) {\n          case 'ArrowUp':\n            direction = -1\n            break\n          case 'ArrowDown':\n            direction = 1\n            break\n          case ' ':\n          case 'Enter':\n            if (focusedIndex < 0) return\n\n            event.preventDefault()\n\n            const selectedItem = options[focusedIndex]\n            onPick?.(selectedItem)\n            if (!multiple) setFocusedIndex(-1)\n\n            return\n          default:\n            return\n        }\n\n        let currentIndex = listNavigate(focusedIndex, direction, options.length)\n\n        while (options[currentIndex].disabled) {\n          currentIndex = listNavigate(currentIndex, direction, options.length)\n        }\n\n        const scrollElement = itemRefs.current[currentIndex]\n\n        const containerTop = container.scrollTop\n        const containerBottom = container.scrollTop + container.clientHeight\n\n        if (scrollElement.offsetTop < containerTop || scrollElement.offsetTop > containerBottom) {\n          const scrollTop = scrollElement.offsetTop - container.offsetTop - ELEMENT_OFFSET\n\n          const behavior =\n            (focusedIndex === 0 && currentIndex === options.length - 1) ||\n            (focusedIndex === options.length - 1 && currentIndex === 0)\n              ? 'instant'\n              : 'smooth'\n\n          container.scrollTo({\n            top: scrollTop,\n            behavior\n          })\n        }\n\n        setFocusedIndex(currentIndex)\n      },\n      { signal: abortController.signal }\n    )\n\n    return () => {\n      abortController.abort()\n    }\n  }, [focusedIndex, options])\n\n  return { refs, focusedIndex, setFocusedIndex }\n}\n"],"names":["ELEMENT_OFFSET","useKeyboardNavigation","options","multiple","onPick","focusedIndex","setFocusedIndex","useState","containerRef","useRef","itemRefs","refs","useMemo","node","useEffect","abortController","container","event","direction","selectedItem","currentIndex","listNavigate","scrollElement","containerTop","containerBottom","scrollTop","behavior"],"mappings":"0HAUA,MAAMA,EAAiB,EAEVC,EAAwB,CAA6D,CAChG,QAAAC,EACA,SAAAC,EACA,OAAAC,CACF,IAAkC,CAChC,KAAM,CAACC,EAAcC,CAAe,EAAIC,EAAiB,EAAE,EAErDC,EAAeC,EAAkB,IAAI,EACrCC,EAAWD,EAAkB,EAAE,EAE/BE,EAAOC,EACX,KAAO,CACL,aAAeC,GAAyB,CAClCA,GAAMH,EAAS,QAAQ,KAAKG,CAAI,CACtC,EACA,QAAS,IAAML,CAAA,GAEjB,CAAA,CAAC,EAGH,OAAAM,EAAU,IAAM,CACd,GAAI,CAACN,EAAa,QAAS,OAE3B,MAAMO,EAAkB,IAAI,gBACtBC,EAAYR,EAAa,QAE/B,cAAO,iBACL,UACCS,GAAU,CACT,IAAIC,EAAoB,GAExB,OAAQD,EAAM,IAAA,CACZ,IAAK,UACHC,EAAY,GACZ,MACF,IAAK,YACHA,EAAY,EACZ,MACF,IAAK,IACL,IAAK,QACH,GAAIb,EAAe,EAAG,OAEtBY,EAAM,eAAA,EAEN,MAAME,EAAejB,EAAQG,CAAY,EACzCD,GAAA,MAAAA,EAASe,GACJhB,GAAUG,EAAgB,EAAE,EAEjC,OACF,QACE,MAAA,CAGJ,IAAIc,EAAeC,EAAahB,EAAca,EAAWhB,EAAQ,MAAM,EAEvE,KAAOA,EAAQkB,CAAY,EAAE,UAC3BA,EAAeC,EAAaD,EAAcF,EAAWhB,EAAQ,MAAM,EAGrE,MAAMoB,EAAgBZ,EAAS,QAAQU,CAAY,EAE7CG,EAAeP,EAAU,UACzBQ,EAAkBR,EAAU,UAAYA,EAAU,aAExD,GAAIM,EAAc,UAAYC,GAAgBD,EAAc,UAAYE,EAAiB,CACvF,MAAMC,EAAYH,EAAc,UAAYN,EAAU,UAAYhB,EAE5D0B,EACHrB,IAAiB,GAAKe,IAAiBlB,EAAQ,OAAS,GACxDG,IAAiBH,EAAQ,OAAS,GAAKkB,IAAiB,EACrD,UACA,SAENJ,EAAU,SAAS,CACjB,IAAKS,EACL,SAAAC,CAAA,CACD,CACH,CAEApB,EAAgBc,CAAY,CAC9B,EACA,CAAE,OAAQL,EAAgB,MAAA,CAAO,EAG5B,IAAM,CACXA,EAAgB,MAAA,CAClB,CACF,EAAG,CAACV,EAAcH,CAAO,CAAC,EAEnB,CAAE,KAAAS,EAAM,aAAAN,EAAc,gBAAAC,CAAA,CAC/B"}
+{"version":3,"file":"useKeyboardNavigation.js","sources":["../../../../../../lib/shared/ui/dropdownList/hooks/useKeyboardNavigation.ts"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react'\nimport { isOptionActive } from '../model'\nimport { type DropdownItemOption } from '../ui/dropdownItem'\nimport { scrollTo } from './model'\n\nexport type UseKeyboardNavigationProps<Multi extends boolean> = {\n  options: DropdownItemOption[]\n  multiple?: Multi\n  onPick?: (option: DropdownItemOption) => void\n  value?: Multi extends true ? DropdownItemOption[] : DropdownItemOption | null\n}\n\nexport const useKeyboardNavigation = <Container extends HTMLElement, Element extends HTMLElement, Multi extends boolean = false>({\n  options,\n  multiple,\n  onPick,\n  value\n}: UseKeyboardNavigationProps<Multi>) => {\n  const [focusedIndex, setFocusedIndex] = useState<number>(0)\n\n  const containerRef = useRef<Container>(null)\n  const itemRefs = useRef<Element[]>([])\n\n  const refs = useMemo(\n    () => ({\n      setReference: (node: Element | null) => {\n        if (node) itemRefs.current.push(node)\n      },\n      setRoot: () => containerRef\n    }),\n    []\n  )\n\n  // find and scroll to active element if exists\n  useEffect(() => {\n    if (!containerRef.current) return\n\n    const container = containerRef.current\n    let activeIndex = -1\n\n    for (let i = 0; i < options.length; i += 1) {\n      if (isOptionActive(options[i], value)) {\n        setFocusedIndex(i)\n        activeIndex = i\n        break\n      }\n    }\n\n    const scrollElement = itemRefs.current[activeIndex]\n\n    if (scrollElement) {\n      const scrollTop = scrollElement.offsetTop - container.offsetTop - 4\n\n      container.scrollTo({\n        top: scrollTop,\n        behavior: 'instant'\n      })\n    }\n  }, [options])\n\n  useEffect(() => {\n    if (!containerRef.current) return\n\n    const abortController = new AbortController()\n    const container = containerRef.current\n\n    window.addEventListener(\n      'keydown',\n      (event) => {\n        switch (event.key) {\n          case 'ArrowUp': {\n            event.preventDefault()\n\n            const nextIndex = scrollTo(-1, { options, focusedIndex, container, elements: itemRefs.current })\n            setFocusedIndex(nextIndex)\n\n            break\n          }\n          case 'ArrowDown': {\n            event.preventDefault()\n\n            const nextIndex = scrollTo(1, { options, focusedIndex, container, elements: itemRefs.current })\n            setFocusedIndex(nextIndex)\n\n            break\n          }\n          case 'Enter':\n            event.preventDefault()\n\n            if (focusedIndex < 0) return\n\n            const selectedItem = options[focusedIndex]\n            onPick?.(selectedItem)\n            if (!multiple) setFocusedIndex(0)\n\n            break\n        }\n      },\n      { signal: abortController.signal }\n    )\n\n    return () => {\n      abortController.abort()\n    }\n  }, [focusedIndex, options])\n\n  return { refs, focusedIndex, setFocusedIndex }\n}\n"],"names":["useKeyboardNavigation","options","multiple","onPick","value","focusedIndex","setFocusedIndex","useState","containerRef","useRef","itemRefs","refs","useMemo","node","useEffect","container","activeIndex","i","isOptionActive","scrollElement","scrollTop","abortController","event","nextIndex","scrollTo","selectedItem"],"mappings":"2KAYO,MAAMA,EAAwB,CAA4F,CAC/H,QAAAC,EACA,SAAAC,EACA,OAAAC,EACA,MAAAC,CACF,IAAyC,CACvC,KAAM,CAACC,EAAcC,CAAe,EAAIC,EAAiB,CAAC,EAEpDC,EAAeC,EAAkB,IAAI,EACrCC,EAAWD,EAAkB,EAAE,EAE/BE,EAAOC,EACX,KAAO,CACL,aAAeC,GAAyB,CAClCA,GAAMH,EAAS,QAAQ,KAAKG,CAAI,CACtC,EACA,QAAS,IAAML,CAAA,GAEjB,CAAA,CAAC,EAIH,OAAAM,EAAU,IAAM,CACd,GAAI,CAACN,EAAa,QAAS,OAE3B,MAAMO,EAAYP,EAAa,QAC/B,IAAIQ,EAAc,GAElB,QAASC,EAAI,EAAGA,EAAIhB,EAAQ,OAAQgB,GAAK,EACvC,GAAIC,EAAejB,EAAQgB,CAAC,EAAGb,CAAK,EAAG,CACrCE,EAAgBW,CAAC,EACjBD,EAAcC,EACd,KACF,CAGF,MAAME,EAAgBT,EAAS,QAAQM,CAAW,EAElD,GAAIG,EAAe,CACjB,MAAMC,EAAYD,EAAc,UAAYJ,EAAU,UAAY,EAElEA,EAAU,SAAS,CACjB,IAAKK,EACL,SAAU,SAAA,CACX,CACH,CACF,EAAG,CAACnB,CAAO,CAAC,EAEZa,EAAU,IAAM,CACd,GAAI,CAACN,EAAa,QAAS,OAE3B,MAAMa,EAAkB,IAAI,gBACtBN,EAAYP,EAAa,QAE/B,cAAO,iBACL,UACCc,GAAU,CACT,OAAQA,EAAM,IAAA,CACZ,IAAK,UAAW,CACdA,EAAM,eAAA,EAEN,MAAMC,EAAYC,EAAS,GAAI,CAAE,QAAAvB,EAAS,aAAAI,EAAc,UAAAU,EAAW,SAAUL,EAAS,QAAS,EAC/FJ,EAAgBiB,CAAS,EAEzB,KACF,CACA,IAAK,YAAa,CAChBD,EAAM,eAAA,EAEN,MAAMC,EAAYC,EAAS,EAAG,CAAE,QAAAvB,EAAS,aAAAI,EAAc,UAAAU,EAAW,SAAUL,EAAS,QAAS,EAC9FJ,EAAgBiB,CAAS,EAEzB,KACF,CACA,IAAK,QAGH,GAFAD,EAAM,eAAA,EAEFjB,EAAe,EAAG,OAEtB,MAAMoB,EAAexB,EAAQI,CAAY,EACzCF,GAAA,MAAAA,EAASsB,GACJvB,GAAUI,EAAgB,CAAC,EAEhC,KAAA,CAEN,EACA,CAAE,OAAQe,EAAgB,MAAA,CAAO,EAG5B,IAAM,CACXA,EAAgB,MAAA,CAClB,CACF,EAAG,CAAChB,EAAcJ,CAAO,CAAC,EAEnB,CAAE,KAAAU,EAAM,aAAAN,EAAc,gBAAAC,CAAA,CAC/B"}

package/dist/lib/shared/ui/formElements/controlled/combobox/ComboboxControl.js

@@ -1,2 +1,2 @@
-import{jsxs as G,jsx as e}from"react/jsx-runtime";import{useMemo as S}from"react";import{useController as T}from"../../../../../../node_modules/react-hook-form/dist/index.esm.js";import{Combobox as k}from"../../uncontrolled/combobox/combobox.js";import{cn as q}from"../../../../utils/cn.js";import{TypeGuards as s}from"../../../../utils/typeGuards.js";import"../../../button/Button.js";import"../../../buttonIcon/ButtonIcon.js";import"../../../calendar/Calendar.js";import"../../../calendar/model/utils.js";import"../../../accordion/Accordion.js";import"react-dom";import"../../../modal/ui/IframeModalContent.js";import"../../../../../../node_modules/react-hot-toast/dist/index.js";import"../../../table/ui/primitives/Primitives.js";import"../../../carousel/ui/CarouselContent.js";import"../../../slot/Slot.js";import"../../uncontrolled/autocomplete/Autocomplete.js";import"../../uncontrolled/checkbox/Checkbox.js";import"../../uncontrolled/dayPicker/DayPicker.js";import"../../uncontrolled/input/Input.js";import"../../uncontrolled/inputOtp/InputOtpBase.js";import"../../uncontrolled/maskInput/MaskInput.js";import"../../uncontrolled/radio/RadioGroup.js";import"../../uncontrolled/radio/ui/RadioItem.js";import"../../uncontrolled/slider/SliderBase.js";import"../../uncontrolled/switch/Switch.js";import"../../uncontrolled/textarea/Textarea.js";import"../../uncontrolled/uploader/UploaderBase.js";import"../editor/ui/Editor.js";import"../input/MaskInputControl.js";import"../../../dropdownList/ui/dropdownItem/DropdownItem.js";import{MessageView as z}from"../../ui/MessageView.js";const ao=({control:n,className:l,name:c,rules:f,shouldUnregister:a,disabled:t,defaultValue:g,options:m,helperText:x,returnValue:r,classes:C,...d})=>{const{field:b,fieldState:h}=T({control:n,name:c,rules:f,shouldUnregister:a,disabled:t,defaultValue:g}),{error:i,invalid:u}=h,{value:p,onChange:y,...j}=b,{root:w,combobox:A,message:M}=C??{},N=o=>{s.isArray(o)||y(r&&o?r(o):(o==null?void 0:o.value)??null)},F=S(()=>s.isArray(p)?null:m.find(o=>(r?r(o):o.value)===p)??null,[m,p]);return G("div",{className:q("w-full items-start gap-y-2",w,l),children:[e(k,{...d,...j,options:m,value:F,onChange:N,invalid:u,disabled:t,multiple:!1,classes:A}),e(z,{text:i?i.message:x,className:M,intent:i?"error":"simple",disabled:t})]})};export{ao as ComboboxControl};
+import{jsxs as H,jsx as i}from"react/jsx-runtime";import{useController as M}from"../../../../../../node_modules/react-hook-form/dist/index.esm.js";import{Combobox as S}from"../../uncontrolled/combobox/combobox.js";import{useComboboxControl as V}from"./hooks/useComboboxControl.js";import{cn as k}from"../../../../utils/cn.js";import"../../../button/Button.js";import"../../../buttonIcon/ButtonIcon.js";import"../../../calendar/Calendar.js";import"../../../calendar/model/utils.js";import"../../../accordion/Accordion.js";import"react";import"react-dom";import"../../../modal/ui/IframeModalContent.js";import"../../../../../../node_modules/react-hot-toast/dist/index.js";import"../../../table/ui/primitives/Primitives.js";import"../../../carousel/ui/CarouselContent.js";import"../../../slot/Slot.js";import"../../uncontrolled/autocomplete/Autocomplete.js";import"../../uncontrolled/checkbox/Checkbox.js";import"../../uncontrolled/dayPicker/DayPicker.js";import"../../uncontrolled/input/Input.js";import"../../uncontrolled/inputOtp/InputOtpBase.js";import"../../uncontrolled/maskInput/MaskInput.js";import"../../uncontrolled/radio/RadioGroup.js";import"../../uncontrolled/radio/ui/RadioItem.js";import"../../uncontrolled/slider/SliderBase.js";import"../../uncontrolled/switch/Switch.js";import"../../uncontrolled/textarea/Textarea.js";import"../../uncontrolled/uploader/UploaderBase.js";import"../editor/ui/Editor.js";import"../input/MaskInputControl.js";import"../../../dropdownList/ui/dropdownItem/DropdownItem.js";import{MessageView as q}from"../../ui/MessageView.js";const co=({control:p,className:e,name:s,rules:n,shouldUnregister:a,disabled:o,defaultValue:l,options:t,helperText:c,returnValue:f,classes:x,multiple:m,...C})=>{const{field:g,fieldState:b}=M({control:p,name:s,rules:n,shouldUnregister:a,disabled:o,defaultValue:l}),{error:r,invalid:u}=b,{value:d,onChange:h,...v}=g,{root:j,combobox:w,message:N}=x??{},{selected:y,changeHandler:F}=V({value:d,onChange:h,multiple:m,returnValue:f,options:t});return H("div",{className:k("w-full items-start gap-y-2",j,e),children:[i(S,{...C,...v,options:t,value:y,onChange:F,invalid:u,disabled:o,multiple:m,classes:w}),i(q,{text:r?r.message:c,className:N,intent:r?"error":"simple",disabled:o})]})};export{co as ComboboxControl};
 //# sourceMappingURL=ComboboxControl.js.map

package/dist/lib/shared/ui/formElements/controlled/combobox/ComboboxControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxControl.js","sources":["../../../../../../../lib/shared/ui/formElements/controlled/combobox/ComboboxControl.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { type Control, type FieldPath, type FieldValues, useController, type UseControllerProps } from 'react-hook-form'\nimport {\n  type ChangeHandler,\n  Combobox,\n  type ComboboxClasses,\n  type ComboboxItemOption,\n  type ComboboxProps,\n  type ComboboxValue\n} from '../../uncontrolled/combobox'\nimport { MessageView } from '$/shared/ui/formElements/ui'\nimport { cn, TypeGuards } from '$/shared/utils'\n\nexport type ComboboxControlClasses = {\n  root?: string\n  message?: string\n  combobox?: ComboboxClasses\n}\n\nexport type ComboboxControlProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> = UseControllerProps<TFieldValues, TName> &\n  ComboboxProps<false> & {\n    control: Control<TFieldValues>\n    helperText?: string\n    returnValue?: (option: ComboboxItemOption) => string | null\n    classes?: ComboboxControlClasses\n  }\n\nexport const ComboboxControl = <TFieldValues extends FieldValues>({\n  control,\n  className,\n  name,\n  rules,\n  shouldUnregister,\n  disabled,\n  defaultValue,\n  options,\n  helperText,\n  returnValue,\n  classes,\n  ...props\n}: ComboboxControlProps<TFieldValues>) => {\n  const { field, fieldState } = useController({\n    control,\n    name,\n    rules,\n    shouldUnregister,\n    disabled,\n    defaultValue\n  })\n\n  const { error, invalid } = fieldState\n  const { value, onChange, ...restField } = field\n\n  const { root, combobox, message } = classes ?? {}\n\n  const onValueChange: ChangeHandler<false> = (value) => {\n    if (TypeGuards.isArray(value)) return\n\n    onChange(returnValue && value ? returnValue(value) : (value?.value ?? null))\n  }\n\n  const selected = useMemo<ComboboxValue<false>>(() => {\n    if (TypeGuards.isArray(value)) return null\n\n    return options.find((option) => (returnValue ? returnValue(option) : option.value) === value) ?? null\n  }, [options, value])\n\n  return (\n    <div className={cn('w-full items-start gap-y-2', root, className)}>\n      <Combobox\n        {...props}\n        {...restField}\n        options={options}\n        value={selected}\n        onChange={onValueChange}\n        invalid={invalid}\n        disabled={disabled}\n        multiple={false}\n        classes={combobox}\n      />\n      <MessageView\n        text={error ? error.message : helperText}\n        className={message}\n        intent={error ? 'error' : 'simple'}\n        disabled={disabled}\n      />\n    </div>\n  )\n}\n"],"names":["ComboboxControl","control","className","name","rules","shouldUnregister","disabled","defaultValue","options","helperText","returnValue","classes","props","field","fieldState","useController","error","invalid","value","onChange","restField","root","combobox","message","onValueChange","TypeGuards","selected","useMemo","option","cn","jsx","Combobox","MessageView"],"mappings":"6iDA8BO,MAAMA,GAAkB,CAAmC,CAChE,QAAAC,EACA,UAAAC,EACA,KAAAC,EACA,MAAAC,EACA,iBAAAC,EACA,SAAAC,EACA,aAAAC,EACA,QAAAC,EACA,WAAAC,EACA,YAAAC,EACA,QAAAC,EACA,GAAGC,CACL,IAA0C,CACxC,KAAM,CAAE,MAAAC,EAAO,WAAAC,CAAA,EAAeC,EAAc,CAC1C,QAAAd,EACA,KAAAE,EACA,MAAAC,EACA,iBAAAC,EACA,SAAAC,EACA,aAAAC,CAAA,CACD,EAEK,CAAE,MAAAS,EAAO,QAAAC,CAAA,EAAYH,EACrB,CAAE,MAAAI,EAAO,SAAAC,EAAU,GAAGC,GAAcP,EAEpC,CAAE,KAAAQ,EAAM,SAAAC,EAAU,QAAAC,CAAA,EAAYZ,GAAW,CAAA,EAEzCa,EAAuCN,GAAU,CACjDO,EAAW,QAAQP,CAAK,GAE5BC,EAAST,GAAeQ,EAAQR,EAAYQ,CAAK,GAAKA,GAAAA,YAAAA,EAAO,QAAS,IAAK,CAC7E,EAEMQ,EAAWC,EAA8B,IACzCF,EAAW,QAAQP,CAAK,EAAU,KAE/BV,EAAQ,KAAMoB,IAAYlB,EAAcA,EAAYkB,CAAM,EAAIA,EAAO,SAAWV,CAAK,GAAK,KAChG,CAACV,EAASU,CAAK,CAAC,EAEnB,SACG,MAAA,CAAI,UAAWW,EAAG,6BAA8BR,EAAMnB,CAAS,EAC9D,SAAA,CAAA4B,EAACC,EAAA,CACE,GAAGnB,EACH,GAAGQ,EACJ,QAAAZ,EACA,MAAOkB,EACP,SAAUF,EACV,QAAAP,EACA,SAAAX,EACA,SAAU,GACV,QAASgB,CAAA,CAAA,EAEXQ,EAACE,EAAA,CACC,KAAMhB,EAAQA,EAAM,QAAUP,EAC9B,UAAWc,EACX,OAAQP,EAAQ,QAAU,SAC1B,SAAAV,CAAA,CAAA,CACF,EACF,CAEJ"}
+{"version":3,"file":"ComboboxControl.js","sources":["../../../../../../../lib/shared/ui/formElements/controlled/combobox/ComboboxControl.tsx"],"sourcesContent":["import { type Control, type FieldPath, type FieldValues, useController, type UseControllerProps } from 'react-hook-form'\nimport { Combobox, type ComboboxClasses, type ComboboxItemOption, type ComboboxProps } from '../../uncontrolled/combobox'\nimport { useComboboxControl } from './hooks'\nimport { MessageView } from '$/shared/ui/formElements/ui'\nimport { cn } from '$/shared/utils'\n\nexport type ComboboxControlClasses = {\n  root?: string\n  message?: string\n  combobox?: ComboboxClasses\n}\n\nexport type ComboboxControlProps<\n  Multi extends boolean = false,\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> = UseControllerProps<TFieldValues, TName> &\n  ComboboxProps<Multi> & {\n    control: Control<TFieldValues>\n    helperText?: string\n    returnValue?: (option: ComboboxItemOption) => string | null\n    classes?: ComboboxControlClasses\n  }\n\nexport const ComboboxControl = <Multi extends boolean = false, TFieldValues extends FieldValues = FieldValues>({\n  control,\n  className,\n  name,\n  rules,\n  shouldUnregister,\n  disabled,\n  defaultValue,\n  options,\n  helperText,\n  returnValue,\n  classes,\n  multiple,\n  ...props\n}: ComboboxControlProps<Multi, TFieldValues>) => {\n  const { field, fieldState } = useController({\n    control,\n    name,\n    rules,\n    shouldUnregister,\n    disabled,\n    defaultValue\n  })\n\n  const { error, invalid } = fieldState\n  const { value, onChange, ...restField } = field\n\n  const { root, combobox, message } = classes ?? {}\n\n  const { selected, changeHandler } = useComboboxControl({\n    value,\n    onChange,\n    multiple,\n    returnValue,\n    options\n  })\n\n  return (\n    <div className={cn('w-full items-start gap-y-2', root, className)}>\n      <Combobox\n        {...props}\n        {...restField}\n        options={options}\n        value={selected}\n        onChange={changeHandler}\n        invalid={invalid}\n        disabled={disabled}\n        multiple={multiple}\n        classes={combobox}\n      />\n      <MessageView\n        text={error ? error.message : helperText}\n        className={message}\n        intent={error ? 'error' : 'simple'}\n        disabled={disabled}\n      />\n    </div>\n  )\n}\n"],"names":["ComboboxControl","control","className","name","rules","shouldUnregister","disabled","defaultValue","options","helperText","returnValue","classes","multiple","props","field","fieldState","useController","error","invalid","value","onChange","restField","root","combobox","message","selected","changeHandler","useComboboxControl","cn","jsx","Combobox","MessageView"],"mappings":"iiDAwBO,MAAMA,GAAkB,CAAgF,CAC7G,QAAAC,EACA,UAAAC,EACA,KAAAC,EACA,MAAAC,EACA,iBAAAC,EACA,SAAAC,EACA,aAAAC,EACA,QAAAC,EACA,WAAAC,EACA,YAAAC,EACA,QAAAC,EACA,SAAAC,EACA,GAAGC,CACL,IAAiD,CAC/C,KAAM,CAAE,MAAAC,EAAO,WAAAC,CAAA,EAAeC,EAAc,CAC1C,QAAAf,EACA,KAAAE,EACA,MAAAC,EACA,iBAAAC,EACA,SAAAC,EACA,aAAAC,CAAA,CACD,EAEK,CAAE,MAAAU,EAAO,QAAAC,CAAA,EAAYH,EACrB,CAAE,MAAAI,EAAO,SAAAC,EAAU,GAAGC,GAAcP,EAEpC,CAAE,KAAAQ,EAAM,SAAAC,EAAU,QAAAC,CAAA,EAAYb,GAAW,CAAA,EAEzC,CAAE,SAAAc,EAAU,cAAAC,CAAA,EAAkBC,EAAmB,CACrD,MAAAR,EACA,SAAAC,EACA,SAAAR,EACA,YAAAF,EACA,QAAAF,CAAA,CACD,EAED,SACG,MAAA,CAAI,UAAWoB,EAAG,6BAA8BN,EAAMpB,CAAS,EAC9D,SAAA,CAAA2B,EAACC,EAAA,CACE,GAAGjB,EACH,GAAGQ,EACJ,QAAAb,EACA,MAAOiB,EACP,SAAUC,EACV,QAAAR,EACA,SAAAZ,EACA,SAAAM,EACA,QAASW,CAAA,CAAA,EAEXM,EAACE,EAAA,CACC,KAAMd,EAAQA,EAAM,QAAUR,EAC9B,UAAWe,EACX,OAAQP,EAAQ,QAAU,SAC1B,SAAAX,CAAA,CAAA,CACF,EACF,CAEJ"}

package/dist/lib/shared/ui/formElements/controlled/combobox/hooks/index.js

@@ -0,0 +1,2 @@
+import{useComboboxControl as b}from"./useComboboxControl.js";export{b as useComboboxControl};
+//# sourceMappingURL=index.js.map

package/dist/lib/shared/ui/formElements/controlled/combobox/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/lib/shared/ui/formElements/controlled/combobox/hooks/useComboboxControl.js

@@ -0,0 +1,2 @@
+import{useMemo as p,useCallback as g}from"react";import{TypeGuards as a}from"../../../../../utils/typeGuards.js";const l=({options:c,multiple:e,onChange:f,returnValue:n,value:r})=>{const i=p(()=>{const s=new Map;for(const t of c){const o=n?n(t):t.value;s.set(o,t)}return s},[c]),m=g(s=>{if(s)if(e){if(!a.isArray(s))return;const t=s.map(o=>n?n(o):o.value);f(t)}else{const t=s,o=n?n(t):t.value;f(o)}},[]),d=p(()=>r?e?a.isArray(r)?r.map(o=>i.get(o)).filter(o=>o!==void 0):[]:i.get(r)??null:e?[]:null,[e,i,r]);return{changeHandler:m,selected:d}};export{l as useComboboxControl};
+//# sourceMappingURL=useComboboxControl.js.map

package/dist/lib/shared/ui/formElements/controlled/combobox/hooks/useComboboxControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComboboxControl.js","sources":["../../../../../../../../lib/shared/ui/formElements/controlled/combobox/hooks/useComboboxControl.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react'\nimport { type ChangeHandler, type ComboboxItemOption, type ComboboxValue } from '$/shared/ui/formElements/uncontrolled/combobox'\nimport { TypeGuards } from '$/shared/utils'\n\ntype Value<Multi extends boolean> = Multi extends true ? string[] : string | null\n\ninterface UseComboboxControlProps<Multi extends boolean> {\n  multiple?: Multi\n  options: ComboboxItemOption[]\n  returnValue?: (option: ComboboxItemOption) => string | null\n  onChange: (...event: any[]) => void\n  value: Value<Multi>\n}\n\nexport const useComboboxControl = <Multi extends boolean>({\n  options,\n  multiple,\n  onChange,\n  returnValue,\n  value\n}: UseComboboxControlProps<Multi>) => {\n  const optionsMap = useMemo(() => {\n    const map = new Map<string | null, ComboboxItemOption>()\n\n    for (const option of options) {\n      const value = returnValue ? returnValue(option) : option.value\n      map.set(value, option)\n    }\n\n    return map\n  }, [options])\n\n  const changeHandler = useCallback<ChangeHandler<Multi>>((selected) => {\n    if (!selected) {\n      return\n    }\n\n    if (multiple) {\n      if (!TypeGuards.isArray(selected)) {\n        return\n      }\n\n      const stringValues = selected.map((option) => (returnValue ? returnValue(option) : option.value))\n\n      onChange(stringValues as string[])\n    } else {\n      const singleOption = selected as ComboboxItemOption\n      const stringValue = returnValue ? returnValue(singleOption) : singleOption.value\n\n      onChange(stringValue as string)\n    }\n  }, [])\n\n  const selected = useMemo<ComboboxValue<Multi>>(() => {\n    if (!value) {\n      return (multiple ? [] : null) as ComboboxValue<Multi>\n    }\n\n    if (multiple) {\n      if (!TypeGuards.isArray(value)) {\n        return [] as unknown as ComboboxValue<Multi>\n      }\n\n      const selectedOptionsArray = value\n        .map((stringValue: string) => optionsMap.get(stringValue))\n        .filter((option): option is ComboboxItemOption => option !== undefined)\n\n      return selectedOptionsArray as ComboboxValue<Multi>\n    }\n\n    const selectedOption = optionsMap.get(value as string)\n\n    return (selectedOption ?? null) as ComboboxValue<Multi>\n  }, [multiple, optionsMap, value])\n\n  return {\n    changeHandler,\n    selected\n  }\n}\n"],"names":["useComboboxControl","options","multiple","onChange","returnValue","value","optionsMap","useMemo","map","option","changeHandler","useCallback","selected","TypeGuards","stringValues","singleOption","stringValue"],"mappings":"iHAcO,MAAMA,EAAqB,CAAwB,CACxD,QAAAC,EACA,SAAAC,EACA,SAAAC,EACA,YAAAC,EACA,MAAAC,CACF,IAAsC,CACpC,MAAMC,EAAaC,EAAQ,IAAM,CAC/B,MAAMC,MAAU,IAEhB,UAAWC,KAAUR,EAAS,CAC5B,MAAMI,EAAQD,EAAcA,EAAYK,CAAM,EAAIA,EAAO,MACzDD,EAAI,IAAIH,EAAOI,CAAM,CACvB,CAEA,OAAOD,CACT,EAAG,CAACP,CAAO,CAAC,EAENS,EAAgBC,EAAmCC,GAAa,CACpE,GAAKA,EAIL,GAAIV,EAAU,CACZ,GAAI,CAACW,EAAW,QAAQD,CAAQ,EAC9B,OAGF,MAAME,EAAeF,EAAS,IAAKH,GAAYL,EAAcA,EAAYK,CAAM,EAAIA,EAAO,KAAM,EAEhGN,EAASW,CAAwB,CACnC,KAAO,CACL,MAAMC,EAAeH,EACfI,EAAcZ,EAAcA,EAAYW,CAAY,EAAIA,EAAa,MAE3EZ,EAASa,CAAqB,CAChC,CACF,EAAG,CAAA,CAAE,EAECJ,EAAWL,EAA8B,IACxCF,EAIDH,EACGW,EAAW,QAAQR,CAAK,EAIAA,EAC1B,IAAKW,GAAwBV,EAAW,IAAIU,CAAW,CAAC,EACxD,OAAQP,GAAyCA,IAAW,MAAS,EAL/D,CAAA,EAUYH,EAAW,IAAID,CAAe,GAE3B,KAjBhBH,EAAW,CAAA,EAAK,KAkBzB,CAACA,EAAUI,EAAYD,CAAK,CAAC,EAEhC,MAAO,CACL,cAAAK,EACA,SAAAE,CAAA,CAEJ"}

package/dist/lib/shared/ui/formElements/uncontrolled/combobox/combobox.js

@@ -1,2 +1,2 @@
-import{jsxs as G,jsx as r}from"react/jsx-runtime";import{forwardRef as J,useRef as K}from"react";import{useFloating as Q}from"../../../../../../node_modules/@floating-ui/react/dist/floating-ui.react.js";import{useCombobox as T}from"./hooks/useCombobox.js";import{useClickOutside as V}from"../../../../hooks/useClickOutside.js";import{cn as p}from"../../../../utils/cn.js";import{mergeRefs as W}from"../../../../utils/mergeRefs.js";import"../../../button/Button.js";import"../../../buttonIcon/ButtonIcon.js";import"../../../calendar/Calendar.js";import"../../../calendar/model/utils.js";import"../../../accordion/Accordion.js";import"react-dom";import"../../../modal/ui/IframeModalContent.js";import"../../../../../../node_modules/react-hot-toast/dist/index.js";import{Icon as X}from"../../../icon/Icon.js";import"../../../table/ui/primitives/Primitives.js";import"../../../carousel/ui/CarouselContent.js";import"../../../slot/Slot.js";import"../autocomplete/Autocomplete.js";import"../checkbox/Checkbox.js";import"../dayPicker/DayPicker.js";import{InputBase as Y}from"../input/Input.js";import"../inputOtp/InputOtpBase.js";import"../maskInput/MaskInput.js";import"../radio/RadioGroup.js";import"../radio/ui/RadioItem.js";import"../slider/SliderBase.js";import"../switch/Switch.js";import"../textarea/Textarea.js";import"../uploader/UploaderBase.js";import"../../controlled/editor/ui/Editor.js";import"../../controlled/input/MaskInputControl.js";import"../../../dropdownList/ui/dropdownItem/DropdownItem.js";import{DropdownList as Z}from"../../../dropdownList/DropdownList.js";import{AnimatePresence as _}from"../../../../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js";import{motion as $}from"../../../../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js";import{autoUpdate as a}from"../../../../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";import{flip as x,offset as l}from"../../../../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js";const H=({options:k,multiple:n,value:m,onChange:v,defaultOpen:A,attachmentProps:B,searchable:i,invalid:F,displayValue:g,label:N,disabled:f,readOnly:C,className:O,externalHandlers:o,inputValue:h,filterDisabled:P,onInputChange:j,classes:t},z)=>{var R;const{floating:D,...L}=(t==null?void 0:t.list)??{},u=K(null),{refs:w,floatingStyles:d}=Q({placement:"bottom-start",strategy:"absolute",middleware:[x({boundary:"clippingAncestors",crossAxis:!1}),l(4)],whileElementsMounted:a}),{open:I,setOpen:c,state:s,changeHandler:E,options:M,search:S,onInputChange:U,comboboxDisplayValue:y}=T({multiple:n,value:m,onChange:v,searchable:i,defaultOpen:A,displayValue:g,initialOptions:k,filterDisabled:P,externalHandlers:o,externalInputValue:h,externalOnInputChange:j}),q=()=>m?n&&i?y(m):i?S:y(m):"";return V(u,()=>c(!1)),G("div",{ref:u,className:p("relative w-full",t==null?void 0:t.root,O),children:[r(Y,{ref:W(z,w.setReference),label:N,invalid:F,readOnly:C||!i,value:h||q(),onChange:U,disabled:f,onClick:e=>{var b;c(!0),(b=o==null?void 0:o.clickHandler)==null||b.call(o,e)},onBlur:o==null?void 0:o.blurHandler,onFocus:o==null?void 0:o.focusHandler,classes:{input:p({"cursor-pointer":!i,"cursor-default":f,"pointer-events-none":f||C}),...t==null?void 0:t.input},autoComplete:"off",attachmentProps:{icon:r(X,{name:"arrows/arrowRight",className:p("size-6 rotate-90 text-color-blue-grey-600 duration-100",{"-rotate-90":I})}),onClickIcon:()=>c(e=>!e),...B}}),r(_,{children:I&&r($.div,{ref:w.setFloating,initial:{opacity:0},animate:{opacity:1},transition:{duration:.1},className:p("z-[1000]",D),style:{...d,width:(R=u.current)==null?void 0:R.getBoundingClientRect().width},children:r(Z,{options:M,multiple:n,onPick:E,value:s,displayValue:g,classes:L})})})]})},Ko=J(H);export{Ko as Combobox};
+import{jsxs as G,jsx as p}from"react/jsx-runtime";import{forwardRef as J,useRef as K,useEffect as Q}from"react";import{useFloating as T}from"../../../../../../node_modules/@floating-ui/react/dist/floating-ui.react.js";import{useCombobox as V}from"./hooks/useCombobox.js";import{useClickOutside as W}from"../../../../hooks/useClickOutside.js";import{cn as u}from"../../../../utils/cn.js";import{mergeRefs as X}from"../../../../utils/mergeRefs.js";import"../../../button/Button.js";import"../../../buttonIcon/ButtonIcon.js";import"../../../calendar/Calendar.js";import"../../../calendar/model/utils.js";import"../../../accordion/Accordion.js";import"react-dom";import"../../../modal/ui/IframeModalContent.js";import"../../../../../../node_modules/react-hot-toast/dist/index.js";import{Icon as Y}from"../../../icon/Icon.js";import"../../../table/ui/primitives/Primitives.js";import"../../../carousel/ui/CarouselContent.js";import"../../../slot/Slot.js";import"../autocomplete/Autocomplete.js";import"../checkbox/Checkbox.js";import"../dayPicker/DayPicker.js";import{InputBase as Z}from"../input/Input.js";import"../inputOtp/InputOtpBase.js";import"../maskInput/MaskInput.js";import"../radio/RadioGroup.js";import"../radio/ui/RadioItem.js";import"../slider/SliderBase.js";import"../switch/Switch.js";import"../textarea/Textarea.js";import"../uploader/UploaderBase.js";import"../../controlled/editor/ui/Editor.js";import"../../controlled/input/MaskInputControl.js";import"../../../dropdownList/ui/dropdownItem/DropdownItem.js";import{DropdownList as _}from"../../../dropdownList/DropdownList.js";import{AnimatePresence as $}from"../../../../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js";import{motion as l}from"../../../../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js";import{autoUpdate as x}from"../../../../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";import{flip as H,offset as oo}from"../../../../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js";const to=({options:I,multiple:c,value:e,onChange:d,defaultOpen:k,attachmentProps:v,searchable:r,invalid:A,displayValue:h,label:a,disabled:g,readOnly:R,className:B,externalHandlers:o,inputValue:b,filterDisabled:E,onInputChange:F,classes:t},L)=>{var y;const{floating:N,...O}=(t==null?void 0:t.list)??{},C=K(null),{refs:i,floatingStyles:P}=T({placement:"bottom-start",strategy:"absolute",middleware:[H({boundary:"clippingAncestors",crossAxis:!1}),oo(4)],whileElementsMounted:x}),{open:w,setOpen:f,state:j,changeHandler:z,options:D,search:M,onInputChange:S,comboboxDisplayValue:s}=V({multiple:c,value:e,onChange:d,searchable:r,defaultOpen:k,displayValue:h,initialOptions:I,filterDisabled:E,externalHandlers:o,externalInputValue:b,externalOnInputChange:F});Q(()=>{if(!i.domReference.current)return;const m=i.domReference.current,n=new AbortController;return m.addEventListener("keydown",q=>{switch(q.key){case" ":w||f(!0)}},{signal:n.signal}),()=>{n.abort()}},[]);const U=()=>e?c&&r?s(e):r?M:s(e):"";return W(C,()=>f(!1)),G("div",{ref:C,className:u("relative w-full",t==null?void 0:t.root,B),children:[p(Z,{ref:X(L,i.setReference),label:a,invalid:A,readOnly:R||!r,value:b||U(),onChange:S,disabled:g,onClick:m=>{var n;f(!0),(n=o==null?void 0:o.clickHandler)==null||n.call(o,m)},onBlur:o==null?void 0:o.blurHandler,onFocus:o==null?void 0:o.focusHandler,classes:{input:u({"cursor-pointer":!r,"cursor-default":g,"pointer-events-none":g||R}),...t==null?void 0:t.input},autoComplete:"off",attachmentProps:{icon:p(Y,{name:"arrows/arrowRight",className:u("size-6 rotate-90 text-color-blue-grey-600 duration-100",{"-rotate-90":w})}),onClickIcon:()=>f(m=>!m),...v}}),p($,{children:w&&p(l.div,{ref:i.setFloating,initial:{opacity:0},animate:{opacity:1},transition:{duration:.1},className:u("z-[1000]",N),style:{...P,width:(y=C.current)==null?void 0:y.getBoundingClientRect().width},children:p(_,{options:D,multiple:c,onPick:z,value:j,displayValue:h,classes:O,target:i.domReference})})})]})},Qo=J(to);export{Qo as Combobox};
 //# sourceMappingURL=combobox.js.map

package/dist/lib/shared/ui/formElements/uncontrolled/combobox/combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","sources":["../../../../../../../lib/shared/ui/formElements/uncontrolled/combobox/combobox.tsx"],"sourcesContent":["import { type ForwardedRef, forwardRef, useRef } from 'react'\nimport { autoUpdate, flip, offset, useFloating } from '@floating-ui/react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { useCombobox } from './hooks'\nimport type { ChangeHandler, ComboboxValue } from './model'\nimport type { ComboboxItemOption } from './ui'\nimport { useClickOutside } from '$/shared/hooks'\nimport { type DeepPartial } from '$/shared/types'\nimport { Icon } from '$/shared/ui'\nimport { DropdownList, type DropdownListClasses, type DropdownListProps } from '$/shared/ui/dropdownList'\nimport { type IFieldAttachmentProps } from '$/shared/ui/formElements/ui'\nimport { InputBase, type InputBaseProps } from '$/shared/ui/formElements/uncontrolled/input'\nimport { cn, mergeRefs } from '$/shared/utils'\n\nexport type ComboboxClasses = {\n  root?: string\n  list?: { floating?: string } & DropdownListClasses\n  input?: InputBaseProps['classes']\n}\n\nexport type ExternalHandlers<Multi extends boolean> = {\n  changeHandler?: ChangeHandler<Multi>\n  clickHandler?: (event: React.MouseEvent<HTMLElement>) => void\n  blurHandler?: (event: React.FocusEvent<HTMLElement>) => void\n  focusHandler?: (event: React.FocusEvent<HTMLElement>) => void\n  inputChangeHandler?: (value: string) => void\n}\n\nexport interface ComboboxProps<Multi extends boolean> extends Omit<DropdownListProps<Multi>, 'options' | 'value' | 'onChange'> {\n  /**\n   * Список опций\n   */\n  options: ComboboxItemOption[]\n  /**\n   * Выбранное значение\n   */\n  value?: ComboboxValue<Multi>\n  /**\n   * Функция для изменения значения\n   */\n  onChange?: ChangeHandler<Multi>\n  /**\n   * Свойство управляющее поиском\n   */\n  searchable?: boolean\n  /**\n   * Открыть список по умолчанию\n   */\n  defaultOpen?: boolean\n  /**\n   * Свойства дополнительной иконки\n   */\n  attachmentProps?: DeepPartial<IFieldAttachmentProps>\n  /**\n   * Пометить поле как не валидное\n   */\n  invalid?: boolean\n  /**\n   * Функция для управления отображаемым значением\n   */\n  displayValue?: (option: ComboboxItemOption) => string\n  /**\n   * Отображаемый лейбл\n   */\n  label: string\n  /**\n   * Выключено поле\n   */\n  disabled?: boolean\n  /**\n   * Только для чтения\n   */\n  readOnly?: boolean\n  /**\n   * Дополнительные стили\n   */\n  classes?: ComboboxClasses\n  /**\n   * Дополнительные события\n   */\n  externalHandlers?: ExternalHandlers<Multi>\n  /**\n   * Функция для изменения значения поиска\n   */\n  onInputChange?: (value: string) => void\n  /**\n   * Значение инпута\n   */\n  inputValue?: string\n  /**\n   * Выключить фильтрацию списка\n   */\n  filterDisabled?: boolean\n}\n\nconst InnerComponent = <Multi extends boolean>(\n  {\n    options: initialOptions,\n    multiple,\n    value,\n    onChange,\n    defaultOpen,\n    attachmentProps,\n    searchable,\n    invalid,\n    displayValue,\n    label,\n    disabled,\n    readOnly,\n    className,\n    externalHandlers,\n    inputValue,\n    filterDisabled,\n    onInputChange: externalInputChangeHandler,\n    classes\n  }: ComboboxProps<Multi>,\n  ref: ForwardedRef<HTMLInputElement>\n) => {\n  const { floating, ...dropdownClasses } = classes?.list ?? {}\n\n  const containerRef = useRef<HTMLDivElement>(null)\n\n  const { refs, floatingStyles } = useFloating<HTMLInputElement>({\n    placement: 'bottom-start',\n    strategy: 'absolute',\n    middleware: [\n      flip({\n        boundary: 'clippingAncestors',\n        crossAxis: false\n      }),\n      offset(4)\n    ],\n    whileElementsMounted: autoUpdate\n  })\n\n  const { open, setOpen, state, changeHandler, options, search, onInputChange, comboboxDisplayValue } = useCombobox({\n    multiple,\n    value,\n    onChange,\n    searchable,\n    defaultOpen,\n    displayValue,\n    initialOptions,\n    filterDisabled,\n    externalHandlers,\n    externalInputValue: inputValue,\n    externalOnInputChange: externalInputChangeHandler\n  })\n\n  const getLabel = () => {\n    if (!value) return ''\n\n    if (multiple && searchable) {\n      return comboboxDisplayValue(value)\n    } else if (searchable) {\n      return search\n    } else {\n      return comboboxDisplayValue(value)\n    }\n  }\n\n  useClickOutside(containerRef, () => setOpen(false))\n\n  return (\n    <div ref={containerRef} className={cn('relative w-full', classes?.root, className)}>\n      <InputBase\n        ref={mergeRefs(ref, refs.setReference)}\n        label={label}\n        invalid={invalid}\n        readOnly={readOnly || !searchable}\n        value={inputValue || getLabel()}\n        onChange={onInputChange}\n        disabled={disabled}\n        onClick={(event) => {\n          setOpen(true)\n          externalHandlers?.clickHandler?.(event)\n        }}\n        onBlur={externalHandlers?.blurHandler}\n        onFocus={externalHandlers?.focusHandler}\n        classes={{\n          input: cn({\n            'cursor-pointer': !searchable,\n            'cursor-default': disabled,\n            'pointer-events-none': disabled || readOnly\n          }),\n          ...classes?.input\n        }}\n        autoComplete='off'\n        attachmentProps={{\n          icon: (\n            <Icon\n              name='arrows/arrowRight'\n              className={cn('size-6 rotate-90 text-color-blue-grey-600 duration-100', {\n                '-rotate-90': open\n              })}\n            />\n          ),\n          onClickIcon: () => setOpen((prev) => !prev),\n          ...attachmentProps\n        }}\n      />\n\n      <AnimatePresence>\n        {open && (\n          <motion.div\n            ref={refs.setFloating}\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            transition={{ duration: 0.1 }}\n            className={cn('z-[1000]', floating)}\n            style={{ ...floatingStyles, width: containerRef.current?.getBoundingClientRect().width }}\n          >\n            <DropdownList\n              options={options}\n              multiple={multiple}\n              onPick={changeHandler}\n              value={state}\n              displayValue={displayValue}\n              classes={dropdownClasses}\n            />\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </div>\n  )\n}\n\nexport const Combobox = forwardRef(InnerComponent) as <Multi extends boolean>(\n  props: ComboboxProps<Multi> & { ref?: ForwardedRef<HTMLInputElement> }\n) => React.JSX.Element\n"],"names":["InnerComponent","initialOptions","multiple","value","onChange","defaultOpen","attachmentProps","searchable","invalid","displayValue","label","disabled","readOnly","className","externalHandlers","inputValue","filterDisabled","externalInputChangeHandler","classes","ref","floating","dropdownClasses","containerRef","useRef","refs","floatingStyles","useFloating","flip","offset","autoUpdate","open","setOpen","state","changeHandler","options","search","onInputChange","comboboxDisplayValue","useCombobox","getLabel","useClickOutside","jsxs","cn","jsx","InputBase","mergeRefs","event","_a","Icon","prev","AnimatePresence","motion","DropdownList","Combobox","forwardRef"],"mappings":"++DA+FA,MAAMA,EAAiB,CACrB,CACE,QAASC,EACT,SAAAC,EACA,MAAAC,EACA,SAAAC,EACA,YAAAC,EACA,gBAAAC,EACA,WAAAC,EACA,QAAAC,EACA,aAAAC,EACA,MAAAC,EACA,SAAAC,EACA,SAAAC,EACA,UAAAC,EACA,iBAAAC,EACA,WAAAC,EACA,eAAAC,EACA,cAAeC,EACf,QAAAC,CACF,EACAC,IACG,OACH,KAAM,CAAE,SAAAC,EAAU,GAAGC,IAAoBH,GAAA,YAAAA,EAAS,OAAQ,CAAA,EAEpDI,EAAeC,EAAuB,IAAI,EAE1C,CAAE,KAAAC,EAAM,eAAAC,CAAA,EAAmBC,EAA8B,CAC7D,UAAW,eACX,SAAU,WACV,WAAY,CACVC,EAAK,CACH,SAAU,oBACV,UAAW,EAAA,CACZ,EACDC,EAAO,CAAC,CAAA,EAEV,qBAAsBC,CAAA,CACvB,EAEK,CAAE,KAAAC,EAAM,QAAAC,EAAS,MAAAC,EAAO,cAAAC,EAAe,QAAAC,EAAS,OAAAC,EAAQ,cAAAC,EAAe,qBAAAC,CAAA,EAAyBC,EAAY,CAChH,SAAApC,EACA,MAAAC,EACA,SAAAC,EACA,WAAAG,EACA,YAAAF,EACA,aAAAI,EACA,eAAAR,EACA,eAAAe,EACA,iBAAAF,EACA,mBAAoBC,EACpB,sBAAuBE,CAAA,CACxB,EAEKsB,EAAW,IACVpC,EAEDD,GAAYK,EACP8B,EAAqBlC,CAAK,EACxBI,EACF4B,EAEAE,EAAqBlC,CAAK,EAPhB,GAWrB,OAAAqC,EAAgBlB,EAAc,IAAMS,EAAQ,EAAK,CAAC,EAGhDU,EAAC,MAAA,CAAI,IAAKnB,EAAc,UAAWoB,EAAG,kBAAmBxB,GAAA,YAAAA,EAAS,KAAML,CAAS,EAC/E,SAAA,CAAA8B,EAACC,EAAA,CACC,IAAKC,EAAU1B,EAAKK,EAAK,YAAY,EACrC,MAAAd,EACA,QAAAF,EACA,SAAUI,GAAY,CAACL,EACvB,MAAOQ,GAAcwB,EAAA,EACrB,SAAUH,EACV,SAAAzB,EACA,QAAUmC,GAAU,OAClBf,EAAQ,EAAI,GACZgB,EAAAjC,GAAA,YAAAA,EAAkB,eAAlB,MAAAiC,EAAA,KAAAjC,EAAiCgC,EACnC,EACA,OAAQhC,GAAA,YAAAA,EAAkB,YAC1B,QAASA,GAAA,YAAAA,EAAkB,aAC3B,QAAS,CACP,MAAO4B,EAAG,CACR,iBAAkB,CAACnC,EACnB,iBAAkBI,EAClB,sBAAuBA,GAAYC,CAAA,CACpC,EACD,GAAGM,GAAA,YAAAA,EAAS,KAAA,EAEd,aAAa,MACb,gBAAiB,CACf,KACEyB,EAACK,EAAA,CACC,KAAK,oBACL,UAAWN,EAAG,yDAA0D,CACtE,aAAcZ,CAAA,CACf,CAAA,CAAA,EAGL,YAAa,IAAMC,EAASkB,GAAS,CAACA,CAAI,EAC1C,GAAG3C,CAAA,CACL,CAAA,EAGFqC,EAACO,GACE,SAAApB,GACCa,EAACQ,EAAO,IAAP,CACC,IAAK3B,EAAK,YACV,QAAS,CAAE,QAAS,CAAA,EACpB,QAAS,CAAE,QAAS,CAAA,EACpB,WAAY,CAAE,SAAU,EAAA,EACxB,UAAWkB,EAAG,WAAYtB,CAAQ,EAClC,MAAO,CAAE,GAAGK,EAAgB,OAAOsB,EAAAzB,EAAa,UAAb,YAAAyB,EAAsB,wBAAwB,KAAA,EAEjF,SAAAJ,EAACS,EAAA,CACC,QAAAlB,EACA,SAAAhC,EACA,OAAQ+B,EACR,MAAOD,EACP,aAAAvB,EACA,QAASY,CAAA,CAAA,CACX,CAAA,CACF,CAEJ,CAAA,EACF,CAEJ,EAEagC,GAAWC,EAAWtD,CAAc"}
+{"version":3,"file":"combobox.js","sources":["../../../../../../../lib/shared/ui/formElements/uncontrolled/combobox/combobox.tsx"],"sourcesContent":["import { type ForwardedRef, forwardRef, useEffect, useRef } from 'react'\nimport { autoUpdate, flip, offset, useFloating } from '@floating-ui/react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { useCombobox } from './hooks'\nimport type { ChangeHandler, ComboboxValue } from './model'\nimport type { ComboboxItemOption } from './ui'\nimport { useClickOutside } from '$/shared/hooks'\nimport { type DeepPartial } from '$/shared/types'\nimport { Icon } from '$/shared/ui'\nimport { DropdownList, type DropdownListClasses, type DropdownListProps } from '$/shared/ui/dropdownList'\nimport { type IFieldAttachmentProps } from '$/shared/ui/formElements/ui'\nimport { InputBase, type InputBaseProps } from '$/shared/ui/formElements/uncontrolled/input'\nimport { cn, mergeRefs } from '$/shared/utils'\n\nexport type ComboboxClasses = {\n  root?: string\n  list?: { floating?: string } & DropdownListClasses\n  input?: InputBaseProps['classes']\n}\n\nexport type ExternalHandlers<Multi extends boolean> = {\n  changeHandler?: ChangeHandler<Multi>\n  clickHandler?: (event: React.MouseEvent<HTMLElement>) => void\n  blurHandler?: (event: React.FocusEvent<HTMLElement>) => void\n  focusHandler?: (event: React.FocusEvent<HTMLElement>) => void\n  inputChangeHandler?: (value: string) => void\n}\n\nexport interface ComboboxProps<Multi extends boolean> extends Omit<DropdownListProps<Multi>, 'options' | 'value' | 'onChange'> {\n  /**\n   * Список опций\n   */\n  options: ComboboxItemOption[]\n  /**\n   * Выбранное значение\n   */\n  value?: ComboboxValue<Multi>\n  /**\n   * Функция для изменения значения\n   */\n  onChange?: ChangeHandler<Multi>\n  /**\n   * Свойство управляющее поиском\n   */\n  searchable?: boolean\n  /**\n   * Открыть список по умолчанию\n   */\n  defaultOpen?: boolean\n  /**\n   * Свойства дополнительной иконки\n   */\n  attachmentProps?: DeepPartial<IFieldAttachmentProps>\n  /**\n   * Пометить поле как не валидное\n   */\n  invalid?: boolean\n  /**\n   * Функция для управления отображаемым значением\n   */\n  displayValue?: (option: ComboboxItemOption) => string\n  /**\n   * Отображаемый лейбл\n   */\n  label: string\n  /**\n   * Выключено поле\n   */\n  disabled?: boolean\n  /**\n   * Только для чтения\n   */\n  readOnly?: boolean\n  /**\n   * Дополнительные стили\n   */\n  classes?: ComboboxClasses\n  /**\n   * Дополнительные события\n   */\n  externalHandlers?: ExternalHandlers<Multi>\n  /**\n   * Функция для изменения значения поиска\n   */\n  onInputChange?: (value: string) => void\n  /**\n   * Значение инпута\n   */\n  inputValue?: string\n  /**\n   * Выключить фильтрацию списка\n   */\n  filterDisabled?: boolean\n}\n\nconst InnerComponent = <Multi extends boolean>(\n  {\n    options: initialOptions,\n    multiple,\n    value,\n    onChange,\n    defaultOpen,\n    attachmentProps,\n    searchable,\n    invalid,\n    displayValue,\n    label,\n    disabled,\n    readOnly,\n    className,\n    externalHandlers,\n    inputValue,\n    filterDisabled,\n    onInputChange: externalInputChangeHandler,\n    classes\n  }: ComboboxProps<Multi>,\n  ref: ForwardedRef<HTMLInputElement>\n) => {\n  const { floating, ...dropdownClasses } = classes?.list ?? {}\n\n  const containerRef = useRef<HTMLDivElement>(null)\n\n  const { refs, floatingStyles } = useFloating<HTMLInputElement>({\n    placement: 'bottom-start',\n    strategy: 'absolute',\n    middleware: [\n      flip({\n        boundary: 'clippingAncestors',\n        crossAxis: false\n      }),\n      offset(4)\n    ],\n    whileElementsMounted: autoUpdate\n  })\n\n  const { open, setOpen, state, changeHandler, options, search, onInputChange, comboboxDisplayValue } = useCombobox({\n    multiple,\n    value,\n    onChange,\n    searchable,\n    defaultOpen,\n    displayValue,\n    initialOptions,\n    filterDisabled,\n    externalHandlers,\n    externalInputValue: inputValue,\n    externalOnInputChange: externalInputChangeHandler\n  })\n\n  useEffect(() => {\n    if (!refs.domReference.current) return\n\n    const input = refs.domReference.current\n\n    const abortController = new AbortController()\n\n    input.addEventListener(\n      'keydown',\n      (event) => {\n        switch (event.key) {\n          case ' ':\n            if (!open) setOpen(true)\n        }\n      },\n      { signal: abortController.signal }\n    )\n\n    return () => {\n      abortController.abort()\n    }\n  }, [])\n\n  const getLabel = () => {\n    if (!value) return ''\n\n    if (multiple && searchable) {\n      return comboboxDisplayValue(value)\n    } else if (searchable) {\n      return search\n    } else {\n      return comboboxDisplayValue(value)\n    }\n  }\n\n  useClickOutside(containerRef, () => setOpen(false))\n\n  return (\n    <div ref={containerRef} className={cn('relative w-full', classes?.root, className)}>\n      <InputBase\n        ref={mergeRefs(ref, refs.setReference)}\n        label={label}\n        invalid={invalid}\n        readOnly={readOnly || !searchable}\n        value={inputValue || getLabel()}\n        onChange={onInputChange}\n        disabled={disabled}\n        onClick={(event) => {\n          setOpen(true)\n          externalHandlers?.clickHandler?.(event)\n        }}\n        onBlur={externalHandlers?.blurHandler}\n        onFocus={externalHandlers?.focusHandler}\n        classes={{\n          input: cn({\n            'cursor-pointer': !searchable,\n            'cursor-default': disabled,\n            'pointer-events-none': disabled || readOnly\n          }),\n          ...classes?.input\n        }}\n        autoComplete='off'\n        attachmentProps={{\n          icon: (\n            <Icon\n              name='arrows/arrowRight'\n              className={cn('size-6 rotate-90 text-color-blue-grey-600 duration-100', {\n                '-rotate-90': open\n              })}\n            />\n          ),\n          onClickIcon: () => setOpen((prev) => !prev),\n          ...attachmentProps\n        }}\n      />\n\n      <AnimatePresence>\n        {open && (\n          <motion.div\n            ref={refs.setFloating}\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            transition={{ duration: 0.1 }}\n            className={cn('z-[1000]', floating)}\n            style={{ ...floatingStyles, width: containerRef.current?.getBoundingClientRect().width }}\n          >\n            <DropdownList\n              options={options}\n              multiple={multiple}\n              onPick={changeHandler}\n              value={state}\n              displayValue={displayValue}\n              classes={dropdownClasses}\n              target={refs.domReference}\n            />\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </div>\n  )\n}\n\nexport const Combobox = forwardRef(InnerComponent) as <Multi extends boolean>(\n  props: ComboboxProps<Multi> & { ref?: ForwardedRef<HTMLInputElement> }\n) => React.JSX.Element\n"],"names":["InnerComponent","initialOptions","multiple","value","onChange","defaultOpen","attachmentProps","searchable","invalid","displayValue","label","disabled","readOnly","className","externalHandlers","inputValue","filterDisabled","externalInputChangeHandler","classes","ref","floating","dropdownClasses","containerRef","useRef","refs","floatingStyles","useFloating","flip","offset","autoUpdate","open","setOpen","state","changeHandler","options","search","onInputChange","comboboxDisplayValue","useCombobox","useEffect","input","abortController","event","getLabel","useClickOutside","jsxs","cn","jsx","InputBase","mergeRefs","_a","Icon","prev","AnimatePresence","motion","DropdownList","Combobox","forwardRef"],"mappings":"+/DA+FA,MAAMA,GAAiB,CACrB,CACE,QAASC,EACT,SAAAC,EACA,MAAAC,EACA,SAAAC,EACA,YAAAC,EACA,gBAAAC,EACA,WAAAC,EACA,QAAAC,EACA,aAAAC,EACA,MAAAC,EACA,SAAAC,EACA,SAAAC,EACA,UAAAC,EACA,iBAAAC,EACA,WAAAC,EACA,eAAAC,EACA,cAAeC,EACf,QAAAC,CACF,EACAC,IACG,OACH,KAAM,CAAE,SAAAC,EAAU,GAAGC,IAAoBH,GAAA,YAAAA,EAAS,OAAQ,CAAA,EAEpDI,EAAeC,EAAuB,IAAI,EAE1C,CAAE,KAAAC,EAAM,eAAAC,CAAA,EAAmBC,EAA8B,CAC7D,UAAW,eACX,SAAU,WACV,WAAY,CACVC,EAAK,CACH,SAAU,oBACV,UAAW,EAAA,CACZ,EACDC,GAAO,CAAC,CAAA,EAEV,qBAAsBC,CAAA,CACvB,EAEK,CAAE,KAAAC,EAAM,QAAAC,EAAS,MAAAC,EAAO,cAAAC,EAAe,QAAAC,EAAS,OAAAC,EAAQ,cAAAC,EAAe,qBAAAC,CAAA,EAAyBC,EAAY,CAChH,SAAApC,EACA,MAAAC,EACA,SAAAC,EACA,WAAAG,EACA,YAAAF,EACA,aAAAI,EACA,eAAAR,EACA,eAAAe,EACA,iBAAAF,EACA,mBAAoBC,EACpB,sBAAuBE,CAAA,CACxB,EAEDsB,EAAU,IAAM,CACd,GAAI,CAACf,EAAK,aAAa,QAAS,OAEhC,MAAMgB,EAAQhB,EAAK,aAAa,QAE1BiB,EAAkB,IAAI,gBAE5B,OAAAD,EAAM,iBACJ,UACCE,GAAU,CACT,OAAQA,EAAM,IAAA,CACZ,IAAK,IACEZ,GAAMC,EAAQ,EAAI,CAAA,CAE7B,EACA,CAAE,OAAQU,EAAgB,MAAA,CAAO,EAG5B,IAAM,CACXA,EAAgB,MAAA,CAClB,CACF,EAAG,CAAA,CAAE,EAEL,MAAME,EAAW,IACVxC,EAEDD,GAAYK,EACP8B,EAAqBlC,CAAK,EACxBI,EACF4B,EAEAE,EAAqBlC,CAAK,EAPhB,GAWrB,OAAAyC,EAAgBtB,EAAc,IAAMS,EAAQ,EAAK,CAAC,EAGhDc,EAAC,MAAA,CAAI,IAAKvB,EAAc,UAAWwB,EAAG,kBAAmB5B,GAAA,YAAAA,EAAS,KAAML,CAAS,EAC/E,SAAA,CAAAkC,EAACC,EAAA,CACC,IAAKC,EAAU9B,EAAKK,EAAK,YAAY,EACrC,MAAAd,EACA,QAAAF,EACA,SAAUI,GAAY,CAACL,EACvB,MAAOQ,GAAc4B,EAAA,EACrB,SAAUP,EACV,SAAAzB,EACA,QAAU+B,GAAU,OAClBX,EAAQ,EAAI,GACZmB,EAAApC,GAAA,YAAAA,EAAkB,eAAlB,MAAAoC,EAAA,KAAApC,EAAiC4B,EACnC,EACA,OAAQ5B,GAAA,YAAAA,EAAkB,YAC1B,QAASA,GAAA,YAAAA,EAAkB,aAC3B,QAAS,CACP,MAAOgC,EAAG,CACR,iBAAkB,CAACvC,EACnB,iBAAkBI,EAClB,sBAAuBA,GAAYC,CAAA,CACpC,EACD,GAAGM,GAAA,YAAAA,EAAS,KAAA,EAEd,aAAa,MACb,gBAAiB,CACf,KACE6B,EAACI,EAAA,CACC,KAAK,oBACL,UAAWL,EAAG,yDAA0D,CACtE,aAAchB,CAAA,CACf,CAAA,CAAA,EAGL,YAAa,IAAMC,EAASqB,GAAS,CAACA,CAAI,EAC1C,GAAG9C,CAAA,CACL,CAAA,EAGFyC,EAACM,GACE,SAAAvB,GACCiB,EAACO,EAAO,IAAP,CACC,IAAK9B,EAAK,YACV,QAAS,CAAE,QAAS,CAAA,EACpB,QAAS,CAAE,QAAS,CAAA,EACpB,WAAY,CAAE,SAAU,EAAA,EACxB,UAAWsB,EAAG,WAAY1B,CAAQ,EAClC,MAAO,CAAE,GAAGK,EAAgB,OAAOyB,EAAA5B,EAAa,UAAb,YAAA4B,EAAsB,wBAAwB,KAAA,EAEjF,SAAAH,EAACQ,EAAA,CACC,QAAArB,EACA,SAAAhC,EACA,OAAQ+B,EACR,MAAOD,EACP,aAAAvB,EACA,QAASY,EACT,OAAQG,EAAK,YAAA,CAAA,CACf,CAAA,CACF,CAEJ,CAAA,EACF,CAEJ,EAEagC,GAAWC,EAAWzD,EAAc"}

package/dist/lib/shared/ui/formElements/uncontrolled/combobox/hooks/useCombobox.js

@@ -1,2 +1,2 @@
-import{useState as y,useMemo as B}from"react";import{TypeGuards as E}from"../../../../../utils/typeGuards.js";const R=A=>{const{multiple:V,defaultOpen:G,value:H,onChange:r,initialOptions:u,searchable:w,filterDisabled:D,displayValue:t,externalHandlers:M,externalInputValue:b,externalOnInputChange:o}=A,{changeHandler:c,inputChangeHandler:f}=M??{},[a,m]=y(""),[T,p]=y(G??!1),[k,q]=y(H??(V?[]:null)),z=B(()=>D||!a.length||!w?u:u.filter(s=>s.label.toLowerCase().includes(b?b.toLowerCase():a.toLowerCase())),[b,D,u,a,w]);return{open:T,setOpen:p,changeHandler:s=>{q(l=>{if(V){const d=l,n=d.some(i=>i.value===s.value)?d.filter(i=>i.value!==s.value):[...d,s];r==null||r(n),c==null||c(n);const j=n.map(i=>t?t(i):i.label).join(", ");return m(j),o==null||o(j),n}const e=(l==null?void 0:l.value)===s.value?null:s;r==null||r(e),c==null||c(e);const L=t&&e?t(e):e==null?void 0:e.label;return m(L??""),o==null||o(L??""),p(!1),e})},options:z,search:a,onInputChange:s=>{p(!0),m(s.target.value),f==null||f(s.target.value),o==null||o(s.target.value)},state:k,comboboxDisplayValue:s=>{if(s)return E.isArray(s)?s.map(l=>t?t(l):l.label).join(", "):t?t(s):s.label}}};export{R as useCombobox};
+import{useState as j,useRef as H,useMemo as M}from"react";import{TypeGuards as U}from"../../../../../utils/typeGuards.js";const F=R=>{const{multiple:S,defaultOpen:T,value:a,onChange:r,initialOptions:c,searchable:y,filterDisabled:D,displayValue:o,externalHandlers:V,externalInputValue:p,externalOnInputChange:t}=R,{changeHandler:l,inputChangeHandler:m}=V??{},[u,n]=j(""),[A,d]=j(T??!1),v=H(!1),G=M(()=>D||!u.length||!y?c:c.filter(e=>e.label.toLowerCase().includes(p?p.toLowerCase():u.toLowerCase())),[p,D,c,u,y]);return{open:A,setOpen:d,changeHandler:e=>{if(!v.current){if(v.current=!0,S){const s=a||[],f=s.some(i=>i.value===e.value);let b;f?b=s.filter(i=>i.value!==e.value):b=[...s,e],r==null||r(b),l==null||l(b);const L=s.map(i=>o?o(i):i.label).join(", ");n(L),t==null||t(L)}else{let s;(a==null?void 0:a.value)===e.value?s=null:s=e,r==null||r(s),l==null||l(s);const f=o&&s?o(s):s==null?void 0:s.label;n(f??""),t==null||t(f??""),d(!1)}setTimeout(()=>{v.current=!1},0)}},options:G,search:u,onInputChange:e=>{d(!0),n(e.target.value),m==null||m(e.target.value),t==null||t(e.target.value)},state:a,comboboxDisplayValue:e=>{if(e)return U.isArray(e)?e.map(s=>o?o(s):s.label).join(", "):o?o(e):e.label}}};export{F as useCombobox};
 //# sourceMappingURL=useCombobox.js.map

package/dist/lib/shared/ui/formElements/uncontrolled/combobox/hooks/useCombobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCombobox.js","sources":["../../../../../../../../lib/shared/ui/formElements/uncontrolled/combobox/hooks/useCombobox.ts"],"sourcesContent":["import { useMemo, useState } from 'react'\nimport type { ExternalHandlers } from '../combobox'\nimport { type ChangeHandler, type ComboboxValue } from '../model'\nimport type { ComboboxItemOption } from '../ui'\nimport { TypeGuards } from '$/shared/utils'\n\ntype UseComboboxOptions<Multi extends boolean> = {\n  initialOptions: ComboboxItemOption[]\n  searchable?: boolean\n  multiple?: Multi\n  value?: ComboboxValue<Multi>\n  onChange?: ChangeHandler<Multi>\n  displayValue?: (option: ComboboxItemOption) => string\n  defaultOpen?: boolean\n  externalHandlers?: ExternalHandlers<Multi>\n  externalInputValue?: string\n  externalOnInputChange?: (value: string) => void\n  filterDisabled?: boolean\n}\n\nexport const useCombobox = <Multi extends boolean>(props: UseComboboxOptions<Multi>) => {\n  const {\n    multiple,\n    defaultOpen,\n    value,\n    onChange,\n    initialOptions,\n    searchable,\n    filterDisabled,\n    displayValue,\n    externalHandlers,\n    externalInputValue,\n    externalOnInputChange\n  } = props\n  const { changeHandler: externalChangeHandler, inputChangeHandler: externalInputChangeHandler } = externalHandlers ?? {}\n\n  const [search, setSearch] = useState<string>('')\n  const [open, setOpen] = useState<boolean>(defaultOpen ?? false)\n  const [state, setState] = useState<ComboboxValue<Multi>>(value ?? ((multiple ? [] : null) as ComboboxValue<Multi>))\n\n  const options = useMemo<ComboboxItemOption[]>(() => {\n    if (filterDisabled) {\n      return initialOptions\n    }\n\n    if (!search.length || !searchable) {\n      return initialOptions\n    }\n\n    return initialOptions.filter((option) =>\n      option.label.toLowerCase().includes(externalInputValue ? externalInputValue.toLowerCase() : search.toLowerCase())\n    )\n  }, [externalInputValue, filterDisabled, initialOptions, search, searchable])\n\n  const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setOpen(true)\n\n    setSearch(e.target.value)\n    externalInputChangeHandler?.(e.target.value)\n    externalOnInputChange?.(e.target.value)\n  }\n\n  const changeHandler = (value: ComboboxItemOption) => {\n    setState((prevState) => {\n      if (multiple) {\n        const prev = prevState as ComboboxItemOption[]\n        const exists = prev.some((option) => option.value === value.value)\n\n        const updated = (\n          exists ? prev.filter((option) => option.value !== value.value) : [...prev, value]\n        ) as ComboboxValue<Multi>\n\n        onChange?.(updated)\n        externalChangeHandler?.(updated)\n\n        const searchValue = (updated as ComboboxItemOption[])\n          .map((option) => (displayValue ? displayValue(option) : option.label))\n          .join(', ')\n        setSearch(searchValue)\n        externalOnInputChange?.(searchValue)\n\n        return updated\n      }\n\n      const updated = ((prevState as ComboboxItemOption)?.value === value.value ? null : value) as ComboboxValue<Multi>\n\n      onChange?.(updated)\n      externalChangeHandler?.(updated)\n\n      const label = displayValue && updated ? displayValue(updated as ComboboxItemOption) : (updated as ComboboxItemOption)?.label\n      setSearch(label ?? '')\n      externalOnInputChange?.(label ?? '')\n      setOpen(false)\n\n      return updated\n    })\n  }\n\n  const comboboxDisplayValue = (value: ComboboxValue<Multi>) => {\n    if (!value) return\n\n    if (TypeGuards.isArray(value)) {\n      return value.map((item) => (displayValue ? displayValue(item) : item.label)).join(', ')\n    }\n\n    return displayValue ? displayValue(value) : value.label\n  }\n\n  return {\n    open,\n    setOpen,\n    changeHandler,\n    options,\n    search,\n    onInputChange,\n    state,\n    comboboxDisplayValue\n  }\n}\n"],"names":["useCombobox","props","multiple","defaultOpen","value","onChange","initialOptions","searchable","filterDisabled","displayValue","externalHandlers","externalInputValue","externalOnInputChange","externalChangeHandler","externalInputChangeHandler","search","setSearch","useState","open","setOpen","state","setState","options","useMemo","option","prevState","prev","updated","searchValue","label","e","TypeGuards","item"],"mappings":"8GAoBO,MAAMA,EAAsCC,GAAqC,CACtF,KAAM,CACJ,SAAAC,EACA,YAAAC,EACA,MAAAC,EACA,SAAAC,EACA,eAAAC,EACA,WAAAC,EACA,eAAAC,EACA,aAAAC,EACA,iBAAAC,EACA,mBAAAC,EACA,sBAAAC,CAAA,EACEX,EACE,CAAE,cAAeY,EAAuB,mBAAoBC,CAAA,EAA+BJ,GAAoB,CAAA,EAE/G,CAACK,EAAQC,CAAS,EAAIC,EAAiB,EAAE,EACzC,CAACC,EAAMC,CAAO,EAAIF,EAAkBd,GAAe,EAAK,EACxD,CAACiB,EAAOC,CAAQ,EAAIJ,EAA+Bb,IAAWF,EAAW,GAAK,KAA8B,EAE5GoB,EAAUC,EAA8B,IACxCf,GAIA,CAACO,EAAO,QAAU,CAACR,EACdD,EAGFA,EAAe,OAAQkB,GAC5BA,EAAO,MAAM,YAAA,EAAc,SAASb,EAAqBA,EAAmB,cAAgBI,EAAO,aAAa,CAAA,EAEjH,CAACJ,EAAoBH,EAAgBF,EAAgBS,EAAQR,CAAU,CAAC,EAwD3E,MAAO,CACL,KAAAW,EACA,QAAAC,EACA,cAjDqBf,GAA8B,CACnDiB,EAAUI,GAAc,CACtB,GAAIvB,EAAU,CACZ,MAAMwB,EAAOD,EAGPE,EAFSD,EAAK,KAAMF,GAAWA,EAAO,QAAUpB,EAAM,KAAK,EAGtDsB,EAAK,OAAQF,GAAWA,EAAO,QAAUpB,EAAM,KAAK,EAAI,CAAC,GAAGsB,EAAMtB,CAAK,EAGlFC,GAAA,MAAAA,EAAWsB,GACXd,GAAA,MAAAA,EAAwBc,GAExB,MAAMC,EAAeD,EAClB,IAAKH,GAAYf,EAAeA,EAAae,CAAM,EAAIA,EAAO,KAAM,EACpE,KAAK,IAAI,EACZ,OAAAR,EAAUY,CAAW,EACrBhB,GAAA,MAAAA,EAAwBgB,GAEjBD,CACT,CAEA,MAAMA,GAAYF,GAAA,YAAAA,EAAkC,SAAUrB,EAAM,MAAQ,KAAOA,EAEnFC,GAAA,MAAAA,EAAWsB,GACXd,GAAA,MAAAA,EAAwBc,GAExB,MAAME,EAAQpB,GAAgBkB,EAAUlB,EAAakB,CAA6B,EAAKA,GAAA,YAAAA,EAAgC,MACvH,OAAAX,EAAUa,GAAS,EAAE,EACrBjB,GAAA,MAAAA,EAAwBiB,GAAS,IACjCV,EAAQ,EAAK,EAENQ,CACT,CAAC,CACH,EAgBE,QAAAL,EACA,OAAAP,EACA,cA5DqBe,GAA2C,CAChEX,EAAQ,EAAI,EAEZH,EAAUc,EAAE,OAAO,KAAK,EACxBhB,GAAA,MAAAA,EAA6BgB,EAAE,OAAO,OACtClB,GAAA,MAAAA,EAAwBkB,EAAE,OAAO,MACnC,EAuDE,MAAAV,EACA,qBAlB4BhB,GAAgC,CAC5D,GAAKA,EAEL,OAAI2B,EAAW,QAAQ3B,CAAK,EACnBA,EAAM,IAAK4B,GAAUvB,EAAeA,EAAauB,CAAI,EAAIA,EAAK,KAAM,EAAE,KAAK,IAAI,EAGjFvB,EAAeA,EAAaL,CAAK,EAAIA,EAAM,KACpD,CAUE,CAEJ"}
+{"version":3,"file":"useCombobox.js","sources":["../../../../../../../../lib/shared/ui/formElements/uncontrolled/combobox/hooks/useCombobox.ts"],"sourcesContent":["import { useMemo, useRef, useState } from 'react'\nimport type { ExternalHandlers } from '../combobox'\nimport { type ChangeHandler, type ComboboxValue } from '../model'\nimport type { ComboboxItemOption } from '../ui'\nimport { TypeGuards } from '$/shared/utils'\n\ntype UseComboboxOptions<Multi extends boolean> = {\n  initialOptions: ComboboxItemOption[]\n  searchable?: boolean\n  multiple?: Multi\n  value?: ComboboxValue<Multi>\n  onChange?: ChangeHandler<Multi>\n  displayValue?: (option: ComboboxItemOption) => string\n  defaultOpen?: boolean\n  externalHandlers?: ExternalHandlers<Multi>\n  externalInputValue?: string\n  externalOnInputChange?: (value: string) => void\n  filterDisabled?: boolean\n}\n\nexport const useCombobox = <Multi extends boolean>(props: UseComboboxOptions<Multi>) => {\n  const {\n    multiple,\n    defaultOpen,\n    value,\n    onChange,\n    initialOptions,\n    searchable,\n    filterDisabled,\n    displayValue,\n    externalHandlers,\n    externalInputValue,\n    externalOnInputChange\n  } = props\n  const { changeHandler: externalChangeHandler, inputChangeHandler: externalInputChangeHandler } = externalHandlers ?? {}\n\n  const [search, setSearch] = useState<string>('')\n  const [open, setOpen] = useState<boolean>(defaultOpen ?? false)\n\n  const isUpdatingRef = useRef<boolean>(false)\n\n  const options = useMemo<ComboboxItemOption[]>(() => {\n    if (filterDisabled) {\n      return initialOptions\n    }\n\n    if (!search.length || !searchable) {\n      return initialOptions\n    }\n\n    return initialOptions.filter((option) =>\n      option.label.toLowerCase().includes(externalInputValue ? externalInputValue.toLowerCase() : search.toLowerCase())\n    )\n  }, [externalInputValue, filterDisabled, initialOptions, search, searchable])\n\n  const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setOpen(true)\n\n    setSearch(e.target.value)\n    externalInputChangeHandler?.(e.target.value)\n    externalOnInputChange?.(e.target.value)\n  }\n\n  const changeHandler = (newValue: ComboboxItemOption) => {\n    if (isUpdatingRef.current) return\n\n    isUpdatingRef.current = true\n\n    if (multiple) {\n      const prev = (value as ComboboxItemOption[]) || []\n      const exists = prev.some((option) => option.value === newValue.value)\n\n      let updatedValue: ComboboxItemOption[]\n\n      if (exists) {\n        updatedValue = prev.filter((option) => option.value !== newValue.value)\n      } else {\n        updatedValue = [...prev, newValue]\n      }\n\n      onChange?.(updatedValue as ComboboxValue<Multi>)\n      externalChangeHandler?.(updatedValue as ComboboxValue<Multi>)\n\n      const searchValue = prev.map((option) => (displayValue ? displayValue(option) : option.label)).join(', ')\n      setSearch(searchValue)\n      externalOnInputChange?.(searchValue)\n    } else {\n      let updated: ComboboxValue<Multi>\n\n      if ((value as ComboboxItemOption)?.value === newValue.value) {\n        updated = null as ComboboxValue<Multi>\n      } else {\n        updated = newValue as ComboboxValue<Multi>\n      }\n\n      onChange?.(updated)\n      externalChangeHandler?.(updated)\n\n      const label = displayValue && updated ? displayValue(updated as ComboboxItemOption) : (updated as ComboboxItemOption)?.label\n      setSearch(label ?? '')\n      externalOnInputChange?.(label ?? '')\n      setOpen(false)\n    }\n\n    setTimeout(() => {\n      isUpdatingRef.current = false\n    }, 0)\n  }\n\n  const comboboxDisplayValue = (value: ComboboxValue<Multi>) => {\n    if (!value) return\n\n    if (TypeGuards.isArray(value)) {\n      return value.map((item) => (displayValue ? displayValue(item) : item.label)).join(', ')\n    }\n\n    return displayValue ? displayValue(value) : value.label\n  }\n\n  return {\n    open,\n    setOpen,\n    changeHandler,\n    options,\n    search,\n    onInputChange,\n    state: value,\n    comboboxDisplayValue\n  }\n}\n"],"names":["useCombobox","props","multiple","defaultOpen","value","onChange","initialOptions","searchable","filterDisabled","displayValue","externalHandlers","externalInputValue","externalOnInputChange","externalChangeHandler","externalInputChangeHandler","search","setSearch","useState","open","setOpen","isUpdatingRef","useRef","options","useMemo","option","newValue","prev","exists","updatedValue","searchValue","updated","label","TypeGuards","item"],"mappings":"0HAoBO,MAAMA,EAAsCC,GAAqC,CACtF,KAAM,CACJ,SAAAC,EACA,YAAAC,EACA,MAAAC,EACA,SAAAC,EACA,eAAAC,EACA,WAAAC,EACA,eAAAC,EACA,aAAAC,EACA,iBAAAC,EACA,mBAAAC,EACA,sBAAAC,CAAA,EACEX,EACE,CAAE,cAAeY,EAAuB,mBAAoBC,CAAA,EAA+BJ,GAAoB,CAAA,EAE/G,CAACK,EAAQC,CAAS,EAAIC,EAAiB,EAAE,EACzC,CAACC,EAAMC,CAAO,EAAIF,EAAkBd,GAAe,EAAK,EAExDiB,EAAgBC,EAAgB,EAAK,EAErCC,EAAUC,EAA8B,IACxCf,GAIA,CAACO,EAAO,QAAU,CAACR,EACdD,EAGFA,EAAe,OAAQkB,GAC5BA,EAAO,MAAM,YAAA,EAAc,SAASb,EAAqBA,EAAmB,cAAgBI,EAAO,aAAa,CAAA,EAEjH,CAACJ,EAAoBH,EAAgBF,EAAgBS,EAAQR,CAAU,CAAC,EAkE3E,MAAO,CACL,KAAAW,EACA,QAAAC,EACA,cA3DqBM,GAAiC,CACtD,GAAI,CAAAL,EAAc,QAIlB,IAFAA,EAAc,QAAU,GAEpBlB,EAAU,CACZ,MAAMwB,EAAQtB,GAAkC,CAAA,EAC1CuB,EAASD,EAAK,KAAMF,GAAWA,EAAO,QAAUC,EAAS,KAAK,EAEpE,IAAIG,EAEAD,EACFC,EAAeF,EAAK,OAAQF,GAAWA,EAAO,QAAUC,EAAS,KAAK,EAEtEG,EAAe,CAAC,GAAGF,EAAMD,CAAQ,EAGnCpB,GAAA,MAAAA,EAAWuB,GACXf,GAAA,MAAAA,EAAwBe,GAExB,MAAMC,EAAcH,EAAK,IAAKF,GAAYf,EAAeA,EAAae,CAAM,EAAIA,EAAO,KAAM,EAAE,KAAK,IAAI,EACxGR,EAAUa,CAAW,EACrBjB,GAAA,MAAAA,EAAwBiB,EAC1B,KAAO,CACL,IAAIC,GAEC1B,GAAA,YAAAA,EAA8B,SAAUqB,EAAS,MACpDK,EAAU,KAEVA,EAAUL,EAGZpB,GAAA,MAAAA,EAAWyB,GACXjB,GAAA,MAAAA,EAAwBiB,GAExB,MAAMC,EAAQtB,GAAgBqB,EAAUrB,EAAaqB,CAA6B,EAAKA,GAAA,YAAAA,EAAgC,MACvHd,EAAUe,GAAS,EAAE,EACrBnB,GAAA,MAAAA,EAAwBmB,GAAS,IACjCZ,EAAQ,EAAK,CACf,CAEA,WAAW,IAAM,CACfC,EAAc,QAAU,EAC1B,EAAG,CAAC,EACN,EAgBE,QAAAE,EACA,OAAAP,EACA,cAtEqB,GAA2C,CAChEI,EAAQ,EAAI,EAEZH,EAAU,EAAE,OAAO,KAAK,EACxBF,GAAA,MAAAA,EAA6B,EAAE,OAAO,OACtCF,GAAA,MAAAA,EAAwB,EAAE,OAAO,MACnC,EAiEE,MAAOR,EACP,qBAlB4BA,GAAgC,CAC5D,GAAKA,EAEL,OAAI4B,EAAW,QAAQ5B,CAAK,EACnBA,EAAM,IAAK6B,GAAUxB,EAAeA,EAAawB,CAAI,EAAIA,EAAK,KAAM,EAAE,KAAK,IAAI,EAGjFxB,EAAeA,EAAaL,CAAK,EAAIA,EAAM,KACpD,CAUE,CAEJ"}