freemium-ui 2.0.0-beta.32 → 2.0.0-beta.33

package/index.cjs.js

@@ -3625,7 +3625,7 @@ className:"end-adornment"},i)),o&&e.createElement("div",{className:"end-label"
 className:"fui-loader",speed:r,size:n})
 },nm=({type:t="button",...n})=>"button"===t?e.createElement(rm,{...n,
 type:"button"}):e.createElement(am,{...n,type:"input"}),rm=t=>{
-const n=qt(),{itemIdentifier:r="id",label:a,id:o,items:i=[],onChange:l,placeholder:c,readOnly:s=!1,disabled:u=!1,isRequired:d=!1,showTick:h=!0,itemToString:p,name:f,itemComponent:m,width:v,className:g,style:y,defaultSelectedItem:b=null,isErrored:w,isMenuLoading:C,errorText:z,defaultIsOpen:M,isOpen:x}=t,E=e.useMemo((()=>{
+const n=qt(),{itemIdentifier:r="id",label:a,id:o,items:i=[],onChange:l,placeholder:c,readOnly:s=!1,disabled:u=!1,isRequired:d=!1,showTick:h=!0,itemToString:p,name:f,itemComponent:m,width:v,className:g,style:y,defaultSelectedItem:b=null,isErrored:w,isMenuLoading:C,errorText:z,defaultIsOpen:M,isOpen:x,contentProps:E}=t,S=e.useMemo((()=>{
 const e=i.reduce(((e,t)=>{const n=t.group??"default"
 ;return e[n]?e[n].push(t):e[n]=[t],e}),{})
 ;return Object.keys(e).sort(((e,t)=>"default"!==e?1:-1)).map((t=>({key:t,
@@ -3640,11 +3640,11 @@ isErrored:!!w,"aria-invalid":!!w,width:v,style:y},e.createElement(gd,{
 className:"SelectValue",placeholder:c}),e.createElement(Hd,{
 className:"SelectIcon"},e.createElement(Rl,{fill:n.colors.text.primary
 }))),e.createElement(yd,null,e.createElement(zd,{className:"SelectContent",
-position:"popper",side:"bottom",sideOffset:4,sticky:"partial"
+position:"popper",side:"bottom",sideOffset:4,sticky:"partial",...E
 },C?e.createElement(hd,null,e.createElement(tm,null)):e.createElement(e.Fragment,null,e.createElement(Sd,{
 className:"SelectScrollButton"},e.createElement(Rl,{fill:n.colors.text.primary
 })),e.createElement(xd,{className:"SelectViewport"
-},E.map((t=>e.createElement(vd,{key:t.key,className:"SelectGroup"
+},S.map((t=>e.createElement(vd,{key:t.key,className:"SelectGroup"
 },"default"!==t.key&&e.createElement(Cd,{className:"SelectLabel"
 },t.key,e.createElement(wd,null)),t.items.map(((t,n)=>{
 const a="string"==typeof t?t:t?.[r],o=t?.[r]??""
@@ -3654,35 +3654,35 @@ showTick:h}):e.createElement(om,{key:a,value:o||a,disabled:!!t.disabled,
 showTick:h},p(t,"list-item")))})))))),e.createElement(_d,{
 className:"SelectScrollButton"},e.createElement(Rl,{fill:n.colors.text.primary
 })))))),w&&z&&e.createElement(vc,null,z))
-},am=({itemIdentifier:t="id",label:n,id:r,items:a=[],placeholder:o,readOnly:i=!1,disabled:l=!1,isRequired:c=!1,hideClear:s=!1,itemToString:u,name:d,filterKey:h,width:p,customValues:f,onCustomValueAdd:m,itemComponent:v,emptyItemsText:g,getCustomMessage:y,onChange:b,useComboboxProps:w,isErrored:C,errorText:z,defaultSelectedItem:M,isMenuLoading:x})=>{
-const E=qt(),[S,_]=e.useState(a),{isOpen:H,selectedItem:D,getToggleButtonProps:L,getLabelProps:V,getMenuProps:A,openMenu:k,highlightedIndex:T,setHighlightedIndex:R,setInputValue:P,inputValue:I,getItemProps:O,getInputProps:N}=ff({
-selectedItem:M,items:S,onSelectedItemChange:({selectedItem:e})=>{
+},am=({itemIdentifier:t="id",label:n,id:r,items:a=[],placeholder:o,readOnly:i=!1,disabled:l=!1,isRequired:c=!1,hideClear:s=!1,itemToString:u,name:d,filterKey:h,width:p,customValues:f,onCustomValueAdd:m,itemComponent:v,emptyItemsText:g,getCustomMessage:y,onChange:b,useComboboxProps:w,isErrored:C,errorText:z,defaultSelectedItem:M,isMenuLoading:x,contentProps:E})=>{
+const S=qt(),[_,H]=e.useState(a),{isOpen:D,selectedItem:L,getToggleButtonProps:V,getLabelProps:A,getMenuProps:k,openMenu:T,highlightedIndex:R,setHighlightedIndex:P,setInputValue:I,inputValue:O,getItemProps:N,getInputProps:F}=ff({
+selectedItem:M,items:_,onSelectedItemChange:({selectedItem:e})=>{
 console.log("onSelectedItemChange",{sI:e}),b?.(e??null)},
 onIsOpenChange:({isOpen:e})=>{
-if(e&&(""===I||D&&h&&(I||"").toLowerCase()===`${D?.[h||t]||""}`.toLowerCase()))_(a),
-R(D?a.indexOf(D):-1);else{const t=D?u(D):"";D&&!e&&t!==I&&P(t)}e||_(a)},
+if(e&&(""===O||L&&h&&(O||"").toLowerCase()===`${L?.[h||t]||""}`.toLowerCase()))H(a),
+P(L?a.indexOf(L):-1);else{const t=L?u(L):"";L&&!e&&t!==O&&I(t)}e||H(a)},
 onInputValueChange:({inputValue:e})=>{
-H&&(""===e||D&&h&&(e||"").toLowerCase()===`${D?.[h||t]||""}`.toLowerCase())?_(a):_((n=>n.filter((n=>!e||("string"==typeof n?n:n?.[h||t]).toLowerCase().includes(e.toLowerCase())))))
-},itemToString:e=>e?u(e,"downshift"):"",...w}),F=!l&&!i&&H
-;return e.createElement(ld,{width:p,isOpen:F},e.createElement(wn,{
-className:"input-label",...V({disabled:l,readOnly:i})
-},n,c&&e.createElement(zn,null,"*")),e.createElement(Kf,{...N({name:d,
+D&&(""===e||L&&h&&(e||"").toLowerCase()===`${L?.[h||t]||""}`.toLowerCase())?H(a):H((n=>n.filter((n=>!e||("string"==typeof n?n:n?.[h||t]).toLowerCase().includes(e.toLowerCase())))))
+},itemToString:e=>e?u(e,"downshift"):"",...w}),B=!l&&!i&&D
+;return e.createElement(ld,{width:p,isOpen:B},e.createElement(wn,{
+className:"input-label",...A({disabled:l,readOnly:i})
+},n,c&&e.createElement(zn,null,"*")),e.createElement(Kf,{...F({name:d,
 readOnly:i,disabled:l,id:r}),placeholder:o,
-endAdornment:e.createElement(pd,null,!l&&!i&&!s&&D&&e.createElement(Mn,{
+endAdornment:e.createElement(pd,null,!l&&!i&&!s&&L&&e.createElement(Mn,{
 onClick:e=>{
-console.log("onClick WORKING"),P(""),b?.(null),k(),e.stopPropagation()},style:{
-borderRadius:"50%"}},e.createElement(qn,{fill:E.colors.text.primary
-})),e.createElement(Mn,{...L({disabled:l,readOnly:i})},e.createElement(id,{
-isOpen:F,fill:E.colors.text.primary,width:8,height:8})))
-}),!i&&!l&&e.createElement(sd,{isOpen:H,...A({disabled:l,readOnly:i})
-},x?e.createElement(hd,null,e.createElement(tm,null)):e.createElement(e.Fragment,null,H&&0===S.length&&e.createElement(e.Fragment,null,f?e.createElement(ud,null,e.createElement(dd,{
-onClick:e=>{e.stopPropagation(),m&&m({inputValue:I,customValues:!0}),P("")}
-},y?.(I)||"Click to add")):e.createElement(ud,{readOnly:!0
-},g||"No items")),H&&S.map(((n,r)=>{const a="string"==typeof n?n:n?.[t]
-;return e.createElement(e.Fragment,null,v?v(n,{isHilighted:T===r,
-isSelected:D===n,key:a,...O({item:n,index:r})}):e.createElement(ud,{
-isHilighted:T===r,isSelected:D===n,key:a,...O({item:n,index:r})
-},u(n),D===n&&e.createElement(Lc,{fill:E.colors.common.accent})))
+console.log("onClick WORKING"),I(""),b?.(null),T(),e.stopPropagation()},style:{
+borderRadius:"50%"}},e.createElement(qn,{fill:S.colors.text.primary
+})),e.createElement(Mn,{...V({disabled:l,readOnly:i})},e.createElement(id,{
+isOpen:B,fill:S.colors.text.primary,width:8,height:8})))
+}),!i&&!l&&e.createElement(sd,{isOpen:D,...E,...k({disabled:l,readOnly:i})
+},x?e.createElement(hd,null,e.createElement(tm,null)):e.createElement(e.Fragment,null,D&&0===_.length&&e.createElement(e.Fragment,null,f?e.createElement(ud,null,e.createElement(dd,{
+onClick:e=>{e.stopPropagation(),m&&m({inputValue:O,customValues:!0}),I("")}
+},y?.(O)||"Click to add")):e.createElement(ud,{readOnly:!0
+},g||"No items")),D&&_.map(((n,r)=>{const a="string"==typeof n?n:n?.[t]
+;return e.createElement(e.Fragment,null,v?v(n,{isHilighted:R===r,
+isSelected:L===n,key:a,...N({item:n,index:r})}):e.createElement(ud,{
+isHilighted:R===r,isSelected:L===n,key:a,...N({item:n,index:r})
+},u(n),L===n&&e.createElement(Lc,{fill:S.colors.common.accent})))
 })))),C&&z&&e.createElement(vc,null,z))
 },om=e.forwardRef((({children:t,showTick:n=!0,...r},a)=>{const o=qt()
 ;return e.createElement(bd,{className:"SelectItem",...r,ref:a

package/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import * as react from 'react';
-import react__default from 'react';
+import react__default, { HTMLAttributes } from 'react';
 import * as Popover$1 from '@radix-ui/react-popover';
 import { PopperContentProps } from '@radix-ui/react-popover';
 import { RadioGroupProps as RadioGroupProps$1, RadioGroupContextValue } from '@radix-ui/react-radio-group';
@@ -470,6 +470,7 @@ interface DropdownProps<T extends DefaultDropdownItem = DefaultDropdownItem> ext
      */
     useComboboxProps?: UseComboboxProps<T>;
     itemComponent?: (item: T, props?: DropdownItemProps | DropdownInputItemProps) => React.ReactNode | string;
+    contentProps?: Pick<HTMLAttributes<HTMLElement>, 'style' | 'className'>;
 }
 interface DropdownButtonProps<T extends DefaultDropdownItem = DefaultDropdownItem> extends DropdownProps<T> {
 }

package/index.js

@@ -3604,7 +3604,7 @@ className:"end-adornment"},i)),o&&t.createElement("div",{className:"end-label"
 className:"fui-loader",speed:r,size:n})
 },_m=({type:e="button",...n})=>"button"===e?t.createElement(Hm,{...n,
 type:"button"}):t.createElement(Dm,{...n,type:"input"}),Hm=e=>{
-const n=vn(),{itemIdentifier:r="id",label:a,id:o,items:i=[],onChange:l,placeholder:c,readOnly:s=!1,disabled:u=!1,isRequired:d=!1,showTick:h=!0,itemToString:p,name:f,itemComponent:m,width:v,className:g,style:y,defaultSelectedItem:b=null,isErrored:w,isMenuLoading:C,errorText:z,defaultIsOpen:M,isOpen:x}=e,S=t.useMemo((()=>{
+const n=vn(),{itemIdentifier:r="id",label:a,id:o,items:i=[],onChange:l,placeholder:c,readOnly:s=!1,disabled:u=!1,isRequired:d=!1,showTick:h=!0,itemToString:p,name:f,itemComponent:m,width:v,className:g,style:y,defaultSelectedItem:b=null,isErrored:w,isMenuLoading:C,errorText:z,defaultIsOpen:M,isOpen:x,contentProps:S}=e,E=t.useMemo((()=>{
 const e=i.reduce(((e,t)=>{const n=t.group??"default"
 ;return e[n]?e[n].push(t):e[n]=[t],e}),{})
 ;return Object.keys(e).sort(((e,t)=>"default"!==e?1:-1)).map((t=>({key:t,
@@ -3619,11 +3619,11 @@ isErrored:!!w,"aria-invalid":!!w,width:v,style:y},t.createElement(jd,{
 className:"SelectValue",placeholder:c}),t.createElement(Jd,{
 className:"SelectIcon"},t.createElement(nc,{fill:n.colors.text.primary
 }))),t.createElement(Ud,null,t.createElement(Gd,{className:"SelectContent",
-position:"popper",side:"bottom",sideOffset:4,sticky:"partial"
+position:"popper",side:"bottom",sideOffset:4,sticky:"partial",...S
 },C?t.createElement(Rd,null,t.createElement(Em,null)):t.createElement(t.Fragment,null,t.createElement(Xd,{
 className:"SelectScrollButton"},t.createElement(nc,{fill:n.colors.text.primary
 })),t.createElement(qd,{className:"SelectViewport"
-},S.map((e=>t.createElement(Bd,{key:e.key,className:"SelectGroup"
+},E.map((e=>t.createElement(Bd,{key:e.key,className:"SelectGroup"
 },"default"!==e.key&&t.createElement(Wd,{className:"SelectLabel"
 },e.key,t.createElement(Yd,null)),e.items.map(((e,n)=>{
 const a="string"==typeof e?e:e?.[r],o=e?.[r]??""
@@ -3633,35 +3633,35 @@ showTick:h}):t.createElement(Lm,{key:a,value:o||a,disabled:!!e.disabled,
 showTick:h},p(e,"list-item")))})))))),t.createElement(Qd,{
 className:"SelectScrollButton"},t.createElement(nc,{fill:n.colors.text.primary
 })))))),w&&z&&t.createElement(Oc,null,z))
-},Dm=({itemIdentifier:e="id",label:n,id:r,items:a=[],placeholder:o,readOnly:i=!1,disabled:l=!1,isRequired:c=!1,hideClear:s=!1,itemToString:u,name:d,filterKey:h,width:p,customValues:f,onCustomValueAdd:m,itemComponent:v,emptyItemsText:g,getCustomMessage:y,onChange:b,useComboboxProps:w,isErrored:C,errorText:z,defaultSelectedItem:M,isMenuLoading:x})=>{
-const S=vn(),[E,_]=t.useState(a),{isOpen:H,selectedItem:D,getToggleButtonProps:L,getLabelProps:V,getMenuProps:A,openMenu:k,highlightedIndex:T,setHighlightedIndex:P,setInputValue:I,inputValue:R,getItemProps:O,getInputProps:N}=Nf({
-selectedItem:M,items:E,onSelectedItemChange:({selectedItem:e})=>{
+},Dm=({itemIdentifier:e="id",label:n,id:r,items:a=[],placeholder:o,readOnly:i=!1,disabled:l=!1,isRequired:c=!1,hideClear:s=!1,itemToString:u,name:d,filterKey:h,width:p,customValues:f,onCustomValueAdd:m,itemComponent:v,emptyItemsText:g,getCustomMessage:y,onChange:b,useComboboxProps:w,isErrored:C,errorText:z,defaultSelectedItem:M,isMenuLoading:x,contentProps:S})=>{
+const E=vn(),[_,H]=t.useState(a),{isOpen:D,selectedItem:L,getToggleButtonProps:V,getLabelProps:A,getMenuProps:k,openMenu:T,highlightedIndex:P,setHighlightedIndex:I,setInputValue:R,inputValue:O,getItemProps:N,getInputProps:F}=Nf({
+selectedItem:M,items:_,onSelectedItemChange:({selectedItem:e})=>{
 console.log("onSelectedItemChange",{sI:e}),b?.(e??null)},
 onIsOpenChange:({isOpen:t})=>{
-if(t&&(""===R||D&&h&&(R||"").toLowerCase()===`${D?.[h||e]||""}`.toLowerCase()))_(a),
-P(D?a.indexOf(D):-1);else{const e=D?u(D):"";D&&!t&&e!==R&&I(e)}t||_(a)},
+if(t&&(""===O||L&&h&&(O||"").toLowerCase()===`${L?.[h||e]||""}`.toLowerCase()))H(a),
+I(L?a.indexOf(L):-1);else{const e=L?u(L):"";L&&!t&&e!==O&&R(e)}t||H(a)},
 onInputValueChange:({inputValue:t})=>{
-H&&(""===t||D&&h&&(t||"").toLowerCase()===`${D?.[h||e]||""}`.toLowerCase())?_(a):_((n=>n.filter((n=>!t||("string"==typeof n?n:n?.[h||e]).toLowerCase().includes(t.toLowerCase())))))
-},itemToString:e=>e?u(e,"downshift"):"",...w}),F=!l&&!i&&H
-;return t.createElement(Ad,{width:p,isOpen:F},t.createElement(Fn,{
-className:"input-label",...V({disabled:l,readOnly:i})
-},n,c&&t.createElement(jn,null,"*")),t.createElement(bm,{...N({name:d,
+D&&(""===t||L&&h&&(t||"").toLowerCase()===`${L?.[h||e]||""}`.toLowerCase())?H(a):H((n=>n.filter((n=>!t||("string"==typeof n?n:n?.[h||e]).toLowerCase().includes(t.toLowerCase())))))
+},itemToString:e=>e?u(e,"downshift"):"",...w}),B=!l&&!i&&D
+;return t.createElement(Ad,{width:p,isOpen:B},t.createElement(Fn,{
+className:"input-label",...A({disabled:l,readOnly:i})
+},n,c&&t.createElement(jn,null,"*")),t.createElement(bm,{...F({name:d,
 readOnly:i,disabled:l,id:r}),placeholder:o,
-endAdornment:t.createElement(Od,null,!l&&!i&&!s&&D&&t.createElement(Un,{
+endAdornment:t.createElement(Od,null,!l&&!i&&!s&&L&&t.createElement(Un,{
 onClick:e=>{
-console.log("onClick WORKING"),I(""),b?.(null),k(),e.stopPropagation()},style:{
-borderRadius:"50%"}},t.createElement(mr,{fill:S.colors.text.primary
-})),t.createElement(Un,{...L({disabled:l,readOnly:i})},t.createElement(Vd,{
-isOpen:F,fill:S.colors.text.primary,width:8,height:8})))
-}),!i&&!l&&t.createElement(Td,{isOpen:H,...A({disabled:l,readOnly:i})
-},x?t.createElement(Rd,null,t.createElement(Em,null)):t.createElement(t.Fragment,null,H&&0===E.length&&t.createElement(t.Fragment,null,f?t.createElement(Pd,null,t.createElement(Id,{
-onClick:e=>{e.stopPropagation(),m&&m({inputValue:R,customValues:!0}),I("")}
-},y?.(R)||"Click to add")):t.createElement(Pd,{readOnly:!0
-},g||"No items")),H&&E.map(((n,r)=>{const a="string"==typeof n?n:n?.[e]
-;return t.createElement(t.Fragment,null,v?v(n,{isHilighted:T===r,
-isSelected:D===n,key:a,...O({item:n,index:r})}):t.createElement(Pd,{
-isHilighted:T===r,isSelected:D===n,key:a,...O({item:n,index:r})
-},u(n),D===n&&t.createElement(Jc,{fill:S.colors.common.accent})))
+console.log("onClick WORKING"),R(""),b?.(null),T(),e.stopPropagation()},style:{
+borderRadius:"50%"}},t.createElement(mr,{fill:E.colors.text.primary
+})),t.createElement(Un,{...V({disabled:l,readOnly:i})},t.createElement(Vd,{
+isOpen:B,fill:E.colors.text.primary,width:8,height:8})))
+}),!i&&!l&&t.createElement(Td,{isOpen:D,...S,...k({disabled:l,readOnly:i})
+},x?t.createElement(Rd,null,t.createElement(Em,null)):t.createElement(t.Fragment,null,D&&0===_.length&&t.createElement(t.Fragment,null,f?t.createElement(Pd,null,t.createElement(Id,{
+onClick:e=>{e.stopPropagation(),m&&m({inputValue:O,customValues:!0}),R("")}
+},y?.(O)||"Click to add")):t.createElement(Pd,{readOnly:!0
+},g||"No items")),D&&_.map(((n,r)=>{const a="string"==typeof n?n:n?.[e]
+;return t.createElement(t.Fragment,null,v?v(n,{isHilighted:P===r,
+isSelected:L===n,key:a,...N({item:n,index:r})}):t.createElement(Pd,{
+isHilighted:P===r,isSelected:L===n,key:a,...N({item:n,index:r})
+},u(n),L===n&&t.createElement(Jc,{fill:E.colors.common.accent})))
 })))),C&&z&&t.createElement(Oc,null,z))
 },Lm=t.forwardRef((({children:e,showTick:n=!0,...r},a)=>{const o=vn()
 ;return t.createElement($d,{className:"SelectItem",...r,ref:a

package/package.json

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