freemium-ui 2.0.0-beta.37 → 2.0.0-beta.38

package/dist/index.cjs.js

@@ -16154,51 +16154,52 @@ open:t,onOpenChange:e=>{e||l?.()}},e.createElement(um,null,e.createElement(dm,{
 forceMount:!0,className:"DialogOverlay",onClick:()=>l?.()}),e.createElement(hm,{
 forceMount:!0,className:`DialogContent ${a??""}`.trim(),size:s??"default",
 fullWidth:o,align:r,position:c,style:i
-},n))),exports.MoreVertical=od,exports.MultiSelectDropdown=({itemIdentifier:t="id",label:n,id:r,items:a=[],onChange:o,placeholder:i,readOnly:l=!1,disabled:c=!1,isRequired:s=!1,itemToString:u,name:d,filterKey:h,width:p,useComboboxProps:f,useMultipleSelectionProps:m,emptyItemsText:v,getCustomMessage:g,onCustomValueAdd:y,customValues:b,inputValue:w,hideClear:C,removeSelectedItem:z,defaultSelectedItems:M=[],handleInputChange:x,isErrored:E,isMenuLoading:S,errorText:_,InputProps:H,itemComponent:D,isDynamicMenu:L,locale:V,maxAllowedLength:A,minAllowedLength:k,hideChips:T=!1,onBackSpace:R})=>{
-const P=qt(),[I,O]=e.useState(""),[N,F]=e.useState([...M]),B=e.useMemo((()=>a.filter((e=>!I||("string"==typeof e?e:e?.[h||t]).toLowerCase().includes(I.toLowerCase())))),[a,h,t,I]),{getSelectedItemProps:j,getDropdownProps:U,removeSelectedItem:$,setSelectedItems:Y}=Bf({
-selectedItems:N,onStateChange:({selectedItems:e,type:t})=>{switch(t){
+},n))),exports.MoreVertical=od,exports.MultiSelectDropdown=({itemIdentifier:t="id",label:n,id:r,items:a=[],onChange:o,placeholder:i,readOnly:l=!1,disabled:c=!1,isRequired:s=!1,itemToString:u,name:d,filterKey:h,width:p,useComboboxProps:f,useMultipleSelectionProps:m,emptyItemsText:v,getCustomMessage:g,onCustomValueAdd:y,customValues:b,inputValue:w,hideClear:C,removeSelectedItem:z,defaultSelectedItems:M=[],handleInputChange:x,isErrored:E,isMenuLoading:S,errorText:_,InputProps:H,itemComponent:D,isDynamicMenu:L,locale:V,maxAllowedLength:A,minAllowedLength:k,hideChips:T=!1,hideSelectedItem:R=!1,onBackSpace:P})=>{
+const I=qt(),[O,N]=e.useState(w??""),[F,B]=e.useState([...M]),j=e.useMemo((()=>(console.log("use memo trigger"),
+a.filter((e=>!(R&&F.some((t=>t.id===e.id))))).filter((e=>!O||("string"==typeof e?e:e?.[h||t]).toLowerCase().includes(O.toLowerCase()))))),[a,h,t,O,F]),{getSelectedItemProps:U,getDropdownProps:$,removeSelectedItem:Y,setSelectedItems:W}=Bf({
+selectedItems:F,onStateChange:({selectedItems:e,type:t})=>{switch(t){
 case Bf.stateChangeTypes.SelectedItemKeyDownBackspace:
 case Bf.stateChangeTypes.SelectedItemKeyDownDelete:
 case Bf.stateChangeTypes.DropdownKeyDownBackspace:
-case Bf.stateChangeTypes.FunctionRemoveSelectedItem:e&&F(e)}},
+case Bf.stateChangeTypes.FunctionRemoveSelectedItem:e&&B(e)}},
 initialSelectedItems:[...M],...m
-}),{isOpen:W,getToggleButtonProps:G,getLabelProps:K,getMenuProps:q,getInputProps:Z,highlightedIndex:X,getItemProps:Q}=ff({
-items:B,itemToString:e=>e&&u?u(e,"downshift"):"",selectedItem:null,inputValue:I,
+}),{isOpen:G,getToggleButtonProps:K,getLabelProps:q,getMenuProps:Z,getInputProps:X,highlightedIndex:Q,getItemProps:J}=ff({
+items:j,itemToString:e=>e&&u?u(e,"downshift"):"",selectedItem:null,inputValue:O,
 stateReducer:(e,t)=>{const{changes:n,type:r}=t;switch(r){
 case ff.stateChangeTypes.InputKeyDownEnter:case ff.stateChangeTypes.ItemClick:
 return{...n,isOpen:!0};default:return n}},
 onStateChange:({inputValue:e,type:n,selectedItem:r})=>{switch(n){
 case ff.stateChangeTypes.InputKeyDownEnter:case ff.stateChangeTypes.ItemClick:
 case ff.stateChangeTypes.InputBlur:
-r&&(N.indexOf(r)>-1?F(N.filter((e=>e?.[t]!==r?.[t]))):F([...N,r]),O(""));break
-;case ff.stateChangeTypes.InputChange:O(e||"")}},...f});e.useEffect((()=>{x?.(I)
-}),[x,I]),e.useEffect((()=>{o?.(N)}),[o,N]),e.useEffect((()=>{O(w??"")}),[w])
-;const J=!c&&!l&&W;return e.createElement(ld,{width:p,isOpen:J
-},e.createElement(wn,{className:"input-label",...K({disabled:c,readOnly:l})
+r&&(F.indexOf(r)>-1?B(F.filter((e=>e?.[t]!==r?.[t]))):B([...F,r]),N(""));break
+;case ff.stateChangeTypes.InputChange:N(e||"")}},...f});e.useEffect((()=>{x?.(O)
+}),[x,O]),e.useEffect((()=>{M.length!==F.length&&o?.(F)}),[o,F])
+;const ee=!c&&!l&&G;return e.createElement(ld,{width:p,isOpen:ee
+},e.createElement(wn,{className:"input-label",...q({disabled:c,readOnly:l})
 },n,s&&e.createElement(zn,null,"*")),e.createElement(cd,{disabled:c,
 isErrored:!!E,"aria-invalid":E
-},e.createElement(pm,null,!T&&N.map(((t,n)=>e.createElement(_m,{
-key:`selected-item-${n}`,...j({selectedItem:t,index:n}),"aria-disabled":c,
+},e.createElement(pm,null,!T&&F.map(((t,n)=>e.createElement(_m,{
+key:`selected-item-${n}`,...U({selectedItem:t,index:n}),"aria-disabled":c,
 "aria-readonly":l,iconProps:{"aria-disabled":c,disabled:c},onClose:e=>{
-c||l||(e.stopPropagation(),$(t),z?.(t,n))}
-},u?.(t)??""))),e.createElement("input",{placeholder:i,...Z(U({
-preventKeyAction:W,name:d,id:r,disabled:c,readOnly:l})),onKeyDown:e=>{
-"Backspace"!==e.key||I||($(N[N.length-1]),
-R?.()),"Enter"===e.key&&I&&b&&X<0&&y?.({inputValue:I,customValues:!0})},...H
+c||l||(e.stopPropagation(),Y(t),z?.(t,n))}
+},u?.(t)??""))),e.createElement("input",{placeholder:i,...X($({
+preventKeyAction:G,name:d,id:r,disabled:c,readOnly:l})),onKeyDown:e=>{
+"Backspace"!==e.key||O||(Y(F[F.length-1]),
+P?.()),"Enter"===e.key&&O&&b&&Q<0&&y?.({inputValue:O,customValues:!0})},...H
 })),!C&&e.createElement(Mn,{onClick:e=>{
-Y([]),e.stopPropagation(),e.preventDefault()}},e.createElement(qn,{
-fill:P.colors.text.primary})),e.createElement(Mn,{...G({disabled:c,readOnly:l})
-},e.createElement(id,{isOpen:J,fill:P.colors.text.primary,width:8,height:8
-}))),!l&&!c&&e.createElement(sd,{isOpen:W,...q({disabled:c,readOnly:l})
-},S?e.createElement(hd,null,e.createElement(tm,null)):e.createElement(e.Fragment,null,W&&(0===B.length||b)&&e.createElement(ud,{
+W([]),e.stopPropagation(),e.preventDefault()}},e.createElement(qn,{
+fill:I.colors.text.primary})),e.createElement(Mn,{...K({disabled:c,readOnly:l})
+},e.createElement(id,{isOpen:ee,fill:I.colors.text.primary,width:8,height:8
+}))),!l&&!c&&e.createElement(sd,{isOpen:G,...Z({disabled:c,readOnly:l})
+},S?e.createElement(hd,null,e.createElement(tm,null)):e.createElement(e.Fragment,null,G&&(0===j.length||b)&&e.createElement(ud,{
 readOnly:!0},b?e.createElement(dd,{tabIndex:0,onClick:e=>{
-e.stopPropagation(),y&&y({inputValue:I,customValues:!0})}
-},g?.(I)||"Click to add"):v||"No items"),W&&B.map(((n,r)=>{
-const a="string"==typeof n?n:n?.[t],o=N.indexOf(n)>-1
-;return e.createElement(ud,{isHilighted:X===r,isSelected:o,key:a,...Q({item:n,
+e.stopPropagation(),y&&y({inputValue:O,customValues:!0})}
+},g?.(O)||"Click to add"):v||"No items"),G&&j.map(((n,r)=>{
+const a="string"==typeof n?n:n?.[t],o=F.indexOf(n)>-1
+;return e.createElement(ud,{isHilighted:Q===r,isSelected:o,key:a,...J({item:n,
 index:r})
 },D?D(n):e.createElement(e.Fragment,null,u?.(n)??"",o&&e.createElement(Lc,{
-fill:P.colors.common.accent})))})))),E&&_&&e.createElement(vc,null,_))
+fill:I.colors.common.accent})))})))),E&&_&&e.createElement(vc,null,_))
 },exports.Popover=bP,
 exports.PopoverClose=yP,exports.Radio=({checked:t,className:n,disabled:r,id:a,isRequired:o,label:i,name:l,readOnly:c,...s})=>e.createElement(CP,{
 className:`RadioGroupRoot ${n??""}`.trim(),id:a,name:l,"aria-label":i,

package/dist/index.d.ts

@@ -793,12 +793,13 @@ interface MultiSelectDropdownProps<T extends DefaultMultiSelectDropdownItem = De
         deleteText: string;
     };
     hideChips?: boolean;
+    hideSelectedItem?: boolean;
 }
 
 /**
  * MultiSelectDropdown displays a list or drop-down box that enables selection of an option or multiple options from an available list of values.
  */
-declare const MultiSelectDropdown: <T extends DefaultMultiSelectDropdownItem>({ itemIdentifier, label, id, items, onChange, placeholder, readOnly, disabled, isRequired, itemToString, name, filterKey, width, useComboboxProps, useMultipleSelectionProps, emptyItemsText, getCustomMessage, onCustomValueAdd, customValues, inputValue: iV, hideClear, removeSelectedItem: rSelectedItem, defaultSelectedItems, handleInputChange, isErrored, isMenuLoading, errorText, InputProps, itemComponent, isDynamicMenu, locale, maxAllowedLength, minAllowedLength, hideChips, onBackSpace, }: MultiSelectDropdownProps<T>) => react__default.JSX.Element;
+declare const MultiSelectDropdown: <T extends DefaultMultiSelectDropdownItem>({ itemIdentifier, label, id, items, onChange, placeholder, readOnly, disabled, isRequired, itemToString, name, filterKey, width, useComboboxProps, useMultipleSelectionProps, emptyItemsText, getCustomMessage, onCustomValueAdd, customValues, inputValue: iV, hideClear, removeSelectedItem: rSelectedItem, defaultSelectedItems, handleInputChange, isErrored, isMenuLoading, errorText, InputProps, itemComponent, isDynamicMenu, locale, maxAllowedLength, minAllowedLength, hideChips, hideSelectedItem, onBackSpace, }: MultiSelectDropdownProps<T>) => react__default.JSX.Element;
 
 type DefaultProps = {
     /**

package/dist/index.js

@@ -3889,51 +3889,52 @@ className:"StyledTag"},i||l?t.createElement(Km,{className:"AvatarRoot"
 className:"AvatarFallback",delayMs:600
 },l)):t.createElement("div",null),e,t.createElement(Xm,{...n,onClick:r
 },t.createElement(mr,{fill:u.colors.text.primary})))
-},ev=({itemIdentifier:e="id",label:n,id:r,items:a=[],onChange:o,placeholder:i,readOnly:l=!1,disabled:c=!1,isRequired:s=!1,itemToString:u,name:d,filterKey:h,width:p,useComboboxProps:f,useMultipleSelectionProps:m,emptyItemsText:v,getCustomMessage:g,onCustomValueAdd:y,customValues:b,inputValue:w,hideClear:C,removeSelectedItem:z,defaultSelectedItems:M=[],handleInputChange:x,isErrored:S,isMenuLoading:E,errorText:_,InputProps:H,itemComponent:D,isDynamicMenu:L,locale:V,maxAllowedLength:A,minAllowedLength:k,hideChips:T=!1,onBackSpace:P})=>{
-const I=vn(),[R,O]=t.useState(""),[N,F]=t.useState([...M]),B=t.useMemo((()=>a.filter((t=>!R||("string"==typeof t?t:t?.[h||e]).toLowerCase().includes(R.toLowerCase())))),[a,h,e,R]),{getSelectedItemProps:j,getDropdownProps:U,removeSelectedItem:$,setSelectedItems:Y}=hm({
-selectedItems:N,onStateChange:({selectedItems:e,type:t})=>{switch(t){
+},ev=({itemIdentifier:e="id",label:n,id:r,items:a=[],onChange:o,placeholder:i,readOnly:l=!1,disabled:c=!1,isRequired:s=!1,itemToString:u,name:d,filterKey:h,width:p,useComboboxProps:f,useMultipleSelectionProps:m,emptyItemsText:v,getCustomMessage:g,onCustomValueAdd:y,customValues:b,inputValue:w,hideClear:C,removeSelectedItem:z,defaultSelectedItems:M=[],handleInputChange:x,isErrored:S,isMenuLoading:E,errorText:_,InputProps:H,itemComponent:D,isDynamicMenu:L,locale:V,maxAllowedLength:A,minAllowedLength:k,hideChips:T=!1,hideSelectedItem:P=!1,onBackSpace:I})=>{
+const R=vn(),[O,N]=t.useState(w??""),[F,B]=t.useState([...M]),j=t.useMemo((()=>(console.log("use memo trigger"),
+a.filter((e=>!(P&&F.some((t=>t.id===e.id))))).filter((t=>!O||("string"==typeof t?t:t?.[h||e]).toLowerCase().includes(O.toLowerCase()))))),[a,h,e,O,F]),{getSelectedItemProps:U,getDropdownProps:$,removeSelectedItem:Y,setSelectedItems:W}=hm({
+selectedItems:F,onStateChange:({selectedItems:e,type:t})=>{switch(t){
 case hm.stateChangeTypes.SelectedItemKeyDownBackspace:
 case hm.stateChangeTypes.SelectedItemKeyDownDelete:
 case hm.stateChangeTypes.DropdownKeyDownBackspace:
-case hm.stateChangeTypes.FunctionRemoveSelectedItem:e&&F(e)}},
+case hm.stateChangeTypes.FunctionRemoveSelectedItem:e&&B(e)}},
 initialSelectedItems:[...M],...m
-}),{isOpen:W,getToggleButtonProps:G,getLabelProps:K,getMenuProps:q,getInputProps:Z,highlightedIndex:X,getItemProps:Q}=Nf({
-items:B,itemToString:e=>e&&u?u(e,"downshift"):"",selectedItem:null,inputValue:R,
+}),{isOpen:G,getToggleButtonProps:K,getLabelProps:q,getMenuProps:Z,getInputProps:X,highlightedIndex:Q,getItemProps:J}=Nf({
+items:j,itemToString:e=>e&&u?u(e,"downshift"):"",selectedItem:null,inputValue:O,
 stateReducer:(e,t)=>{const{changes:n,type:r}=t;switch(r){
 case Nf.stateChangeTypes.InputKeyDownEnter:case Nf.stateChangeTypes.ItemClick:
 return{...n,isOpen:!0};default:return n}},
 onStateChange:({inputValue:t,type:n,selectedItem:r})=>{switch(n){
 case Nf.stateChangeTypes.InputKeyDownEnter:case Nf.stateChangeTypes.ItemClick:
 case Nf.stateChangeTypes.InputBlur:
-r&&(N.indexOf(r)>-1?F(N.filter((t=>t?.[e]!==r?.[e]))):F([...N,r]),O(""));break
-;case Nf.stateChangeTypes.InputChange:O(t||"")}},...f});t.useEffect((()=>{x?.(R)
-}),[x,R]),t.useEffect((()=>{o?.(N)}),[o,N]),t.useEffect((()=>{O(w??"")}),[w])
-;const J=!c&&!l&&W;return t.createElement(Ad,{width:p,isOpen:J
-},t.createElement(Fn,{className:"input-label",...K({disabled:c,readOnly:l})
+r&&(F.indexOf(r)>-1?B(F.filter((t=>t?.[e]!==r?.[e]))):B([...F,r]),N(""));break
+;case Nf.stateChangeTypes.InputChange:N(t||"")}},...f});t.useEffect((()=>{x?.(O)
+}),[x,O]),t.useEffect((()=>{M.length!==F.length&&o?.(F)}),[o,F])
+;const ee=!c&&!l&&G;return t.createElement(Ad,{width:p,isOpen:ee
+},t.createElement(Fn,{className:"input-label",...q({disabled:c,readOnly:l})
 },n,s&&t.createElement(jn,null,"*")),t.createElement(kd,{disabled:c,
 isErrored:!!S,"aria-invalid":S
-},t.createElement(Nm,null,!T&&N.map(((e,n)=>t.createElement(Jm,{
-key:`selected-item-${n}`,...j({selectedItem:e,index:n}),"aria-disabled":c,
+},t.createElement(Nm,null,!T&&F.map(((e,n)=>t.createElement(Jm,{
+key:`selected-item-${n}`,...U({selectedItem:e,index:n}),"aria-disabled":c,
 "aria-readonly":l,iconProps:{"aria-disabled":c,disabled:c},onClose:t=>{
-c||l||(t.stopPropagation(),$(e),z?.(e,n))}
-},u?.(e)??""))),t.createElement("input",{placeholder:i,...Z(U({
-preventKeyAction:W,name:d,id:r,disabled:c,readOnly:l})),onKeyDown:e=>{
-"Backspace"!==e.key||R||($(N[N.length-1]),
-P?.()),"Enter"===e.key&&R&&b&&X<0&&y?.({inputValue:R,customValues:!0})},...H
+c||l||(t.stopPropagation(),Y(e),z?.(e,n))}
+},u?.(e)??""))),t.createElement("input",{placeholder:i,...X($({
+preventKeyAction:G,name:d,id:r,disabled:c,readOnly:l})),onKeyDown:e=>{
+"Backspace"!==e.key||O||(Y(F[F.length-1]),
+I?.()),"Enter"===e.key&&O&&b&&Q<0&&y?.({inputValue:O,customValues:!0})},...H
 })),!C&&t.createElement(Un,{onClick:e=>{
-Y([]),e.stopPropagation(),e.preventDefault()}},t.createElement(mr,{
-fill:I.colors.text.primary})),t.createElement(Un,{...G({disabled:c,readOnly:l})
-},t.createElement(Vd,{isOpen:J,fill:I.colors.text.primary,width:8,height:8
-}))),!l&&!c&&t.createElement(Td,{isOpen:W,...q({disabled:c,readOnly:l})
-},E?t.createElement(Rd,null,t.createElement(Em,null)):t.createElement(t.Fragment,null,W&&(0===B.length||b)&&t.createElement(Pd,{
+W([]),e.stopPropagation(),e.preventDefault()}},t.createElement(mr,{
+fill:R.colors.text.primary})),t.createElement(Un,{...K({disabled:c,readOnly:l})
+},t.createElement(Vd,{isOpen:ee,fill:R.colors.text.primary,width:8,height:8
+}))),!l&&!c&&t.createElement(Td,{isOpen:G,...Z({disabled:c,readOnly:l})
+},E?t.createElement(Rd,null,t.createElement(Em,null)):t.createElement(t.Fragment,null,G&&(0===j.length||b)&&t.createElement(Pd,{
 readOnly:!0},b?t.createElement(Id,{tabIndex:0,onClick:e=>{
-e.stopPropagation(),y&&y({inputValue:R,customValues:!0})}
-},g?.(R)||"Click to add"):v||"No items"),W&&B.map(((n,r)=>{
-const a="string"==typeof n?n:n?.[e],o=N.indexOf(n)>-1
-;return t.createElement(Pd,{isHilighted:X===r,isSelected:o,key:a,...Q({item:n,
+e.stopPropagation(),y&&y({inputValue:O,customValues:!0})}
+},g?.(O)||"Click to add"):v||"No items"),G&&j.map(((n,r)=>{
+const a="string"==typeof n?n:n?.[e],o=F.indexOf(n)>-1
+;return t.createElement(Pd,{isHilighted:Q===r,isSelected:o,key:a,...J({item:n,
 index:r})
 },D?D(n):t.createElement(t.Fragment,null,u?.(n)??"",o&&t.createElement(Jc,{
-fill:I.colors.common.accent})))})))),S&&_&&t.createElement(Oc,null,_))}
+fill:R.colors.common.accent})))})))),S&&_&&t.createElement(Oc,null,_))}
 ;function tv(e){
 throw new Error('Could not dynamically require "'+e+'". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.')
 }var nv,rv={exports:{}};(nv=rv).exports=function(){var e,t;function n(){

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "freemium-ui",
-  "version": "2.0.0-beta.37",
+  "version": "2.0.0-beta.38",
   "description": "React Ui Components for Freemium Apps",
   "main": "./index.js",
   "module": "./index.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "freemium-ui",
-  "version": "2.0.0-beta.37",
+  "version": "2.0.0-beta.38",
   "description": "React Ui Components for Freemium Apps",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",