design-system-silkhaus 3.2.0-beta.dropdown.1 → 3.2.0-beta.dropdown.4
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.d.ts +2 -0
- package/dist/app/index.js +1 -1
- package/dist/index.d.ts +32 -0
- package/dist/index.js +30 -30
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/dist/app/index.d.ts
CHANGED
|
@@ -129,10 +129,12 @@ export declare interface DropdownProps {
|
|
|
129
129
|
disabled?: boolean;
|
|
130
130
|
/**
|
|
131
131
|
* Adjust the height of the dropdown popover to fit the content in viewport
|
|
132
|
+
* @default true
|
|
132
133
|
*/
|
|
133
134
|
adjustHeight?: boolean | number;
|
|
134
135
|
/**
|
|
135
136
|
* Adjust the width of the dropdown popover to fit the content in viewport
|
|
137
|
+
* @default true
|
|
136
138
|
*/
|
|
137
139
|
adjustWidth?: boolean;
|
|
138
140
|
/**
|
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 P=Object.prototype.hasOwnProperty,T=Object.prototype.propertyIsEnumerable;var W=(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={}))P.call(t,d)&&W(e,d,t[d]);if(z)for(var d of z(t))T.call(t,d)&&W(e,d,t[d]);return e},F=(e,t)=>Z(e,O(t));var A=(e,t)=>{var d={};for(var r in e)P.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:p,endIcon:x,trackingId:i,helperText:j,helpterTextClassName:R,buttonClassName:h}=l,c=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":i,ref:y,disabled:t,className:s.twMerge(s.clsx({[es[e]]:p,[ss[e]]:!p},"ds-px-2 ds-py-1","ds-flex ds-w-full ds-flex-1 ds-items-center ds-justify-center",h))},c),{children:[n&&s.jsxRuntimeExports.jsx(U,{children:n}),r&&s.jsxRuntimeExports.jsx("div",{className:`${n?"ds-ml-1":""} ${x?"ds-mr-1":""}`,children:r}),x&&s.jsxRuntimeExports.jsx(U,{children:x})]})),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:p,noDataError:x,buttonMinWidth:i,buttonWidth:j,minSelectionError:R,buttonsContainerClassName:h,buttonClassName:c}=C,y=A(C,["value","options","onSelectionChange","isMultiSelect","noDataError","buttonMinWidth","buttonWidth","minSelectionError","buttonsContainerClassName","buttonClassName"]),[E,l]=f.useState([]),[b,u]=f.useState("");f.useEffect(()=>{d&&d.length?l(d):l([])},[d]);const g=(a,o)=>{o.currentTarget.blur();const m=[...E],B=m.findIndex(I=>I.value===a.value);B!==-1?m.length>1?(m.splice(B,1),u("")):u(R):(m.push(a),u("")),l(m),n(m)},k=(a,o)=>{o.currentTarget.blur();const m=[a];l(m),n(m)};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:p?s.jsxRuntimeExports.jsx(D,{selected:E.some(o=>o.value===a.value),onClick:o=>g(a,o),color:"secondary",style:{minWidth:i,width:j},className:c,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:i,width:j},className:c,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:x})}),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:p,adjustWidth:x,options:i,getSelectedValueDisplayText:j=K,placeholder:R,value:h,isMultiSelect:c})=>{const[y,E]=f.useState(),l=typeof h=="undefined"?y:h,b=typeof h=="undefined"?E:()=>{},[u,g]=f.useState(!1),{refs:k,floatingStyles:C,context:a}=s.useFloating({open:u,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:_}){p&&(_.floating.style.maxHeight=`${N-4}px`),x&&(_.floating.style.maxWidth=`${v-4}px`)}})],whileElementsMounted:s.autoUpdate,placement:e}),o=s.useClick(a),m=s.useFocus(a),B=s.useDismiss(a),I=s.useRole(a),{getReferenceProps:L,getFloatingProps:Q}=s.useInteractions([o,m,B,I]);return t||(t=s.jsxRuntimeExports.jsx(H,{selectedOption:S(l,i),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})),u&&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"),children:s.jsxRuntimeExports.jsx(J,{isMultiSelect:c,options:i,onOptionClick:v=>{let N;if(c){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,i)})}))})]})};M.displayName="DesktopDropdown";const V=({trigger:e,triggerContainerClassName:t,disabled:d,onOpenChange:r,getSelectedValueDisplayText:n=K,placeholder:p,value:x,options:i,isMultiSelect:j})=>{const[R,h]=f.useState(),c=typeof x=="undefined"?R:x,y=typeof x=="undefined"?h:()=>{},[E,l]=f.useState(!1);return e||(e=s.jsxRuntimeExports.jsx(H,{selectedOption:S(c,i),getSelectedValueDisplayText:n,placeholder:p})),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:i,onOptionClick:b=>{let u;if(j){const g=c||[];g.includes(b.value)?u=g.filter(k=>k!==b.value):u=[...g,b.value]}else u=b.value,l(!1);y(u)},selectedOption:S(c,i)})})})]})};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(p=>p.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-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
|
@@ -170,6 +170,14 @@ export declare interface BookingQuoteLineItemType {
|
|
|
170
170
|
description?: string;
|
|
171
171
|
}
|
|
172
172
|
|
|
173
|
+
export declare const BoxCheckIcon: FC<{
|
|
174
|
+
className?: string;
|
|
175
|
+
}>;
|
|
176
|
+
|
|
177
|
+
export declare const BoxLineGraphUpIcon: FC<{
|
|
178
|
+
className?: string;
|
|
179
|
+
}>;
|
|
180
|
+
|
|
173
181
|
export declare const BuildingIcon: FC<{
|
|
174
182
|
className?: string;
|
|
175
183
|
}>;
|
|
@@ -264,6 +272,10 @@ declare const cardVariants: (props?: ({
|
|
|
264
272
|
cardType?: "default" | "shadowCard" | null | undefined;
|
|
265
273
|
} & ClassProp) | undefined) => string;
|
|
266
274
|
|
|
275
|
+
export declare const ChairIcon: FC<{
|
|
276
|
+
className?: string;
|
|
277
|
+
}>;
|
|
278
|
+
|
|
267
279
|
export declare const Checkbox: default_2.ForwardRefExoticComponent<CheckboxProps & default_2.RefAttributes<HTMLInputElement>>;
|
|
268
280
|
|
|
269
281
|
export declare interface CheckboxProps extends HTMLAttributes<HTMLInputElement> {
|
|
@@ -309,6 +321,10 @@ export declare const CloseIcon: FC<{
|
|
|
309
321
|
|
|
310
322
|
export declare function cn(...inputs: ClassValue[]): string;
|
|
311
323
|
|
|
324
|
+
export declare const ContractIcon: FC<{
|
|
325
|
+
className?: string;
|
|
326
|
+
}>;
|
|
327
|
+
|
|
312
328
|
export declare const DashboardIcon: FC<{
|
|
313
329
|
className?: string;
|
|
314
330
|
}>;
|
|
@@ -518,6 +534,10 @@ export declare const HandCursorTapIcon: FC<{
|
|
|
518
534
|
className?: string;
|
|
519
535
|
}>;
|
|
520
536
|
|
|
537
|
+
export declare const HeadsetIcon: FC<{
|
|
538
|
+
className?: string;
|
|
539
|
+
}>;
|
|
540
|
+
|
|
521
541
|
export declare const HelperText: FC<HelperTextProps>;
|
|
522
542
|
|
|
523
543
|
export declare interface HelperTextProps {
|
|
@@ -771,6 +791,10 @@ declare interface Option_2 {
|
|
|
771
791
|
}
|
|
772
792
|
export { Option_2 as Option }
|
|
773
793
|
|
|
794
|
+
export declare const PartnerIcon: FC<{
|
|
795
|
+
className?: string;
|
|
796
|
+
}>;
|
|
797
|
+
|
|
774
798
|
export declare const PartyPopperIcon: FC<{
|
|
775
799
|
className?: string;
|
|
776
800
|
}>;
|
|
@@ -963,6 +987,10 @@ export declare const PreviewIcon: FC<{
|
|
|
963
987
|
className?: string;
|
|
964
988
|
}>;
|
|
965
989
|
|
|
990
|
+
export declare const PriceCheckIcon: FC<{
|
|
991
|
+
className?: string;
|
|
992
|
+
}>;
|
|
993
|
+
|
|
966
994
|
export declare const PriceRangeSlider: default_2.FC<PriceRangeSliderProps>;
|
|
967
995
|
|
|
968
996
|
export declare interface PriceRangeSliderProps {
|
|
@@ -1373,6 +1401,10 @@ export declare interface TopNavContainerMobileProps extends HTMLAttributes<HTMLD
|
|
|
1373
1401
|
buttonText: string;
|
|
1374
1402
|
}
|
|
1375
1403
|
|
|
1404
|
+
export declare const TowerBuildingIcon: FC<{
|
|
1405
|
+
className?: string;
|
|
1406
|
+
}>;
|
|
1407
|
+
|
|
1376
1408
|
export declare const TowersIcon: FC<{
|
|
1377
1409
|
className?: string;
|
|
1378
1410
|
}>;
|