design-system-silkhaus 3.2.0-beta.dropdown.2 → 3.2.0-beta.dropdown.5
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 +1 -1
- package/dist/index.d.ts +48 -0
- package/dist/index.js +32 -32
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/dist/app/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var Y=Object.defineProperty,Z=Object.defineProperties;var O=Object.getOwnPropertyDescriptors;var z=Object.getOwnPropertySymbols;var W=Object.prototype.hasOwnProperty,T=Object.prototype.propertyIsEnumerable;var P=(e,t,d)=>t in e?Y(e,t,{enumerable:!0,configurable:!0,writable:!0,value:d}):e[t]=d,w=(e,t)=>{for(var d in t||(t={}))W.call(t,d)&&P(e,d,t[d]);if(z)for(var d of z(t))T.call(t,d)&&P(e,d,t[d]);return e},F=(e,t)=>Z(e,O(t));var A=(e,t)=>{var d={};for(var r in e)W.call(e,r)&&t.indexOf(r)<0&&(d[r]=e[r]);if(e!=null&&z)for(var r of z(e))t.indexOf(r)<0&&T.call(e,r)&&(d[r]=e[r]);return d};Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../Checkbox-D0PLHW4-.cjs"),f=require("react"),U=({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"},D=f.forwardRef((E,y)=>{var l=E,{color:e="primary",disabled:t=!1,className:d,children:r,startIcon:n,selected:c,endIcon:i,trackingId:x,helperText:j,helpterTextClassName:R,buttonClassName:h}=l,u=A(l,["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",F(w({"data-tracking-id":x,ref:y,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))},u),{children:[n&&s.jsxRuntimeExports.jsx(U,{children:n}),r&&s.jsxRuntimeExports.jsx("div",{className:`${n?"ds-ml-1":""} ${i?"ds-mr-1":""}`,children:r}),i&&s.jsxRuntimeExports.jsx(U,{children:i})]})),j&&s.jsxRuntimeExports.jsx("div",{className:s.cn("ds-w-full ds-text-right ds-text-mediumFootnoteRegular",R),children:j})]})});D.displayName="Button";const $=f.forwardRef((e,t)=>{const C=e,{value:d,options:r,onSelectionChange:n=()=>{},isMultiSelect:c,noDataError:i,buttonMinWidth:x,buttonWidth:j,minSelectionError:R,buttonsContainerClassName:h,buttonClassName:u}=C,y=A(C,["value","options","onSelectionChange","isMultiSelect","noDataError","buttonMinWidth","buttonWidth","minSelectionError","buttonsContainerClassName","buttonClassName"]),[E,l]=f.useState([]),[b,m]=f.useState("");f.useEffect(()=>{d&&d.length?l(d):l([])},[d]);const g=(a,o)=>{o.currentTarget.blur();const p=[...E],B=p.findIndex(I=>I.value===a.value);B!==-1?p.length>1?(p.splice(B,1),m("")):m(R):(p.push(a),m("")),l(p),n(p)},k=(a,o)=>{o.currentTarget.blur();const p=[a];l(p),n(p)};return s.jsxRuntimeExports.jsxs("div",F(w({ref:t},y),{children:[s.jsxRuntimeExports.jsx("div",{className:s.cn("ds-flex ds-flex-wrap ds-gap-2",h),children:r.length>0?r.map(a=>s.jsxRuntimeExports.jsx(f.Fragment,{children:c?s.jsxRuntimeExports.jsx(D,{selected:E.some(o=>o.value===a.value),onClick:o=>g(a,o),color:"secondary",style:{minWidth:x,width:j},className:u,startIcon:a.startIcon,endIcon:a.endIcon,children:a.label}):s.jsxRuntimeExports.jsx(D,{selected:E.some(o=>o.value===a.value),onClick:o=>k(a,o),color:"secondary",style:{minWidth:x,width:j},className:u,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:i})}),b&&s.jsxRuntimeExports.jsx("div",{className:"ds_xSmallSubheadRegular ds-p-2 ds-text-System-red",children:b})]}))});$.displayName="ButtonsGroupSelector";const G=e=>window.innerWidth<s.tabletMinWidth?s.jsxRuntimeExports.jsx(V,w({},e)):s.jsxRuntimeExports.jsx(M,w({},e));G.displayName="Dropdown";const M=({placement:e="bottom-start",trigger:t,triggerContainerClassName:d,disabled:r,onOpenChange:n,adjustHeight:c=!0,adjustWidth:i=!0,options:x,getSelectedValueDisplayText:j=K,placeholder:R,value:h,isMultiSelect:u})=>{const[y,E]=f.useState(),l=typeof h=="undefined"?y:h,b=typeof h=="undefined"?E:()=>{},[m,g]=f.useState(!1),{refs:k,floatingStyles:C,context:a}=s.useFloating({open:m,onOpenChange:v=>{g(v),n&&n(v)},middleware:[s.offset(8),s.flip({crossAxis:e.includes("-"),fallbackAxisSideDirection:"end"}),s.shift({padding:4}),s.size({apply({availableWidth:v,availableHeight:N,elements:_}){c&&(_.floating.style.maxHeight=`${N-4}px`),i&&(_.floating.style.maxWidth=`${v-4}px`)}})],whileElementsMounted:s.autoUpdate,placement:e}),o=s.useClick(a),p=s.useFocus(a),B=s.useDismiss(a),I=s.useRole(a),{getReferenceProps:L,getFloatingProps:Q}=s.useInteractions([o,p,B,I]);return t||(t=s.jsxRuntimeExports.jsx(H,{selectedOption:S(l,x),getSelectedValueDisplayText:j,placeholder:R})),r?s.jsxRuntimeExports.jsx("div",{className:d,children:t}):s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[s.jsxRuntimeExports.jsx("div",F(w({className:s.cn("ds-cursor-pointer",d),ref:k.setReference},L()),{children:t})),m&&s.jsxRuntimeExports.jsx(s.FloatingPortal,{children:s.jsxRuntimeExports.jsx("div",F(w({ref:k.setFloating,style:C},Q()),{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",i&&"ds-overflow-x-auto"),children:s.jsxRuntimeExports.jsx(J,{isMultiSelect:u,options:x,onOptionClick:v=>{let N;if(u){const _=l||[];_.includes(v.value)?N=_.filter(X=>X!==v.value):N=[..._,v.value]}else N=v.value,g(!1);b(N)},selectedOption:S(l,x)})}))})]})};M.displayName="DesktopDropdown";const V=({trigger:e,triggerContainerClassName:t,disabled:d,onOpenChange:r,getSelectedValueDisplayText:n=K,placeholder:c,value:i,options:x,isMultiSelect:j})=>{const[R,h]=f.useState(),u=typeof i=="undefined"?R:i,y=typeof i=="undefined"?h:()=>{},[E,l]=f.useState(!1);return e||(e=s.jsxRuntimeExports.jsx(H,{selectedOption:S(u,x),getSelectedValueDisplayText:n,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:()=>{l(!0),r&&r(!0)},children:e}),s.jsxRuntimeExports.jsx(s.AnimatedModal,{animation:"slideUp",show:E,handleClose:()=>{l(!1),r&&r(!1)},contentClassName:s.cn("ds-absolute ds-mb-0 ds-w-full"),className:"ds-z-[29999]",children:s.jsxRuntimeExports.jsx(q,{onClose:()=>{l(!1),r&&r(!1)},children:s.jsxRuntimeExports.jsx(J,{isMultiSelect:j,options:x,onOptionClick:b=>{let m;if(j){const g=u||[];g.includes(b.value)?m=g.filter(k=>k!==b.value):m=[...g,b.value]}else m=b.value,l(!1);y(m)},selectedOption:S(u,x)})})})]})};V.displayName="MobileDropdown";const q=({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,{onClick:e,children:"Close"})})]});q.displayName="MobilePopoverContentWrapper";const H=({selectedOption:e,getSelectedValueDisplayText:t,placeholder:d})=>{const r=!e||Array.isArray(e)&&e.length===0?d||"":t(e);return s.jsxRuntimeExports.jsx(D,{color:"secondary",endIcon:s.jsxRuntimeExports.jsx(s.ChevronDownRegularIcon,{className:"ds-size-4"}),buttonClassName:"ds-justify-between",children:r})},J=({options:e,onOptionClick:t,isMultiSelect:d,selectedOption:r})=>e&&e.map(n=>s.jsxRuntimeExports.jsx(ts,{onClick:()=>t(n),option:n,isSelected:Array.isArray(r)?r.some(c=>c.value===n.value):(r==null?void 0:r.value)===n.value,showCheckbox:d},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-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})]}),S=(e,t)=>Array.isArray(e)?t.filter(d=>e.includes(d.value)):t.find(d=>d.value===e),K=e=>Array.isArray(e)?e.map(t=>t.label).join(", "):e.label;exports.Button=D;exports.ButtonsGroupSelector=$;exports.DesktopDropdown=M;exports.Dropdown=G;exports.MobileDropdown=V;exports.findOptionByValue=S;
|
|
1
|
+
"use strict";var Y=Object.defineProperty,Z=Object.defineProperties;var O=Object.getOwnPropertyDescriptors;var z=Object.getOwnPropertySymbols;var W=Object.prototype.hasOwnProperty,T=Object.prototype.propertyIsEnumerable;var P=(e,t,d)=>t in e?Y(e,t,{enumerable:!0,configurable:!0,writable:!0,value:d}):e[t]=d,w=(e,t)=>{for(var d in t||(t={}))W.call(t,d)&&P(e,d,t[d]);if(z)for(var d of z(t))T.call(t,d)&&P(e,d,t[d]);return e},F=(e,t)=>Z(e,O(t));var A=(e,t)=>{var d={};for(var r in e)W.call(e,r)&&t.indexOf(r)<0&&(d[r]=e[r]);if(e!=null&&z)for(var r of z(e))t.indexOf(r)<0&&T.call(e,r)&&(d[r]=e[r]);return d};Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../Checkbox-D0PLHW4-.cjs"),f=require("react"),U=({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"},D=f.forwardRef((E,R)=>{var l=E,{color:e="primary",disabled:t=!1,className:d,children:r,startIcon:n,selected:c,endIcon:i,trackingId:x,helperText:j,helpterTextClassName:y,buttonClassName:h}=l,u=A(l,["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",F(w({"data-tracking-id":x,ref:R,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))},u),{children:[n&&s.jsxRuntimeExports.jsx(U,{children:n}),r&&s.jsxRuntimeExports.jsx("div",{className:`${n?"ds-ml-1":""} ${i?"ds-mr-1":""}`,children:r}),i&&s.jsxRuntimeExports.jsx(U,{children:i})]})),j&&s.jsxRuntimeExports.jsx("div",{className:s.cn("ds-w-full ds-text-right ds-text-mediumFootnoteRegular",y),children:j})]})});D.displayName="Button";const $=f.forwardRef((e,t)=>{const C=e,{value:d,options:r,onSelectionChange:n=()=>{},isMultiSelect:c,noDataError:i,buttonMinWidth:x,buttonWidth:j,minSelectionError:y,buttonsContainerClassName:h,buttonClassName:u}=C,R=A(C,["value","options","onSelectionChange","isMultiSelect","noDataError","buttonMinWidth","buttonWidth","minSelectionError","buttonsContainerClassName","buttonClassName"]),[E,l]=f.useState([]),[b,m]=f.useState("");f.useEffect(()=>{d&&d.length?l(d):l([])},[d]);const g=(a,o)=>{o.currentTarget.blur();const p=[...E],B=p.findIndex(I=>I.value===a.value);B!==-1?p.length>1?(p.splice(B,1),m("")):m(y):(p.push(a),m("")),l(p),n(p)},N=(a,o)=>{o.currentTarget.blur();const p=[a];l(p),n(p)};return s.jsxRuntimeExports.jsxs("div",F(w({ref:t},R),{children:[s.jsxRuntimeExports.jsx("div",{className:s.cn("ds-flex ds-flex-wrap ds-gap-2",h),children:r.length>0?r.map(a=>s.jsxRuntimeExports.jsx(f.Fragment,{children:c?s.jsxRuntimeExports.jsx(D,{selected:E.some(o=>o.value===a.value),onClick:o=>g(a,o),color:"secondary",style:{minWidth:x,width:j},className:u,startIcon:a.startIcon,endIcon:a.endIcon,children:a.label}):s.jsxRuntimeExports.jsx(D,{selected:E.some(o=>o.value===a.value),onClick:o=>N(a,o),color:"secondary",style:{minWidth:x,width:j},className:u,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:i})}),b&&s.jsxRuntimeExports.jsx("div",{className:"ds_xSmallSubheadRegular ds-p-2 ds-text-System-red",children:b})]}))});$.displayName="ButtonsGroupSelector";const G=e=>window.innerWidth<s.tabletMinWidth?s.jsxRuntimeExports.jsx(V,w({},e)):s.jsxRuntimeExports.jsx(M,w({},e));G.displayName="Dropdown";const M=({placement:e="bottom-start",trigger:t,triggerContainerClassName:d,disabled:r,onOpenChange:n,adjustHeight:c=!0,adjustWidth:i=!0,options:x,getSelectedValueDisplayText:j=K,placeholder:y,value:h,isMultiSelect:u})=>{const[R,E]=f.useState(),l=typeof h=="undefined"?R:h,b=typeof h=="undefined"?E:()=>{},[m,g]=f.useState(!1),{refs:N,floatingStyles:C,context:a}=s.useFloating({open:m,onOpenChange:v=>{g(v),n&&n(v)},middleware:[s.offset(8),s.flip({crossAxis:e.includes("-"),fallbackAxisSideDirection:"end"}),s.shift({padding:4}),s.size({apply({availableWidth:v,availableHeight:k,elements:_}){c&&(_.floating.style.maxHeight=`${k-4}px`),i&&(_.floating.style.maxWidth=`${v-4}px`)}})],whileElementsMounted:s.autoUpdate,placement:e}),o=s.useClick(a),p=s.useFocus(a),B=s.useDismiss(a),I=s.useRole(a),{getReferenceProps:L,getFloatingProps:Q}=s.useInteractions([o,p,B,I]);return t||(t=s.jsxRuntimeExports.jsx(H,{selectedOption:S(l,x),getSelectedValueDisplayText:j,placeholder:y})),r?s.jsxRuntimeExports.jsx("div",{className:d,children:t}):s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[s.jsxRuntimeExports.jsx("div",F(w({className:s.cn("ds-cursor-pointer",d),ref:N.setReference},L()),{children:t})),m&&s.jsxRuntimeExports.jsx(s.FloatingPortal,{children:s.jsxRuntimeExports.jsx("div",F(w({ref:N.setFloating,style:C},Q()),{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",i&&"ds-overflow-x-auto"),children:s.jsxRuntimeExports.jsx(J,{isMultiSelect:u,options:x,onOptionClick:v=>{let k;if(u){const _=l||[];_.includes(v.value)?k=_.filter(X=>X!==v.value):k=[..._,v.value]}else k=v.value,g(!1);b(k)},selectedOption:S(l,x)})}))})]})};M.displayName="DesktopDropdown";const V=({trigger:e,triggerContainerClassName:t,disabled:d,onOpenChange:r,getSelectedValueDisplayText:n=K,placeholder:c,value:i,options:x,isMultiSelect:j})=>{const[y,h]=f.useState(),u=typeof i=="undefined"?y:i,R=typeof i=="undefined"?h:()=>{},[E,l]=f.useState(!1);return e||(e=s.jsxRuntimeExports.jsx(H,{selectedOption:S(u,x),getSelectedValueDisplayText:n,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:()=>{l(!0),r&&r(!0)},children:e}),s.jsxRuntimeExports.jsx(s.AnimatedModal,{animation:"slideUp",show:E,handleClose:()=>{l(!1),r&&r(!1)},contentClassName:s.cn("ds-absolute ds-mb-0 ds-w-full"),className:"ds-z-[29999]",children:s.jsxRuntimeExports.jsx(q,{onClose:()=>{l(!1),r&&r(!1)},children:s.jsxRuntimeExports.jsx(J,{isMultiSelect:j,options:x,onOptionClick:b=>{let m;if(j){const g=u||[];g.includes(b.value)?m=g.filter(N=>N!==b.value):m=[...g,b.value]}else m=b.value,l(!1);R(m)},selectedOption:S(u,x)})})})]})};V.displayName="MobileDropdown";const q=({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"})})]});q.displayName="MobilePopoverContentWrapper";const H=({selectedOption:e,getSelectedValueDisplayText:t,placeholder:d})=>{const r=!e||Array.isArray(e)&&e.length===0?d||"":t(e);return s.jsxRuntimeExports.jsx(D,{color:"secondary",endIcon:s.jsxRuntimeExports.jsx(s.ChevronDownRegularIcon,{className:"ds-size-4"}),buttonClassName:"ds-justify-between",children:r})},J=({options:e,onOptionClick:t,isMultiSelect:d,selectedOption:r})=>e&&e.map(n=>s.jsxRuntimeExports.jsx(ts,{onClick:()=>t(n),option:n,isSelected:Array.isArray(r)?r.some(c=>c.value===n.value):(r==null?void 0:r.value)===n.value,showCheckbox:d},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-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})]}),S=(e,t)=>Array.isArray(e)?t.filter(d=>e.includes(d.value)):t.find(d=>d.value===e),K=e=>Array.isArray(e)?e.map(t=>t.label).join(", "):e.label;exports.Button=D;exports.ButtonsGroupSelector=$;exports.DesktopDropdown=M;exports.Dropdown=G;exports.MobileDropdown=V;exports.findOptionByValue=S;
|
package/dist/index.d.ts
CHANGED
|
@@ -2,9 +2,11 @@ import { CalendarDayShape } from 'react-dates';
|
|
|
2
2
|
import { ClassProp } from 'class-variance-authority/types';
|
|
3
3
|
import { ClassValue } from 'clsx';
|
|
4
4
|
import { default as default_2 } from 'react';
|
|
5
|
+
import { ElementType } from 'react';
|
|
5
6
|
import { FC } from 'react';
|
|
6
7
|
import { ForwardRefExoticComponent } from 'react';
|
|
7
8
|
import { HTMLAttributes } from 'react';
|
|
9
|
+
import { JSX as JSX_2 } from 'react/jsx-runtime';
|
|
8
10
|
import { LazyLoadTypes } from 'react-slick';
|
|
9
11
|
import { ModifiersShape } from 'react-dates';
|
|
10
12
|
import { Moment } from 'moment';
|
|
@@ -170,6 +172,14 @@ export declare interface BookingQuoteLineItemType {
|
|
|
170
172
|
description?: string;
|
|
171
173
|
}
|
|
172
174
|
|
|
175
|
+
export declare const BoxCheckIcon: FC<{
|
|
176
|
+
className?: string;
|
|
177
|
+
}>;
|
|
178
|
+
|
|
179
|
+
export declare const BoxLineGraphUpIcon: FC<{
|
|
180
|
+
className?: string;
|
|
181
|
+
}>;
|
|
182
|
+
|
|
173
183
|
export declare const BuildingIcon: FC<{
|
|
174
184
|
className?: string;
|
|
175
185
|
}>;
|
|
@@ -264,6 +274,10 @@ declare const cardVariants: (props?: ({
|
|
|
264
274
|
cardType?: "default" | "shadowCard" | null | undefined;
|
|
265
275
|
} & ClassProp) | undefined) => string;
|
|
266
276
|
|
|
277
|
+
export declare const ChairIcon: FC<{
|
|
278
|
+
className?: string;
|
|
279
|
+
}>;
|
|
280
|
+
|
|
267
281
|
export declare const Checkbox: default_2.ForwardRefExoticComponent<CheckboxProps & default_2.RefAttributes<HTMLInputElement>>;
|
|
268
282
|
|
|
269
283
|
export declare interface CheckboxProps extends HTMLAttributes<HTMLInputElement> {
|
|
@@ -309,6 +323,24 @@ export declare const CloseIcon: FC<{
|
|
|
309
323
|
|
|
310
324
|
export declare function cn(...inputs: ClassValue[]): string;
|
|
311
325
|
|
|
326
|
+
/**
|
|
327
|
+
* A wrapper component that follows design system's margins on pages for different screen sizes
|
|
328
|
+
*/
|
|
329
|
+
export declare const Container: <T extends ElementType = "div">({ as, children, className, dataTestId, ...rest }: ContainerProps<T>) => JSX_2.Element;
|
|
330
|
+
|
|
331
|
+
export declare type ContainerProps<T extends ElementType = 'div'> = React.PropsWithChildren<{
|
|
332
|
+
/**
|
|
333
|
+
* Element type to render as
|
|
334
|
+
* @default 'div'
|
|
335
|
+
*/
|
|
336
|
+
as?: T;
|
|
337
|
+
dataTestId?: string;
|
|
338
|
+
}> & React.ComponentPropsWithoutRef<T>;
|
|
339
|
+
|
|
340
|
+
export declare const ContractIcon: FC<{
|
|
341
|
+
className?: string;
|
|
342
|
+
}>;
|
|
343
|
+
|
|
312
344
|
export declare const DashboardIcon: FC<{
|
|
313
345
|
className?: string;
|
|
314
346
|
}>;
|
|
@@ -518,6 +550,10 @@ export declare const HandCursorTapIcon: FC<{
|
|
|
518
550
|
className?: string;
|
|
519
551
|
}>;
|
|
520
552
|
|
|
553
|
+
export declare const HeadsetIcon: FC<{
|
|
554
|
+
className?: string;
|
|
555
|
+
}>;
|
|
556
|
+
|
|
521
557
|
export declare const HelperText: FC<HelperTextProps>;
|
|
522
558
|
|
|
523
559
|
export declare interface HelperTextProps {
|
|
@@ -771,6 +807,10 @@ declare interface Option_2 {
|
|
|
771
807
|
}
|
|
772
808
|
export { Option_2 as Option }
|
|
773
809
|
|
|
810
|
+
export declare const PartnerIcon: FC<{
|
|
811
|
+
className?: string;
|
|
812
|
+
}>;
|
|
813
|
+
|
|
774
814
|
export declare const PartyPopperIcon: FC<{
|
|
775
815
|
className?: string;
|
|
776
816
|
}>;
|
|
@@ -963,6 +1003,10 @@ export declare const PreviewIcon: FC<{
|
|
|
963
1003
|
className?: string;
|
|
964
1004
|
}>;
|
|
965
1005
|
|
|
1006
|
+
export declare const PriceCheckIcon: FC<{
|
|
1007
|
+
className?: string;
|
|
1008
|
+
}>;
|
|
1009
|
+
|
|
966
1010
|
export declare const PriceRangeSlider: default_2.FC<PriceRangeSliderProps>;
|
|
967
1011
|
|
|
968
1012
|
export declare interface PriceRangeSliderProps {
|
|
@@ -1373,6 +1417,10 @@ export declare interface TopNavContainerMobileProps extends HTMLAttributes<HTMLD
|
|
|
1373
1417
|
buttonText: string;
|
|
1374
1418
|
}
|
|
1375
1419
|
|
|
1420
|
+
export declare const TowerBuildingIcon: FC<{
|
|
1421
|
+
className?: string;
|
|
1422
|
+
}>;
|
|
1423
|
+
|
|
1376
1424
|
export declare const TowersIcon: FC<{
|
|
1377
1425
|
className?: string;
|
|
1378
1426
|
}>;
|