@clicktap/ui 0.37.0 → 0.38.0

package/assets/Section-DVpZrRV-.js

@@ -0,0 +1 @@
+import d from"react";function r(o){return null}r.getCollectionNode=function*(t){let{children:i,title:n,items:l}=t;yield{type:"section",props:t,hasChildNodes:!0,rendered:n,"aria-label":t["aria-label"],*childNodes(){if(typeof i=="function"){if(!l)throw new Error("props.children was a function but props.items is missing");for(let e of l)yield{type:"item",value:e,renderer:i}}else{let e=[];d.Children.forEach(i,c=>{e.push({type:"item",element:c})}),yield*e}}}};let a=r;export{a as $};

package/components/Collection/CollectionToolbar/CollectionToolbar.js

@@ -1 +1 @@
-"use client";import{jsxs as i,jsx as l}from"react/jsx-runtime";import{Option as p}from"../../Select/Option.js";import{Select as x}from"../../Select/Select.js";import{Button as h}from"../../Button/Button.js";import"framer-motion";import{FilterIcon as d}from"../../Icon/FilterIcon.js";import"react";import"../../Select/ButtonSelect.js";import"react-aria";import"../../../assets/useEffectEvent-gqjrDmw8.js";import"../../../assets/useOverlayTriggerState-CooW9h9l.js";import"../../../assets/useControlledState-Cmn8tE-_.js";import"../../../utils/cn.js";import"../../Select/parts.js";import"../../Select/ComboBoxSelect.js";import"../../Loader/Pulse.js";import"react-aria-components";function K({totalItems:o,startItem:s,endItem:r,setShowMobileFilters:a,availableSortOrders:m,appliedSortOrder:e,onSortChange:n}){const c=[...e?[e]:[],...m];return i("div",{className:"flex flex-col gap-y-5 mb-3",children:[i("div",{className:"flex items-center justify-between lg:justify-end gap-x-2",children:[i(h,{className:"lg:hidden grow-0 shrink-0 basis-auto gap-x-3 px-4",size:"sm",variant:"outline",onPress:()=>a(!0),"aria-details":"show filters",children:[l(d,{className:"w-3 h-3"}),"Filters"]}),l(x,{className:"w-44",selectedKey:e?`${e.code}_${e.direction}`:null,onSelectionChange:n,placeholder:"Sort by",label:"Sort By:",classNames:{input:"text-xs w-44 h-8 min-h-0",value:"text-xs",label:"hidden lg:block text-xs text-gray-600 whitespace-nowrap"},children:c.map(t=>l(p,{textValue:t.label,children:t.label},`${t.code}_${t.direction}`))})]}),o>0&&i("p",{className:"text-sm text-slate-500",children:["Displaying ",s," - ",r," of ",o," items"]})]})}export{K as CollectionToolbar};
+"use client";import{jsxs as i,jsx as l}from"react/jsx-runtime";import{Option as p}from"../../Select/Option.js";import{Select as x}from"../../Select/Select.js";import{Button as h}from"../../Button/Button.js";import"framer-motion";import{FilterIcon as d}from"../../Icon/FilterIcon.js";import"react";import"../../../assets/Section-DVpZrRV-.js";import"../../Select/ButtonSelect.js";import"react-aria";import"../../../assets/useEffectEvent-gqjrDmw8.js";import"../../../assets/useOverlayTriggerState-CooW9h9l.js";import"../../../assets/useControlledState-Cmn8tE-_.js";import"../../../utils/cn.js";import"../../Select/parts.js";import"react-aria-components";import"../../Select/ComboBoxSelect.js";import"../../Loader/Pulse.js";function P({totalItems:o,startItem:s,endItem:r,setShowMobileFilters:m,availableSortOrders:a,appliedSortOrder:e,onSortChange:n}){const c=[...e?[e]:[],...a];return i("div",{className:"flex flex-col gap-y-5 mb-3",children:[i("div",{className:"flex items-center justify-between lg:justify-end gap-x-2",children:[i(h,{className:"lg:hidden grow-0 shrink-0 basis-auto gap-x-3 px-4",size:"sm",variant:"outline",onPress:()=>m(!0),"aria-details":"show filters",children:[l(d,{className:"w-3 h-3"}),"Filters"]}),l(x,{className:"w-44",selectedKey:e?`${e.code}_${e.direction}`:null,onSelectionChange:n,placeholder:"Sort by",label:"Sort By:",classNames:{input:"text-xs w-44 h-8 min-h-0",value:"text-xs",label:"hidden lg:block text-xs text-gray-600 whitespace-nowrap"},children:c.map(t=>l(p,{textValue:t.label,children:t.label},`${t.code}_${t.direction}`))})]}),o>0&&i("p",{className:"text-sm text-slate-500",children:["Displaying ",s," - ",r," of ",o," items"]})]})}export{P as CollectionToolbar};

package/components/Collection/CollectionToolbar/index.js

@@ -1 +1 @@
-import{CollectionToolbar as j}from"./CollectionToolbar.js";import"react/jsx-runtime";import"../../Select/Option.js";import"react";import"../../Select/Select.js";import"../../Select/ButtonSelect.js";import"react-aria";import"../../../assets/useEffectEvent-gqjrDmw8.js";import"../../../assets/useOverlayTriggerState-CooW9h9l.js";import"../../../assets/useControlledState-Cmn8tE-_.js";import"../../../utils/cn.js";import"../../Select/parts.js";import"../../Select/ComboBoxSelect.js";import"framer-motion";import"../../Loader/Pulse.js";import"../../Button/Button.js";import"react-aria-components";import"../../Icon/FilterIcon.js";export{j as CollectionToolbar};
+import{CollectionToolbar as k}from"./CollectionToolbar.js";import"react/jsx-runtime";import"../../Select/Option.js";import"react";import"../../../assets/Section-DVpZrRV-.js";import"../../Select/Select.js";import"../../Select/ButtonSelect.js";import"react-aria";import"../../../assets/useEffectEvent-gqjrDmw8.js";import"../../../assets/useOverlayTriggerState-CooW9h9l.js";import"../../../assets/useControlledState-Cmn8tE-_.js";import"../../../utils/cn.js";import"../../Select/parts.js";import"react-aria-components";import"../../Select/ComboBoxSelect.js";import"framer-motion";import"../../Loader/Pulse.js";import"../../Button/Button.js";import"../../Icon/FilterIcon.js";export{k as CollectionToolbar};

package/components/Collection/index.js

@@ -1 +1 @@
-import{AttributeDataProvider as V,useAttributeData as W}from"./AttributeDataProvider/AttributeDataProvider.js";import{EmptyResults as Y}from"./EmptyResults/EmptyResults.js";import{ProductPrice as _}from"./ProductPrice/ProductPrice.js";import{FilterRenderer as rr}from"./FilterRenderer/FilterRenderer.js";import{CollectionFilterChips as tr}from"./CollectionFilterChips/CollectionFilterChips.js";import{FilterAccordionTitle as pr}from"./FilterAccordionTitle/FilterAccordionTitle.js";import{ProductCardSwatches as er}from"./ProductCardSwatches/ProductCardSwatches.js";import{CollectionFilters as cr}from"./CollectionFilters/CollectionFilters.js";import{CollectionToolbar as xr}from"./CollectionToolbar/CollectionToolbar.js";import"react/jsx-runtime";import"react";import"../../utils/env.js";import"../../utils/swatch.js";import"./FilterRenderer/Renderer/Option.js";import"../Checkbox/Checkbox.js";import"react-aria-components";import"../../utils/cn.js";import"./FilterRenderer/Renderer/useOptionFilterToggle.js";import"./FilterRenderer/Renderer/Swatch.js";import"./FilterRenderer/Renderer/Swatch/SwatchColor.js";import"../Icon/CheckIcon.js";import"../../utils/color.js";import"./FilterRenderer/Renderer/Swatch/SwatchImage.js";import"./FilterRenderer/Renderer/Swatch/SwatchText.js";import"./FilterRenderer/Renderer/Boolean.js";import"../RadioGroup/RadioGroup.js";import"../Radio/Radio.js";import"./FilterRenderer/Renderer/Range.js";import"../Button/Button.js";import"framer-motion";import"../Icon/CrossSmall.js";import"../../utils/collection/getAppliedFilterChips.js";import"../../utils/collection/removeFilterChip.js";import"../Accordion/Accordion.js";import"@nextui-org/accordion";import"../Icon/DownArrow.js";import"../ModalOverlay/ModalOverlay.js";import"../DialogTrigger/DialogTrigger.js";import"../Modal/Modal.js";import"../Drawer/Drawer.js";import"../Icon/Cross.js";import"../Icon/Search.js";import"../../utils/collection/mergeFilters.js";import"../Select/Option.js";import"../Select/Select.js";import"../Select/ButtonSelect.js";import"react-aria";import"../../assets/useEffectEvent-gqjrDmw8.js";import"../../assets/useOverlayTriggerState-CooW9h9l.js";import"../../assets/useControlledState-Cmn8tE-_.js";import"../Select/parts.js";import"../Select/ComboBoxSelect.js";import"../Loader/Pulse.js";import"../Icon/FilterIcon.js";export{V as AttributeDataProvider,tr as CollectionFilterChips,cr as CollectionFilters,xr as CollectionToolbar,Y as EmptyResults,pr as FilterAccordionTitle,rr as FilterRenderer,er as ProductCardSwatches,_ as ProductPrice,W as useAttributeData};
+import{AttributeDataProvider as W,useAttributeData as X}from"./AttributeDataProvider/AttributeDataProvider.js";import{EmptyResults as Z}from"./EmptyResults/EmptyResults.js";import{ProductPrice as $}from"./ProductPrice/ProductPrice.js";import{FilterRenderer as or}from"./FilterRenderer/FilterRenderer.js";import{CollectionFilterChips as ir}from"./CollectionFilterChips/CollectionFilterChips.js";import{FilterAccordionTitle as mr}from"./FilterAccordionTitle/FilterAccordionTitle.js";import{ProductCardSwatches as lr}from"./ProductCardSwatches/ProductCardSwatches.js";import{CollectionFilters as fr}from"./CollectionFilters/CollectionFilters.js";import{CollectionToolbar as ar}from"./CollectionToolbar/CollectionToolbar.js";import"react/jsx-runtime";import"react";import"../../utils/env.js";import"../../utils/swatch.js";import"./FilterRenderer/Renderer/Option.js";import"../Checkbox/Checkbox.js";import"react-aria-components";import"../../utils/cn.js";import"./FilterRenderer/Renderer/useOptionFilterToggle.js";import"./FilterRenderer/Renderer/Swatch.js";import"./FilterRenderer/Renderer/Swatch/SwatchColor.js";import"../Icon/CheckIcon.js";import"../../utils/color.js";import"./FilterRenderer/Renderer/Swatch/SwatchImage.js";import"./FilterRenderer/Renderer/Swatch/SwatchText.js";import"./FilterRenderer/Renderer/Boolean.js";import"../RadioGroup/RadioGroup.js";import"../Radio/Radio.js";import"./FilterRenderer/Renderer/Range.js";import"../Button/Button.js";import"framer-motion";import"../Icon/CrossSmall.js";import"../../utils/collection/getAppliedFilterChips.js";import"../../utils/collection/removeFilterChip.js";import"../Accordion/Accordion.js";import"@nextui-org/accordion";import"../Icon/DownArrow.js";import"../ModalOverlay/ModalOverlay.js";import"../DialogTrigger/DialogTrigger.js";import"../Modal/Modal.js";import"../Drawer/Drawer.js";import"../Icon/Cross.js";import"../Icon/Search.js";import"../../utils/collection/mergeFilters.js";import"../Select/Option.js";import"../../assets/Section-DVpZrRV-.js";import"../Select/Select.js";import"../Select/ButtonSelect.js";import"react-aria";import"../../assets/useEffectEvent-gqjrDmw8.js";import"../../assets/useOverlayTriggerState-CooW9h9l.js";import"../../assets/useControlledState-Cmn8tE-_.js";import"../Select/parts.js";import"../Select/ComboBoxSelect.js";import"../Loader/Pulse.js";import"../Icon/FilterIcon.js";export{W as AttributeDataProvider,ir as CollectionFilterChips,fr as CollectionFilters,ar as CollectionToolbar,Z as EmptyResults,mr as FilterAccordionTitle,or as FilterRenderer,lr as ProductCardSwatches,$ as ProductPrice,X as useAttributeData};

package/components/Select/ButtonSelect.js

@@ -1 +1 @@
-"use client";import{jsxs as K,jsx as g}from"react/jsx-runtime";import{useState as N,useMemo as w,useRef as $,useEffect as H}from"react";import{useSelect as T,useButton as U,HiddenSelect as G}from"react-aria";import{e as O,c as J,a as Q,$ as W}from"../../assets/useEffectEvent-gqjrDmw8.js";import{b as X,$ as Y,d as Z}from"../../assets/useOverlayTriggerState-CooW9h9l.js";import{$ as ee}from"../../assets/useControlledState-Cmn8tE-_.js";import{cn as f}from"../../utils/cn.js";import{ChevronIcon as te,SelectPopover as le,SelectListBox as ne}from"./parts.js";function se(e){let{selectionMode:t="single",shouldCloseOnSelect:a=t==="single"}=e,i=X(e),[x,v]=N(null),u=w(()=>e.defaultValue!==void 0?e.defaultValue:t==="single"?e.defaultSelectedKey??null:[],[e.defaultValue,e.defaultSelectedKey,t]),y=w(()=>e.value!==void 0?e.value:t==="single"?e.selectedKey:void 0,[e.value,e.selectedKey,t]),[s,o]=ee(y,u,e.onChange),l=t==="single"&&Array.isArray(s)?s[0]:s,c=n=>{if(t==="single"){let d=Array.isArray(n)?n[0]??null:n;o(d),d!==l&&e.onSelectionChange?.(d)}else{let d=[];Array.isArray(n)?d=n:n!=null&&(d=[n]),o(d)}},r=Y({...e,selectionMode:t,disallowEmptySelection:t==="single",allowDuplicateSelectionEvents:!0,selectedKeys:w(()=>re(l),[l]),onSelectionChange:n=>{if(n!=="all"){if(t==="single"){let d=n.values().next().value??null;c(d)}else c([...n]);a&&i.close(),E.commitValidation()}}}),m=r.selectionManager.firstSelectedKey,h=w(()=>[...r.selectionManager.selectedKeys].map(n=>r.collection.getItem(n)).filter(n=>n!=null),[r.selectionManager.selectedKeys,r.collection]),E=Z({...e,value:Array.isArray(l)&&l.length===0?null:l}),[I,D]=N(!1),[p]=N(l);return{...E,...r,...i,value:l,defaultValue:u??p,setValue:c,selectedKey:m,setSelectedKey:c,selectedItem:h[0]??null,selectedItems:h,defaultSelectedKey:e.defaultSelectedKey??(e.selectionMode==="single"?p:null),focusStrategy:x,open(n=null){(r.collection.size!==0||e.allowsEmptyCollection)&&(v(n),i.open())},toggle(n=null){(r.collection.size!==0||e.allowsEmptyCollection)&&(v(n),i.toggle())},isFocused:I,setFocused:D}}function re(e){if(e!==void 0)return e===null?[]:Array.isArray(e)?e:[e]}function oe(e){let{ref:t,onInteractOutside:a,isDisabled:i,onInteractOutsideStart:x}=e,v=$({isPointerDown:!1,ignoreEmulatedMouseEvents:!1}),u=O(s=>{a&&P(s,t)&&(x&&x(s),v.current.isPointerDown=!0)}),y=O(s=>{a&&a(s)});H(()=>{let s=v.current;if(i)return;const o=t.current,l=J(o);if(typeof PointerEvent<"u"){let c=r=>{s.isPointerDown&&P(r,t)&&y(r),s.isPointerDown=!1};return l.addEventListener("pointerdown",u,!0),l.addEventListener("click",c,!0),()=>{l.removeEventListener("pointerdown",u,!0),l.removeEventListener("click",c,!0)}}else if(process.env.NODE_ENV==="test"){let c=m=>{s.ignoreEmulatedMouseEvents?s.ignoreEmulatedMouseEvents=!1:s.isPointerDown&&P(m,t)&&y(m),s.isPointerDown=!1},r=m=>{s.ignoreEmulatedMouseEvents=!0,s.isPointerDown&&P(m,t)&&y(m),s.isPointerDown=!1};return l.addEventListener("mousedown",u,!0),l.addEventListener("mouseup",c,!0),l.addEventListener("touchstart",u,!0),l.addEventListener("touchend",r,!0),()=>{l.removeEventListener("mousedown",u,!0),l.removeEventListener("mouseup",c,!0),l.removeEventListener("touchstart",u,!0),l.removeEventListener("touchend",r,!0)}}},[t,i])}function P(e,t){if(e.button>0)return!1;let a=Q(e);if(a){const i=a.ownerDocument;if(!i||!W(i.documentElement,a)||a.closest("[data-react-aria-top-layer]"))return!1}return t.current?!e.composedPath().includes(t.current):!1}function ge(e){const{label:t,description:a,errorMessage:i,children:x,placeholder:v,slots:u,popoverOffset:y,className:s,classNames:o,isLoading:l,name:c,selectedKey:r,defaultSelectedKey:m,onSelectionChange:h,isRequired:E,items:I,autoFocus:D,isInvalid:p,"aria-label":n,"aria-labelledby":d}=e,L=!!(e.isDisabled||l),V={label:t,children:x,items:I,name:c,selectedKey:r,defaultSelectedKey:m,onSelectionChange:h,isDisabled:L,isRequired:E,autoFocus:D,isInvalid:p,"aria-label":n,"aria-labelledby":d},b=se(V),C=$(null),S=$(null),A=$(null),B=$(null),{labelProps:R,triggerProps:F,valueProps:k,menuProps:j,descriptionProps:_,errorMessageProps:z,isInvalid:M}=T(V,b,S),{buttonProps:q}=U(F,S);return oe({ref:C,onInteractOutside:()=>b.close()}),K("div",{ref:C,className:f("flex flex-col","w-full",s),children:[g("label",{...R,className:f("flex","text-xs text-slate-500",o?.label),children:t}),g(G,{state:b,triggerRef:S,label:t,name:c,isDisabled:L}),K("div",{className:f("flex","relative","w-full",o?.comboBoxContainer),children:[K("button",{...q,ref:S,className:f("flex items-center justify-between gap-2","border border-solid border-slate-300","text-sm text-slate-900 text-left","py-0 px-3","h-10 w-full","m-0","rounded-md","bg-white","cursor-pointer","transition-all ease-in-out duration-200","hover:border-slate-400","focus:outline focus:outline-2 focus:outline-slate-200 focus:border-slate-400","disabled:bg-slate-100 disabled:border-slate-300 disabled:cursor-default",M&&"border-red-500 bg-red-100 text-red-600 hover:border-red-600 focus:border-red-600 focus:outline-red-200",o?.input),children:[g("span",{...k,className:f("truncate",!b.selectedItem&&"text-slate-400",o?.value),children:b.selectedItem?b.selectedItem.rendered:v??"Select..."}),g("span",{className:f("shrink-0 [&_svg]:w-4 [&_svg]:h-4",o?.arrowButton),children:g(te,{isOpen:b.isOpen,isDisabled:L,isInvalid:M,buttonIcon:u?.buttonIcon})})]}),b.isOpen&&g(le,{popoverRef:B,offset:y,className:f(o?.listContainer),children:g(ne,{state:b,listBoxProps:j,listBoxRef:A,optionClassName:f(o?.option),className:f("max-h-80","overflow-y-auto","outline-none",o?.list)})})]}),a&&g("span",{..._,className:f("flex","text-xs","text-slate-500",o?.description),children:a}),M&&typeof i=="string"&&g("span",{...z,className:f("flex","text-xs","text-red-500",o?.errorMessage),children:i})]})}export{ge as ButtonSelect,ge as default};
+"use client";import{jsxs as N,jsx as g}from"react/jsx-runtime";import{useState as C,useMemo as w,useRef as $,useEffect as q}from"react";import{useSelect as T,useButton as U,HiddenSelect as G}from"react-aria";import{e as O,c as J,a as Q,$ as W}from"../../assets/useEffectEvent-gqjrDmw8.js";import{b as X,$ as Y,d as Z}from"../../assets/useOverlayTriggerState-CooW9h9l.js";import{$ as ee}from"../../assets/useControlledState-Cmn8tE-_.js";import{cn as u}from"../../utils/cn.js";import{ChevronIcon as te,SelectPopover as le,SelectListBox as ne}from"./parts.js";import"react-aria-components";function se(e){let{selectionMode:t="single",shouldCloseOnSelect:a=t==="single"}=e,i=X(e),[x,v]=C(null),d=w(()=>e.defaultValue!==void 0?e.defaultValue:t==="single"?e.defaultSelectedKey??null:[],[e.defaultValue,e.defaultSelectedKey,t]),y=w(()=>e.value!==void 0?e.value:t==="single"?e.selectedKey:void 0,[e.value,e.selectedKey,t]),[s,o]=ee(y,d,e.onChange),l=t==="single"&&Array.isArray(s)?s[0]:s,c=n=>{if(t==="single"){let f=Array.isArray(n)?n[0]??null:n;o(f),f!==l&&e.onSelectionChange?.(f)}else{let f=[];Array.isArray(n)?f=n:n!=null&&(f=[n]),o(f)}},r=Y({...e,selectionMode:t,disallowEmptySelection:t==="single",allowDuplicateSelectionEvents:!0,selectedKeys:w(()=>oe(l),[l]),onSelectionChange:n=>{if(n!=="all"){if(t==="single"){let f=n.values().next().value??null;c(f)}else c([...n]);a&&i.close(),p.commitValidation()}}}),m=r.selectionManager.firstSelectedKey,h=w(()=>[...r.selectionManager.selectedKeys].map(n=>r.collection.getItem(n)).filter(n=>n!=null),[r.selectionManager.selectedKeys,r.collection]),p=Z({...e,value:Array.isArray(l)&&l.length===0?null:l}),[I,D]=C(!1),[E]=C(l);return{...p,...r,...i,value:l,defaultValue:d??E,setValue:c,selectedKey:m,setSelectedKey:c,selectedItem:h[0]??null,selectedItems:h,defaultSelectedKey:e.defaultSelectedKey??(e.selectionMode==="single"?E:null),focusStrategy:x,open(n=null){(r.collection.size!==0||e.allowsEmptyCollection)&&(v(n),i.open())},toggle(n=null){(r.collection.size!==0||e.allowsEmptyCollection)&&(v(n),i.toggle())},isFocused:I,setFocused:D}}function oe(e){if(e!==void 0)return e===null?[]:Array.isArray(e)?e:[e]}function re(e){let{ref:t,onInteractOutside:a,isDisabled:i,onInteractOutsideStart:x}=e,v=$({isPointerDown:!1,ignoreEmulatedMouseEvents:!1}),d=O(s=>{a&&P(s,t)&&(x&&x(s),v.current.isPointerDown=!0)}),y=O(s=>{a&&a(s)});q(()=>{let s=v.current;if(i)return;const o=t.current,l=J(o);if(typeof PointerEvent<"u"){let c=r=>{s.isPointerDown&&P(r,t)&&y(r),s.isPointerDown=!1};return l.addEventListener("pointerdown",d,!0),l.addEventListener("click",c,!0),()=>{l.removeEventListener("pointerdown",d,!0),l.removeEventListener("click",c,!0)}}else if(process.env.NODE_ENV==="test"){let c=m=>{s.ignoreEmulatedMouseEvents?s.ignoreEmulatedMouseEvents=!1:s.isPointerDown&&P(m,t)&&y(m),s.isPointerDown=!1},r=m=>{s.ignoreEmulatedMouseEvents=!0,s.isPointerDown&&P(m,t)&&y(m),s.isPointerDown=!1};return l.addEventListener("mousedown",d,!0),l.addEventListener("mouseup",c,!0),l.addEventListener("touchstart",d,!0),l.addEventListener("touchend",r,!0),()=>{l.removeEventListener("mousedown",d,!0),l.removeEventListener("mouseup",c,!0),l.removeEventListener("touchstart",d,!0),l.removeEventListener("touchend",r,!0)}}},[t,i])}function P(e,t){if(e.button>0)return!1;let a=Q(e);if(a){const i=a.ownerDocument;if(!i||!W(i.documentElement,a)||a.closest("[data-react-aria-top-layer]"))return!1}return t.current?!e.composedPath().includes(t.current):!1}function ve(e){const{label:t,description:a,errorMessage:i,children:x,placeholder:v,slots:d,popoverOffset:y,className:s,classNames:o,isLoading:l,name:c,selectedKey:r,defaultSelectedKey:m,onSelectionChange:h,isRequired:p,items:I,autoFocus:D,isInvalid:E,"aria-label":n,"aria-labelledby":f}=e,L=!!(e.isDisabled||l),K={label:t,children:x,items:I,name:c,selectedKey:r,defaultSelectedKey:m,onSelectionChange:h,isDisabled:L,isRequired:p,autoFocus:D,isInvalid:E,"aria-label":n,"aria-labelledby":f},b=se(K),V=$(null),S=$(null),A=$(null),B=$(null),{labelProps:R,triggerProps:F,valueProps:k,menuProps:j,descriptionProps:H,errorMessageProps:_,isInvalid:M}=T(K,b,S),{buttonProps:z}=U(F,S);return re({ref:V,onInteractOutside:()=>b.close()}),N("div",{ref:V,className:u("flex flex-col","w-full",s),children:[g("label",{...R,className:u("flex","text-xs text-slate-500",o?.label),children:t}),g(G,{state:b,triggerRef:S,label:t,name:c,isDisabled:L}),N("div",{className:u("flex","relative","w-full",o?.comboBoxContainer),children:[N("button",{...z,ref:S,className:u("flex items-center justify-between gap-2","border border-solid border-slate-300","text-sm text-slate-900 text-left","py-0 px-3","h-10 w-full","m-0","rounded-md","bg-white","cursor-pointer","transition-all ease-in-out duration-200","hover:border-slate-400","focus:outline focus:outline-2 focus:outline-slate-200 focus:border-slate-400","disabled:bg-slate-100 disabled:border-slate-300 disabled:cursor-default",M&&"border-red-500 bg-red-100 text-red-600 hover:border-red-600 focus:border-red-600 focus:outline-red-200",o?.input),children:[g("span",{...k,className:u("truncate",!b.selectedItem&&"text-slate-400",o?.value),children:b.selectedItem?b.selectedItem.rendered:v??"Select..."}),g("span",{className:u("shrink-0 [&_svg]:w-4 [&_svg]:h-4",o?.arrowButton),children:g(te,{isOpen:b.isOpen,isDisabled:L,isInvalid:M,buttonIcon:d?.buttonIcon})})]}),b.isOpen&&g(le,{popoverRef:B,offset:y,className:u(o?.listContainer),children:g(ne,{state:b,listBoxProps:j,listBoxRef:A,optionClassName:u(o?.option),sectionHeadingClassName:u(o?.sectionHeading),className:u("max-h-80","overflow-y-auto","outline-none",o?.list)})})]}),a&&g("span",{...H,className:u("flex","text-xs","text-slate-500",o?.description),children:a}),M&&typeof i=="string"&&g("span",{..._,className:u("flex","text-xs","text-red-500",o?.errorMessage),children:i})]})}export{ve as ButtonSelect,ve as default};

package/components/Select/ComboBoxSelect.js

@@ -1 +1 @@
-"use client";import{jsxs as de,jsx as I}from"react/jsx-runtime";import{useState as v,useMemo as R,useRef as x,useCallback as ce,useEffect as le,forwardRef as ye}from"react";import{useFilter as pe,useObjectRef as xe,useComboBox as he,useButton as Ve,HiddenSelect as Ie}from"react-aria";import{$ as Ce,b as $e,d as Ke,c as Oe,a as Se}from"../../assets/useOverlayTriggerState-CooW9h9l.js";import{$ as me}from"../../assets/useControlledState-Cmn8tE-_.js";import{cn as C}from"../../utils/cn.js";import"framer-motion";import{Pulse as ve}from"../Loader/Pulse.js";import{ChevronIcon as Fe,SelectOverlay as we,SelectListBox as Ae}from"./parts.js";const Ne=[];function Re(e){let{defaultFilter:y,menuTrigger:d="input",allowsEmptyCollection:$=!1,allowsCustomValue:K,shouldCloseOnBlur:m=!0,selectionMode:n="single"}=e,[O,B]=v(!1),[k,ne]=v(!1),[p,T]=v(null),Q=R(()=>e.defaultValue!==void 0?e.defaultValue:n==="single"?e.defaultSelectedKey??null:[],[e.defaultValue,e.defaultSelectedKey,n]),M=R(()=>e.value!==void 0?e.value:n==="single"?e.selectedKey:void 0,[e.value,e.selectedKey,n]),[j,ue]=me(M,Q,e.onChange),o=n==="single"&&Array.isArray(j)?j[0]:j,g=t=>{if(n==="single"){let i=Array.isArray(t)?t[0]??null:t;ue(i),i!==o&&e.onSelectionChange?.(i)}else{let i=[];Array.isArray(t)?i=t:t!=null&&(i=[t]),ue(i)}},{collection:c,selectionManager:f,disabledKeys:F}=Ce({...e,items:e.items??e.defaultItems,selectionMode:n,disallowEmptySelection:n==="single",allowDuplicateSelectionEvents:!0,selectedKeys:R(()=>Te(o),[o]),onSelectionChange:t=>{if(t!=="all")if(n==="single"){let i=t.values().next().value??null;i===o?(e.onSelectionChange?.(i),W(),S()):g(i)}else g([...t])}}),l=n==="single"?f.firstSelectedKey:null,P=R(()=>[...f.selectedKeys].map(t=>c.getItem(t)).filter(t=>t!=null),[f.selectedKeys,c]),[u,H]=me(e.inputValue,ge(e.defaultInputValue,l,c)||"",e.onInputChange),[q]=v(o),[se]=v(u),a=c,b=R(()=>e.items!=null||!y?c:Be(c,u,y),[c,u,y,e.items]),[X,Z]=v(b),E=x("focus"),r=$e({...e,onOpenChange:t=>{e.onOpenChange&&e.onOpenChange(t,t?E.current:void 0),f.setFocused(t),t||f.setFocusedKey(null)},isOpen:void 0,defaultOpen:void 0}),w=(t=null,i)=>{let J=i==="manual"||i==="focus"&&d==="focus";($||b.size>0||J&&a.size>0||e.items)&&(J&&!r.isOpen&&e.items===void 0&&B(!0),E.current=i,T(t),r.open())},_=(t=null,i)=>{let J=i==="manual"||i==="focus"&&d==="focus";!($||b.size>0||J&&a.size>0||e.items)&&!r.isOpen||(J&&!r.isOpen&&e.items===void 0&&B(!0),r.isOpen||(E.current=i),oe(t))},D=ce(()=>{Z(O?a:b)},[O,a,b]),oe=ce((t=null)=>{r.isOpen&&D(),T(t),r.toggle()},[r,D]),S=ce(()=>{r.isOpen&&(D(),r.close())},[r,D]),[U,z]=v(u),W=()=>{let t=l!=null?c.getItem(l)?.textValue??"":"";z(t),H(t)},A=x(o),N=x(l!=null?c.getItem(l)?.textValue??"":"");le(()=>{k&&(b.size>0||$)&&!r.isOpen&&u!==U&&d!=="manual"&&w(null,"input"),!O&&!$&&r.isOpen&&b.size===0&&S(),o!=null&&o!==A.current&&n==="single"&&S(),u!==U&&(f.setFocusedKey(null),B(!1),n==="single"&&u===""&&(e.inputValue===void 0||M===void 0)&&g(null)),o!==A.current&&(e.inputValue===void 0||M===void 0)?W():U!==u&&z(u);let t=l!=null?c.getItem(l)?.textValue??"":"";!k&&l!=null&&e.inputValue===void 0&&l===A.current&&N.current!==t&&(z(t),H(t)),A.current=o,N.current=t});let ee=Ke({...e,value:R(()=>Array.isArray(o)&&o.length===0?null:{inputValue:u,value:o,selectedKey:l},[u,l,o])}),ae=()=>{K&&l==null?te():L()},te=()=>{let t=n==="multiple"?Ne:null;A.current=t,g(t),S()},L=(t=!1)=>{if(M!==void 0&&e.inputValue!==void 0){let i=l!=null?c.getItem(l)?.textValue??"":"";(t||n==="multiple"||u!==i)&&(e.onSelectionChange?.(l),e.onChange?.(o)),z(i),S()}else W(),S()};const Y=()=>{if(K){const t=l!=null?c.getItem(l)?.textValue??"":"";u===t?L():te()}else L()};let re=()=>{r.isOpen&&f.focusedKey!=null?f.isSelected(f.focusedKey)&&n==="single"?L(!0):f.select(f.focusedKey):Y()},G=x([u,o]),s=t=>{t?(G.current=[u,o],d==="focus"&&!e.isReadOnly&&w(null,"focus")):(m&&Y(),(u!==G.current[0]||o!==G.current[1])&&ee.commitValidation()),ne(t)},h=R(()=>r.isOpen?O?a:b:X,[r.isOpen,a,b,O,X]),V=e.defaultSelectedKey??(n==="single"?q:null);return{...ee,...r,focusStrategy:p,toggle:_,open:w,close:Y,selectionManager:f,value:o,defaultValue:Q??q,setValue:g,selectedKey:l,selectedItems:P,defaultSelectedKey:V,setSelectedKey:g,disabledKeys:F,isFocused:k,setFocused:s,selectedItem:P[0]??null,collection:h,inputValue:u,defaultInputValue:ge(e.defaultInputValue,V,c)??se,setInputValue:H,commit:re,revert:ae}}function Be(e,y,d){return new Oe(be(e,e,y,d))}function be(e,y,d,$){let K=[];for(let m of y)if(m.type==="section"&&m.hasChildNodes){let n=be(e,Se(m,e),d,$);[...n].some(O=>O.type==="item")&&K.push({...m,childNodes:n})}else m.type==="item"&&$(m.textValue,d)?K.push({...m}):m.type!=="item"&&K.push({...m});return K}function ge(e,y,d){return e==null&&y!=null?d.getItem(y)?.textValue??"":e}function Te(e){if(e!==void 0)return e===null?[]:Array.isArray(e)?e:[e]}function fe(e){return e?typeof e.rendered=="string"?e.rendered:e.textValue??"":""}function Me(e,y){const{label:d,description:$,errorMessage:K,children:m,placeholder:n,isLoading:O,slots:B,popoverOffset:k,className:ne,classNames:p,autoComplete:T,menuTrigger:Q,selectTextOnFocus:M=!0,autoFocusFirstOption:j=!0,searchable:ue,name:o,...g}=e,c=!!g.isDisabled,f=x(!1),F=x(null),l=g.inputValue!==void 0,[P,u]=v(""),H=l?g.inputValue:P,q={...g,label:d,children:m,placeholder:n,isDisabled:c,menuTrigger:Q??"focus",autoComplete:T,inputValue:H,onInputChange:s=>{l||u(s),g.onInputChange?.(s),s===""&&F.current?.selectedKey!=null&&F.current.setSelectedKey(null)},onSelectionChange:s=>{if(!l){const h=s!=null?F.current?.collection.getItem(s):null;u(fe(h))}g.onSelectionChange?.(s)}},{contains:se}=pe({sensitivity:"base"}),a=Re({...q,defaultFilter:se,allowsEmptyCollection:!0});le(()=>{F.current=a});const b=fe(a.selectedItem);le(()=>{l||f.current||P===b||u(b)},[b,l,P]);const X=x(null),Z=xe(y),E=x(null),ie=x(null),r=x(null),w=x(null),_=x(null),{inputProps:D,listBoxProps:oe,labelProps:S,buttonProps:U,descriptionProps:z,errorMessageProps:W}=he({...q,inputRef:Z,listBoxRef:E,popoverRef:ie,buttonRef:r},a),{buttonProps:A}=Ve(U,r),N=a.displayValidation.isInvalid,{onKeyDown:ee,onFocus:ae,onBlur:te,...L}=D,Y=s=>{s.key==="Home"||s.key==="End"||ee?.(s)};le(()=>{const s=a.selectionManager;if(!j||!a.isOpen||a.inputValue.length===0){_.current=null;return}const h=s.focusedKey;if(h!=null&&h!==_.current)return;const V=a.collection.getFirstKey();_.current=V??null,V!=null&&V!==h&&s.setFocusedKey(V)});const re=s=>{ae?.(s);const h=f.current;if(f.current=!0,h||!M)return;const V=s.target,t=V.value;t&&requestAnimationFrame(()=>{V.value===t&&V.select()})},G=s=>{te?.(s);const h=s.currentTarget;requestAnimationFrame(()=>{document.activeElement!==h&&(f.current=!1,l||u(fe(F.current?.selectedItem)))})};return de("div",{ref:X,className:C("flex flex-col","w-full",ne),children:[I("label",{...S,className:C("flex","text-xs text-slate-500",p?.label),children:d}),I(Ie,{state:a,triggerRef:w,label:d,name:o,isDisabled:c,autoComplete:T}),de("div",{ref:w,className:C("flex","relative","w-full",p?.comboBoxContainer),children:[I("input",{...L,onKeyDown:Y,onFocus:re,onBlur:G,ref:Z,placeholder:n,autoComplete:T,className:C("border border-solid border-slate-300","text-sm text-slate-900","py-0 px-2","h-10 w-full","m-0","rounded-md","bg-white","transition-all ease-in-out duration-200","hover:border-slate-400","focus:border-slate-400 focus:outline focus:outline-2 focus:outline-slate-200","disabled:bg-slate-100 disabled:border-slate-300",O?"disabled:text-slate-900":"disabled:text-slate-500",N&&"border-red-500 bg-red-100 text-red-600 placeholder:text-slate-400",N&&"hover:border-red-600 focus:border-red-600 focus:outline-red-200",p?.input)}),O?I("div",{className:C("absolute top-2 right-2","block",p?.loader),children:B?.loadingIcon||I(ve,{})}):I("button",{...A,ref:r,className:C("absolute top-2 right-0","block","border-none bg-none",p?.arrowButton),children:I(Fe,{isOpen:a.isOpen,isDisabled:c,isInvalid:N,buttonIcon:B?.buttonIcon})}),a.isOpen&&a.collection.size>0&&I(we,{state:a,triggerRef:w,popoverRef:ie,offset:k,className:C(p?.listContainer),children:I(Ae,{state:a,listBoxProps:oe,listBoxRef:E,optionVirtualFocus:!0,optionClassName:C(p?.option),className:C("max-h-80","overflow-y-auto","outline-none",p?.list)})})]}),$&&I("span",{...z,className:C("flex","text-xs","text-slate-500",p?.description),children:$}),N&&typeof K=="string"&&I("span",{...W,className:C("flex","text-xs","text-red-500",p?.errorMessage),children:K})]})}const _e=ye(Me);export{_e as ComboBoxSelect,_e as default};
+"use client";import{jsxs as be,jsx as C}from"react/jsx-runtime";import{useState as N,useMemo as O,useRef as V,useCallback as me,useEffect as te,forwardRef as ve}from"react";import{useFilter as Oe,useObjectRef as Fe,useComboBox as we,useButton as Ae,HiddenSelect as Re}from"react-aria";import{$ as Me,b as Ne,d as Be,c as Te,a as Pe}from"../../assets/useOverlayTriggerState-CooW9h9l.js";import{$ as pe}from"../../assets/useControlledState-Cmn8tE-_.js";import{cn as p}from"../../utils/cn.js";import"framer-motion";import{Pulse as Ee}from"../Loader/Pulse.js";import{SelectTags as De,ChevronIcon as ze,SelectOverlay as ke,SelectListBox as Le}from"./parts.js";import"react-aria-components";const He=[];function je(e){let{defaultFilter:c,menuTrigger:y="input",allowsEmptyCollection:I=!1,allowsCustomValue:K,shouldCloseOnBlur:x=!0,selectionMode:u="single"}=e,[$,E]=N(!1),[G,ae]=N(!1),[d,D]=N(null),le=O(()=>e.defaultValue!==void 0?e.defaultValue:u==="single"?e.defaultSelectedKey??null:[],[e.defaultValue,e.defaultSelectedKey,u]),z=O(()=>e.value!==void 0?e.value:u==="single"?e.selectedKey:void 0,[e.value,e.selectedKey,u]),[_,re]=pe(z,le,e.onChange),i=u==="single"&&Array.isArray(_)?_[0]:_,F=t=>{if(u==="single"){let l=Array.isArray(t)?t[0]??null:t;re(l),l!==i&&e.onSelectionChange?.(l)}else{let l=[];Array.isArray(t)?l=t:t!=null&&(l=[t]),re(l)}},{collection:b,selectionManager:m,disabledKeys:U}=Me({...e,items:e.items??e.defaultItems,selectionMode:u,disallowEmptySelection:u==="single",allowDuplicateSelectionEvents:!0,selectedKeys:O(()=>Ge(i),[i]),onSelectionChange:t=>{if(t!=="all")if(u==="single"){let l=t.values().next().value??null;l===i?(e.onSelectionChange?.(l),Y(),S()):F(l)}else F([...t])}}),o=u==="single"?m.firstSelectedKey:null,ne=O(()=>[...m.selectedKeys].map(t=>b.getItem(t)).filter(t=>t!=null),[m.selectedKeys,b]),[s,g]=pe(e.inputValue,xe(e.defaultInputValue,o,b)||"",e.onInputChange),[k]=N(i),[L]=N(s),h=b,f=O(()=>e.items!=null||!c?b:qe(b,s,c),[b,s,c,e.items]),[H,B]=N(f),W=V("focus"),a=Ne({...e,onOpenChange:t=>{e.onOpenChange&&e.onOpenChange(t,t?W.current:void 0),m.setFocused(t),t||m.setFocusedKey(null)},isOpen:void 0,defaultOpen:void 0}),se=(t=null,l)=>{let P=l==="manual"||l==="focus"&&y==="focus";(I||f.size>0||P&&h.size>0||e.items)&&(P&&!a.isOpen&&e.items===void 0&&E(!0),W.current=l,D(t),a.open())},ue=(t=null,l)=>{let P=l==="manual"||l==="focus"&&y==="focus";!(I||f.size>0||P&&h.size>0||e.items)&&!a.isOpen||(P&&!a.isOpen&&e.items===void 0&&E(!0),a.isOpen||(W.current=l),r(t))},j=me(()=>{B($?h:f)},[$,h,f]),r=me((t=null)=>{a.isOpen&&j(),D(t),a.toggle()},[a,j]),S=me(()=>{a.isOpen&&(j(),a.close())},[a,j]),[T,w]=N(s),Y=()=>{let t=o!=null?b.getItem(o)?.textValue??"":"";w(t),g(t)},A=V(i),J=V(o!=null?b.getItem(o)?.textValue??"":"");te(()=>{G&&(f.size>0||I)&&!a.isOpen&&s!==T&&y!=="manual"&&se(null,"input"),!$&&!I&&a.isOpen&&f.size===0&&S(),i!=null&&i!==A.current&&u==="single"&&S(),s!==T&&(m.setFocusedKey(null),E(!1),u==="single"&&s===""&&(e.inputValue===void 0||z===void 0)&&F(null)),i!==A.current&&(e.inputValue===void 0||z===void 0)?Y():T!==s&&w(s);let t=o!=null?b.getItem(o)?.textValue??"":"";!G&&o!=null&&e.inputValue===void 0&&o===A.current&&J.current!==t&&(w(t),g(t)),A.current=i,J.current=t});let Q=Be({...e,value:O(()=>Array.isArray(i)&&i.length===0?null:{inputValue:s,value:i,selectedKey:o},[s,o,i])}),X=()=>{K&&o==null?q():R()},q=()=>{let t=u==="multiple"?He:null;A.current=t,F(t),S()},R=(t=!1)=>{if(z!==void 0&&e.inputValue!==void 0){let l=o!=null?b.getItem(o)?.textValue??"":"";(t||u==="multiple"||s!==l)&&(e.onSelectionChange?.(o),e.onChange?.(i)),w(l),S()}else Y(),S()};const Z=()=>{if(K){const t=o!=null?b.getItem(o)?.textValue??"":"";s===t?R():q()}else R()};let ce=()=>{a.isOpen&&m.focusedKey!=null?m.isSelected(m.focusedKey)&&u==="single"?R(!0):m.select(m.focusedKey):Z()},ee=V([s,i]),fe=t=>{t?(ee.current=[s,i],y==="focus"&&!e.isReadOnly&&se(null,"focus")):(x&&Z(),(s!==ee.current[0]||i!==ee.current[1])&&Q.commitValidation()),ae(t)},de=O(()=>a.isOpen?$?h:f:H,[a.isOpen,h,f,$,H]),ie=e.defaultSelectedKey??(u==="single"?k:null);return{...Q,...a,focusStrategy:d,toggle:ue,open:se,close:Z,selectionManager:m,value:i,defaultValue:le??k,setValue:F,selectedKey:o,selectedItems:ne,defaultSelectedKey:ie,setSelectedKey:F,disabledKeys:U,isFocused:G,setFocused:fe,selectedItem:ne[0]??null,collection:de,inputValue:s,defaultInputValue:xe(e.defaultInputValue,ie,b)??L,setInputValue:g,commit:ce,revert:X}}function qe(e,c,y){return new Te(Ve(e,e,c,y))}function Ve(e,c,y,I){let K=[];for(let x of c)if(x.type==="section"&&x.hasChildNodes){let u=Ve(e,Pe(x,e),y,I);[...u].some($=>$.type==="item")&&K.push({...x,childNodes:u})}else x.type==="item"&&I(x.textValue,y)?K.push({...x}):x.type!=="item"&&K.push({...x});return K}function xe(e,c,y){return e==null&&c!=null?y.getItem(c)?.textValue??"":e}function Ge(e){if(e!==void 0)return e===null?[]:Array.isArray(e)?e:[e]}function oe(e){return e?typeof e.rendered=="string"?e.rendered:e.textValue??"":""}function _e(e){let c=e.getFirstKey();for(;c!=null;){if(e.getItem(c)?.type==="item")return c;c=e.getKeyAfter(c)}return null}function Ue(e,c){const{label:y,description:I,errorMessage:K,children:x,placeholder:u,isLoading:$,slots:E,popoverOffset:G,className:ae,classNames:d,autoComplete:D,menuTrigger:le,selectTextOnFocus:z=!0,autoFocusFirstOption:_=!0,searchable:re,selectionMode:i="single",selectedKey:F,defaultSelectedKey:b,selectedKeys:m,defaultSelectedKeys:U,onSelectionChange:o,name:ne,...s}=e,g=i==="multiple",k=!!s.isDisabled,L=V(!1),h=V(null),f=s.inputValue!==void 0,[H,B]=N(""),W=f?s.inputValue:H,ge=O(()=>g&&m?[...m]:void 0,[g,m]),a=O(()=>g&&U?[...U]:void 0,[g,U]),ue={...s,label:y,children:x,placeholder:u,isDisabled:k,menuTrigger:le??"focus",autoComplete:D,inputValue:W,...g?{selectionMode:"multiple",value:ge,defaultValue:a,onChange:o}:{selectedKey:F,defaultSelectedKey:b,onSelectionChange:n=>{if(!f){const v=n!=null?h.current?.collection.getItem(n):null;B(oe(v))}o?.(n)}},onInputChange:n=>{f||B(n),s.onInputChange?.(n),!g&&n===""&&h.current?.selectedKey!=null&&h.current.setSelectedKey(null)}},{contains:j}=Oe({sensitivity:"base"}),r=je({...ue,defaultFilter:j,allowsEmptyCollection:!0});te(()=>{h.current=r});const S=V(0),T=r.selectionManager.selectedKeys.size;te(()=>{g&&(T>S.current&&!f&&B(""),S.current=T)},[g,T,f]);const w=oe(r.selectedItem);te(()=>{f||g||L.current||H===w||B(w)},[w,f,H,g]);const Y=V(null),A=Fe(c),J=V(null),Q=V(null),X=V(null),q=V(null),R=V(null),{inputProps:Z,listBoxProps:ce,labelProps:ee,buttonProps:fe,descriptionProps:de,errorMessageProps:ie}=we({...ue,inputRef:A,listBoxRef:J,popoverRef:Q,buttonRef:X},r),{buttonProps:t}=Ae(fe,X),l=r.displayValidation.isInvalid,{onKeyDown:P,onFocus:he,onBlur:Ce,...Ie}=Z,Ke=n=>{n.key==="Home"||n.key==="End"||P?.(n)};te(()=>{const n=r.selectionManager;if(!_||!r.isOpen||r.inputValue.length===0){R.current=null;return}const v=n.focusedKey;if(v!=null&&v!==R.current)return;const M=_e(r.collection);R.current=M??null,M!=null&&M!==v&&n.setFocusedKey(M)});const $e=n=>{he?.(n);const v=L.current;if(L.current=!0,v||!z)return;const M=n.target,ye=M.value;ye&&requestAnimationFrame(()=>{M.value===ye&&M.select()})},Se=n=>{Ce?.(n);const v=n.currentTarget;requestAnimationFrame(()=>{document.activeElement!==v&&(L.current=!1,f||B(g?"":oe(h.current?.selectedItem)))})};return be("div",{ref:Y,className:p("flex flex-col","w-full",ae),children:[C("label",{...ee,className:p("flex","text-xs text-slate-500",d?.label),children:y}),C(Re,{state:r,triggerRef:q,label:y,name:ne,isDisabled:k,autoComplete:D}),g&&C(De,{items:(r.selectedItems??[]).map(n=>({id:n.key,label:oe(n)})),onRemove:n=>r.selectionManager.toggleSelection(n),classNames:{tagGroup:p(d?.tagGroup),tag:p(d?.tag),tagRemoveButton:p(d?.tagRemoveButton)}}),be("div",{ref:q,className:p("flex","relative","w-full",d?.comboBoxContainer),children:[C("input",{...Ie,onKeyDown:Ke,onFocus:$e,onBlur:Se,ref:A,placeholder:u,autoComplete:D,className:p("border border-solid border-slate-300","text-sm text-slate-900","py-0 px-2","h-10 w-full","m-0","rounded-md","bg-white","transition-all ease-in-out duration-200","hover:border-slate-400","focus:border-slate-400 focus:outline focus:outline-2 focus:outline-slate-200","disabled:bg-slate-100 disabled:border-slate-300",$?"disabled:text-slate-900":"disabled:text-slate-500",l&&"border-red-500 bg-red-100 text-red-600 placeholder:text-slate-400",l&&"hover:border-red-600 focus:border-red-600 focus:outline-red-200",d?.input)}),$?C("div",{className:p("absolute top-2 right-2","block",d?.loader),children:E?.loadingIcon||C(Ee,{})}):C("button",{...t,ref:X,className:p("absolute top-2 right-0","block","border-none bg-none",d?.arrowButton),children:C(ze,{isOpen:r.isOpen,isDisabled:k,isInvalid:l,buttonIcon:E?.buttonIcon})}),r.isOpen&&r.collection.size>0&&C(ke,{state:r,triggerRef:q,popoverRef:Q,offset:G,className:p(d?.listContainer),children:C(Le,{state:r,listBoxProps:ce,listBoxRef:J,optionVirtualFocus:!0,optionClassName:p(d?.option),sectionHeadingClassName:p(d?.sectionHeading),className:p("max-h-80","overflow-y-auto","outline-none",d?.list)})})]}),I&&C("span",{...de,className:p("flex","text-xs","text-slate-500",d?.description),children:I}),l&&typeof K=="string"&&C("span",{...ie,className:p("flex","text-xs","text-red-500",d?.errorMessage),children:K})]})}const st=ve(Ue);export{st as ComboBoxSelect,st as default};

package/components/Select/Option.d.ts

@@ -1,2 +1,4 @@
+import { Section } from 'react-stately';
 export declare const Option: <T>(props: import('react-stately').ItemProps<T>) => import("react").JSX.Element;
+export { Section };
 export default Option;

package/components/Select/Option.js

@@ -1 +1 @@
-import d from"react";function r(t){return null}r.getCollectionNode=function*(e,u){let{childItems:a,title:c,children:f}=e,i=e.title||e.children,n=e.textValue||(typeof i=="string"?i:"")||e["aria-label"]||"";!n&&!u?.suppressTextValueWarning&&process.env.NODE_ENV!=="production"&&console.warn("<Item> with non-plain text contents is unsupported by type to select for accessibility. Please add a `textValue` prop."),yield{type:"item",props:e,rendered:i,textValue:n,"aria-label":e["aria-label"],hasChildNodes:s(e),*childNodes(){if(a)for(let l of a)yield{type:"item",value:l};else if(c){let l=[];d.Children.forEach(f,o=>{l.push({type:"item",element:o})}),yield*l}}}};function s(t){return t.hasChildItems!=null?t.hasChildItems:!!(t.childItems||t.title&&d.Children.count(t.children)>0)}let h=r;const y=h;export{y as Option,y as default};
+import d from"react";import{$ as C}from"../../assets/Section-DVpZrRV-.js";function r(t){return null}r.getCollectionNode=function*(e,o){let{childItems:a,title:u,children:c}=e,i=e.title||e.children,n=e.textValue||(typeof i=="string"?i:"")||e["aria-label"]||"";!n&&!o?.suppressTextValueWarning&&process.env.NODE_ENV!=="production"&&console.warn("<Item> with non-plain text contents is unsupported by type to select for accessibility. Please add a `textValue` prop."),yield{type:"item",props:e,rendered:i,textValue:n,"aria-label":e["aria-label"],hasChildNodes:s(e),*childNodes(){if(a)for(let l of a)yield{type:"item",value:l};else if(u){let l=[];d.Children.forEach(c,f=>{l.push({type:"item",element:f})}),yield*l}}}};function s(t){return t.hasChildItems!=null?t.hasChildItems:!!(t.childItems||t.title&&d.Children.count(t.children)>0)}let h=r;const y=h;export{y as Option,C as Section,y as default};

package/components/Select/Option.types.d.ts

@@ -1,2 +1,3 @@
-import { ItemProps } from 'react-stately';
+import { ItemProps, SectionProps as AriaSectionProps } from 'react-stately';
 export type OptionProps<T = object> = ItemProps<T>;
+export type SectionProps<T = object> = AriaSectionProps<T>;

package/components/Select/Select.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import{forwardRef as o,Children as n}from"react";import{ButtonSelect as i}from"./ButtonSelect.js";import{ComboBoxSelect as m}from"./ComboBoxSelect.js";import"react-aria";import"../../assets/useEffectEvent-gqjrDmw8.js";import"../../assets/useOverlayTriggerState-CooW9h9l.js";import"../../assets/useControlledState-Cmn8tE-_.js";import"../../utils/cn.js";import"./parts.js";import"framer-motion";import"../Loader/Pulse.js";const c=8;function l(t){return t.items?[...t.items].length:typeof t.children=="function"?Number.POSITIVE_INFINITY:n.count(t.children)}function u(t,r){return(t.searchable==="auto"?l(t)>c:!!t.searchable)?e(m,{ref:r,...t}):e(i,{...t})}const H=o(u);export{H as Select,H as default};
+"use client";import{jsx as r}from"react/jsx-runtime";import{forwardRef as c,Children as i,isValidElement as m}from"react";import{ButtonSelect as l}from"./ButtonSelect.js";import{ComboBoxSelect as f}from"./ComboBoxSelect.js";import{$ as a}from"../../assets/Section-DVpZrRV-.js";import"react-aria";import"../../assets/useEffectEvent-gqjrDmw8.js";import"../../assets/useOverlayTriggerState-CooW9h9l.js";import"../../assets/useControlledState-Cmn8tE-_.js";import"../../utils/cn.js";import"./parts.js";import"react-aria-components";import"framer-motion";import"../Loader/Pulse.js";const u=8;function s(e){if(e.items)return[...e.items].length;if(typeof e.children=="function")return Number.POSITIVE_INFINITY;let t=0;return i.forEach(e.children,o=>{if(m(o)&&o.type===a){const n=o.props.children;t+=i.count(n)}else t+=1}),t}function h(e,t){return e.selectionMode==="multiple"||(e.searchable==="auto"?s(e)>u:!!e.searchable)?r(f,{ref:t,...e}):r(l,{...e})}const R=c(h);export{R as Select,R as default};

package/components/Select/Select.types.d.ts

@@ -1,4 +1,4 @@
-import { ComboBoxRenderProps, ComboBoxProps as AriaComboBoxProps, ValidationResult, ListBoxProps } from 'react-aria-components';
+import { ComboBoxRenderProps, ComboBoxProps as AriaComboBoxProps, ValidationResult, ListBoxProps, Key } from 'react-aria-components';
 import { ComponentType, HTMLInputAutoCompleteAttribute, ReactNode } from 'react';
 import { SlotsToClasses } from '../../types/SlotsToClasses';
 export type SelectSlots<T extends object> = {
@@ -6,7 +6,20 @@ export type SelectSlots<T extends object> = {
     loadingIcon?: ReactNode;
     listBoxComponent?: ComponentType<ListBoxProps<T>>;
 };
-export interface SelectProps<T extends object> extends Omit<AriaComboBoxProps<T>, 'children'> {
+type SelectSingleSelection = {
+    selectionMode?: 'single';
+    selectedKey?: Key | null;
+    defaultSelectedKey?: Key;
+    onSelectionChange?: (key: Key | null) => void;
+};
+type SelectMultipleSelection = {
+    /** Multi-select is searchable-combobox only for now (button mode is single). */
+    selectionMode: 'multiple';
+    selectedKeys?: Iterable<Key>;
+    defaultSelectedKeys?: Iterable<Key>;
+    onSelectionChange?: (keys: Key[]) => void;
+};
+export interface SelectBaseProps<T extends object> extends Omit<AriaComboBoxProps<T>, 'children' | 'selectionMode' | 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange'> {
     label?: string;
     description?: string | null;
     errorMessage?: string | ((validation: ValidationResult) => string);
@@ -35,6 +48,8 @@ export interface SelectProps<T extends object> extends Omit<AriaComboBoxProps<T>
      * - `'auto'`: searchable once there are more than ~8 options.
      */
     searchable?: boolean | 'auto';
-    classNames?: SlotsToClasses<'label' | 'name' | 'comboBoxContainer' | 'input' | 'value' | 'loader' | 'arrowButton' | 'description' | 'errorMessage' | 'listContainer' | 'list' | 'option'>;
+    classNames?: SlotsToClasses<'label' | 'name' | 'comboBoxContainer' | 'input' | 'value' | 'loader' | 'arrowButton' | 'description' | 'errorMessage' | 'listContainer' | 'list' | 'option' | 'sectionHeading' | 'tagGroup' | 'tag' | 'tagRemoveButton'>;
     autoComplete?: HTMLInputAutoCompleteAttribute;
 }
+export type SelectProps<T extends object> = SelectBaseProps<T> & (SelectSingleSelection | SelectMultipleSelection);
+export {};

package/components/Select/index.d.ts

@@ -1,4 +1,4 @@
-export { Option } from './Option';
+export { Option, Section } from './Option';
 export { Select } from './Select';
-export type { OptionProps } from './Option.types';
-export type { SelectProps, SelectSlots } from './Select.types';
+export type { OptionProps, SectionProps } from './Option.types';
+export type { SelectBaseProps, SelectProps, SelectSlots } from './Select.types';

package/components/Select/index.js

@@ -1 +1 @@
-import{Option as a}from"./Option.js";import{Select as d}from"./Select.js";import"react";import"react/jsx-runtime";import"./ButtonSelect.js";import"react-aria";import"../../assets/useEffectEvent-gqjrDmw8.js";import"../../assets/useOverlayTriggerState-CooW9h9l.js";import"../../assets/useControlledState-Cmn8tE-_.js";import"../../utils/cn.js";import"./parts.js";import"./ComboBoxSelect.js";import"framer-motion";import"../Loader/Pulse.js";export{a as Option,d as Select};
+import{Option as O}from"./Option.js";import{Select as b}from"./Select.js";import{$ as g}from"../../assets/Section-DVpZrRV-.js";import"react";import"react/jsx-runtime";import"./ButtonSelect.js";import"react-aria";import"../../assets/useEffectEvent-gqjrDmw8.js";import"../../assets/useOverlayTriggerState-CooW9h9l.js";import"../../assets/useControlledState-Cmn8tE-_.js";import"../../utils/cn.js";import"./parts.js";import"react-aria-components";import"./ComboBoxSelect.js";import"framer-motion";import"../Loader/Pulse.js";export{O as Option,g as Section,b as Select};

package/components/Select/parts.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode, RefObject } from 'react';
 import { AriaListBoxOptions } from 'react-aria';
 import { ListState, Node, OverlayTriggerState } from 'react-stately';
+import { Key } from 'react-aria-components';
 import { SelectSlots } from './Select.types';
 export declare function SelectOption<T extends object>({ item, state, shouldUseVirtualFocus, className, }: {
     item: Node<T>;
@@ -8,12 +9,13 @@ export declare function SelectOption<T extends object>({ item, state, shouldUseV
     shouldUseVirtualFocus?: boolean;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function SelectListBox<T extends object>({ state, listBoxProps, listBoxRef, className, optionClassName, optionVirtualFocus, }: {
+export declare function SelectListBox<T extends object>({ state, listBoxProps, listBoxRef, className, optionClassName, sectionHeadingClassName, optionVirtualFocus, }: {
     state: ListState<T>;
     listBoxProps: AriaListBoxOptions<T>;
     listBoxRef: RefObject<HTMLUListElement>;
     className?: string;
     optionClassName?: string;
+    sectionHeadingClassName?: string;
     optionVirtualFocus?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function SelectPopover({ children, popoverRef, offset, className, }: {
@@ -30,6 +32,18 @@ export declare function SelectOverlay({ state, triggerRef, popoverRef, offset, c
     className?: string;
     children: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function SelectTags({ items, onRemove, classNames, }: {
+    items: {
+        id: Key;
+        label: string;
+    }[];
+    onRemove: (key: Key) => void;
+    classNames?: {
+        tagGroup?: string;
+        tag?: string;
+        tagRemoveButton?: string;
+    };
+}): import("react/jsx-runtime").JSX.Element | null;
 export declare function ChevronIcon({ isOpen, isDisabled, isInvalid, buttonIcon, }: {
     isOpen: boolean;
     isDisabled: boolean;

package/components/Select/parts.js

@@ -1 +1 @@
-"use client";import{jsx as r,jsxs as p}from"react/jsx-runtime";import{useState as f,useLayoutEffect as x,useRef as m}from"react";import{usePopover as h,Overlay as _,DismissButton as c,useListBox as b,useOption as v}from"react-aria";import{cn as d}from"../../utils/cn.js";function w({item:e,state:t,shouldUseVirtualFocus:o,className:s}){const l=m(null),{optionProps:a,isFocused:i,isSelected:n,isDisabled:u}=v({key:e.key,shouldUseVirtualFocus:o},t,l);return r("li",{...a,ref:l,"data-focused":i||void 0,"data-selected":n||void 0,"data-disabled":u||void 0,className:d("flex flex-auto items-center","rounded-md","p-2.5 mx-1.5","text-sm","cursor-default outline-none","text-slate-900","transition-all ease-in-out duration-150","data-[focused]:bg-slate-100","data-[selected]:font-semibold","data-[disabled]:text-slate-500",s),children:e.rendered})}function g({state:e,listBoxProps:t,listBoxRef:o,className:s,optionClassName:l,optionVirtualFocus:a}){const{listBoxProps:i}=b(t,e,o);return r("ul",{...i,ref:o,className:s,children:[...e.collection].map(n=>r(w,{item:n,state:e,shouldUseVirtualFocus:a,className:l},n.key))})}function P({children:e,popoverRef:t,offset:o,className:s}){return r("div",{ref:t,style:{marginTop:o??4},className:d("absolute top-full left-0 z-50 w-full","px-0 py-1.5","rounded-md bg-white","border border-solid border-slate-300","shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]",s),children:e})}function S({state:e,triggerRef:t,popoverRef:o,offset:s,className:l,children:a}){const{popoverProps:i}=h({triggerRef:t,popoverRef:o,isNonModal:!0,placement:"bottom start",offset:s??4},e),[n,u]=f();return x(()=>{t.current&&u(t.current.offsetWidth)},[t]),r(_,{children:p("div",{...i,ref:o,style:{...i.style,width:n},className:d("z-50","px-0 py-1.5","rounded-md bg-white","border border-solid border-slate-300","shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]",l),children:[r(c,{onDismiss:()=>e.close()}),a,r(c,{onDismiss:()=>e.close()})]})})}function B({isOpen:e,isDisabled:t,isInvalid:o,buttonIcon:s}){return s?typeof s=="function"?s({isOpen:e,isDisabled:t,isInvalid:o}):s:r("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:d("transition-all ease-in-out duration-200",e?"rotate-180":"rotate-0"),children:r("path",{d:"M6 9L12 15L18 9",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:d(["stroke-slate-900",t&&"stroke-slate-400",o&&"stroke-red-500"])})})}export{B as ChevronIcon,g as SelectListBox,w as SelectOption,S as SelectOverlay,P as SelectPopover};
+"use client";import{jsx as r,jsxs as u}from"react/jsx-runtime";import{useState as f,useLayoutEffect as m,useRef as h}from"react";import{usePopover as b,Overlay as g,DismissButton as p,useListBox as v,useListBoxSection as y,useOption as _}from"react-aria";import{TagGroup as k,TagList as w,Tag as N,Button as S}from"react-aria-components";import{cn as i}from"../../utils/cn.js";function x({item:e,state:o,shouldUseVirtualFocus:l,className:t}){const a=h(null),{optionProps:d,isFocused:n,isSelected:c,isDisabled:s}=_({key:e.key,shouldUseVirtualFocus:l},o,a);return r("li",{...d,ref:a,"data-focused":n||void 0,"data-selected":c||void 0,"data-disabled":s||void 0,className:i("flex flex-auto items-center","rounded-md","p-2.5 mx-1.5","text-sm","cursor-default outline-none","text-slate-900","transition-all ease-in-out duration-150","data-[focused]:bg-slate-100","data-[selected]:font-semibold","data-[disabled]:text-slate-500",t),children:e.rendered})}function L({section:e,state:o,shouldUseVirtualFocus:l,optionClassName:t,headingClassName:a}){const{itemProps:d,headingProps:n,groupProps:c}=y({heading:e.rendered,"aria-label":e["aria-label"]});return u("li",{...d,className:i("pt-1.5 first:pt-0"),children:[e.rendered!=null&&r("span",{...n,className:i("block px-3 pb-1 text-xs font-semibold text-slate-400",a),children:e.rendered}),r("ul",{...c,children:[...o.collection.getChildren(e.key)].map(s=>r(x,{item:s,state:o,shouldUseVirtualFocus:l,className:t},s.key))})]})}function O({state:e,listBoxProps:o,listBoxRef:l,className:t,optionClassName:a,sectionHeadingClassName:d,optionVirtualFocus:n}){const{listBoxProps:c}=v(o,e,l);return r("ul",{...c,ref:l,className:t,children:[...e.collection].map(s=>s.type==="section"?r(L,{section:s,state:e,shouldUseVirtualFocus:n,optionClassName:a,headingClassName:d},s.key):r(x,{item:s,state:e,shouldUseVirtualFocus:n,className:a},s.key))})}function W({children:e,popoverRef:o,offset:l,className:t}){return r("div",{ref:o,style:{marginTop:l??4},className:i("absolute top-full left-0 z-50 w-full","px-0 py-1.5","rounded-md bg-white","border border-solid border-slate-300","shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]",t),children:e})}function z({state:e,triggerRef:o,popoverRef:l,offset:t,className:a,children:d}){const{popoverProps:n}=b({triggerRef:o,popoverRef:l,isNonModal:!0,placement:"bottom start",offset:t??4},e),[c,s]=f();return m(()=>{o.current&&s(o.current.offsetWidth)},[o]),r(g,{children:u("div",{...n,ref:l,style:{...n.style,width:c},className:i("z-50","px-0 py-1.5","rounded-md bg-white","border border-solid border-slate-300","shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]",a),children:[r(p,{onDismiss:()=>e.close()}),d,r(p,{onDismiss:()=>e.close()})]})})}function C({items:e,onRemove:o,classNames:l}){return e.length===0?null:r(k,{"aria-label":"Selected options",onRemove:t=>{for(const a of t)o(a)},className:i("mb-1.5",l?.tagGroup),children:r(w,{items:e,className:i("flex flex-wrap gap-1.5"),children:t=>u(N,{id:t.id,textValue:t.label,className:i("inline-flex items-center gap-1","rounded-md bg-slate-100 text-slate-900","px-2 py-0.5 text-xs","outline-none","data-[focus-visible]:ring-2 data-[focus-visible]:ring-slate-300",l?.tag),children:[t.label,r(S,{slot:"remove","aria-label":`Remove ${t.label}`,className:i("leading-none outline-none","text-slate-500 hover:text-slate-900","data-[focus-visible]:text-slate-900",l?.tagRemoveButton),children:"×"})]})})})}function F({isOpen:e,isDisabled:o,isInvalid:l,buttonIcon:t}){return t?typeof t=="function"?t({isOpen:e,isDisabled:o,isInvalid:l}):t:r("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:i("transition-all ease-in-out duration-200",e?"rotate-180":"rotate-0"),children:r("path",{d:"M6 9L12 15L18 9",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:i(["stroke-slate-900",o&&"stroke-slate-400",l&&"stroke-red-500"])})})}export{F as ChevronIcon,O as SelectListBox,x as SelectOption,z as SelectOverlay,W as SelectPopover,C as SelectTags};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clicktap/ui",
-  "version": "0.37.0",
+  "version": "0.38.0",
   "private": false,
   "author": "Clicktap",
   "description": "A library of React UI components and low-level hooks.",