design-system-silkhaus 3.2.0-beta.dropdown.9 → 3.2.0

package/dist/app/index.d.ts

@@ -40,12 +40,7 @@ export declare interface ButtonsGroupSelectorProps extends HTMLAttributes<HTMLDi
         startIcon?: default_2.ReactNode;
         endIcon?: default_2.ReactNode;
     }>;
-    options: Array<{
-        label: string;
-        value: string;
-        startIcon?: default_2.ReactNode;
-        endIcon?: default_2.ReactNode;
-    }>;
+    options: Array<OptionType | Separator>;
     onSelectionChange?: (selected: Array<{
         label: string;
         value: string;
@@ -148,4 +143,17 @@ export declare const findOptionByValue: (value: string | string[] | undefined, o
 
 export declare const MobileDropdown: FC<PropsWithChildren<DropdownProps>>;
 
+declare type OptionType = {
+    type?: 'option';
+    label: string;
+    value: string;
+    startIcon?: default_2.ReactNode;
+    endIcon?: default_2.ReactNode;
+};
+
+declare type Separator = {
+    type: 'separator';
+    component?: default_2.ReactNode;
+};
+
 export { }

package/dist/app/index.js

@@ -1 +1 @@
-"use strict";var X=Object.defineProperty,Y=Object.defineProperties;var Z=Object.getOwnPropertyDescriptors;var S=Object.getOwnPropertySymbols;var V=Object.prototype.hasOwnProperty,W=Object.prototype.propertyIsEnumerable;var P=(e,t,d)=>t in e?X(e,t,{enumerable:!0,configurable:!0,writable:!0,value:d}):e[t]=d,y=(e,t)=>{for(var d in t||(t={}))V.call(t,d)&&P(e,d,t[d]);if(S)for(var d of S(t))W.call(t,d)&&P(e,d,t[d]);return e},w=(e,t)=>Y(e,Z(t));var z=(e,t)=>{var d={};for(var r in e)V.call(e,r)&&t.indexOf(r)<0&&(d[r]=e[r]);if(e!=null&&S)for(var r of S(e))t.indexOf(r)<0&&W.call(e,r)&&(d[r]=e[r]);return d};Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../Checkbox-CYnBe4tB.cjs"),j=require("react"),T=({children:e,size:t="small"})=>s.jsxRuntimeExports.jsx("div",{className:`ds-flex ds-items-center ds-justify-center ${t==="small"?"ds-h-5 ds-w-5":"ds-h-6 ds-w-6"}`,children:e}),ss={primary:"ds-bg-Background-accentEggplant-100 ds-text-Text-textPrimaryDark ds-rounded-sm hover:ds-text-Text-textPrimaryDark hover:ds-bg-Background-accentEggplant-highlight hover:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] active:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] active:ds-bg-Background-accentEggplant-darkened focus:ds-bg-Background-accentEggplant-100 focus:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] disabled:focus:ds-shadow-none disabled:ds-bg-Background-accentEggplant-20 ds-text-mediumFootnoteEmphasized",secondary:"ds-text-black ds-rounded-sm ds-border ds-border-Fills-terciary hover:ds-bg-[#F6F8FC] hover:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] active:ds-bg-[#F6F8FC] active:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] focus:ds-bg-[#F6F8FC] focus:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] disabled:ds-border disabled:ds-border-Fills-terciary disabled:ds-text-Text-tertiary disabled:ds-bg-transparent ds-text-mediumFootnoteEmphasized"},es={primary:"ds-rounded-sm ds-border ds-text-black ds-border-Fills-terciary ds-bg-[#F6F8FC] ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] ds-text-mediumFootnoteEmphasized",secondary:"ds-rounded-sm ds-bg-Background-accentEggplant-100 ds-text-Text-textPrimaryDark ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] ds-text-mediumFootnoteEmphasized"},N=j.forwardRef((g,E)=>{var u=g,{color:e="primary",disabled:t=!1,className:d,children:r,startIcon:i,selected:c,endIcon:a,trackingId:n,helperText:x,helpterTextClassName:f,buttonClassName:h}=u,b=z(u,["color","disabled","className","children","startIcon","selected","endIcon","trackingId","helperText","helpterTextClassName","buttonClassName"]);return s.jsxRuntimeExports.jsxs("div",{className:s.cn("ds-flex ds-flex-col ds-gap-1",d),children:[s.jsxRuntimeExports.jsxs("button",w(y({"data-tracking-id":n,ref:E,disabled:t,className:s.twMerge(s.clsx({[es[e]]:c,[ss[e]]:!c},"ds-px-2 ds-py-1","ds-flex ds-w-full ds-flex-1 ds-items-center ds-justify-center",h))},b),{children:[i&&s.jsxRuntimeExports.jsx(T,{children:i}),r&&s.jsxRuntimeExports.jsx("div",{className:`${i?"ds-ml-1":""} ${a?"ds-mr-1":""}`,children:r}),a&&s.jsxRuntimeExports.jsx(T,{children:a})]})),x&&s.jsxRuntimeExports.jsx("div",{className:s.cn("ds-w-full ds-text-right ds-text-mediumFootnoteRegular",f),children:x})]})});N.displayName="Button";const U=j.forwardRef((e,t)=>{const v=e,{value:d,options:r,onSelectionChange:i=()=>{},isMultiSelect:c,noDataError:a,buttonMinWidth:n,buttonWidth:x,minSelectionError:f,buttonsContainerClassName:h,buttonClassName:b}=v,E=z(v,["value","options","onSelectionChange","isMultiSelect","noDataError","buttonMinWidth","buttonWidth","minSelectionError","buttonsContainerClassName","buttonClassName"]),[g,u]=j.useState([]),[p,R]=j.useState("");j.useEffect(()=>{d&&d.length?u(d):u([])},[d]);const k=(l,o)=>{o.currentTarget.blur();const m=[...g],F=m.findIndex(B=>B.value===l.value);F!==-1?m.length>1?(m.splice(F,1),R("")):R(f):(m.push(l),R("")),u(m),i(m)},_=(l,o)=>{o.currentTarget.blur();const m=[l];u(m),i(m)};return s.jsxRuntimeExports.jsxs("div",w(y({ref:t},E),{children:[s.jsxRuntimeExports.jsx("div",{className:s.cn("ds-flex ds-flex-wrap ds-gap-2",h),children:r.length>0?r.map(l=>s.jsxRuntimeExports.jsx(j.Fragment,{children:c?s.jsxRuntimeExports.jsx(N,{selected:g.some(o=>o.value===l.value),onClick:o=>k(l,o),color:"secondary",style:{minWidth:n,width:x},className:b,startIcon:l.startIcon,endIcon:l.endIcon,children:l.label}):s.jsxRuntimeExports.jsx(N,{selected:g.some(o=>o.value===l.value),onClick:o=>_(l,o),color:"secondary",style:{minWidth:n,width:x},className:b,startIcon:l.startIcon,endIcon:l.endIcon,children:l.label})},l.value)):s.jsxRuntimeExports.jsx("div",{className:"ds_xSmallSubheadRegular ds-p-2 ds-text-System-red",children:a})}),p&&s.jsxRuntimeExports.jsx("div",{className:"ds_xSmallSubheadRegular ds-p-2 ds-text-System-red",children:p})]}))});U.displayName="ButtonsGroupSelector";const $=e=>window.innerWidth<s.tabletMinWidth?s.jsxRuntimeExports.jsx(M,y({},e)):s.jsxRuntimeExports.jsx(I,y({},e));$.displayName="Dropdown";const I=({placement:e="bottom-start",trigger:t,triggerContainerClassName:d,disabled:r,onOpenChange:i,adjustHeight:c=!0,adjustWidth:a=!0,options:n,getSelectedValueDisplayText:x=J,placeholder:f,value:h,isMultiSelect:b,onChange:E})=>{const[g,u]=j.useState(),p=typeof h=="undefined"?g:h,R=typeof h=="undefined"?u:()=>{},[k,_]=j.useState(!1),{refs:v,floatingStyles:l,context:o}=s.useFloating({open:k,onOpenChange:D=>{_(D),i&&i(D)},middleware:[s.offset(8),s.flip({crossAxis:e.includes("-"),fallbackAxisSideDirection:"end"}),s.shift({padding:4}),s.size({apply({availableWidth:D,availableHeight:Q,elements:A}){c&&(A.floating.style.maxHeight=`${Q-4}px`),a&&(A.floating.style.maxWidth=`${D-4}px`)}})],whileElementsMounted:s.autoUpdate,placement:e}),m=s.useClick(o),F=s.useFocus(o),B=s.useDismiss(o),K=s.useRole(o),{getReferenceProps:L,getFloatingProps:O}=s.useInteractions([m,F,B,K]);return t||(t=s.jsxRuntimeExports.jsx(q,{selectedOption:C(p,n),getSelectedValueDisplayText:x,placeholder:f})),r?s.jsxRuntimeExports.jsx("div",{className:d,children:t}):s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[s.jsxRuntimeExports.jsx("div",w(y({className:s.cn("ds-cursor-pointer",d),ref:v.setReference},L()),{children:t})),k&&s.jsxRuntimeExports.jsx(s.FloatingPortal,{children:s.jsxRuntimeExports.jsx("div",w(y({ref:v.setFloating,style:l},O()),{className:s.cn("ds-z-[29999] ds-flex ds-min-w-[200px] ds-flex-col ds-gap-1 ds-rounded ds-bg-white ds-p-2 ds-shadow-md",c&&"ds-overflow-y-auto",a&&"ds-overflow-x-auto"),children:s.jsxRuntimeExports.jsx(H,{isMultiSelect:b,options:n,value:p,setValue:R,setIsOpen:_,onChange:E})}))})]})};I.displayName="DesktopDropdown";const M=({trigger:e,triggerContainerClassName:t,disabled:d,onOpenChange:r,getSelectedValueDisplayText:i=J,placeholder:c,value:a,options:n,isMultiSelect:x,onChange:f})=>{const[h,b]=j.useState(),E=typeof a=="undefined"?h:a,g=typeof a=="undefined"?b:()=>{},[u,p]=j.useState(!1);return e||(e=s.jsxRuntimeExports.jsx(q,{selectedOption:C(E,n),getSelectedValueDisplayText:i,placeholder:c})),d?s.jsxRuntimeExports.jsx("div",{className:t,children:e}):s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[s.jsxRuntimeExports.jsx("div",{className:t,onClick:()=>{p(!0),r&&r(!0)},children:e}),s.jsxRuntimeExports.jsx(s.AnimatedModal,{animation:"slideUp",show:u,handleClose:()=>{p(!1),r&&r(!1)},contentClassName:s.cn("ds-absolute ds-mb-0 ds-w-full"),className:"ds-z-[29999]",children:s.jsxRuntimeExports.jsx(G,{onClose:()=>{p(!1),r&&r(!1)},children:s.jsxRuntimeExports.jsx(H,{isMultiSelect:x,options:n,value:E,setValue:g,setIsOpen:p,onChange:f})})})]})};M.displayName="MobileDropdown";const G=({onClose:e,children:t})=>s.jsxRuntimeExports.jsxs("div",{className:"ds-mb-0 ds-flex ds-max-h-dvh ds-w-full ds-flex-col ds-bg-white",children:[s.jsxRuntimeExports.jsxs("div",{className:"ds-flex ds-shrink-0 ds-items-center ds-justify-between ds-px-8 ds-py-4",children:[s.jsxRuntimeExports.jsx("div",{onClick:e,className:"ds-flex ds-size-5 ds-cursor-pointer ds-items-center ds-justify-center",children:s.jsxRuntimeExports.jsx(s.CloseIcon,{className:"ds-size-4"})}),s.jsxRuntimeExports.jsx("div",{className:"ds-size-5"})]}),s.jsxRuntimeExports.jsx("div",{className:"ds-grow ds-overflow-y-auto ds-p-4 ds-text-xSmallCalloutRegular",children:t}),s.jsxRuntimeExports.jsx("div",{className:"ds-px-8 ds-py-4",children:s.jsxRuntimeExports.jsx(s.Button,{buttonClassName:"ds-py-3",onClick:e,children:"Close"})})]});G.displayName="MobilePopoverContentWrapper";const q=({selectedOption:e,getSelectedValueDisplayText:t,placeholder:d})=>{const r=!e||Array.isArray(e)&&e.length===0?d||"":t(e);return s.jsxRuntimeExports.jsx(N,{color:"secondary",endIcon:s.jsxRuntimeExports.jsx(s.ChevronDownRegularIcon,{className:"ds-size-4"}),buttonClassName:"ds-justify-between",children:r})},H=({options:e,isMultiSelect:t,value:d,setValue:r,setIsOpen:i,onChange:c})=>e&&e.map(a=>s.jsxRuntimeExports.jsx(ts,{onClick:()=>{let n;if(t){const x=d||[];x.includes(a.value)?n=x.filter(f=>f!==a.value):n=[...x,a.value]}else n=a.value,i(!1);r(n),c&&c(C(n,e))},option:a,isSelected:Array.isArray(d)?d.some(n=>n===a.value):d===a.value,showCheckbox:t},a.value)),ts=({onClick:e,option:t,isSelected:d,showCheckbox:r})=>s.jsxRuntimeExports.jsxs("div",{onClick:t.disabled?void 0:e,className:s.cn("ds-flex ds-min-h-[72px] ds-transform ds-cursor-pointer ds-items-center ds-gap-4 ds-rounded ds-px-4 ds-py-2 ds-text-smallFootnoteEmphasized hover:ds-bg-[#F6F8FC] ds-tablet:ds-min-h-[auto] ds-tablet:ds-gap-2 ds-tablet:ds-px-2 ds-desktop:ds-text-mediumFootnoteEmphasized",!r&&"ds-transform ds-transition-all ds-duration-300 hover:ds-px-4"),children:[t.thumbnailUrl&&s.jsxRuntimeExports.jsx("img",{src:t.thumbnailUrl,className:"ds-h-14 ds-w-14 ds-shrink-0 ds-rounded ds-object-cover ds-tablet:ds-h-6 ds-tablet:ds-w-9 ds-tablet:ds-rounded-sm"}),t.icon,s.jsxRuntimeExports.jsx("div",{className:"ds-flex-grow",children:t.label}),d&&!r&&s.jsxRuntimeExports.jsx(s.CheckmarkIcon,{className:"ds-size-4 ds-shrink-0"}),r&&s.jsxRuntimeExports.jsx(s.Checkbox,{isChecked:d,disabled:t.disabled})]}),C=(e,t)=>Array.isArray(e)?t.filter(d=>e.includes(d.value)):t.find(d=>d.value===e),J=e=>Array.isArray(e)?e.map(t=>t.label).join(", "):e.label;exports.Button=N;exports.ButtonsGroupSelector=U;exports.DesktopDropdown=I;exports.Dropdown=$;exports.MobileDropdown=M;exports.findOptionByValue=C;
+"use strict";var X=Object.defineProperty,Y=Object.defineProperties;var Z=Object.getOwnPropertyDescriptors;var S=Object.getOwnPropertySymbols;var V=Object.prototype.hasOwnProperty,W=Object.prototype.propertyIsEnumerable;var P=(e,t,d)=>t in e?X(e,t,{enumerable:!0,configurable:!0,writable:!0,value:d}):e[t]=d,v=(e,t)=>{for(var d in t||(t={}))V.call(t,d)&&P(e,d,t[d]);if(S)for(var d of S(t))W.call(t,d)&&P(e,d,t[d]);return e},w=(e,t)=>Y(e,Z(t));var z=(e,t)=>{var d={};for(var r in e)V.call(e,r)&&t.indexOf(r)<0&&(d[r]=e[r]);if(e!=null&&S)for(var r of S(e))t.indexOf(r)<0&&W.call(e,r)&&(d[r]=e[r]);return d};Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../Checkbox-BeM7floB.cjs"),m=require("react"),T=({children:e,size:t="small"})=>s.jsxRuntimeExports.jsx("div",{className:`ds-flex ds-items-center ds-justify-center ${t==="small"?"ds-h-5 ds-w-5":"ds-h-6 ds-w-6"}`,children:e}),ss={primary:"ds-bg-Background-accentEggplant-100 ds-text-Text-textPrimaryDark ds-rounded-sm hover:ds-text-Text-textPrimaryDark hover:ds-bg-Background-accentEggplant-highlight hover:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] active:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] active:ds-bg-Background-accentEggplant-darkened focus:ds-bg-Background-accentEggplant-100 focus:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] disabled:focus:ds-shadow-none disabled:ds-bg-Background-accentEggplant-20 ds-text-mediumFootnoteEmphasized",secondary:"ds-bg-white ds-text-black ds-rounded-sm ds-border ds-border-Fills-terciary hover:ds-bg-[#F6F8FC] hover:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] active:ds-bg-[#F6F8FC] active:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] focus:ds-bg-[#F6F8FC] focus:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] disabled:ds-border disabled:ds-border-Fills-terciary disabled:ds-text-Text-tertiary disabled:ds-bg-transparent ds-text-mediumFootnoteEmphasized"},es={primary:"ds-rounded-sm ds-border ds-text-black ds-border-Fills-terciary ds-bg-[#F6F8FC] ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] ds-text-mediumFootnoteEmphasized",secondary:"ds-rounded-sm ds-bg-Background-accentEggplant-100 ds-text-Text-textPrimaryDark ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] ds-text-mediumFootnoteEmphasized"},N=m.forwardRef((E,g)=>{var u=E,{color:e="primary",disabled:t=!1,className:d,children:r,startIcon:i,selected:c,endIcon:n,trackingId:o,helperText:x,helpterTextClassName:f,buttonClassName:h}=u,b=z(u,["color","disabled","className","children","startIcon","selected","endIcon","trackingId","helperText","helpterTextClassName","buttonClassName"]);return s.jsxRuntimeExports.jsxs("div",{className:s.cn("ds-flex ds-flex-col ds-gap-1",d),children:[s.jsxRuntimeExports.jsxs("button",w(v({"data-tracking-id":o,ref:g,disabled:t,className:s.twMerge(s.clsx({[es[e]]:c,[ss[e]]:!c},"ds-px-2 ds-py-1","ds-flex ds-w-full ds-flex-1 ds-items-center ds-justify-center",h))},b),{children:[i&&s.jsxRuntimeExports.jsx(T,{children:i}),r&&s.jsxRuntimeExports.jsx("div",{className:`${i?"ds-ml-1":""} ${n?"ds-mr-1":""}`,children:r}),n&&s.jsxRuntimeExports.jsx(T,{children:n})]})),x&&s.jsxRuntimeExports.jsx("div",{className:s.cn("ds-w-full ds-text-right ds-text-mediumFootnoteRegular",f),children:x})]})});N.displayName="Button";const U=m.forwardRef((e,t)=>{const R=e,{value:d,options:r,onSelectionChange:i=()=>{},isMultiSelect:c,noDataError:n,buttonMinWidth:o,buttonWidth:x,minSelectionError:f,buttonsContainerClassName:h,buttonClassName:b}=R,g=z(R,["value","options","onSelectionChange","isMultiSelect","noDataError","buttonMinWidth","buttonWidth","minSelectionError","buttonsContainerClassName","buttonClassName"]),[E,u]=m.useState([]),[p,y]=m.useState("");m.useEffect(()=>{d&&d.length?u(d):u([])},[d]);const F=(a,j)=>{j.currentTarget.blur();const l=[...E],k=l.findIndex(B=>B.value===a.value);k!==-1?l.length>1?(l.splice(k,1),y("")):y(f):(l.push(a),y("")),u(l),i(l)},_=(a,j)=>{j.currentTarget.blur();const l=[a];u(l),i(l)};return s.jsxRuntimeExports.jsxs("div",w(v({ref:t},g),{children:[s.jsxRuntimeExports.jsx("div",{className:s.cn("ds-flex ds-flex-wrap ds-items-center ds-gap-2",h),children:r.length>0?r.map((a,j)=>a.type==="separator"?s.jsxRuntimeExports.jsx(m.Fragment,{children:a.component?a.component:s.jsxRuntimeExports.jsx("div",{className:"ds-h-full ds-min-h-[30px] ds-w-[1px] ds-bg-Fills-terciary"})},`separator-${j}`):s.jsxRuntimeExports.jsx(m.Fragment,{children:c?s.jsxRuntimeExports.jsx(N,{selected:E.some(l=>l.value===a.value),onClick:l=>F(a,l),color:"secondary",style:{minWidth:o,width:x},className:b,startIcon:a.startIcon,endIcon:a.endIcon,children:a.label}):s.jsxRuntimeExports.jsx(N,{selected:E.some(l=>l.value===a.value),onClick:l=>_(a,l),color:"secondary",style:{minWidth:o,width:x},className:b,startIcon:a.startIcon,endIcon:a.endIcon,children:a.label})},a.value)):s.jsxRuntimeExports.jsx("div",{className:"ds_xSmallSubheadRegular ds-p-2 ds-text-System-red",children:n})}),p&&s.jsxRuntimeExports.jsx("div",{className:"ds_xSmallSubheadRegular ds-p-2 ds-text-System-red",children:p})]}))});U.displayName="ButtonsGroupSelector";const $=e=>window.innerWidth<s.tabletMinWidth?s.jsxRuntimeExports.jsx(M,v({},e)):s.jsxRuntimeExports.jsx(I,v({},e));$.displayName="Dropdown";const I=({placement:e="bottom-start",trigger:t,triggerContainerClassName:d,disabled:r,onOpenChange:i,adjustHeight:c=!0,adjustWidth:n=!0,options:o,getSelectedValueDisplayText:x=J,placeholder:f,value:h,isMultiSelect:b,onChange:g})=>{const[E,u]=m.useState(),p=typeof h=="undefined"?E:h,y=typeof h=="undefined"?u:()=>{},[F,_]=m.useState(!1),{refs:R,floatingStyles:a,context:j}=s.useFloating({open:F,onOpenChange:D=>{_(D),i&&i(D)},middleware:[s.offset(8),s.flip({crossAxis:e.includes("-"),fallbackAxisSideDirection:"end"}),s.shift({padding:4}),s.size({apply({availableWidth:D,availableHeight:Q,elements:A}){c&&(A.floating.style.maxHeight=`${Q-4}px`),n&&(A.floating.style.maxWidth=`${D-4}px`)}})],whileElementsMounted:s.autoUpdate,placement:e}),l=s.useClick(j),k=s.useFocus(j),B=s.useDismiss(j),K=s.useRole(j),{getReferenceProps:L,getFloatingProps:O}=s.useInteractions([l,k,B,K]);return t||(t=s.jsxRuntimeExports.jsx(q,{selectedOption:C(p,o),getSelectedValueDisplayText:x,placeholder:f})),r?s.jsxRuntimeExports.jsx("div",{className:d,children:t}):s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[s.jsxRuntimeExports.jsx("div",w(v({className:s.cn("ds-cursor-pointer",d),ref:R.setReference},L()),{children:t})),F&&s.jsxRuntimeExports.jsx(s.FloatingPortal,{children:s.jsxRuntimeExports.jsx("div",w(v({ref:R.setFloating,style:a},O()),{className:s.cn("ds-z-[29999] ds-flex ds-min-w-[200px] ds-flex-col ds-gap-1 ds-rounded ds-bg-white ds-p-2 ds-shadow-md",c&&"ds-overflow-y-auto",n&&"ds-overflow-x-auto"),children:s.jsxRuntimeExports.jsx(H,{isMultiSelect:b,options:o,value:p,setValue:y,setIsOpen:_,onChange:g})}))})]})};I.displayName="DesktopDropdown";const M=({trigger:e,triggerContainerClassName:t,disabled:d,onOpenChange:r,getSelectedValueDisplayText:i=J,placeholder:c,value:n,options:o,isMultiSelect:x,onChange:f})=>{const[h,b]=m.useState(),g=typeof n=="undefined"?h:n,E=typeof n=="undefined"?b:()=>{},[u,p]=m.useState(!1);return e||(e=s.jsxRuntimeExports.jsx(q,{selectedOption:C(g,o),getSelectedValueDisplayText:i,placeholder:c})),d?s.jsxRuntimeExports.jsx("div",{className:t,children:e}):s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[s.jsxRuntimeExports.jsx("div",{className:t,onClick:()=>{p(!0),r&&r(!0)},children:e}),s.jsxRuntimeExports.jsx(s.AnimatedModal,{animation:"slideUp",show:u,handleClose:()=>{p(!1),r&&r(!1)},contentClassName:s.cn("ds-absolute ds-mb-0 ds-w-full"),className:"ds-z-[29999]",children:s.jsxRuntimeExports.jsx(G,{onClose:()=>{p(!1),r&&r(!1)},children:s.jsxRuntimeExports.jsx(H,{isMultiSelect:x,options:o,value:g,setValue:E,setIsOpen:p,onChange:f})})})]})};M.displayName="MobileDropdown";const G=({onClose:e,children:t})=>s.jsxRuntimeExports.jsxs("div",{className:"ds-mb-0 ds-flex ds-max-h-dvh ds-w-full ds-flex-col ds-bg-white",children:[s.jsxRuntimeExports.jsxs("div",{className:"ds-flex ds-shrink-0 ds-items-center ds-justify-between ds-px-8 ds-py-4",children:[s.jsxRuntimeExports.jsx("div",{onClick:e,className:"ds-flex ds-size-5 ds-cursor-pointer ds-items-center ds-justify-center",children:s.jsxRuntimeExports.jsx(s.CloseIcon,{className:"ds-size-4"})}),s.jsxRuntimeExports.jsx("div",{className:"ds-size-5"})]}),s.jsxRuntimeExports.jsx("div",{className:"ds-grow ds-overflow-y-auto ds-p-4 ds-text-xSmallCalloutRegular",children:t}),s.jsxRuntimeExports.jsx("div",{className:"ds-px-8 ds-py-4",children:s.jsxRuntimeExports.jsx(s.Button,{buttonClassName:"ds-py-3",onClick:e,children:"Close"})})]});G.displayName="MobilePopoverContentWrapper";const q=({selectedOption:e,getSelectedValueDisplayText:t,placeholder:d})=>{const r=!e||Array.isArray(e)&&e.length===0?d||"":t(e);return s.jsxRuntimeExports.jsx(N,{color:"secondary",endIcon:s.jsxRuntimeExports.jsx(s.ChevronDownRegularIcon,{className:"ds-size-4"}),buttonClassName:"ds-justify-between",children:r})},H=({options:e,isMultiSelect:t,value:d,setValue:r,setIsOpen:i,onChange:c})=>e&&e.map(n=>s.jsxRuntimeExports.jsx(ts,{onClick:()=>{let o;if(t){const x=d||[];x.includes(n.value)?o=x.filter(f=>f!==n.value):o=[...x,n.value]}else o=n.value,i(!1);r(o),c&&c(C(o,e))},option:n,isSelected:Array.isArray(d)?d.some(o=>o===n.value):d===n.value,showCheckbox:t},n.value)),ts=({onClick:e,option:t,isSelected:d,showCheckbox:r})=>s.jsxRuntimeExports.jsxs("div",{onClick:t.disabled?void 0:e,className:s.cn("ds-group ds-flex ds-min-h-[72px] ds-cursor-pointer ds-items-center ds-gap-4 ds-rounded ds-px-4 ds-py-2 ds-text-smallFootnoteEmphasized hover:ds-bg-[#F6F8FC] ds-tablet:ds-min-h-[auto] ds-tablet:ds-gap-2 ds-tablet:ds-px-2 ds-desktop:ds-text-mediumFootnoteEmphasized",!r&&"ds-transition-[padding] ds-duration-300 hover:ds-px-4"),children:[t.thumbnailUrl&&s.jsxRuntimeExports.jsx("img",{src:t.thumbnailUrl,className:"ds-h-14 ds-w-14 ds-shrink-0 ds-rounded ds-object-cover group-hover:ds-pr-0 ds-tablet:ds-h-6 ds-tablet:ds-w-9 ds-tablet:ds-rounded-sm"}),t.icon,s.jsxRuntimeExports.jsx("div",{className:s.cn("ds-flex-grow",!r&&"ds-transition-[padding] ds-duration-300 group-hover:ds-pr-0 ds-tablet:ds-pr-4"),children:t.label}),d&&!r&&s.jsxRuntimeExports.jsx(s.CheckmarkIcon,{className:"ds-size-4 ds-shrink-0"}),r&&s.jsxRuntimeExports.jsx(s.Checkbox,{isChecked:d,disabled:t.disabled})]}),C=(e,t)=>Array.isArray(e)?t.filter(d=>e.includes(d.value)):t.find(d=>d.value===e),J=e=>Array.isArray(e)?e.map(t=>t.label).join(", "):e.label;exports.Button=N;exports.ButtonsGroupSelector=U;exports.DesktopDropdown=I;exports.Dropdown=$;exports.MobileDropdown=M;exports.findOptionByValue=C;

package/dist/index.d.ts

@@ -106,6 +106,10 @@ export declare const ArrowRightIcon: FC<{
     className?: string;
 }>;
 
+export declare const ArrowTopRightIcon: FC<{
+    className?: string;
+}>;
+
 export declare const ArrowUndoIcon: FC<{
     className?: string;
 }>;
@@ -125,6 +129,10 @@ export declare type BadgeProps = {
     className?: string;
 };
 
+export declare const BankRegularIcon: FC<{
+    className?: string;
+}>;
+
 export declare const BarsIcon: FC<{
     className?: string;
 }>;
@@ -784,6 +792,10 @@ export declare interface MobileSelectCardDropDownProps extends HTMLAttributes<HT
 
 export declare const MobileTootip: FC<PropsWithChildren<TooltipProps>>;
 
+export declare const MoneyIcon: FC<{
+    className?: string;
+}>;
+
 export declare const MoonIcon: FC<{
     className?: string;
 }>;