freemium-ui 2.0.0-beta.64 → 2.0.0-beta.66

package/index.cjs.js

@@ -2042,7 +2042,7 @@ name:i.name,ref:d,onCheck:()=>i.onValueChange(o.value),onKeyDown:Cn((e=>{
   font-size: 12px;
   font-weight: 400;
   line-height: 20px;
-`,ws=t=>e.createElement(bs,{...t,
+`,ws=t=>e.createElement(bs,{"aria-live":"polite",role:"status",...t,
 className:`input-helper ${t.className??""}`.trim()
 },t.children),Cs="Checkbox",[zs,Ms]=dn(Cs),[xs,Es]=zs(Cs),Ss=e.forwardRef(((t,n)=>{
 const{__scopeCheckbox:r,name:a,checked:o,defaultChecked:i,required:l,disabled:c,value:s="on",onCheckedChange:u,...d}=t,[h,p]=e.useState(null),f=fn(n,(e=>p(e))),m=e.useRef(!1),v=!h||Boolean(h.closest("form")),[g=!1,y]=Mn({
@@ -2259,7 +2259,8 @@ modal:!0}))}))``,Au=on(xu)``,ku=on(Hu)``,Tu=on(_u)``,Ru=on(Eu)`
   line-height: ${({theme:e})=>e.typography.heading4.lineHeight};
   font-weight: ${({theme:e})=>e.typography.fontWeight["semi-bold"]};
   margin: 0;
-  padding: 32px 32px 0 32px;
+  padding: 32px 32px
+    ${({$hasdescription:e})=>e?"0px":"16px"} 32px;
 `,Ou=on(Vu)`
   font-family: ${({theme:e})=>e.typography.fontFamily};
   font-size: ${({theme:e})=>e.typography.primary.fontSize};
@@ -2267,7 +2268,7 @@ modal:!0}))}))``,Au=on(xu)``,ku=on(Hu)``,Tu=on(_u)``,Ru=on(Eu)`
   line-height: ${({theme:e})=>e.typography.primary.lineHeight};
   letter-spacing: 0px;
   text-align: left;
-  padding: 0 32px ${({$hasChildren:e})=>e?"0px":"32px"} 32px;
+  padding: 0 32px 0px 32px;
 `,Nu=on.div`
   border-top: 1px solid ${({theme:e})=>e.colors.border.light};
   border-bottom-right-radius: 8px;
@@ -12785,16 +12786,16 @@ ref:n}))})),mI=on(oI)`
   }
 `,vI=on(fI)`
   fill: white;
-`,gI=on(uI)``,yI=on(dI)``,bI=on(hI)``,wI=on(pI)``,CI=({children:t,trigger:n,arrow:r,hoverOutToClose:a,align:o,hoverToOpen:i,avoidCollisions:l=!0,replaceTrigger:c=!1,side:s,disabled:u,onClose:d,anchorOrigin:h,autoCloseDuration:p,clickOutToClose:f,transformOrigin:m})=>{
-const[v,g]=e.useState(!1),y=s??("bottom"===h?.vertical&&h.horizontal?"bottom":void 0)??("top"===h?.vertical&&h.horizontal?"top":void 0)??("center"===h?.vertical&&"left"===h.horizontal?"left":void 0)??("center"===h?.vertical&&"right"===h.horizontal?"right":void 0)??"bottom"
-;return e.createElement(gI,{open:v,onOpenChange:e=>{g(e)}
+`,gI=on(uI)``,yI=on(dI)``,bI=on(hI)``,wI=on(pI)``,CI=({children:t,trigger:n,arrow:r,hoverOutToClose:a,align:o,hoverToOpen:i,avoidCollisions:l=!0,replaceTrigger:c=!1,side:s,disabled:u,onClose:d,popoverContentProps:h,popoverRootProps:p,anchorOrigin:f,autoCloseDuration:m,clickOutToClose:v,transformOrigin:g})=>{
+const[y,b]=e.useState(!1),w=s??("bottom"===f?.vertical&&f.horizontal?"bottom":void 0)??("top"===f?.vertical&&f.horizontal?"top":void 0)??("center"===f?.vertical&&"left"===f.horizontal?"left":void 0)??("center"===f?.vertical&&"right"===f.horizontal?"right":void 0)??"bottom"
+;return e.createElement(gI,{open:y,onOpenChange:e=>{b(e)},...p
 },c?e.createElement(e.Fragment,null,n):e.createElement(yI,{asChild:!0,
 className:"PopoverTrigger",disabled:u},e.createElement(Zr,{
-className:"TriggerButtonWrapper",onMouseEnter:()=>{i&&g(!0)}
+className:"TriggerButtonWrapper",onMouseEnter:()=>{i&&b(!0)}
 },n)),e.createElement(bI,null,e.createElement(mI,{forceMount:!0,
-className:"PopoverContent",onMouseLeave:()=>{a&&(g(!1),d?.())},
-onInteractOutside:()=>d?.(),side:y,align:o,sideOffset:8,avoidCollisions:l
-},t,r&&e.createElement(vI,null))))},zI=on.div``,MI=on(ls)`
+className:"PopoverContent",onMouseLeave:()=>{a&&(b(!1),d?.())},
+onInteractOutside:()=>{b(!1),d?.()},side:w,align:o,sideOffset:8,
+avoidCollisions:l,...h},t,r&&e.createElement(vI,null))))},zI=on.div``,MI=on(ls)`
   display: flex;
   flex-direction: column;
   gap: 4px;
@@ -16295,8 +16296,9 @@ open:t,onOpenChange:e=>{e||o?.("root")}
 },e.createElement(Au,null,e.createElement(Ru,{forceMount:!0,style:h,
 className:"AlertDialogOverlay",onClick:e=>{d&&o?.("overlay",e)}
 }),e.createElement(Pu,{forceMount:!0,className:"AlertDialogContent",style:{...p,
-width:m}},n&&e.createElement(Iu,{className:"AlertDialogTitle"
-},n),r&&e.createElement(Ou,{$hasChildren:!!l,className:"AlertDialogDescription"
+width:m}},n&&e.createElement(Iu,{$hasdescription:!!r,
+className:"AlertDialogTitle"},n),r&&e.createElement(Ou,{$hasChildren:!!l,
+className:"AlertDialogDescription"
 },r),l?e.createElement(e.Fragment,null,l):null,e.createElement(Nu,{style:f
 },i&&e.createElement(ku,{asChild:!0},e.createElement(wa,{variant:"secondary",
 autoFocus:!0,"aria-disabled":c,disabled:c,onClick:e=>{
@@ -16378,54 +16380,54 @@ open:t,onOpenChange:e=>{e||l?.()}},e.createElement(dv,null,e.createElement(hv,{
 forceMount:!0,className:"DialogOverlay",onClick:()=>l?.()}),e.createElement(pv,{
 forceMount:!0,className:`DialogContent ${a??""}`.trim(),size:s??"default",
 fullWidth:o,align:r,position:c,style:i
-},n))),exports.MoreVertical=Vr,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:V,locale:L,maxAllowedLength:A,minAllowedLength:k,hideChips:T=!1,hideSelectedItem:R=!1,onBackSpace:P})=>{
-const I=qt(),[O,N]=e.useState(w??""),{getSelectedItemProps:F,getDropdownProps:B,selectedItems:j,removeSelectedItem:$,setSelectedItems:U,addSelectedItem:Y}=Bm({
-initialSelectedItems:M,onStateChange:({selectedItems:e,type:t})=>{switch(t){
+},n))),exports.MoreVertical=Vr,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,hideArrow:z,removeSelectedItem:M,defaultSelectedItems:x=[],handleInputChange:E,isErrored:S,isMenuLoading:_,errorText:H,InputProps:D,itemComponent:V,isDynamicMenu:L,locale:A,maxAllowedLength:k,minAllowedLength:T,hideChips:R=!1,hideSelectedItem:P=!1,onBackSpace:I})=>{
+const O=qt(),[N,F]=e.useState(w??""),{getSelectedItemProps:B,getDropdownProps:j,selectedItems:$,removeSelectedItem:U,setSelectedItems:Y,addSelectedItem:W}=Bm({
+initialSelectedItems:x,onStateChange:({selectedItems:e,type:t})=>{switch(t){
 case Bm.stateChangeTypes.FunctionSetSelectedItems:
 case Bm.stateChangeTypes.SelectedItemKeyDownBackspace:
 case Bm.stateChangeTypes.SelectedItemKeyDownDelete:
 case Bm.stateChangeTypes.DropdownKeyDownBackspace:
 case Bm.stateChangeTypes.FunctionRemoveSelectedItem:
 case Bm.stateChangeTypes.FunctionAddSelectedItem:e&&o?.(e)}},...m
-}),W=e.useMemo((()=>a.filter((e=>{const n="string"==typeof e?e:e?.[h||t]
-;return!(R&&j.some((t=>u?.(t)===u?.(e))))&&(!O||n.toLowerCase().includes(O.toLowerCase()))
-}))),[a,O,h,t,R,j,u]),{isOpen:G,getToggleButtonProps:K,getLabelProps:q,getMenuProps:Z,getInputProps:X,highlightedIndex:Q,getItemProps:J}=fm({
-id:r,items:W,itemToString:e=>e&&u?u(e,"downshift"):"",selectedItem:null,
-inputValue:O,stateReducer:(e,t)=>{const{changes:n,type:r}=t;switch(r){
+}),G=e.useMemo((()=>a.filter((e=>{const n="string"==typeof e?e:e?.[h||t]
+;return!(P&&$.some((t=>u?.(t)===u?.(e))))&&(!N||n.toLowerCase().includes(N.toLowerCase()))
+}))),[a,N,h,t,P,$,u]),{isOpen:K,getToggleButtonProps:q,getLabelProps:Z,getMenuProps:X,getInputProps:Q,highlightedIndex:J,getItemProps:ee}=fm({
+id:r,items:G,itemToString:e=>e&&u?u(e,"downshift"):"",selectedItem:null,
+inputValue:N,stateReducer:(e,t)=>{const{changes:n,type:r}=t;switch(r){
 case fm.stateChangeTypes.InputKeyDownEnter:case fm.stateChangeTypes.ItemClick:
-return{...n,isOpen:!O};default:return n}},
+return{...n,isOpen:!N};default:return n}},
 onStateChange:({inputValue:e,type:n,selectedItem:r})=>{switch(n){
 case fm.stateChangeTypes.InputKeyDownEnter:case fm.stateChangeTypes.ItemClick:
 case fm.stateChangeTypes.InputBlur:
-r&&(j.find((e=>e?.[t]===r?.[t]))?$(r):Y(r),N(""),x?.(""));break
-;case fm.stateChangeTypes.InputChange:N(e??""),x?.(e??"")}},...f
-}),ee=!c&&!l&&G,te=X(B({preventKeyAction:G,name:d,disabled:c,readOnly:l
-})),ne=e=>{if(e&&b&&y&&Q<0){const t=y({inputValue:e,customValues:!0});Y(t),N("")
+r&&($.find((e=>e?.[t]===r?.[t]))?U(r):W(r),F(""),E?.(""));break
+;case fm.stateChangeTypes.InputChange:F(e??""),E?.(e??"")}},...f
+}),te=!c&&!l&&K,ne=Q(j({preventKeyAction:K,name:d,disabled:c,readOnly:l
+})),re=e=>{if(e&&b&&y&&J<0){const t=y({inputValue:e,customValues:!0});W(t),F("")
 }};return e.createElement(ch,{width:p},e.createElement(Fr,{
-className:"input-label",...q({disabled:c,readOnly:l})
+className:"input-label",...Z({disabled:c,readOnly:l})
 },n,n&&s&&e.createElement(jr,null,"*")),e.createElement(sh,{disabled:c,
-$isErrored:!!E,"aria-invalid":E
-},e.createElement(fv,null,!T&&j.map(((t,n)=>e.createElement(Hv,{
-key:`selected-item-${n}`,...F({selectedItem:t,index:n}),"aria-disabled":c,
+$isErrored:!!S,"aria-invalid":S,className:"dropdown-toggle-button"
+},e.createElement(fv,null,!R&&$.map(((t,n)=>e.createElement(Hv,{
+key:`selected-item-${n}`,...B({selectedItem:t,index:n}),"aria-disabled":c,
 "aria-readonly":l,iconProps:{"aria-disabled":c,disabled:c},onClose:e=>{
-c||l||(e.stopPropagation(),$(t))}},u?.(t)??""))),e.createElement("input",{
-placeholder:i,...te,onKeyDown:e=>{
-"Backspace"!==e.key||O||($(j[j.length-1]),P?.()),
-"Enter"===e.key&&ne(O),te?.onKeyDown?.(e)},...H})),!C&&e.createElement($r,{
+c||l||(e.stopPropagation(),U(t))}},u?.(t)??""))),e.createElement("input",{
+placeholder:i,...ne,onKeyDown:e=>{
+"Backspace"!==e.key||N||(U($[$.length-1]),I?.()),
+"Enter"===e.key&&re(N),ne?.onKeyDown?.(e)},...D})),!C&&e.createElement($r,{
 "aria-label":"Clear",onClick:e=>{
-U([]),N(""),e.stopPropagation(),e.preventDefault()}},e.createElement(Mr,{
-fill:I.colors.text.primary})),e.createElement($r,{...K({disabled:c,readOnly:l})
-},e.createElement(lh,{$isOpen:ee,fill:I.colors.text.primary,width:8,height:8
-}))),!l&&!c&&e.createElement(uh,{$isOpen:G,...Z({disabled:c,readOnly:l})
-},S?e.createElement(ph,null,e.createElement(tv,null)):e.createElement(e.Fragment,null,G&&(0===W.length||b)&&e.createElement(dh,{
+Y([]),F(""),e.stopPropagation(),e.preventDefault()}},e.createElement(Mr,{
+fill:O.colors.text.primary})),!z&&e.createElement($r,{...q({disabled:c,
+readOnly:l})},e.createElement(lh,{$isOpen:te,fill:O.colors.text.primary,width:8,
+height:8}))),!l&&!c&&e.createElement(uh,{$isOpen:K,...X({disabled:c,readOnly:l})
+},_?e.createElement(ph,null,e.createElement(tv,null)):e.createElement(e.Fragment,null,K&&(0===G.length||b)&&e.createElement(dh,{
 readOnly:!0},b?e.createElement(hh,{tabIndex:0,onClick:e=>{
-e.stopPropagation(),ne(O)}
-},g?.(O)??"Click to add"):v??"No items"),G&&W.map(((n,r)=>{
-const a="string"==typeof n?`${n}${r}`.trim():`${n?.[t]??""}${r}`.trim(),o=j.map((e=>e?.[t])).filter(Boolean).indexOf(n?.[t]??"")>-1
-;return e.createElement(dh,{$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(xr,{
-fill:I.colors.common.accent})))})))),E&&_&&e.createElement(ws,null,_))
+e.stopPropagation(),re(N)}
+},g?.(N)??"Click to add"):v??"No items"),K&&G.map(((n,r)=>{
+const a="string"==typeof n?`${n}${r}`.trim():`${n?.[t]??""}${r}`.trim(),o=$.map((e=>e?.[t])).filter(Boolean).indexOf(n?.[t]??"")>-1
+;return e.createElement(dh,{$isHilighted:J===r,$isSelected:o,key:a,...ee({
+item:n,index:r})
+},V?V(n):e.createElement(e.Fragment,null,u?.(n)??"",o&&e.createElement(xr,{
+fill:O.colors.common.accent})))})))),S&&H&&e.createElement(ws,null,H))
 },exports.Popover=CI,
 exports.PopoverClose=wI,exports.PopoverTrigger=yI,exports.Radio=({checked:t,className:n,disabled:r,id:a,isRequired:o,label:i,name:l,readOnly:c,...s})=>e.createElement(MI,{
 className:`RadioGroupRoot ${n??""}`.trim(),id:a,name:l,

package/index.d.ts

@@ -819,6 +819,10 @@ interface MultiSelectDropdownProps<T extends DefaultMultiSelectDropdownItem = De
      * Whether to allow hide or clear when click
      */
     hideClear?: boolean;
+    /**
+     * Whether to hide or show arrow
+     */
+    hideArrow?: boolean;
     /**
      * Error text to be shown
      */
@@ -873,7 +877,7 @@ interface MultiSelectDropdownProps<T extends DefaultMultiSelectDropdownItem = De
 /**
  * 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, hideSelectedItem, 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, hideArrow, removeSelectedItem: rSelectedItem, defaultSelectedItems, handleInputChange, isErrored, isMenuLoading, errorText, InputProps, itemComponent, isDynamicMenu, locale, maxAllowedLength, minAllowedLength, hideChips, hideSelectedItem, onBackSpace, }: MultiSelectDropdownProps<T>) => react__default.JSX.Element;
 
 type DefaultProps = {
     /**
@@ -973,6 +977,8 @@ interface PopoverProps {
      */
     disabled?: boolean;
     replaceTrigger?: boolean;
+    popoverContentProps?: Popover$1.PopoverContentProps;
+    popoverRootProps?: Popover$1.PopoverProps;
     /**
      * The children or label
      */
@@ -1030,7 +1036,7 @@ interface PopoverProps {
 /**
  * Popover need two slots popover-trigger and popover-content. By default on clicking the trigger the content will be displayed. The props can be used to change the position of the content, width of the component and the distance between the trigger and the content.
  */
-declare const Popover: ({ children, trigger, arrow, hoverOutToClose, align, hoverToOpen, avoidCollisions, replaceTrigger, side: s, disabled, onClose, anchorOrigin, autoCloseDuration, clickOutToClose, transformOrigin, }: PopoverProps) => react__default.JSX.Element;
+declare const Popover: ({ children, trigger, arrow, hoverOutToClose, align, hoverToOpen, avoidCollisions, replaceTrigger, side: s, disabled, onClose, popoverContentProps, popoverRootProps, anchorOrigin, autoCloseDuration, clickOutToClose, transformOrigin, }: PopoverProps) => react__default.JSX.Element;
 
 declare const PopoverTrigger: styled_components.IStyledComponent<"web", styled_components_dist_types.FastOmit<Omit<Popover$1.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | react.RefObject<HTMLButtonElement> | null | undefined;