@clicktap/ui 2.4.6 → 2.4.7

package/components/Select/ButtonSelect.js

@@ -1 +1 @@
-"use client";import{jsxs as c,jsx as r}from"react/jsx-runtime";import{useRef as l}from"react";import{useSelect as z,useButton as A,HiddenSelect as E}from"react-aria";import{useInteractOutside as G}from"@react-aria/interactions";import{useSelectState as J}from"react-stately";import{cn as e}from"../../utils/cn.js";import{ChevronIcon as Q,SelectPopover as T,SelectListBox as U}from"./parts.js";import"react-aria-components";function se(d){const{label:a,description:u,errorMessage:f,children:g,placeholder:x,slots:h,popoverOffset:v,className:N,classNames:t,isLoading:I,name:b,selectedKey:P,defaultSelectedKey:S,onSelectionChange:y,isRequired:B,items:w,autoFocus:R,isInvalid:C,"aria-label":O,"aria-labelledby":L}=d,n=!!(d.isDisabled||I),m={label:a,children:g,items:w,name:b,selectedKey:P,defaultSelectedKey:S,onSelectionChange:y,isDisabled:n,isRequired:B,autoFocus:R,isInvalid:C,"aria-label":O,"aria-labelledby":L},s=J(m),p=l(null),o=l(null),j=l(null),H=l(null),{labelProps:M,triggerProps:D,valueProps:K,menuProps:_,descriptionProps:k,errorMessageProps:q,isInvalid:i}=z(m,s,o),{buttonProps:F}=A(D,o);return G({ref:p,onInteractOutside:()=>s.close()}),c("div",{ref:p,className:e("flex flex-col","w-full",N),children:[r("label",{...M,className:e("flex","text-xs text-fg-muted",t?.label),children:a}),r(E,{state:s,triggerRef:o,label:a,name:b,isDisabled:n}),c("div",{className:e("flex","relative","w-full",t?.comboBoxContainer),children:[c("button",{...F,ref:o,className:e("flex items-center justify-between gap-2","border border-solid border-border","text-sm text-fg text-left","py-0 px-3","h-10 w-full","m-0","rounded-md","bg-surface","cursor-pointer","transition-all ease-in-out duration-200","hover:border-border-emphasis","focus:outline focus:outline-2 focus:outline-border-subtle focus:border-border-emphasis","disabled:bg-surface-subtle disabled:border-border disabled:cursor-default",i&&"border-danger-soft bg-danger-surface text-danger hover:border-danger focus:border-danger focus:outline-danger-ring",t?.input),children:[r("span",{...K,className:e("truncate",!s.selectedItem&&"text-fg-subtle",t?.value),children:s.selectedItem?s.selectedItem.rendered:x??"Select..."}),r("span",{className:e("shrink-0 [&_svg]:w-4 [&_svg]:h-4",t?.arrowButton),children:r(Q,{isOpen:s.isOpen,isDisabled:n,isInvalid:i,buttonIcon:h?.buttonIcon})})]}),s.isOpen&&r(T,{popoverRef:H,offset:v,className:e(t?.listContainer),children:r(U,{state:s,listBoxProps:_,listBoxRef:j,optionClassName:e(t?.option),sectionHeadingClassName:e(t?.sectionHeading),className:e("max-h-80","overflow-y-auto","outline-none",t?.list)})})]}),u&&r("span",{...k,className:e("flex","text-xs","text-fg-muted",t?.description),children:u}),i&&typeof f=="string"&&r("span",{...q,className:e("flex","text-xs","text-danger-soft",t?.errorMessage),children:f})]})}export{se as ButtonSelect,se as default};
+"use client";import{jsxs as d,jsx as r}from"react/jsx-runtime";import{useRef as l}from"react";import{useSelect as E,useButton as G,HiddenSelect as J}from"react-aria";import{useInteractOutside as Q}from"@react-aria/interactions";import{useSelectState as T}from"react-stately";import{cn as e}from"../../utils/cn.js";import{ChevronIcon as U,SelectPopover as V,SelectListBox as W}from"./parts.js";import"react-aria-components";function oe(c){const{label:a,description:u,errorMessage:f,children:g,placeholder:x,slots:h,popoverOffset:v,className:N,classNames:s,isLoading:y,name:b,selectedKey:I,defaultSelectedKey:P,onSelectionChange:S,isRequired:B,items:w,autoFocus:R,isInvalid:C,id:O,"aria-label":L,"aria-labelledby":j,"aria-describedby":D}=c,n=!!(c.isDisabled||y),m={label:a,children:g,items:w,name:b,selectedKey:I,defaultSelectedKey:P,onSelectionChange:S,isDisabled:n,isRequired:B,autoFocus:R,isInvalid:C,id:O,"aria-label":L,"aria-labelledby":j,"aria-describedby":D},t=T(m),p=l(null),o=l(null),H=l(null),M=l(null),{labelProps:K,triggerProps:_,valueProps:k,menuProps:q,descriptionProps:F,errorMessageProps:z,isInvalid:i}=E(m,t,o),{buttonProps:A}=G(_,o);return Q({ref:p,onInteractOutside:()=>t.close()}),d("div",{ref:p,className:e("flex flex-col","w-full",N),children:[r("label",{...K,className:e("flex","text-xs text-fg-muted",s?.label),children:a}),r(J,{state:t,triggerRef:o,label:a,name:b,isDisabled:n}),d("div",{className:e("flex","relative","w-full",s?.comboBoxContainer),children:[d("button",{...A,ref:o,className:e("flex items-center justify-between gap-2","border border-solid border-border","text-sm text-fg text-left","py-0 px-3","h-10 w-full","m-0","rounded-md","bg-surface","cursor-pointer","transition-all ease-in-out duration-200","hover:border-border-emphasis","focus:outline focus:outline-2 focus:outline-border-subtle focus:border-border-emphasis","disabled:bg-surface-subtle disabled:border-border disabled:cursor-default",i&&"border-danger-soft bg-danger-surface text-danger hover:border-danger focus:border-danger focus:outline-danger-ring",s?.input),children:[r("span",{...k,className:e("truncate",!t.selectedItem&&"text-fg-subtle",s?.value),children:t.selectedItem?t.selectedItem.rendered:x??"Select..."}),r("span",{className:e("shrink-0 [&_svg]:w-4 [&_svg]:h-4",s?.arrowButton),children:r(U,{isOpen:t.isOpen,isDisabled:n,isInvalid:i,buttonIcon:h?.buttonIcon})})]}),t.isOpen&&r(V,{popoverRef:M,offset:v,className:e(s?.listContainer),children:r(W,{state:t,listBoxProps:q,listBoxRef:H,optionClassName:e(s?.option),sectionHeadingClassName:e(s?.sectionHeading),className:e("max-h-80","overflow-y-auto","outline-none",s?.list)})})]}),u&&r("span",{...F,className:e("flex","text-xs","text-fg-muted",s?.description),children:u}),i&&typeof f=="string"&&r("span",{...z,className:e("flex","text-xs","text-danger-soft",s?.errorMessage),children:f})]})}export{oe as ButtonSelect,oe as default};

package/package.json

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