design-system-silkhaus 3.2.1 → 3.3.0-beta.listing-card-rtl.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/app/index.js CHANGED
@@ -1 +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,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;
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,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-Kji4_lDz.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 CHANGED
@@ -403,6 +403,12 @@ declare interface DateRangePickerProps {
403
403
  * @default 'button'
404
404
  */
405
405
  secondaryBtnType?: 'button' | 'submit' | 'reset';
406
+ /**
407
+ * Used for RTL.
408
+ * Pass this as true when you have direction=rtl in your HTML
409
+ * @default false
410
+ */
411
+ rtl?: boolean;
406
412
  }
407
413
 
408
414
  export declare const DeleteIcon: FC<{
@@ -686,7 +692,6 @@ export declare type ListingCardProps = {
686
692
  amenityTags?: TagProps[];
687
693
  price: string;
688
694
  slashedPrice?: string;
689
- isMonthlyPrice: boolean;
690
695
  totalPrice: string;
691
696
  slashedTotalPrice?: string;
692
697
  onClick: () => void;
@@ -694,6 +699,42 @@ export declare type ListingCardProps = {
694
699
  selectionState?: SelectionStateEnum;
695
700
  onViewListingClick?: () => void;
696
701
  className?: string;
702
+ /**
703
+ * Used for RTL.
704
+ * Pass this as true when you have direction=rtl in your HTML
705
+ * @default false
706
+ */
707
+ rtl?: boolean;
708
+ /**
709
+ * Text for view listing button
710
+ * @default 'View Listing'
711
+ */
712
+ viewListingText?: string;
713
+ /**
714
+ * Text for no of guests label
715
+ * @default 'Guests'
716
+ */
717
+ noOfGuestsLabel?: string;
718
+ /**
719
+ * Text for apartment type label
720
+ * @default 'Type'
721
+ */
722
+ apartmentTypeLabel?: string;
723
+ /**
724
+ * Text for apartment area label
725
+ * @default 'Sqft'
726
+ */
727
+ apartmentAreaLabel?: string;
728
+ /**
729
+ * Text for price suffix
730
+ * @default 'avg/night'
731
+ */
732
+ priceSuffix?: string;
733
+ /**
734
+ * Text for total price suffix
735
+ * @default 'Total excl. tax & fees'
736
+ */
737
+ totalPriceSuffix?: string;
697
738
  };
698
739
 
699
740
  export declare const LoadingIcon: FC<{
@@ -1236,6 +1277,12 @@ export declare type SlickImageCarouselProps = {
1236
1277
  onClick?: () => void;
1237
1278
  lazyLoad?: LazyLoadTypes | undefined;
1238
1279
  aspectRatio?: string | number | undefined;
1280
+ /**
1281
+ * Used for RTL.
1282
+ * Pass is as true when you have direction=rtl in your HTML
1283
+ * @default false
1284
+ */
1285
+ rtl?: boolean;
1239
1286
  };
1240
1287
 
1241
1288
  export declare const SofaIcon: FC<{